React js Tutorial Beginner to First Application

you need to learn react it is the most popular UI framework and for a very good reason it simplifies building complex user interfaces but I get it react is a huge departure from traditional web development and getting started can be daunting but that's why I'm here hi I'm Jeremy mCP I can teach you everything you need to get started with react we'll start at the very beginning and I will show you how to create a new project and you'll learn about the key f files that every project needs from there we'll start building a to-do application you'll learn about components and how react is a component driven development framework I'll teach you how to pass data to components and how different components can interact with one another you learn about the difference between and how to write stateful and stateless components you'll also learn the different ways to handle user input we have a lot of ground to cover so when you're ready we will get started before we dive into react we should first go over the tools that you will need not just to follow along in this course but to develop applications with react and the first thing that you need is a code editor now technically you can get away with just any text editor because that's all code is however code editors have a lot of features that make it a whole lot easier to work with code and when it comes to working with JavaScript there is no better code editor than Visual Studio code I that sounds like an opinion but it's not it's fact there is no debate about it and while I'm not going to say that you need to use Visual Studio code I recommend it and it doesn't matter what platform you're on Windows Mac OS or Linux you can download and install Visual Studio code now there are many code editors available and many of those are free so while I do recommend Visual Studio code I also recommend that you download and install and try as many code editors that you can find and when you find one that you really like stick with it there's really no wrong answer here so after you have a code editor the next thing you need is nodejs now we aren't going to be writing applications for node but there is a tool that you get when you install node js is called node package manager or npm it's what we use to manage the things that our applications are going to need in our case we are going to use npm to create our project and there are some other tools built in that we will use as well so the version number really doesn't matter as far as our purposes are concerned however you typically do want the LTS version that stands for long-term support you can go for the current version but that's more like the beta version when there are new features added it's added to the current until those features are matured and hardened and then those end up into the LTS now the installation is very straightforward just download and install it take the defaults and you will be good to go now there's something else that I recommend that you use and that is the react developer tools these are tools that run inside of the browser and you will see me use them in this course now since most browsers are based upon chromium you can head to the Chrome Web Store and install it on whatever Chromium browser that you're using I'm using Microsoft Edge in this case but there is also the react developer tools for Firefox it's not a necessity but it is a very nice thing to have it's free so you might as well just download and use it now when everything is installed you will want to go to the command line because npm is a command line tool and we will be using npm however in this cas case we're going to use a command called npx This is for executing code and what we want to execute is something called create react app and as it name implies this is for creating a project that has react it has everything that we need to get started and then we just follow that up with whatever name that we want let's call this react too and whenever you press the enter key it's saying that it needs to install the following package which is the create react app and our only option is yes if we don't choose yes it's not going to create our project so of course we want to install this so we will choose yes and then it is going to go through the process of downloading and installing the create react app which is then going to create our project and when it's all said and done we are given a list of commands that we will use to develop our application as well as build it so that we can then deploy it but the first thing we need to do is CD into that new directory and then we want to run mpm start that's going to start our application in development mode now it may automatically open up your default browser but if not go ahead and open up whatever browser you want go to Local Host Port 3000 and this is what you should see and in the next lesson we will look at the project structure and start developing an application let's take a look at the project that we created in the previous lesson we're going to start with the source folder and then the index.js file and probably the first thing you will notice are lines 8 through 10 we have some markup this is XML yes we have XML inside of our JavaScript it's an old technology called JavaScript and XML it's been around for a very long time however there was never native support for it inside of the browser so nobody ever used it however with Frameworks like react and View and many others it is now very popular so the question then is if there's not native support for jsx how are our applications working inside of the browser because well we have proof right here that it is working well there are tools behind the scenes that are taking our code optimizing them and compiling filing them into JavaScript that the browser can understand one of those is called webpack the other is called Babel Babble is really the compiler it's taking our code and transforming it into something that the browser understands webpack does a lot of other things and we're not going to go into the nitty-gritty as to how all of those things work but I want to point out a few things here so yes we are using XML inside of our code and you can see that we have this react. strict mode that is one Element it has a child called app now this app element is actually being imported here online for import app from and then we have the file that is actually the app.js file so if we open that up we're going to see a lot more XML and while this looks like normal HTML elements these are XML so one thing to remember as we are developing our applications all of the markup has to follow XML rules so that means all elements have to have an opening tag and a closing tag unless if they are a self closing tag like this image element there's also some other rules that we will talk about like for example you can see class name is being used here instead of the class attribute that we would normally use in HTML we'll talk about all of that later on and you'll understand why that is the case but I also want to point out two things the first two lines here we are importing an SVG file and we are also importing a CSS file so one thing to start to wrap your head around is that our applications are essentially built with JavaScript we aren't really working with HTML or HTML files so if we need to add CSS to our application we typically do that by importing the CSS into the file that we need to import that so if you'll notice on the left hand side we have an app.css an app.js and then an app. test.js these three files are all part of what we call the app component we will talk about components later but you can see here that this is just normal CSS there's nothing special about this file but it is being being used by this app.js it is simply importing that so this is adding a reference to that CSS file everything gets linked together and compiled and then we see the result here so let's take a look at the source of this page you're going to see a very clean HTML file but one thing you aren't going to see is the HTML that we actually see here we don't see the HTML for the logo for the text or anything else that is because all of that is being built in JavaScript so Babel and webpack are working together to create this bundle.js this is the only Javascript file that this project has and this bundle.js is the result of taking all of the code from our project and generating this bundle so all of the JavaScript all of the HTML all of the CSS are being dynamically added to the page so then the question becomes where does this HTML come from well that is inside of another folder called public so let's take a look there because there's a few things but really the only important thing is this index.html this is our template and it is very close to the resulting HTML that we see in the browser in fact if we did a line by line comparison you're going to see that the majority of the lines match there are some differences such as you'll see this public URL and that looks like a variable and that is exactly what it is so this index.html is our site's template so you might be tempted to put some assets here and some assets are perfectly fine here if they are Global assets like fonts or if you wanted to include something from a CD in this might be the place to do that however as you are developing your application and you are writing your own CSS you will typically want to put that inside of the source folder so that you can then reference and import those into the application so there's two very important things to take away from this lesson we need index.js this is the entry point of our application if we don't have index.js so if it's renamed or if it's deleted the application isn't going to work because this is the entry point we also need this index.html this is the template that our project is going to use so once again if we rename this or if we delete it our application won't work because there is no template so we need those two files in order for our application to work we can include XML we can't put it anywhere but over this course you're going to learn how we can use XML inside of our JavaScript files so in the next lesson we are going to delete most everything that was generated by create react app and start developing our application react is a library for building user interfaces and we build a user interface with small isolated pieces of code called components now the idea of building a user interface with components is not new it is relatively new in terms of web development but using components to create user interfaces have been used for decades for desktop development so in this lesson we are going to delete everything inside of the source folder and we're going to start from scratch and one of those things is going to be a component but first remember from the previous lesson that we need a file called index.js This is the entry point of our application and the very first thing we need to do is import react in fact just get in the habit of writing that as your first line of code whenever you create a Javascript file inside of a react project because just about every JavaScript file that we create is going to be for a react component the second line of code that you should get in the habit of writing is importing react Dom now in the early versions of react react and react Dum were a single Library however they were later separated out which makes a whole lot of sense because they serve two different purposes react is is well it's the react Library itself react Dom is for working with and manipulating the Dom it also gives us access to components that look like HTML like for example let's create a paragraph how do we do that well just with a p element just like this and then we can have the text of hello react so let's stop right here remember that in the previous lesson I said that we aren't really using JavaScript we're using JavaScript and XML or jsx so XML is a native part of the JavaScript that we are writing and so in a normal Javascript file one that would run inside of the browser this of course would be wrong very very wrong but it's not the case here XML is just part of the technology we can use XML in JavaScript that is what JavaScript and XML is so even though it looks very wrong that we have just assigned an XML element to a JavaScript variable this is actually completely and totally valid so literally we have XML assigned to a JavaScript variable however logically what we have is really a react component because behind the scenes this P element is not HTML this is a react component that is to emulate a p element at least as far as our code is concerned whenever it is rendered in the browser it is rendered as a p element in HTML so let's go ahead and let's render this and we do that using react Dom because remember I said that react Dom is for working with and manipulating the Dom so we want to render a react component and we have one in our paragraph variable and so then we need to specify where we want to render this well if we look inside of our templates we have a div with an ID of root that's where we want to render our application so we just need to specify the element object of where we want to render this and the easiest way to get that element object is to use get element by ID so there we go we can save this file we can hop on over to the browser and and that's not right let's refresh and there we go we have hello react now one thing that you would have just noticed that the screen changed it was a dark screen with the react logo then it suddenly changed to a white background and a huge react logo whenever we ran mpm start a couple of lessons ago this started our application but it did so in development mode so so there is a file Watcher behind the scenes it's watching for changes that we make to our project and it's going to rebuild our project every time it encounters a change then it will reload the browser and well just then it reloaded but it didn't really reload it completely so we had to manually refresh so there are going to be times that we will make changes to our project and then we can hop back to the browser and it's magically going to have our new content there are other times that we might have to help it along and just manually refresh before we see that new content but just keep that in mind all right so let's go back to our code so we have this component that represents an HTML P element we have our content we are rendering that in the browser but let's start to transform this into our own application now if you'll remember from the project as it was created with create react app it created this app component and that's what had the uh the react logo and then the text and everything there whenever you look at other projects you're going to see something similar so that there is going to be one component that encapsulates everything else about the project and it's really easy to just think of our project as an application in and of itself because because that's essentially what we have we have an application that is for the UI portion of a larger application and that's always how web development has been we've had a client side application we've had a server side application but now with Frameworks like react that's a bit more apparent because we are building an application here so you might see something like this to where there is a file called app and that is just the component that contains everything about our application but in other times it might be called the name of the application itself so we have a to-do application so we could call it to-do app or something like that we're going to just follow the convention of calling it app so we need to create this file and it is simply going to be called app.js first two things we need to do is import react from react and we also want to do the same thing for react Dom anytime that you want to render something or if you want to use any of the builtin components that represent HTML elements you need to import react Dom but here's what we're going to do we're going to create our own component that represents our application and this is a JavaScript module so we are just going to export a class let's call it app but but this needs to extend react component because that is what is going to let react know that this is a component now we can also create a component a different way by just defining a function for right now we're going to stick with a class because a class has to have a method called render because a component has to be rendered and this is very much like the render method that we used inside of index.js where we rendered the component that we wanted to render which in this case was just a p component well we can do the same thing inside of this app component the render method has to return a react component so with that done we can go back to index we can change this paragraph to what looks like XML well it doesn't look like X XML it is XML but we are importing that app component then we are using it as an XML element whenever we want to render that and whenever we go back to the browser we're whoa uh let's have something that's going to be a little bit different here let's change this to hello React 2 so if we go back to the browser we can see that it automatically refreshed and we can see that the content is what we expected to see so in the next lesson we are going to build out this app component because we don't want to uh render just some random text like this we want to actually start to render the UI that we are going to have for our to-do application and we are going to build that UI with more components in the previous lesson we created our first component it is the app component and it is representing the application as a whole so it is going to encapsulate everything and so now we just need to build our application and of course we will do that one component at a time but before we get too far I do want to add in some CSS something that is going to allow us to uh see something other than just the plain ordinary stylesheet that comes with the browser so I'm going to paste in bootstraps CD in uh this will make it a little bit more pleasing on the eyes and it also gives us a lot of classes that we can use to design our user interface and of course we will write our own CSS as well so what I am envisioning right now is to have something at the top that gives us a quick and easy way of adding Todo items and then beneath that we will have a list of things or the list of to-do items so we can essentially break that up into two div elements so we'll start with the first div element that is going to uh contain the to-do creation and then in fact let's have some text here this of course is going to be placeholder text we will add in the UI later on and then we will have the div element that is going to contain all of the Todo items now one thing you will notice here in Visual Studio code is that we have this red squiggly underneath this line we need to pay P attention to this because Visual Studio code is very intelligent it knows that we are working with react and it knows that this is incorrect and in fact if we go to the browser we are going to see an error and it's very simple adjacent jsx elements must be wrapped in an enclosing tag so remember a few lessons ago that I said we are working with XML we have to follow XML rules and any X fragment has to have a root element so what we need to do then is wrap this in another div element which is easy enough to do and then we start to end up with something that looks very horrible as far as the code is concerned but at least that error goes away so now let's start to format our code something that is a lot easier to read so if we put the different sections on their own lines and add some white space that looks great that looks like what we would expect to work with as far as markup is concerned however whenever we go to the browser we can see that there's nothing there and if we try to refresh the page once again there's nothing here at all and the reason is very simple JavaScript has a feature called semicolon insertion so here on line six we have a return statement and it is inserting a semicolon after that what we need to do is have some kind of syntax that will tell JavaScript hey this isn't a complete statement and so what you will see is something like this to where we will have an open parenthesis followed by our markup and then a closing parenthesis at the end and so now if we go back to the browser of course we see the content there's not a lot of content but we will get there so the first thing I want to do is make this more Center in the screen and we can do that by using the container class from bootstrap so we can add that like you would think or can you you can however if you'll notice as I'm typing this let's take that back out I start to type class and you can see that once again Visual Studio is popping up with something that says class name and that is because in react whenever we want to apply CSS classes to our markup yeah we need to use class name and the reason is very simple remember that this is not an HTML div element we are not working with HTML we are working with XML but logically we are working with a component a component is an object and an object has properties and methods so in this particular case this div component object has a class name property and that Maps directly to the class attribute on the HTML element that will be rendered in the browser so we use class name now if we take a look back at the browser I want some separation between the quick creation section and then all of the to-do items so we can easily do that by adding some mark so once again we are going to use the class name property on our div component and we are going to use a bootstrap utility class we're going to add some margin to the bottom and we're going to use the max that is available to us which is five I don't really know what that translates into as far as units are concerned but you can see that we get a nice little separation between those two we could also add some margin to the top which would be Mt Dash and uh this doesn't have to be too much I just want something off of the top of the screen there so that is going to work just fine and so next we need to design the area that is going to display the list of to-do items so to me it makes sense to have a div that is going to contain all of these other items so we'll have another div that will then contain the to-do item but I want to do this I want to have multiple pieces to these items so that we have the title of the item if you will and we might also want to have a short little description or we can leave the short description off so that we could navigate to another page so that we could see that to-do item in detail I mean that definitely is something that we can do at some other time and then I would like some way to denote whether or not an item is completed and we can easily do that by using a button and we can use the success class to denote that this item is completed and of course we want some text to make it clear yes this is completed and for items that are not completed we could use a different class like danger or warning or just anything other than success as long as it would make sense to do so so if we take a look at this we're going to see that everything is lined up on the left hand side and I don't necessarily like that I like the title and our little description there but I want the button to be on the right hand side so we can accomplish this with flex box but we're going to have to surround the title and the description with another div element so that it's will look like this and then for this div element that contains everything about this Todo item which we can go ahead let's give this a class of to-do item that way semantically we can see that this is a to-do item we can apply Flex box to this element and we can make sure that everything is Justified as it needs to be but I do want to add some padding here and let's also add some margin to the bottom but then importantly we will have the flex box and we will use justify content between that's going to justify its children by putting an equal amount of white space between them so what we will have on the left hand side is well we could just save it and that's what we have we have the title and description on the left hand side we have our button on the right hand side I don't know if I like that large of a button but then again you know in terms of mobile that might be great you know the larger that you can provide a button for the user to tap then that probably is going to be okay now I do want to add a background color to our items so what I want to do is create a new file that's going to have our CSS for this component and there's nothing magic about the names of these files because ultimately what happens is inside of our component we come and we import the CSS so we can technically name our CSS files anything that we want but for the sake of maintaining our sanity it makes sense to name our CSS and our components the same so that we know that this CSS goes with this component and so on so with that in place we can add this Todo class here and we will give it simply a background color of this it's an offwhite color so that we can kind of see it but it does stand out from the white background I do want to make this rounded so let's add the rounded class and that's going to look okay it's not great but I'm not a designer so that whenever we would have another item we would simply just need another one of these items so that we would have item two let's set the class down here to Danger and then the text can be not completed so that then we would have our item one and our item two and that's something that we can work with now we have essentially created two very similar things we have the markup for one item and then we have the markup for another item which is very similar there's just a few differences and if we've learned anything from writing any little bit of code we know that this is a perfect opportunity for code reuse which means that this is a perfect opportunity to create a component so in the next lesson we are going to create a component that represents an individual to-do item in this lesson we are going to build a component for representing an individual to-do item and of course we want to display that item's title and description and we also want to display the text as to whether or not the item is completed or not however also remember that eventually we want to display a different color button based upon whether or not the item is completed now in some Frameworks we would have to create two separate components for both of those circumstances but in react we just need one component and it will handle both circumstances just fine so let's get started let's create a new file inside of the source directory we'll call it Todo item. JS and and let's copy the codee from appjs let's paste it inside of to do because this is going to give us a starting point because we of course need to import react and react Dum let's change the name of the class to Todo item but then the render method just needs to return the markup for this particular component so we can get rid of everything except one of our to-do items so there we now before we do anything else I'm going to go ahead and import this inside of appjs because admittedly that's what I always forget to do I will create components I'll get everything all set up and then I will try to run it for testing and I always forget to import that so let's do that here and then we can go ahead and use this to-do item inside of this app component so we can go ahead and delete these two div elements and and then we can use our Todo item now of course whenever we view this in the browser we are going to see the same content because as far as our to-do item component is concerned the there's nothing Dynamic about it all of the data is hardcoded and we of course want to change that we want to pass data to each component so that it will display the data that we want now I use that term pass and that makes you think that we are passing data to a function and later on you will actually see that that is indeed what we do now the terminology that we use and react is we are passing data through props props are really nothing more than properties but we call them props and you'll see why whenever we actually start writing the JavaScript that's going to handle that but to pass props to a component all we have to do is use an attribute on our element here here so we have a title so we can set the title equal to item one in this case then we can have a description prop which we can have item one description and then we can have a completed prop which we can set to true and of course we want different information for this other item so let's just go ahead copy and paste and we'll change it so that it's item to item to description and then we can say that the item is not complete so then we need to use this information inside of our component and we do so with a property called props and then from here we just use whatever name that we need so like we had a title prop we have a description prop and then we have the completed prop so then the question becomes how do we use that inside of our markup because if we do this let's say that for our title we'll try to say this props title well whenever we view this in the browser of course we are just going to see the literal text of this props title because at this point in time react doesn't know that this is a JavaScript expression so what we have to do is use syntax that tells react that we want to use a JavaScript expression which is simply a set of curly braces and then inside of the curly braces is treated as JavaScript so we have something simple just like displaying a title so whenever we view this in the browser we are going to see the values of item one and item two we can do the same thing for the description so let's go ahead and do that you know but we could say that the description is optional because you know not every item is going to need a description so remember that I said that this is a JavaScript expression we can put any JavaScript expression here so we can use a tary expression so that if we don't don't have a description then we could have like a default text which doesn't make a whole lot of sense in this particular case but if we do have a description then of course we would want to display that description so if we go back to our app component and let's just leave off the description on this second item so we'll just get rid of that we'll go back to the browser we will see that the first item has the item one description and item to has the default text so anytime that we are inside of our XML and we want to use JavaScript we use a set of curly braces and then inside of that we use whatever JavaScript expression that we want so then we can do the same thing for completed here so uh let's use a tary if the completed property is equal to true then we want to display the text of completed otherwise we want the text of not completed so let's go to the browser and what do we see not completed well why is that I mean because whenever we passed data to our to-do item we definitely said that completed is true and we are explicitly testing for True here because we can't just check to see if we have a value Val because even false is a value so what is going on here well the data that we are passing to these props are strings because well hello it's rather apparent here we have a pair of double quotes and then a value inside of it so it is treating these values as strings so when it comes to the completed property this is a string of true this is a string of false so then what do we do well remember if we want to use a JavaScript expression we have to use a pair of curly braces and then inside of that will be whatever value that we want for that prop so here we are assigning the Boolean value of true to completed here we are doing the same thing but it's false instead of true so if we go back and look at the browser we can see that okay we have completed we have not completed so in this particular case we are essentially binding this JavaScript value of true to the completed prop and in this case we are binding the JavaScript value of false to this completed prop now for the sake of readability we would put each of these props on a separate line so that vertically it looks like that it's taking up a lot more room however it makes things a whole lot easier to read so in the case of our Tod do components well the results speak for themselves we can definitely see the props that are being passed we can easily see the values that are being pass to them and that just makes our lives so much easier so let's go back to our to-do item and in the next lesson we are going to look at how we can simplify the Java JavaScript Expressions that we have inside of our markup because let's be real while it's cool that we can have any JavaScript expression inside of our markup it makes things a little bit less readable and readability is key when it comes to maintaining software in the previous lesson we looked at two very important topics first of all we looked at passing data to components using props and then using those props as JavaScript Expressions inside of our markup and those two things really allow us to provide Dynamic content inside of our component like for example for our button text we are choosing to display either completed or not completed based upon the value of the completed prop and this is all done with a very simple JavaScript expression however I want to take this a step further not only do I want to provide Dynamic content but I also want to provide Dynamic styling because we want to change the style of this button based upon the value of the completed prop but we also want to do so in a clear and concise way because as it currently is written yeah we can read it we can understand what's going on but we can make this a lot more readable and when you start dealing with markup regardless of if it's react or view or any other one of these Frameworks that allows us to use jsx we want our markup to be as clean as possible because it is a declarative style of development so one thing to remember is that this markup is in the return statement of a method and of course a method is nothing more than a function and there's really nothing special about this function is just a normal JavaScript function so before the return statement we can have whatever code that we want it can be JavaScript it can be XML it can be JavaScript and XML so one thing that we can do just right off the bat that's going to make our markup a lot more readable is to destructure our props so that we have title description and completed variables and that gives us something that's just a simple identifier that we can use inside of our markup so this props title simply becomes this title this props description just becomes description and of course this props completed becomes completed but we can also take this a step further we can take this entire JavaScript expression and we can replace that with a variable which uh we can just call description text and we can Define that variable outside of our XML we end up with the same results because it is the same JavaScript however it becomes very clear as to what we are doing inside of our markup and we can essentially do the same thing for completed so we'll have our completed text so let's create that variable as well but then we need to talk about our CSS classes because we want to use success for when the item is completed we want to use danger when it is not but the beautiful thing about this is that it all follows the same concept that we are talking about so we can create a variable that is going to contain the appropriate CSS class all we have to do is just write the code that's going to do it so if it is completed then the completed class is going to be success otherwise it's going to be danger and then we can change the class name property on our button to just a normal JavaScript expression so that we'll have our button and then we want to use the appropriate completed CL class so it becomes like this now you could make the argument that this is making our code a little bit less readable and I could agree with that so one thing we could do is break out these classes inside of its own variable and use that so that it would look something like this we could have a button class variable where we build that string so that we can then use that Direct directly inside of our class name and so now whenever we go to the browser well we can see that change is automatically done our completed item is the green background that is the success class the incompleted item has the danger class and everything else is working just as it did before well in the next lesson we are going to talk about handling events because we want to be able to click these buttons and change the value of the completed prop in those components setting up events in react is very straightforward it's also going to look very wrong if you've been using the idea of decoupling your JavaScript from your markup because well I hate to break it to you but in react we couple our markup and our JavaScript I mean other than putting our Expressions directly inside of our markup it doesn't get any more coupled than this and the same ideas and concepts are applied when it comes to events because what we end up doing is something very reminiscent of the Dom level zero event handlers now if you're not familiar with that term it is simply the event handlers that we used before there was a Dom standard if we pretend that this button element is an actual HTML button we would want to handle the click event by using the onclick attribute and then of course the value would be some JavaScript that we wanted to execute same idea for react except that onclick is camel cased because remember we are dealing with a button component object this is essentially a JavaScript object that has props those props as you know are essentially properties on that object and since this is all boiling down to JavaScript it is case sensitive so there is a difference between Class name with an uppercase in and then class name that is all lowercase the same is true for onclick or any other event handler so if we wanted to handle the uh Mouse over event we would use the on Mouse over prop there so let's do something whenever we click on the button let's start with something simple just like writing something to the console so let's save that let's go to the browser let's open up the developer tools so that we can see the console and right off the bat you can see that that code has already executed and we haven't clicked any button at all well it kind of makes sense because whenever the render method executes of course all of the JavaScript inside of that method is going to execute including the code that is inside of our markup and as far as on click is concerned we have just a simple JavaScript expression writing something to the console so this EX executes when the render method executes so what we want to do then is essentially wrap this expression within a function and we can do that very easily with an arrow function so by making that very simple change we can go back to the browser let's clear out the console and we can see that whenever we click on the buttons that indeed works so now we want to change the value of the completed prop so that we'll toggle its value essentially if something is completed then it will be not completed if something is not completed then it will be completed so that might look like this to where we set the completed prop equal to its opposite and we already have the opposite value with completed so let's try that if we go back to the browser and click on any one of the buttons we get an error and it says that it cannot assign to readon property completed so here's something very important our props are readon they are immutable and that is important it's also very good because that means that the data that is passed to a component cannot be changed we can ensure the Integrity of the data that the component received we can therefore always be sure that when the first item receives the value of true for its completed prop that it is always true so then the question becomes how do we change anything if we can't change data what is the point of react and this whole thing well remember that we are dealing with JavaScript objects objects can have as many properties as we need and react gives us a special property called state state allows us to track whatever data that we need to track within our component so in our case we essentially want to track whether or not the item is completed so we need to first of all opt into using our state because we aren't using it by default and we start by writing a Constructor for this class is going to accept the props that were passed to the component and we immediately need to pass those props off to the parent class which is react component that way react can properly initialize our component but then after that we just need to create our state so we will Define this state property and then this is just an object all we need to do is provide the data that we want to track and in this case it's going to be relatively simple we just want to track this completed value and we can initialize that with what came from the completed prop so now inside of our render method we no longer want to use the completed value from our props we want to use the completed value from our state so I am going to just create a new variable called completed that we will initialize with the value from our state that seems to be the easiest way so that we don't have to change a lot of our code and then whenever we click on our button we want to change the value of our state and we do that with a method called set State now let me stop right quickly when it comes to Changing State there are essentially two ways you can mutate your state which is taking your existing state and then just making some modifications to it and that is typically what we've done in the past however years of experience have shown that that causes issues whenever you mutate state it actually introduces a lot of complexity to everything so instead what we typically do now is just completely replace the state that sounds like a lot of extra work but it really is the best way to change State now in our case our state is very simple just a single Boolean value but to change our state we're going to call the set State method and then we pass in the object that is going to be our new state so we are essentially going to reassign the state property whatever object we pass to this set State method so we're going to have the completed property and then we need to specify its new value value which we basically just want to toggle it to its opposite so now we can go back to the browser let's clear out the console and let's click on one of our buttons and we can see that not only does the text change but the color does as well and we didn't write any of that code and that's one of the beautiful things about react is that now that we are using State and we are tracking the value of completed our component changes because everything was based upon this completed variable so now whenever we change State react sees that the state of this component changed so it is therefore going to execute the render method again so we're going to write to the console simply render signifying that the render method was called now we're going to see two to begin with well let's clear this out let's refresh we will see two to begin with because the render method was called on both of our components but whenever we click on one of the buttons we are going to see render added to the console and whenever we click it again we're going to see that counter increase so react behind the scenes recognizes that the state changed it is therefore going to call the render method again in order to render that component and only that component notice that it's not rendering the first item whenever we click click on the second item and it doesn't render the second item whenever we click on the first item now that is amazing I mean yes in modern development this is typical but before we had anything like react we had to write the code that made all of this work and this is so much better now unfortunately when it comes to State the question is always what components need State and which ones do not and you can make the argument that this to-do item definitely needs state so that we can track the completed value so that we can make all of this work does it really because in the grand scheme of things in a real application whenever we click on one of these buttons we of course want this functionality to make an item completed or not completed but we would also want to store that information in whatever data store that we are using that could be local storage it could be interfacing with a server API I mean there's a lot of different options so when you start thinking in those terms having State inside of our to-do item really doesn't make a whole lot of sense because then the question is how does this toodo item interact with our data store well it really doesn't so instead what we need to do is Define our state inside of our appjs because that is where we are using our Todo item components so our app component would read the data from our data store dynamically generate the to-do items and then as these items change the app component would then interact with our store and save those changes so in the next lesson we are going to start refactoring our application to use State inside of our app component instead of the to-do item in the previous lesson you learned about events and you learned about State and we applied state to the to-do item component we are tracking the completed value and while that makes the user interface work we also need to think in terms of the application as a whole because to me it really doesn't make sense to track that value here inside of the to-do item component it makes more sense for the app component to track the application data so in this lesson we are going to lift this state out of the to-do item component and Define it inside of the app component so that essentially means we need to back out all of the changes from the previous lesson well not all of them but most of them so that we have that completed variable that is being destructured from our props and then everything else should work okay we won't address the onclick event just yet because we still need that we still need to do something whenever we click on the button but we will come to that here in a few moments let's go to the app component and I'm going to paste in the Constructor that we had inside of the to-do item because since we are adding State here we need to do so inside of the Constructor but of course we want to track more than just the completed value we want to track all of the data that this application is going to work with so that means we need to track all of our to-do items which is going to be an array of JavaScript objects now for right now we are just going to hard code this because well it makes sense to do so ideally we would be loading the data from our data store and we will get to that point eventually but we need data to work with so it kind of makes sense to hardcode it now and then we can add in our real data at some other point so these JavaScript objects are going to have a title they're going to have a description and of course the completed value and we are going to have three of them instead of two and what we want to do is take this data and dynamically generate an array of components we want an array of Todo item components specifically and the way that we do that is very similar to what we did inside of the Todo component where we dynamically generated the content that we wanted in the JavaScript and we just simply assigned those to variables and then we used the variables inside of our markup that's essentially what we will do here except that it's going to be just a tad bit more complicated because we need to transform a an array of JavaScript objects into an array of react components but really it's still very simple because all we have to do is map those Todo items to the components so the code is going to look a lot like what we did before where we hardcoded in those to-do items we can just copy and paste those the only changes that we need to make are the actual values that we assign to the title description and completed props those values are going to come from the item so after making those modifications we can go to the browser and we can at least see if we have three too items to work with so now we will get rid of these to-do items inside of our markup and we will simply replace that with the items variable that we just created so now in the browser of course it doesn't work uh let's take a look at the console so that we can see what error is there let's clear it and refresh just so that we don't uh have an entire page full of Errors so cannot access items before ini initialization and that is being done right here on line 22 so this needs to be item instead of items so let's go back hopefully we see the three items we do we have those three items so we have successfully dynamically generated those to-do items now we just need to do something whenever we click on these buttons so how do we do that well of course we have the click event on the button inside of the to-do item and in the case of the button component it has an onclick prop that we assign a function to so we can essentially replicate that functionality we can say that our to-do item is going to have an onclick prop but I guess that could be confusing since we have a lot of on clicks so let's change this to on toggle completed so our to-do item is going to have a prop called on toggle completed and we expect that to be a function that's going to do something we don't know what it's going to do yet but let's go back to the Todo item and inside of the onclick event handler we will call the on toggle completed prop that's all we have to do here so as far as the to-do item component is concerned we are done for now inside of the app component we just need to decide what we are going to do in inside of this on toggle completed function well we want to manipulate our state and if you remember from the previous lesson we have two options when it comes to manipulating State we can mutate it which is just changing a property here and there or we can completely replace the state and we talked about how replacing the state is actually better overall so what we could do then is Define a method here inside of the app component we could just call it toggle completed but we also need to know which item that we want to toggle and we can easily do that with the index of the item so let's get the index we will pass the index to this toggle completed method and all we have to do is Define that toggle completed method we'll have the index and then we just need to change our state so the first thing we will do is get the 2D do items and we are going to essentially create a copy of our current state and so we are not going to mutate the to-do items currently in our state instead we are going to create a copy of that array then we are going to change the completed property on Whatever item we need based upon the index and we want to reverse that value and then the final step will be to set our state and we do so with set State and we have the to-do items so if I typed everything correctly we should be able to go to the browser and we should be able to toggle these items and we do we can see that we now have the functionality that we did before but our application is better off because now the app component is handling the data and the to-do item components are now what are called controlled components they are being controlled by the app component and now that the to-do item component is a controlled component we can now modify it into a function component which is something that we will do in the next lesson react lets you define components in two different ways you can use a class which of course is what we've been doing thus far and use a class is very flexible it lets you track state you can define properties and methods that you can then use inside of the component but a lot of times you don't need that extra functionality and of course there is an overhead involved by using a class because you are inheriting from a parent there's a lot of setup that's involved behind the scenes and sometimes you just don't need that because you don't need state or you don't need anything other than the output and in which case you can def a component using a function and since our to-do item component is now a controlled component there's no State there's nothing except outputting what it's going to look like we can convert this into a function component so to start we want to export a function and we of course need a parameter list now a few lessons ago I mentioned that you know we are passing props to a component and that kind of sounds like that we are passing data to a function well here we go our function is called to-do item it is a component and it is accepting the props as the argument to this function now of course we don't need render here because this function itself is the render so with that simple change all we need to do is take out the use of this and everything is going to work fine so if we go back to the browser let's just do a hard refresh make sure everything is loaded just as it should we can see that the code is working just fine but we can simplify this a little bit more because we are already destructuring our props so why don't we just go ahead and do that for the props parameter that gets rid of one line of code and we can also include the on toggle completed in that destructure statement so let's go go ahead and do that that way we don't have to refer to props anywhere we are destructuring it into a set of variables that we can then use inside of the function and then we can also simplify this a little bit so that the complete class variable you know we could just use this expression here whenever we create this button class variable makes it a little bit more difficult to read but ultimately it is still very simple so even with those changes if we go back to the browser let's once again just do a hard refresh just to make sure everything is okay we can see that the functionality is still just fine now I'm going to open up the development tools because I have the react developer tools installed we can go to the components Tab and we are going to see that we still have those components we have the app component and whenever you click on one of these components over on the right hand side you get to see information about that component so you can see that the app has the state of to-do items it has three items inside of that if we wanted to delete any one of these we would see the content in the browser change because we just changed our state and of course the application is reacting to that but I wanted to show you this because even though we just changed our components from a class to a function we still see them as components in the developer tools and other than State we still see the same information we can see the props that were passed to them and as we click on the buttons we will see the values of the props change like for example this is item three if we click on this we'll see that the completed changed to true because of course it does we changed the state so when you have a component that doesn't need State all it needs to do is simply render the output then write that component as a function it simplifies your code it also optimizes that component because there's no longer the overhead of using a class now that we have the overall UI finished for our list of to-do items and it is functional we need to focus our attention on creating a new to-do item and we have a placeholder for that inside of appjs so let's start here I'm going to import a component called create too now of course this doesn't exist yet but it will here in a moment and this is what I typically do when I'm writing software I start with the code that I want to write and then I make the code conform to my wishes and we want to use this component down here where we had that placeholder text so we'll start there and then we can create that new file so we need to first of all import react and react Dom so let's go ahead and do that now anytime that you deal with a form you are dealing with stateful data and in order to interact with a form and it's various form controls we have to have state inside of our component so that means we need a class for our component and we will call it create too we of course want to extend react component and let's go ahead and implement the Constructor because we are going to need it so we might might as well do it uh we need to call Super we'll pass in props let's go ahead and also initialize our state we don't know what exactly we want here yet but that gives us at least a starting point and then as far as our render is concerned I'm going to paste in some markup because you don't want to see me type all of this out and it's relatively straightforward it's just a form that has a bunch of bootstrapping stuff so we have a label we have a div element that contains an input element that's for the title for our to-do item and then we also have another div element for the create button and that's that so whenever we save this and there we go that's our UI it could look a lot better but this is going to be just fine now of course the purpose of the create component is to well create an item so we need to find some way to take the data from that component and Supply it to the app component so that it can then manage our data well that's not really too different than what we did with the buttons instead of our to-do items whenever we click on these we are essentially signifying to the app component that hey this button was clicked and the way that we do that is with the on toggle completed prop that is a prop on our to-do item and the app component supplied a function for that prop so we can essentially do the same thing so that whenever an item is created then the app component can provide the function that's going to handle that event so let's just call this oncreate item and I'm going to write this a little bit differently than what we did for this un toogle completed because this is more along the lines of what you would see if you were looking at somebody else's project so that instead of creating an arrow function like we did here you would simply just see the name of a method so we're going to call this add item let's define that method I'm going to put this before toggle completed because I like my things in alphabetical order and this is going to accept the item that is going to be added to our state and we essentially want to start off the same way that we did with the toggle completed so that we get our to-do items in fact we get a copy of that because we're calling slice but then all we need to do is push in that new item and then set the state and we are good to go at least as far as our app component is concerned so we need to remember this prop so that inside of our create too component we handle that and it makes sense to do that whenever we submit the form so we have two choices we can handle the submit event on the form or we can handle the click event on the button since we've done the click event let's handle the submit event and once again I'm going to use something that you would see in just about every project so as opposed to using an arrow function like we've done before and then we would call in a method name I'm just going to supply a method and we'll call this submit form let's define that method and since this is an event handler this is going to receive the event object that occurred and this is very important because now we are getting into just normal everyday JavaScript development we are handling the submit event on a form the first thing we want to do is prevent the default action from occurring and that is submitting the form so we want to do that first but then we want to call the oncreate item prop and then we would pass in the object that is going to have the title information which right now we'll just have an empty string we don't have anything for the description but the completed we'll go ahead and set as false the idea being that if we are adding an item then it's something that we want to complete later so we're going to just set that as false so then really the only thing we need to tackle is handling the user input so the first thing that we can do here is set the value value attribute to what we have in the state now of course we don't have anything in in the state right now but let's just call this item title and so inside of our states we'll have that item title property it'll be an empty string so this is important because we want to essentially tie this input elements value to our state and this is the first thing that we can do is set the value of that input element to what we have in our state but then we run into a problem because now we have hardcoded that value essentially and we can't change it because the value is always going to be what is set inside of the state so what we need to do then is handle the change event so that whenever the user types something into that form field we change our state and once again I'm going to use this new pattern pattern of just specifying the function or the method that we want to handle this event I will call this change title so let's go ahead let's define that change title once again since this is handling an event it is going to accept the event object and we want to set the state so that the item title is set to whatever was entered into that formi field so we need to get the value of the event Target so now what we have essentially done is tied this input element's value or its state to the state of this react component and in the previous lesson we talked about controlled components well now we have essentially changed this input component into a controlled component because it is controlled by this create Todo component so now let's check change this inside of our submit form where we just specified an empty string for the title now that we know what is inside of our state it's that item title property so that's going to be our title and everything should be good to go or should it let's go to the browser let's pull up the developer tools because we are going to see a lot of Errors well actually we just see one error let's refresh the page and well I thought we'd see more here but let's enter something and you can see right off the bat that we get an error that it cannot read properties of undefined it's trying to read the set state property that is inside of the create Todo online 14 so let's take a look here right here inside of the change title now this makes perfect sense because once again this is just normal everyday JavaScript stuff whenever we set up an event handler like we did for the onchange event for this input element the function that we used to handle that event executes within the context of the element it does not execute within the context of where we defined that function I mean this is normal if we had used add event listener so let's just assume we knew what the input element object was going to be we have the ad event listener we say change for the event and then we specify by the change title function we would see the same exact Behavior there one thing that we did to get around that was to bind that function object to this and that's exactly what you see if you look at other people's projects inside of the Constructor there would be some statements so that change title is going to be reassigned the value of change title but it's going to be bound to this there therefore we can use the change title to handle any event and it would execute within the context of this component object we essentially want to do the same thing for submit form so let's make that change now this is going to fix at least the change event so we can go back to the browser let's just do a refresh let's make sure and then let's change the value you can see that the error goes away but the minute that we create create this we run into another error because we need to do the same thing inside of the app component so let's go over there it was this add item method so we will simply follow the same pattern to where we essentially create a new function object for the add item method that is bound to this component so with that change we should be able to go back and add a new item we don't get an error and we can see that the item was added to our list of to-do items and if we look at the components using the react developer tools we see four to-do items if we add in a fifth item then we will see another component added we can see the props there we can see that it is not completed but if we click on that button then we can see that it is completed and and of course if we look at the state for the app component our to-do items we have five of them if we remove let's say the first one of course that is going to be removed and now we just have items 2 through five now this is one way of handling user input we call this using controlled components because once again this input component is a controlled component it is controlled by our create Todo component the issue with this approach is that it can be tedious because we need to not only set up the value but we also have to set up the unchange event so if we had other form Fields then we would have to do the same thing for each individual field and that could be a little tedious so in the next lesson we are going to start developing the edit form so that we can edit our to-do items so we will look at another way of handling user input before we can implement the edit feature we need to implement the UI for our edit form and we're going to do so using bootstraps modal dialogue so what I want to do is modify our current UI we're going to put this on a grid so that a grid is 12 columns wide the to-do items that we currently have are going to be 11 columns wide and then in that 12th column is is going to be a button whenever we click on that button it's going to pull up the modal so that we can edit that particular item so every item is going to have an edit button and its own Modo so since we are going to be using bootstraps model we need to bring in its JavaScript library thankfully it does not rely upon jQuery anymore so all we have to do is pull that in Via a CDN and we are good to go as far as that is concern concerned and let's start within appjs because this is where we generate our to-do items we're going to change this so that we first of all have a div with an ID well not an ID it's going to have a class of row and we're also going to use the Align items Center class so that everything is going to be centered vertically and then we'll also add some padding and and the First Column is actually going to be 11 columns wide so we will use the call 11 class and this is where our to-do item is going to go so let's go ahead and let's put that inside of there and then the final column is going to be where we will put our edit component and this is just going to have a class of call that's going to fill in the rest of that row and even though this is going to contain a button it's it's also going to contain a modal so let's just use the name edit model for this particular component of course it doesn't exist but here in a moment we will create that let's go ahead and import that so that I don't forget to do that later and then we can create that new file now let's go ahead and let's copy the first few lines from appjs because we're going to need some of the Imports this is going to be a class because there's going to be state even though this is going to be slightly different from what we implemented in the previous lesson if you'll remember we used a controlled component the input element that we used was controlled well what we are going to do for our edit model is use uncontrolled components but even still we need state so we are going to use a class for this component let's change the name to edit model and then let's get rid of all of the import statements that we don't need all right so so as far as the render method is concerned I'm going to paste in pretty much all of the markup because when you start working with modals and bootstrap yeah there's a lot there so I'm going to paste this in the first thing you will probably see is that we're using this react fragment this is just a fragment it's a lot like a document fragment in the Dom the idea being that instead of using a div element to wrap everything in because we essentially have two elements here we have the button that's going to serve as the edit button then we have the modal we could wrap all of that within a div but that's kind of changing things structurally the react fragment doesn't and it serves as the root element of our component here so whenever you are inside of a component and you need to wrap something without using a div this react fragment will work pretty well for you now very briefly going over the markup we have the button which I've gone ahead and set up the onclick to call the show model method which we will Implement here in a minute and then as far as the modal is concerned there's there's a lot of elements involved with a model basically there's a header there's the body which is going to contain our form and then there's a footer and the footer only has a save changes button so if we want wanted to cancel out of anything we would just need to close the model by using the X in the upper right hand corner all right so let's talk about how we are going to show the model because we can't really rely upon the typical mechanisms that we would use with just normal JavaScript because everything hinges really upon an ID value and since we are creating multiple edit modal components we can't really use use an ID for example let's open up the to-do item and let's add an ID to each one of these we'll just call this item ID and let's go to the browser let's inspect any one of these and whenever we look at the div elements that serve as our items you'll see that they all have an ID equal to Item ID so there's one let's inspect this other one but once again we will see that it has item ID right there we can see that it's replicated so ID is kind of meaningless when you start dealing with components because well you can have multiple components with the same ID so we can't rely upon that instead what we are going to have to do is use a ref or a reference so let's define this show model method and in normal JavaScript we would get the element that represented the modal that would usually be done with get element by ID then we would create a new bootstrap model passing in that element object and then from that variable we would call the show method so the idea is going to be the same except that we are going to use what are called refs so what we want to do is set a reference for this div element that serves as our modal dialogue and we create a ref very simply first of all this is part of the class so we're going to create a new property just called modal ref and we're going to call react. creat ref this is going to create a reference that we can then use inside of our markup so for our div element it has a ref prop and we're going to set that to the modal ref that we just created so that whenever we want to reference this particular div element in this particular component we would use this ref object and the way that we do that is like this we use that modal ref property and then it has a property called current that gets us the Dom element object for this div element inside of this particular component now we're going to run into an issue because if we try to run this as is well an error that says that it can't find bootstrap and that makes a lot of sense because we've imported react we've imported Dom but we have't imported bootstrap but bootstrap is globally available to our application so what we can do then is just say that this is window. bootstrap and that's going to fix that particular problem uh we do need to bind the show Modo method to this particular object so let's go ahead and do that like we did in the previous lesson and that should get this working so that whenever we go back to the browser uh the alignment's off but we can fix that whenever we click on this edit button it should display a modal and it does now of course we want to make sure that this model is for this particular item that we have so let's pass a prop to our edit model for right now we'll just pass the title and we will do so exactly like we did with the Todo item and then inside of our render method uh let's just make this easy for now in the next lesson we will clean it up but for the title here of the model we are going to add this props title so that we can see the title for the modal and whenever we click we can see that that is item one we can now see that this is item two and this is item three so we have our UI set up and ready to go in the next lesson we are going to implement the functionality for editing our items let's finish implementing the edit feature so that in the next lesson we can look at saving and loading data and we're going to start inside of appjs where we have our edit Modo we are supplying the title we need to do the same thing for the description we don't need to send the completed because we have a whole UI dedicated to uh toggling that value but we do need another prop something that's going to be similar to the on toogle completed but only when an item has been saved or or rather I should say when it has been edited so let's call this on item edited and this is going to be a function that is going to accept the edited item and then we want to call our own method inside of this component we'll call it save item to where we will pass in the index because we need to know what item that we are currently working with and since we have the index as we are mapping over our to-do items it only makes sense to supply that and then we will pass in the edited item so while we're here let's just go ahead and Implement that because it should be relatively straightforward so of course the first argument is the index let's go ahead and let's destructure this edited item so that we have the title and we have the description and that makes it very easy to work with those values and we're going to start the same way as the other methods where we are going to create a copy of our to-do items but then we are going to modify the to-do item at the given index we want to set its title equal to the title of the edited item we'll do the same thing for the description and then finally we will set the state and that will save everything as far as the edited item is concerned so uh as far as this is concerned we are done we can move on to the edit model because this is really where the majority of our work is going to be so let's first of all destructure the values that we need now we are already using title here and we should only need the the description as well so let's go ahead destructure our props just to make it a little bit easier to work with those values and then we need to talk about how we are going to access our form Fields now a couple of lessons ago whenever we used a controlled component we had to create our state so that we could tie our state to the particular form field but then we also had to handle the onchange event and that was a lot of work since we have multiple form Fields here I don't want to do that and especially if we had a form with a lot of form Fields taking the route of using controlled components would be very tedious so here we are essentially going to replicate what we did in the previous Lesson by using refs because we can set up a ref for our input element which is for our title and then the text area element which is for our description and by using those refs we can directly access those elements and we can get their values so that whenever we are done editing an item we can get those values very easily we don't have to write a lot of onchange event handlers so let's create those ref objects we'll call the first one title ref we'll call the second one description ref and then of course we need to set those up so let's go to the input element first this is for our title so we will use the ref prop and that is going to be our title ref let's copy and paste that for our text area which is for our description ref now that's not it however because we do need to provide the data that we want to edit because if we look at this right now our form is just going to be empty because we haven't told it that this is actually the title data this is actually the description now we can't use the value prop like we did with the controlled component because once again this is going to tie the value to our prop and we won't be able to edit that now I didn't demonstrate that the last time but since we're here we might as well so it's great that in the title we can see item one but I can't change anything so what we can do then is set a default value for these form fields which is just another prop that we can use default value that's going to set the default value so that then we can edit it and then when it comes time to actually save it we will use the refs so let's copy this default value for the text area that is for our description and now we will be able to edit those form Fields that's great now we just need to handle the save changes whenever we click on that button so we need to set up the onclick event and let's just call this handle edit so that we can Define that method now since this is handling an actual event let's go ahead and let's bind that to this object and then this is where we are going to use our on item edited I think that's what we called it let's take a look at that prop and it is on item edited so this is where we will use that on item edited and then we will pass in an object that has a title property we will get its value by using our title ref we want the current object or the current element node and then its value and then we want the same thing for the description so we will make the necessary modifications so that's going to tell the app component hey this item has been edited this is the new data but we also need to close the modal now whenever we show the modal we are neing up the model Constructor and then we are showing it we can't do the same thing to hide it instead what we need to do is get the current instance since it is already shown so we will once again create a variable called modal but we will use a static method on the modal class it's simply called get instance we'll pass in our modal ref we want that current object and then that is going to give us the modal that is currently being displayed and then we will simply hide it so there we go that should make all of this work so if we go to the browser let's open up the edit model let's change this from item one to first item and then for the description we'll just say that this has been edited so whenever we click on the save changes we should see everything change and it has that is awesome if we click on edit once again it's going to load in all of the new data and we are good to go as far as that is concerned now we could simplify this a little bit because we are referencing the same model just slightly differently and I think it would be cool to like have a getter simply called modal so that we'll first of all try to get the instance of that model and if there isn't one being displayed then that's going to return null so that then we can assume that okay we need to create that object so that we can show the model and that will make our code just a little bit cleaner inside of our handle edit and show modal so that then we can just say this modal and this modal we can get rid of these variables and then let's try that so let's hop on over to the browser let's do a hard refresh just to reload everything we'll try to edit this item we'll call this first item and we'll keep the description but we'll just add some text there we'll save it that looks great we'll open it up again I don't like that edit we'll get rid of that we'll save and that looks good to go so in the next lesson we will focus on loading and saving our data we write applications to work with data and where that data is stored really shouldn't impact our application because our application should work regardless of where our data is the idea being that if we decide to change where we store our data we should make minimal changes to the application not a whole lot of changes like for example I think it makes a lot of sense that our app component would be completely dumb as to where it gets the data and how it saves the data to the point that we would have props so that our to-do items that we work within our state would actually come from the props we would have simply to-do items that would come from our data store and then our application would load that into State and then there we go we have the data to work with and the same thing for saving data I think that we could have a prop called on Save items to where the app component would provide the to-do items from our state and then our data store would handle saving that so that's the approach that I am going to take and I'm going to start to inside of the index JS file because this is where we are essentially going to provide that information we're going to have the Todo items prop and we are also going to have an onsave items which is going to be really nothing more than a callback function so that whatever function we provide here I'm just going to call it item storage this function is going to be responsible for saving the items that way the app component doesn't know anything it's just going to call this onsave items prop pass in the items and then the item storage is going to handle that so let's say that our item storage is going to have a method called get items and so now we just need to implement that so this is going to be inside of a different file uh we'll call that file simply item Das storage and let's create this I'm going to use local storage because that's what we have access to and this will be relatively straightforward so we're going to export a default object here that's going to have two methods we'll have one called get items so that the first thing that we will do is is attempt to get the to-do items from our local storage we'll just call the key to-do items now of course we might not have any items there so we need to check first of all if we do have items then we need to parse this because you can only store strings in local storage so we're going to save it as Json and we're going to parse it out whenever we read the data from it now if we don't have any items then then we are going to turn simply an empty array because well we need some place to start and an empty array is going to be just fine so that is getting our items our save items uh we will receive the items that we want to save and then we will just use the set item method on local storage our key is once again Tod do items and then we want to call stringify why they couldn't call it serialize I don't know but there we go that is our little library of interacting with our data store so all we really need to do is fix this syntax error in index.js that is fine so now we just need to look at appjs now as far as the to-do items are concerned we are already set up to load those from our props but every time we set State we essentially want to save our items so it kind of makes sense to have a method called save items to where we are going to receive the to-do items and then here we will not only set the state but then we will call the onve items prop and then we will pass in the to-do items that way our state and then the data that we have in local storage should be kept in sync this does mean that we will need to use the save items method instead of set state in the other methods we also need to change the data that we are passing we just want to pass in the array of items not an object that has a property of to-do items and that should work so let's save that let's go to the browser let's open up the developer tools Al uh we aren't seeing anything here so let's go to the console um everything looks okay we don't have any errors local storage get items is not a function that is a problem uh so it helps if you use the correct API for local storage but that should fix that and we have an empty UI now this is what we would expect to see because we are loading data now from our local storage which there's nothing so let's add in an item add creation functionality and then we will create and voila we have an item although uh invalid on property class I must have missed a class attribute somewhere it's probably in the modal um we can fix that that's not a big deal but let's go to the application tab because that is where our local storage is and we can see that we have a Json structure it's an array that has an object where the title is ADD creation functionality and complete it as false if we complete this we can see that it changed to true so we've saved our data let's add another item and I should have changed the text we should have added the functionality to clear that whenever we create an item but that's easy enough to do but let's change this so that we save data to local storage and then for the description use local storage for data store let's say save this that did get saved to our local storage as well but let's not complete this let's do a hard refresh this is going to simulate reloading the application we can see that it is pulling that information from local storage we see it here that's completed let's refresh and voila so we have a working application now let's very quickly fix that little bug so that whenever we create a new item it will clear out the text box that is inside of the create to do and really all we should do is inside of the submit form after we call on create item we should be able to uh set our state and we will just set the item title to an empty string and that should work so let's test that we want the title to be fixed the title bug on creation whenever we click create that should clear out the text box it does and everything looks good so that is complete so when working with data design your application to be data source agnostic it should work the same regardless of where the data comes from react changed the way that we build web applications and it's my hope that as I leave you that you have the fundamental understanding of how to build applications using react now of course we just scratched the surface of what react has to offer and in in the near future we will look at other topics such as Redux and routing to add more features to our to-do application now I recommend checking out the tutorials and documentation at react js. org it is after all the place for react info and of course you can also head over to touch plus where we have a lot of courses and tutorials just waiting for you thank you so much for watching this course from all of us here at touch Plus thank you and I will see you next time

Channel: Envato Tuts+

Views: 4,576

Keywords: react js, react js tutorial, learn react js, tutorial for beginners, react js crash course, react basics, javascript, learn react, learn react js for beginners, learn react js basics, react js full course, react crash course, reactjs tutorial, reactjs tutorial for beginners, react tutorial for beginners, react js tutorial for beginners, react js project, react course, reactjs course, react javascript, react js beginner projects, react js beginner tutorial

Id: bfDnjbw3DJM

Length: 107min 6sec (6426 seconds)

Published: Wed Jul 03 2024