00:00:02course in this video we’re going to look
00:00:04at the ins and outs of react j/s alright
00:00:08and react is actually one of my favorite
00:00:10technologies that I’ve worked with
00:00:12lately and if you haven’t used it I
00:00:15definitely suggest really looking into
00:00:17it because it can change the way that
00:00:19you think of user interfaces and work
00:00:21with user interfaces I’m working on a 10
00:00:25project react course now as soon as
00:00:28that’s available I’ll put the link in
00:00:30the description I also have an intro to
00:00:32react and a react and flux course
00:00:35project course so you can check out as
00:00:37well alright now we are going to jump in
00:00:41and look at some code but I do want to
00:00:43just go over real quick I’m just
00:00:45basically what react is and some of its
00:00:49advantages
00:00:49alright so it’s an open source
00:00:51JavaScript library for building dynamic
00:00:54user interfaces and it doesn’t have
00:00:58anything to do with the backend of your
00:01:01application working with a database and
00:01:04so on it’s it’s basically the V in MVC a
00:01:09and Model View controller it’s
00:01:11maintained by Facebook Instagram and the
00:01:14community of individual developers so
00:01:18some advantages of react it allows you
00:01:21to design simple declarative views for
00:01:24each state in your application if you
00:01:27don’t know what I mean by state if we
00:01:28think of an email client when you view
00:01:32your inbox that’s considered a state if
00:01:34you were to click compose and then your
00:01:36editor opens up that’s another state so
00:01:39react takes those states and allows you
00:01:41to create and manage views and
00:01:44components for them alright so
00:01:46everything in a view is encapsulated in
00:01:48a component and those components can
00:01:50have their own properties and state as
00:01:52well if you want to get into more
00:01:55complicated application wide state you
00:01:59could look into flux or redux which is
00:02:02an application architecture but that’s a
00:02:05little more complicated than what I want
00:02:07to get into today alright so we’ll be
00:02:10dealing strictly with react Jas
00:02:13react uses what’s called a virtual Dom
00:02:16or virtual document object model I’ll
00:02:18talk more about that in a minute but
00:02:20basically it allows you to work with and
00:02:22render only certain parts of the Dom
00:02:25that you need another great advantage of
00:02:28react is it’s completely independent of
00:02:31the rest of your app as I said so you
00:02:34can use it with pretty much any other
00:02:36framework or any other technology that
00:02:39you’d like it also can render on the
00:02:42client or the server you can use it with
00:02:44nodejs and NPM
00:02:46as well as just including it as in a
00:02:50script tag and using it right near HTML
00:02:53files so as I said react uses a virtual
00:02:58Dom and it basically abstracts away the
00:03:01Dom and creates its own version which is
00:03:04simplified and only includes the things
00:03:06that you need all right it also helps us
00:03:09identify which parts have changed so
00:03:12when you when you update your component
00:03:16somehow and you want to basically re
00:03:19render it instead of having to refresh
00:03:22the entire application react can take a
00:03:25look at what’s changed and look at the
00:03:27original Dom and then just re render
00:03:30that part that needs to update all right
00:03:33so it determines how to upload the
00:03:35browser’s Dom more efficiently and it’s
00:03:38also much more lightweight and that
00:03:40makes it work a lot faster all right so
00:03:45let’s take a look at an extremely simple
00:03:47application or extremely simple
00:03:50component called hello message and you
00:03:53can see that basically we have a class
00:03:55called hello message that extends react
00:03:57component and inside here we have a
00:04:00method or a function called render which
00:04:03is the only function that’s actually
00:04:04required in a component there’s you know
00:04:08many more and you can create custom
00:04:09functions but render is required and you
00:04:12can see we’re returning what looks like
00:04:14an HTML element this is actually JSX
00:04:18ok Java scripts intact extension which
00:04:21I’ll talk about in a second
00:04:24basically what we’re doing is saying
00:04:26hello and then we have this this dot
00:04:28property or a dot props name all right
00:04:31so this is a component property now down
00:04:34here we’re using the react Dom to render
00:04:37it you can see we’re using this hello
00:04:39message which is the name of the
00:04:40component and we’re passing in a
00:04:42property called name with the value of
00:04:44Jane all right so right here would
00:04:46display whatever we pass in here which
00:04:49is Jane and then this parameter is where
00:04:52we want to insert the component in our
00:04:54HTML so typically you’d have a div with
00:04:58the ID of a pour route or something like
00:05:01that and you would insert insert it
00:05:03right in there all right so JSX stands
00:05:08for JavaScript syntax extension and it’s
00:05:11a preprocessor step that adds xml to
00:05:13JavaScript it looks much like XML or
00:05:16HTML there are a few differences and
00:05:19they’ll go into that later on but
00:05:22basically it defines a familiar syntax
00:05:25for defining tree structures with
00:05:28attributes and it’s not required but is
00:05:31definitely recommended and maich thing
00:05:34makes things much easier and later on I
00:05:37can show you an example of JSX and also
00:05:41the JavaScript that generates it and you
00:05:44can see how much easier it is to just
00:05:46use JSX so what you’ll learn in this
00:05:50mini-course how to create a react
00:05:52application how to create components
00:05:54manage state and properties handle
00:05:57events work with forms and input work
00:06:00with JSX
00:06:01we’ll take a look at some of the
00:06:03lifecycle methods and also how to fetch
00:06:06data from an API and bring it into our
00:06:08component all right so enough of the
00:06:13slides let’s jump in and create a react
00:06:16application all right so we’re going to
00:06:18jump in and start to write some code
00:06:20with react j/s now as far as the
00:06:22application will build it’s a very
00:06:24simple project management app but I
00:06:26don’t really want you to focus on the
00:06:28functionality of the application because
00:06:31my goal in this video is to show you the
00:06:33different parts of react and to teach
00:06:35you the fundamentals then
00:06:37you can move on to create your own
00:06:38applications and ideas all right so if I
00:06:42go to the react website and click on get
00:06:44started it takes us to a simple hello
00:06:47world example we want to click on this
00:06:49installation link right here alright and
00:06:52there’s a couple different ways many
00:06:54different ways you can use react you
00:06:57could even just include the two scripts
00:06:59here react j/s and react Dom right in
00:07:02your index.html file and work with react
00:07:06but we want to be a bit more efficient
00:07:09and clean so I used to use something
00:07:14like web pack or gulp along with the
00:07:17react plugins but recently they created
00:07:21this tool this create react app
00:07:23command-line tool that will allow you to
00:07:27generate a react application in just one
00:07:29command all right so this is this is
00:07:32definitely what I would suggest to use
00:07:35it compiles everything it compiles all
00:07:38the JSX you don’t have to worry about
00:07:39anything really alright so we’re going
00:07:42to go ahead and install that and it
00:07:43needs to be installed globally you do
00:07:46have to have no js’ installed so go if
00:07:48you don’t have that go to node.js org
00:07:51download it install it and that will
00:07:53give you node along with NPM alright so
00:07:56once node is installed we’re going to
00:07:58open up a command line and you want to
00:08:01run npm install make sure you add the –
00:08:04g4 global and then create – react – app
00:08:10alright i already have it installed so
00:08:12i’m not going to run it but just go
00:08:14ahead and run that and then go to
00:08:16wherever you want to create your project
00:08:19I’m in my C Drive in my projects folder
00:08:22and then we just want to run create –
00:08:26react app and then the name your project
00:08:30okay so I’m going to call this project
00:08:33manager alright it does take a minute or
00:08:37two so I will I’m going to pause this
00:08:39and I’ll be back when it’s done alright
00:08:43so that took about two minutes or so now
00:08:45we want to CD into project manager
00:08:49and then all we have to do to run our
00:08:51application is do NPM start alright and
00:08:56and if we look over here actually I
00:08:59don’t know if it shows us but to build
00:09:02it for production we can just run I
00:09:04think it’s NPM run build and that will
00:09:07just compile everything so that you can
00:09:09just take it and upload it to your
00:09:11server or whatever alright so we ran the
00:09:14application and this is what we get ok
00:09:16nice little landing page I don’t want to
00:09:20keep any of this stuff for instance the
00:09:22logo and the styling so I’m going to
00:09:25open up my folder in my text editor and
00:09:28i’m using atom which i would recommend
00:09:30for react development i find it really
00:09:34really helpful the code highlighting is
00:09:37really nice and I noticed that with
00:09:40sublime text it doesn’t pick up the JSX
00:09:44very well as far as code highlighting
00:09:46but atom works really well with it and
00:09:48there’s probably a plugin you can use
00:09:50for sublime but I just prefer to use
00:09:52atom alright so I’m going to just add my
00:09:54project folder here which is in C Drive
00:09:58projects and project manager ok so this
00:10:04is what it gave us alright so we have
00:10:06our package JSON file you can see that
00:10:08we’re using react right now it’s version
00:10:11fifteen point three point two along with
00:10:14react Dom and then our scripts start
00:10:18we’ll just start the application as we
00:10:20just did build as I said that that’s
00:10:22used to compile everything test eject
00:10:26I’ve never actually used that so now
00:10:30let’s take a look in the public folder
00:10:33we have an index.html file I’m just
00:10:36going to get rid of all these comments
00:10:37to make it look a little easier to read
00:10:40and basically all we need to know is
00:10:44that we have a div with the ID of route
00:10:47and that’s where everything is going to
00:10:48be output alright you can go ahead and
00:10:51change the title if you want say project
00:10:54manager
00:10:57and we could save that and now you can
00:11:00see the titles updated alright now in
00:11:03the source folder this is where all of
00:11:05our react stuff goes if we look at index
00:11:08J s or importing react react Dom we have
00:11:12a main app component that we’re
00:11:14importing and then this index CSS file
00:11:17which we don’t need I’m going to get rid
00:11:19of that and then down here we’re doing
00:11:22our react on render putting in the main
00:11:25app component and then we’re saying we
00:11:27want to insert it in the in the element
00:11:30that has the ID of root which we just
00:11:32saw right here okay so that’s where it’s
00:11:35outputting so we can save that we
00:11:37shouldn’t need to touch index JSON or
00:11:40index HTML now app J s is basically the
00:11:44the gateway to to our main app component
00:11:47so we’re importing react the logo and
00:11:51stuff I’m going to get rid of this I
00:11:53will keep the app dot CSS import right
00:11:57here and then we have our class with a
00:12:00render function which is returning this
00:12:03here now it’s very important to know
00:12:06that when you return in your render it
00:12:08has to everything has to be within one
00:12:10element I couldn’t have another div
00:12:12right here and return that all right
00:12:15obviously we can have as many elements
00:12:17as we want inside the main div but you
00:12:19can only have one div at the very at the
00:12:22very top level all right now I’m going
00:12:25to get rid of everything here except for
00:12:28this this div alright and let’s just for
00:12:32now we’ll just say my app okay we’ll
00:12:35save that and then let’s get rid of this
00:12:38logo SVG you don’t need that and then
00:12:42app CSS I’m just going to clear all that
00:12:45out and save it so now we just have just
00:12:48my app all right I’m going to open up
00:12:50the chrome tools console as well because
00:12:53we’ll be working with that quite a bit
00:12:55so now we have a blank react application
00:12:58essentially now for this main app
00:13:01component I usually use it as kind of a
00:13:05placeholder for all of our other
00:13:07components
00:13:09we can import them and we can place them
00:13:11right here in the render so we’re going
00:13:14to have a folder inside the source
00:13:16folder called components okay and we’re
00:13:21going to create a new file in there and
00:13:24we’re going to call that project CAS
00:13:27okay so this will be our projects
00:13:29component and it’ll be responsible for
00:13:31listing all of our projects alright now
00:13:34I’m going to copy everything we have in
00:13:35app J s because we need that same basic
00:13:39format we don’t need the CSS we only
00:13:42need to include that in the main app
00:13:43component then we’re going to change the
00:13:46class to projects make sure we export
00:13:49that down here so that we can use it in
00:13:52other files this div will change the
00:13:55class to projects and let’s just say my
00:13:58projects for now alright so we’ll save
00:14:02that and then we’ll go back into app
00:14:03guess and let’s import projects from and
00:14:09that’s going to be in the components
00:14:14folder slash projects ok we don’t need
00:14:18the J s at the end and then down here we
00:14:21can simply input projects okay just like
00:14:26we would an XML or HTML okay we’ll save
00:14:29that and now you can see that we’re
00:14:30getting my projects so everything we put
00:14:33in the projects component is going to be
00:14:34output here now we can pass in
00:14:38properties here if we want so for
00:14:40instance if we say test and set that to
00:14:43let’s say hello world and then in
00:14:46projects we should be able to just go
00:14:49like that I’ll put that variable and
00:14:53test is not defined that’s because it
00:14:56has to be this dot props dot test ok and
00:15:01then we get hello world all right just
00:15:03to show you that we can do that now the
00:15:05idea that I want to do here is all of
00:15:09our projects are going to be held in
00:15:11state all right that’s where our data
00:15:13needs to be held
00:15:14I’m usually we would fetch it from some
00:15:16kind of API or database and then put it
00:15:18in our state but we’re just going to put
00:15:21the the
00:15:21right in our state so what we want to do
00:15:26is we want to create a constructor so
00:15:29right above the render we want a
00:15:33constructor all right and this is where
00:15:36we want to define our initial state
00:15:37state keys so if we say this starts
00:15:40state equals and we want to set projects
00:15:46and then projects is going to be an
00:15:49array of objects
00:15:51all right so each one will have a title
00:15:54so let’s say business website and also a
00:16:00category we’ll just a web design all
00:16:05right so there’s one project let’s copy
00:16:08that and it’ll do three so business
00:16:13website then we’ll do social app and
00:16:16that category will be let’s say mobile
00:16:20development and then let’s do ecommerce
00:16:29shopping cart and then that category
00:16:31will be web development all right now we
00:16:37want to take this state and we want to
00:16:39pass it into projects as a property all
00:16:42right so basically you want everything
00:16:45at the top of your application in-state
00:16:47and then pass it down to other
00:16:49components through properties all right
00:16:52the data should be immutable it should
00:16:53go from the top down so let’s pass it in
00:16:56as projects and we should be able to say
00:17:01this dot state dot projects all right so
00:17:07now if we go we’re going to get an error
00:17:08here and it says this is not allowed
00:17:11before super the reason for that is when
00:17:14we do when we put a constructor and we
00:17:16need to call super like that save it and
00:17:20that goes away all right now in projects
00:17:23if we go in the render but not in the
00:17:25return and we do a consult log and we
00:17:31say this dot props
00:17:34now when I reload you’ll see we get our
00:17:37properties and we have this projects
00:17:39with an array with all of our projects
00:17:41so we can now access that from the
00:17:44project’s component now when you have an
00:17:47array of objects like this you usually
00:17:50want to create a separate component for
00:17:52each individual item and then you want
00:17:55to basically map through those projects
00:17:57and output that component so we’re going
00:18:00to go ahead and in components we’ll
00:18:02create a new file called project item
00:18:05Jas all right we’re going to copy
00:18:08everything we have in projects paste it
00:18:12in there and we’ll change this to
00:18:14project item and down here make sure you
00:18:18explore project item all right now for
00:18:23this I don’t want to return a div I
00:18:26actually want it to be an li okay each
00:18:29one will be wrapped in an Li and we’ll
00:18:32give it a class of project and by the
00:18:35way if you’re wondering why this is
00:18:36class name is because in JSX there you
00:18:41can’t use classes and attribute all
00:18:43right class or for if you’re using a
00:18:46form with labels you can’t use for you
00:18:49have to use HTML 4 alright so just try
00:18:52and remember that
00:18:54so in here actually you know what we’ll
00:18:58leave that as is for now and then let’s
00:19:00go back to projects and what we want to
00:19:04do is let’s see we want to try to think
00:19:10of how I want to do this let’s go above
00:19:12the render and let’s just create a
00:19:14variable called project items and then
00:19:19we want to test to see if there are any
00:19:22projects so do an if statement here
00:19:25we’ll say if this dot props dot projects
00:19:31then we want to take that project items
00:19:34variable and we want to set that to this
00:19:40dot props dot projects dot map ok since
00:19:46it’s an array we want to map through
00:19:47it so in here we’re going to use an
00:19:50arrow function you could use a callback
00:19:56but I want to keep this basically in
00:19:58es2015 so in here what we want to do is
00:20:04first of all let’s do a console log and
00:20:06make sure that we’re actually getting
00:20:08each project ok so let’s see unexpected
00:20:13token expected parentheses oh I put this
00:20:26in the wrong place this needs to be
00:20:29within render so we’re going to put that
00:20:33right here all right so now down here
00:20:37you can see it’s logging each one so
00:20:39this is working or getting each
00:20:40individual project now we want to let’s
00:20:45comment this out and we want to return
00:20:49and in here we’re going to put our
00:20:52project item component all right and
00:20:56then we want to pass in each project as
00:21:02a property okay so we’re assigning the
00:21:11each project item to this variable right
00:21:13here so down here we should be able to
00:21:16just put in project items and we’ll save
00:21:23that okay so we also need to import the
00:21:28project item component that we created
00:21:30so say import project item from dot
00:21:36slash project item okay now we’re
00:21:42getting this error that says each child
00:21:45in an array should have a unique key
00:21:48property so this isn’t an error it’s a
00:21:51warning but it is a good idea to add a
00:21:53key to our project item right here
00:21:56usually if you have an ID you would use
00:21:59that but we’ll just
00:22:00a project title okay now nothing’s being
00:22:08out put up here because if we go into
00:22:09project item we haven’t put anything
00:22:11here yet so let’s put prom
00:22:17we should be getting project as a
00:22:20property that we passed in okay right
00:22:23here we’re passing it in as a property
00:22:25so let’s say this dot props dot project
00:22:31dot title and then we’ll also put the
00:22:36category so this dot props dot project
00:22:42dot category all right we’ll save that
00:22:46and now you can see we’re outputting all
00:22:48of our projects along with the category
00:22:51all right let’s wrap this in a strong
00:22:53tag all right and put a colon here okay
00:23:04so it doesn’t look great but it is
00:23:07working we’re a pat we’re basically
00:23:09setting our state in our main app
00:23:12component okay we have a state called
00:23:13projects we’re passing it into projects
00:23:16as a property and then inside projects
00:23:19were mapping through that array and
00:23:22we’re outputting a project item
00:23:24component which has each project where
00:23:28we output the title and the category
00:23:30alright so hopefully you can see how
00:23:32this is coming together now one thing I
00:23:35want to mention is an app j/s in our
00:23:38constructor we set the state this
00:23:41usually isn’t where you want to set the
00:23:43actual data you do want to define the
00:23:45state and the keys but not the actual
00:23:48data for that you want to use a
00:23:49lifecycle method and you probably want
00:23:53to use component will mount okay so say
00:23:59component will mount
00:24:05and that should actually be lowercased
00:24:07so this is a lifecycle method it fires
00:24:10off when every time the component is
00:24:13re-rendered so up here let’s grab these
00:24:19and cut them out we do want to keep the
00:24:21projects but just as an empty array in
00:24:24this in the constructor down here we
00:24:27want to say this dot set state passing
00:24:32an object and we’ll say projects which
00:24:36is an array and then we’ll paste the
00:24:38data in like that all right so let’s go
00:24:42ahead and save that and now you’ll see
00:24:44it still functions but this is just a
00:24:46better way to do it than to have it in
00:24:48the constructor like that all right and
00:24:51when you if you do a for instance an
00:24:53ajax call if you’re fetching data from
00:24:56from an outside api you want to do that
00:24:59in this life cycle method as well either
00:25:02this or component did mount and if you
00:25:06go to the documentation for react you’ll
00:25:08see all the lifecycle methods and at
00:25:10which time they render or they fire off
00:25:14so now we want to do is want to add a
00:25:16form so that we can add to our state so
00:25:19we can add a project so let’s create
00:25:21another component and we’ll call it add
00:25:24project dot J s and let’s copy what we
00:25:30have in projects ok we’ll paste that and
00:25:35we can get rid of that I’m going to
00:25:37change the name to add project get rid
00:25:42of that change this down here to add
00:25:49project all right now let’s see what do
00:25:55we want to render here let’s keep the
00:25:57div I’m going to get rid of the class
00:25:59name and we’ll put an h3 here say add
00:26:05project
00:26:07all right so let’s just make sure we can
00:26:10insert this into our main components so
00:26:12we’re going to go to app J s and import
00:26:15it just like we did with projects all
00:26:25right and then down here we’ll put it
00:26:27right above we’ll just replace this my
00:26:29app save that and now we’re outputting
00:26:40that add project component so we want
00:26:43this to be a form
00:26:48okay so we’ll put a form tag and let’s
00:26:53put in here a div okay this will have a
00:26:59label of title and an input type will be
00:27:07‘text and we’re going to give this an
00:27:11attribute called ref and that’s going to
00:27:13help us get the the value when we submit
00:27:17the form now you have to have this slash
00:27:20here you can’t use html5 syntax or
00:27:22you’ll get an error okay in the ref
00:27:25let’s just put title all right so let’s
00:27:29also put a br here and again you have to
00:27:31have your slash so let’s copy that paste
00:27:35that in and then this is going to be the
00:27:39category but I want this to be a select
00:27:41okay so we’ll say select this will also
00:27:45have a ref of category
00:27:52all right now what I want to do is I
00:27:55want the categories to to be a property
00:27:58of the component all right now we can
00:28:00set default properties if we go above
00:28:04render and we’re going to say static
00:28:10default props and we want to set that to
00:28:14an object and let’s set categories to an
00:28:19array and we’ll say web design web
00:28:27development and mobile development okay
00:28:34and then what we want to do is we want
00:28:37to map through these and then output the
00:28:39options so we’re going to go above the
00:28:42return and render and say let category
00:28:46options we’ll set that to this dot props
00:28:50dot categories because we can now access
00:28:53that and then we want to call dot map
00:28:57all right and then in here will stay
00:29:00category we’ll use an arrow function and
00:29:03then we want to return option we’re
00:29:09going to give it a key category and a
00:29:14value of category and then we also want
00:29:21to open the category here all right so
00:29:25now we should be able to just use this
00:29:27category options right down here
00:29:37alright let’s try that and there we go
00:29:41so now we’re outputting all the
00:29:42categories it’s coming from the
00:29:44properties up here now to submit the
00:29:50form what we’re going to do is in the
00:29:51form tag we’re going to add a handler
00:29:54called on submit alright we have on
00:29:56submit is on click there’s a whole bunch
00:29:59of them so we want to put some curly
00:30:03braces and let’s say this dot handle
00:30:05submit all right so this handle submit
00:30:09we can create right up here ok and just
00:30:15to show you let’s do console.log and
00:30:20we’ll just say submitted now I don’t
00:30:23think it’s going to work yet oh we
00:30:25didn’t even put a submit button so no
00:30:27it’s not going to work type submit’
00:30:33value submit alright so if we go when we
00:30:41try to submit this you’ll see that it’s
00:30:44not console logging down here because
00:30:46it’s actually submitting the form what
00:30:48we want to do is pass in an event
00:30:50parameter here and then just like in
00:30:54JavaScript or some other libraries we
00:30:57can use a dot prevent default and that
00:31:01will prevent the form from actually
00:31:04submitting so now if we do it you can
00:31:06see down here we get our console log now
00:31:11what we want to do is we want to store
00:31:16the the data that we submit into state
00:31:20so we’re going to add a constructor up
00:31:24at the top
00:31:28all right and in the constructor we have
00:31:32to call our super function and then
00:31:35we’re going to say this dot state and
00:31:39we’re going to have new project which is
00:31:42going to be an object so we don’t want
00:31:45to fill it here what we want to do is
00:31:46set it when this is submitted
00:31:48all right now to to grab the values of
00:31:52the form we can use that that refs
00:31:54attribute all right so let’s let some
00:31:58say console dot log this dot refs dot
00:32:03title dot value okay so now if I type
00:32:08something in here and submit whoop that
00:32:12didn’t work let’s see what I do wrong
00:32:18ref title
00:32:20oh it’s it doesn’t know what this is we
00:32:26actually have to bind it through the
00:32:28handle submit down here or just say dot
00:32:30bind and then pass in this so now we
00:32:36submit you can see that it’s console
00:32:37logging whatever I put in the title now
00:32:40we don’t want them to be able to submit
00:32:42a blank title so we can actually do a
00:32:44little bit of validation here we’ll say
00:32:47if this ref title value is equal to
00:32:53nothing then we want to alert and we’ll
00:32:59say title is required all right and then
00:33:05we’ll have an else and then we do what
00:33:07we want to do so if we save that and we
00:33:10try to submit we get an alert okay now
00:33:14if everything works out or if there’s a
00:33:16title we want to set the state we want
00:33:18to put the the data into this value so
00:33:21we’ll save this dot set state and we
00:33:26want to pass in here new project
00:33:30and set that to an object and let’s see
00:33:38we’re going to set title to this dot
00:33:45refs dot title dot value and then
00:33:50category to this dot Refs
00:33:55category dot value so that’ll set the
00:34:00state for us now when we use this set
00:34:03state it can take a second parameter
00:34:06which will go right here we’ll put a
00:34:09comma and that’s going to be a callback
00:34:11function all right and then here let’s
00:34:16do a console log and will log the state
00:34:24so let’s save that and let’s just say
00:34:27test web design submit and then it gives
00:34:30us the state which has a new project
00:34:32with that data
00:34:34all right now I should I should have
00:34:37mentioned earlier that the state in this
00:34:38component is different from the state in
00:34:41the main app component okay each
00:34:43component has its own state but what we
00:34:46want to do is take the data we submit
00:34:49and pass it up into the main app
00:34:51component and save it in the mains in
00:34:53that state so what we can do is we can
00:34:56send it up through a property okay
00:34:58through a function inside the properties
00:35:00so what we’ll do is comment that out
00:35:04we’ll say this dot props dot add project
00:35:12okay and then we’ll pass along the new
00:35:15project now since we did that we should
00:35:19be able to access this from the the main
00:35:22component so we’ll go down to where we
00:35:25have projects right I’m sorry the add
00:35:29project and we’re going to put a
00:35:31property what do we call it add project
00:35:35so we want to use that right here
00:35:40so add project equals and then we want
00:35:45to function to handle it so this thought
00:35:48handle add project all right and we
00:35:52should just bind this as well all right
00:35:56and then we’ll create that right here
00:35:58handle add project that’ll take in the
00:36:03project and let’s just do a console dot
00:36:07log just to make sure that that works
00:36:13all right so let’s see what’s this new
00:36:15project is not defined let’s see oh I
00:36:21passed a new project this is actually in
00:36:24the state so we want to say this starts
00:36:26state dot new project so now if we put
00:36:30something in here and submit this dot
00:36:33props add project is not a function
00:36:38let’s see this dot props dot add project
00:36:48oh this should be uppercase P there we
00:36:56go alright so now we’re submitting it
00:36:58we’re passing it up to this component
00:37:00and console logging it now in here what
00:37:04we want to do is we want to add it to
00:37:07the state of the main component alright
00:37:11so we can just let’s see with react
00:37:20state your state is immutable meaning
00:37:24that you don’t want to change it you
00:37:25want to basically update it so we want
00:37:28to get everything that’s in it push to
00:37:31it push the new project to it and then
00:37:32set it again so to do that we’ll say let
00:37:36projects we’ll set that to this start
00:37:40state dot projects so we’re grabbing
00:37:43what’s already there and then let’s take
00:37:45that and push on to it the new project
00:37:50and then we’ll reset it so we’ll say
00:37:54this dot set state and then we’ll say
00:38:00projects projects all right so let’s
00:38:05save that and now let’s say test web
00:38:09development submit and there it is oh it
00:38:12says category that’s not right okay so
00:38:20let’s see what went wrong there if we go
00:38:22to add project all right here value
00:38:25category that needs to be wrapped in
00:38:27curly braces you guys probably saw that
00:38:32already all right so submit and there we
00:38:36go we say test to will choose mobile
00:38:39development submit so now we can add
00:38:42projects now this isn’t going to get
00:38:44persisted anywhere if I reload as I said
00:38:47in the beginning react is for user
00:38:49interfaces it’s not it’s not going to
00:38:53persist the data and now we could set it
00:38:57to push to a some kind of API or maybe
00:39:00the local storage or something
00:39:02that but we want to just focus on the
00:39:05user interface part of it and that’s
00:39:07what’s great about react is that your
00:39:10back-end is completely separate so we
00:39:12could have this go to local storage and
00:39:14then we could easily replace it with
00:39:17let’s say MongoDB or something like that
00:39:20all right
00:39:22I’m going to put a heading above this so
00:39:25it’s not so scrunched together so in
00:39:28projects we put an h3 will just say
00:39:35latest projects all right I’ll put a
00:39:43line break below this input as well
00:39:56oops I’m going to put that right here
00:40:03okay so it doesn’t look too great but
00:40:06that’s fine we’re not focusing on that
00:40:09so now what I want to do is I want to
00:40:11show you how we can delete these now
00:40:14initially we don’t have if we look at
00:40:17our state our projects we don’t have an
00:40:19ID and it’s a good idea to have an ID a
00:40:22unique ID and there’s actually a module
00:40:26we can use called UUID
00:40:31so let’s see not sure where they the
00:40:40documentation is for it but we’re going
00:40:42to go ahead and install that and it just
00:40:43generates a unique ID for us it’s a
00:40:46really simple module so we’re going to
00:40:48go ahead and just stop this with ctrl C
00:40:50and do NPM install – – save UUID
00:41:01okay and then we’ll just restart NPM
00:41:04start
00:41:07and we’re going to come over here and
00:41:10bring that in so import UUID from UUID
00:41:18and then we’ll just go down here we’ll
00:41:22assign an ID to uu ID dot V 4 which is a
00:41:28function so each time we use this it’ll
00:41:31generate a new ID so we want one for
00:41:35here and here as well okay and then when
00:41:41we add a project we also want to do the
00:41:43same thing we want to add an ID so we’ll
00:41:45import all right we’ll use that right
00:41:53here where we set the state for the new
00:41:55project ID dot d4 just like that and
00:42:04that’ll generate a unique ID for us all
00:42:09right and just to make sure that we’re
00:42:11actually getting an ID let’s go to our
00:42:13project item and we’ll replace this
00:42:15title with ID and you can see that it’s
00:42:19outputting unique IDs okay I’ll put that
00:42:22back now I want to be able to delete
00:42:25these so let’s go in project item where
00:42:28we are now we’re going to put a link at
00:42:31the end here
00:42:36okay now the link isn’t actually going
00:42:39to go anywhere we want to put an event
00:42:45I’m sorry an event handler called on
00:42:47click and we’ll set that to let’s see
00:42:52what I want to set that to this dot
00:42:56delete project all right we’re going to
00:43:00do dot bind this as well and then we’re
00:43:04going to create that right here handle
00:43:10whoops not handle what was it delete
00:43:14delete project
00:43:17and let’s just do console.log test just
00:43:24to make sure that it actually works so
00:43:26let’s open up our console if we click
00:43:29that we get tests now we want to do this
00:43:33the same idea we want to click on it in
00:43:36this component but we want to pass it up
00:43:37to the main component and then do the
00:43:40final delete there now since we’re in
00:43:42project item were actually two
00:43:44components deep so we need to pass it up
00:43:46to projects and then pass it up to the
00:43:48main app component all right now to do
00:43:52that we’re going to set a property this
00:43:56dot props dot and we’ll call it on
00:43:58delete and then we just want to pass in
00:44:03the ID all right now to pass along the
00:44:07ID through this function we’re going to
00:44:11go after this right here put a comma and
00:44:14then we’re going to save this dot
00:44:17props project dot ID all right and then
00:44:23we should be able to access it through
00:44:25here and then we’ll pass it along all
00:44:30right so let’s save that and then we’re
00:44:32going to go to projects J s and go to
00:44:35where we have project item which is
00:44:38right here and let’s see we want to add
00:44:43on delete here as well say this dot
00:44:54delete project
00:45:01buying this and we also want to create
00:45:13the function up here delete project
00:45:18okay takes in ID and then again we want
00:45:23to do this dot prop dot on delete pass
00:45:29in the ID all right so now we’re passing
00:45:32it up to the main component so down
00:45:35where we have projects we want to pass
00:45:38in on delete okay we’ll set that to this
00:45:42dot handle delete project and we’ll do
00:45:48dot bind and then pass in this and then
00:45:52just like we did with handle add project
00:45:54we’re going to add handle delete project
00:46:00all right that’s going to take in the ID
00:46:02and then the idea is just like with add
00:46:07project we want to get it from the state
00:46:09and then we want to remove the project
00:46:12we want and then reset the state now you
00:46:15could do this in different ways we could
00:46:16use a for loop or something like that
00:46:18but we’re going to use find index so
00:46:21let’s say let index and we’ll set that
00:46:26to projects dot find index and pass in
00:46:32here X so X dot ID and basically what
00:46:38this is doing it’s going to look through
00:46:40all the projects it’s going to find all
00:46:42the IDs and match them to the current ID
00:46:45that’s being passed in alright if it
00:46:47matches and it’s going to get put in the
00:46:49index then what we want to do is want to
00:46:53say dot splice where that index is and
00:46:58we want to delete one from that and then
00:47:01we just want to reset the state just
00:47:03like we did up here all right so let’s
00:47:06save that and now we should be able to
00:47:10click the X on one of these and deletes
00:47:13it
00:47:14okay so we can now add projects and we
00:47:18can delete them so we’re pretty much
00:47:24there as far as all the basics one other
00:47:27thing I want to show you is prop types
00:47:29which is kind of like kind of a
00:47:31validation for for our properties so for
00:47:35instance let’s see we don’t have any in
00:47:39the main app component but if we go into
00:47:41projects into our projects component we
00:47:45have what do we have projects itself as
00:47:49a property and then we have the function
00:47:52on delete which is a property so if we
00:47:54want to add kind of a validation for
00:47:56those you can go down under the class
00:47:59and then say projects dot prop types and
00:48:06let’s say projects and that’s an array
00:48:11so we want to make sure that it gets
00:48:13formatted as an array
00:48:15so if we say react dot prop types
00:48:19dot array and then we have on delete
00:48:23which is a function so we can say react
00:48:30dot prop types dot func
00:48:36now if we save that nothing happens
00:48:39because it’s correct but if we were to
00:48:42let’s say projects if we want format
00:48:45that as a string if it’s supposed to be
00:48:46a string now we’re going to get an error
00:48:49saying that projects of type array
00:48:52expected to be a string okay so it
00:48:56doesn’t actually stop it from working
00:48:58but it does give you this warning
00:49:01telling you that that property is the
00:49:03wrong type all right so it’s good
00:49:05practice to do this okay now let’s copy
00:49:10this and let’s do that for project item
00:49:12as well
00:49:13project item we again have on delete and
00:49:16then we have the project which is a
00:49:19property so let’s go down here and we’ll
00:49:22change this to project item
00:49:27dot prop types and we have project which
00:49:31is an object okay so we want to do that
00:49:35and then on delete which of course is a
00:49:38function save that there’s no errors
00:49:42because everything is correct now we’ll
00:49:44do the same for add project so for add
00:49:53project we have let’s see we have
00:49:57categories which is a property and
00:50:02that’s an array so we’re going to keep
00:50:04that and then we have add project which
00:50:09is where is it right here this dot props
00:50:15dot add project which is a function okay
00:50:22so that should do it and there we go now
00:50:27I also want to show you how we can bring
00:50:30in other data from from an outside API
00:50:34so I’m going to close all these except
00:50:37for app J s and basically what I want to
00:50:40do is a dev API called Jason placeholder
00:50:48and let’s see I want to get some – dues
00:50:52so you can see here if we click on that
00:50:54it gives us an API where we can get JSON
00:50:56formatted – dues with an ID a title and
00:50:59so on and we can make a get request to
00:51:04that – dues so in our application we
00:51:11want to make the request in a lifecycle
00:51:15function called component did mount so
00:51:19we’re going to add that here
00:51:26okay we should actually put this in both
00:51:28component did mount and component will
00:51:30mount so what I’m going to do is create
00:51:34function called get to Do’s and let’s
00:51:42see we’re going to want to run that in
00:51:43both of these so let’s go here and say
00:51:47this dot get to dues and we also want to
00:51:53run that here and then for where we put
00:51:57this projects in state I also want to
00:51:59create a function for that separately
00:52:01called get projects and then all we’re
00:52:05going to do is grab this cut it out and
00:52:09put it in here and then we’ll call it
00:52:12here just make things a little neater
00:52:18alright so everything should still work
00:52:21okay now in get to dues this is where we
00:52:26want to make our request now we can use
00:52:28many many different modules to make HTTP
00:52:32requests I’m just going to use jQuery
00:52:34all right so let’s go ahead and install
00:52:36jQuery through NPM and you can use Axios
00:52:50is a good one super-agent is another one
00:52:52but I just want to keep it simple so
00:52:57let’s go ahead and import jQuery up here
00:53:00we’ll say import money sign from jQuery
00:53:07and then back down and get to dues or is
00:53:11it right here we’re going to say jQuery
00:53:16dot H axe and we want to pass in here
00:53:22URL now the URL is going to be from the
00:53:26jason place holder which will be this so
00:53:30we’ll copy that
00:53:32paste that in the data type is going to
00:53:37be Jason let’s say I’m going to stay
00:53:44cash false and then we have our success
00:53:50okay so if everything goes ok this will
00:53:53run and that takes in the data that’s
00:53:56returned and then we also have we need
00:54:02to bind this just like we do with the
00:54:04other ones the other functions we’re
00:54:06going to say bind this and then we’ll
00:54:10put a comma and then we’re going to have
00:54:12our error in case there’s an error all
00:54:16right and then for that that’s going to
00:54:18take in power actually it’s going to
00:54:22take in a couple things it’s going to
00:54:24take in eight and xhr status and error
00:54:30and then all we want to do here is
00:54:32console dot log the error alright now if
00:54:37everything goes ok we want to take the
00:54:40data that’s returned and put it into our
00:54:41state so up in the state here let’s add
00:54:45– duze which will be an empty array and
00:54:48then down here we can say this dot set
00:54:52state and we’ll say – duze and we’ll set
00:54:58that to the data all right and then
00:55:05let’s put a callback and then we can
00:55:08check the state so console dot log this
00:55:12dot state so since we have get to do is
00:55:17running in these life cycle methods it
00:55:20should run right when the app loads so
00:55:23let’s go back there and open up the
00:55:24console and if we look at the object we
00:55:28have our projects of course and then we
00:55:30have 200 – duze okay that these are
00:55:34coming in from that API so it’s as easy
00:55:36as that to bring in data from an outside
00:55:39source and put it into our state and
00:55:41then we can use that in the rest of our
00:55:43application
00:55:44and just I guess we can do that real
00:55:47quick let’s create another component
00:55:51called to do zjs and we’ll also create
00:55:57one called to do item J s and we’re
00:56:01going to do kind of the same thing we
00:56:02did with the projects so I’m going to
00:56:05copy what we have in projects and paste
00:56:08that in to do zjs okay we’re going to
00:56:12change a lot of these two to do this
00:56:19will be to do is I’m not going to do the
00:56:22delete and adds though I just want to
00:56:24list them so we’ll get rid of that let’s
00:56:27change this and I know I’m moving kind
00:56:29of fast but I just want to I don’t want
00:56:32this to take too long now we’re going to
00:56:34pass into dues as properties just as we
00:56:37did here and then we’ll say to do items
00:56:42this dot props dot to dues dot map okay
00:56:50then here we’re going to return the
00:56:51to-do item component we don’t need the
00:56:55on delete and I believe the twos have a
00:57:00title let’s check it out yeah they have
00:57:02a title and an ID so this can be to do
00:57:10dot title to do oops
00:57:21okay down here change that will just say
00:57:28to-do list all right and then for the
00:57:35prop types we don’t need the on delete
00:57:43and then let’s make sure we export to
00:57:46dues all right so let’s save that and
00:57:49then in to-do item we’re going to copy
00:57:51what we have in project item paste that
00:57:54in okay we don’t need to delete then
00:58:03here let’s call it to do change that we
00:58:13don’t need a category so let’s get rid
00:58:15of that it’s just going to be the to do
00:58:17we don’t need the link to delete change
00:58:24that
00:58:33all right so we’ll save that and let’s
00:58:38see now in the main app component we’re
00:58:42going to import both of those are
00:58:44actually we’re just going to import to
00:58:46dues all right and then we’ll add that
00:59:01down here let’s put an HR save that and
00:59:10I’ll probably get an error no error but
00:59:16we’re not outputting anything and that’s
00:59:19because we didn’t pass anything into to
00:59:22do so we want to pass along the two dues
00:59:25that we have in state so we’ll say this
00:59:30dot state dot two dues save it and there
00:59:38they are so those are all coming in from
00:59:41that API so you can see it’s easy to
00:59:43pull in data and just bring it into our
00:59:45state and then publish it down to
00:59:49components through properties and we
00:59:53made a get request but of course we
00:59:54could also make post requests and we
00:59:56could submit data to a pis into external
01:00:00databases and so on alright so this is
01:00:04getting kind of long so we’re going to
01:00:06go ahead and stop here we covered pretty
01:00:08much all the fundamentals of react I do
01:00:12hope you guys learned something and
01:00:15enjoyed this I will get this code up on
01:00:17github and I would also suggest checking
01:00:20out the ten project react course which
01:00:23I’ll have ready in a week or so and then
01:00:26also I have a more simple intro to react
01:00:31course as well as a reactant flux course
01:00:34alright so thanks for watching and I’ll
01:00:37see you next time
”