React JS Crash Course (2019)

Key Takeaways

[Music] hey what's going on guys welcome to my 2019 react crash course and in this video we're gonna build a full to-do list app but we're gonna do it in a way where you can really understand what's happening and so you can understand concepts like components state props lifecycle events and so on and it's gonna be about an hour and a half which is quite long but that's because I'm gonna try to explain everything I do rather than just watch me code video so we're gonna look at some slides and then we'll jump in and we'll start to code with react alright so first of all what is react it's technically a JavaScript library created and maintained by Facebook and it's used for building user interfaces and/or front-end applications now when I say front-end I mean in the browser when you build something with like let's say PHP or Python your your code runs on the server whether it's a dedicated server shared account cloud hosting whatever the code that you write with react runs on the client and there's benefits to this including certain performance bumps in certain areas it also makes your your interface much more interactive and you don't have to reload the page for everything to happen just certain parts of the page can reload now react is technically a library but most people will refer to it as a framework including myself because when you think of a library you think of something like jQuery where you pull certain features out you use them react however behaves like a framework it's basically the the V in MVC which stands for Model View controller so it's your your entire application view so it does the same thing that other frameworks like angular and view J s do the differences react is really small angular for example includes everything including a router and HTTP client with react you have to install those things separately and it's it makes it much lighter as well react is the most popular front-end framework in the industry right now according to all the polls etc so of course that could change at any time but if you're trying to get a job as a front-end developer it's a good idea to learn react alright so why use reactor or use any framework javascript does allow us to interact with the DOM and create user interface or interfaces but with vanilla JavaScript it's it's it's a lot more code and it's much more difficult to do the same things that you could do with a framework so it's it's kind of reinventing the wheel especially when it comes to like dynamic routing and stuff like that react makes it very easy to build intricate front-end projects it's also very organized and it uses self-contained independent components that have their own state and this allows us to build really interactive user interfaces now with vanilla JavaScript you have to do every little task with the Dom manually like creating new nodes and stuff like that with reactive something called the virtual DOM and it allows us to only update what's needed as opposed to the whole page so if you have a like a blog post or a blog application and you submit a post with a form it's only going to update that post component to show the new post rather than reload the whole page react also uses something called JSX which allows us to use javascript right in our markup right in our HTML markup when people first hear this they they don't know I shouldn't say everybody but some people don't like it some developers because they were taught about separation of concerns but once you use react most people can see the beauty in it and how easy it is to create user interfaces and how encapsulated each part of the UI is react also makes it easy to work with teams because it's organized and everyone can be on the same page you can assign different developers to work on different components rather than just having you know one big monolithic code base that is very confusing for multiple people to work on all right so what should you know before learning react and this is different for everyone the one thing you definitely should know is basic JavaScript programming so objects arrays conditionals functions this is a must you don't want to learn JavaScript and react at the same time now these other things are all part of es6 which was an important update to the JavaScript language and this stuff like classes D structuring high order array methods this stuff is is all used heavily and react and all of the popular frameworks now you could learn this stuff while you learn react but I think that you may have some trouble distinguishing what is actually reacting what is JavaScript what does es6 so I would suggest learning this stuff first but you know everyone's different I do have a 21-hour course on udemy called modern JavaScript from the beginning that kind of prepares you for frameworks and you know learning this stuff and I'll put a link to that in the description now as I said react puts everything in the user interface into a self-contained component which really organizes the application so here we have a basic to-do app and it's actually pretty similar to what we'll be building you can see the different components that are outlined so we have this the search list component the search component to-do list component the to-do components so each one of these is actually a component the add to do component so you can see how organized this is to do this with vanilla JavaScript would be very difficult to structure unless you're a really experienced developer and you know about different patterns and stuff like that and it would be a ton more code alright so I mentioned state components can have state which is just an object with values that determine how the component behaves and renders down here you can see an example of a state object for a simple post component so it has a title a body and his featured which is a boolean value so we could render this data out when we could also choose to display it differently like depending on if his featured is true or false maybe add a border to the back or something like that and then we can have events to dynamically update the state and it would automatically reflect or react in the user interface now sometimes we need what's called application-level state and that's data that you want to share between multiple components in our case it's going to be our two Do's now for that we do have state managers like redux i'm not going to get into redux in this course I actually have a Redux crash course if you're interested but we also have something called the context API which can use app level state without using you know third party systems like redux but I'm not going to get into the context API either because it's just the course is long enough I do have a complete project using the context API I also have a udemy course called react front-to-back where we use it as well alright so how do we actually get started there's actually a tool called recreate react app that's a CLI tool a command-line interface tool for creating react applications basically it creates like a like a boilerplate app that we can build from and it uses web pack which is a module bundler and you can use web pack on its own without create react app but it's really difficult to configure and it's just it's not it's really not worth it create react app does everything for you and it comes bundled with a dev server with hot reloads so it'll it'll auto reload as you save it also comes with a build tool so you can simply run npm run build and your code will compile into static assets that the browser can read that you can actually deploy alright so the last thing i want to look at before we get started is the anatomy of a component now you can have functional components as well this is a class-based component which has what's called a life cycle and you can have different life cycle methods also it holds state functional components can only hold state if they use something called react hooks which are very new I'm not going to go over hooks in this course but I do have a video on react hooks if you're interested so basically we have a class called post so it's a post component it extends the component class in the real the library and we have our render method which is the only required lifecycle method and this takes care of rendering the component on the page and it's going to return what's called JSX okay so this is JSX it's very very similar to HTML and we can have JavaScript expressions embedded directly in the markup so as you can see here we're displaying the title and the body from the state and we can create component state by simply creating a state object with different key value pairs okay so we could put any kind of JavaScript expression we want inside these curly braces so it's very very dynamic we can also have events all types of stuff that we're going to get into all right so that's it let's go ahead and jump in and start to learn react alright guys so we have a lot to go through and basically we're going to end up with something like this which is a to-do list application and I the reason I'm showing you this is because I want you to get a structure in your head of how this is going to be as far as components and so on so basically this has a bunch of components within it we have the to-do items themselves so each one is a to-do item by the way these are coming from something called Jason placeholder which is a fake REST API that acts as a back-end server that feeds us data but we're not going to get into that until later we're just going to hard code the the two do's up until the end but basically we have to do items and then we have the - duze component which is just all of these that to do wraps the to-do items and then we have the add to do component which is this form and then we have the header ok we also have the about page which is also a component alright and we can add to do so I can say test and you see it gets added down here we can delete them we can mark them as complete which will add a line through so we're going to deal deal with CSS we're not using bootstrap or anything it's all custom CSS I know it's not the best looking but I think that using bootstrap or using a framework will kind of distract from react itself and I also want to show you how we can use basically styling within our components okay so just kind of get that in your head as a picture of what we're doing as we're working all right so there is a couple things you're going to need nodejs you need to install because we need to use NPM or node package manager to install create react app as well as any other dependencies that we want to install or any other packages so just go to node.js or grab the long-term support or the latest version and then I'd also suggest installing the react developer tools for Chrome because you can see your entire component structure your props your state all that stuff just right from within the browser and then this is the github page for create react app it just shows us how to install it now you could use NPM to install it globally which would put it on your system and then you could use it but what we're going to do is use npx as they tell us to do here using npx it just allows us to use create react app to generate an application but it doesn't actually install it on our system which is good so we're going to go ahead and do that so let's jump into vs code that's what I'm using for my text editor visual studio code and I just have an empty folder called react crash to do and I have my terminal open my integrated terminal open in that folder alright so I'm going to run npx create - react - app and then just a dot meaning I want to generate the app in this folder and you can see it says creating new react app in the current folder alright so our application has been generated and what I'm gonna do is I just want to quickly go over the structure that was generated and some of the important files and so on let me actually just minimize that for now so let's look at the package JSON which is a manifest file that has some information about our app it has all the dependencies all the packages that are being used and if we install other packages those will get put here but you can see we have three main packages react which is the library itself we're using 16.7 zero at this point react DOM which has to do with loading components in the browser now there's also for instance react mo react will react native which allows you to build mobile apps where you don't need react Dom okay because there's no document object model however whenever we're building web apps we do need both packages now react scripts is something that create react app gives us that has to do with the dev server being able to compile our application being able to run tests and some other stuff as well so ever all the web pack stuff is done under the hood we don't even have to worry about it which is great about create react out and then for scripts we have a start script that will start our dev server we have a build script to to basically compile all of our code into something that the browser can read without needing a dev server so basically when we before you deploy you want to do NPM run build and then deploy your code we can also run tests we can also eject from create react app if you want to really customize your web pack file but that's that's way beyond the scope of this tutorial but that's pretty much it for the the core package dot JSON file the next file I want to show you is in public and it's index.html now it's really important to understand how react works basically it's a single page application framework meaning that everything runs through one physical single page and that's index.html and basically this div right here that has an ID of route this is your output for all of your react stuff when you build all your components and everything in the source folder everything outputs here okay or basically your main app component outputs here and then everything is inside of that so this div is extremely important this is your entire application in fact I'm going to get rid of these comments because it makes this file look more complicated than it really is and if you want to if you want to use like a bootstrap CDN or font awesome or something you can put that in here as well we could change the title let's just say to-do list but yeah this is the the most important thing here is this output for our application now I'm going to show you what actually generates the or how the app component gets put here and that's in the source folder index J s so this is the entry point to react basically and starting at the top we're importing the library we're importing react Dom and then we're importing the main app component okay as I said there's a main parent app component that wraps around everything and then here react Dom is rendering the app component into that element with the ID of root okay so this this document dot get element by ID is actually grabbing this div right here and then it's inserting the app component so that that's that's what's going on with react now we also have like this service worker we don't need this I can get rid of that this is for like progressive web apps and offline content but we're gonna get rid of that stuff just to kind of simplify it we'll save and then this app component that's being loaded is actually app dot J s and this is formatted just like any other class-based component as I showed you in the slides so we have class app it extends component which comes from the react library now sometimes you might see it like this where you actually bring in component or you might see just import react and then extends react dot components so this this is doing the same exact thing it's just structured a different way and then let's see we're bringing in the logo SVG file which we're going to get rid of the main app CSS which is like the global CSS and then inside the class we have a render method okay so render is what's called a lifecycle method and it's the only one that's actually required because it's it's needed to actually render the component in the browser and then that's going to return what's called JSX okay this this looks like HTML but it's actually JSX it's a basically an easier way to write javascript for output in the browser so you could actually write in pure JavaScript but you you would never want to it would it would it would be 20 times as hard so that's why they use JSX to do that and you can actually include javascript within here by using these curly braces as you can see that we're actually using a variable called logo which is actually the the logo that we imported here but we're going to get into all that stuff just know that this is JSX one of the main differences is you can't use the class attribute in JSX you have to use class name okay so whenever you want to add and like an HTML class attribute you can't use class you have to use class name all right and then down here it's just exporting the app class as default so let's go ahead and run the server and let's see what this looks like so I'm gonna go down in my terminal and do NPM start and it should just open up the server actually let's see it opened on another screen I'm just gonna bring it over all right so this is what it looks like we have the logo this is this the SVG and then the paragraph the link right here and it's hot reload so if I go ahead and change this to hello world and save you'll see that it auto reloads I don't have to manually hit the reload button I'm just gonna close the rest of these up all right so now we're gonna get started I want to have these like on the same on the same screen so you guys can see both but what I want to do is is my basic clean up okay so I'm going to delete excuse me I'm gonna delete the index CSS and as soon as I do that it's gonna break and the reason for that is in the index.jsp let's trying to import it but it's no longer there so if we just delete that and save it should fix it I'm also gonna clear let's see I'm going to delete the logo SVG because we don't need that that's also gonna break because in app J s it's trying to import the logo and then it's using it down here so we want to get rid of this all I want to return from the main app component is the main div here so we'll get rid of the header there's all this stuff inside and we'll just put an h1 for now we'll just say I'll just say app and save now we get app and then in app CSS there's some core CSS that comes with this boilerplate so I'm actually going to replace this with just some some core CSS basically just a reset zeroing out the margin and padding arial font line height link color stuff like that so we'll save that and we should be all set to get started so that's kind of the process I go through when I use create react app to just get rid of the stuff that that we don't need alright so as you know this is a component that's the main app component what I want to do now is create another component so we're gonna go to our source folder and create a folder inside the source folder called components and inside components I'm gonna create a file and I'm gonna call this - duze dot j s okay capital T so that's that's the kind of convention for component files is you want to have an upper case for the first letter and an upper case for each word as well so to do is this is going to be a class-based component just like app J s so we could actually just copy app J s and paste it in get rid of the seat and then we don't obviously don't need to import the CSS file and then we want to change the name of the class to - dues and change the export to the name of the class of - dues and let's just change this h1 to - dues and get rid of this class name we don't need that all right now we don't see it it's not showed up here because all we did was create the component we didn't actually bring it in to a P is so let's do that let's import it so we'll import - dues from and we're gonna go dot slash meaning the current folder into components and then we want to do 's and the way that we embed a component into our main app component is simply with a tag so to do is just like that just like a custom HTML tag and we'll save and there we go so now that to do is component is being displayed so I want to talk about state now like I said different components can have their own state but a lot of times you're going to need state that multiple components need to access and our two do's need to actually go in a place where we can basically feed that feed it down to different components so I'm gonna put all of our two dues in the main app component state so the way that we add state is we go within the class we can say state equals it's just going to be a JavaScript object and then we're going to put in two dews all right so two dews is going to be an array of objects so we'll put the first one here it'll have a title and let's just say take out the trash let's also give it an ID when you work with back when you work with a database when you have a back-end when you have an API most of the time you're gonna have a unique ID for your resources so title and let's also do completed I'll set that to false all right so now what I'm going to do is just take this and copy it down two more times and let's change this ID to two let's make this we'll say dinner with wife and this one ID will be three and let's say meeting with boss okay so we have a couple to do is now in our state now to access state we can say this dot state dot whatever we want in this case two do's and I can actually go in the render and I can do a console.log above the return and say this dot state dots to dues okay so now if I open up my chrome tools you'll see an array with three two dues all right and also let's get rid of that if we go to our react tools and we take a look at the app component down here you'll also see the state okay and inside the app component we have our two dues component which doesn't have any state of props or anything like that now what I want to do is take the two dues that are in the apps the main app component state and I want to pass them down to the two dues component as a prop okay or as a property and the way that we can add props is just like like an HTML attribute so for instance we can say to dues equals and let's just set this to this dot state dot two dues okay so we're taking the two dues in our state we're passing it to the two dues component as a prop okay so now we have to figure out how do we access this from within our two dues components so let's save this and just doing that if we hover if we click on the two dues component you'll see it has props now with the array all right so if we go back to to dues j/s we could actually console.log this above the oops we want to be in the render above the return and we can say this dot props dot to do's and now if we go in our console you'll see that it's printing out all of our prior to do's okay so remember it's it comes from the state of the app J s and then we pass it down as props and we access it with this dot props so the next thing we want to do since we have this array of to do's we need to loop through them and then output something okay I'll put the actual text or title or whatever so in react what we do is we use the map method which is a high order array method and it's used it's used for a lot of different things but basically it can return an array from an array but we're just using it to loop through and then outputting JSX so I'm gonna actually replace this whole these parentheses right here I'm gonna return this dot props dot - duze remember that's our array and we want to map through so we want to do dot map and inside here we could use function but I'm gonna use stick to arrow functions so let's put in some parentheses and we'll say to do so it's just like a for each we're mapping through and for each one we're gonna call it to do that's basically our variable we're using we could call this anything and then we're gonna do an arrow and we're gonna put some parentheses in so basically we're saying for each to do that we map through what do we want to return as far as JSX what do we want to display in the browser so I'm just gonna put in an h3 and I'm gonna put in my curly braces and I can put any JavaScript expression I want in here I could even do like one plus one and save and we should get three twos obviously we don't want to do that we want to display the to-do title so we're gonna take to do which is right here it's being passed in here and then that's an object so we want the title property okay and again it's coming from here we want the title of each one so let's save that and now we have three h3 with the title of the each to do alright and ignore this for now this warning I'll get to this in a minute now I don't want to output just an h3 for each one I don't even want just the mark up in here I want to I want to load a whole new component called to-do item so what we'll do is inside of our components folder let's create a new file called to-do item Jas okay now I actually have an extension installed called es 7 react Redux graph QL react native snippets and I'd highly recommend it for react development or Redux graph QL react native so if you just search for it you can just install it click the green install button if you want to use it what it'll do is it allow us to generate components really quick once you install it your server is probably going to stop so you'll just have to do NPM start again alright so I'm going to generate a class-based component with RCE tab and you can see it generates a component called to-do item because that's the name of the file so this this really speeds things up so you don't have to keep you know copying and pasting or typing it out or anything like that alright and in to-do item you can see it just returns a div and for now I'm just gonna and I'll put in a let's just do a paragraph and we'll just say hello and save alright now let's go back to to do zjs and let's import to-do item from and it's in the same folder so just dot slash to-do item and instead of outputting in h3 when we map through these these two do's that come from our props I want to output the to-do item about the tofu item that to-do item like that and if I save we get hello three times and the reason we're seeing hello three times is because we have three to do's that are being passed in they're coming from the state being passed in as props we're mapping through those props and then we're outputting to-do item which only has inside of it so obviously hello is not what we want to display here we want to display that particular item so in order to do that we're going to take the current to do which is being passed right here through the map function or the map method and we're just going to add on here to do equals to do okay so if I save that we get no different nothing changes because we haven't changed this now remember this is a prop okay to do is being passed into did to item as a prop so we should be able to simply say in an expression this dot props dot to do and then whatever property we want so we want the title and let's save and there we go so now we're seeing each prop I'm sorry each to do title now this arrow down here it says each child in an array or iterator should have a unique key prop okay so that when we map through something it's actually creating what's called a list okay and lists need they should have keys you I mean it doesn't break the application but we'll just keep seeing this warning so we just simply want to add a key onto this which should be something unique now remember we have access to the to do and that to do has an ID which is unique so I'm going to say the key is going to be to do dot ID and we'll save and now that error goes away now I think it's a good time to talk about prop types okay now prop types are sort of a validation for properties that a component should have okay and we can set the type we can also set them to be required or not so our - duze component has a prop of to do right we're passing in I'm sorry a prop of - duze so we need to add that as a prop type so in - duze j s we're gonna say import prop types from prop - types and then we want to go down below the class and we want to define any prop types for this class so we'll say the name of the class which is - dues dot prop types equals and it's going to be an object of prop so we have a prop called - dues so I'm gonna say prop types dot and then it's an object and it's going to be required so we'll say is required okay and we'll save that invalid prop - dues of type or I'm sorry it's not it's not a object it's an array of objects so we want to put array okay so it's right there it told me that this is you know object is wrong all right so it's just good practice to do so we'll just say prop types okay and our to-do item also has a prop of to do so we want to do the same thing there so I'll copy this import prop types we'll put it inside to do item and then let's copy this and put that in to do item as well except we're taking in a to do which is an object not an array it's a single object and we'll save that - duze is not defined that's because this should be to do its I'm sorry to do item this should be whatever the name of the class and there we go okay so let's move on I want to start to look at style now in JSX we can actually use inline style which allows us to like I said have our markup our job our functionality and our styling alright in our components so we're gonna be focusing on this to-do item and to add some style I could go to this for instance this div right here and I could add style equals and then we put in double curly braces if we're using the inline styling we use double curly braces and let's say I want to add a background so I could say background let's say background color now it's identical to CSS except there's no hyphens we don't do background color like that we do camel case so background color and then in quotes we can put the value so I'm going to do light gray hexadecimal and I'll save and now you can see that each to-do item has a background color of light gray now we could also use variables so for instance if I wanted to go out here and say Const let's say item style equals and we could go like that and I could say background color and set that to have for three times and then I could use that variable if you use a variable you only need the the single curly braces and I could say item style and save and you can see I get the same result now you can also put your style inside of a function and that's what I'm gonna do when I'm doing it for a reason because I want the style to change depending on if the the to do is complete it or not if it is I want to have a line through it so what I'll do is I'll set this style equal to a method so a method in the class so I'm gonna use this dot get style I do that I'm gonna get rid of this down here I just wanted to show you that as an example and then above render I'm gonna say get style and we're going to use an arrow function here so we're gonna say equals and then any parameters that it takes and then an arrow and let's return and let's return actually you know what I'm going to do is first show you kind of the long way to do this because I remember I want to check to see if if the completed is true if is that I want to put a line through so I'm going to say if let's say if this dot remember props contains our the current to do so dot to do dots we want to check completed okay so if it's completed then let's return a style of text decoration remember we have to use camel case no no hyphens and we're going to set that to actually you know what let's let's see if it's not no we can do it this way I guess so we'll set tectus text decoration - I'm sorry line through okay and then we'll do an else then return our styling with text decoration as none all right so I'll save that and there's no line through notice because none of them are completed but if I go to our app J s and when I go to our state here and let's set the second one - whoops I'm sorry I'm gonna set that to true and save and now you can see that there's a line through it okay so this is a good example of how putting your styling inside of your or basically how you can use dynamic styling now this is a lot of code to write just for this so we can we can cut this down by using a ternary operator in in just one return so I'm gonna do the same thing by just saying return our style and for a text decoration for text decoration I'm gonna say I'm gonna use a ternary operator I'm going to say this dot props dot to do dot completed if that's true then let's make this line - through else okay else is represented with a colon then I want it to be none and if I save we get the same result and then we could add any other styles we want here as well so I also want to add the background so we'll say background like gray I'm gonna put a comma here so that's the that's the syntax I'm gonna add some padding I'll say 10 pixels comma I know it's it's a little weird when you know when you used to CSS you're used to putting a semicolon and not using these quotes and stuff like that but that's just how it is with JSX let's do a border bottom the camel case is a little weird as well border bottom will say one pixel ccc dotted and save and there we go there's our two dues or there's our styling for our two dues so let's see next thing i want to do is i want to have a checkbox next to each one all right so let's go down to our render and within the paragraph we'll just put this on a separate line before the title i want to put a checkbox so i'm gonna say input type is gonna be checkbox let's see so we don't need a name or an ID but we need to I mean if I save this we can see it and everything puts space there actually if we want to see how there's no space here what we could do is just put in an expression with a space and save and that will push it over but basically to make this actually do something we need to add an event okay so now we're going to start to look at events so let's say on change so we have like on click on change on submit just like vanilla JavaScript except it's camel case you're gonna you know with capital C here so on change is gonna equal a method and we're gonna say this dot and let's call it mark complete all right I'm just gonna close this up to give us some more room here so we're gonna call it mark complete and then we can add this method let's go we'll just put it right above render so we'll say mark complete now you want to use arrow functions and I just wanna I want to show you why so if I were to let's see if I were to do this and when you have an event and you when you call a method like this it takes in an event parameter but let's say I wanted to just console.log this dot props and I'll open up my console over here now if I save this and I check one of these we get an error and this error says cannot read props of undefined it's talking about this line right here it can't read props of undefined so this is actually undefined now there's two things we could do here about two options one we could bind this and the reason we can use this in like render we could use it in some of the other lifecycle methods but I haven't showed you those yet it's because they're part of this component class this is a custom method that we just created so it doesn't have access to this so we could do dot bind this and if I save that and then we go ahead and we run that event if I check this it works it shows us the props now a better way to do this if you don't want to have to add vine this is to simply use an arrow function so just put an equal sign here and then an arrow and then we can save that and now it should work okay no error so now I'm gonna attempt to explain and show you probably the most difficult part of this and in one of the most difficult things for me when I was learning react since we're not using a state manager like Redux we're not using the context API we have to basically climb the tree or what is it called component drilling I think it's called something like that where basically we have our state inside of our app.js file right so we can't simply say this dot set state you know and then change the completed value to true or false we have to climb the ladder we have to go from to-do item to - dues and then into AB js' and the way that we do that is through props we could recreate methods inside of our props and we call those so instead of just having a mark complete in here what I'm going to do is I'm going to call this dot props dot whoops dot mark complete so I'm going to save that and by doing that if I go up to - dues which is the next level up and I go to where the to-do item is I can actually add a prop of mark complete and set it to whatever I want so let's just call this dot mark complete inside of this component and then I'll go up here and I'll say mark complete and let's just test it out we'll just do a console log and we'll just say hello so let's save that and check it off and we get hello so let me just kind of reiterate what's what's going on here in the to-do item when we check the box we're calling this dot props dot mark complete and since we're using this props here and we have a prop called mark complete it's gonna basically run run whatever we set to this and we set it to an actual method here called mark complete now again we have to go up one level because the state isn't here right it's an app j/s which is one level above so again I'm gonna just get rid of that and instead we're going to say this dot props dot mark complete and then we're going to attach mark complete to this - duze here in the app j/s and this time we can actually call this dot mark complete and we can change the state so we'll go right here mark complete man let's test it out we'll say from a pas and now when I check we get from app J s now the issue here is we need to know which which one are we actually marking complete so we need to pass along the ID the way that we do that is in our to-do item where we start this at the check box we need to bind we're going to say dot bind and this is always going to be the first parameter so we do need to do dot buying this but then we can pass in the ID or we could pass in this dot props dot to do dot ID okay because remember we have access to this dot props dot to do now this can be kind of a pain in the neck after a while when you have to keep doing this dot props to or this dot state so what we can do is we can use something called destructuring to pull the variables out of the to-do and the props so let me show you what I mean if I go up to ret up above return okay you want to make sure you're above return and I'm gonna say Const and open up some curly braces and let's set this equal to this dot props dot to do and what we can do is actually pull out values from this dot props to do and I want to pull out the ID and the title okay so then down here I can simply use ID and I can use title I don't have to do this dot props for every single every single one we're just basically pulling the variables out so now that we've done that let's save and now we're out we're passing the ID up okay it's going up through two do's and up into AB KS so now we should be able to grab the ID here so let's console.log ID and now when I check one of these we get the actual ID of the one that's being checked okay so now the idea is to actually change the state for that particular one so remember we have to use set state so this set state and we want to change I mean the state is an object right we're looking at state as a whole actually I don't know I did that we're looking at state as a whole which is an object and we want to change something within two Do's so let's say two Do's and we need to basically match the ID that's passed in here and if it matches then we want to update the completed value when it's checked so we're going to use map we're gonna say this dot state okay remember we're in the app j/s so we're talking state here dot two dues dot map and inside map we're gonna just call this to do and we're gonna use an arrow function here and then we want to use an if statement and we want to check to see if the to do the current to do that we're iterating through if that ID is equal to the ID that's passed into the function then we want to set to do dot completed equal now we don't want to just set it to true because if I do that it's gonna stay true if I if I check it again it's still gonna it's always going to be true we need to toggle it so if it's true it would be false if it's false Oh to be true so what we'll do is we'll set it to not to do dot completed okay whatever the opposite is we're gonna set it to and then underneath that we just seem to simply need to return to do okay so let's save that and then we'll go and we'll check one of these and there it goes you can see the line goes through it okay I can uncheck or untape the line off as well and then if I open up my react tools here and we take a look at the state for the app component and let's look at the actually let's look at us let's look at a single to do item so the first one here we'll look at the props and you can see completed false but as soon as I as I tick that it turns to true again false okay so it's just it's toggling the state at the top and then that state is being brought down through the props into the components okay so think of as the state is like this like this cloud of data that hovers above all the components and then we're just sending something up to change it and then it rains back down okay so it's it's a one-way data flow and I know this stuff can be kind of hard to understand but don't worry about it as you progress and as you actually build some projects you'll you'll start to get the hang of it let's just put a comment here so this little mark to do or let's say toggle complete I probably should have called it toggle complete but that's fine whatever and then that's just the render alright so now what I want to do is I want to be able to delete each one of these so we need to add a little delete button and kind of do the same thing call a method on a prop that's going to come back up to the app J s and then get rid of that get rid of that to do so in to-do item let's go let's go after the title here so we have the title and then let's do a button and I'm just going to put an X okay so we'll do an X and then let's add some styling to this so I'm going to say style and I'm going to set this to of variable let's call it BTN style and then we'll go down here let's go below the prop types will say Const BTN style let's set the background to red so we'll do hexadecimal ff0000 and the color is gonna be white and let's do border none' and padding I'm gonna say five pixels top and bottom ten left and right and we want border radius okay remember to use the camel case here and I'm going to set that to 50% because it's gonna be a rounded button and then let's make the cursor a pointer and let's also just float it to the right alright so we'll save that and there we go so now I have our little X buttons they look kind of messed up on this they looked better on the other one let's change to this maybe to eight there we go we'll do nine whatever looks good and of course you can change it or you could even use bootstrap or whatever you want to do that the style does really doesn't matter so we need to be able to add an event now to this button for when we click it okay we want to click it we want something to happen so I'm going to add an on click and I'm going to set it to this dot crops we're gonna do the same thing I'm gonna send this up to where our state is so this dot props dot let's call it del to do and again it's going to need to know the ID so we're going to do a dot bind this and then ID because remember we used e structuring up here so we have the ID variable available to us and we'll save that so it's going to give us an error here because we didn't actually create this prop so let's go up to to dues just like we did with the mark complete we're gonna say del to do equals and then we're again we're gonna go up so this dot props dot del to do save that and then we'll go up to app J s same thing let's go right here del to do equals this dot del to do no props because we're actually running it in this app J s so let's say delete to do del to do and we want to use an arrow should give us the ID and let's just test it out so we'll console.log the ID so if we save and we open up our chrome tools we go to our console if I check if I click one of these delete items we should see the ID good so now we need to basically manipulate our state by removing one of these two do's and the way that we're gonna do this is with the filter method okay again it's a high order array method and basically it loops through and then based on a condition it will return another array so what we really wanted to say is if we only want to return to dues that don't match the ID that's passed in because we want to delete that one all right so let's get rid of this console.log and let's say this dot set state and let's see we want to pass in our state object we're dealing with the two dues and we need to basically copy everything that's already there and we can use the spread operator for that which is three dots so we can say spread this dot state dot two dues and then we want to filter okay and what we want to filter is you want to say for each to do we want to filter out any or we want to return a need to do that where the ID is not to the ID that's passed in right here okay so it's gonna filter out the one that we're deleting so let's save that and let's go over here and let's grab the second one and click delete and there goes now they're gonna come back once we reload because we're not we're not persisting to a database even when we use JSON placeholder it will delete it we'll send the request but it doesn't delete it from the database we don't have an actual back-end that we're working with remember react as a front-end framework it's a UI framework or library but that takes care of the delete so now what I want to do is let's add the let's say that let's create the header the header is going to be just a just a functional component because there's not going to be any state or anything it's basically just just markup so in the components folder I'm going to create a another folder I'm gonna call it layout okay and you could even create a folder called - duze if you wanted to have all your to do stuff in there this we probably should have done that but it's it's fine so in layout let's create a file called header dot j/s and i believe yeah this is the first time we're looking at a function-based component which is pretty easy so we just need to now we could use our extension I could do our CF flips the hell's that our CF tab or is it what is it RFC yeah but I want to type it out just so you get the syntax so let's say import react from react and then we want to create a function and let's call this header and I we wanted to return so basically this this is kind of like just having a render okay when we have a class we have different methods we have other lifecycle methods we haven't looked at but we have render we have like component did mount with a functional component it's basically just it's one return that's that works like the render does so we're going to return in parentheses let's put a header so a header tag html5 header tag and let's put an h1 and we'll say to-do list and let's see we are gonna have some links for the about page but I'm not gonna do that just yet we'll just have the h1 and then we need to export the function so export default header and then let's bring it in to App j/s I'm actually gonna bring it in right here so import header from let's do let's see where are we we want to go dot slash component slash layout slash header and then I'm gonna put this in the render right above let's see right above the - duze yeah let's do that so we'll say header save it there we go now let's add some styling to the header so I'm just gonna add right here style and we'll set that to variable called header style alright and then we'll go down here and create that so I want to add a background let's make it dark gray almost black color will be white and let's text-align:center and we'll add some padding 10 pixels there we go cool so let's see that's good for now let's uh let's let's create our ad for more ad to do components so in components I'm going to create a new file called add to do J s and this will be a class-based component I'll do our C II tab and if course if you don't have that extension just type it out now for the let's see for the div here actually won't even need a div we're gonna it's gonna be a form so in our form let's put an input type text and the name is gonna be title we don't need an ID we do need let's see let's do a placeholder and we'll just say add to do and let's just fix this up a little bit I usually use the prettier extension for vs code but I don't have it installed right now I'm a little rusty with with formatting all right so we have placeholder let's see well let's just create the input field first and then we'll talk about the state and stuff so underneath the input let's put a submit button I'm just gonna say input with the type of submit value we'll say submit let's fix this up alright so C value let's also give it a class name I'm gonna do like just a button class inside the main app CSS file so we'll call this BTN and