Press "Enter" to skip to content

React JS Crash Course

00:00:00hey guys welcome to another YouTube mini

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: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: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: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: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: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: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: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: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