Learn React With This One Project

react is the most popular front-end framework out there and there are tons of jobs looking for good react developers but learning react and becoming a good react developer is incredibly difficult that's why I'm creating this video whether you're an absolute beginner at react or if you've tried to learn react and it's never really stuck with you this video is perfect because it's going to introduce you to all of the basic concepts of react and give you a really good foundation for learning the rest of react that's because in this video I'm going to be covering things like what react is how to think like a react developer components props State use effect and much more this is the perfect video if you're just getting started or if you really want to make sure you master the basics of react [Music] welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner and in this video I'm going to be breaking it down into a few different sections and I'm also going to be putting timestamps down in the description so you can skip around if you want this very first section is just going to be what react is the next section is how to think like a react developer which is by far the most important section make sure you don't skip that and then finally at the end I'm going to be using a project to demonstrate all the different concepts of react that I think are important to understand if you're just getting started now very first I want to talk about what react is on the home page you can see it says it's the library for web and Native user interfaces and essentially all react is is something called a front-end framework which just allows you to build out front-end based applications with some more ease and some more features on top of normal JavaScript so if we scroll down here you can kind of see an example of what some react code will look like you can see that we have stuff that looks like HTML it's called jsx I'll talk about it more in a little bit but essentially this is how you define things inside of react and you'll notice you have normal things like an anchor tag a div and H3 and you also have things called custom some components like a thumbnail or a like button and you'll notice when I hover over these things on the left on the right hand side it's actually showing what this corresponds to inside of the actual HTML rendered version so the whole idea of react and most other front-end Frameworks is to break up your code into these different components like a thumbnail component a video component a like button component and then you combine those different components together to create your application it's a different way of thinking about programming and it makes writing larger applications much easier you can see if we can scroll down you can see this right here write your component with code and markup and you'll notice it looks just like HTML but with a few extra things thrown in and that's what that jsx is for and again I'm going to be talking about this in more depth you'll notice you can add in different interactivity for example we have like some on change events and so on that are happening here so when I actually change my search you can see that is actually filtering what I have down here in this bottom list and that's really all you need to know about what react is it's just a tool that makes writing front-end applications Easier by going through and doing a lot of the hard work for you of making sure everything syncs up properly and you can just write your code much easier to understand way now with that out of the way I want to actually talk about how you think about react code and how you think in reaction because it's quite a bit different than what you do with JavaScript so here they have a page in the documentation that explains this a little bit but I'm going to go in even more depth because I think it's really important so the main thing that when you're writing out your react code you want to think about what the final version of your application is going to look like so here you can see that we have what our UI is going to look like and then you want to break that down into components that's the first step they recommend so you're saying break this UI into components and you notice that they have each section kind of highlighted so we have like this search bar section we have a table with all of our products we have the actual category rows each row for our product and so on so it's breaking down this large overall UI that we have here into a much more concrete different pieces that we can break apart as you can see here and we can create those components inside of react so the first step and the most important step is to think about your application as the final product what do you want the final product to look like then break that final product down into different pieces as you can see that they've done here then you can take those pieces and we turn them into components inside your application which I'll show you how to do in the last part of this video where I go over a project-based example but the real key with when you're breaking apart all your different things into components is when you go to actually write your code for the components and how everything works you need to rewire how you actually think about writing your different programs because inside of a normal you know javascript-based application you're going to be writing what's called imperative code that means your code goes step by step from the top down to the bottom you're saying do this then do this then do this then do this you're just telling your code what to do a list of instructions react is different because instead of saying do this then do this then do this you're saying I want this to look like this in the end essentially you're saying I want my UI to look like this and you just fill everything in for me it's called declarative programming the best way I can think of as an analogy to write this out is if you wanted to make a sandwich for example one way you could make a sandwich is get a list of ingredients and then you could have a list of instructions step by step on how to make a sandwich so you could say you know like get the bread then you could say put the meat on the bread put the vegetables on the bread put the sauce on the bread and now you have a sandwich the other option of creating a sandwich would be going to a sandwich shop and just saying give me a sandwich these are the two different approaches the first one where you had a recipe with instructions that's the imperative approach that's like how normal JavaScript code is written the second approach where you actually had you can sandwich shop you just went there and you said give me a sandwich that is the declarative approach because you're saying I want this specific thing give it to me so imperative is saying here's how you get to the end result and declarative is saying what you want so instead of saying how to get there you just say what you want and that's the big mindset shift that you need to have when it comes to writing react code and again in the project at the end of this video I'm going to show you exactly what I'm talking about in that declarative mindset you need to have that's the biggest shift you need to take when you're going from JavaScript code to react code otherwise all of your normal JavaScript Concepts you learned apply perfectly to react now if you want to really master that react way of thinking I actually have a full react course called react simplified and the real purpose of this course is to change your mindset to that real act way of thinking that declarative mindset it's very difficult to go from a JavaScript way of thinking to a react way of thinking so this course is specifically meant to do that for you so if you're interested in this I'm going to leave a link down in the description and for just the next couple days I'm actually running a sale on it it's the lowest price it'll ever be so if you're watching this video right when it comes out I highly recommend checking that out to get that lowest price possible now with all that out of the way let's just close out of this and we can see what the final version of our application looks like that's going to be on the right hand side here you can see I can enter in a new item that I want to do like let's say I just want to do the laundry as my to-do item I click add you can see it's been added to the list I can check it as completed and I can even delete it from the list and if I just come in here and I just say do laundry again add that in check it off and refresh you notice my data is actually persisting through and I can add in something else to list and you can see that that is showing up as well so this is what the final version of our product is going to look like and it's going to cover tons of different things like components State use effect other different Hooks and so on so this is going to cover all those things that you need to know about react all those basic and even some intermediate Concepts so to get started creating a racked application the best thing to do is just open up your console and what you want to do is you want to run npm create Veet at latest and then just hit enter and that's going to create a v application first you want to tell the project name if you put period it's just going to create it in whatever folder you're currently in that's what I want to do and then you need to scroll down here where it says react just use the arrow keys and we want to use JavaScript or JavaScript with swc the swc is just going to be slightly faster but if it doesn't work just choose normal JavaScript it'll work just fine now we can run npmi to install all of our dependencies and then we can run npm run Dev to actually get our application started so we can just run that real quick it's going to start up our application and if we open that up you can see here is the final version of our application this is just what's randomly generated and it just has a really simple counter right here pretty straightforward now if at any point you had issues where like npm wasn't defined you just need to make sure you install node.js so just go and search node.js download download that and then npm should work just fine for you so once you have this done you're going to notice you have some files on the left hand side a lot of things are generated for you you have a config file for defining any of your veed configurations that you need you can ignore this package Json just you can ignore this as well same with this lock file this index.html is really important because you notice this is where our script tag is being imported if we look inside of our source we have this main.jsx and all that this is doing is it's hooking up our index HTML with our react code because inside of react your HTML is actually completely empty all we have is a single div called root and if we look inside of our jsx here which is our JavaScript code for react that's what jsx is standing for essentially you can see here that we're getting that root element and we're rendering our application inside of it which is just this app component right here so the important thing to understand about this main.jsx and this index.html is they are just hooking each other up to one another so that way everything inside your application is going to render inside this root div right here and as you can see if we inspect our page and we look at the elements you can see that this root has all of our application inside of it just like we expect now the next important thing to understand is the idea of components if we look at our app.jsx you can see we have a function and that function is being exported a function inside of react as long as it starts the capital letter is essentially just a component because you'll see down here we're returning what looks like HTML but again this is called jsx I'm going to cover more exactly what the differences are but if you're returning jsx from a function that starts with a capital letter that is called a component and a component like we talked about is for breaking down the individual parts of your application so in our application you can see here that we have our to-do items those could be a component we have a list of items that could be another component we have this form up here at the top that could be another component and you can break things down as granularly or as non-granular as you want to get started we're just going to put everything inside of one component and then we're going to break it up as we see fit based on what the actual particular needs of our application are when you're getting started that's generally the easiest way to go you'll also notice we have a few other files like some CSS files and some acid files I'm going to be deleting pretty much everything so there's assets we're going to get rid of we don't need this public folder same with the CSS we're going to get rid of that inside here we're going to remove the import for our CSS so that way we can see mostly everything's working and in here I'm just going to get rid of everything I'm just going to say that we have a function called app which we're going to export as a default which is just going to return the text high so now you can see we just have the text High being returned super straightforward now the last thing that I want to do before we actually get started is I have some CSS that I'm just going to bring in I'm just going to copy paste it into the source folder if you want to use this exact CSS it's actually going to be linked in the GitHub repository in the description down below so you can get this exact CSS but it's rather complex it has nothing to do with react so I'm just going to be bringing it in right here and then we can import that anywhere we want so we can just say import dot slash styles.css and if you're unfamiliar with this import syntax or this export syntax I have a full video covering it it's actually a JavaScript concept I'll link into the cards and the description for you so there we go you can see we have some things that have changed for our styles to support the styles that we have in our style sheet next what I want to do is I actually want to create these different elements that we have here for our different form elements so let's do our form first here and what we can do is we can just come in here I don't want to return a form element because this is going to be a form and inside of here I want to just render out all of the essentially HTML for this and you'll notice this jsx will look almost identical to HTML so for our form we're going to want to give it a class and normally you just say class and then you would give it whatever class you want in our case new item form but inside of react class is actually a reserved keyword because you can create you know a class like this so what we need to do is we need to call this class name instead so anytime you have a JavaScript keyword like class or four you need to replace it with class name or html4 and so on and I'm going to show you all those instances in this video but if you wanted to find a class name on something you need to use class name instead of class and that right there is going to give us the class styling for our form so let's put our elements inside here for example we're going to have a row so I want to say class name is form row and inside of here I'm going to have a label and this label is just going to say new item and then I'm going to have an input for that new item label so we're just going to say type is text ID is going to be item there we go and let's just close that off and then our label we want to link up our label on our input normally you use A4 for that in our case we're going to be using HTML for just because it's jsx and not HTML now with that done if we come over here you can see we have this and I click my label it properly highlights inside of my input so we know that this html4 is working properly the next thing I want to do is just add in our button so we're going to add a button we're just going to have a class of button added onto it it's just going to say add so now we have our form you can see it looks identical to the form in our other example which is exactly what we want now the next thing I want to do is add this header right here so we can just come in here with an H1 and this is going to say to do list and I'm also going to give this a class name of header and if I save you're going to notice it's actually giving us some errors and that's because one really important thing to know about components inside of react is you can only ever return one element you'll notice here we're returning two elements we're returning a form and we're returning an H1 and at the top level you can only ever return one element there's a few ways to get around this you could just wrap everything inside of a div and that will technically work if I just bring this down here you're going to notice now everything works but we have this extra div wrapping everything so instead you can use a fragment a fragment is just an element that has no tag at all inside of it so you can see that this is just an opening and a closing ankle bracket and here we have the exact same thing but this one is just got the slash in the middle and now if we save we get the exact same result now we no longer have that extra div wrapping everything so if you want to return multiple elements from a component you need to use a fragment and a fragment is just essentially an empty tag so now we can finally get to the point of rendering out our list so we can come in here we want to have a UL which is going to have a class here of list close that and then inside of here we're going to have a few different lies and inside the LI I want to have a few things first of all I want to have a label and inside this label I'm going to have an input and this one is going to be a check box so we're going to say type is checkbox and we're just going to close that off and inside of our label we could just put whatever we want like item one for example and then finally we can add a button and this button is going to be our delete button so let's make sure we give it proper classes that's just going to be danger there we go this is just going to say delete now if we save you can see we have item one here if I copy this down one more time item two you can see item two is showing up and I can check mark them and everything is linking up perfectly so up until this point all we've really done is we've converted what we want the final version of our application to look like into something called jsx which as you can see looks almost identical to HTML there's just a few really minor differences like class name html4 and this empty fragment tag also you'll notice our entire page is essentially static nothing at all can change and obviously we want to be able to like add new items when I click add instead of just having it you know clear out and refresh the page so that's going to be the thing that we work on next but I want to very first make sure that we understand what this is this is almost like that declarative approach I am declaring I want my site to look like this and I wrote out all the jsx for what I want it to look like and now when I start adding interactivity into my site instead of saying okay I want to manually change this value and then I want to do this and then I want to do this instead you're going to be changing this jsx and just saying I want this value to always be equal to this specific variable and so on you're just saying this is the value of what this thing is again you're declaring what your output is going to look like and react does all the magic behind the scenes for you to make sure it hooks everything up so in order to actually build the modified variables and have things interactive you need to use something called state so what we can do is we can come into here and we can say use State this is a hook inside of react we can just import this from react up here at the very top and use State essentially takes a default value by default we're going to give this an empty string so we're going to hook it up to our input right here and by default our value is just an empty string this is going to return to us two things so it's going to return to us an array of two different values with the very first value inside of this array just going to be whatever the value of our thing is we'll call it new item and the second value inside this array is going to be a function a function sorry for updating our value so we can say set new item and this is a very common naming syntax you'll see the first name is called whatever and the second value is just going to have set in front of the name because it is a function and now if you're very unfamiliar with the syntax of Destruction I have a full video covering this as well I'll link it in the cards in description this is a JavaScript concept not a react concept so now we need to talk a bit about what state is because it's kind of the magic behind how react works so well so like I said I have this function right here that allows me to update my state normally you would just say like new item equals whatever your new value is going to be you know I can just say this is my new item value but inside of react you cannot update a state variable like that if you're using State you are not allowed to change the value of your state because this is immutable which means it cannot change technically it won't throw any errors but this will not work like you expect it to you'll even see here it's actually throwing me an error it's saying that I can't redefine this because it's declared with a const so already that's helping me a lot now instead if I want to change my value I need to call the function set new item and I need to pass it my value like this and what this is going to do is it's going to update my new item value to be this value right here but to do that it's actually going to re-render my entire component if I actually save this it's going to cause an infinite Loop you're going to notice nothing's working it's causing an infinite Loop which is why that's not working and that's because what happens is it renders my component we'll just comment this out for now it renders out your component and it comes down it renders out all of this jsx right here it converts it to HTML and puts it on the page we've already seen that happen so far when I call set new item what that's doing is it's saying okay I want you to update my new item variable to this new value and then rerun my entire component with that new value so when I call this it's going to run this entire application over again it's got my new item value set to this and then it's going to render all of this jsx down here convert it over to HTML but the problem is I have set new item right here so every time my component reruns it's calling this function again which tells my component to rerun and over and over and over again causing an infinite Loop this is a really common problem a lot of people run into so what we want to do is we want to update our input when it changes so we can come in here we can say the value of our input is just equal to whatever our new item variable is super straightforward so now whatever this is they give it a default value you can see it gets put right here inside of that new item section and it doesn't matter what this is it's going to be updated right there now obviously we just want to leave this blank to get started and we want to update it whenever our item changes so inside of react if you want to handle different event listeners you can just come in here you can say on and then whatever the event listener is so in our case we have an on change event and the on change event and react actually works a little different than it does inside of normal JavaScript because normally on change only fires on blur or like when you stop changing something normally you would need to use on input if you want something to happen every single time you change the value in the input but on change in react is changed so that every single time I click a key it's going to call on change right here so this is going to take in an event object and what we can do is we can call set new item with our event.target dot value so what this is doing is just getting the value of my input it's setting it as my new item value and it's putting it right there so now if I refresh and I type you notice my input is working just like it did before if for example I remove this on change and I try this and I refresh you're gonna notice I'm typing but nothing at all is happening and that's because my value is set to be new item which is an empty string so I'm declaring that my input always has a value of empty string but I'm never updating it so it's never getting changed here I'm saying whenever I change my input get the new value of my input set that as my new item rerun my component and now the value here is set to my new item value which is whatever I have typed into my input this is again something that trips up a lot of people but what you need to understand about what you returned from your component you're just returning the exact output of what something is going to look like so if your value is set to a specific value the input is always going to have that value no matter what happens and the only way to update that value is by changing it somehow by calling you know set new item and changing that state variable and also when you you change the state variable the important thing to note is that it always re-renders your entire component so that way if you have any changes so like when this new item changes when it Updates this value it's going to make sure it updates everywhere that's used inside of your component so now with this done we at least have our input working but when I click add it's not doing anything at all so let's go ahead and work on that next so we want to be able to have some type of event listener on our form so we're going to use the on submit event listener and we're just going to call a function I'm going to come up here I'm going to create a brand new function called handle submit just like this and I could just say e dot prevent default that's going to prevent my page from refreshing so now when I click add you're going to notice it just does nothing at all which is great what I want to do is I want to create a brand new to do and add it to our list so to do that I'm going to create another piece of State we're going to call it to do's and set to Do's we're going to set that equal to use State and by default we're going to have an empty array for our to do's and again any type of data that you want to have re-render your component when it changes so when we change our input or when we change our to-do's we obviously want to re-render our application to make those new changes take effect you want to put those inside of state so we're putting this inside a state here so now I can say that I want to set my to-do's and normally the way I would set my to-do's is I'll just come in here you know I would get my to-do's and I know that I can't modify this variable so I'm just going to spread it out and that's going to give me a brand new array and I can just add a new value onto the end of it like this and this would work let's come in here give it an ID crypto.random uuid we're going to say the title it's just going to be new item and completed is going to be false this technically works and if I come in here and I just do a quick console.log of our to-do's I inspect our page go to the console you can see it starts out as an empty array and if I click add you can see it's adding a brand new to do to the end of that list as you can see here but this is not how you're supposed to do this inside of red because let's say I copy this down this should now technically add two to Do's but it doesn't so let's check this again the type a bunch I'm going to click add I'm going to refresh or I'm going to inspect my page any of those we still only have one to do not two to Do's being added and that's because with the way that setting State Works inside of react is this value to Do's is always equal to whatever we rendered on our last render which by default is an empty array so to Do's is an empty array when I call set to Do's it's taking an empty array and adding one value to the end of it when I call it a second time this to-do's value is still in empty array so it takes an empty array and adds a new value to the end of it so technically this first one never even matters at all because this second one is overriding everything that this first set to-do's does so if you want to be able to modify the existing data you need to actually pass a function to your set State here you're set to do's and this function is just going to return whatever value you want the new state to be and the important thing is it actually takes one argument which is the current value for whatever your state is so here I can just copy all this code that I have right here put it inside my return but instead of using my to-do's list to find up here I can use this current to Do's right here and now it's going to make sure that if I do this twice it'll actually add two values to my array instead of one so let me just show you that in action real quick we'll refresh hit add and now if I inspect my page go to the console you'll notice our array now has two values instead of one because the first time we run our set to Do's our current to Do's is equal to an empty array and it adds one value to the end and the second time our current to Do's is equal to the return value from here so it has one value in it already and then it adds a second value to the end obviously we only want want to add one value so we're going to remove this second ad but I wanted to put that there just to show you the difference between using a set new item like here where we pass a value versus passing it a function because it's really important anytime you need to use the current value you want to make sure you pass a function otherwise you can just pass a value like this so now we actually have all of our to-do's they're being stored inside this array so instead of hard coding our to-do's down here let's actually Loop through the to-do's and render them out to do that inside of react we need to use a map so we can say to dot map you'll notice that I have this interesting curly bracket syntax right here anytime you put something inside of curly brackets what it's going to do is it's going to run it as JavaScript code and whatever it returns it's going to place right inside of here so here this to dot map is just going to return an array and an array gets rendered out to jsx just like as if it was elements one after the other so for each one of our to-do's what I want to do is I want to return An Li element I essentially want to return all this code right here so let's just paste that in there and remove all of this right here what I want to do is I want to get my to do dot title and place it right there and for our checkbox I can set my checked property equal to to 2 dot completed there we go so now if I give that a quick save you're gonna notice it's rendering out those two items if I refresh I just say to do one and then I say to do two and three you can see it's adding all those different items to the page right here which is exactly what I want but you'll notice something interesting if I inspect my page go to the console we're getting a bunch of Errors each child in a list should have a unique key prop so if you're returning an array of elements inside of react which as you can see I'm returning an array of elements right here with this map you need to make sure each element at the very top level has a key property so I can say key equals and this must be a unique identifier so we have our to do.id which is unique to each one of our to-do's the reason you need to do this inside of react because because let's say I wanted to edit or delete or modify one of the to-do's in my list but I didn't want to change any of the other ones I just wanted to change one well react needs to know which one changed so it uses this key to know which to do is changing so if we should change the to do with the ID of seven it knows okay whenever I change this to do with the ID of seven update the information for this particular element and don't bother with touching any of the other elements it's a performance optimization which makes it so your code can run faster and better and it's going to make sure that no weird bugs come up so it's really important you always remember to put a key which is some type of unique identifier and generally it's bad idea to use the index of the element in the array because if I delete elements in the array it could really mess up different things so now we actually have our to-do showing up in the list and one thing I want to do before we go any further is up here I just want to set my new item to an empty array so that way if I just type in something click add you can see it clears out what I had before just makes it a little bit easier to add more and more to Do's now I want to make it so when I try to toggle the checkbox or delete them it actually does what I expect so here whenever I click on my input right here I actually want to do something so I can say on change and what I can do is take in my event and I want to call a function we're going to call it toggle to do and this is going to take in my ID as well as the e.target.check to determine if it is currently checked or not so let's create that function all the way up here function toggle to do which takes set at ID and whether or not it's completed and I want to update my to-do's to change the ID of the to-do I pass in here to be completed based on this flag right here so I can say set to Do's I know that I want to use the current to do so I'm going to use a function version here and what I want to do is I want to map through these so I'm going to say current to-do's.map through each one of our to-do's and for each one I want to check to see if it's the one that I'm currently trying to toggle so if my to do dot ID is equal to the current ID then I know it's the one I want to change what I can do is I can just return right to do spread out so I get a brand new object I just change the completed property to this completed property here and again this is really important any time that you're dealing with State you cannot change it so you would think normally I would just say like to do dot completed is equal to completed just like that and ignore this right here but that's mutating my state it's immutable which means you cannot change it and if you change it like this it's not going to work properly you need to make sure that anytime you're changing your state you need to make sure that you're not actually mutating it and instead you're creating a brand new state object so here we're creating a brand new to do and just changing one property on it now also I need to make sure I just return my to do because if it's not matching the current ID I just want to return it as is with no changes at all so now you can see when I click it's actually properly toggling between my different to do's and the way that's working is I have this on change click event listener right here so whenever I change my to do from non-checked to checked it's going to call this it's going to call the toggle to do function for my particular ID and it's going to pass along whether or not it's checked and then here I'm just checking which to do I want to change and I'm making sure I return a new updated version of that I can essentially do the exact same thing for delete by just saying delete to do this just needs to take in an ID I want to set my to-do's just like this and what I want to do is I want to use all my current to-do's just like I was doing before now I want to take my current to-do's if I want to filter them so I want to get a filtered version that includes all my to-do's except for the one I want to remove so here I just want to say if my to-do ID is not equal to this ID then I want to keep it otherwise remove it so now I can come down here on my delete button I can put an on click event listener just like all the other event listeners starts with on and then whatever we want to do and here I can just say I want to call delete to do and pass it in my to do.id just like that now if I save click delete you can see it's deleting these just like I expect them to now one giant problem that people run into is they actually write their code like this instead they remove the actual function Arrow right here you'll notice the difference is this is passing a function and this right here is passing the result of calling delete to do this is not going to work you can see if I add my to-do it's actually automatically deleting itself right away the reason for that is because it's actually calling delete to do and then passing the result of that as my click event listener instead I want to have a function that I actually call for on click so here I'm passing a function that calls delete to do so when I click on my button it's going to call this function which is going to delete my to do so it's really important that you make sure that you almost always are going to be passing a function like this just to make sure it's always going to work like you expect because if you pass like this you can see it's calling this function right away and then passing the return value of that function on click which is definitely not what we want this will actually work like we expect it to though now another thing I want to do is when we have no to Do's I just want to render that out to the screen just saying we have none so we can say to Do's dot length is equal to zero and we want to check to see if this is true to do something well inside of react the best way to do that is with short circuiting so we can put double Ampersand here and then whatever we want to return which in our case is no to Do's now you can see it's saying no to-do's whenever this is true but if it's not true you can see it doesn't render this at all and this is something called short circuiting I have a full video covering it it's a JavaScript concept only given the cards and description for you now I know we've covered a lot of Concepts about react but essentially you have an entire to-do list up and running now which is great but what I want to do is I actually want to break this apart into different components because right now all of our code is in one file and it's not too hard to follow because it's a relatively simple application but as it grows and gets larger and larger this becomes difficult to maintain and we need to break it up into different components so the very first component that I see right here is this form at the top this is obviously separate from everything else in our application so we can break it into a its own component so what we can do is we can just come in here we can say new to do form.jsx whenever you're going to be creating a component it must end in jsx and we just want to export a function called new to do form just like that and then what we can do is we just copy all of the HTML or jsx that we have inside of here and we're going to return it from this function instead obviously we need to hook up things like our handle submit and so on so let's copy over the handle submit function just like this we're going to bring that into here and now also you're going to notice that we need to access our set to Do's as well as our new to do item so we can bring in our state for our new to do item let's bring that over into here make sure that we import use State properly there we go so now our new item in our set new item is properly hooked up inside of here so all of that's working the only thing that we have left to get working is to be able to actually update our to-do I'm just going to comment that out for now though so if we do that we can come into here we can give this quick save you're gonna notice our form has been removed to add that in we just need to import that component so we can do is we can just type in new to do form and bring in that component right here and it's just importing that component from that file and then we're just rendering that out as if it was normal HTML so if it starts with a capital letter react is smart enough to know that this is a custom component that you've created so it's trying to render out this component which is running all of this code and then returning our value down here now you're going to notice everything is working except for the fact that we can't actually add our to-do yet this code right here needs to live inside of our app because this is where our to-do State lives and we can't move our to-do State into this form because we also need it for our list right here so the to do state has to be here we need a way to update that state we can create a simple function I'm going to say function add to do there we go I'm going to paste the code into here and this is essentially what our add to do function is going to look like we're just going to be passing in the title we want to add for our new to do and that goes right there so now we have a way to add our to-do's we just need to pass that function down to our new to do form so we can call it right here and we can whoops add to do and pass it in our new item also we should probably check to see if our new item is equal to an empty string and return because obviously we want it to have some type of value so how do we get this ad to do into this component this is where the idea of props come in props allow you to pass information down to custom components so you'll see here we can set things like class name checked on change and so on these are props that you can pass to HTML elements you can do the same thing for custom components so I can say I want to pass down a prop called add to do and we'll just give it the add to do function and I can call this whatever I want let's just say I call this on submit is what I call this and we're going to pass down the ad to do function so we're saying there's a prop on our new to-do form called on submit and we're passing it down this data then inside of here we actually get an object called props and on this props we can say props.on submit and that's going to give us whatever we pass into here so Props dot on submit is essentially our add to do function right here I could change this to props dot whoops crops dot on submit and this should work just fine so now if I type something in Click add you can see it is added it to our list now this is a little bit of a kind of a long way of writing this generally what you do is you destructure this to our on submit property just like this and then you would just call on submit down here this is going to work exactly the same now this is just using destructuring which I have a video on I'll link in the cards and description for you it's pretty straightforward concept and it's a JavaScript specific concept so this is how you pass down props you just make sure that whatever you call the prop here you make sure you match the exact same name up here inside of the function signature now the next thing I want to work on is our list right here so let me just collapse this down copy this over and we're going to create a new component called To Do List dot jsx because this is the next most logical thing to break up export a function with that name and we're just going to make sure we return all of this content right there so now if we just come over here make sure I remove the list you're going to see that the list has been removed and we just want to render out to do list now obviously this is going to give us a bunch of Errors because we haven't passed in everything that we need but at least we have the HTML here obviously we need to get all of our to-do's so we're going to say to Do's just like that and for now I'm going to make sure that the on click for our button and the on change here for our input don't work we're going to cover those in a little bit because if we pass in our to-do's that should be all that we need to make this work so we can come back to here you can say our to-do's is just equal to to Do's now if we save you can see everything looks like it's working it just makes sure my delete and my toggle buttons aren't quite working yet that's going to be relatively easy to get to work but before I do that I again want to break this out into another component you'll notice this entire Li right here I could actually break into its own component called to do item so we can say to do item.jsx Port function to do item just like that and I want to copy all this code and return it from here and we don't even need this key in here we can actually remove that for now and now we have our component and here I want to pass in all the props for completed ID and title so here where we have completed change that to just completed same thing with title and all these places where we're using ID I'll change those as well so now let's go back over to our list here and instead of returning an Li I'm going to return that to do item and this to-do item takes in all of the props of our to do so we have our ID which is todo.id we have our completed which is our to do dot completed and we have our title which is our to do dot title also we need to give this a key which is going to be to do.id as well because we're rendering this inside of an array so if I do that you can see if I refresh and I type in something everything is working exactly as it did before but one thing we can do to clean this up a little bit you'll notice this is like ID Maps directly to 2. ID same thing with completed same thing with title I essentially want to pass all the props of mine to do so I can just spread out my to-do like this and it's going to do exactly this it's going to pass all the props of my to do along exactly as they are so if I do that you can see it still works just fine like it was before so now we're essentially on the final step inside my to-do item I want to have toggle to do and delete to do being passed in so I want to get my toggle to do and my delete to do these functions need to get passed in so inside of here I want to again pass in toggle to do which is equal to toggle to do and delete to do which is equal to delete to do I'm going to get those up here toggle to do delete to do there we go so now they're being passed into the to-do list which is passing them down to our to-do item which is using them for these different event listeners then finally here we can just make sure we pass down toggle to do and delete to do just like that now if I save give this a refresh you're going to notice it should hopefully have everything hooked up you can see that looks like it's working just fine the last step I want to do is to actually hook up a listener so we can store everything inside a local storage because here if I refresh you're gonna notice all my items persist inside of local storage so I want to be able to persist that in local storage and to do that we need to use a brand new hook we've never used before called use effect so the use effect Hook is really interesting it doesn't return anything but it takes a function as its argument and this function for our use effect is essentially saying run this function every time the objects inside the array of our second property change so what we want to do is every single time that our to-do's change we want to run this code and this code is just going to go to our local storage and we want to set the items property to the Json stringified version of our to-do's so essentially if I break this down really quickly what's happening is we're saying use effect says run this function right here that we pass to it every single time any of the values in this array change so in our case anytime our to-do's change we call this function and this function is just taking our to-do's and storing them inside of local storage so this is right now storing our information in local storage but we aren't actually getting our information from local storage to get our information from local storage we're going to call you state up here but instead of passing it a default value we're going to pass it a function and the function version of use State works exactly the same whatever you return from the function is your default value so I'm going to get the local value which is just equal to local storage dot get item we call this items and if our local value is equal to null then I'm just going to return an empty array because that means we don't have any value yet otherwise I'm going to return json.parse of our local value so I'm just going to parse whatever is inside of our local storage and return that as our default value so now let's say I add an item and I'll just say like item two and I refresh my page you're noticing all that data is persisting if I check one of them refresh it stays if I delete one refresh everything is stain and again the reason why all of this is working so magically is first my use state is checking my local storage and getting the value if it exists if it doesn't it just defaults to an empty array then what happens is in our use effect we're saying every time we modify our to-do's what I want to do is I want to run this function and I want to save the new value for my to-do's in my local storage so every single time I add a new item to my list I check an item I delete an item it's calling this function right here and updating the the to-do's in my list in my local storage then when I refresh it's just pulling that data out when we call this function right here now the only last thing that you need to know about Hooks and react is that essentially they need to be called at the top of your function I can't put a hook conditionally so I can't say like if true then run some code and put the hook inside of here if I do this immediately my code is going to actually break if this changes so I can say like if to Do's dot length is greater than zero then run this code so you can see if I delete these you can see immediately we get an error and if I actually inspect my page go to the console we're getting an error that essentially says you cannot render hooks conditionally that's what we're doing here you can't put them inside of ifs you can't put them inside of Loops you can't put them after it returns they have to be essentially at the very top of your file and they have to always run the same number of hooks every single time and that's just one of the rules of hooks if you just make sure you always put your hooks at the top of your file you're not going to run into any of those issues at all another thing to consider about react components is they almost always follow a similar structure for example you have some hooks at the very top and then you're going to have some type of helper functions or maybe some code that's doing some parsing of data and then you finally have your return which has all of your jsx if we look at all of our components they all follow the same thing hook then some type of functions and then jsx you go down to here you can see this one doesn't have any hooks or it doesn't have any functions it just has our jsx same thing with this one just has our jsx so they almost always follow the same format now I know this is a ton to throw at you all at once but hopefully at least get you started on your journey with react and if you want to dive further into this and really make sure you understand everything that I'm talking about at full depth I highly recommend checking out my react simplified course again if you're watching this video right when it goes live I have a sale running that's going to be the cheapest it's ever going to be so I highly recommend checking that out in the description down below but if you're not quite ready for that you can check out my free react hook simplified course it's completely free but it's going to be a little bit more advanced than my react simplified course just because it's covering all the hooks which requires you to know the basics of react first so I highly recommend you check out that course at the very least and my react simplified course if you really want to make sure you master react that's going to be a place to go with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 720,397

Keywords: webdevsimplified, learn react in 30 minutes, react crash course, reactjs turorial, react js crash course, reactjs crash course, learn react in 40 minutes, reactjs, react, react tutorial

Id: Rh3tobg7hEo

Length: 42min 38sec (2558 seconds)

Published: Sat Apr 08 2023