Introducing React Hooks

[Music] this video is brought to you by brilliant a great way to learn computer science and much more go to brilliant org slash traversée media and the first 200 subscribers get 20% off hey what's going on guys so react 16.7 which is still an alpha is introducing something called hooks into the framework which allow you to use state and other features without having to use a class and anyone that's worked with react before knows that when you want to use state in your component which is basically a way to extort and capsulated data you need to use a class well that's changing with hooks you can now have state within a functional base component with the U state hook so in this video I want to show you how to do that and I'm gonna use a tutorial from Scotch i/o it's an article that's written by Sara Jorgenson which is very helpful in understanding how to use this so we're basically gonna build a small to-do application with just functional components okay so no classes and we're going to use the use state hook and if you're interested in this this written tutorial from scotch I'm going to put the link in the description it also has the code and stuff like that so let's jump into vs code and as you can see on the left here I already have a just a generic application generated by create react app so go ahead and just run that I haven't done anything else to it but what we do want to do is make sure that we have react 16 point 7.0 installed which is currently in alpha so if if it's stable by the time you watch this and it's included and create react app then you don't need to worry about this but if you're watching this around the time that's being recorded then we want to do NPM install - uppercase s and we want react at 16.7 dot 0 - alpha dot 2 and we also want react dom comm react Dom at 16.7 dot 0 - alpha dot 2 okay if you don't do this you know and in 16.7 hasn't been released and isn't being used then you're gonna get an error so make sure you do that all right so now that that's done let's go ahead and start our server with NPM start and we're just gonna get our landing page that create react app version two gives us and lets go into our source app j/s so this is basically where we're gonna do everything I'm gonna make this smaller so we're gonna just have a few components they're all going to be functional okay we're not dealing with any classes and we're going to use the U state hook to be able to have a state in these functional components so I'm going to just get rid of everything here I'm just going to clear it out we're going to start from scratch and let's import react and then we want to also import the use state hook okay so that's going to be from react and we're going to create a an app function okay so basically our main component here and then we want to export that so sport default app okay and inside here is where we want to create our state now the way that you state works is it gives us two variables the first is going to be the value of the state you can think of it as this dot state within a class or not or but and it gives us a function to update the state which you can think of as like this dot set state within a class okay now and we're gonna use a little D structuring to pull that out so we're gonna say Const set up brackets to dues which is going to be our state and then set to dues which is going to be the method we use to update the state and we're gonna set that to use state and then our data our initial data is going to go in here which is just going to be an array of objects of to do objects so these objects will have a text value let's say learn about react and then they're also going to have an is completed value which will be a boolean and they're going to be it's gonna be false by default okay let's put a comma here and then we're going to just copy let's copy this down two more times and change up the text so the second one here let's just do meet friend for lunch and then this one here let's say build really cool to do app all right so that's our state so we have a functional component with state now we want a return down here underneath our state so let's say return and we're going to put a div with the class name of app and let's do another div with the class name of to-do list now inside here we want to map through the two dudes that are in our state okay we can access them with this right here - duze so we want to open up some curly braces and we want to do to do is dot map and I'm not going to explain like every little thing I would expect that you guys know at least the basics of react if you're watching about hooks so we're just going to put in our two parameters which are going to be to do to represent each to do in each iteration and then index and we're going to put an arrow here so for each to do that we we map through we want to output a to do component which we haven't created yet and this is going to take in a few things it's going to take in a key which we're going to use the index it's going to take in an index which again will be the index and then it's going to take an ax to do which is going to be the to do alright so now we need to create this component I'm just going to create it up here so we'll say function to do and we pass those three things into it which are props so we could do like props and then axis like props dot to do dot txt but I'm just going to use D structuring here and I'm just gonna bring in the to do and the index that we passed in and then we're going to return let's return a div with the class of to do actually that's not gonna work div class to do all right so within here we're just gonna put four now that the to do text so to do dot text and we'll save that I have prettier installed envious code so it's gonna just format it on save and if we go to our application we now have all three to do is list it out here now as far as styling I'm going to paste in some CSS into the app CSS file which we actually need to bring in so I'm going to import same poor whoops sorry about that guys nobody important so let's say app dot CSS okay and then we're gonna go to our app CSS file and I'm just gonna paste in some styling here I'm gonna get rid of all this and paste this in and it's just some styling for the app div with a class of app that's a do list the to do is themselves and then the input okay so if you want to copy that or if you want to copy it from the scotch article and the description you can do that so let's save that and go back and it should look like this alright so next thing I want to do is add in the to-do form okay so we want a little form down here with a single input so that we can add to dues to our state so let's go back to AB js' and let's create the the function first the component so let's say function to do form and the to do form is going to take in one prop that's gonna be the add to do methods so that we can add it to do okay so to do make sure you put the brackets because we're destructuring it from the props and then we're going to we're gonna use the use state hook again here because this form is going to have state to it basically the value whatever the value is so we're gonna say value for the state and then set value for the method that updates the state and we want to to use state and this is going to be empty by default okay so now let's return from this a form don't need an action what we do need though is a submit handler so we're gonna say on submit equals and we'll have a method called handle submit okay and inside this form we're just gonna have one input a text input so let's say input type text and in here let's do a class name of input just to do the add the styling and then the value is gonna be the value of the state okay and we can get we got that up here from you state okay and then on change we want to basically run a function and then we want to call set value which is what we named the method to update the state and all we want to do is set it send in whatever is in that input so if you type in you know go to school or whatever that's gonna be your value in your state and the way that we get that is with e dot target target dot value and that should do it whoops actually we need to create the handle submit so let's say we're going to do const handle submit it takes in an event parameter and since it's a submit we want to make sure we prevent the default action so we want to do a dot prevent default I don't want to be able to submit if it's an empty value so let's just say if not value then we want to return okay then we want to call add to do which is going to be passed in as a prop we haven't created that yet but we will and then this takes in the value so it'll add the to do and then finally we want to clear the form out so we'll set value to an empty string okay so we have our to do form function our component which is a function and which uses the you state hook now we need to implement that down here so in our main app here we're going to put the form let's see we're going to go right under the map and let's put in our to-do form and that's going to get passed in add to do which is going to be a function we create so we'll say add to do and we're going to put that right above the return now this this add to do it's going to take in the text okay so it's going to take that in as a parameter and we want to create a variable called new - duze okay I remember we're updating the state so what we need to do here is is take the array of - duze and we can use the spread operator to basically copy everything that's already there and then we just want to simply add in text okay and then for down here we want to say set to dues which we use to actually update the state and we pass in new - dues like that alright so that should actually work let's save probably get an error just saying we haven't used something oh wait new - dues is not defined that's because this should be a lower case and okay so let's just go try it out you can see we have our text input here actually we could add a placeholder make that look a little better so in our text field let's say placeholder add to do okay we'll go back and let's say just say hello and add in there we go so it gets added to our state if we put in another to do gets added and if we open up our Chrome tools and if you have the react extension installed the react dev tools and when you hover over the app component and we look down here you'll see base state we have five items in our array and these are all the to Do's okay and if we look at the form that should have some state as well so base state is nothing by default but if I start to type in here that gets added all right so you can see that we're we're using state now without having to use classes so let's finish up this application I mean it's pretty it should be pretty clear on how this works but I do want it to be a full application so I want to be able to mark to dues as complete so we're gonna go into our to-do right here and let's add to this div a style so we want to use since as a style we want to use double curly braces and we want to say text decoration and I want to set that basically if it's complete I want to line through it so we're going to use a ternary operator here we're going to say to do dot is completed and then use a ternary so we want to line through what the value to be lying through else so we use a colon for else then we want nothing okay so that's going to just add a line through to the text-decoration property if it is completed so down here inside the actual div where we have the to-do text I want to have a couple buttons so I'm going to put a div here and we're going to have a button and this is gonna say complete oops complete and this button is going to have an on click and we're gonna set that on click to an arrow function that calls complete to do that takes in the index because it needs to know which which to do is being completed now this complete to do is going to actually get passed in as a prop so we want to pass it in up here complete to do just like we did with the ad to do down in the form okay so now we need to go down to our app component and create complete to do so complete to do and that takes in the index so it knows which one to complete and we're gonna again just create a variable called new to dues and set that to an array with the current two dues so we use a spread operator and then we're gonna take new two dues and the current index that's passed in and we want to mark is completed we want to set that to true okay and then finally we need to actually set it because it's it's not actually being set yet until we call set two dues which sets the state and we pass in new two dues all right and the last thing we need to do here is add complete to do as a prop to the to-do component so right here let's say complete to do equals complete to do save it let's go back and if we click the button here you'll see that it adds a line through it's now complete all right obviously it's not going to stay complete we're not persisting the data same thing when we add something here if we reload it goes away because we don't we're not persisting the data anywhere till to local storage or a database or anything like that all right so we're almost done and the last thing I want to do is I want to be able to delete the two dues so same thing we're going to go back up and add a new button right underneath the complete except this is going to call delete to do and let's just put an X here and then we need to bring that in as a prop as well so delete to do and then we'll go down here and create it in our app component just let's do that actually you know what let's do remove to do so we want to remove to do bring that in here and we're gonna create that right underneath where we did the complete so remove to do and that takes in an index did I pass in the index up here yeah I did all right so that takes in an index and then what we want to do is just we'll just copy this line this first line of complete to do because we're just pulling out the to do is using the spread operator and then we want to splice it out so we're gonna say new to dues dot splice and we're splicing it out by the index and just one and then we finally want to just call set to dues and new to do so you can kind of see the work flow here you handle your state do what you need to do whether it's deleting adding or updating and then you call whatever the function is that you put right here so in this case set to dues so the last thing we need to do is add that as a prop to our to do component so remove to do equals remove to do let's try it out you see what this error is remove to do is not defined and that's because I forgot Const okay so let's try it out we have our x marks here now so if I click that it goes away good so if I can add them we can complete them see they all get crossed out and we can delete them awesome so that should give you an idea of how hooks are gonna work or how they do work and hopefully this was helpful if you liked this video please leave it a like and I'll see you next time so programming is all about logic with some principles of math and science and a great place to strengthen your mind and become a better overall programmer is brilliant they have some of the most unique types of brain building courses I've ever seen including computer science and math courses quizzes and more the tests & quizzes really break down the answers for you when you get them wrong and they give you a much better understanding of where you went wrong and it doesn't matter which type of program you are which language you use brilliance concepts benefit everyone in the industry by installing deep problem-solving skills and critical thinking you won't learn to memorize like many online courses teach but you'll learn to understand and really wrap your head around all types of concepts that have to do with computer science and just logic in general they have both free and premium accounts available so click on the link in the description and the first 200 people to sign up will get 20% off

Channel: Traversy Media

Views: 322,735

Keywords: react hooks, react useState, react, react todo app

Id: mxK8b99iJTg

Length: 20min 50sec (1250 seconds)

Published: Thu Nov 15 2018