Introducing React Hooks

Key Takeaways

[Music] this video is brought to you by brilliant a great way to learn computer science and much more go to brilliant.org traversy 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 worked with react before knows that when you want to use state in your component which is basically um a way to store encapsulated data you need to use a class well that's changing with hooks you can now have state within a functional based component with the used State hook so in this video I want to show you how to do that I'm going to use a tutorial from scotch.io uh it's an article that's written by Sarah Jorgensen which is very helpful in understanding how to use this so we're basically going to build a a small to-do application with just functional components okay so no classes and we're going to use the Ed 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 uh 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 uh I haven't done anything else to it but what we do want to do is make sure that we have react 16.7 point0 installed which is currently in Alpha so if um if it's stable by the time you watch this and it's included in create react app then you don't need to worry about this but if you're watching this uh around the time that it's being recorded then we want to do npm install - uppercase s and we want react at 1670 d alpha do2 and we also want react Dom not reactdom at 16. 7.0 d alpha. 2 okay if you don't do this um you know in 16.7 hasn't been released and is isn't being used then you're going to 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 going to get our landing page that create react app version 2 gives us and let's go into our source appjs so this is basically where we're going to do everything I'm going to make this smaller so we're going to just have uh 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 US state hook to be able to have 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 uh component here and then we want to export that so export default app okay and inside here is where we want to create our state now the way that use 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. state within a class or uh not or but and it gives us uh a function to update the state which you can think of as like this do set state within a class okay now and we're going to use a little destructuring to pull that out so we're going to say const set a brackets to-dos which is going to be our state and then set to-dos which is going to be uh the method we use to update the state and we're going to 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 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 going to 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 Todo 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 to-dos that are in our state okay can access them with this right here to-dos so we want to open up some curly braces and we want to do to-dos do map and I'm not going to explain like every little thing I I would expect that you guys know at least the basics of react if you're if you're watching about hooks uh 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 in a to-do which is going to be the to-do all right so now we need to create this component and I'm just going to create it up here so we'll say function Todo and we pass those three things into it which are props so we could do like props and then access like props do too. text but I'm just going to use destructuring here and I'm just going to bring in the to-do and the index that we passed in uh and then we're going to return let's return a div with the class of too actually that's not going to work div class to do all right so within here we're just going to put for now the the to-do text so to-do do text and we'll save that I I have prettier installed in VSS code so it's going to just format it on Save and if we go to our application we now have all three to-dos listed out here now as far as um 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 uh let's say import whoops sorry about that guys nobody important so let's say app.css okay and then we're going to go to our app CSS file and I'm just going to paste in some styling here going to get rid of all this and paste this in and it's just some styling for the app div or the class of app the to-do list the to-dos themselves and then the input okay so if you want to copy that or if you want to copy it from the uh Scotch article in the description you can do that so let's save that and go back and it should look like this all right 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-dos to our state so let's go back to appjs and let's create the 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 going to be the add Todo methods so that we can add a to-do okay so we'll say add Todo make sure you put the brackets because we're destructuring it from the props um and then we're going to we're going to use the use state State hook again here because this form is going to have state to it basically the value whatever the value is um so we're going to say value for the state and then set value for the uh method that updates the state and we want to set it 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 um a submit Handler so we're going to say on submit equals and we'll have a method called handle submit okay and inside this form we're just going to have one um 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 going to be the value of the state okay and we we can get we got that up here from used State okay and then on change we want to uh 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 send in whatever is in that input so if you type in you know go to school or whatever that's going to be your value in your state and the way that we get that is with e. Target uh e. target. value and that should do it uh whoops actually we need to create the handle submit so let's say uh we're going to do const handle submit 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 e. prevent default I don't want to be able to submit if it's an empty value Val so let's just say if not value then we want to return okay then we want to call add Todo which is going to be passed in as a prop we haven't created that yet but we will um 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 or or component which is a function and uh which uses the UST State hook now we need to implement that down here so in our main app here we're going to put the form uh 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 too which is going to be a function we create so we'll say add too and we're going to put that right above the return now this this add Tod 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 to-dos okay remember we're updating the state so what we need to do here is is take the array of to-dos and we can use the spread operator to basically copy everything that's already there and then we just want to Simply add in uh text okay and then for down here we want to say set to-dos which we use to actually update the state and we pass in new to-dos like that all right so that should actually work let's save um probably get an error just saying we haven't used something oh wait new to-dos is not defined that's because this should be a lowercase n Okay so let's 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 and 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 we 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-dos 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 uh I do want it to be a full application so I want to be able to mark to-dos As complete so we're going to go into our to-do right here and let's add to this div a style so we want to use since it's 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 Turner operator here we're going to say to do dot is completed and then use a Turner so we want to line through want the value to be line through uh else so we use a colon for else then we want nothing okay so it's going to just add a line through to the text decoration property if it is completed so 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 going to say complete oops complete and this button is going to have an onclick and we're going to set that on click to an arrow function that calls complete too that takes in the index because it needs to know which which to-do is being completed uh now this complete to-do is going to actually get passed in as a prop so we want to pass that in up here complete to-do just like we did with the add to-do down in the form okay so now we need to go down to our app component and create complete Todo so complete to do and that takes in the index so it knows which one to complete and we're going to again just create a variable called new to-dos and set that to an array with the current to-dos so we use a spread operator and then we're going to take new to-dos 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 todos which sets the state we pass in new to-dos all right uh 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 uh same thing when we add something here if we reload it goes away because we not we're not persisting the data anywhere to 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 to-dos 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 Todo and let's just put an X here and then we need to bring that in as a prop as well so delete Todo and then we'll go down here and create it in our app component uh let's do that actually you know what let's do remove to do so we want to remove Tod do bring that in here and we're going to create that right underneath where we did the complete so remove too 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-dos using the spread operator and then we want to splice it out so we're going to say new to-dos do splice and we're splicing it out by the index and just one and then we finally want to just call set to-dos and new to-dos so you can kind of see the workflow here you handle your State uh 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 todos so last thing we need to do is add that as a prop to our to-do component so remove too equals remove Todo let's try it out let me see what this error is remove to do is not defined and that's because um 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 going to work or how they do work and hopefully this was helpful if you like 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 test and 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 or which language you use Brilliance Concepts benefit everyone in the industry by installing deep problemsolving 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