Reviewing App Markup 0:00Okay, let's actually start working on our to-do app. So in this video, we'll take a look at state and also reading state. So I have some boilerplate in place. I set up the markup and the CSS already, so our app looks decent in the browser. So if you go into our code, the original is here, in app original, JSX and CSS. But for our markup, pretty straightforward, we have this form input, which corresponds to this input here. We have our unordered list of to-dos, and this has the to-do item and the close button. So this is the to-do item, and this is the close button, obviously. And after that, we have this container for check all and items remaining.So this is the to-do item, and this is the close button, obviously. And after that, we have this container for check all and items remaining. That should be under the unordered list. So these list items are just hardcoded. We'll loop over them later on in this video. So this is the check all container here, and then we have this other buttons container here. Cool. So again, just markup, nothing React specific here, except of course, class name instead of class. Reorganizing Project Files 1:06So again, just markup, nothing React specific here, except of course, class name instead of class. For the CSS, I'm just doing vanilla CSS here, no frameworks, so you can follow along without installing anything else. I have a reset CSS here, and I have app CSS here, which is not too long, about 130 lines of CSS. Actually, I think I want to move the components to a components folder. So it's a bit neater. So let's go ahead and do that, components, and let's move all of our JSX in there. Okay, so that one, this original one, and the app.So let's go ahead and do that, components, and let's move all of our JSX in there. Okay, so that one, this original one, and the app. Okay. And I think VS Code is smart enough to change the imports. Let's see. Did that change anything? Looks like it didn't work. So the CSS is now one level above, so we have to change that. So let's say dot dot. Also in our original, I think we have to do that as well.So let's say dot dot. Also in our original, I think we have to do that as well. Okay. And in our entry point, we have to change this as well. So it's actually no, it did change this over here by itself. So that's good. Does this still work? We forgot to change something in our app JSX. Did I save that? Oh, okay.Did I save that? Oh, okay. So I didn't save it. So let's save it. Does that work now? I did not find module app, but it works after I refresh. So again, just some boilerplate. And I think I'm going to make a commit here in case you're following along. You can just check out this commit and then follow along with all the React stuff. So let me git add, git commit, say initial markup and styles for to do app.You can just check out this commit and then follow along with all the React stuff. So let me git add, git commit, say initial markup and styles for to do app. Okay. So let's go ahead and NPM start again. And I'm going to try to work split screen here. Hopefully this works out with my super low resolution. Let's try that. And for this, like I said, for the next few videos, we're just going to work in one component. And then later on, we'll split it up into several components. So does this work? Introducing useState Hook 3:18And then later on, we'll split it up into several components. So does this work? Let's remove the sidebar. So we have more room. And this is okay, I guess. So let's start with state. So modern React makes heavy use of functional components and React hooks. So most of the components you'll be writing are just functions that return some JSX. And mostly everything you do uses a functional approach. Now before React hooks were introduced, we had class based components, which is stillAnd mostly everything you do uses a functional approach. Now before React hooks were introduced, we had class based components, which is still supported by React. And you can still write class based components, which we'll also take a look at briefly. But you definitely want to learn how to make use of hooks. So for our state, we have to make use of the use state hook to define and set our different pieces of state. So in this case, or at least for this video, the state we'll be defining is our to dos. So to do that, we can make use of array destructuring and the use state hook. So let's say const to dos.So to do that, we can make use of array destructuring and the use state hook. So let's say const to dos. So the first item is going to be the state, in our case, the to dos. And the second item is going to be the setter for that state. So set to dos. And this is common convention to define your state and the setter to be named set and whatever the name of your state was. And like I said, we'll make use of the use state hook. So I believe if I press tab here should import it. And it does.So I believe if I press tab here should import it. And it does. I like this on top. So let me put that on top. And what you have here as a parameter is going to be the initial state. So in our case, it's going to be an array of objects for our to dos. So let's go ahead and do that. So I'm just going to hard code some IDs here. We want these to be unique for each to do so we can work with the array or with the object correctly.We want these to be unique for each to do so we can work with the array or with the object correctly. We need a title. So let's just say finish react series. And we need a Boolean value to check if it's complete. So let's say is complete. And let's just set it to false. So let me just add a few more here. Okay, so I added a few more here. And again, this is just array destructuring. Explaining Array Destructuring 5:24Okay, so I added a few more here. And again, this is just array destructuring. So this is going to be our state. And this is our setter for the state. Actually, let me just give you an example. If you're not familiar with array destructuring, I'm going to Firefox here since it's full screen and it's just play around in the console. So let's make a function that returns an array of two values. Let's just call it my function. And let's make it return an array of two values, like I said.Let's just call it my function. And let's make it return an array of two values, like I said. So one and two. Okay. Now we can do array destructuring like we did for use date here. So we can say const first item. And second item to be this function. So my function, and this doesn't take a param. But you'll see now that first item is set to the first item of the array. And second item is set to the second item.But you'll see now that first item is set to the first item of the array. And second item is set to the second item. Okay. So you'll be making use of heavy. So you'll be making heavy use of this for all of your state. So make sure you're familiar with this syntax. Now if you take a look at react dev tools, let me just make this. So it's its own window. Let's open up react dev tools here. You can see that state right now we only have this one component right here. Rendering Todos with Map 6:46Let's open up react dev tools here. You can see that state right now we only have this one component right here. So we have this array of to do's here. So now let's go ahead and loop over this array of to do's in here, and I'll put whatever is defined in this array of to do's. So let's look for our unordered list here. And let me just delete the other two since we are going to loop over it. Okay. There should only be one now. And let's go ahead and loop over it.There should only be one now. And let's go ahead and loop over it. So remember, just make use of the curly braces for JavaScript. And let me just close this out after the UL. Actually, we're not looping over the UL, so that's not the correct place. It should be over the list item. So let's put it here. Let's end it here after the LI. Don't worry about formatting because we have prettier. So remember, this is JavaScript, so we can just make use of any JavaScript functionsDon't worry about formatting because we have prettier. So remember, this is JavaScript, so we can just make use of any JavaScript functions that we need. So in this case, we have our state. It's called to do's. It's an array. And we can map over that array. So let's go ahead and use the map function. And this will take in a to do and an index as well if you need that. And if we do an arrow function, actually, I think I'm missing a parenthesis here.And this will take in a to do and an index as well if you need that. And if we do an arrow function, actually, I think I'm missing a parenthesis here. Okay. Now we have access to each to do for each iteration of the loop. So for this title, we can just say, again, make use of curly braces and say to do.title. Okay. So let me save that. I think we need a parenthesis here. And let's make sure to close it down here after the LI.I think we need a parenthesis here. And let's make sure to close it down here after the LI. So before this one, hopefully, that works. And let's save that. And I think I'm missing one more parenthesis here, so let's add that in. And hopefully, this works. Okay. Let's just refresh this, and it does work. So now it's looping over our array here and displaying it in our browser. Now, like I said earlier, you can make use of class-based components still in React, State in Class Components 9:03So now it's looping over our array here and displaying it in our browser. Now, like I said earlier, you can make use of class-based components still in React, although I would say most modern React doesn't make use of class-based components anymore. However, if you're new to React, maybe showing you how class-based components works can give you a better understanding of how state used to work in React. So let's go ahead and quickly make a class-based component that does the same thing. So let me just bring back the sidebar. Let's make a new component.So let me just bring back the sidebar. Let's make a new component. Let's call it AppClass.jsx, and let's make use of our snippets. So React class-based component. So that's fine. And the JSX is still the same, so we can just take what we have here in our JSX. So everything here, and this should still work. So let's paste that in here, and let me hide the sidebar for now, and let's go to our index.js and make use of this for now. So say AppClass, or let me just comment this out, and say AppClass,and let's go to our index.js and make use of this for now. So say AppClass, or let me just comment this out, and say AppClass, and let's import that up here, AppClass. Okay. Does this still render? Let me refresh. Oh, yeah, so it's not working because I didn't define the state yet. So let's go ahead and do that now. So back to our class. So like I said earlier, before hooks were introduced, we needed to make useSo back to our class. So like I said earlier, before hooks were introduced, we needed to make use of class-based components if we wanted state in our components. So this is still supported. If you like classes, you can still use them. So the way it was done is we had to make a constructor, and this took in some optional props. We had to call our parent and pass in the props, and here is where we would define our state. So we would do this.state equals an object, and we can define allwould define our state. So we would do this.state equals an object, and we can define all of our state in here. So if you're new to React, this kind of makes more sense, in my opinion, to just define everything you need in this state object. So we can grab the to-dos from our other component here. So let's just grab it from our App.jsx. So we can just grab the array here. Go back to our class, and let's paste that in. Okay.Go back to our class, and let's paste that in. Okay. I'm sorry, I put this constructor in the wrong place. Should be outside of the render function. So it should be up here. Let's paste that in. Okay. And now, still doesn't work. I think I have to refer to to-dos as this to-dos in our class-based component.I think I have to refer to to-dos as this to-dos in our class-based component. So this.to-dos. Actually, it's this.state.to-dos, since we have the state object, and now it does render. So again, this is how it was done previously, using class-based components. But over the last few years, we've moved over to functional components and making use of hooks. So again, for each piece of state, just create that state along with the setter, make use of the useState hook, and define the initial value in here.So again, for each piece of state, just create that state along with the setter, make use of the useState hook, and define the initial value in here. So in the next video, we'll continue and make use of event listeners and implement adding and deleting to-dos. So let's go ahead and make a commit. This is episode three. And you can see we have these warnings in here, but I'm okay with that for now. And this is episode three. Okay, commit episode three. Let's call it making use of state.Okay, commit episode three. Let's call it making use of state.
