Learn React In 30 Minutes

hello everyone in today's video I'm going to be covering all of the basics of react so you know exactly what you need to know in order to get started building projects with react so let's get started now now before we get started I do want to say in this video I cannot cover everything there is to know about react I can cover all of the basics and teach you everything you need to know in order to get started with react but some of the advanced concepts and some of the mindset shift that you need to take in order to program efficiently in react I cannot fit into this video but I do have an entire full course on react that covers all of those advanced topics I can't in this video and it also covers the mindset shift and the ability to think in components and write efficient react code so if you're interested in checking that out make sure to click the link in the description below in order to buy that course so with that out of the way let's jump into this tutorial to get started I have Visual Studio code open to a completely blank project and the first thing we need to do is actually create our react application and to do that you need to be inside of a folder that has no capital letters and no spaces in the name our folder is called learn react in X minutes with dashes in the name instead of spaces so this was going to work for us just fine and what we need to do is we need to make sure we have note installed by just typing no dash B and if you see a version then that means you have note installed if you don't see any version where you see an error that means you do not have note installed and I have a video on how to install note linked up in the cards in the description below so you can check that out in order to figure out how to download note now once we have note downloaded we need to run is npx which is a lot like NPM but instead of downloading something it is actually going to run that command for you and we want to run the command create react app with a period at the end essentially that period says use the folder were already in to create the application inside of and when we hit enter what this is going to do is it's going to start up and create our entire react application it takes quite a while to download everything so I'm going to come back to you when it's finished downloading so now that that's finished downloading everything you can see that you have a ton of new files and folders on the left side here and if we scroll up our terminal you'll see that we have a bunch of commands we can use inside of our application and the main ones you want to worry about is NPM start which is going to allow us to start up our development environment and then NPM run build this is going to build our application minify all of our files and give us a production version of our application that we can deploy to a server somewhere and actually access on the internet so NPM start for development and p.m. run build for production that's essentially all you need to know also we can take a look over at the files that we have over here node modules dissolve our libraries and our public folder we have essentially our HTML file and what's special about this HTML file is it only has one div which is our route there's no style sheets there's no script tags nothing is inside of here except for this single div which is route and all of our application is going to be put inside of that route div react is going to generate our HTML and put it inside of this div here so our HTML is very basic for this application really the main meat and potatoes of the app is in the source folder where we have all of our style sheets JavaScript test files logos literally everything in your application that is part of your source files is going to be inside of this source folder and the main ones I want to look at is our index GS which is where our application starts and what this is doing is it's saying react down render which is saying render the content we pass in here at a certain element so you can see we're getting the root element which is that element inside of our HTML and we're rendering everything inside of our app component inside of that root element and if we go into our app component you can see it's rendering just this basic boilerplate code that comes when you create a react application so let's actually start up our application by running NPM start to see what it looks like and this takes a little bit but it's going to open up on our browser for us now with that loaded up you can see our application over on the right-hand side and if we change something for example if we change this instead of saying learn react if we say learn react today and save it's going to automatically refresh over here for us which is a really great aspect of react but for our use case we want to actually remove all of this boilerplate code we're just gonna return null here and if we save this you should see now nothing is showing up on the side over here also we can remove this extra code for the CSS and logo import as well as removing this test file all of these CSS files the logo file and also inside of here we no longer need this service worker code this CSS file or this Service Worker import here we can also remove this service worker down here now if we save that you can see we're back to our blank application and we just removed a bunch of the extra stuff that we're not going to be using in this application and when you're starting with a react app the first place you're going to start is your app component because this is the root of your entire application and for our application what we're going to be doing is building a really simple to-do list application I know to-do lists are not the most interesting thing to build but they are so good at showing all of the things that you need to learn with react and a really concise and short manner so to get started the first thing that I want to do is actually write the HTML for our application and we're going to start inside of our app component and return some HTML inside of here and a trick you can do is to use parentheses in order to return everything inside of those parentheses and we then we can actually go on to a new line which allows us to just format our code a little bit nicer so it's just a quick tip there for you and the first thing we want to do is we want to return our to-do list so our list of two do's and this is actually going to be a separate component so we're gonna create a component called to-do list and we're gonna return that here as the first element inside of our application and this isn't normal HTML as you can see this is not valid HTML but it is in JSX which is kind of like Reax version of HTML and it allows you to embed components inside of other components you can see on our index here we have our app component being embedded and inside of here we have a to-do list component so we can just create that by saying new file we can call it to-do list Jas and I have a plug-in installed on visual studio code if I scroll down here it's called es 7 react Redux graph kill iraq native snippets and what this allows me to do is actually just type in RFC and hit enter and it will create a function component for us inside of react and it will give it the name to-do list which is the name of our file now instead of here we can import that to-do list component and we want to import it from dot slash to-do list so this is giving our component from inside of here and we can just say hello world for example inside of our return and if we save that and we save our app over here you see a hello world is showing up because in our app were rendering to-do lists and in to-do list were rendering the text hello world so now inside of our app the next thing we want to do is put the input for adding the new to do so we can just put an input and we want to make it a type of text here and let's just close that off and if we save we're immediately going to get an error and that's because we can't put two HTML elements or JSX elements in this case next to each other inside of a return because this return can only return one thing any JavaScript function can only return one thing and right now we're returning two things a to do list and an input so what we can do is wrap this inside of an empty element this empty element is called a fragment and it allows us to return one thing which is this fragment which contains two things which is actually what we want to return now we have that to-do list text as well as this input here next up I just want to add a couple buttons this first button is going to be for adding art to do and then we want a second button what you're going to be for clearing art to do so we'll just say clear completed to do's and then lastly after this we're just gonna put a div which says how many to do is we have left to do we're just going to say zero left to do now if we save that you see we have our ad to do button are clear completed to do's and zero left to do and let's just shrink down this name a little bit so that we can get it to fit all in one line just like that and that's really all the HTML for our app component all the HTML for each one of our two do's is going to go inside of our to-do list component but before we can get started into that first we need to set up the state for our application because the way react works is it manages State inside of your application and when that state changes it rear Enders things for us and we want to store all of our to do's inside of a state so we actually render those to Deus and every time we change it to do add it to do deleted to do it'll actually rerender our entire component tree for us so in order to use State in a function component we need to use what's called the use state hook so we can import this from react like this inside these curly braces and now we can call the use state function and we want to pass it our default state for our to deuce the default is going to be an empty array so the first time our app loads we're going to use an empty array of two dues because obviously we have no two dues and now we need to set this to a variable here so we can say Const and the interesting thing about use state is it actually returns an array so we can destructor that array and then set it equal to use state and the first element is all of our two dues and the second element is going to be a function that allows us to update art to dues and this is a little bit confusing to look at essentially this is just object D structuring so if you don't know object D structuring make sure you check out my video that I have done on object D structuring it's linked in the cards and description below but essentially this first variable here to dues is every single one of the two dues inside of our to do state and the second variable is the function we call to update those two dues to show you a little bit of an example of what this would look like with actual data let's just pass in some default data we can just say to do one and we can have in here to do two as well so now we have two two dues by default inside of our application and we can pass these to our to-do list by just saying two dues is going to be equal to dues and this is what's called props essentially all of our components like app or like to-do lists are going to have props that we can pass to them and we pass them just like we pass attributes to an HTML element so we're saying that we have a prop to dues on our to-do list and we want to pass the taboos variable to that problem to dues we could have these as different names this could be called to-do lists for example and it would be exactly the same we would just have a to-do list prop on our to-do over here so instead of here this would say to-do list in our case we're just going to call it to dues because I think it's easier to work with so let's make sure we change also back to to Deus and now inside of our to-do list we can actually render out those two dews so for now let's just say to do is dot length and we need to put this inside of curly brackets here and that says that this is going to be JavaScript code now if we save that you can see it prints out too because we have to - duze in this list but obviously just printing out the number of - duze we have is not that useful we actually want to print out each one of our - duze and we can do that really easily inside of a loop and what we want to do is actually map over our current array and return elements of our actual - duze and we're going to do this with a to do component so let's create that to do component and of course we want to do that RFC trick in order to generate all the boilerplate code and inside of here we're just gonna pass in a to do element just like this now we can just save that go back into our to-do list and we want to import to do from dot slash to do just like that now we actually have our to do element inside of here to do component and what we can do is inside of an array we can actually loop over this so we can say - duze dot map and we want to do is we want to map over all of our - duze so for each one of our - duze we want to return a to-do element but to do component and we want to pass it art to do just like this and then inside of our to do what we can do is we can just say here we want to print out the to do just like that let's save both of these and you can see immediately we have to do one being printed and to do two being printed but there's actually a slight bug here if we inspect this we're gonna notice in our side of our console that were actually getting an error it says warning each child in a list should have a unique key prop and without saying is that this list of two dues reacted doesn't know how to update these properly every time our to do is array changes it's going to re-render every single to do in that list but we only want it to re-render the ones that change so what we can do is we can set a key here in our case it has to be a unique element so we can just set it to our to-do name which is right now unique anytime that you have a key you just need to make sure that it's unique for the array that you're actually using with in our case the name is going to be unique now if we save that and go over and inspect we no longer have that error as you can see so that's perfect and essentially what this key does is it allows react to only rerender or change the components that actually change inside of our array instead of rear entering all of them every single time it's really there for efficiency purposes now obviously we can't just store the name of our to do we actually need to store an object of whether or not it's complete we need to have an ID as well as a name so back inside of our app let's actually change this array to be an object we're gonna have an ID of one we're gonna have a name which is just going to say to do one and then lastly we're just gonna have a property call to complete which we'll just set here to false for now so now we have it to do with an ID a name and a complete flag and then instead of our to-do list we can just use to do not ID here as our key since that's going to be unique and instead of our to do we want to just print the name so we can say to do dot name now you can see to do one is showing up perfectly fine but obviously we don't want to just have the name being printed out we actually want to check box to check whether it's complete or not so let's set up all of our code for doing this first we're going to have a label and inside of this label we're gonna put the de tube name just like this make sure I get rid of that and then inside of here we also need our input which is going to be a type of check box just like that and we also want to set in here a checked property essentially the value now we want to set that to to do dot complete and now as you can see we ever to do with our check box over here and if we come over and change our complete value to true you can see it's going to check our check box for us and if we have it as false obviously it's not going to be checked now what we need to do is actually set up events so that we can actually add to dues so let's remove this default to do for now and just have an empty array because by default we're not going to have any to dues at all in our application when it starts up what we do want to add to dues whenever we add this to do with the add to do button so we need to set up an onclicklistener on our add to do button so we can just say on click we want to set this equal to a function in our case we're gonna call a function which is just called handle add to do and let's create that function up here we can just say function handle add to do and it's going to take that event property and inside of this function what we need to do is we need to set our - duze - one more to do so we need to take our previous two dues add our new to do and then set our two dues to that to do list but you'll notice one problem immediately we don't have access to the name inside of this field we can type this in and click Add to do it's going to call this function but we need access to this name and this is where it what's called the user Red Hook comes in handy so we can say use ref and the user effect allows us to reference elements inside of our HTML in our case the input so we can say ref here is going to be equal to a variable we're just going to call this to-do name ref and then we can create this variable up here by just saying it comes to do name ref is equal to user ref now we're going to have access to this input element inside this to do name ref variable and to access it we just say to do name ref current which is going to be whatever element we are currently referencing in our case this input so we can say current value and this is going to be the value of our input so we can just say that the name is going to be equal to this and then we of course want to return if our name is equal to an empty string essentially if they don't type in a name we just want to return so we don't add an empty to do and then afterwards for now let's just log out that name to make sure that this is working just like that so now let's inspect this page go over to our console and if we type in a name for example we just say hi click Add to do you can see it prints out hi if we type in just H it adds to do it's going to print out H so we have access to whatever is inside of this variable here instead of our input one other thing that we probably want to do is we want to take our to do name ref dot current now we want to set the value here equal to null that way if we type in something and hit add to do it's going to clear out our input for us it's just a nice quality of life change now the real change that we need to make is actually setting our two dues the way said to do's works is you have two different ways you can set them you can just pass it a value for example empty array would clear all of our two dues or you can use the previous value in our case our previous two dues is a function call so it's a function that is going to give us the previous two dues which allows us to change that so we could say that now our new two deuce is going to be equal to previous two dues and we want to spread this over our array and then we want to add a new to do to that list so let's just for our case give it an ID of one a name which is going to be equal to our name variable and a complete of false now what we can do is when we save this we type something into it add - do you see it's going to add that to do but the problem is we are always adding with an ID of one and if we inspect our page we should see that we have an error inside of our console which is saying that we have two keys with the exact same ID so what we need to do is actually download a library that's going to allow us to completely create random IDs and the best library for this is called the UUID so we can just say npm i UUID just like that it's going to download the library for us and we can actually import the UUID inside of our application so we can say UUID v4 from and we want to import that from UUID slash v4 just like that this is going to give us access to UUID v4 which is just a function that generates a random ID so now if we save that create some - duze we're no longer gonna get that error of having duplicate keys because our IDs are now completely unique but you will notice a problem every time we refresh our page we no longer have our to do is being shown up they're not being persisted across page reload and this is something that's very easy to fix with react we want to store these inside of local storage and the easiest way to do things which are a side-effect so for example every time we added to do we want to save it we can use what's called use effect which is just another hook inside of react and this is just a function which is going to take as its first parameter another function and this is the function that we want to do things so every single time something changes we want to call this very first function and the way we determine when to call that function as we pass an array of properties here and this array is going to be all of our dependencies so anytime anything in this array changes we want to run this use effect function so in our case anytime our array of today's changes we want to save our to dues and saving them is really easy if we're just going to save them to still local storage so we can say local storage dot set item we need to give this item a key here so let's create a variable for that we're gonna call it local storage key and we're just going to set that to dues to do app dot two dues just like that you can call this key whatever you want it really doesn't matter so we pass it first the key and then we want to make sure we pass it a string so we're gonna stringify whoops stringify our two dues so this is just a JSON string of our to-do application there we go so now we added to do add another to do it's actually saving these to our local storage but of course when we refresh they're not showing up and that's because we need to use another effect and this effect we're going to call to load our two dues and we only want to call this once right when our component loads so if we pass an empty array of dependencies it'll call this function once and since the empty array never changes it'll never recall this use effect and this use effect we want to set our two dues to what we get back from our stored two dues so we can say Const stored two dues is going to be equal to local storage dot get item of that local storage key and we want to make sure that we get that item stored into our store to dues and then we want to set our to dues to that store to dues only if we actually have stored two dues so if we have stored two dues then set our two dues to those store two dues now if I save that you'll see we're getting an error and that's because this is a string we need to parse this using JSON so we can just say json dot parse of that string this will convert it to an array and now if we say that you can see that this is working properly now let's add some to dues will say FFF a a and if we refresh those two dues are still showing up inside of our so we know that both storing and getting their to dues is working properly so now we have saving built into our application and only just a few lines of code which is the real power of the use effect inside of react now this is all great but right now we have no way to toggle or to deuce even if we click on this check box it's not actually going to check our to do for us we need to write some react code in order to store the change of our to-do from being not a complete to complete or vice-versa so let's write a function to do that we can just come down here create a function called toggle to do and this is going to take just an ID of the to do that we want to toggle and then what we want to do is we want to toggle the to do from our list so the first thing we want to do is get a new list of - dues we're just going to call this new - dues and it's just going to be equal to a copy of our current - dues list this is just so we don't change our current to-do list and we always want to make sure we create a copy in react you should never directly modify a state variable you should always create a copy before modifying it and then use that copy to set the new state so we've created our copy now we want to get the to do that ever actually trying to modify so we can get that from our new - dues by just finding a to do that has the to do dot ID which is equal to the ID that we passed in to toggle to do then we can just say to do that complete is going to be equal to the opposite of to do complete so we can just negate that here and then we can set our - dues to our new - dues this is essentially going to allow us to toggle or to do from complete to incomplete or from incomplete to complete but we don't have any way we can use that function because as you remember our - dues are stored inside this to do component which is referenced instead of our to-do list which is referenced inside of our app so we need to pass this function down into our to-do list so we can just say to do toggle to do is going to be equal to toggle to do then instead of our list we can import that toggle to do prop and pass it down to individual - dues just like this so now we're passing both the to do and the toggle to do function and then finally inside of our to do we have toggle to do function and on our input we can come in here and we want to say on change we want to call a function and this function is not going to be our toggle to do because we need to make sure we pass an ID so we're just going to say we're going to call this handle to do click and then we're going to create that function which is handle to do click and inside of this function all we need to do is we need to call toggle to do and we want to pass that our to do ID now if we save that and we just click the check you can see it's actually checking our box for us same thing with our a and if we refresh you see it's storing that complete status inside of our to do is inside of local storage and the way that this is working is a little bit confusing is what's happening is every time we click is calling this on change which is calling our toggle to do function with the idea of the to do we're inside of that intern gets passed up through to do list into our app which calls this toggle to do function here which resets our to do list variable to the new list of to do's with the to do checked that we clicked on now that we actually know how to toggle a none toggle our to dues let's make this text down here actually tell us how many to do is are unchecked and this is fairly straightforward to do we can just say to dues dot filter and we want to filter all of the ones that are not checked so we can say to do which is not to complete just like this and we just want to get the length of the not complete to dues now if we say that you can see we have one to do left we check this it goes down to zero we uncheck both of them it says to left to do and so on and if we add a new to do it's going to go up to 3 which is great now let's set up the click event listener for our clear complete we can just come in on click we want to handle clear to dues and we can create that function let's just do it right here and what this is going to do is it's going to set our to dues to the new list that doesn't have any of our complete ones so again let's create a variable called new to dues and that's going to be equal to our current to dues dot filter and we want to filter on all the tattoos that are not to complete so we can say to do dot complete this is going to be all of our non complete to deuce and we just want to set our two dues to that new two dues just like this and now if we click clear completed you can see it's clear everything that we have checked just like that and we refresh its going to save those changes and that's everything for the basics of react but as I mentioned there's so much more to react and my full course is going to explore everything in react in much more depth than I can in this video so if that interests you make sure to check out the course linked in the description down below thank you very much for watching this video and have a good day

Channel: Web Dev Simplified

Views: 448,106

Rating: 4.8163581 out of 5

Keywords: webdevsimplified, learn react in 30 minutes, learn react, react tutorial, react crash course, react js tutorial, react js, reactjs, reactjs tutorial, reactjs crash course, learn reactjs, learn react js, react js project, react js todo app, react js tutorial for beginners, react crash course 2019, react crash course tutorial, react hooks tutorial, react hooks for beginners, react component tutorial, react components, reactjs hooks, reactjs hook tutorial, reactjs hooks project

Id: hQAHSlTtcmY

Length: 27min 15sec (1635 seconds)

Published: Tue Oct 22 2019