Transcript for:

Hey, what's up, it's john from coding attic. And welcome to react tutorial video, where we're going to take a deep dive into awesome world of react, we're going to start from the very scratch. So think setup, install on general concepts, and slowly but surely move towards more interesting and more complex react topics, like react hooks, context API, and react router, just to name a few. So by the end of this video, you're going to have a good grasp on how to use react for your next project. As a side note, I'm currently working on additional react projects video, where we'll put all of our tutorial knowledge to good use by building bunch of cool apps with react. If you'd like to see some of the projects we're going to build, just head on over to react hyphen, project dotnet, we'll find that app and look for a video link in description. And lastly, both videos are part of my react course, where we build even more cool and complex projects using react. And if you're interested, you can check out the course at John's milgard.com. Alright, and welcome to the course. And we're going to kick things off by quickly covering what in the world is. And there's no better place to start than the official docs for me, by the way, are located at react js.org. Once we navigate there, we are greeted by this one profound sentence. React is a JavaScript library for building user interfaces. That's it My friends, not a PhD dissertation paper, just a short, concise one sentence explanation, while I'm a big fan are straight to the point answers. And the first one, by far sums up react the best. Let me elaborate a bit on that. So react was developed at Facebook in 2011. And currently, it is by far the most popular years you heard correctly the most popular JavaScript library to build user interfaces. As I know, some of react competitors are Angular view, as well. If there's one thing that I would want you to take away from this video, is this one. When it comes to react, it's all about components. You can think of components as independent chunks of user interfaces. components can be as small as one HTML element, or you can be a rebel, and jam your entire Facebook clone in one component. At the end of the day, a lot of it depends on your needs and wants. In reality, though, you probably will avoid the one component route. Since it's somewhat defeats the purpose of using react in the first place. You see the benefit of the component is that you can build a bunch of independent, isolated, and most importantly, reusable user interfaces that you can run piece it together, just like Lego blocks. And as a result, build even super complex apps without going insane. While your app can have as many components as you'd like, it will always always have at least one called root component. We already glossed over it a bit. But just to reiterate the major benefits of using components and essentially, react, develop your next app or phone, you can build independent pieces of user interfaces, meaning changing logic, or layout in one combined will not break your OLAP once component is ready to go, you can reuse it all throughout Europe. But component code is still stored in one place. So if you ever need to make some changes, you don't have to run around like a headless chicken, simply locate the component, apply the changes, and all the instances will be automatically updated. And of course, let's also not forget about speed. You see behind the scenes react is using something called Virtual DOM, where only the component that needs to be updated, is affected. And what's really cool, it's done without re rendering the whole app, which in turn, of course, increases the speed of your final product. And as a result, the user experience as well. Before I let you go, I also want to show you somewhat typical example that everyone uses to show react components in action. And that is no other than our beloved Twitter. So as we're looking at the screen, and by the way, I can see you getting distracted by my content we focus people focus we We are here to learn. Where was I? Oh, yes, the components. Let's take a look at the sidebar. And as I'm working on it, I can see a bunch of words. Or you probably notice that each link is pretty much the same structure, where there's some kind of icon as well as a text. So essentially, what we could do is set this up as one component. And what that means is, we'll just set up a structure, and everywhere where we would want to use it, we will just need to pass in the data. And by data, of course, I mean, the specific icon, parent is going to be render. And then of course, the text. As a result, what that also means that I can reuse that component, all throughout my application, however, I would like. But if I would want to make some changes, for example, if I would want to add something here, I can just change it in one place, and then all the instances will be automatically updated. So that would be a lynx example. And you can probably already guess, the same, for example, would work with a post. Because when we're looking at the post, what do we have, we have some kind of picture, we have the name, of course, we have the text, we have all the retweet options, as well as likes the comments, but the only thing that is changing is the data. So the person who is posting and how many likes, that sort of thing. So the point that I'm trying to make is that as you're looking at the application, you can see a bunch of places where we can set up a react component, and use all the awesome benefits the components provide. Before we go any further, let's also cover the main goals of the course. And I honestly there's only one or the other, the course out wants you to be comfortable with react. Now what that means to me is that you can do two things. First, you are aware of external resources. And more importantly, you're comfortable with using them. When you'd want to learn something new about react. Essentially, you know where to find useful info. And second, you are comfortable applying theory to practice by building your own project using react. Now goals are nice. But what is my plan to get your answers simple. By building bunch of projects using react? You see the course goal is not to cover every smallest aspect of react ecosystem. Since it's impossible. A course that covers everything that there is to know about react doesn't exist. While the core API of react is actually quite small. Since it is by far the most popular framework out there, the ecosystem surrounding react is as vast as you can imagine. What that means is that essentially, there will be always something new to learn about react. That's why I would suggest adopting a student mindset instead, where you're always open to expanding your react knowledge. In my experience, the best way to learn and get comfortable with language or framework is by building a bunch of projects. So that's exactly what we'll do during this course, we'll start small, our first project will be somewhat silly, but slowly and surely, we will expand on our knowledge. And by the end of the course, you will be comfortable building your own complex react apps, far as the core structure, we're going to start by setting up our dev environment. So think text error browser, or basic terminal commands, and etc. Followed by extensive react tutorial, during which we will build already some small project to enforce that particular subject matter that we're learning. And once we're done with the dorial, we'll simply put our heads down, roll up our sleeves and build a react project. like there's no tomorrow. How does that not the very end of the course. We'll also cover Redux and why it is used when I'm fully aware that the first part the setup part might seem tedious, boring, and maybe even unnecessary. Please keep in mind that it is extremely important for me that all of us are on the same page. And don't worry, we'll get to react in when it comes to course requirements. It would be extremely beneficial. If you would be familiar with HTML, CSS, and most importantly, JavaScript. I can honestly say that the more JavaScript, especially iOS six, you know, the easier is going to be pick up react. Because at the end of the day, React is just JavaScript. So if you're familiar with things like spread operator are all functions, destructuring, etc, you'll be in good shape. Now, it's not the end of the world if you're still getting comfortable with JavaScript. Just keep in mind that once in a while, you will have to do some extra studying, since it is my assumption that you are familiar with JavaScript topics. And while I will try to cover as much JavaScript info as possible, please understand that at the end of the day, this is a react course. Now, if you need to brush up on your JavaScript knowledge, or if you'd like to find out more about specific JavaScript topic during the course, I would suggest utilizing my YouTube channel, coding ionic, more specifically playlist called JavaScript nuggets, where we cover react specific JavaScript topics, I'm constantly adding new topics. So while at the time of recording, there are only three videos, by the time you'll be watching this, there will be more. So again, the channel that you're looking for is coding out. And more specifically, the playlist name is a JavaScript nuggets. So the way it works, as I'm recording the course. And once I hit a specific job topic, or example map, or unique values, or dynamic object keys, I will create a separate video about that, just in case you'd want to find out more about the topic. When it comes to our dev environment, we will need the following tools. No GS installed on our machine web browser, I would suggest Google Chrome. But technically it is optional. As long as you have a web browser, you'll be good to go. Just remember that once in a while, your results might differ. Because the browser that you choose if it's different browser other than Google Chrome, maybe I don't know displays CSS a little bit differently than a text editor. Again, I would suggest Visual Studio code, but we all have our preferences. So no hard feelings, as well as react developer tools which are not required, but will improve your dev experience in the long run. And I guess, let's go down the list. And first one, we have a node. Now in order to check whether you have node installed already on your machine, you know, thermal, you need to run a node, and then dash dash version. So you'll see where in order is installed. And if it's successful, it will also tell you what is the version. And then if you don't have it installed, then it's probably gonna say something along the lines that he cannot find the command or something like that. Where you're shooting for is at least 5.2. or later, we will use a package called create react app. And more specifically, we'll use NPM. install it. And that comes with a version of 5.2 minimum. Of course, if you have a higher version, that is even better. So in order to test that out, I'll navigate right now to my terminal on massively zoom in just so you can see what is happening. We type here node dash dash version. So of course, it's bits back then I have version 12. Okay, so I'm good to go. Now, if you don't have node installed, I would suggest navigating to node j s.org. And of course, you can just get there by going to Google and typing node. For example. Here you can say node and of course, the first link that's going to move up is going to be node js.org. And they will right away detect which operating system you're using. So in my case, that is Mac, and then I would shoot for long term support option. So click it over here. And you'll get yourself now Now I'm not going to install it since I already have it on my machine. And also is just clicking bunch of checkboxes. Then we have Google Chrome. So again, if you don't go for Google Chrome, I'm on one of the first links is going to be to a page where of course you can download chrome when we have Visual Studio code. Same deal. Just look for Visual Studio code is a awesome open source text editor from Microsoft. That is just amazing as far as the development experience, once you go to their site which is called Visual Studio Yo yo.com, again, they will detect which operating system you're using, and you can right away, get yourself a nice fresh out of the oven copy of the Visual Studio code, then we've got a react developer tools, then just look for them, one of the links is going to be right away to the extensions. And then of course, in my case, I already have it. So I would need to remove it. But in your case, if you don't have it installed, then of course, you'll have Add to Chrome. So you add an extension. And what you're looking for are the components and the profiler. Keep in mind that of course, if for example, you are at the page that doesn't use react, and of course, it's just gonna be gray, what I'm talking about this little icon, notice this react developer tools, when essentially it's going to be gray. However, if the site is using react, and of course, you will be able to see it. And then once you open up the console, so of course, you can either do it with a shortcut, which I believe was option command, and I, and there it is. And what you're looking for is this profiler, and components. Again, I'm not going to look at them right now, because it's not gonna make sense. But eventually, as we're progressing with the course, you will see how react developer tools will make your life a little bit easier. As far as working with a react application. As far as my specific text on our setup, meaning what extensions I'm using, which ones I would suggest using during the course as well, as well as my settings JSON. I'm not going to cover them too much in this video, because essentially, I don't see the point. Once we start building the React application, then one by one or I'll set up a separate video, where essentially, I'll show you all the expenses that I would suggest getting, and also what settings, we would need to set up in our Visual Studio code in a text editor. Now, if you are impatient, and if you'd want to see all the extensions that I'm using, as well as my settings, you can just navigate to my GitHub handle is john hyphen smelter on the report in the journal report is VS code setup. And here you'll find all the extensions that I'm using, as well as small description, and also my settings JSON. Now again, let me reiterate a little bit later in the course, I will cover which extensions are crucial for you to follow along, meaning which will make your life much easier as you're working with react, and also what settings you need to set up in your settings JSON. But if you'd want to see them right now, everything that I'm using, even though some extensions are not required for discourse, then again, navigate to a repo, which is john hyphen, smil. And then VS code setup. on here, you'll find my settings JSON, as well as all the extensions that I currently have in my Visual Studio code. Hopefully, everyone was successful setting up the dev environment. And now we can move on to the next phase of our setup. Normally, this would be the point where we download and examine create react to horror, there's something that I would like to cover first, and that is no other than the scary terminal, some of its most popular and used commands. You see, even though this is a react course, we will use command line on NPM during the course we might as well get some basics out of the way. Now if you're already comfortable with terminal and NPM which by the way we'll cover in next video. Feel free to skip these videos. If however, you are seeing the scary terminal for the first time. Hopefully you will not feel that way after watching this video. Please keep in mind though, we will just cover the basics. So if you'd like to learn more, I would suggest utilizing endless YouTube videos and medium blog posts about command line and its commands. First question coming out of your mouth is probably along the lines oil waters terminal. Why would want to use it for your sake. If you're watching this course it is safe to assume that you have successfully tackled the graphical interface or at least the basics. The Goj what is going well it is this Notice the icons were confined more commands along those lines. Now what are we can also do is control our computer, not just using the GUI, the graphical interface, but also the command line. And that's where the terminal comes down. I fully understand that the first time seeing this is scary, don't worry, it is not as bad as it looked like. The first command that I want to look at is B WD, which will show us a full path name to a current directory. So where are we at as far as our machine in the terminal, so we're just type B, WD. And I can tell you right away that we will be in the road. By the way, you can notice this by this little symbol. Okay, so now, where's my road, it is Ford slash users. And then Ford slash my last name. So that is my root directory. Now, if I want to see what directories I have in a folder, well, I just go by LS, and this is gonna spit back what directories I have, in my root directory, multiple my point, I'm going to navigate to my hard drive, man, I'm looking for two users. And I'm looking for my last name. And there it is. And now you can clearly see that I'm not making this up. I'm in the road, right now in the Finder, as well, in my command line. Now, if I would want to navigate to a specific folder, we would need to type cd, and then whatever folder name. So in this case, if I would want to navigate to a desktop, or just need to write this top knot, now, of course we navigate to understand. And I can clearly see that here as well. Now, if I would want to navigate one level up, basically back to a parent, I would need to go to CD, and then dot dot. Now of course, you can again, see that I'm sitting in the room. So if we want to navigate back to the desktop, again, we will type cd desktop, or also remember that we have option of using arrow key up or down where we can look for previous commands. So if I'll just press the arrow key up, notice this will give me the last command, which of course, is navigating back to the parent. However, if I press it one more time, this will spit back the CD desktop. So of course, I can run the command again, by pressing return. And of course, I'm in a desktop. Now, once I'm in the desktop, if I run LS, you'll notice that technically, it doesn't return anything because of course, my desktop is empty. However, there's going to be may be some cases once in a while, where you would want to also check for hidden folders. Most likely in our course that is going to have to do with Git. And in that case, you can run with LS, iPhone and a. So this will also show you hidden folders. Now that is a little bit out of the scope of the course. So don't worry about it too much. We're not going to use it that often. But once in a while, you maybe would want to just double check whether there is a gift as far as your folder structure. Now, once that is done, why don't we create a new directory. And to do that we would need to run MK the RTR. so here we can clear the console. And by the way, for that we have command of clear, so we can clear the console. And now in the desktop, I'm going to make a new directory. And I'm just going to call this testing. So I'm going to go with MK dir testing murders. Now of course, I have my testing folder. Now in order to navigate to that directory, again, either I would need to run CD and man purse thing. Or there's also another option where I can just type cd event space, and just grab this particular folder. So just drag and drop over here. And now notice how it right away tells me that I would navigate to users than smellier than desktop testing. So once I press over here, notice how I'm nicely sitting in the testing folder. And what else we have. We have city CD now that so that's going to navigate again to a parent and clear in the console which already we have covered. So now let's set out how we can navigate outside of course again, where we go with CD, Amanda again, we're sitting in desktop. So those would be the basic commands on the terminal. And hopefully you don't feel as scared as you did in the beginning of the video, when we install Node, we also automatically install NPM or node package manager. The reason why it's so useful is because NPM allows us to save time, automate our tasks and avoid reinventing the wheel. We do that by installing packages, or dependencies. packages can be as simple as utility functions, and as complex as full blown frameworks. And everything else. Of course, in between, keep in mind that the package we are going to use later, the Create react app already does all the heavy lifting for us under the hood. So this video is just to give you a general overview. And for the most part, you'll be just hitting NPM start on a keyboard for the remainder of the course, a command that will cover a bit later in the course, as far as general NPM commands, we have NPM minute, where is going to create package JSON. So essentially, the manifest file for our project, we're also will see a list of dependencies, then we can install package by running NPM, install a non package name, and then we would need to run the dash step. Now as far as does their save in the latest versions of node, you already don't have to run that meaning this would just save it to a list of dependencies. Or like I said, in the latest versions of node, you don't have to do that anymore. Now what I've noticed, though, that once in a while students ask the question, and they share the project. And then I can see that they have been using older version, and they have not been saving dependency. So in order for me to run their project, I still need to install those dependencies. So as a safeguard, I would suggest always using bash, bash, bash, save, just in case, I don't know, maybe your node version is out of date. Now that is going to install that package locally. Meaning in the project runner, we also have the npm install, package name, dash global. Now that is going to install the package globally. And we can act anywhere, or it comes with a gotcha where when you're doing the global install, most likely you'll be asked for permission. And of course, don't worry, I'll show you that with our example. And lastly, we also have an option of installing package only while we're developing the flag would be nice dash, save and then dash F. Now what would be the most common one, I don't know, maybe testing. So essentially, we only need that package while we're developing, then of course, we're just using it. And then once we ship to production, we don't need that package anymore. So remember that testing folder that we created. So now let's try some things out. What I'm going to do is first course zoom in, in my terminal. And then of course, I would want to navigate there. So I think the fastest way will be just drag and drop. Now, of course, I'm in my testing. And remember, first would want to create that manifest Well, again, something that create react app package we're going to use does already for us. So this is just to showcase the general setup. And in order to get our manifest file, we'll just run NPM in it. Now, there's a bunch of questions there. So if you would want to meet that you can just go with dash y, or in my case, I'm going to go with NPM in it and create a question. So in this case, what would be the package name, I'm going to call this app version. And as you can see, I can skip them if I want to, since again, this is just to showcase how it's gonna look like. I'm just gonna skip them by pressing Enter. And this shows what I'm going to currently have in the package JSON. So of course, I'm going to say yeah, that that looks okay. So so yes. And now if I check out my testing, I'll have the package JSON. So let me open my text editor here. I'll just drag and drop testing, just so you can see that of course, I have my package JSON. And there it is. So apt nine version description, what is going to be the entrance file, so the main file, and I'm just curious, it is index JS that is by default, of course, we don't have the index js. And then we have scripts and author. Now scripts is an interesting one because with create react app, like I was saying, the script that you'll use most is going to be NPM start. So essentially, these are just commands that you can run Now let me showcase how we would install a package. And we can do it directly from the text editor, or we can do it from the terminal, please keep in mind that as long as we're sitting in the same folder, it doesn't matter. And that's one of the reasons why I like Visual Studio code. It comes, it comes with integrated terminal. Now how we can access integrated terminal in Visual Studio code, we go with control until then, and notice here all the way in the bottom, I have the terminal. And what's really cool to notice out right away, gonna be in the folder. So it's not like our specifically need to navigate there, just like I would do in the terminal. In this case, when I'm opening up the integrated terminal, from the Visual Studio code, I'm right away at my project. So I'm in the first thing. Now, of course, I would want to install first dependency. And I'll just randomly install bootstrap. So we'll go with NPM, install, and then whatever is the package name, so I know that it is bootstrap. And then like I said, just in case, I'll run dash dash save. And what you'll notice is that of course, we're installing dependencies. And the moment I do it, notice here how I have early property. and the value right now is bootstrap. So now I installed this dependency. And of course, I can use it locally. Now what you'll notice is that we have node modules, this is going to be a folder, where we'll have a list of our dependencies. Now at the moment we have bootstrap. But then again, once we start using create react app, you will see that of course, since it is a bigger package, it uses more and more dependencies. So our node modules folder is going to be way bigger. Now, as a side note, when you're sharing this, for example, when you're adding this to a GitHub, your folder, you usually just add package JSON. So essentially, you wouldn't share no modules, because usually, that is a massive, massive folder. So much more easier way is just adding everything forget, but not the node modules. So essentially just a package JSON. And then once you clone or fork, or download the folder, what you can do is just run npm install, which installs all dependencies. Don't Don't worry, of course, we'll cover that a little bit later in the course, because there are some projects that are already set up for you. So the only thing you will need to do is just follow the link to the repo, get it. And then once you get the link, meaning once you clone or fork or download, then you just need to run npm install. So this would be for the local package. Essentially, once I've installed bootstrap, now I can start using it. However, remember, I also said that we can use global packages correct. Now, I can install global package from the integrated terminal. Or I can do it again from the terminal, that's up to you. The difference is that if you install package globally, you can use it anywhere in your machine, meaning you can use it on the desktop, you can use it in the project, or whatever. Now again, the gotcha with a global install is that it is going to be asking for permissions. So in this case, you know what I'm going to go to terminal just to showcase that, for example, I would be installing a Gatsby CLR. From the remember, this was a root folder, and the name was npm install. And then I go with Gatsby CLR. And then I need to go with dash G. Again, you don't need to run this command. This is just to showcase that if you won't have permissions, which at the moment I don't, since I'm not running sudo, then of course, I'm going to get a big fat. And there it is, of course, like I was saying we get a bunch of errors. So again, in order to omit that, we would need to add sudo. So I could go back to my previous command. And I would just add sudo here. And then once you're on of course it's going to ask for your password. So you would need to add your password. And then once you do course you just press enter, and then the install is going to be successful. So that's the general overview of NPM. How we would install locally and how we're set up globally. Again, when it comes to create react app, it does all the heavy lifting already for us under the hood. So the only thing we'll really need to care about is just checking out the scripts. So essentially the script commands that we have. So now we will know how to set up the dev server and also wants to know While Of course, we will install some package locally to our project, whether that is bootstrap whether that is react icons or something along those lines. There are many ways how to set up react application. By far the easiest and fastest would be using create react app, which is built by Facebook developers. And it allows us to just focus on building our apps, instead of spending our precious time on tinkering or a configuration and build those. If you're interested in finding out more about the package, just type the name in search engine, and look for the link in the repo. I would like to re emphasize though, technically, you don't need to use create react app to work with react, you can build the whole setup yourself. But trust me when I say that, in the long run, create react app will save you a bunch of time, as well as some sanity. Because while tinkering with Webpack sounds a lot of fun in the beginning. In reality, it can get nutty, pretty, pretty fast. Under the hood, create react app uses Babel, and Webpack. And while we're still on a subject, let me just quickly cover them as well. So a Babel is a JavaScript transpiler that converts the newest JavaScript into the good old JavaScript. So we're going to use all the newest features of the JavaScript language. So think things like print operator, destructuring, and all the other goodies that come with air six. on behind the scenes, Babel will turn into ears five, which in turn, will make sure that our app runs smoothly in the older browsers as well. So essentially, we can have our cake and eat it too. Well, web pack does a lot of other things as well. Essentially Webpack works as a module bundler, the main features of Webpack would be bundling our resources, watching for changes, running Babel transpiler. In order to bootstrap a fresh instance of react app, they suggest using an bx. So essentially, we won't need to install their COI tool on our machine, which is a setup they had before. And as a side note, that's why our NPM version needs to be at least five point to change we do want to use and be thorough, while we're still on subject, their previous setup was that we had to install the COI to the Create react app global are now they switch to NPM. And they're also suggesting that if you have already installed the Create react globally, so for example, maybe you were watching some other tutorial and you already installed create react app globally, very suggest that you are installed. So you need to run this command the npm install g create react app to uninstall the CLR. Because that way, it ensures that NPM uses always the latest version. Now I already did that. So I'm good to go. We're only looking for this command. Now you can grab the whole thing. That just means that your app will be called my app. In my case, I'll just copy and PX create react app. So I'm going to navigate back. And by the way, if you want to check what is your NPM version, same as with node, we just run NPM and there's dash version. And of course, I can see that I have six point 12. Now at this point, I would want to navigate to a desktop, make sure you copy and paste my command. And once I have command in place, I just need to come up with a name of my folder, and markers. I'm going to go with the tutorial. And you'll see how the Create react app starts bootstrapping your react application. Now it does take a little bit of time. So I will stop the video. And I'll resume it once all the dependencies are in place. And once create react app is done, installing dependencies and essentially setting up a ready to go react application. We can see in the terminal. There we have quite a few commands that we can use. Now again, as we're progressing with tutorial, don't worry, we will cover other ones as well. But for the time being. The one that we really need is the NPM start, which starts the development server now Let me tell you right away, that there are two places where you can run the commands. So essentially, start up the dev server, or build the production ready application, or, for example, install the dependency and an extra dependency, for example, React icon. And these two places are following where I can run all my commands. In a terminal. However, I just need to make sure that of course, I'm located in my folder. So for example, in this case, I would need to navigate to tutorial. And then I can run, for example command of MPM start, the other place is going to be our text error. Now, I'm going to run my commands in text editor in the integrated terminal. The reason why I'm showing RBIs is once in a while, some students who use Windows have complained that unfortunately, when they run their commands in the integrated terminal in Visual Studio code, they're getting some issues. So just keep in mind, you don't have to run your commands in integrated terminal. Now, of course, I will do that throughout the course, because I'm not having any issues. Once I do that. However, if you do, just remember that you can always set them up in your terminal as well. So in my case, I'm going to drag and drop my application. And then I'll right away, set up side by side a browser, because of that, just how I prefer while I'm developing. So this is going to be a fresh instance of the browser. And this is going to be our project. Now, don't worry, in the next video, we'll take a closer look on what is our folder structure, what essentially we can find in the fresh instance of create react app. However, for now, I would just want to spin up my bear server. So like I said, I will open up the integrated terminal with Ctrl tilde. And then we run NPM. start and run localhost 3000, we're going to get a brand new instance of our application, essentially, we'll see what create react app created for us. Now, you see that we have some logo, we have some text. And like I said, In the next video, we'll take a closer look at the folder structure. But for the time being, I would just want to showcase that the way that their server works is each and every time we'll make some change, if there is no error will automatically get the latest version of our app right away in the browser. So for example, if I change the text in the app, and again, you don't have to do that. But I'll change the text from the paragraph to a Hello World. So whatever I have over here, I'll just change to hello world. And you'll see the moment I save i right away, get the latest version of my app in a browser. So create react app does this cool thing of hot reloading, where essentially every time we'll make some changes, unless we have some bugs, meaning some errors than it right away, restarts the application for us. And before we go any further, let me just give you a brief overview of the folder structure in create react app. And I must warn you that throughout the video out probably you men zoom out quite a few times. So up on the top, we have a node modules. Of course, this is where we have all our dependencies. So if you remember previously, when we installed bootstrap, we essentially had only one folder. Now, of course, since the dependencies that our project has have their own dependencies, while our node modules folder, of course is way, way bigger. And of course, this is why when we'll be setting up our source control, we will ignore this folder. Now before we go any further, I just want to show you a cool thing, how the package JSON works together with node modules. Please keep in mind that is not unique to create react app. But I think it's going to be a very useful info. So for example, if I navigate to package JSON, we already know that of course, this is going to be our manifest file. And in here, as you can see, these are the dependencies that we are using in our project. And then of course, in order to start up our application, we will need to run NPM start. Now what if I delete the node modules? What if I say you know what, I don't need this particular folder. Okay, I've deleted now in order to stop the dev server And what you're looking for is control. And see, that is going to stop the desert. Now, of course, once I refresh, notice, I'm going to get a big factor. Now I'll try to run NPM start. But of course, I should get a error. Why? Well, because I don't have my dependencies anymore. So if I run NPM, start, I will, of course, get my big fat error. Now, do you think everything is lost? And of course, the answer is no more we would need to do is run npm install your list, of course, we'll just check that in the package JSON, we have a list of our dependencies, and it will just install for us. And the moment we run npm install, this will install all our dependencies. And again, we're good to go. And this is exactly what I was saying in previous videos, where once we get our project from the GitHub, whether we clone it, whether we fork it, whether we are downloading, well, of course, we just need to run npm install, because list of our dependencies are going to be there. So that's why of course, we don't need to share our project, meaning we don't need to share the massive node modules folder. So in this case, what we can do is just run NPM start, and everything will run exactly like we expect. Because of course, now of course, we installed all our dependencies back. Now after that, we have the public folder, where we'll find index HTML. Now, this is the index HTML file that is displayed over here. So I can tell right away that all of our work will do in a source. But there are some few useful things that we can do in the index. html, for example, we could change the title correct. So at the moment, I have react app, but I could go with react tutorial, and don't be scared of this file is just like a regular HTML file that we have worked already before. And if you're looking at the syntax, it also resembles everything that we have seen already in the HTML files. Now what other useful things that we can do in the index HTML? Well, we could add Google fonts, because like I just said, The syntax would be exactly the same, like we have been using already in the indexes journal, or the font, awesome icons, or things of that nature. And then, more importantly, we have all here, this div with an ID of a rope. And I know it sounds mind boggling at the moment. But this is where our whole JavaScript application eventually is going to live. I know sounds really mind boggling at the moment. But don't worry, of course, I will swing back to the road more. And we cover some basics of the React setup. So that is going to be index HTML in our public, then we have a folder that we currently don't see. And that is the build one. Remember, in the package JSON, we have the command of start. So that, of course, starts the dev servers. Now let me stop it. We also have a built unless command essentially sets up a production already built with mirror on it. And then of course, I'll show you. So NPM, run build, shall we run this command. And then of course, we will see the build folder as well. Now it's going to be very hard to tell anything in that folder, meaning if I'll open up index HTML, you'll notice that everything has been nicely minified. And essentially, what you can do with this folder is just static assets. So for example, on nullify, you can just use for drag and drop option. natla. Phi is, of course, the hosting provider that we will use throughout this tutorial. But of course, you can do it in any other place where you can just grab the static assets, that should do it for the build folder. Up next we have the source folder, where we will do most of our work. And that's why we won't cover it in detail in this video. As far as the files, we have the app CSS, where eventually there's going to be a CSS for our application. We have app j s, where eventually all our components will meet. However, keep in mind that the name is optional. You can call this shake and break it doesn't really matter is just the convention is to call this app j s. And we have the file for testing which we don't care about. We have index CSS, and of course in here again, we have more CSS. For our application, we have index j s where we will start working starting from The next video, although technically in the next video, we will just wipe out all the boilerplate. So I guess more properly would be say in the video after that, we'll start working in the index js. And even though there are a lot of things already here, most importantly, what I would want you to notice is that we are targeting that route there. Remember, I showed you in the index HTML, I said that, of course, this is where all our application is going to live. So essentially, we have index j s, we're importing the app, show app, of course, he is going to be a file where all our components eventually will meet. And we'll place our app in the root in the dev with an ID of root. That's why I said that, even though it looks a little bit mind boggling. Put all our application will live in that one div with an ID, of course, then we have a logo, self explanatory, that is the logo that we see right now. And then of course, the service worker, as well as setup test, which we won't cover in this particular course, while we're still on a subject we have get ignored. And like I said, this is a file that just specifies which files will be ignored by our source control. And of course, up on the top, you can see the node modules, which like I mentioned previously, will be ignored, because there's no point of adding them as well as the build. So build will also be ignored. Because either you'll do your own drag and drop. That's one of the options that you can do as far as your production build. Or you'll use some kind of continuous deployment, where essentially the provider, the hosting provider, does the build process for you. And then of course, at the end, like I said, there's a package JSON, where we have the manifest of our project. Most importantly, we care about the dependencies, as well as the commands that we can run, start on build, all the way at the bottom, we have README, which is a markdown file that just contains information about our project. That should do it for the folder structure. next video, we'll clean up some of the boilerplate. And then finally, we'll start working on our first react component. Well create react app is a awesome tool. One of the issues that I have, especially as we just start exploring the React world, is the fact that there's bunch of worldport since in my opinion, it will help us the most, it will start everything from scratch, I would want to do something barbaric, and modest and delete pretty much all the files in the source, apart from index js. So I would want you to select app CSS, j s, also the app does j s, the index, CSS logo, SVG, ServiceWorker, and setup test. So pretty much all the files apart from index j. s, I would want you to delete them. Yes, we would want to remove all these files. So at the moment, we just have the index js, index j s, I also would want to wipe it clean. So just delete all the comments that we currently have in the index j s. Now, of course, when you run NPM, start, don't be surprised that there will be a big fat error. Don't worry, once we create our first component, then of course, this error will be fixed. But for the time being, we just want to remove all this unnecessary boilerplate that we have in a source folder. So that should be a start, where we have a clean screen. And now of course, we can create our first react component. Awesome. Once we have removed all the boilerplate, let's kick things into gear and start our react land adventure. And the first thing I want to do is to create our first component. Normally, in order to do that, we will need only two things a import from react dependency and a function. Or keep in mind that since index js is our JavaScript entry point, will need to add some additional code. But normally, it's just react as a function. So let's start working on that. Now I'll toggle my sidebar just to have a little bit more real estate. And I'm doing that we'll use a command of command and B. Notice here now I'm toggling the sidebar in Visual Studio code. And like I said, we would need to import react from our react dependency. Now please keep in mind About the code that I'm writing, and I'm starting with the import, and I'm looking for react and learn from react. So this code is not react specific. Essentially, this is something called year six modules, where essentially, we can get piece of functionality into our file. And if you have been taking my adjust, of course, of course, you're already familiar. However, if you haven't, don't worry. Later in the course, we'll spend an entire video on taking a look at the syntax and what will be the purpose of using e6 modules. Just keep in mind, this is just JavaScript, this is nothing specific to react. Now, since react is our main dependency for a project, I don't need to go with a specific path. But later, you'll see that when we're setting up our own files, you'll have to specifically say, well, which file are you looking for? Again, we don't have our files. So normally, if it's just a dependency virus for the whole project, meaning it is in the node modules, then you simply go with whatever is the name, so I'm importing react from react. And now I would want to set up my function, because I would want to create my component. Now, there is a gotcha, meaning, I can create whatever function I want, whether it is a URL function, or whether that is going to be good old function with a function keyword. However, as far as the name for react to know that this function is special, and this function is a component, you must capitalize the name. So again, we can create a function however, we would like function keyword or a function. Throughout the course, I will switch just so you can see that of course, it will work regardless. But what we need to do in both cases, regardless which option you choose, is to capitalize the name. So for example, if I'm creating a component by the name of greeting, I must start with a capital G. And I'm going to go with name when we have the parameters, which eventually we'll use, but for the time being, we'll just leave them empty. So we go with parentheses. And then we have curly braces. So as you can see traditional JavaScript syntax, we just create a function. Now one gotcha was the fact that we needed to capitalize the first letter, so that way, JavaScript knows, or I'm sorry, React knows that this is special. So this is a component. And then from react component, we would want to return HTML. Now, technically, it is not called HTML, or you'll see that in a lot of blog posts and videos and all that. Technically, it is called JSX. And don't worry, we'll cover JSX in more detail. For now, we just want to have something on the screen. So from this function, we must, must must must return again, I will call this HTML and you'll see that as HTML, a bunch of places will keep in mind that it is officially called JSX. So we go with our return. And then we simply come up with a heading for. So that's the HTML that will be eventually displayed on screen. So I go with my heading four on here. All right, this is john. This is my first component. Awesome. Now, once I've created, as you can see, even though I saved or nothing is happening, but there's no reason to worry, because remember, I said index j s is a JavaScript entry point. Which means that, yes, normally, this is the only thing you'll need to set up the component, import, as well as the function which essentially is your component. However, since index js is an entry point, we'll need to add some additional code. And what we're trying to do, we're trying to add less functionality at the moment or whatever functionality you have into our index HTML. Remember, I said there was a div with an ID of root. So now what I would want is take whatever functionality I have, which in my case, is just this one component, and somehow somewhere injected into my div with an ID of road. Now, how do I do that? Well, I'm going to go with import than react DOM. And that is coming from other dependency. So there are multiple dependencies. You can clearly see them in package JSON. And one of the other dependencies was react DOM. So we import list from react DOM, and then react Dom has the render method. So we go with react Dom Then dot, and then we type here render. Now render method is looking for two things, it is looking for what we're going to render, which, of course, in our case, is going to be greeting. And the second thing well, where we would want to render it. And of course, that's why I showed you the now First, let's pass the greeting. So I'm going to go here with a greeting. And I'll close it out. And I'll talk about why we will need to close the components as well in a second. And the second thing, sir, we add comma, and then we go with document, get element by ID. And now I'm looking for that route. And the moment I save it, if everything is correct, I should see. Now let me double check. Of course, what happens right now, my dev server is not running. So of course, that's why I cannot see anything. So go with NPM start, I'll spin up my dev server. Now on the screen, I should see my heading four. And the text will be this is john. And this is my first component. And of course, there it is. Now it's kind of small. So let me zoom in. And I can clearly see that this is john. And this is my first component. Now the gotcha about the closing tags in react is simple. More, even though your HTML element might not have a closing tag, as example, that could be for example, image, because you know that for the image, you don't have closing tags, you still need to self close it. So what I'm trying to say, in this greeting, I cannot pass it like this. So I'm going to get a error. So in order to avoid utter, either, I would need to set up two tags like so where I have the greeting, and then I'm closing out the greeting component as well. And once I save it, notice how everything works. Or if you don't want this empty closing tag, or, for example, in the image tag, you already don't have that closing tag, then you'd still need to add this closing tag inside the opening brackets. So that's something you need to keep in mind. Because with html5, of course, we can do that willy nilly. For the image, we can include it, we can omit it, it's up to us. But in react, you must must, must must must have the self closing tag, if there is no closing tag. Let's go over the setup one more time, where if we would want to create a component, we need to import react from react, we need to set up a function, that function will be component. So this is our component, how in order for react to know that it is going to be a component, you need to set this up as a capital Kessler. So that's how react knows all right. So this is not just the regular function, this is going to be my component. And then from the component, we are returning HTML, which officially is called JSX. Because, of course, there's some nice goodies that we can do, it's not just going to be a simple HTML. And that since this is a entry point, show only in this case, and essentially, I can tell you right away that, in most cases is just going to be in one place in your application. So you only have to do it once. And by the way, if you're using create react app, you won't even have to do that. But normally, you do that in one place where you inject your JavaScript into the index HTML. And we do that by importing react DOM. And then we have a render function. And then in that function, we pass in two things, we pass in whatever we're going to render, and then where we're going to render. And then since Of course, in the index HTML, we already have the div with an ID of root. That's where we're targeting that div. And now of course, we have our first component successfully displayed on a screen. Awesome. Before we continue exploring react, now would be a great time for me to show you which extensions and which settings JSON setup is going to be really helpful throughout the course. So first, let me show you the extension that will help us to format the code. As I keep on scrolling notice here I have the extension by the name of prettier code former. Now of course, in my case, I already have installed it, but if you don't have it, you will need to install and then once you install, you can navigate to a settings. So this is going to be a GUI for sending so graphics Want to fish. And also later we'll take a look at the JSON file. But for the time being, just check for the prettier or you know what? No, you can just go for format. And then once you look for the format and a graphical interface, you'll find format on page as well as format on save. So I would suggest checking both of these boxes. And then as a result, as you're typing, premier will format the code for you. Now, what am I talking about, for example, if I just keep on adding spaces in between, basically, I just make it a big fat mess. The moment I say it, notice how prayer right away nicely format the code for me. So that will be the first thing. Now the second thing that I would want to show you is the map. So you're probably aware that when we work with HTML, and CSS, we have the option of using Emmet, which essentially just speeds up our workflow. And of course, in the Visual Studio code that is built in how when you work with react as far as JSX, it won't work right out of the box. Now one of my first of all talking about, for example, if I want a heading for, or I don't know, the div with some kind of IDs and classes, which will later I don't have to start with opening tag, and then type heading four, or article or whatever HTML element, I can just go with her in for. And right away, notice how Emma gives me the suggestion. Again, we can go the same route with article, or we can go with section or whatever. Notice how it right away creates for me. Now, of course, it's going to be way more beneficial once we start adding classes. But there are some gotchas about classes in JSX. That's why I'm not going to cover them right now. But essentially, in order to have these suggestions, so essentially, in order for you to have this option, so you don't have to type out everything from scratch, you need to go to your settings. And once you navigate there, the property you're looking for is this Emmet. Errors include languages, and then you'd want to set up JavaScript, and then JavaScript Korea. So that's the code you'll need. Again, if you just want to copy and paste the code, I would suggest going to a GitHub. Again, my handle is going to be john hyphen smelter. And then you're looking for VS code setup. Shown here, you'll find settings JSON. And then of course, this is the property that you're looking for. So if you set this up as raw, you can right away, just copy and paste of this particular value. So that will enable me in your JSX. As well as that not notice, this is going to be format on paste and format on Save. You can also add them manually, like show meaning in the settings JSON, you don't have to do that in a GUI. And then I have some particular things for the printer. For example, here, I set up only the single quotes and my JSX. But that is a row. And that is really up to you, whether that is your preference as far as the single quotes or double quotes. However, using Emmet will definitely speed up your workflow when you're working in JSX, as well. And lastly, I have this awesome, awesome, awesome extension by the name of yours seven react Redux graph qL React Native snippets. Now why this particular extension is so cool, because it saves us on boilerplate. So for the time being, let me just go back to whatever I had. Sure I don't have some kind of error. So let me save it here. Let's just create another testing file in source. So in source, let's create a new file. And I'll call this testing. Now, don't worry, we won't use it. But just to showcase how the extension is going to work. For example, if I want to create this new react component, I don't have to type import react and then set up the component. I can simply type my snippet where if I go with R, A, F, C and E, right away, we'll create it as a R function, and it's ready to go. So notice how it right away imported the React right away set up the component and you right away have the return as well. Now, don't be confused by the fact that in this case, it is set up with a lowercase The only reason for that is because we're exporting something that we'll cover later. And then once we import, then we will still need to use it with a application. Okay, sure, it's not like I was just making this up where this needs to be uppercase, you can clearly test it out. If you'll go with greeting and greeting, you'll see that there is an R. So essentially, you don't see anything on the screen. Because of course, you must, must, must must, must have this component with a capital case, again, in this case, a little bit different because we're exporting. We're not at that point yet. So we'll cover that later. But this extension just gives you a awesome setup, where you don't have to keep on typing. There's boilerplate. Now, of course, the arrow function is not the only component that you can create, you can create components with regular functions, you can create them with classes, which is the older syntax. And if you want to see what kind of options you have for the snippets, just go for the extension, keep on scrolling, and notice, you can use imp for imports, for example, keep on scrolling, keep on scrolling, these are all the options that you have here. And I think the irregular function was our FC. So this is going to be 40 class components, we're going to keep on scrolling. And eventually we should see the regular function component, Americas. So RFC is going to be just a react component, but with a traditional syntax. So if I go back, I can right away, delete everything, and instead of our a monotype, our FC, and then again, our right away export. So export, and notice how we create the same component, or in this case, it is using regular function syntax. So these are the things that I would suggest adding to your project as far as the extensions, as well as the settings JSON, because they will improve your workflow tremendously. Now you know what, by the end of this video, I can just delete the custom j s, we won't need it, as well as close my extension. And now of course, we can go back to react. Now the one thing, of course, is the fact that I will need to change this back to a greeting. Because remember, when we're setting up a react component, when we want to render it, it must be capitalized, beautiful job, once we're back from the useful extensions Vidor, now out want to make a plunge into our component. So essentially, we know we will cover imports a little bit later, we know that as far as the render, it is only in one place, essentially, where we inject our JavaScript. So now, of course, let's talk about this sucker, especially the official name is going to be stateless functional component. Now, they're also called dumb components. Because at the moment, it doesn't have something called state, something that we'll cover later. As far as the rules. And the biggest one would be that we always always need to return something. For example, if our work, and if I'll delete, you'll see that there's a big factor where it says nothing was returned from the render. Sure, you always, always must return something, even if that something is an empty HTML element. Of course, you can save it. And of course, you can see that at least, now we don't have the URL. Now, I also want to talk about this j. s. x. because technically, you don't have to type here this HTML, this HTML is to help you. Okay, I know it sounds weird, because for a lot of people probably seeing that we're returning just HTML might seem a little bit foreign. But just keep in mind that essentially, under the hood, we're still calling functions. Now, don't believe me? Why don't we do this? Why don't we set up here Hello, world. I'll create another component with the same name and everything. And I'll set it up using the function calls, just so you can see that under the hood, when we type this heading four, we're still making those function calls. Not since we cannot have two components with the same exact name, and I'm too lazy to come up with new component and then treasured over here. I'll just come under sell. And let's set up our component one more time. So in here we go with function. And you know what, why don't we do in this case, as IRR function, just so you can see that it's going to work the same way. So we're going to go here with a greeting. So that is going to be my arrow function. And then instead of returning HTML, which is to help us to have a little bit easier syntax, what we could do is go with return. And we're going to go with react, Van create element, where is the function, and this function is looking for three things, what element we would want to return, that's number one, then props object, which we haven't covered. So don't worry, we'll just pass in the empty object. And then what is going to be the children. So what is going to be rendered inside that element? Now as far as the element, I think I'm going to go with heading one. And, like I said, props object haven't covered props yet. So let's just pass an empty object. And then last thing is going to be the children. So in here, I'm going to go with hello world. And then once you save, notice, everything works correctly. So like I said, we can use the arrow function that still works, we are returning heading one, and then we're using hello world. Now one thing that when you're passing the element here, you need to pass it in the quotation marks. So when we're working with components, and of course, we don't have to do that. But then if we're passing it into the function, we must set it up as quotation marks, because then react knows that, well, this is going to be HTML. And then this is going to be the content in our element. Beautiful. Now the thing is, it's not as easy as it seems. Because at the moment, you might be well, this is extremely foreign. I rather use this function setup. Okay. Now, let me comment this one out for now. And let me show you what happens if we have some more elements. Because normally, probably, you'll have more than just one hang for. And what's really cool about JSX, I mean, we can definitely do it. So I can go with div. And then within this div, I'm going to create a new one, we have a Hello World. So of course, I can see that it works. Now at the moment, of course, there's a div. So technically, it is hard to see. But I can tell you right away that it does exist. But the gotcha here is, how would I do that here with create element? So yes, this video might be a little bit annoying, where, again, I'll come on the top. And then we'll take a look at how we can do that using the function. Well, everything worked really smoothly, when we just had a heading one correct. Everything worked out of the box. But now we need to understand that where we pass in the children, we will need to invoke create element one more time. How is that going to look like? Well, we would go with react, because that is our import, then we go with create element, then again, what element we would want to set up. So in my case, that is going to be heading one than props object, again, empty object for now. And then eventually, what is going to be a text Well, I'm going to go with HelloWorld. So you can probably already see, I'm sorry, not this was heading one, it should have been a dip, my apologies. And now you can see that it can get messy really, really fast. Because again, we're just talking about right now a div that has the heading one. Well, that's it. But keep in mind that, of course, your normal structure for the component is going to be way more Messier. That's why I'll leave this for your reference. So you know what is happening under the hood. Just keep in mind that the reason why you have this HTML syntax is so it is easier for you to set up your return in your component. Because I don't know about you. But even though it might look a little bit foreign, we're returning straight up HTML from the function. At the end of the day, what we're setting up looks way more readable than starting with these endless, endless function calls. Beautiful and previous video we covered as far as the return from the component is a j. s x. And in this video, I would like to continue because in a previous video, we learned that it is kind of like HTML, but not really. So there are some specific roles. So mine is we'll cover them right now. I will start with a first one where we always always need to return a single element. Now what do I mean by that? Well, inside the element of what we're returning You can get extremely, extremely creative. Like I said, you're gonna return the whole website. For example, I could arrive and three, hello, people in here. And after that in three I'm going to go with on our list, and then list item. And then here, let's place a link. Now just add hashtag, so it's not gonna go anywhere. And then we'll write another hello world. So I can save it. And I can clearly see that there are no issues. Everything is working like beaches. Now the one thing we cannot do is notice where we have this div, I cannot add adjacent element. Now that could be any element. But of course, just because it's going to be simpler, I'll just place a div. Notice even before I save, you'll have this red squiggly line. Well, that just means that something in your project went bananas. So if you save notice, you'll get a error, where it says adjacent JSX elements must be wrapped in the enclosing tag. Did you want a JSX fragment? Now I'll talk about JSX fragment in a second. Just keep in mind that we always need to return a single moment. Now what would be the solution? In this case? Well, I could wrap everything here in a div. Correct. So I'll place my parent live. And once we save, we're not going to get any error. Now please keep in mind One thing, though, that at the end of the day, we're still rendering the HTML, HTML, we have something called semantics, where if we just return everything as div, div, div, div div. So essentially, we're just creating a div show, that is not the best practice. So first, I would encourage you to follow the semantics. For example, if versus something as a section, then we return section instead of a div. For example, if this would be an article, we return the article. Now, of course, keep in mind doesn't mean that instead of the list item, you're going to return the article, just as a common sense, don't place everything as definitive. Now, there's no rule against it. But a better practice is to follow the HTML semantics. And one more thing, remember this little error how it said the fragment. Now, I'm going to skip ahead a little bit. But for example, if I would have the situation, by the way, let me go back to these directives. If I wouldn't want to wrap everything div, since now, where I'm creating diff Su. In react, we also have something called react fragment. How does that look like? Well, instead of enclosing everything in a div, I'm going to enclose this into a react fragment. So I'm going to go with dot, and then we're typing fragments. And you'll notice that this will create a div in your HTML. So in your final application, but also, you'll have no error. And shortcut essentially, would be just typing the angle brackets, and the closing once again, we're skipping a little bit of head. Don't worry, we will talk about fragments a little bit later on. But just keep in mind that either you have an option of using proper HTML semantics, or you can use a fragment numbers case, I'm going to remove the div that was causing the problems. And I'll remove the fragments as well. Once I said, everything works nicely when we need to talk about the attributes in the HTML. Because again, we're returning JSX. And for example, when we work with JavaScript, we can have these inline event listeners, for example, I could type here onClick. Now please keep in mind, I'm adding just a div. Normally, probably you would add this to a button. But that doesn't change the setup, where essentially in react, you're not going to write like this, you're not going to say on click, notice how since this is JavaScript, we must capitalize it. So what I'm saying here is on click, now, I'm not going to talk about the events right now, I'm just telling you that each numeric attribute that will need a capitalization, you must add it otherwise there's going to be an error. So the same will work with a class where with your six class is already a keyword, because we know that we can create classes. So on a dev, if we have the attribute of class in JSX, we cannot write class. So this will spit back error. Okay. Now of course, the error at the moment is the fact We cannot see anything. But in general, you must use class name. So that is the proper name. Now we'll talk about CSS a little bit later. Just remember, every time we talk about HTML attributes, if you need to use the camel case, you have to do that. Otherwise, it won't work. And then also remember how I talked about how we need to close out the elements, even the ones that don't have the closing tag, and even the ones that in html5, you can write without the closing tag, well, in react, that's not going to fly. So for example, around after the list item, I'm going to go with image. And notice how the image right away creates for me with a closing tag, and if all images, and if I save, again, I'm going to get error. And it clearly tells me expected corresponding JSX closing tag 40. img. Once I add, of course, everything is going to work beautifully. Once I save, there is there's no more. So the same will work for input, for example, and go with input text. Again, if I omit this closing tag, again, I'm going to have the error. And the last thing that I would want to mention in this video are these parentheses, because as you start working with JSX, you'll notice that once in a while, they will be added by the premier. And once in a while prayer will just omit them. So what are the rules. Now, technically, you don't have to use the parentheses, but I can tell you right away that your life will be a little bit easier if you do. So let me show you what I mean. For example, here I have the return, I'm just going to go with anyone and I'm going to say hello world, life is awesome. However, if for example, you will move your whole thing over here, notice how this one got grayed out. And essentially now once you say it, you will have this some icon. So technically, you can omit the parentheses, but then you always always need to make sure that your opening tag is in the same line as your turn. Otherwise, it will have that same icon. And then you will get this error. So this just saves you from running around like a headless chicken and looking for the error where the error does not exist. However, if you add those parentheses, it will be fixed right away for you. Again, prettier, a lot of times we'll just add them, or we'll remove them. So don't stress about that. But I'm just telling you the rule that if you have these parentheses, then you don't have to worry about placing this div, meaning the opening tag in the same line here, I can simply move to the next line. Again, I can go ahead and go on and then hello world. And you'll see that there are no issues. Okay, that's something that I want you to keep in mind. Again, we must, must must, must always return a single element. It is beneficial if we pay attention to a HTML semantics or we can simply use the React fragment. Then as far as the attributes, we are using the camel case, because at the end of the day, this is JavaScript when the class is already keyword. So we must use a glass now. We'll talk about the CSS in detail a little bit later on, as well as we would want to close up every single element, even the ones that are not technically required by html5. And then lastly, it is beneficial to use these parentheses because you just don't need to worry about setting up your opening tag in the same line as the return. Not bad. Not bad. We covered JSX rules. So now let's talk about whether we can unmask components. And the short answer is yes. Also, let's take a look at the reactors. Remember when we install them, I said probably won't make much sense. But now it will. Since now, we have already a general understanding how the components work. First, let's start by creating the master component structure. Like I said before, if you want, you can place your whole app in one component. However, it's somewhat defeats the purpose of why you would want to use react in the first place. Because the idea is that you can split up your application in nice separate chunks of functionality. Now in our case, of course, we're just setting up simple HTML. So now I'm going to look as you useful. But in general, it's going to give us a good idea how, and why we want to do that, for example, I have to do, I'm going to have a Heading Two, with a text of john doe, john doe, a man, I'm going to have a paragraph with the text of this is my message. And now let's think about it. So I have the greeting component, I have the heading two and I have the paragraph, I want to set up two separate components, one that just deals with heading to the other one that just deals with a paragraph. And just to spice things up, I'm going to use arrow functions. And in one case, I'm going to use implicit return. And the other case, it's going to be a explicit return, just so we can see that it is going to work regardless. In this case, I'm going to go with cons. Now we do need to come up with a name. So I'm going to go with a person. And this is going to be my implicit return. So for those of you who are familiar with our functions, course, I can add here curly braces. So of course, then I will need to set up explicit return, which we'll do in the next component, or can simply say that, whatever I'll type, well, that is what I'm going to be returning. So in this case, what I would like to return, well, I would want to return john doe, right. So either you can write it from scratch, or in this case, I'll just copy and paste. And now of course, once I render, well, I only have this is my message, because now this value is in the person. So how can I render whatever I'm returning from this component more simple. In the greeting, instead of HTML element, I'm going to go with my react component, what is the name of the component that is person. Again, remember, we do need to self close it on the monitor, save it, I have Jonathan. So of course, now we can put two and two together, that I can do the same thing with the paragraph. Again, the only difference is going to be that I would want to set up explicit return, just so we can see the difference. So let's call this message. And again, we have our function. And in here, we'll just write return. And then what I would like to return course, the paragraph, so grab the paragraph, and this is what we were returning from our message function. Now, of course, let's just set up a message right after the person. So once I save, I have both of them. But notice how we're nicely splitting up our application into separate chunks. And that is really, really cool because we can use them later, Lego blocks to build our application. And as a side note, this is a somewhat traditional way of how to set up a react application, where of course, we'll use the exports and imports and everything of that nature. However, we will set up this one component. In most cases, the general convention is calling this app, then in that app, we're going to be either 1234 or 55,000 components that will meet, please keep in mind that you can have more components in those specific components. So for example, in the person, I could render even more components, or there's going to be this app where your components will meet. And then you will import into an address that particular component again, shake and bake app or whatever you have decided to name it. And then you will render it. So this is going to be pretty typical setup. So that's how we can nest components inside other react components. And now let's also take a look at the React developer tools. So I'm going to make my right screen bigger on my open up my developer tools. And we're looking for the components. So of course, we installed already react developer tools, that is out of the way. And then we're looking for the component. And now you'll notice something interesting, where this is going to be our root component. So at the moment, we call this greeting. And then of course, inside the greeting, I have a person and the message. Again, we haven't covered props. So none of that makes sense. Or we can clearly see that this is going to be our component structure. And as our apps and examples are going to get more complicated course we will still be able to see what in a world we're actually rendering amazing work so far, and I think we'll We have acquired enough knowledge to create a simple Amazon best selling book list. Now, what am I talking about? If we navigate to search engine, just type Amazon best selling books now the word Margaret asked you to buy anything, but we will try to recreate at least some parts of it using react. Now you can pick any book you would like. But I'm gonna go with this one. Because this one is by far the most favorite book of my daughter and I have probably read this, I don't know, I want to say 1000 times. But I don't think that even close to a real number. So here, what are we looking for, we're going to go back to our application, we'll just give it a more meaningful name. Keep in mind, you can call this greeting port, I'm going to go with a book list, let's say book list internationally, there will be a list of books, then we're going to go with book list as well. And then I'll do a little bit of spring cleaning, where for the time being, I'll say that it is going to be a section on here, let's write this is a book list. Now of course, there's nothing there right now. Where we have the person and message, well, eventually, it's going to be two different components. So I'll just remove them. And once we say that, of course, we have this, this is a book. So now of course, I would want to create four components. Now please keep in mind, technically, I could just set up one where I have the book. And the book, I could have the image are going to have title, as well as the author. Now I'll purposely put this up into three components, meaning there's going to be book component, and then in there, there is going to be three separate components, one for image, one for title, and one for author, just to showcase how we would mask those components even more. And then later, we will refactor it back to one book. And this is just to showcase that it is up to you how you want to structure your application. If you want to create everything as a component, you can definitely do it. Or you can just place everything in one book component. So where we have the book list, right after that, I am going to create another component. Now in this case, though, I'm going to use our function. Again, you can use regular function if you want. But I'm going to go with our function, we have our parameters, we have implicit return. And then as far as return out, want to return the article, another HTML element in there are going to be three separate components. For time being, I'll just say this is a book. Okay, we save that. And then where we have book list, now what we could do is just get rid of this generic text and say that I'm looking for the book. So once I save it, I have this is a book. Now what's really, really, really, really cool about react is that I can add multiple instances of that book. So if I start just copying, pasting the same instance of the book, notice how here, I'm getting these values as well. So what that means is that the moment I'll change something in my book, but of course, it will affect all the instances that I have. So here, I'll say this is a book of churches around to this is a car. Now, of course, it's not gonna make sense. But you'll see right away that all my instances in here are changed, which is really, really, really cool. And of course, I'm gonna have 5000 of them, I could one of them, or now, three of them, or whatever. And then later, we'll take a look at how we can render with a different input, because we need to understand that of course, at the moment, we'll just hard code this one value, but it's already really cool that we can multiply it on the fly, and then change it in one place. Because notice, it's not like I had to hop from one place to another one. To change this text. I just set up the components are copied, how many times I want. And then once I change something in here, that's it, all the instances will be affected. Now, I will go back to my one single book. And like I said, it's gonna be a little bit of overkill right now. But I'll set up three separate components. So here I'll call this image or just try and push it return because why not? So we'll return a wrench and in To get that image, just click on it, and you're looking for the copy image address, that's the one you need, and then place it here in source. Now as far as the alternative, I'm not going to worry about it. And then where we have the book, instead of this is a car, which totally doesn't make sense. Now I'm just looking for this image. So like I said, even though this is a component, I can match even more components. So I have a book, that is the render in a book list. However, in the book, there is going to be three separate components, let's say with a murders. Now, of course, I have my image. Now, what's next? Well, now what I would want is to grab a title, as well as the author. And again, it's going to be a little bit of overkill, but we'll create two more components. So let's call this author course, we will need to set up our return. Again, you want implicit, you can set up implicit, if you want explicit, you can set up explicit, I think I'm going to go with implicit, where I'm going to go with heading one, by the way, I need to have this fat arrow function. As far as the value let's just already not, didn't copy. So let me grab this one. By the way, I think I was going for the author, my apologies, I think I'm gonna have to rename this, it's not going to be your author is going to be a title, my bad. So there's my title. And then right after this image, I would want to add my title. So that's, of course, my title component. And there it is, now I have my coupon. And lastly, of course, let's also the author, show, we're going to go with cons and then author, again, implicit, explicit, whatever, you can set up a traditional function if you want, and then we're looking for this value. So let me figure out how I can copy that work. So I don't know I'm going to close this and heading for copy and paste. And then of course, I'll do the same thing over here, where we're going to go with an author. Now once we set this up, notice, I have my book component. In that book component, I have three separate components, one for the image, one for the title, and one for the author, I'm on where I render my book, he found crazy knowledge. Now, of course, we have these multiple instances. And we already saw the moment, I'll change something around here, it will affect all the instances where I render my book. And my opinion, it's really, really awesome, because as you can see, we can nicely utilize our component structure where we can have as many instances as we would want, but we control them in only one plus. And the moment we add those changes, all the instances will be affected. Nice work, we've got our list. Now granted, there's a bunch of hard coded values. But of course, we'll fix that a little bit later. Now I'd want to focus on the presentation because it looks somewhat okay. But at the end of the day, it could look a little bit less hideous. So essentially, I would want to set up some kind of grid layout with some columns, and maybe a better coloring as well. And in the process, we'll take a look at how we can add CSS to our react project. Now, I also would like to mention that this is going to be the only video where we will type out the CSS remaining of the course, since it is a react course at the end of the day, all the CSS is already prepared, whether that is going to be the examples or project or whatever. Or in this case, in this video. Yes, we will type out CSS properties. Now, if you're not too familiar with CSS, don't worry, just type them along and we will be in good shape. So we've got our project now, here find navigate to a new tab. And by the way, I think I failed to mention that if you'd want to see your project, you'd need to navigate to a localhost 3000. So essentially, when the dev server spins up the server, the port is localhost. And then 3000. That's the one that you're looking for. If I open this up, of course, this is what I see. I see a list of books and like I said, Our just want to take a look at how we can add CSS. So we have some minimal grid layout with some columns and maybe a little bit different styling as well. And if I take a look at my project, yeah, of course I have the React tools and that is very useful. But of course, I can also inspect the elements correct. And what I see here is the root. Like I said, this is where we Polish our app. And then we have a section, since that is my tag, and then I have the article. And this also underscores the point about those divs. It's not like they will disappear, the more lives you will place over here, the more harder it's going to be, of course, for you to navigate around your project, because you will have div div, div, div, div, div div. So again, I'm returning to that point, but I think it's quite important. And of course, as you can see, as I'm hovering around, these are my items. So we could put two and two together, we have the HTML. Now how do we usually add CSS, we create some kind of CSS file correct. So let's navigate back to our project. We're looking for my source. And we'll create a new file. We can call it whatever we want. But, of course, convention is that if this is the file for images, and I might as well call it index c, s s. So once I created this file, let me just add some general styling. And then of course, we will need to figure out how we can attach it because I can tell you right away whatever changes we'll write right now won't affect our project. Because we haven't connected to now what I would want is to set up basic reset, where we've got a margin zero, than padding zero, padding zero, was up a box sizing to be a border box box sizing to be border box. And then let's also target the body with some background and the color. So we're looking for the body, then font family, and here, I'll go for a system font. So let's try to get the system font. And also let's add a little bit of gray background. So we go with background. And then we're looking for hashtag, f one, f five f eight, macho. And then lastly, I would want to add a color for all my text hashtag tu tu tu, tu herbertson. Beautiful. Now once I've got this, of course, how do we connect it? Well, the same how we were importing our code, meaning functionality from the dependencies, we also need to import our CSS. Now, the gotcha here is following, where if it's going to be a JavaScript file that we haven't covered, of course, we'll cover that a little bit later, then we don't need to add the extension. However, if it is a CSS, you need to provide a full path. So if I'm going for CSS, I'm still going 40 import, then I need to use the relative path, because this is not my projects dependency anymore. So here I'm looking for specific file. So I go with a dot and then forward slash. Now what that means, or that means that the file is in the same folder. If it's going to be one level up, then we're going to go with two dots. And of course, we'll take a look at that example, a little bit later. For now, this is a relative path, there's just says that this file is in the same folder, so dot and then forward slash. And like I said, either that would be a JavaScript file would simply would write a file name. So file name lecture. However, if this is a CSS file, then we need to go with index, and then dot and then CSS. So full extension. Now also, of course, with JavaScript file, we'll probably import something from there. In here, we're just grabbing everything. So I'll save. And we should notice some changes. And of course, we do. Now see how the margin is not there anymore, the padding, also the background changed a little bit. And overall, it looks a little bit more presentable. So that's an awesome start, we know that we can start targeting the elements. And of course, since I know that I have these heading ones, I could simply say something like that color, and then a red and beautiful. And now all my heading ones, of course are going to be red. Now that's a little bit drastic. So now let's take a look at how we can work with glasses. So index js, remember I said class, we cannot use. So if I go with section, and then say here, simply class, and I don't know, I'll write this as a book list. You'll notice and I'm gonna go to a bigger browser window is going to be easier to see. If we take a look at the console. We have warning invalid Dom property class. Did you mean class name? Sure. We always always need to use a class name. So we go back, we fix it. And now we have a book list. Again, please don't worry about the CSS. This is The only time we have to write CSS, but essentially owD, one, set it up as a grid, once we get to, I don't know 768. So now of course, I added my class to my section, the book list, just like I would in a normal index HTML, CSS project. Online, of course, I need to target it in CSS. Correct. So we go with booklists, I'll add a little bit of width. So 90 view with van, we're going to add max width to be 1170 pixels, we're going to add a little bit of margin top bottom five are yams, but I would like to place it in the center. So we'll also add auto, and we will set it right away as grid. And I'll add some gap in between, so say gap to REM. So that just means that for my rows and for the columns will have to REM as far as the gap. Okay, looks already a little bit better. And now let's set up quickly that three column layout once we get to 768, so we're going to go with media screen. And, and in here we're looking for men with men with and that will be equal to 768 pixels. Awesome. I'm looking for my booklist again. So that's the class that of course, added to a section. And I'm looking for grid, template columns. And we're gonna go with repeat, and three on one fraction. So essentially, once we navigate to a bigger screen Veritas, we have our three column layout. And of course, let's add a little bit more styling here for the book itself. Now, what is a book? My book was that article correct? Again, let me go back here, my road. In the road, I have my list. And then I have all these items. Now, of course, I'll need to add a class on the article. So I can target them when we navigate to images. Now where I would need to add this class, you added here where I'm rendering the book, or where I'm setting up the book. Of course, the answer is where I'm setting up the book. So we go with article, class name, and that will be equal to a book. So now in the index CSS, right after our media query, we go with book, our different background. So we're gonna go with hashtag fff, so white border radius, I don't know, I'm gonna go with the one REM, and that should do it. And then also, I'm going to add a little bit of padding. So we're gonna go with padding to be one REM, to RPMs, like so. So that's our padding. And then of course, I could also target the heading one. Now, the reason why I'm showing you the heading one is not because I really want to work on the CSS. It is because in the next video, we'll take a look at another way how we can do styling in react. So let's just target in this time, heading one. Now, again, I can target all the heading ones if I want, but a little bit more precise would be going for the book, and then heading one. And then I'll just say margin, top to be equal to 0.5. REM. And that's it. Now, of course, we add the margin. So that probably is the most straightforward way how to add CSS. However, of course, keep in mind that this works nicely. If you have somewhat of a small project, the bigger the project gets, then of course, you need to start spinning your wheels. Because still same issues apply as far as, for example, name collisions, or you cannot reuse the same name, essentially the same rules as with CSS. So that's usually when, for example, solutions like CSS in j s come into play. And yes, we will cover that a little bit later since I will use that solution throughout the course, because that's just easier for me to add all the CSS that we'll use. But this is definitely one of the options where we create a index CSS or app CSS, whatever CSS file you would want. And then in there, we add our classes, we add our roles. And then of course, the only thing we need to do is include that file in our index JS or abjures or whatever. And once you're included, then of course, if you're out these classes, if you have those styles, they will right away affect your project, just like in a normal HTML CSS project, while adding your CSS from the CSS file is definitely an option. We also can do it directly in the J s x now For my example, I will pick my heading for, just please keep in mind the same rules would apply for heading one, or image or article, or whatever HTML element we are placing. Now of course, I'm doing air quotes right now around the HTML element, then of course, it is a JSX. And the way we do that, we need to add a style attribute on that particular element. So I'm going to look for my heading for, and I'll type here style. Now in the following videos, we will take a look at what it actually means as far as the JavaScript. But for now, just remember that if you would want to access JavaScript world, in the JSX, you would need to set up your curly braces. Now, why am I setting up these curly braces? Well, because in order to set up a values for the style, the gotcha is that you need to have a JavaScript object, meaning object, and then all the properties are going to be as a JavaScript powers, like you would have in the object. And you'll see what exactly that means in a second. Now, why am I telling you all this is because once I'm in the JavaScript world, here with these curly braces, of course, in order to create an object, I would need to set up another pair of curly braces. And a lot of times for students, this is confusing, where they think that this is somehow a special syntax. In fact, it's not, it only means that if I set up here, these curly braces, I'm back in just one. So for example, I can type whatever I would want, as far as JavaScript. Now, of course, that whatever in this case is just an object. Okay. That's why we have these double curly braces. So for the first ones, we go back to JavaScript world. And of course, we will cover the other things that we can do as far as JavaScript in the following videos. But for now, we only want the object. So that's why we have another set of curly braces. So what we could do is, of course, set up the style. And like I said, this is JavaScript. Now what that means is, you cannot write properties like this, because you're setting up a JavaScript object, how that would look like, well, for example, if I go with color, it's somewhat straightforward, where Nat is my property, notice, I don't need to capitalize it or nothing like that. However, as far as my value, I cannot simply go with one REM. Notice, it spits back error, because in JavaScript, of course, we have properties and then values. So in this case, all your values must be in quotation marks. So in here, if I go with hashtag, and then 617. And then I'm going to go D nine, eight, of course, I'll change the color of my heading four, then I would want to go with font size. And this is the case where I will have to capitalize because again, I cannot write font and then hyphen size. Now I have to go with font size. And again, the same thing, values must be in quotation marks. So we go with zero point 75 ariados. So a little bit smaller. And then also, let's add a margin to the top. So we're gonna go with margin, and then grand, we'll set it up to be zero point 25. REM. So once we save it, notice how we nicely apply both styles. Now, one thing we need to keep in mind, though, that when we add the styles are this way, so directly in the JSX. This is set up as inline. So what that means is that of course, we know that when we set up something inline, and notice this is what I'm talking about. Then, of course, if I'm targeting the same element from the CSS from my index, CSS in this example, of course, rules, whatever I'm applying are not going to be added. Why? Well, because inline CSS is more powerful than the one that's coming from the CSS. For example, if I would go here and say book, a man, what I was using, I think heading four. If I'll try to change the color, so color to red, you'll see that that is not possible. That's not going to work. However, if it's a property that of course I haven't added, like for example, letter spacing, and I'll set it equal to five pixels, when of course it will be applied. So what I'm trying to say is that Be careful when you start adding the CSS here in the JSX. This will right away go in line and once it goes in line, it is stronger than the CSS that you're adding from Your specific CSS file. Now, why am I telling you that because of course later, as you're progressing with react, you will start using some libraries. And a lot of times in those libraries, there are some properties that are already added this way. So when you're targeting from CSS, it looks like you're not applying those properties. But always, always double check whether the library that you're using hasn't already added those styles in line. And then of course, you just need to figure out how you can override them. Okay, so that would be another way we can CSS in react. And that also underscores Another point that I would want to make. One thing about react is, there's always multiple ways, or you can do the same thing. So my job is to show you what other options and then your job is to decide which route I'm going to take. And I would suggest a judging that on your experience, and on your project, not on whatever the influencer is saying on Twitter, because at the end of that you are going to be one working on a project. So my preference, of course, is at least setting up in the CSS. Now in general, my preference, of course, is using CSS engineers. But that is my preference. That doesn't mean that it is some kind of rule. No, it is just my preference, because I find it easier to work in the CSS, and then just add classes. If you prefer this type of way. There's nothing stopping you from applying your styles of this way. Not bad and bad. We now know how we can add CSS to our rear project. But in a previous video, I mentioned that you in order to access JavaScript world in the JSX, we need to add these curly braces. So let me expand on that. So essentially, we're going to take a look at the other options we have as far as adding JavaScript directly in our JSX. Now before we do anything, though, I would want to do a little bit of spring cleanup, just because I'm looking at the file, and I think it's getting quite busy. Now at this point, I will switch from these three separate components to one component, book component, and all my return in there. Again, that is up to you. If you want to keep everything a separate component, you can definitely do it. My goal was to showcase that no one is stopping you. But in general, my preference is not to go too crazy. As far as splitting up certain here, the only thing that I would want is Where have all the returns. So I'll just place them here. So for example, in this book article, I'm gonna have the image, I'm gonna have my heading one. And also a little bit more things in here. Now, in here, of course, I placed it side by side. So right away have the error. And then as far as the styling, that's not usually my preference. So I'll just remove it altogether. So our more style, please keep in mind, you always have a reference to the files we have been working on. So here are right off 30 hanging for more heading one, I'll place my heading for our move my components that I have, will save. And then of course, I'm going to go back to the CSS that are added in the previous video shown here, of course, we just need to change it, where if I remember correctly, the color that I had was hashtag. So let's go back hashtag, and 617. And then D Nine, eight Vann letter spacing, I'm not going to add that on, by the way, muster up here, so it's not f it is six. Um, what else font size, I guess was different, right? So font size, we're looking for zero point 75 volumes, and also add a little bit of margin to the top margin top, and we go with zero point 25 volumes. That's it. Now, of course, we set everything up correctly. So back in the images. Now let's take a look at what else can we do as far as the JavaScript, because in a previous video, we had a look of how we can add a CSS. But of course, we can do way more than that again. In order to go back to a JavaScript world. What do we need to do is to have curly braces. So now I would want to replace this heading one with some kind of variable value. Now I'm going to start here where I'm gonna say const and Title Nine is going to be equal to whatever text I have. So I love you to the moon and back. Of course, I'll set this up as a string, shell copy and paste. And in here, once I go back to the JavaScript world, how do I access the variables in JavaScript? Now simply, I just write a title, correct, because that is the name of my variable. So now, of course, I'm not hard coding this anymore. Because in here, this is sitting in a variable. And if I'll just start adding SS here, of course, you can see that this value, also right away changes. And if you want, of course, we can keep this outside as well. Now are you always going to keep the variables inside the function or outside? Well, that depends, a lot of times you'll be getting this as props, something we haven't covered yet, show, it really depends, I'm just showing you the options where you can store those variables for this particular example. And if I would want to have the author, I'm going to create another one. So there's going to be a variable outside this time, just so you can see that it will still work. So let me grab this value. And then of course, I'm going to have my author, or XL. Now wonderful about setting up JavaScript here in the JSX, that it must return a value show, it has to be an expression, it cannot be a statement shown here. Let's create a paragraph. Let's just test that out. So we have here a JavaScript, but I'm going to write a statement. So I'll say let x is equal to six. Now the moment I'll save it, I will have a big fat error, where it's going to point to a lot. So essentially, we always need to pass something here that returns the value. So now let me comment this out. By the way, the way we comment out in JSX, we have curly brace, and then we have forward slash, and then the star. Now, I'm using the shortcut, which is command and then forward slash. But if you want to check it out how to actually do that as far as your setup, then look for the Edit. And then you're looking for this toggle line comment. And as you can see, in my case, it is a command and then port slash, that's the shortcut that I'm using. Also, as a side note, if you want to check out all the shortcuts that you have, and the reason why I'm showing that because not everyone uses Mac. So of course, some are a little bit different for the windows, just go to Visual Studio Code near will open up in a new window. And by the way, I'll open up also right away a new browser window. And then once you open up before you drag and drop anything, just look for printable keyboard cheat sheet. And this is where you'll find for your operating system. Now I'm not saying that you need to sit for one month and memorize them. But for example, if you'll learn one keyboard shortcut today, trust me it will overall improve your workflow tremendously. So that is a quick side note. And now of course, we're heading back to our project. So that's how we're coming out, we cannot have here a statement. But if we'll set up a expression, everything will work. Now, if I'll try to do the same thing, for example, with a paragraph, and in here, I'll pass six plus six. Now, of course, I'm returning a value. And as a result, I'm going to have this 12. So that's how we can work with JavaScript in the JSX. So we set up here, curly braces, that means we're going back to a JavaScript plan. And Land Of course, as long as we're setting up expression, we're good to go. Now, of course, we can do tons of cool things in here. For example, I have the author. Now, what is the property, or I'm sorry, what is the method that we can use on a string, we can go to, for example, uppercase correct, I could just invoke it. And I'll see that my value right away is invoked. So these are just a few things that we can do. Now that we know that we can set up JavaScript in our JSX. Essentially, you can see that we right away make our JSX way more dynamic. That just means that we don't have to hard code everything. amazing job. Now that we know that we can access JavaScript in our JSX course let's take a look at the props. Wire would want to props. Well, even though I could set these ones up as variables, I can pass them when I'll copy and paste The book essentially went on have multiple instances of the book, at the end of the day, they will still display the same result. So now I'd want to take a look at how we can change these values here, depending on whatever we are passing in. Now I'll start by moving all my variables, right after the CSS. So I'll say here, set up bars. And then I'll do the same thing for the title. So I'll push it over here. And you know what, I'll do the exact same thing with an image. So call this const. And an IMG. And that will be equal to whatever value I have or here, now right away copy, a string is going to be easier copy and paste, I have author, title image. And now of course, where I have the source. Again, I go back to JavaScript land. And what is the variable name, that is I am G. So once I sell it, nothing breaks, which is beautiful. When our remove some of the stuff that we added in last video, I don't think it is necessary over here. Let's remove both of these things as well. So now we go back to our standard setup. So once this is done, well, how we can pass something unique over here, because like I said, or copy and paste. Yeah, it works really well, we get the same instance. And everything is beautiful. But the values don't change. Now, book is a function. Correct? Now, what do we know about functions in JavaScript? well know that there are parameters or arguments. So if I would have simple function, if I set up some kind of parameter, for example, name, and then if I pass it in, and of course, I can use it in my function. So can we do the same thing in react? Now, let's say, and you can probably already guess that. I'm suggesting that that most likely, we'll be able to do that. Otherwise? I mean, I wouldn't be kind of mean, wouldn't it? Okay, so I have my book component, which is a function. Now where do we write usually parameters? It is right here. Correct. So let's write a parameter name. Now, all right, this is a prop, because that is a general convention. It just stands short. For properties, we usually pass in. However, you can call this shake, and bake, and bake, or whatever you would want. Okay, just keep that in mind. And of course, we'll take a look at the example a little bit later where we call the shake and bake. So we've got our props. Now, of course, I want to console login, because I want to see, well, what is this value here? What is this props, and I can console log in two places, I can do it above the return. And I can just say props, just make sure that the name is exactly the same. So if you're trying to test it out that you can call this whatever you would want. So if you wrote here, bananas, don't console log props, console log bananas. And also I can do the same thing here. Correct. Because remember, in the JSX, we could console log, meaning we can go back to just bland certain here. All right, perhaps, as well. And we'll notice something interesting, where if I inspect in my console, I have object object object. Okay, what's happening here? Well, there is an object. Now the cool thing now is that, of course, I can access that object. But obviously, the next question is, how can I pass something in here, I do have the object. That's why you can see that we can name it whatever rude. One can be banana, she can be shaken, bake, whatever. At the end of the day, it's always going to be an object, our convention is using props. So unless you want to be a real rebel, I would suggest sticking to that convention. And you're not I think there's too many console logs at this point. But beautifully, we can see that it is an object. Now. Well, in order to pass the sin, we need to go back to where we are rendering the book, not where we're setting up your access, or where we render the book. This is where we need to pass it. And the way we pass it, we have a prop name, and then whatever value. So if I'm going to go here with a random problem of a job, and if I set this up as a value of developer, you'll notice that now when we go console log, we have job. And then we have developer. So that's it. Awesome. Now, of course, we can access those values. Now a few things that we can notice here. For the second book, I'm still console logging the props. However, I didn't pass anything correct. In here, course we have the job with the value, how in here, or just have the empty object? That's why the second console log essentially is just an empty object because I didn't pass him. Can we pass something in? Yeah, I can say title. And I'll call this random battle. Ram, can we pass for example, a number? Yeah, I could go with number, where price or whatever. And I can just say simply over here, the value will be equal to something. Again, I go back to JavaScript, because again, this is still JSX. For the time being, I'll just pass in 22. So now notice, for the first one, I have job, and developer, that is the property and the value in my object. Horror, for the second one, I have a title property, the value is random title. And here are passed in a number property with a value of 23. So what I'm trying to say, as far as the value, same as with JavaScript, we can pass the values here in props. Now the next question, of course, is now how we can access them. There's multiple ways that we can do that. That's why we'll split this up in multiple videos, but the most basic one would be using the same name that you used over here. So again, if I go, shake, and bake, I'll still be able to do it. Keep that in mind, but you use the same name. And now of course, we are just accessing those properties, just like in regular react. Now, I did not pass my correct values as far as author, title and image. So for the time being, I'll just create two paragraphs will show you how I can access those values. So in here, I'll say that I'm looking for props and a job. And then we'll see two things, we'll see that for the first value, we do have developer. So that is correct. But then for the second one, we have nothing. Now why is that happening? Well, because I did not pass the prop by the name of job for the second one. So that is what is going to happen when the prop is not there. So if the prop is not there, it just won't be displayed. However, in this case, I have the title for the second one right here, copy and paste. Again, I'm looking for props and then battle. So now of course, this will be displayed on the second one, but not on the first one. So hopefully this makes sense where when you're setting up a list, of course, you need to make sure that the props that you're passing actually match to whatever you're looking in the component. Correct. So if for example, in the component, I'm looking for job, and make sure that all your instances have that job, because if that value won't be there, well, you just want displayed on the last one, let's go with paragraph here. And again, we'll look for props. And then what was the property that I was looking for, not as of course, the number, of course, I'm passing in the number of murders, right, so we can start making these values more dynamic, as you can see, because we're accessing the props. And, of course, when we're rendering the book, we pass it in again, we have proper name, and then the value. And now as I'm looking at my values over here, calm, we set this up as two separate objects, where essentially what I could do is for the first book, pass the property values from the first object, where of course, I'm going to have my image, my author and title. And then of course, we will do the same thing for a different book. Now let me look for a short name. I think I'm going to use this one, because I just don't want to copy too long of a name. So let's do that. Let's refactor these three values into a object and let's call this first book. So const first book, that will be equal to our object. And then again, we have a bunch of properties. I'll start with an image and I'll just take these values. So cut it out, copy Based on what else we have course we have the title. So we're going to go with title property. Man, what is the value it is this one over here we have the last one of the author. So we'll go with author, and also this equal to whatever value I had. And now, of course, I would want to access them. Now keep in mind, we could have access this as a straight up variables, like I just had them before. The only difference right now is going to be that of course, I'll set up proper props. So in here, let's start with IMG. So that's my IMG prop. And that will be equal to first book, because that, of course, is my object name. And then property value is IMG, a man where I'm accessing the props right now, I'm not going to be looking for job title number, since I will remove them however, for the image. And we're going to go for props. And then I'm looking for the I am G. Now of course, again, I'm grabbing whatever I have, in the first book, I would need to do the same thing for the title. So again, the proper name is title. Again, we're going back to a JavaScript land. And in here on maxon, first book, I'm not I'm looking for the title. So I'll say first book on land title. Again, let me emphasize something where it doesn't have to be an object, we could have just access the properties. But since I would want to set up two of them to object since I would want to have two different values. That's why of course, I set it up as a object. And last one was the author. Again, we have the proper name, which is an author, and then we look in the first book, and then the property we're looking for is the author. So now of course, I can remove these ones, they were just for testing purposes, and then just replace where I have the props, more preferred title, where I have the author, I'm looking for the author. Now the problem right now is going to be that Yeah, the first one is displayed nicely. However, for the second one, notice, I'm just passing in some random values. So like I was saying, Yeah, we can pass whatever props you would want. But keep in mind that if in the component, you're not looking for them, Well, nothing is gonna happen. You can pass all day long, but nothing is going to be around. However, if the component is looking for specific prop and you're not passing, notice, I cannot see the image. So what we would need to do, well, eventually, we'll set up a list and we'll iterate over the list. Now all that is coming up. But for the time being, what I would want is just copy and paste. And we'll write a second book. Now why am I setting up a second book because now of course, I would want change of those values, shown here, I'm going to go for copy image address, and we'll replace it. We're going to copy and paste. So this is going to be different image, then, of course, I would want also get my name. So let me see. Now, of course this navigates here. So I guess I can just copy and paste from here, or so. So let's navigate back, we're gonna go with a different value here. And of course, I also would want to get a author. So let me somehow copy and paste, comprehend, praise the author. And there it is, now we have this value. So what we need to do right now for the second book, is pass these values as well. But remember, of course, now I'm looking for the second object. Now I could technically look for the first one. But it somewhat doesn't make sense, since I wouldn't want to be that. So I'm going to go with IMG. That will be equal to a second book. And then again, I'm looking for IMG property. Then the same goes for title when I'm looking for title. And then I'm looking for second book under Title. And the last one, of course, you can probably already guess we have the author. And then we're looking for second book, the author. And once I pass in these values, notice I have my first instance. All that is beautiful. And I have a second instance where I'm getting those unique values. So we can already see on nicely, we can start creating these lists where Yes, they all will be displayed the same way. Because we made sure that when we're setting up our component power, because we have something called props, we can start passing in unique values, where we have prop name, and either we can hard code here, Mike We did in the beginning with a string, either we can set up a variable, or we can set up objects or arrays or whatever, and then pass it as a value here as well, since when we set up curly braces, we're going back to a JavaScript land, couple of roles, we can call it whatever we want. But convention is calling it prompts. One way how to access it is just by looking in the object that we're getting. So we'll go with the props, and then whatever name of the prop. And the last thing is that if you pass in some Prop, that you're not looking in a component, nothing will happen. But if the component is looking for the prop that you're not passing in, essentially, you'll just have the empty space, Sharon's component is going to be looking for the prop. But the value will be undefined. mostly done. While we're still on the subject of the prompts. I also would want to show you two alternative ways how you can access them. And they all have to do with the way we destructure properties from the objects in JavaScript. So if you need to study up on that, please do so. Because again, this has nothing to do with react, it is just a JavaScript. Where if fine now was that I have this props object. And if I don't want to repeat myself, where I go props dot props, dot props dot, I could just the structure of the properties, where I can go with cons or what. So in my case, I'm going to go with cons. And then I'm just going to signal which properties out one. Now keep in mind, though, that of course, I still need access, the same thing that I'm setting up as a perhaps, in my parameters. So these names need to match. Otherwise, it's not going to work. I'm not, I'm just going to say yeah, I would like to access image, I would like access title, as well as the author. So I go with IMG, then the title, and then comma, the author. And once I have access to each and every property in my props object. Now I'm going to select multiple cursors. And I do that by pressing option, and mouse. And then of course, I will remove the props, I don't need them anymore. And as you can see right now, on accident each and every property, and everything is still render. So that's one of the options we can do on Also, if you're familiar with structuring, you also know that you can do directly where you're setting up the function parameters. So here's what I'm saying right now. I'm saying yes, I will get a object, I know that my props, of course, is going to be an object. And I will destructured here in the parameters instead. So I don't even need to set it up equal to props. Because now I'm just saying, Yeah, there will be a props object, and this props object is going to have these properties in there. so we can simply say, IMG, and title and the author. Now please keep in mind that both of them are exactly the same. So the result is exactly the same. These are just the syntaxes that you'll see around where some people prefer doing destructuring. Here, where did you set it equal to an object, or you can do it directly, where you're setting up parameters. Again, if you need to jog your memory, please check object destructuring in JavaScript, because this is not react Pacific centrally, this is JavaScript. And if you are familiar with object destructuring, you're know that of course, we can destructure even more nested structures. In here, I'm not going to create a more complicated example just to showcase that. But I will just want to let you know that if you are familiar with that, that yes, the same rules would apply more. For example, if in the author, I would have more properties, essentially, if the author would be an object, I'll just place a colon, and then I'll keep on structuring. And yes, we will do that in some of the later projects. But for now, just remember that if you don't want to shut up props object in your parameter, and then access each property by typing the props, and then dot and props, and that you can either destructure them inside the function body, where you just look for specific properties that are in the object and markers, IMG, title and author, or we can simply destructure the props object in the function parameters. And while we're still on the topic of props, I also would like to talk about the special prop called children. So this is going to be the case where please don't name this mama juice. Okay, this is not the case where, as usual, I say, yeah, you can name it whatever you'd want chicken, bake uncle Bobby or whatever. In this case, the name has to match exactly. Now, what am I talking about? You see, the children prop is everything that we render in between the opening and closing tag off the component. So for example, for the first or second book, you can pick whichever you would like, I would like to add the description. But again, the gotcha over here is that only one of them will have that description, not all cars, evil would want all of them, of course, we just need to add that property in the object that I'm looking for the Prop, I set the value, and I'm good to go. Now, this is going to be the case where only one of them will have that description. So I'm going to go with the first one. But as always, you can pick whichever you would like. So of course, first, I would need to change this around where I'm not going to be self closing, because children prop will be here, in between my dogs. And I'm just going to go with a paragraph on I'm going to use a lorem ipsum. So in Visual Studio code, you just need to type Lorem. And how many words you would like sir Marcos, I'm going to go with 20. Now the moment or run it, notice how nothing changes, I don't see any difference. So the paragraph is only for the first one. But there's no difference on what is rendered, show how I can access whatever I place in between. And keep in mind, again, you can place here, the whole project doesn't matter. In my case, I just placed one paragraph with 20 words, but you can place your buttons you can place your forms, whatever you would like place to in between the opening and closing back. Now the better question right now is, how can I access this. And the thing is, I already destructured the props object, where I said that I'm looking for the prop prop and the author prop. Now the children prop is on the props object, I can tell you right away that it is there. So what I could do is just write comma, and then children now Don't worry, I will refactor a little bit later. So essentially, that way, you can definitely see it. But for now, just look for children. And the name again here is important. What you'll notice that since again, we can access JavaScript can just place children wherever I would like. So once I run it, notice. Now of course, everything is displayed correctly, because this is my paragraph. Now as far as where you would want to render, it's really up to you where if I'll move this up, notice. Now of course, it's going to be above the author, if I'll move this above the title, and of course, it's going to be about the title. Again, the name is very special, erase children. And in this case, I destructured right here in function parameters. And then of course you also accept, so we use the curly braces, we go back to JavaScript, and then we access the same name. And then wherever I'm going to close this in the component, it will be rendered, meaning we'll place it in between the opening and a closing tag. And then where we set up the component, we can render it anywhere. And where we would want now mark is of course, I'm going to do this in the bottom. So now let me rewrite where I'm not going to destructure everything and function parameters. Essentially, I'll go back to props. So I'm going to go back here to the props. I will comment this out. So I'm still accessing these values. And of course, now I would need to go with props, and then dot children. Now the reason why I refactor it a little bit, because I clearly want to show you that of course the props will be there. So if we go back, and if we inspect, take a look at the console. Notice again, I have two objects. So my props object. However, for the second one, eat has this children prop. That's why I said the name is special, or I'm sorry, for the first one. For the first one, we have children. And the second one doesn't have that. So of course, that's why the second one doesn't display we children. The first one goes. Now CSS specific thing. For example, if you don't like this CSS Grid, meaning that both cards right now are extended, you can simply go back to index CSS. Where, where you're setting up the grid, you can say on line items. And we can just say start on what you'll notice right now that only the one that has the children, meaning the paragraph that I want is extended. So that's up to you. If you like this type of seriousness matter where each card has its own height, you can keep it. If you don't want, of course, don't add it. So for example, if I comment this out, and of course, notice how both of them are extended. Now, I will add a little bit of CSS where I'm going to say book, and we'll just say margin top, we're gonna go with, I don't know, porn, firearms, something like that. Not much in there. And now, of course, we know how we can work with a children prop in react, where again, is going to be content in between the opening and closing tag, when the name is special, you need to go with children. So either you destructured here, function parameters, or you still keep the name, and then you destruct the rest of the properties. By the way, please keep in mind can still do it here as well, or say, children. And then of course, when I access, I also need to access children. I can also do it this way as well. Nice, we're done. And once we're experts on props. Now let's focus on our data. Because at the moment notice, we have first book we have a second book on life is great. But we are somewhat repeating ourselves on we were on creating same component, when I pass in the van, for example, I will be setting up some children. And we can already imagine that if we have list, like they have an Amazon, it would be somewhat tiresome to keep on repeating the same stuff. So each and every time we would need to create a object, then each and every time, we also would need to set up a component and then notice how our file is getting bigger and bigger. So if I have 100 books like this, it is not very practical. So how we can change that around is we could set this up as an array. So we would still have objects, but they will be in the array. And then we could iterate over that array. And for each and every item, display that book. So that way, we don't have to repeat ourselves. And yes, again, we will refactor the application. Now let me just quickly mentioned the reason why we keep on refactoring because, of course, we're starting with the most basic example. And we're slowly building up on that, as we're building up, yes, we will delete some stuff. Yes, we will refactor some stuff. for you guys. That's the only way we can do that. So our remove my children are time being, we really don't care about the children run. Well, of course, we're dealing with children, we're also will remove them. Now, of course, you can keep them you want. But since we're not passing anything, doesn't really make much sense. I'll also remove averse children as well. And I guess let's start with our list. So first, we're have the first book and second book, I can just simply remove both variables. So these will become objects. Now what do we need to do here is simply set up array, and I'll call this books. So const is equal to a box. And then of course, let's enclose both of our objects. And of course, from here, it's not going to be a semicolon anymore, it is going to be a comma. Same thing over here, let's remove that semicolon. Now, of course, we get bunch of errors. Why? Because there is no variable anymore. First Book and second book. And I think it's actually going to be quite easier. If we just remove the both books as well. For the time being. Don't worry, later, of course, we will add it. So what I would want to showcase First, well first I want to showcase that yes, of course we can access this books. Alright. So in the book list, I'm going to go back to JavaScript, so I will shut up my curly braces, and I'll just type books. Now life is great. But it says over here that objects are not valid as react child. Okay, what is happening over here? Well, we have the array but each and every item in that array is an object. And react will complain that Listen, I cannot render the object. Okay, so let's start out with just an array of strings. So in here, I'm going to go with const. And the names. I'll pass in the uragan. So john, man, Peter, on also, let's set up, Susan. So three names analysis that Oh, and by the way, the reason why I showed you this error, because once in a while you will hit this error, when essentially, you'll set up a map method that we'll cover a little bit later. So once you hit this error, just try to remember that you're not accessing the proper values. Because if you have this error of the child where it is an object, that just means that you either haven't structured properly, or you're not acting properly. And now let's start out with those strange. So now I'm going to go back to names, and life is awesome. I am displaying Mirek correctly in react. Now the gotcha here, of course, is that I'm not wrapping those names in anything, right now how we can wrap our JavaScript powers in the HTML. And of course, in JavaScript, we do that with a map method. So I can write it here, where I'm accessing the JavaScript plan, or I can set up a new variable that is up to me. So I'll try it with a new variable here. And then when we work with those books, and of course, I'll do it right here in the React meaning in the JSX. So let's call this new name. So const, new names, and that is equal to A names. And of course, I'm iterating over this array using a map method. And now what I would want is to wrap each and every name in a heading one, because at the moment, yeah, it's nice, I can see my list of names. But it's also somewhat meaningless, because it is not displayed nicely. So I already know that with map method, a magazine, each and every name. Now, if you want to access that, of course, you can just set up a parameter. So I'm going to say here name. And then for time being if you want to console log it, sure console, log the name. And this is also something that will do a lot in the course is we will console log it. Now also console log new name, just so we can see the result. And once we take a look at the console, I can see it each and every time. I'm logging a name. Alright, so my name is john Peter, and tourism, but my values come back as undefined. And the reason for that because I'm not returning anything. So okay, we have the names, and I can access each and every name. Why don't we wrap this in the HTML, meaning, instead of just displaying what items I have in my array, now, I'd want to display each and every item wrapped in a heading one, and the only thing I would need to do is go with return, then I'll set up my header one, and then I'll pass in the name shown here. Of course, if I want to access that particular variable, I will need to go with a name, Mark. So that's how I'm acting right now. So I'm mapping over, and I'm saying, Yeah, get me the heading one. And then I'm going back to a JavaScript. Remember, that was the setup, where essentially, we were setting up the name. Now, of course, if I check it out my value, then this will be already different than I had before. Before that I had undefined. Now, essentially, you can see that I'm getting something interesting. Now that's something interesting is my heading one. Now what I'm trying to say over here is, by the way, you know what, I want to rename this to new names. So if we will go back, and it will say, new names. You'll see that now I have john Peter and Susan, don't worry about this warning, we will fix it. But the more important part is here, that yes, in react we can, right away, render that array, our value array, of course, cannot be objects. So if you're going to have objects, you will have some problems and errors and our if it's just a simple string. Yes, of course, you can render our is going to make way more sense if we will wrap those values in something more meaningful and mysterious. Of course, that is heading one. But in the next video, we'll take a look at how we can iterate over the array as the object, and instead of just adding one, now I would want to return a component for each and every item, not a heading one or Heading Two, or whatever, but the actual component. Alright, and once we have covered a simple example, Now, of course, let's iterate over our books array, access each and every item, which is a object. So start by removing the suckers starting from line 2224, I'm also not going to be looking for the names. And we're going to go right for the books. So like I said, we can shut up separately variable, and then render it here. Or we can iterate over it in the JSX. Because remember, that map will return a new array. Sure, now I go with a map method. And then I would want to access each and every item in my callback function correct. And I'll name my parameter book. Just keep in mind that whatever you name, this primer, will just point to each and every object in our iteration. And for the time being, I'll just return a low, because I would just want to see how everything is going to work. So once I returned us, hello, notice not acceptable. So that one is grayed out. But I have two routers. Now, why do I have two routers, because I have two items in the array. So as I'm iterating with map, I will always return the amount of items that I have in the original, right. So if I would have 2000. Since I'm just returning a low from this function, I'll have 2000. So now of course, if I really want to test that out, I can say well show me that book. And that book should be this object, it should be the first object, second object, okay. And we already know that, of course, I can either access those properties, using dot certain, say, book, dot, author, book, dot image, or whatever. Or, of course, I can use destructuring. And here, I'm going to say const. And then what properties I'm looking for the same ones, IMG, event title, and the author. Now that is coming from the book. Now, I'm not going to console log them anymore. I'm just want to showcase that here, I can return whatever I would want. So if I really wanted to, I could say that there's going to be a div. Now I'm not going to add an image, but all the other ones where I'll say, heading three, for example, with a title. And then heading six is going to be with an author. So let's add those two values. And now of course, I have the name, as well as the author. So I have these two routers, like I said, I can return whatever I would want from this map method. And of course, that will be displayed. The key, of course, was that we could not render the object. That's why specifically, we need to look for those properties. Okay, good. Now what? Well, if we put two and two together, I already have the book. Correct? I already have the component. So in here, if I can return whatever I want, why don't we return a book? So what we would need to do is just change around the div to a book. And now in a book, of course, the biggest question is, how do we pass in the props? Well, I could add them one by one. I could say IMG is equal to mg titles equals a title. That is doable, because Please keep in mind that in a props, I already destructured them. Correct. I heard the structure, IMG, title and author. However, there are two other ways how I can do that. So in this video, I'll show you the first one. And then in next video, I'll show you how we can use a spread operator instead. So instead of passing all of them here, one by one, I could simply say, all right, you know, there's going to be a book prop. And that book prop will be equal to a book that I'm passing in. So remember, we were looking for what we were looking for the object here, correct, sir instead of destructuring, one by one, IMG, title and author are going to say I'm going to be passing this object as a prop Nothing stops me whatever the problem is going to be that we will get an error here. Why? Because now props is not simply a object with IMG title and author is going to be a object with a book object. So let's see, we're going to go with props. And like I said, there's going to be no values here, because we're not accessing the title. But notice how props now has the property that is the value. And then in that object, I see that I have my properties. So what do we need to do here? Well, simply, we would just need to set up props, and then the property that I'm looking for, what is the property, that is, of course, a book. So once I do that, now, I only have this warning about the child, which we will fix in the next video. However, let's see the cool thing, where now I'm iterating over my array, and for each and every object, I'm returning that book. And what that means is, for example, I can go and find another book. So for example, this one, I'm going to go and I'm going to set up a copy image address. And here was just make another object. So copy and paste for the image value. That is, of course, going to be equal to my new book ran, of course, we'll also get the author work show. And I would want to do the same thing with a title as well. So copy that value. And of course, I'll pass it in the title. So now if we navigate to a bigger screen, check it out. Whatever items we will have in array. Now, of course, we are displaying them. And for each and every item that we have, we're using that book component, and we set up the map method. Now we don't need to manually keep on adding this book component each and every time. And we don't need to manually keep on adding IMG, title and author. But what we could do instead is just grab our book, meaning our parameter, which will point always back to that item in the array, which in our case, is the object. And then of course, where we have the props, we are just destructuring our in this case, we're not destructuring, the props, we're destructuring, the book property. So in this case, of course, I can just remove this book altogether, correct. And now of course, I can see in my console that I have three items. Why? Well, because now I have three items in the array. So I guess I can remove this console log as well. Now we just need to fix this a little warning about the fact that each child must have a unique key prop. Excellent job, we have our list, the only nagging thing is the fact that we have this warning about that unique key prop. What is happening here on how we can fix it. You see later, as we're progressing with react course, what we would want to do with lists is, for example, to remove some items or maybe add the items. And react wants to keep a track of what we're adding, what removing. So react is always in the loop. Now in order to do that, we would need to set up a special key prop for each and every item that we're returning. So essentially each and every time you have a list in react, you need to add a key prop with a unique value. Now I can tell right away that in most cases, we'll be hitting up the API anyway. So there's always some kind of unique value, whether or not to support a product, whether that is for the user, or whatever. However, in this case, since we are the ones who are setting up this items, well, of course, I'll need to add that. So in here, we just need to go with ID, and then whatever value you'd want, as long as it is unique. So in my case, I'm just going to go with ID one, an ID of two, and then Id of three as well. So copy and paste an ID of three. So now of course you'll notice that we have the error because we're not passing it. Now how I can access that, well, I could destructured if I had one, correct her in this case, I think it's just going to be simple where I go with book and then ID. Now I don't need to deal with that key, anything in the actual book. But now you'll notice that react is not going to complain anymore, where now everything is fine. As long as you pass this special prop. Again, this is not chicken back. This has to be a key and unique value. Now one thing you will notice once in a while where people are adding index because in the map you can access index, yes, you can technically do that, in this case, there's going to be no problem, you can, however, it's going to be a problem. If you're actually doing something with a list. Here, my suggestion would be falling, where, if you know that your list will never pretty much change here, you won't be removing the items, or adding them dynamically, you can technically love the slide and use the next hour areas a better setup, if you would always definitely use something unique, because keep in mind that indexes change as your array is changing, how are the ID, so that unique property won't change. Alright. And the last thing that I would want to talk about in this video is another way how we can pass in those props. So one of the ways was setting up this book as an object Prop, where I have the book Prop, and then I'm passing in, of course, this book object. However, there's also a case where we can use a spread operator, again, my job is to show you multiple syntaxes, multiple ways how you can solve it, it is up to you whichever way you prefer, if you don't like the spread operator setup, you don't have to use it however, it is my favorites. I will use it some more often throughout the course. So what am I doing over here, instead of passing this as a object? What I'm saying is that, I would want to spread out all the properties. So in year six, we have spirit operator, where I just go with dot, dot dump on whatever is the name of the object. So now what happens when I'm passing in, I'm not passing anymore this book property as a object, what I'm passing this in a separate properties. And in that way, I don't need to use an a more of a book property altogether, what I can just say is that I would like to spread out all the properties here that are coming from the book on my property. So what that means, again, we go back to our previous setup, where either I'm looking for the props, if I'm destructuring over here, or keep in mind, I can also do it in function parameters as well. So yes, again, some refactoring, some different way how to solve that. I know it's annoying for some people. But in general, it is a good practice to understand that there's multiple ways how to solve it. And again, it's up to you to decide whichever method you prefer. So again, if we will console log props, right now, you'll see that we are back to that setup, where props is an object. So not anymore, this book object that we're passing in, we're spraying out all the properties that we have in the book. So once it's back to being an object, and of course, I can access these properties one by one, either here, or of course, we can come this out. And yes, we'll refactor it one more time where we say, IMG, title, and the author. Again, both of them do exactly the same thing. So the result will be exactly the same. But you will see this type of syntax in other people's code. So it's very useful to understand what is happening. So instead of passing a book as an object, and then accessing those properties, one by one, I can say how many properties I have doesn't matter, just spread them out as props. And then of course, I can access them. Now, of course, the names need to match up or I call this IMG. And, of course, when you're trying to access them, when you're destructuring them, that also you will need to have the same name. My bad, not bad. We now know how we can run the list of objects, and nicely wrap it into our component. But the next thing that I want to talk about is of course, events. Everything is nice. We have our list. Of course, what makes applications so appealing is the fact that we can start responding to user events, essentially, when user clicks the button or hovers over the card, or whatever. Now the problem is that we haven't covered yet the state. So in our examples, we'll just deal with console logs when maybe throw in some alert. Essentially, this is just to give you a general idea. When we cover state. Then of course our examples are going to become more interesting because We will add some items, we'll remove some items, we'll toggle some info, and all that good stuff. So this is just to give you a general overview how the event will work in react. Now, as a side note, if you'd like to see all the rents, because in our examples, we'll just take a look at the two hours just googling react events, and then look for this link, the synthetic event. And then if you keep on scrolling, notice in react docs, you'll find all the possible events that react supports. Again, in our example, we'll just take a look at two, one on hover, and the second one on Eclipse. So I'll navigate back to our project. And we'll work in the book component, what do we need in order to set up a vent in react? Now, first of all, we'll need to add the attribute. So right here attribute, and the second one is the event handler. Now, the one thing that is different from the JavaScript is that since we're setting this up in line, again, we need to make sure that we're using the camera crash. So instead of on click, lowercase, like you would normally write as far as inline JavaScript. In this case, we need to set this up with a camel case, which would mean a man, like I said, in our video, we'll take a look at the on click event. And the second one will be on mouse over. But I just showed you where you can find rest of the events as well. Now, we set it up. First, I'm going to create a button. Now, technically, you don't have to create button for the on click, course you can catch it 204 and one through the whole article if you want. But just to be more correct, I'm going to add a button. So out here type, say that it will be a button. And then like I said, in order to set up a event, we would need to have the entrepreneur. And since I would want to listen for clicker runs are simply we'll go with arm CT. And like I just mentioned, we will need to set this up as a camel case. So on click, and then we need to have our handler. Now, I'll set up multiple examples because we have multiple options, just so you can see whichever makes more sense to you. So we can set it up as a reference. Or we can set it up as a inline function, how we would set that up as a reference Well, in here, I could come up with a function. So it's a click, ler. Man, of course, we are having our function, man, we just need to pass it in as a reference. So we have click handler, and then we pass it here on click. So our click handler. Now what I would want to do over here, well, I could just go simply with our hello world. And you'll see that first we'll have the button. But of course, I skipped the name. So let me write here, reference example, manual, so that I have my button. Where is the reference example. And the moment you click it, you have the Hello World. Beautiful. So we know how we can respond to the first event, the click event. So this is going to be a reference example. But like I just said, we also have an option of setting this up as a inline function. Now what that means is that I could simply place my function here, instead of setting this up as a reference, how's that gonna look like? Well, in this case, I think I'm gonna go with heading one, just so we can spice things up. Just please keep in mind, of course, as far as accessibility, that is not the best case scenario. But let's just go with that. So we'll have on click that and like I said, click will become my inline function. And in here, I'll simply say that I would like to console log, and I just want to showcase but of course, within this function, I can access my variables, my props. For time being, I'll just go with a title. So once we click on a title, in a console will should also see the title. So let's say I'm going to go with console. Once I click on a title, notice, now I'm getting that specific title that is displayed here for each and every book. Of course, title is unique. And then once we click on the title, but of course we can see it in a console log. Please keep in mind that both of them are doing the same thing right now. Great. In one case, we have the inline function that has the functionality. In the second case, we Have the reference. So now we're referencing the function. And again, we have some kind of functionality. So you can choose whichever option makes sense to you. Now, the gotcha is going to be when we would want to pass some kind of value. So this is going to be later on where, for example, we would want to delete the item for the list, we will need to pass the actual ID, so we know which item to delete. So again, in this case, we won't delete the item from the list our, we'll take a look at what happens if we're passing in that item, because this is going to be a gotcha. So in here, I'll set up another button. Also, again, type is equal to a button will have a on click for time being, we'll just leave it empty, and also more complex. Example. Alright, good. So what if I would have a function, and I'll call this const and complex example. Again, we're setting up our function in this function, I will get the author, I can get the ID, I can get the title, I can even get the image if I want to. But let's just imagine that I would want to console log, this author, each and every time when I click it. Okay. Now, what's important, though, that this will be passed dynamically. It's not like in here where I have a console log, and then I'm just accessing the file, we need to imagine that in this function in a complex example, I'm looking for as an argument, so say, here, I will pass in the author. Now, you'll notice that if I just run my complex example, if I pass in the author, well, yeah, technically it will work. But it will work, the moment I render my application. So the moment I render, nourish, I run all three of them. So I have all three orders over here. So why do you think is that happening? Well, because here, notice, I invoke this function, I invoke it, the moment I run my application. And that is not what I'm looking for. Of course, what I would want is run it only once I click it. So here's the thing, if you have this kind of situation, where you must pass the argument into the function, you will have to first set up a arrow function. So here, we'll start with an N line. And then we can either set up the curly braces if we want, that's definitely an option. Or we can simply say, you know what, once I click run out want to run the function. Again, that is going to be the case, if you must pass this into as an argument. And again, this is going to be for more complex scenarios, where we'll start passing data, for example, to the database, or we'll be removing items. Again, this is not going to be just with simple console logs. Of course, at the moment, you can just simply argue, well, I would write it as an inline function, there's going to be cases where you cannot do that. That's why, of course, I'm showing you this. So now of course, what happens once I click on More complex example, only then I arrived, because we need to understand that once we start up the application, we run our function or function. And then of course, we return the complex example. And only then, once we're clicking, then we invoke our complex example. Also, I would like to mention that in all the functions in all our event handlers, we can access the event object. In this case, I'll just show you with one with a click handler, just please understand, of course, you can access in all of them, where essentially, we have our event object. And we can do things we can console log event. And we can also, for example, go for event target, that's probably going to be the most useful scenario because normally you'll use this we inputs a lot, where we'll be looking for the name, we'll be looking for the value, and all that good stuff for the button, we'll just take a look at what we're working on. So remember, that was the first one. So once I click, notice I have my alert here that is beautiful. And then I have my whole big event. So of course we can find blotch of useful info here. But also, I have what I'm clicking on. So that is my target. This is something that we will use quite often, especially once we start working with the input. And the second event I would want to take a look at is on mouse over, which essentially occurs when the mouse pointer is moved on to a element. So I can set this up anywhere I would like but I think I'm gonna go with an article just to make it interesting. So first I'm ordering for my attribute for mouse over. And then again, we have the handler. Now in this case, I'll pass this as inline. However, instead of just implicitly return like we had before. Now, of course, notice I'm setting up the curly braces. And again, I will do some kind of functionality over here. This is just the showcase that regardless whether you go with implicit return, or you're setting up the curly braces, it will work. So we have our mouse over beautiful. And we're going to go with some kind of function. I don't know, I'm just gonna go with console log. And I would like to console log, I guess we have been console logging the author, why don't we console log the battle, because I'm still access that specific title for each and every component. So now what happens as I hover over a moment, my mouse moves on to the element. Now, of course, I'm console logging the title of the book for each and every time I do that, notice how I increase the amount in the console. So if I'll move my mouse on to a different arm, but of course, I will console log, that particular title. So that's how we can work with events. So essentially, those are the basics of how we can listen for events in react. Alright, once we're successfully done, we'll get to react basics. But before we move on to more interesting and advanced react topics, I would like to cover import and export statement. Now, let me tell you right away that imports and exports are not react specific. In fact, they are your six modules. So think JavaScript. And the reason why I would want to cover them now is because we will rely heavily on them throughout the remaining of the course, as well as the project. And essentially Yes, six modules or ability to import and export our code allows us to split up our app into small chunks, which of course makes it easier to manage it. In general, there are two flavors named and default exports. And even though there are a few more variations for both of them, for now, we'll just cover the most straightforward setup. So as we're looking at our app, everything is beautiful. But don't you think that our index js is getting quite big. And we need to keep in mind at the moment, we literally have only three cards with some books. Of course, normally, you have way more functionality than that. So wouldn't make sense to start splitting up our functionality into separate files. Because that way, of course, we can manage it way easier. So here's what I'm talking about, I'm going to open up the sidebar, in the source, I would like to create two new files. So one is going to be called books. js, this is where I would want to store my books. And the other one is going to be book js. And this is of course, where I would want to store my component. So my book component, let's create this file, so a new file. And then I'm going for books, j s, this is where I'll store my data. And then I'll have another one new file. And then I'm looking for this book, man, j s. Now what I would want to do right now is head back to index j s, and grab my books. Alright, so let's keep on scrolling. And just got it out. And then of course, we navigate to books, just copy and paste. Now everything is beautiful. But of course in the index js, where we have the book list, of course, we are not anymore accessing the books. So how we can fix that, well, in the box j s, we would need to go for the named export. Again, there are two flavors, and you can use them however you like. Meaning we could have set this up as default export as well. But I'm going to show you the named export movie as a box. And then with a book. So with the component, I will show you the default export. So we go here we use export. So that is a key word. And then of course we go with let or const and then whatever we would want to export. So that's going to be most straightforward setup. Like I said, there are a few flavors. So essentially, there are a few other ways how we can write the same thing. Again, the idea won't change, we're still exporting this box array. But there are a few more variations how we can do that. But for now we'll just stick with the most straightforward one, where we go with export and whatever we would want to export. So now of course in the index JS What I want is to import and similarly like we imported the index CSS. Now of course I'm looking for that particular right, now it's going to be a little bit different where I'm going for the import statement. Then since it is a named import, or named export, I would need to go with curly braces. And then the name for the named export needs to match exactly. So if this is Bugs Bunny, make sure that in the index js, you're also targeting the same name. So in my case, I need to go for books. So go for books, and that is coming from. And now we go with relative path. So notice something interesting. We're not importing from the package, like we did with react, which of course, was coming for our node module. And like I mentioned back then, since it is not coming from the node modules, now we need to set up a path. So in this case, since it was coming from node modules, we didn't care, we just said, Hey, get me this one from this package. However, in this case, we need to have a relative path. But since the box is in the same folder, I just go with that, then forward slash, and then I'm looking forward to file and I go here with books. Now, since it is a js file, we don't need to have the extension. Previously, remember, when we work with CSS, we needed to have the CSS extension. with JavaScript, we don't have to do that. So if it is a JavaScript file, excellent. We just keep on moving on. So now we save it. Okay, beautiful. And notice how our app still works. So everything works as expected. Now, of course, like I said, he file, for example, set this up as data. And I'll save it notice, it will say, well, books is not defined. So now of course, since I named this data, also where I'm using it, of course, I would need to rename it as the however, it says import error data is not exported from books. So if you're changing something around, like I said, this is a named export. So for example, you need to access exactly the same name. So in here a maximum data however, React is complaining here, listen, you're not exporting data. So if that is the case, of course, we can just change it. So that is up to you. This is just to showcase that, of course, names need to match exactly. So once we have this particular setup, everything is beautiful. And now let's focus on the default one. Now before we set up our components, let me just show you the extension, like I mentioned previously, where we have the reacts, numbered. So for example, if we create this component in if I go with a snippet of our a FZE, are right away have my component. And this is going to be the case where it will always match the name of that particular file. So in this case, notice it is named book j s. So that's why right away my component is book chairs. And again, there are multiple flavors. But this is the most basic one, where we import react from react, of course, we need to do that, since we're setting up the component. And as far as default export, we go with export. But then we have this default, and then whatever we would want export as default. Now surely the differences between the two in a second, but just keep in mind that of course, again, these names need to match. So if you're setting up your function, your component, name and book, if you want to export as default, of course, you would need to use the same name. And also keep in mind that you can have only one, only one default export per file, meaning you can set up more named exports from this particular file from book js. But as far as default, you can have only one. Now what I would want in this book JS component, once had back to measures. And then of course, this is my component, correct. So what I could do is just keep on scrolling, keep on scrolling, crowded out. And we can just remove the empty function that we currently have in the book, component, and then copy and paste. And now of course, everything works awesome. So everything is displayed exactly like we wanted. And now in the index, again, we would need to import show the difference between named and default exports is the fact that now I can name it, whatever I want. Shown here. If I go with import, if I'll call this book, and then from an angle again, we're looking for relative path. We're looking for book js, everything will work as expected. So now when we save notice here is running like nothing happened. Okay? So once all that is running, now, once everything is in place, then of course, we can just take a look what happens. If, for example, I change this name. So I have import book from the book. Like I said, this is a default export. So what that means is, I don't need to look for a specific name. So if I'll change this around, and if I'll call this specific book, then of course, the only thing I need to do is change where I call it. So notice here I have my book. So if I'll just call this specific book, you'll notice that everything will still work. So even though I renamed it and from the book jers. On exporting the book, everything works as expected, because it is a default export. And I can rename it however I would want. So in here, I renamed it to a specific book that is coming from the book js file. And then of course, the only thing I need to do is just remember, what is the name I gave. So if this was specific book, of course, I need access to the same name. And then let me just show you the relative path from a different folder. Because once in a while, of course, we will use that throughout the course, where I'm just going to create a new folder. I'll say, testing here. And within this folder, let's just come up with a file of testing a j s, and let's export as default, and also export. Let and we'll call this hello world. So greeting greeting. And that is going to be hello world. Cheryl in any of the files now, we can exporters' our Of course, relative path will change because now we need to go one level up into testing. And then look for this testing j s file. Again, it's not going to do anything however, I just want to showcase in the index j s, where if I go with import, remember the name was greeting. And we're export it as a named import. So we go here with a greeting. And that is coming from. So now we're looking into the testing testing folder. And then we're looking for the testing file. So testing js. And now of course anywhere where I would want I can just for example console login. So I go with console, log and then greeting. And of course, once I open this up, I will notice that in my console, I should have the hello world. And of course I do notice the line 12 is hello world. So everything works as expected. Like I said, it is not a react thing. It is iOS six modules. Man. If you have covered iOS six module before you are in good shape. However, we will heavily rely on this functionality, because it will just allow us to set up our applications in a more manageable way. We're notice now I have my index JS in the index js, I only have the book list. So that is my component. And then I'm getting the specific pieces of data where all the books, whether that is specific component, or whether that is some other functionality, in this case HelloWorld. And as you can see, it is much more easier to manage arap where we split up our data into multiple files. So those are the basics, how we can use import, export statements in create react app. And the last thing that I would want to cover in react and basic section is how we can host our application on the internet. So how we can move the sucker from localhost 3000 to some kind of URL that we can share with our friends or family or anyone that would be interested in our project. Because of course, it is kind of hard to do with our localhost 3000 correct. Now, there are many hosting providers out there. But for this specific one, I picked netlify because it is very easy to set up and you will have your application online in no time. Now you can sign up for free, so they will not ask for your credit card. So keep that in mind. You're in good shape. Online. Once you sign up for account. Of course you'll have ability to log in, which is exactly what I'm allowed to do. And then once you log in, if you keep on scrolling, keep on scrolling, you have this option of just drag and drop. Now Later, we'll take a look at the continuous deployment option that is through the gate. However, in this case, we'll just cover the simple drag and drop essentially These are just the project that I'm already hosting, on nullify. So if you just sign up for an account, of course, this part will be empty. So if you'll go with continuous deployment with git, which we'll do later, then you'll use this option new site from GitHub, or in our case, like I said, we'll keep on scrolling. And we're looking for this one to deploy in your site, without connecting to get drag and drop your site folder here. Now, before we can do anything, remember, we have this option of NPM, run build. So that sets up our production build. So instead of running NPM, start, which spins up the dev server, now we need to go with NPM. Run, build. And once we run this command, of course, our production build, the one that we can host online, is being created. And once it's done, it's going to be available in the build folder. So that's the folder that we will drag and drop in. And of course, once it's done, notice, it says that everything is good to go, the bill folder is already to be deployed. Now we either can run serve, and that will just show what do we have locally. But of course, that's not the option we're looking for, I would want to see how it's going to look online using natla phi. So of course, in this case, what I'm doing here, by the way, let me close my bunch of windows on what I would want is, of course, everything is saved up over here. And what I would want is to open this sucker up, I have my build, and I'm looking for this build folder. Like I said, we'll just drag and drop. So grab the build folder, and just drag and drop over here that I know maximize my window again, it's gonna give you this interesting name. And at the end, you'll notice this netlify that now of course, eventually, you can have a custom name. So if you have or even domain, you can connect to nullify. But for our purposes, we'll just use this option, where essentially there's going to be this netlify dot app. So we're looking for Site Settings. If we're on version nine, we go for change site name, and then you can come up with whatever name you would want. So I'm going to go with react tutorial, or basics, tutorial, basics, tutorial, and then 2020. That's the name I chose. Of course, if you'll go with some type of name that is already used, of course, it's not going to be available. So it will complain. But in my case, I think I'm going to be good to go. So of course, that is my site. So now what I would want is either go to overview, and then just click on this URL. And you'll notice that this is our project. And now it is successfully running online, where you can share it with your friends and your family. Essentially, all the projects that you create, you can host it with notify within a matter of seconds. Again, you'd sign up for a free account. And I'm gonna ask you for your credit card. And what you could do is just use the drag and drop option where you run NPM, run build first, then drag and drop. And then of course, you have your Project Online within a matter of seconds. Nicely done. Hopefully we're familiar with react basics. And I think this is a perfect time to dive into more interesting and more complex react topics. Now, when it comes to advanced react, a lot of our attention will be spent on something called hooks. And by the way, you can see that by just looking at the names of our upcoming topics, if it has the name use in it. So use state use effect. And along those lines, that just means that it is certain react hook, we will talk about. So why hooks, you see if all we have is a component with some static data, or a component with a list, life is great. But once we want to make our components dynamic, and more complex, and of course, as a result, also our app, we will need to use react hooks, which are functions react provides to help us to complete various tasks. For example, adding removing the items from the list, toggling the modal and fetching the data, just to name a few. There are quite a few hooks out there, but I can honestly say that if you understand only two of them, use state and use effect, you will be already an extremely good shape. That's why we'll cover them first of the most number of examples on them. And we'll keep on using them, even if the main topic of the lecture will be some other hook, or different subjects. As we'll be approaching the end of the section, you might find some repetition. But it was done on purpose only because I definitely would want you to be familiar with those two hooks. So you state and use effect. And my experience when it comes to learning, important stuff is well worth repeating. Now, even though react hooks will be the main focus of this upcoming section, we will cover other useful topics as well, like conditional rendering forms in react, prop drilling context API, as well as react router, all included. So by the end of the section, you can easily build cool and complex react apps. In order to follow along with the upcoming part of the video, you'll need a starter project, I provide a link at john smith.com. So bravely navigate to John's milk without calm, and then look for the videos page. And in the videos page, of course, we are looking for react. So click on that page. And, of course, at this point, I haven't uploaded the video. So that's why for me, I can see the JavaScript but by the time you'll be watching this, of course, there's going to be a big massive react logo. And then you're looking for this source code link, click on that. This is going to direct you to my GitHub, more specifically react advanced 2020 repo. And once you get there, you're in good shape. Once we have a good idea of what we're going to cover next hour want to start by getting the starter project. So just follow the link of that I provided. You can either download zip fork or clone. And I think I'm going to go with clone option, I'm going to navigate back to my desktop. I'll zoom in just so you can see. So of course I'm in Terminal now navigating to a desktop, and I'm gonna run git clone. And of course, now I have my repo run, I'll open up the Visual Studio code, drag and drop. Now my preference is right away, set it side by side with a browser. But of course, that is up to you. I'll also have one bigger browser window open as well. So in this case, I'm going to go with new window and offset side by side with my texts that are sure I'll have browser on a small screen, of course, and also, the big one, as well run in the Visual Studio code, first we will need to do is install the dependencies. So we're going to go here with NPM and install amount. All right aware on the command of NPM start, which obviously, we'll spin up the dev server on localhost 3000. And once the dependencies have been installed, also, once the dev server is running, run, I'll just open up localhost 3000, small screen, as well as the big one. So let me open up one more browser window. So this is going to be a big browser window, of course. And at the moment, of course, there's going to be nothing there on localhost 3000, because their server is not running yet. And once the dev server is up and running, you should see your screen advanced react. And same thing should be on a small browser window. Again, the URL is localhost 3000. And then at this point, I think I'm going to close the integrated terminal. And I'll start by giving you a overview of our project, just so we all are on the same page. As far as the store, a lot of things should look very familiar, since I use the same create react app boilerplate we used in the previous section. So remember, previously, when we run, create react app, online, we created our first project. Well, essentially, I did the same thing. But of course, I removed and added some files in this case. Now when it comes to upcoming lectures in order not to waste your time, I already prepared all the necessary boilerplate. So we just need to focus on functionality. And the same goes for styles, even though we are not going to use that much CSS. Since at the end of the day, it is still tutorial, I did prepare on CSS for you though, you just need to include classes and you'll be good to go. I also provided the complete source code so that way you can right away compare it with your results so you don't have to run around and see where there are you right away can look in the final folder and you'll be in good shape now As far as the files and folders, like I said, a lot of things should be very familiar, where we have the public. And of course, we have the source. Now we will do all our work in the source folder. Now the difference, remember in the previous section, we worked in the image. Now, in this case, what happens with a boilerplate, they right away set up index j s, as a place where they import app component. And then remember that document get element by ID, where essentially, we are placing all our functionality into that route there. While they're doing that by just placing that app component. And I just left it the way it is. Because that way, once you start a brand new application, we have create react app, you're not going to be confused. Just remember, it is the same thing. Previously, we just set up our components in the index j s. In this case, what they're doing is they create everything in the app address, meaning all the components meet in the app js file, run the export as default. Remember, by the end of the tutorial, we talked about exporting and importing, in the image j s, very import app up and just place it over here. Now as far as this reacts, Rick, no, don't worry about it. This is just for create react app purposes. Now in the objects, if you just want to simply test that out, we can change on return. And we can say here Heading Two, and let's say advanced, advanced react tutorial. And like I said, the idea is exactly the same. All we had in the previous section. The difference, of course, previously, we placed our components right here next to the render method. In this case, they have this app. So the root component where all of our components were made, and then they just run through it. Now when it comes to CSS, like I said, I already prepared even though there's not that much CSS already prepared a little bit of global styling, some fonts and all that good stuff. So if you're interested, of course, be my guest, you can come here and check it out what kind of styling are added. Now the most important thing is the tutorial folder. So in dorial folder, you'll see a bunch of folders, starting with one on non hyphen use, sir, what that means is that it's going to be our first topic. And then for each topic, we will have two folders, we'll have the setup folder. So this is where we'll do all of our work. Like I said, I also provided right away a complete source code. So that way, if you don't get the result that you're looking for more than just right away, navigate to a final folder, look for the same exact file we're working on. You'll get your answer. Now in the next video, I'll show you how we'll be doing importing and how you can right away, check out the final. The one thing that I would want to mention, though, is that I saved up on the boilerplate, where you will notice that in all the setup files, right away have the component. Now I'm also right away exporting as default. And I'll talk about it in more detail in the next video. But the idea is that we don't need to create each and every time the file and the component and all that annoying stuff. Instead, everything is already right away prepared for you, then you'll just have to import that particular file in the app js. And then just follow along and do all of your work in this file. So that way we can focus on functionality instead of unnecessary boilerplate. And that is the brief overview on start application. And I think we're ready to kick things into gear. And finally, learn some advanced react. Nice. And once we're familiar with a setup course, of course, we'll start by looking at the use state hook. Since like I just mentioned, the use that as well as users are going to be most used hooks. However, before we do anything, let me just showcase why we would want to use use state in the first place. Now this is going to be a basic example. Please understand that course, you state can do way way more than that. But I think it's going to give you a good idea why using use state hook is necessary as our applications get bigger and more complicated. So the file that we're looking For years going to be located in tutorial folder, a man we're looking for US state. And then we have the final one. So that is going to be our complete code. And then we have the setup one. So this is where we'll do our work on the file we're looking for is this error example, j s. Now, first, what I would want in the app j. s, though, is set up the container. Now, why do I want to have a container, because it's just gonna have a little bit of styling. If you navigate to index CSS, you'll notice the container class, I just added a little bit of styling. So I'll add that container for all my examples. Just please keep in mind, it doesn't affect the functionality, it just affects how the examples are going to look like. So if I navigate back to jazz, I'm going to wrap all my examples into this container. So what I would want right now is where we have the return, we're just going to go with dev within us there for the time being just to showcase that nothing will change our place the setting to so let me move up the syringe here. Now, of course, I need to set up a proper return, and all that I don't want. So I do notice, like I said, equal just this class name of container, we'll get a little bit of styling. So essentially, I'll place all our examples in that container. So that way, it's just going to look a little bit better. And then in order to work with our files, we're looking for this error example, chairs. Now all of them have been set up as default. So we can name them whatever we would want. Now in my case, I named them explicitly what we're covering in that particular video. For example, if this is our example, I went with explicit name. Now, of course, if you want, you can shorten this up in the objects. That is up to you. And Marcus, I'll call all of them setup, meaning as we move from lecture to lecture, I'll keep this name off setup. And the only thing that will change is the file where I'm getting the component. So in this case, of course, I'm looking into the Oreo folder, when I'm navigating to use state. And then I'm looking forward to setup. Like I said, I'm, I'm looking for the error example. So that's the component I would want to work in. That's why I'm importing into address. And then I'll just place it in the container. So I have my setup. And I'm good to go. So what you should see on the screen is this text of use state, or example, if you see that VAT is awesome, because that is the file that we will work in. Now if that is not the text that you see, then of course, make sure that your import errors correct. Like I just mentioned already 30,000 times, if you want to see complete code, you're looking in the same folder in the US state however, you're looking for the final folder, an error, example address. So the filenames will be exactly the same. The difference, of course, is that in here, you can see the complete code. So for example, in the app j s, if you'd want to see the complete code, what you could do is simply go with import, again, whatever name because it is default. So in my case, I'll call this final from online. Again, we're looking forward to dorial, then I'm looking for US state, and I'm looking for final, and then our example. So right below the setup, I'm going to go with my final, and you'll see the complete code. Okay, so this is what we will build in this project. Now the reason why I'm showing you that because that is going to be our setup for the remainder of the advanced tutorial videos, where essentially, you'll have one setup file, and then the final one, where you can see the complete code. So if you ever want to run more, I have built that of course, just import the final. So that is going to be coming from the final folder. But the files that we're going to be working are going to be coming from the setup. So hopefully this is clear. So I can remove my final. And finally we can start working in our file in the urges. So let me navigate there, the error example now of course, notice this is the complete one. Now that's not the one that I want. I want our example just where adjust have the use state or example. And what I would want to build over here. Well, I would just want to set up some kind of logic where once we press on button, we would change the name. So what am I talking about? Well, here, I could go with let title. So some kind of variable, I'll call this random barrel. And then where are my JSX, I would want to have some kind of return. So in this case, what I'm going to do is use the React fragment. Again, I just don't want to create this div soup. So I'm going to go with react dot and then fragment. And then when this fragment, let's go with Heading Two, and I'll look for my title. Remember, in JSX, we needed to use the curly braces in order to access the variable. And of course, once I do, I have my random title, beautiful. Life is great. But what if I were to add a button, so I'm going to go here with button, type of button, as well as add a class name. Now this class is coming from my index CSS. Again, if you want, you can check it over here. And it just adds a little bit of styling. And the class we're looking for is btn. And let's set up a on click handler. And of course, we'll have to set up a function. So call this handle click function within the button, I don't know what's called this change title. Let's say right, now, there's going to be an error because of course, we haven't created a handle quick. So let's do that. So const handle, click Movado is my function. Beautiful. Now what I would want is to change this title from random people to something else, my first legitimacy with a weakened x as the title. Of course, I'll open up my console. Let's see, what do we have in a console? Once I click Change, that'll, of course, I can access the random title. However, the idea was that once I click, I would want to change it to something else, I would want to change it to Hello people. So let's try whether we can do that. I'm going to go here with that all and learn Hello, people. Now my question to you is, once we click the button, the handle click, do you think the random title will be updated? In my component? Again, the question is, once we click the button, notice, I'm changing the title. So do you think we will change also the value that we have in the JSX? Well, let's try it out. We have random title, or click on Change title, and nothing happens. And what's even more interesting that technically, you can see in a console that we change this value, correct. Because in here it is title and it is random title. And of course we change it to help people now once we console log, it is Hello people. Now the problem is that we are not re rendering the component. So we change the value. And we're not re rendering the component. That's the reason why we cannot see any changes. Now the second thing is that we have no way to preserve this value in between the renders as well. So essentially, we would want two things, we would want to keep the value between the renders. But also we would want to trigger that rerender versus where the use state hook comes into play, where it will allow us to do just that. Again, very basic example. Of course, you can use use state for more on that. But this clearly shows us why we would want to use the use state in the first place. Alright, and once we have covered why would want to use US state. Now of course, let's learn the basics about the use state. And here's what we're going to build me just quickly show you we're going to go with import. Again, I'll call this final from online, we're looking forward tutorial folder. When you state final, online use state basics. Now since I named the final Of course, right after the setup, I can just go with final, close that out. This is going to be our component, we have random title. And then notice how once we start using your state, not only we can change the value and trigger a rerender, but we can also preserve the value in between the renders. Again, this is just to showcase that you can always take a look at what we're going to build but of course the file that we're looking for is a bit different. Again, I will still call this setup because it's just easy However, I'll change the path where I'm looking for a setup folder. Van. Instead of folder, I'm looking for US state basics component, or file. And of course, you should see on the screen use state basic example. And let me open up the sidebar, I'm going to navigate over. And essentially use state is a function. It is a function that is coming from rear however, notice that it is a named import. So unlike react, this is a named one. So we must, must, must must, must have the curly braces. And the name needs to be exact, where we go with us state. Now just to prove that use there is a function, we simply console log, and we write us state. And you can clearly see that it is a function beautiful. So once that is clear, once we know that you state is a function. Now let's see what this function returns. Because that is very, very important. Shown here, I'll just invoke it. And you'll notice something interesting, where it returns an array. And first thing is going to be undefined. And essentially, this is going to be the state value that we're going to use. And the second one is a function. Now this function will control this value. Now you're probably wondering, okay, well why this is undefined? Well, because when we invoke use state, we need to pass in default value. Now keep in mind, this value can be a string, it could be a number can be an array, it can be an object can be Boolean, whatever JavaScript value you'd want. So for example, if I'll pass here, HelloWorld, what you'll see that our value now is a string. So that is my default value. And then again, we have this function. And from this point, we have multiple ways how we can access that. Just keep in mind, if use state returns an array, of course, we can assign it to a variable, correct. So in here, I could go with const, and then value is equal to my use state again, we will need to pass in some kind of default value. So for now, I'll just passing number, just so you can see that of course, we can pass in a number as well. And then in order to access the first item in the array, we would go with square brackets, and then the zero. Now let me copy and paste in here, I'll set up my function, since that is going to be the second thing that I'm looking for. So I'm going to be looking for the handler. And of course, I'll change this value as well, we're now I'm looking for my function for the second item from my array. If we'll console log, if we go for example, we have a value and handler, you'll notice that the value will be one. And the second value will be that function. The function of that controls this novel understand that the moment it might be a little bit confusing, don't worry, just remember to this handler will be the function that controls the value that we have in our state. So in this case, of course, this is one. In our first example, this was HelloWorld. Now all of this is beautiful. But what I would want is to select all of these and then just comment them out, just so you can say for reference. If you remember, we had array destructuring. Now what that allows us to do is set up everything in one line, where I'm going to go with cons, and then I would need to come up with a name for my state value. So this name could be anything, I will name this text, just keep in mind, you can name this Bobby, you can name this apple, banana, whatever you would want. So I'll name my first value, text. So that of course will be my state value. And the second thing is my function. So now of course I need to name that function. Now a common convention is using set wherever you name your variable. So if you've named your state value, for example, text, then you go set text. If you'd set this up as Apple, you go to Apple, and then set apple. Now again, this is a convention, you can name this taco and burrito, it doesn't matter. And then for destruction rules, you need to set it equal to your array. Now of course our array is coming from us Alright, then we need to invoke it. And then we need to pass in whatever, again is going to be our default value. Now what is going to be our default value? Well, there will be that random battle. And once we have this setup, now let's try it out in our return. Again, we'll have our JSX. Of course, again, I'll go with react fragment, just so we can keep on practicing. And then in here, let's use the heading one instead. And I'll look for my text. So that is my state value. And just to showcase that we can place whatever we would want, or here, I can just change it around to a one or 10 or 109, something like that. And then of course, this value will be displayed. Just keep that in mind that whatever value you'd want as default on, you can set it up with a rather than array, whether that is an object, string number, Boolean, whatever. And of course, once I have these two things, now we will need to come up with the button correct, or the button that can change this value. Because we saw previously how we were not able to give up, reverse, let's come up with that button. In here, I'll add a class name, we'll say btn. Just so we have a little bit of styling, and we'll do the same way how we'll have a unclick. And we'll pass in handle. Click now within the button. Alright, change arrow, Mark show. And again, there's going to be an error where handle click is not defined. Now, of course, let's set it up, we're going to go with handle click on probably add const over here, and then we'll pass in our function. In this function, now we'll finally use this set text. Word works, we have multiple ways how we can do that, how we can pass the new value. And a little bit later on, we'll look at the functional example. But for the time being, let me just go with text. And then whatever we'll pass it in here, now will be our new route. So for example, if I want to change this around to a Hello World, I just need to pass in that string, where if I'll say hello world. Now what you'll notice that once we click on Change title, of course, we invoke the handle click, and then in click, we have our set text function. So the function that we're getting back from the use state, we get back that function, and then each and every time we invoke this function, we can change this value. So there it is, once I click notice, now nicely, I see my hello world. Now of course, since I don't have any more logic, than every time, we'll click after that is just going to be this HelloWorld. But at least we already made good progress, correct, because previously, we were not able to do that. Now, of course we are where once we click on a button, we change this, again, we can refresh, we have random title. And once we click that, of course, it is going to be a Hello World. Now just to showcase that we can set it up as always, to whatever we would want, just like with the default one. If I'll go to 109, you will see that I have ramped idle mode when I click the button, of course I have 109. All right. Hopefully that is clear. And now let me just set up a little bit of if and else statements, where essentially, depending on whatever value I already have, I'm going to set my new value using set x. And the way I can do that is I can say if and then I'll check what is the value for the text. If it is random, and Pyro, then of course, I would want to invoke set text. And I would want to set it equal to a Hello World. However, if that is not the case, essentially, if it is already HelloWorld well, then I will just set it back to a random one. So go set text, plan, random, and then title. So now you'll notice that we'll have this toggling functionality, where I'm changing the title. Now of course it is going to change to hello world beautiful. We trigger rerender and then of course again once we click we have random title, awesome. This is how we can use the use that again it is a function that we get from react. Once we invoke the function, we would need to pass in default value, whatever route one as far as string, number, Boolean or object or array. And then from this function, once we invoke it, we get an array with two values, we use array destructuring, because it is just faster. However, we can also do this manually, where we get that particular value, and the function of that controls that value. And each and every time we'll invoke this function, whatever value we'll pass in, now will be that new state value. And of course, in order to access it, just like with normal variables, we just go with whatever name we passed here. Again, please keep in mind, you can name these things however you'd want. But a common practice is using set, and then whatever name of the value that you already set it up. And then of course, each and every time we click the button, notice how we invoke our set text. And we keep on changing this state value. Beautiful. And those are the basics of use state hook in react. And before we cover more complicated use state examples, let me just cover some things that relate to all hooks. So this will also relate to all the other hooks we'll learn later. First, we need to remember as far as hooks, vary, we'll start with this use, whether that is use effect, you state, use callback, use memo, or whatever. So you always see this use not also applies to whatever hooks we'll create ourselves later on, we must use this use in the beginning, run the components where we invoke those hooks must be the application. So let me show you the example. If for example, I'll change this to a state basics. This is going to be with lowercase, we will see a big fat error here in order to use hook, whether it is your state use effect, or whatever the component needs to be obligation. That is a small gotcha. But a small gotcha, that can catch up with you in very random times. Now, also, the hook needs to be in the function or component body. For example, if you're moving this outside, it's not going to work again, there's going to be a big fat error, because you need to invoke the hook, again, with our errors use state or whichever hook you'd want, it needs to be invoked in the function body. And the last thing is something that we'll take a look at later. And that is that we cannot call the hook conditionally. And I'll show you that would use the fact because it's just going to make a little bit more sense. Now keep in mind, I'm not talking about the function that we're getting back from the phone. Because of course, in this case, yes, we're calling this conditionally where I'm checking the state value. And when I'm saying all right, so if the state value is equal to a random data, then I'll invoke my handler function. Keep in mind, I'm not talking about this function. Yes, this function you can call conditionally. However, what I'm talking about is the fact that I cannot just say, EFF, man, some kind of hook inside of that is not going to work. And it's going to be easier for me to share with us the fact because there's going to be a proper example. Again, this applies to all the custom hooks, we're going to create ourselves, as well as all the hooks that you can use from react, whether that use the fact use callback, you state or all the other hooks. So that was one. Now let's take a look at a more interesting example, where our default value or state value will be an array. And essentially, we'll be able to add the items will be able to remove the items, as well as clear the state value back to an empty array. In order to see what we're going to create. I'm going to change of course, my file, so I'll use a different path right now. I'll go for setup, then I'm looking for US state and then array. And what you should see in a browser is used state array, an example. Now let's navigate in there to that particular file. So what we're looking for is use state array address and again, it is located in the setup. Now in this case, though, I'll change this around and instead of importing as a named export, I can show you that we also have another option, where again, our need to come up with those two values. Our our we'll call them So in my case, it is going to be people. So that is going to be my array. And then the function will be called serve people. So these two things I need regardless, online in order to invoke use state, instead of importing, which is always an option, we can also do something like this is where we go with react, and then use state. And like I said, this is where we pass in that default route. So for example, as far as the row, we could go with empty array. So these are two ways how we can set up either your import, or you go with react dot, and then you state, please keep in mind, both of them do exactly the same thing. And that really depends on your preference. In my case, if I know that, I will use it just once, most of the time, I'm just lazy and I go with react, and then you state how if I know that I only walk it quite a few times in my component, then of course, I just go with import, and then use use state or whichever hook name I pick, that just saves me a little bit of typing. Again, that is up to you. So for the time being, we just have the empty array, which is somewhat okay. But we remember that we can pass whatever we want. Now, if you'll take a look at the source folder, you'll find data j s. Now in the data address, we have an array. And I named this data. And then in here we have an array of objects, where we have the ID remember, we needed to do that, if we're rendering the list, there has to be some kind of unique ID. And then we just have the name, and then value. So john, Peter, Susan, an honor. So what I would want to do right now and use theta Ray, I already imported the data. So notice the path, I'm looking forward data. And then I need to go quite a few levels up, and then look for that there. So I leave one folder second, and third. And then eventually, I hit the source. And this is where I'm looking for today. Again, this is going to be a relative path. So now what I want is to pass in that data array as my default value. All right, awesome. And then of course, let's work on our return. Now I could go with react dot fragment, or a member, there is a shortcut, where if I go with my angle brackets, now essentially, I'm creating my fragment, and I don't have that diff soup. So now what I would want is to iterate over my array. So I go with people, then again, we'll use the map method. And then on each and every person, I would want to return something more meaningful. First, I guess we can just return a Hello. And then we can just double check whether everything works. Because of course that is very, very important. If I don't have access to each and every person, essentially, if I don't have access to the object, well, kind of doesn't make sense. Correct. So if we console log, beautifully, what I could see is john Peter, Susan. And then I have four hellos. So now of course, let's do something a bit more meaningful, where what I would want right now is to destructure, these two things, the ID. And then I'm also looking for the name. Now that is coming from the person. And then I would want to return a div. Now remember, when we render a list, we need to have this key prop. And we need to pass in that unique value. Now add a little bit of styling here, where I'm going to say item, again, that has nothing to do with functionality is just for the styling. Let's set up a heading four with a value of name, just so we can see the name. And then eventually, we will set up our button. So awesome. Notice, I have my list. Again, I used use state hook when I provided some default value, which in my case was no way. I could have added the empty array. But in my case, I already prepared an array in data JS array, it is a array of objects, then, of course I invoked it. And then I'm getting two things. I'm getting whatever default value I have. So that is my state value. And then I have the function that controls it. Okay, good. And then of course, just like with any other variable, I can just access it. And then I'm iterating over like we have covered already before, where we're iterating over. And then we display for each and every item. There's dev online, we're just destructuring ID. But of course, now let's make it a bit more interesting. What if our Want to come up with a button that just delete all the items. So right next to the people, I'll set up my button. I'll add here a class name, or btn. And we'll set up our on click. Now, if you want, you can set up here, a function reference, unless is something that we'll do later once, we would want to remove a specific item. But for now, I just want to showcase that, of course, you can invoke this function directly in here, where we're setting up the onClick. But the gotcha is going to be in this case, since we need to pass in the value, we'll have to set up a arrow function as well. Remember, that was one of the cases that I showcased before. So in this case, let me write clear items. So that is the text in my button. And let me showcase that. If we go set people, of course, we would need to pass in that new value, correct. And if I want to set it up to an empty array, that just means that I will clear out all your items. Now the problem is going to be that we right away, invoke it. And that's not what we're looking for. So what we would want is only to invoke it, once we click on it. And remember, the solution was to set up our arrow function first. So once we do that, then we'll have our button. And now what this button is doing? Well, it is calling a set people function. And remember, the only thing we need to do is to pass in that new value. So what is the new value in this case? Well, since I would want to clear all the items, I just pass in the empty array. Correct. Now, let's see. And of course, everything works. So now we remove all the items. Again, that is something you need to remember where Yes, you can call directly this function, you can set up a handler, like we did previously. And like we will do here, where we would want to remove a single item. Yeah, that is definitely an option. We could have used the reference instead. But just keep in mind that yes, you always can also use the inline function, where you just need to set up a arrow function, and then call whatever function you have a new state, that is always also your option. And now of course, let's work on removing that individually. So in this case, I would want to first create a button I guess, right next to a heading for let's go with button. Again, we'll have on a click. And in this case, I will shut up a function reference. So here, let's set up a curly braces. And we'll have again our function, because we will invoke our reference here. So say remove item. And now we want to pass in the ID. And then I'll say, Ram whatsoever. And at the moment it complains, well, you haven't created this remove item. So now of course we need to work on our function, where we say remove item. And then this remove item is going to be looking for the ID. Because of course, for each and every item, I can grab that ID. And then notice how we set up the arrow function. And we right away invoke the Remove item with that specific ID. So essentially what happens, this doesn't run each and every time we render a wrap. In fact, it runs only when we click on a button. And this is going to be that use case that I talked about before when we talked about the events where you must have this arrow function each and every time you are invoking this function, you must have the arrow function, because you would want this to run only when you click on a button. And in this case, you have no other options, since you are passing some kind of arguments you are invoking. So that's why you always need to return it from the arrow function. So we have our remove item, remove item is always going to be looking for the ID. And now let's set up the functionality. So in the Remove item, what I would want is to filter out the array. So all the items that don't have the matching ID, I would want to leave them in unless you're the one that has the matching ID. That one of course would want to remove. Now I can say set people and then set up the functionality right here in the parentheses is always an option. But as far as tutorials and projects, I always like to be a bit more explicit where I'm going to create new variable. So for example, let new people amount is going to be equal to my People's state value. So my original Ray, Van filter, so now I'm filtering. And then for each and every person that I have our just want to remove the one that has the matching ID. So if I go here with person ID, remember I'm filtering out the array correct. And then each and every object is there. And when I'm saying, Hey, listen, if the person ID matches the ID that I'm passing, and then of course, remove it on the way I can do that. I can say, motion point, equals to an ID. So essentially, the logic is following, where we pass in the ID, then we filter out our array. And all the items whose IDs are not passing to wherever we're passing in, those ones are returned in new people. Now, if you want, you can console, log it, but in my case, I'll pass in the, the search people. So I have my function. And like I said, I can pass in whatever I want. So of course, this is that new array that we're getting back. And I'm just passing in into the set people. And what you'll notice right now that we have our buttons, and the moment I click, I removed that specific item. Then I click on john, I removed john Peter. And of course, once I refresh, I have all my items back. Now if I want to remove all the list, or I can do it also as well, few takeaways, we can set up this logic right here, where we're passing in the new value, because remember, with filter, we are getting a new array anyway at the end of the day. So in my case, I just like to go a bit more explicit, where I'm creating a new variable, and only then I pass it in to the people. And the second one is going to be pretty common Gracia where since we have either function reference in here, or we would want to invoke, of course, the function that we're getting back from the use state, since in both cases, we're passing in the argument, we're also invoking. And that's why we always need to set up the arrow function, otherwise it will run right away. So essentially, when we run the wrap on, it will invoke it. And then in that case, we are not running at one we're clicking on a function, we are running at the moment our app runs. And that's not what we're looking for. But those would be the basics how we can use use state hook with an array. Not bad, not bad. Once we have covered how we can use use state with array, I think it also makes sense, if we take a look at how we can use with an object, because there is a gotcha. So again, we're looking for to set a folder, and then we're looking for US state object. And once we save, we should see the US state object example. Now of course, we just need to now get to that particular file, which is in the setup, again, use state object and of course, I would want to use my hook. So let's go with two values, I'm going to go with person, and then set person, and that is going to be equal to my use state. And then I'll pass in that object directly. Again, that is something that I would want you to keep in mind where you can pass in the variable, like we just did with an array, or we can pass in directly. So in this case, I'll pass in the object, where is it going to be name, now that name will be pure, an age will be 24. So let's do that. And then lastly, we'll have some kind of message message. I'll set this up as a string. so beautifully, I have my object. So let's call this urandom. message. So once we save, course, we are in good shape. And if we want to console log the person, of course, we'll be able to see our object much. Not that at all. Now, the thing is, what happens if we change this value? And what gotcha should we be looking for? Because with IRA, it was somewhat straightforward. We're in one case, we just wiped out all the data when we set it back to an empty array. And the second thing, we have the function of that was just returning a new array. Now this is going to be a little bit different, because we'll have some values that we would want to preserve. And what may Shockers, what am I talking about? I'll start with my return where I'll set it back to a fragment online and here. Let's type few heading threes. So first, we'll look for person name, personal name and notice say Here's an object, of course, I have my value, I'm accessing my state value. And then I'm just looking for the property. Now I will copy and paste. And I'll just change these ones around, where of course, we'll have age here, we'll have also a message. And let's save. And there it is Peter 24, around messenger. And eventually, I would want to have a button that changes the message, again button via a class name for the styling. So btn, a man on click. In here, let's call the change message, change message, a function that we haven't created yet. So in button, let's write change message. And let's come up with that function, shown here. const, change message providers my function, I'm not looking for any arguments in this case, but I would want to invoke my set person. Now what you'll notice, though, that, for example, if I want to change the message to a HelloWorld, the problem is going to be that when we invoke this function, essentially, we wipe out all the routers. Remember, I told you, when we set up the value, the state value, it can be anything that you want. So even though in the beginning, we went with an object, if we invoke the function that changes the state value, and we pass in the string, this will be a string. So originally, we had an object, we're treating, like an object will go person name, person age, and the message here, I just wipe out the data. And then I say, you know what, it is going to be a Hello. Now you could make an argument. Alright, but what if we would set this up as an object, I'll pass in the property of message. So in this case, I'll say message is equal to hello world. And technically you are correct, where now we will change only the message. But again, rest of the data gets wiped out. So what is the solution? Well, solution is using a spread operator, where if you remember what's proper, with first copy the values, and then we come up with whichever value would want to override. So how we would fix this in this scenario, I would go data dot, unknown person, and then comma, and then I'm just gonna say, you know what, leave these two values the name and age, as they are at overwrite only the message. So this is the gotcha. For example, if you're using the object, then you need to make sure that you always, always use the spirit operator. Or there's also some other older setup, where essentially, you copy the old values from the state value. And then you just decide which one you'd want to choose. In this case, we want to change the hello world. So of course, once we click, notice how we also change only the message. All right, routers clear. But as you're looking at our setup, you're probably wondering, okay, but why do we have to even bother with an object in the first place? Can we set up three separate state values? And whichever we want to change? Of course, we would use that little method. Well, let's try it out. But I can right away, spare you the cliffhanger. So but yeah, but visually, what you can do, sir, near I'm going to go name, online shirt name. So I'm going to be somewhat original, where I'm not going to go with a wild name for my handler function. And, again, I'm looking for the same thing, theater, man, I'll just copy and paste and we'll change these of ours around where now we have age, man we're looking for set age on the value will be 24. On the last one, of course, is going to be a message. So we're going message set message there is going to be more function amount as far as the original value, what we passed in here, we said random message. Now, of course, in this case, we are not dealing with objects anymore. So we have these state values. So one by one, of course, we will need to access them. So now I'm looking for name, and I'm looking for a person. And lastly, I'm looking forward a message. When we talk about this change message. Well, we can either right away call set message here on click. So remember that of course, we'll have to set up the inline because we're passing in the argument. Or since we already have the handler, I can simply pass here and say message, we would want to change it, of course, to a Hello World. So once we set that up, notice once you click course, I have my value. So essentially what I'm trying to say that there is no rule that prevents you from showing up as many state values as you'd want. So instead of going for one giant object, you can set up multiple smaller state values, where you have just a single value, and then a function that controls our, if you do decide going with an object, there's going to be some use cases where object might make a little bit more sense. But always, always, always remember that you need to make sure that you preserve these old values. A nifty way of doing that is using a spread operator, where essentially, we copy the properties from the previous object. And then we'll just choose whichever we would want to override. And of course, in this case, it was a message. So we went from random message to a Hello World, our Yes, there is an alternative, where you can set up as many state values as you'd want, just by calling your state your state passing in default value. And then you have that single state value, as well as the handler function for that set value. Not bad, not bad. I think we're progressing nicely with our use state examples. In our last example, I want to showcase how we can work with numbers. And not only how we can work with numbers, but how we can set up a functional update for the all this time, we have been using the value update. Now what that means is where we have this function, the subtext or whatever set function we get back from you state, we just call the function, and then we pass in that new value map essentially sets our state equal to that new realm. However, there's also a method of passing in the function. In the following videos, I'll show you why that is important. But first, I would want you to head back to objects. And then import again, component, you can call it whatever you'd want from your state event setup folder. And then the file name is US state counter. Essentially, that is going to be our last file, how our split this up in multiple videos, because I want you to get a better understanding of what we're doing. So once you import this file, via just navigate there, and you should see on a screen use that counter example. And you can probably already guess that we are going to create a counter with not just a simple counter, we'll have one with straight up ladders. And the second one, we'll use a V function. Now we'll start with our turn first, though, where it's not going to be an interior. Again, we're gonna go for a fragment, so we don't need to overpopulate everything, we have divs a man, once we have our fragment, then I would want to go with a section. Now add a little bit of styling right here, where I'm going to say margin, and then that is going to be equal to four, REM and zero, and nine within the section. Let's just go with heading two. And I'm going to call this a regular encounter version, see something like this on the screen. Now after the Heading Two, I'm going to set up my value show at the moment. Of course we don't have anything, but we will use you state. And you're not, I don't want you to set up a state value because that should take us a second since we already know how to do that. So I'm going to go with value and set value. And that is equal to or use state. And then as far as my initial value, well, that is going to be a number of zero. And now in heading one, I can just simply go get more value. And surprise surprise, of course I have the zero. And now let's add three buttons, one for increase, one for reset, and one for decrease. So I guess we'll start with the decrease one. Let's go with button on my class name. That will be equal to A btn. And let's just right here decrease. And we'll just copy and paste the same button. So one, two, and then of course three buttons total. And we just need to change these routers around where we're going to go with the reset, as well as the increase or just go here. Again, I know I've covered this before but I'll set up two ways how we can click on a button. One is going to be, we have a function here. So where we reference it, for example, with the reset, and the decrease and increase is going to be with inline functions, just showcase, again, that you always have multiple ways how to set it up. And essentially, it is up to you. Now there's going to be some cases where you definitely need to use the inline when you are actually passing in. But then, in some cases, you can simply use the reference, and you're good to go. So we have our buttons. And like I just said, we'll go with on click, set up a inline function here, where we go with set value. And now I'll use the old value, I'll say value, whatever it is, of course, at the moment is zero. And then I'll say minus one, because of course, the button is decrease. And we'll do the same thing here, we're going to increase, copy and paste. Now, of course, now the value should be plus one, correct. So once we click on a button, I would want to invoke my cell function on whatever is the value, and then plus one, like I just said, for the reset, let's set up a reference, just so we are all on the same page that we have multiple ways how we can get the same result. So I'm going to go here with reset, I'll have my function. And then within this function, I'm just gonna say set value, again, my sub function, and I'll set it equal to zero. And now where I have the reset, I'm just gonna go with on click, I just need to reference the function. So in this case, of course, he is a reset. And then let's test that out. So once we click, of course, notice, we can nicely increase, we can also decrease, we can reset. So again, this is a way of passing directly the value in our set function, where we pass in the value. And then the moment we do that, of course, that is our new state value. Following video, I would want to cover the functional updater form, where essentially, we pass in a function on why would want to do that in the first place. Nice. And once we have our simple counter, let's take a look at how we can pass in a function in our set function. And why we would want to do that. So first, we'll set up a counter or this is going to be more complex problem. However, the JSX pretty much is going to be the same, the only difference is that we're not going to use that many buttons. So what I would want to do is grab all my section, copy and paste, I'll still keep the margin that stays the same. Let's call this a more complex or complex counter, more complex counter value store the same. As far as the buttons, we'll delete most of them on what just say here button. And it's going to be just a increase button. So let's say here button for the class for the styling. As far as the text inside the button, let's just say increase layer. And now I would want to set up a function that is going to be a complex increase. Why am I calling this a complex increase, because I would want to add a little bit of the timeout. So essentially, once I collect, there should be some delay. So once we click will set up two seconds delay, and only then the value should be updated. In a process, we'll see why would want to use that functional updater warm. Now, let's first set up the onClick. Let's say on click over here, and that is going to be equal to a complex. Let's call it my function, the increase complex increase over here. Now of course, we do need to create a VAT function, because now we're just referencing. So let's say const. And non complex increase, that is my function. It's not going to be looking for any argument. However, in here, like I said, I don't want to simply call my set value, what I would want is to go with set timeout. And then remember, in the set timeout, we needed to pass into things a callback function, which is going to run push in a certain amount of time. In our case, that is going to be two seconds. And in here we just pass in that value. Two seconds. Well, we in our set timeout we have the callback function that is going to run in two seconds, just remember that as far as the Time, we're passing here to milliseconds. That's why for two seconds, we are going to pass in 2000. And then within the callback function, this is where I would want to call my set value, because that is my function. Now in this case, again, I'm going to go with a simple way, where we have the value directly in our set function. So in my case, I'm going to go with set value, and value plus one. And now million dollar question, do you think once you click three, four or five, whatever times that will, right away update after those two seconds each and every time or there's going to be an issue. And you can probably already guess, since we're setting up the whole example, that there has to be a gotcha. So let's try it out. What I'm gonna do right now is click three times. And the moment you click, you notice that Yeah, after two seconds, something happens. But essentially, I have clicked only once, meaning my value only increased by once. So why is that happening? Well, let's think about it. So we're grabbing here, the value, correct part, we need to understand that this set function is a synchronous. So what happens is the for example, I click three times, all these three times, it thinks that the value is zero, or in this case, if I click it right, now, of course, he's going to think that the value is one. So again, I can click three times. And yeah, is going to increase but again, only by one. Because all those three times, when we call this set value, we'll still be looking for at all the value, meaning to one, or whatever. So essentially, we're not using the current value in your state, because what should happen is each and every time we click, we grab that previous value, that was just right there before. And then we update. And this is the case where of course, we would want to use that functional approach. Now how does that work? By the way, I'll leave this for your reference, just so you can have it later. And the way it works, we go with set value. And then instead of passing directly, that new value that we want, we pass in the function. Now what's really interesting about this function that as a parameter, it get that old state value. So right before the update, now, what is really, really important that it gets that current one, and you'll see that in a second. So in this case, it gets the one that is actually correct. Now the one that is called, for example, two seconds ago, now, it gets the current one. So of course, in this case, what we can do is we can increase and we'll see how our values update right away. And since it is a parameter, you can call it whatever you want. But pretty common convention is going with pre state or pre value, whatever you'd want. And then whatever you're going to return from this function is now the new value. Now this is very, very important. Because if you leave this on the farm, and of course, your whole functionality will break. Now I know what you're thinking, you're like, Well, why would I ever leave this undefined? Well, also keep in mind that you can start setting up here, some kind of conditions based on something really small gotcha is that if you will return undefined, meaning if you won't return anything, and we know already that in JavaScript, functions return undefined, run, your whole functionality might break. So just be careful, when you're setting up this function, whatever you'll return from this function will be that new set value. And if it is undefined, well, when is going to be a problem. So in this case, what I would want is to go with brief state. So whatever is my primer, and my last one. And now what you'll notice is that if I click I don't know, 10 times, it's going to wait for the first one. And then of course right after that, notice how we nicely increase the function, meaning the value, and it is happening, because in this case, we are getting that correct. Old value. So right before the update. Previously, when we use this one, no, we were not getting the correct value. Because if I clicked for example, three, four, or whatever times, I was all the time getting the same value is when I call all my functions. In this case, it gets the current one, one that is right before the update, and what you're thinking, you're like, Okay, why we haven't used the function before? because let me tell you right away that yes, you can use a setup for all the previous examples that we used before. And you'll see some people that prefer that type of method. Now, it is not set in stone, of course, in this case, you have to use it. Because, of course, it wouldn't make sense, we show the error that we're getting our, in some cases, the ones that we covered before, you can use the value way of doing that, where you just pass in the value. But just so we all are on the same page, let me change this around to for example, I don't know, final one mondas case, I'm going to look for a re example. And we'll reformat a little bit, just so you understand that yes, you can use function in any of the examples that we covered, whether that is this one, whether that is the second one with array, or with an object, and you might see some people who prefer doing that way. Now, whichever way you choose is up to you. Some people choose to use all the time function, some people just use it whenever it is definitely necessary, which of course, would be this case. And the way we're going to do that is simply we'll change this around, I'll say that I'm going to be looking for the final one in this case. Now keep in mind that of course how we'll delete it, meaning I'll leave the final that was there before, I just want to showcase that, of course, we can use the functional approach as well. So I'm going to go with you stay here. And I'm going to go with final this case, I'm going to do the array example. Since I changed this around, we're going to go with final here. Now that is my array. Remember, the functionality should still work, where we can remove one item working, we can clear all of them. And now let's navigate to that final one. Again, you don't have to do it with me, brought in markers, I'm just going to show cares that, of course, we can refactor this, using the functional approach, where remember, we use the sub people. Now what I'm going to do is just instead of the new people will say here yeah, that we will pass in the function. Remember, whatever we return from this function is going to be the new value. If we really needed to or wanted to our guess we can just set up the whole functionality here within this function. Sure, what I'm going to do is just grab everything that we currently have within the Remove item and move it to the function within a set people. Now in this case, again, we're not really depending on that value. But just to showcase that, of course we can use it, I will go we people. So that is going to be my new or I'm sorry, the old value that is coming from the state. And of course, I now filter it, or you're not more just say old people, old people. And we will refactor it a little bit. So old people. Now again, we filter it, and then whatever we return, that is going to be our new value. So once I save Notice how I can still remove the item correctly, like I did before. However, in this case, of course, we're using this function approach, where again, we're getting the parameter that is our old state value, so right before we're updating, or you can maybe also say, the current value of that state. And then whatever we return from this function is going to be that new state value, and just showcase where you can set up a bug. For example, if I say that I don't have the return, sorry, fall common. So you'll notice that the first time our remote something, I just have the bananas happening in my application. Why? Well, because now from this function, I'm setting up my people my shared value to be undefined rather why it is very, very important for us to always return something from this function, and that something will be that state value. Again, just to reiterate, we have multiple options, we can either pass in the value, however, there is going to be some cases or or some people who prefer using functional approach all the time, where you can pass in the function in your set function. And then you can have the parameter and that parameter will be that current state or previous state right before the update. And then you can set up some grand functionality, whatever you would want, and whatever you will return From that function will be that new state value. While spending time in tutorial will, is nice, you'll only get better. If you start applying the concept we just covered by building something cool. That's why I would highly highly, highly encourage you to check out the React project video where we do just that. More specifically, you're looking for project number one, the birthday reminder, if you want to see some of the projects, we're going to build in the projects video, just navigate to react hyphen, project dot nullify dot app. Now it is still working progress. time when I'm recording this video, I only have one project. But don't worry. By the time you'll be watching this video, of course, there's going to be more project. I purposely structured them in a way where we build the easier projects first. And then as our topics in tutorial are getting more complex, we right away have the corresponding project that emphasizes the knowledge we just learn. And then if you want to check out the apps just hover over the card. And of course click it on this is going to be the app that we're going to build. Now I also would like to mention that if you're interested in more corresponding projects, for the remaining of the topics, and tutorial project, navigate to README markdown file. And here you'll find the project that relate to the topic. So like I said, once you learn use state, I would highly encourage you to go out and work on birthday reminder, then, once you will learn use effect and conditional rendering, of course, there is going to be some project that you can practice on. Again, this is still work in progress. Because as I'm recording, I only have two projects done, then by the time you'll be working on the React tutorial, there is going to be more project that correspond to the topics. And I also want to let you know right away that some topics won't have the corresponding project, for example, prop drilling, so keep that in mind, just follow the roadmap in the readme. And I'll also leave here the link for the project video. As well as the link is going to be available in the description of this video. Not bad, not bad. We're done with the first part of our tutorial, the use state hook. Hopefully you completed the project as well, because it will help solidify all the knowledge that we're learning in tutorial, because at the end of the day, we can stay in tutorial will for remaining of the days. But if you won't know how to apply that knowledge, as far as building project, it is going to be somewhat useless. So even though it's not mandatory, technically, you can just keep on going through the tutorial, I would suggest every time we are done with some specific tutorial part, just go ahead and do the project that I'm suggesting. Because at the end of the day, if you won't know how to apply them to build a project now, and we can sit in tutorial Ville all day long, but it's not going to make much sense. And our second tutorial topic is going to be the second most use talk. So like I mentioned previously, the use state and use effect are going to be most used hooks. And now we finally arrived at the second hook the use effect. official explanation of use effect hook is falling where it allows you to do the side effect. Now before you freak out, frantically start searching for urban dictionary. Essentially, when we talk about side effects, we talk about any work outside of the component. Now that work could be changing document title, that could be signing up for subscription that could be fetching data that could be setting up a event listener and stuff along those lines. So every time you think of use effect, think of work outside of the component. And similarly to our first topic. Of course, we do have the folder in tutorial, and we're looking forward to second folder and name is user. And then of course again, we have the final folder where we have complete code. And then we have a setup folder where we will set up our examples. And the file that we're looking for is this use effect basics. So what I would Want you to do first is in the app j s, again, come up with the name my case, it's going to be a setup, just so you know that we're working on a setup folder. And then you're looking for tutorial, you're looking for us effect folder, vendor setup. And the file name is one hyphen, user, and learn basics. And once you render the component, you should see in the screen, use the fact breadsticks. And once that is done, of course, let's navigate to the file. Go ahead and let me reiterate, it is in tutorial, then use a quick run setup, and then use the fact basics js. So that's the file we're looking for. And just like we use state, we have two ways how we can set up our hook, we can either import it and notice again, areas a named import, or remember how we did react dot and then use the foot. So that is also an option. Now, by default use effect arounds after every render region, every time we re render a component use effect will run. So that is going to be by default. And there's two more comments that I will cover the cleanup function and second parameter, whole area is going to be more important in the later videos. So first, let's set up I guess, some kind of use effect. So we have our function body, again, we go with use effect. And then the way use effect works is we pass in the callback function. So we have use effect. So that's the hook. And then within this callback function, whatever functionality will place will run after every render. And just to showcase that let me go with log, and I'll say render component here. And then I will log as well call us. So I'll go here, call us back like so. And then if we'll open up the console, more you should see is around their component. So we have that. And then of course, we have the call use effect. So as you can see, once we render the component, we also call the use effect. Now the reason why you see these render component wise is simply because in the setup in the index js, we have this react strict mode. So if I move this out, if I remove it, you will see that only once. So basically that is their setup. So as you can see now we have only render a component once. So if you're wondering why you will see once in a while, the render component twice, essentially whatever we played as far as the function body, it is because of the strict mode. Right? So let me close the sidebar right now. And let's talk about the use effect. So at the moment, we have only simple console log. And by the way, yes, even the console log is considered a side effect. I know it sounds funny, but that is true. And once we are on the side effect will what we would want to do, for example, I would want to change the title or the document title. So the moment I react up, can we do that? Well, let's try it out. I think I'm going to close the console. For now. I think I'm going to come up with a button. So in my JSX, I'll set up a button, where essentially we click on a button, then we increase the value, we will set up a new document title that shows the messages, not say new messages. And of course the value will be equal to whatever is the amount of times we click on a button. Here. Let's do this way, we'll go back to a react fragment. And in here, we'll type out heading one, where eventually there's going to be a value. And let's go right away with the button class name btn just for styling, on click, we will increase the value. Now of course we haven't used the use state yet. So let's go here with const non value, then set value function set value, not as equal to use date. Again, we'll start with a zero. And of course, once we click on a button, what I would want is to increase that value by one. Now I'm not relying on the previous values. So we'll just pass in the new value in the set value. Here was just right click me. Click me where we have the button. So of course now I have the value. If you'll notice moment or click, couple of things are happening. So in my console each and every time I click, I'll have that render component. And then I'll have that call usually. So each and every time we click, this is exactly what is happening. Why is that happening? Because every time we click the button, we invoke set value correct. Now what happened with the use state, you stayed the two things, a, preserve the value between their fingers. And the second one is triggered rerender. So every time I click on a button, I'm essentially running my use effect. Because remember, by default, use effect will run after every render. So each and every time we rerender, the component, we are running essentially this use effect hook. That's why in the console, we can see call use effect, call us call use effect. Now, of course, let's do some more interesting side effect, where not only I would want to console log, but I want to go with document. And then title amount is going to be called to a template string. Now say new messages. And in this case, I'm going to use parentheses, Van out want to grab much that value, which you'll notice that the moment we render the component, of course, we call the use effect, we can see that in console. But I can also see here where I have the new messages. Now, I have new messages. And now I'm using my state value, which of course, is zero. But now, every time we click, notice how we're updating the value here, we're calling the use effect after every render. And of course, the functionality that is within the use effect also runs because now I have document title. And our new messages is three for each and every time I increase. Also, my title changes as well. Now again, just to reiterate, use effect is used when we want to set up a side effect. And that is some work outside of the component. So think data fetching, think listening for events, think signing up for subscriptions, and stuff along those lines. And then by default, it will run after every render. And the way it works, we pass in the callback function. And then whatever functionality we set up within that callback function will run after every render. Now, this is nice. So we're updating our document title, each and every time we click on a button. And of course, we do that using the use of However, what if we would want to change our functionality a little bit around? Where What if I wouldn't want to showcase that I have zero messages? What if I would want to do that only when essentially, I have value bigger than zero. So I only want to showcase that if I have the actual messages. So what I'm trying to say is, I would only want to run it when my value is bigger than zero. Because at the moment notice, of course, we render the component. And then since use effect runs after every render, well, of course, we right away, do the functionality that is within the use of our rational thinking would be something like this, where if value is bigger than zero, then of course, we would want to run yours. Sounds pretty reasonable, right? But remember, seems like an eternity ago, when I talked about general rules of hook, I said that we cannot we cannot place hooks, as far as conditionals. So this, we right away have a big fat complain, because we cannot call hooks conditionally. And at that time, I said that it doesn't make sense for me to place a use in the conditional. However, I will do that once we get to a use effect. And of course, we have finally arrived at the use effect example, which technically would make sense to place it in the conditional. However, we cannot do that because of the rules of the hoax. So just keep that in mind. Now, the question of course, is well, how we can fix that. And one of the ways we can do that is by setting up if and else inside of the callback function. So the point of this video is to showcase that even though You cannot place hooks in the conditional. Similarly, how we work with a set function where we set up a conditional, and then depending on the value, we called the set function with some specific value, the same thing we can do in the use effect. We're inside of that callback function. Yes, we can set up a if an if statement. So how is that going to look like? Well, in here, I could say if value is bigger than one, only, then I would want to update document title. So what happens notice on the initial render, nothing happens, even though we still call the user. So we still call it however, in the use of acne in the callback function, we have a conditional where I'm checking the value. And I only would want to update the document title if the value is bigger than one. So on our initial render, nothing happens. However, once I click your button, Now, of course, the value is one. So again, nothing happens. So I guess in this case, we can either look for bigger or equals, and you'll notice how now once the actual number is one, and of course, I'm also updating right away the title, because it matches my condition of without make sense, where we cannot place the hooks in the conditionals, something we already covered before our as far as setting up the conditionals. Within the callback function. Yes, we can definitely do that. It is not against the rules. So in a previous video, we covered how we can set up a conditional inside the use effect callback function. Our question still remains Is this the only possible setup where our user runs after every run? By default, yes, that is the case. However, you can also notice the two comments that I left here. One is the cleanup function, something we'll cover in the next video. And now I want to talk about the second parameter. What on earth is that? And essentially, second, brahmer is something that we add here, as far as the user factor. So we have our function. So that is the functionality that will run and return will call the user for. But as far as the second argument, we can also pass it here, a array, and that is the array of dependencies. So essentially, that is called a list of dependencies. And if we leave this blank, that just means that it will only run on the initial render. And now notice something interesting, where as far as our logic, it technically is looking for the value if it is bigger or equal than one. Correct. So it will run on the initial render. And then we have our if statement, of course. So essentially, once we save, this shouldn't update the title, originally, right? Because we have our if condition, how are we did call it, we can clearly see that, yes, we have call us. And that is, of course, coming from the console log. Now the first time I click, notice something interesting, where I clicked, I updated the value. But since I have that second argument, I have the dependency list, and I have nothing in there. Essentially, it is empty, it only runs on the initial render matters something very, very important that you should remember. So if you only want the user to run on the initial render, you just add that second argument, and you'd pass it as a empty array. That just means that it will run on the initial render. Now the second question probably is, well, can we add more stuff in there? Because it's fine. All right, it runs on the initial render, but maybe I would want to run it each and every time I change some kind of value. Now what that value could be, or here, we could maybe run it each and every time we update that value. So let's try it out. So in here in the dependency array, we just pass in whatever name is for our dependency. So in this case, of course it is the value if it will be text, you will pass in text, and hopefully you get the gist. So now once I say again, in rounds on the initial render, virus, beautiful, but now you'll notice that will also run once we increase The value show, once we increase the value, we change something about there's dependency. And then the moment we change something about that value, of course, then we trigger use effect to run one more time. Since in dependency array, we have the value. So each and every time we'll change something about this value, essentially, we will run the use effect as well. So that's something to remember where, by default, if you have no dependency array, the use effect will run each and every time the component get re rendered, including the initial render, that if we set up the second parameter, the dependency array, as far as the empty list, meaning and the array, then of course, it will run only once we render the component. And then as we start adding different values here, as far as different dependencies, then each and every time that dependency will change, if it is added to an array, then also use effect will run. And one more thing that I would want to add is that you can have as many use the fact as you'd want. So for example, in this case, we have one use effect that will run on the initial run there, also when the value changes, but nothing stops me from setting up another one. And then again, I have my callback function. And in this case, I will just set it up to be on the initial render. Now, I'm not going to do much, I'm just going to go with simple console log, and I'll say hello world. And what you'll notice is that, yeah, it runs on the initial render, just like the previous use effect of we have, however, a war on the second time. So each and every time I'll click on a button, you'll notice that use effect, the second one with hello world doesn't run, because the value is not in the dependency list. Hopefully that makes sense. And now we can talk about the cleanup function. Not bad, not bad. We're done with use effect basics. And now let's take a look at the cleanup function. Why would want to use it. First, I would want to change the file. So all this time we were working in use of basics. Now, of course, I would want to navigate to objects. And I'm still looking forward to set a folder. But now I'm looking forward to file number two, use effect cleanup. Again, it's still going to be a setup since I didn't change the name. And what you see on the screen is use the fact. Now of course, let's navigate to that particular file. So again, not the final one, we set up one. And in here, what I would want is to check for the width of the window. So we're still using years, on ladders. Good. But I would want to check the size of the window. And we can do that by setting up the event listener on the window object. Now first, let's set up some use state value. So again, notice we have imported use state and use effect. What I'm looking for here is const. Now online this size and set size, set size, and we'll use the US state that is our hook. And then in order to get the width of the window, we're going to go with window and the property is in there with now if you'd want to console log, you can just go with console log and check the size. And you should see some value over here. So let me open up the console. And of course it tells me here that is 484. Now of course, it's not going to change at the moment, we haven't set up the functionality. But that is going to be the whole idea where we set up the event listener on the window and as the size of the window changes, so does the value. Now first, let me open up a bigger browser window because it's going to be easier to operate. I'm going to go here with localhost 3000. Of course, I still have the same setup. Now in this case, though, of course the value should be different, correct, because of course the window is bigger. So as you can see it is 12 131. So now what I would want to do is to set up a some kind of return. So I guess again, we'll go with a fragment first. And let's type in one, we'll say window. And then let's write Heading Two, and heading two. We'll be looking for that size. So first, let's access the set value. And then let's the pixels. So we should see here a window and then whatever is the value, and of course it should match exactly one We have in console. And now let's set up a event listener on the window. For that case, we will use the use effect. So we're going to go over here we'll say use effect. And then in the use effect, what I would want, of course, is to pass in my callback function. Now that is true. And then within that callback function, I will want the event listener on the window. So first, I'll be listening for resize event, that's number one. And then we need that callback function. So essentially, a function that will run each and every time, the event will take place. So the resize one, and in this case, I think I'll call this check size. So let's write check size. Now the thing is, of course, we need to create that particular function. So let's create it or say check size. And as far as the function, it will, all the time, update the size. So all right here, set size, and then whatever is the value, get the inner width. So what we're doing here is we have the use effect, we have the callback function, and we're setting up the event listener on a window, each and every time, this event will take place the resource one, we will invoke the check size function. And as far as check size, now we just call set size, and we get the current width of the window. So let's see whether this is going to work. So the moment of course, this is 1463. Now let's see whether we can update it. And everything works nicely correct. So we can make it bigger, we can make it smaller. And each and every time I'm resizing the window, I'm getting the correct value. Because again, we have the event listener, we're getting the routers, and everything is beautiful. Or let me throw you a mind grenade. What if we will go to element? One will check event listeners? Or check for the resize one? Now, what do you think? How many will have there? We shouldn't have one correct. Now, does that look like one? No, it doesn't. And the problem with this one here is that eventually, we'll just have a memory leak, where the moment your app gets bigger and bigger and bigger. And if you have a bunch of components that are setting up these event listeners, left and right, it will cause huge problems. Here, there has to be a way where once we of course, exit, then we remove that event listener. Now first, we need to understand well, why is that happening here? Well, we have the use of correct, we have the window listener. Now, in the callback function. What are we doing over here? What do you think we have set size correct. Now what is the set size doing? It is triggering the rerender? Correct. Because the moment we invoke set size, we update the value. As far as the state value as far as the size. And what was used to doing, it was preserving the values, and it was triggering the rerender. So each and every time, we call this callback function, meaning each and every time we resize the window, we also trigger the rerender. So the moment we trigger rerender, then again, we call the use effect. Now if you want, you can just simply console log in, you'll see that in a console, where I'll say hello world, the moment we refresh, notice, technically we have one correct. Now we have one event listener. But of course, the moment I'll start adding some changes, you'll notice first of all in the console, I have a bunch of hello world. So each and every time, I'm calling the use of an Of course, if I'll check my events, and I fall refresh, I have a bunch of event listeners as well. This is where the cleanup function come into play. So every time we have this user, we also have an option of returning a function. So we go here with return. And as far as the function, wherever we place over here, will be invoked once we exit. And I think the best way to showcase that is adding another console log. I'll say clean up here. And let's set up a remove event listener. So we'll go with window and remove event listener. Again, we need to set up a resize on the same callback function. So we would want to remove once essentially, we are done. And what you'll notice right now is something really interesting We call the HelloWorld. course that is initial render. But what you'll notice, before we do anything show before we set up another event listener, because notice this is happening, as I keep changing the screen size, then we also call the cleanup function. So I think the best case scenario is going to be add in here console log. And I'll say render, burn here. We'll call this use effect, use effect. And then we'll have our cleanup. You'll notice how it works. So initially, we have the render correct, then we call the user for now, before, we call the use effect, one more time, we'll also clean up Shall we have our initial render, again, don't pay attention that there's two of them. There's initial render, then we invoke the user. And then again, once we trigger rerender, once we render the component one more time, before we call that user. So before we add that, another event listener, essentially, we clean it up, we remove that listener. And of course, we can also see that by the console log. So that is going to be how the cleanup function works. So yes, the use effect will run after each and every render node is of course, the default event. In this case, we're setting on the event listener, we're checking for a resize. Now, that will trigger the rerender. However, before we around the use of after that render, we will run the cleanup function first. So that's how the setup works. And you might make a good argument where technically in this example, we don't need to clean up function. Now, what am I talking about here, are remember, we had that initial render, we had that dependency. So for example, in here, I could say you know what, I would just want to run the user only once we render the component. And in this case, you're actually correct. Because what you'll notice that even if we comment out the return, meaning the cleanup function will still have only one event listener. So notice how I'm re rendering the component that is true. But if I check out the elements, I can clearly see that I still have only one event listener, because my use effect only runs once. Now, before you dismiss the cleanup function where you can say, well, each and every time on just this empty dependency array, you need to understand that the cleanup portion is very important, when we will start dealing with component appearing and disappearing, meaning there's going to be conditional rendering, where Yeah, at the moment, this component is all the time on the screen. So totally, honestly, this makes sense, where we just set up a dependency array, and we say, you know what, once the component renders, we will set up event listener, and life is great. However, we need to understand that there's going to be component that, for example, are displayed and they are moved. And the problem with this one is that even though it runs on the initial render each and every time, we will show and hide that component, it will add again, the window listener, or event listener or whatever side effect you added there. And that is something that I'll show you a little bit later, once we talk about the conditional rendering, just don't dismiss it. Even though in this case, here, we could have fixed our issue with this empty dependency array. Essentially, don't forget that it is a good practice, each and every time you set up a side effect is to also set up a cleanup function. So you don't make a big fat mash, by just adding tons of subscriptions, tons of event listeners, or that kind of thing. Nice. And once we have covered all the use effect works. Now let's put it to good use. And let's see how we can fetch data using use effect. On first what I want you to do is in the app j s, change the import a little bit. Now I don't think I'll change the name. But we're gonna grow with us effect again. And we're looking for the final in this case. Let's look for use a quick fetch data file. And once it renders, you'll notice a bunch of GitHub users. So essentially, this is what What we're trying to create, where there's going to be some title, we'll just get some default GitHub users. And of course, we'll do that using use effect. So now let's change it around to a setup. So instead of the final folder we're looking for to setup. And we should see on the screen fetch data, that's the one that we're looking for. I think I can close the console, it's not going to be necessary. And let's navigate to fetch data, I already provided the URL, if you want to double check what you're going to get back, you can just copy that and navigate to your browser, copy and paste browser will perform a get request. And as you can see, essentially, we'll get a array of objects. And then in each and every object, we have info about the GitHub users, I believe we're getting 30. But don't quote me on that. I might be wrong, but I believe there's 30. So once we have this particular setup, Now, of course, let's work on our component, where I think I would want to start by setting up some kind of state value. Again, we have the use state. So let's set up the users, I'm going to go with const users. Now I will need a set users function as well, users here, and that is going to be equal to use state. Let's start with an empty array, that is going to be my default setup. Then, of course, in the return, let's also add some kind of heading three. This is where we'll place our users, eventually, we're below it, we're going to go here with GitHub users. All right, that's a good start. And now let's set up our user. So I'll set up my hook. So use effect. And then I'll have my callback function, of course, share within the callback function, what I want is to perform a fetch request. Now we have multiple scenarios, we can set up the function here. So you can just start typing away, that is always an option. Or you can set up a separate function. So in my case, I'm going to go with separate function for a very simple reason that I'm going to use async await. And that is one more rule that I would want to mention that you cannot, you cannot make this function async await. For simple reason that Remember, a sink await returns what it returns a promise correct. So if I'll say here, a sink, right here, it is going to be an issue. Okay, this will work, there's going to be a big fat or because you use a frickin cannon to be a sink, it cannot return a promise. Because remember, in the previous video, we talked about that cleanup function. So use effect is looking for that, not for the promise. That's why you can either set up async await inside the callback function. Or you can just set it up as a separate function, which exactly what I'm going to do. So I'm going to go here with cons, and then I'll call this get users. Now, like I said, it is going to be a sync function, because I'll use the async await syntax. And then within the function body, I'm just going to be looking for a response. So go with responses equal to await. And then I'll use the built in fetch. But of course, you can use axios, or some kind of external library as well. By the way, I think during the projects, we'll use the external libraries, because it's just going to be a little bit easier. And then we already know that within the fetch, we just need to pass in the string, meaning the URL, which of course, he is, right now, the API github.com, and then forward slash users. Now we already know that as far as fetch, we would need to run the JSON because we're looking for that format. And again, we can await for that. In this case, I'll go for users and is equal to await or response. So that is, of course, my variable. And then I run the JSON. So my key thing here is getting this users. And before you're on set users, let's just do a little bit of dance, where I'm going to show you what would be an issue if you just directly call set users. So first, let's start by console logging, whether we are getting the data in the console. And then once we get the data, then of course we'll discuss what steps do we need to take? So in the console at the moment, I don't see anything. Of course, the reason why I don't see anything, because in the use of I didn't call it. So let me call get users let's invoke it. And now our console Yeah, I have 30 users will Life is beautiful. Like I said, it is an array. And each and every user in that array is an object. Now, what are the steps that I would want to take? Well, I would want to use set users. And of course, instead of this empty array, I would want to set it up as the users that I'm getting from the GitHub, correct. Show, instead of this empty array, it's going to be array of 30 years. And then once I set her up, then in the JSX, I will iterate over my users. And then for each and every user, I'll just set up some type of return, meaning there's going to be named, there's going to be an image, and all that good stuff. Now, before we do anything, I would want you to think about something. So I'll purposely placed this in the comments, because I don't want you to run this right now. But what do you think is going to happen if we go with set users, and then we pass in the users? And let me tell you right away that as far as the code, this is correct. There's nothing wrong here. So I have my GitHub users, and then I'm just using my set function, and then passing in the GitHub users. But there's a different problem. What do you think is going to be a problem? Well, I have my use effect, correct? It runs after every render. Now, again, I've said this already 30,000 times, but it's very important. What is the use state doing? It preserves the value. And it triggers rerender. So what do you think is going to happen right now? Everything was fine. With console log, we did not trigger a rerender. That was fine. But with this one, what are we doing over here? So we're getting to users, then I call set users, I update this, I update users. Now, what is that doing in return? that triggers a rerender? Now, what are we doing in the rerender, we're getting users. And then again, we're setting users. So essentially, we're sending up a infinite loop. So if you're on this, essentially, your browser will clash. Now, it's not the end of the world. But that's why I commented out because I don't want my browser to crash, if you want to test it out, be my guest. Again, it's not the end of the world. But essentially, you will have the infinite loop. Because in your function that you call in the user fact, you are triggering rerender, because you call set users. And once you trigger rerender, again, you call user, and on and on and on and on. So what is the solution? Simple. Out here dependency, right? Correct. Something we already talked about. And in this case, I only want to run once the component renders. So I'll add empty, dependency West. Correct. So now everything should be fine. Where I think I can just comment on the log or your reference. And I can call set users. And if I don't have the infinite loop, then life is great. So now, of course, what I would want is iterate over those users. So again, we'll set up curly braces, we'll say users have no map. So we're mapping over for each and every user. Of course, I'll have my parameters. So call this user. And as far as the return, I don't know, I'm going to go with a list item. And you know what, I think I'll place this in the unordered list, showed me fix this a little bit where I'll be on our list. Let's add a class name. And by the way, this class is coming from the images, just adds a little bit of styling. And then let's wrap our users in that unordered list. And then for each and every user, course, like I said, I'm returning a list item. Now user is an object, and I'll right away, set up my destructuring, where I'm looking for ID login, and then avatar, and then URL. Now if you want to console log, you want to see what is the user Be my guest. But in order to speed up everything on won't do that turn here, I'm going to say HTML URL, these are just the properties that are on the object. And that is coming from my user. And as far as the list item, remember each and every time we have a list, we needed to pass this unique key. And of course, this is what I'm doing over here. And then for the user, or want to have the image as far as the source is equal to the avatar, underscore URL. And as far as the alternative, you know what, let's pass in the login, just so we have some reasonable value. And let's go with a dev. So right next to our image, we're gonna have a dev with a hearing for and then let's place here to login. Matt is going to be My name, once I save, it should look something like this. And then right below it, let's add a link that just links back to a user profile. So here we will go with HTML URL. Let's just type profile like so. And we are in good shape, we're essentially within a matter of minutes, we set up a data fetching, where we're looking for get up users. Again, the biggest takeaway would be the fact that if you have some kind of functionality within the function, whether that is directly in a callback function, or within one of the functions that you're calling within the callback function of the use effect, if you are triggering, re, render, make sure that you the dependency, alright. So our either you only run it once the kimono renders or if certain values change, but be very, very careful of how you set this up. Because essentially, if you will fail to do that, then you'll get the infinite loop. Again, I keep on repeating, it's not the end of the world. But it might just get annoying to keep on restarting your browser, just because you're not checking when you are triggering the rerender. And of course, when the use effect runs, as well done on completing the use effect part of this tutorial. And before we jump over to the project and start practicing by building something useful, I would want to cover one more topic. And that is not going to be a hook or it is going to be a very important topic. And that is conditional rendering. And essentially, what that means is that we will display different components or different content based on some condition. And then once we cover this topic, yes, then we will right away, jump over to project and practice it. So let's start first by importing a specific file. And you can probably already guess that we're looking for folder number three. And name is conditional rendering, of course, we're working in setup. And we're looking for this multiple returns file. So here in the app j s, I'm going to go with import. Again, I'll call this setup from online, we're looking forward tutorial, we're looking for conditional rendering, setup, of course. And finally, the multiple returns file. And I'm here, let's run the setup component. And let's see what we got. And we should see on the screen simple, multiple returns. So what is happening over here? Well, if you take a look at the component, you know that it is a function. Correct? Now, what can we do in a function as far as returns? Well, we can have no returns, of course, that just means that we're returning undefined, which will be an issue or you fall comment this out, where you know that there's going to be a big fat issue. However, what it also means that we can have multiple returns based on some condition, I can, for example, return one piece of content. And if the condition is not met, then of course, I can return something else. So how is that going to look like? Well, I could simply say before the return before the multiple returns, I can just return a HelloWorld correct. Everything is going to work nicely. I have hello world. Why not? Because in JavaScript, we know that once we have our first return, and of course everything else is just ignored. So those would be the basics. However, what we're looking for is some kind of condition. And of course, based on that condition, then we are returning some type of content. So how is it gonna look like well, the most basic example, we're just gonna go here with loading and then set loading. Now by default, we'll set our loading to be true. So I'll say yeah, loading is true. And once I have my state value, I'm simply going to set up a condition where if loading is true, ran out one to return a Heading Two, with text of loading one show. However, if the loading is not true, Van I'll simply return the heading two with multiple terms. If the condition is met, van, we are returning a heading two So however, loading data that if the condition is not true, which of course, we'll change it in a second, then we'll have our multiple returns. So the moment I have loaded, Why? Well, because the loading is true. So now, of course, I'm returning this heading two, please keep in mind, you can set up the whole app in here. As far as this return, nothing stops you from adding Dibs from adding models, or whatever you would want. I mean, you can go as crazy as you feel. Okay, just keep in mind that if the condition is not met, then of course, you have your default one. So your turn the Heading Two, with multiple returns, again, you can set it up the whole application here, the way we can test that is by just passing in false. Now, of course, we have multiple turns. This is somewhat typical, where there's some kind of loading state, you literally can't check for loading, or if the user exists, or something of that sort. And then if the condition is met, then you display one part of the application, one giant component with multiple other components. And that if the condition is not met, then of course, you display a signup page, or something of that nature. So hopefully, the basics are clear. Where since it is a function, we're going to multiple returns. Now, of course, if we don't set up the condition, then we'll just return the first one, because all the other ones will be ignored. How if we start setting up conditions, nothing stops us from setting up returns within those conditions. So if the condition is met, we'll have one return if the condition is not met, and of course, we have a different type of return. Now way, of course, you can make your components way more dynamic, because now they're not static. Now they return based on some type of condition. Once we've got basics out of the way, of course, let's take a look at the more complex example, where we're performing some type of data fetching. And then we have the loading state, we have the error state. And then we have the final state if everything was successful, because otherwise, you're probably thinking, well, there's probably no scenario where I will be statically, changing the data from true to false, meaning, of course, I would want to do it somehow dynamically. And one very good use case is by setting up some type of data fetching, which we already covered in years. But of course, in this case, it is just going to be a little bit different, where I would want to still keep my loading. So that stage, we still have our set loading, that also can stay. And as far as you state, you can go with true initially, or you can go with false, that is up to you. In my case, I'm going to go with Trump. So initially, the loading will be true. And then I would want to more state values. And those are going to be error. So in here, we'll say is our and by the way, again, this is one of those common scenarios, where a convention is to use this is if you have some kind of bullion online, whatever name, again, there's no rule for it is just something that you will see, I would say somewhat a lot more people just add this is whatever is the name. And then of course, we still have our set function. But again, it is just a naming convention. If you don't want, you don't need to follow it. And again, we're setting up a state value. And by default error will be false. And let me add that is in front of the loading as well. So it's loading. And then set is learning. And the last one will be user. And essentially, as you can already see by the URL will just be checking for one GitHub user. And if the user exists, beautiful, will display some data, just some very basic data. If we are loading and of course will display one content. If there's an error, there's going to be another content. And eventually, if there is a user, then of course, everything is great. The user will be displayed. And in here, we'll have a set user and use state. And we'll go with default user. Awesome. Now, like I just said, we'll be performing a fetch request. And we already know that we will need a user. That's why it is important. But before we do anything allegedly decide, well, what we're going to display based on those values, and we'll start by loading and we'll say if is loading is true. And just to showcase that we can add way more than just the heading to, I'll just place a div. Again, let's just signals that you can have as big of as the return you'd want over here. So let's just write loading, and then dot.so. That happens if the loading is true. Now in this case, we also have the is error, correct. So in here we go is error. Again, on just skip a little bit by copying and pasting. And now say there was an error or error, something rather nice, short and sweet. So let's say that, of course, now we have loading. Why not because this is true. All right. And then as far as there, it is false to begin with. And then eventually, we have the default case. So if there is no loading, if there's no error, then of course, I would want to display my user, which simply will be a div, same way, where we have the heading one, I'll just display the user. So you can probably already guess that, if I'll set my loading to be false. Now, none of the first conditions are met. So we just go with the default cache, where we display our user, but the moment loading will be true. And of course, it will be displayed. So that is good. That is going to be our return. So now let's set up our fetch request in the use effect, where we will control our conditions. So let's go with use effect. Let's pass in the callback function. Now, our right away set up a second argument, I already covered why we're using it. So please, if you need to go back, go back to the last video of use effect, where we covered that in detail. Because I don't want to repeat myself, all right away at this empty array, meaning it will just run once. Once we do it, let's err on fetch. Let's go with URL. As you can see, in this case, I'm not using async await. And I'm typing everything within a callback function, just to showcase that, as always, you have multiple words, or you can achieve the same thing. So you don't think that you always need to use a separate function that is async await. Now, that is my preference, because I find the syntax to be more straightforward, but you don't have to. And then we know that with French, we have that then because of course we're getting back the promise. And then we still need to go with our JSON. So let's go to response. And now I want to return response. json on my and also I could set up a catch. If there's error. Let's just start by console logging the error. There's going to be a little bit of code in here. Because as far as the fetch, you know, has a gotcha. Now at the moment, we fetch everything we return JSON. Beautiful, what are we doing after that? Well, in between, we'll set up another dot event. And here we should have the user. So let's set up our function again. User for the time being, let's just log whether we're getting the user. So let's say right here. And then if we inspect, we should see a user now of course we do. So that is our object. So we successfully set up a fetch request. So now the question is or how we can start operating with these vowels? Well, first, we need to understand when are we calling this function. So in my case, if I said loading right away to true, when I would want to change it, well, I guess when I get my data, correct. So once I successfully my user, then of course, I am good to go. Now, if of course the user doesn't exist, then it's going to be a different ballgame. Shown here, let's add curly braces, like so. And now let's just set up a user first. And then let's hide that loading. Now I already know that user will be here and login. That's what I would want to actually display. So since the user is an object, I'll just say const. And I'll be looking for the login that is coming from the user. And then I have two functions. I have set user and then I have set is loading, since my initial loading is true, since it is shown. Now of course, once I have the user, then I would want to hide. So first, I'll set up set user and I'll pass in my login. That's the only thing that I'm looking for. Second thing is set is loading. And now of course, I would want to set it equal to false. Why? Well, because I have my data correct. Instead of default user, now I have my login. Now I have the name of my user. And then once I set the login, and of course I can right away call set is loading. So once we'll save, we'll notice that we have our initial state of loading. And then once we have our data, everything is exactly like we expected. Okay, so that's the first thing that we can do with multiple returns, where we have a loading state, which is either displayed right from the get go. Or another way, you could do it like this, where you say false. So technically, it's not displayed. But when you set up your fetch, or right before, I guess, we can set up loading. That is true. So that is another option that you can do. So let's go here. So it is loading. And we'll set it equal to true. And now what you'll notice, first, again, we have this for split second loading. And then, of course, eventually, we change the state, we say set is loading is actually equal to false. And then of course, instead of is loading, which was true in the beginning. Now we just go with our default one. Okay. Hopefully that is clear. Now, again, I'm just going to go by default, set it to true. And then here, I said, set is loading false, which is remembered, you have this option, as well. Now, if you want to see that loading for longer, the only thing you need to do is just go to New Window, run again, or start a localhost online, I'm going to go with 3000. And in here, we can just slow down the network a little bit, just so you can see. We do that in network. And I'm going to be looking for three G, the first one online, once I refresh, notice, there's going to be a loading dadadada dot. And then once we get the data, then of course, we fall back. Hopefully this is clear. As you can see, it's not like every time we'll just do that manually changing these values. Notice how this is happening dynamically. Now, one problem with a fetch is that when you talk about this error, essentially, you're not talking about 404, for example, you're talking about the networker. So what I'm trying to say is, if I add here, Ash, not technically, that kind of user doesn't exist, but it is not going to trigger my error over here. Okay. And this is why we'll have to do a little bit of dancing around, where when we are getting the JSON right before that, essentially will check what is the status of our response. Again, this has nothing to do with react, it has to do with fetch, where, as far as built in functionality, it doesn't trigger the error if the status is four or four, which means that there is no such user. So how we would fix it, like I said, we would set up all here curly braces, because there's going to be a bit more functionality. Here within the curly braces, I will check what is the status of my response. And if the status is between 203 100, then I would want to return JSON, because I know that everything is correct. However, if the status is not between two and 300, then of course, I'll throw the error. So then eventually I'll call this set is again, for example, with axios, you'd have different setup because axios deals with those kinds of errors. But as far as fetch, when you talk about catch, you're not catching here, the 404 b not found, you're just catching the networker. That's why we're doing this whole setup. Like I said, I'll go with response and then status. Also if it is bigger or equal to 200. And let's do the AND operator response, and status status, less of 299 299. If that is the case, then I would want to return my JSON. So say here return all look for response. json server that is the case however, if it is not a case, if it is four or four, like we have over here, then I'll set up my house. Again, I'll have to set is loading to false, because initially in my case, it is true. Then next, we would need to set is error. So now of course I would want to try That state set his error. And now of course, we're setting it equal to true. So now we can already guess that, where we have these multiple returns, this will meet this condition. So his error now will be true, correct. And once that is the case, we should see this error dadada. And then again, it's not a reacting, but I'll also throw the error. So I'll say here throw new error. And I'll go the response. And then status text. Usually, that's where we can find more info. Of course, this is not correct, it needs to be. And once we save, notice, now we have the error. So we have error data. So first we were loading, you can clearly see that once I refresh, for split second, we're loading. And then since our URL is incorrect, since there is no user, we are hearing the error, of course. And then since we're hitting the error, now we're displaying Dev, and then heading one with error dadada. And, as a side note, of course, you can place your spinners or whatever you would want. So once we start working on more interesting projects, you will see how that works as well. But essentially, the main idea is following where we can have multiple states. And depending on that state, we are setting up the returns. Again, keep in mind, you can return different components, you can return a bunch of HTML elements, or whatever you'd want. This is just a most basic example. Okay, hopefully that is clear. Let me go back to a proper user. And now as you can see, I first have the loading, then since there is no error, I'm just setting up the user and removing the loading, because I said set is loading equal to false, beautiful job. And up next, we're short circuit evaluation. Hopefully, you're clear with that concept, because it is coming from the JavaScript now I will try to cover the basics. Or if you need to brush up, then please do that. Because again, this is just straight up JavaScript. Or of course, we will take a look at the React implementation of setup. And we're looking for conditional rendering, learn we're looking for setup, of course, and short circuit file, we save there is short circuit. Now of course, we can navigate to that particular file, file number two, and this is what I'm talking about. If you need to Google hard works and draws to please do so. Because again, everything we're going to talk about in this video is based off of that. So we have short circuit evaluation. And the reason why would want to use it because in react when we talk about the JSX, we talk about the fact that it has to return a expression, correct, meaning has to return a value. And that's why we set up a expression. So for example, if I have here, a fragment, and then within this fragment, if I would want to set up a if statement, where I have the expression, this won't work, because as far as if it doesn't return a value. So if I'll try to go here with console log on, say hello world, it's not going to work. And it's not because I didn't pass any condition over here is just not allowed in react. So this is why we will heavily work with short circuit operators, as well as the ternary operator to display something conditionally. Because we already covered it, of course, we have multiple returns. But what if I would want to have a one return. But again, based on some condition, there's going to be either some data shown or hidden stuff along those lines. So first, I'll comment this out just so you can see that this will throw an error. And now let's set up some state value. And also, let's set up some returns. So first, I'm going to go with some kind of text and I'll say set text function that will be equal to use state and then it's just going to be a empty value. And now notice here I have some stuff that has been commented out. So on commented an aria first value, the second value, and the first goes we have the OR operator and then in the second case, we have the AND operator and now let's just see what What are the values, I'm going to go with heading one, I guess, I'll just get the first value. First value. I'm going to go with a heading one one more on, let's just look at the second value, second value. And once I render, I can see that the first value is equal to a Hello World. And the second value, I just found the value. And basically the way it works in JavaScript, when we're talking about the or on operators, for example, 40. Or if this is false, the meaning false. And of course, it is false. Because it is an empty string, then we essentially return the second route. That's why where we have the empty string that is fuzzy. So that evaluates to false, then we have our operator, and essentially, the second value, the one that is right, from the OR operator will be returned. That's why when we take a look at the first value, that's where you can see the Hello World. Now, if I'll change this around and add one letter, meaning now it's not going to be a empty string, now, it's not going to be fuzzy. Now, essentially, it will evaluate to true, you'll notice that now the value is k. So since this is truthy, now, it's not going to return a second value. Now, essentially, it will return that first one. Now, when we talk about an operator, it works a little bit differently, where if this is truthy, which of course is now the case, then we will return the second value. Now, if it is fuzzy, like we had a previous case, violin is going to return that first value, which of course, in our case, is that empty string. Okay. Now, of course, you can console log, and you can see second value in a console, we should see that a is going to be empty, essentially. Correct. So if it is true, then it returns this one. If it is not true, then it returns of that first one. Okay, so kind of the opposite. One is the our operator, and then the second one is the operator. All right. Now, why am I showing you all this? Well, because we can use that when we're setting up the expression in the JSX. That's why it is so important. And I'll start by simply showing you the example of name. So I'll leave this for your reference. I think I'll comment these ones out as well, just in case you would need it present. Let's imagine this scenario, where what if I have a new one. And as far as the text, I would want to display that text that I have over here. But the thing is, I also would want to set up some kind of default, if it is a empty string. So if I go here with text, everything is great. But of course, says the text is empty string, and nothing is displayed. Correct. So now I can use my OR operator. And I can say You know what? If the text is halsy, then return some kind of default value, just like we were doing here with the variable. But of course, now we're doing that in react. Now say, if the text is there, awesome, great. If the text is not there, then please return john doe. And of course, since it is false, it routes false. And now we're turning this around. Now, if I add something here, if I say Peter, now of course, you'll notice that this is true thing. So now this gets returned. Okay? Now another thing you can do is of course, use the Add operator. Now an operator we use a little bit differently, where again, we will set up the curly braces. In here we're checking for the text value. And if it is true, then we're returning that element. Okay, so in this case, we were returning the element regardless, but using the AND operator, we can trigger the showing or hiding of the component or the element in this case. But you can also of course do it with components. So for example, if the text is true, then I'll say that I would want to display the Hello World. Hello World. Correct. Now if the text is not true, meaning if it is going to be empty The VLAN, you'll see that nothing gets displayed, okay. So that is the difference. In this case, if it is true, then of course, we display the first one, if it is false, then we display whatever is on the other side of the OR operator. However, with and it is the opposite. If this is true, only, then I will return this particular element. If it is not true, then you can see that, nothing will get rendered. And by the way, you can double check that by looking at the elements. Or notice if you're checking the route, you can see that you have the container, and the only one is played is this one. Because this is false, we use that is an empty string. That's why we're not returning it. And of course, we can also do the opposite, where I copy and paste. And I'll say, you know what, if this is false, then returning, so we can kind of flip it by using the NOT operator, that is also the possibility. And now you will see that of course, there's going to be a Hello World on a screen. Why? Because now in this case, I'm saying, you know what, if it is not true, if it is not true than returning, again, of course, we'll add some more dynamic setup a little bit later on. But just keep in mind that everything that we are going to talk about and use. And the examples and projects later on, is based on this short circuit evaluation that I covered a little bit in the beginning. So if you need to go and research that, please do so. But the way it works in react is when we use the wrapper, if this will be true, meaning if this is going to have rallied to true, then this value will be returned. Or if it is positive or false, then the value on the other side of the OR operator will be returned. However, when we talk about and if the value will be true. So if it will evaluate the true, then of course, we will return whatever he is on the other side of the an operator However, if it is going to be false, and of course, we won't return anything. Now we also have option to check for the opposite value. And that is also the case. So here the only difference is that I'm saying you know what, show the heading one, if it is false, which of course it is palsy, so it evaluates to false. So we are in good shape. So those are the basics of how react implements short circuit evaluation, my bad and bad. Hopefully, we are comfortable with short circuit operators. Next, I would want to add a button to the mix. So that way, we'll see how we can set this up dynamically. Essentially, instead of hard coding, of course, this will depend on the value. And mine will change that value using the button. And then also to want to talk about the ternary operator. And why is that useful? All right, so let's start, I guess by setting up our button. So right below the heading one, or Yeah, I think the heading one is going to be the best case scenario, we're going to go with button. And then again, a little bit of styling, so it'll say class name, not equal to A btn. And then inside the button will write toggle error, toggle on error. And now let's imagine that we're going to have some kind of state show, of course, this is going to be the error state. And then I'll toggle it using this button, show up where I have the text. And you know what, whether we're at this point, can just come in there mode, I'll create another state variable, it's going to be error. So I'm going to say is error. And then of course we have set function as well set is her man in here that is equal to a US state. And by default, it is going to be false. So by default, there is no or. And now what I would want is to set up some kind of element, same like we did with heading one over here, or you're not having we're gonna do the same one. Hopefully you have it for your reference. Because what I'm gonna do right now is just change it around a little bit, where instead of relying on text I'm learning to rely on is error. So I'm gonna say his error. And now what I'm trying to say is that if the error is true, then I'll want to display this hidden one. So of course we can change that. text as well. So say here error, and then three dots. Now, of course, the moment I save, I have nothing there. Correct? Why? Well, because here I'm checking whether the error is true. And we know that with an operator, only if this is true, and of course, will display the heading one, unless we the exclamation point. And of course, I'm checking if this is false or false. And then I'm displaying the heading one. So now of course, I can see. But I actually would want to only display If the error is true. And now I would want to use this button to toggle the error using the set function. And the way we can do that, is by turning on click over here, then again, we'll need our inline function. And also here, set is error. And then I'll use again, the exclamation point. And I'll say is error. So what's the code saying over here? Well, I'm calling set is error. But then on all the time grabbing the opposite value of the current is error. So currently, is error is false. Correct? That's the default, how the first time I click it is going to check. All right, what is the value that is false? Sure, let me flip his error to true, because that is going to be opposite. And then of course, the next time when it is already true, then again, we run the same functions. Now, of course, it will change it back to false. So essentially, we set up a toggle state, where the moment I click, notice, now I'm displaying the error, why not because I change the value in the state, I change it from false to true. And I think this would be a good use case for react dev tools. So let's go with localhost 3000. And remember, we had to look for components here. So let's say where it is where it is profiler components. And of course we have short circuit, and check out the state we're gonna have state is false. So the moment I click, notice, now it's going to be true. Okay. So again, once we click, we flip it back to false. So essentially, this is how we're toggling the state. And as we're toggling the state, we're also toggling this heading one, because we're using the AND operator. And only if this is true, when display. If it is false, then of course, we don't display it, right. And also take a look at the ternary operator. And the difference between a ternary operator. And the OR operator is the fact that ternary operator will give you two possible values. So for example, in this case, I'm checking for his error, only if it's true, then I'll display our ternary operator, we will display something if it is false. And then something else if it is true. Again, it is just a JavaScript thing. So if you need to go brush up on that, please do so you can Google it, or you can use my playlist. It's up to you. But essentially, we'll deal with the ternary operator syntax for ternary operators following where we have a question mark, then we have first thing that we would want to show if it is true. And then the second thing if it is false. So in our case, I think I'm going to do the same thing we use error. So let's set up the curly braces first. Again, we'll check for his error, whether it is true or false. And then the syntax for ternary operators following where we add a question mark. And then like I said, even this is true, then we'll have our first value. If it is not true, then we'll place the value after the colon. So in our example, what I would want to display Well, if it is true, I would want to display a paragraph. And I'll say some kind of tax. Now again, keep in mind, you can set up whatever you'd want over here, you can add 10,000 components that are sitting in one giant component. In my case, I'm just showing you with paragraph. But sky is the limit. Just remember that as far as text, I'm going to say there is error. And again, we go with three dots. So this is going to be the case if the error is true. Of course we know that by default is not the case. Now after the colon will place one will display If the error is false. So notice in here, we had no fallback case. We only display if this is true. In this case, though, we do have it know if this is true, beautiful will display the paragraph. However, if it is not true, not me showcase that we can set up something more complicated. I'm going to go with div within a div, there's going to be heading two. And I'll say there is no like show. And once we'll save, check it out. Now it says there is no error. Why not simple? Because error, of course, is false. Correct. So if it is false, then of course, we skip the first part, because we check what is the value 40 is error. And of course it is false. So we skip this one, the paragraph, and then we right away, go to the second value. That's why we have here, there is no error. Now the moment I will click, notice what's going to happen. So first, I'll have my error, we already covered up because that is of course, our operator, but then I have my paragraph with there is a error. So those are the ways how we can display elements or components conditionally in react, because Please keep in mind, we cannot use if, because if doesn't return the value, need to use something that returns the value, whether that is a short circuit operator, or that is a ternary operator. Alright, and once we're clear with ternary operator, now I would want to set up a small example where we will toggle the component in this case, and in a process, I'll try to hammer home, why we need the cleanup function. So there's going to be a little bit of repetition. Eventually, we will set up again, the event listener on the window. And I'll showcase why it is important to use the cleanup function, because setting up the dependency list empty is not always going to save us. All right. Now what we're looking for in the app, Jess is File Number three, still conditional rendering still set up, or in this case I'm looking for, and then forward slash, and then of course, show and hide. So the moment you're on it, this is what you're going to see. Now I'm going to navigate the file. So again, in the setup folder, File Number three, show and hide in first out want to set up a state value. Again, we have the use state, let's go and say const. Show and then set show function. All right, bad. And that is equal to use state. And by default, it is going to be false. All right. Now as far as the return, let's make it a bit more interesting. More. First, I'll set up my fragment. And we'll start with a button, I will say that there is a class name for the button. And the class name is button, of course. And then remember how we were toggling the state value. Again, we'll do the same thing where we have onClick, then we'll have our inline function. And then let's run set show. And each and every time we'll click, we will set the new state value opposite to the current one. So if it is false, then it's going to become true, if it is true, and it's going to become false. And here, let's type show an forward slash hide, let's save. Okay, we should have the button. Everything is awesome. And now depending on that show value, I will show or hide another component. So that is going to be the difference where I previously, I mentioned multiple times that we're not limited to HTML elements. So of course, this is the example where we will toggle the React component. And for the time being, it's simply going to be a div. So let's go with div. And I'll add a little bit of styling here. Minimal, go with a margin top amount is going to be equal to two RMS. And then within the Dev. Let's again go with window window, and we'll check for those pixels. So for the time being, of course, we haven't set up anything, so I'm just gonna say size, and then colon. So once we save, we should see something on a screen, but of course we don't, because we haven't implemented that show. So what I would want here is set up curly braces, and then I'll say if show is true, then we'll use the AND operator and then I would want to display the item component. Now of course I do need to be a bit more specific here, where it is a component. Now of course it is hidden where we hope But then the moment we click Check it out my window size. So as you can see, now I'm toggling the component. Correct. It is important because of two reasons. First, the fact that we're not limited to just HTML elements, like we had in a previous example. And a second thing, I would want to hammer home, the fact that we need to use the cleanup function, when we're setting up some kind of side effect that needs to be cleaned up, which in our case, is still going to be that event listener on window. So within the item, not within the show and hide component within the item, what I want is to set up that size state variable. So again, we go here with const, on size, and size, like so. And now we're using huge stay. Again, let's check for a window in our width. Beautiful. And then we will set up each and every time when we render the component, our use effect. So we're going to go here with use effect. Now we have our callback function, just to showcase that it's not going to work if we simply are empty array. Now, let me add here window, the event listener. So as we'll be resizing the window, we'll be listening for this event. So resize, we'll run our check size, like I said, a little bit of repetition, because we already set this up when we work with us. Now, of course, let's come up with our function. Sure, it's going to be check size function, not going to be looking for any parameters. However, each and every time, we'll resize the window, I will set my state value equal to a window, and then in our width. Okay, beautiful. And I remember when we covered use effect, I said that even though in that particular scenario, the empty dependency array saved us. Because we were not toggling the component. Essentially, the component was there. And the first time the compound rendered, we set up the event listener, and we were good to go. However, the problem now is going to be that we will be toggling this component. So even though we run this only once, because we will toggle the component. Essentially, we will set up multiple event listeners, I guess, in order to see better what is happening, let's just go with size here in adding to show now once I click Check it out. Now, of course, the window is 462. By the way, we can add pixels as well if we would want. So let me go here with pixels. Again, I show and then as I'm going to be increasing or decreasing the size of the window, of course, this value will change. Now the problem is a little bit different, where every time notice, as I'm clicking on toggling the component correct. And if we check out the elements and non event listeners, and then research notice, is this the behavior that we're looking for? No, of course, it is not. So even though empty array saved us in the previous example, because we were not toggling the component. This is why this cleanup function is so important. Because even though this runs only once, because we're toggling the component, we run every time we show the component. So that's why remember, we need to go with return. And we have the function once when of course the component is removed and discuss Of course, once we removed from the DOM, and we'll go with window, then remove event listener. Again, I'm looking for resize on our on check size. So now what you'll notice that once you navigate here, well, you can see that there is no event listener. That should be the case because the component is not displayed. Then the moment we show the component, then of course, we set up the first event listener. But then as I'm clicking, notice, I'm not going to be adding those event listeners. So there's always going to be one because we have our cleanup function. So once we remove the component from them using the show, toggle, and of course it will also remove our event listener. So that's how we can toggle component In react using the operator, and also that's why it is so so crucial to use the cleanup function. Excellent. Up next in the tutorial we have the forms. More specifically, we're going to cover controlled inputs, what they are and how they work, and also how we can set up multiple inputs with just one function. Before we cover any of those topics, though, our just want to give you general info about the how the forums work and react. So we'll start working and control the inputs, but we'll cover them in a next video. In the beginning, I would just want to give you the general overview. The Fall, of course that we're looking for years. Again, I'll call this setup, just so I don't have to change stuff around in here. And also tutorial when we're looking for to folder number four forms. When set up, of course, we're looking for controlled inputs. And now instead of deciding to all around the mine setup murders, if you're working with forms in JavaScript, you know that it works, something along the lines of setting up some kind of ID or class or whatever the input, then you targeted the input. And then in order to get the value, you are looking for the value property on the node. Now interact, it's a little bit different, where you have those controlled on controlled inputs. By the way, we'll talk about uncontrolled inputs when we talk about use ref. But whenever we deal with controlled inputs, you will be hooking up your input to a state value. And since it's going to be easier for me to show, of course, let's just put this one on ice, just remember what the setup is going to be a bit different than a regular JavaScript. So what I would want to do first, well, I think we could change our JSX a little bit more or start with article, by the way, there's going to be two articles, one is going to be displaying the items. And the second one will be dealing with forum. So let's just start with the form. And then next video, we'll add those items as well. When it comes to a form, we're not going to deal with action. So we'll deal with that on our end. Now, I do want to add here a class name just for styling purposes. And that is going to be a warm inside of the form not set up, I think two inputs is going to be good. So go with form control. Again, this is just for styling, please keep that in mind. Once I save, I should have the form on the screen beautiful online within the sport control. Again, this is just for styling, please keep that in mind. It has nothing to do with react within this div. Now I would want to set up my input. But I also want to set up a label because I would want to showcase how we can connect label with input in react as far as the React because the naming conventions in JSX are calling for camel occurs, you'll see the syntax where in regular HTML Of course, you wouldn't write that like this. But in react if you have label and you want to connect it to the input that we're about setup, you need to use this HTML for written in camel case. And here you need to pass in the ID that is eventually going to be on the input. So in my case is going to be first name that we're marrying it right here. And all right here name, colon, like show. And of course, we would need to set up our input. So I'm going to go with input. Now type the same works as with regular HTML. So we are multiple types. In this case, I'm going to go with most basic one, which is going to be a text. And then of course, I would need to have two things, I would need to have the ID as well as the name. So we're going to go here with an ID and also the sequel to a first name, just like I had in the label. And then let's also set up the name. So say your name, and that is equal to a first name. So say read Emeritus. Now of course, I have my label. Notice once I click on a label, I right away highlight a my input. And of course I have the input. And since I would want to have two of them, I'll copy and paste and we just need to change some values around or form controls. There's exactly the same Now it is going to be a bit different. So let me select both of them, we're looking for email, and also the name will change. So let's right over here, email. And by the way in here, I also would need to change it to email. And once I have my second input, I also want to set up right away a button. So we're going to go here with button, event type will be met. And here let's just write add person. And you'll see why we do that in next video. So we have our button. Awesome. And then when it comes to react, we have two options. Either we can add on submit, form, so the form element, or we can still add on click on this button, I'll show you in a second. Both of them will work. But let's start with onsubmit. Because that is something we haven't covered. So on a forum, we can set up a submit event listener. And then of course, we'll still need our handle. And workshop, of course, we would want to come up with that function across online handle, met. Now eventually there's going to be an event object. And I'll show you why in a second. For the time being, let's just go with a little world. And let's see what is happening. So I typed my values, both of them will show. And now Once I press the button, or I press return, I should I should see hello world in console. However, it's not happening. Why? Well, because by default browser will try to submit the form and then refresh the page. That's why we don't see this HelloWorld. And just like in JavaScript, we have access to the event object. And on that event object, we have a method called prevent default, we're essentially we're saying you know what prevented default behavior, we will deal with this form data on our own. And so the way we prevent the default would be falling way where we go with prevent default. Now, of course, once we fill it out, either, we can press enter, or we can press on the button. And of course, we'll be able to see the hello world. So essentially, now we're not refreshing the page, the moment we submit the form, awesome. Just to showcase that it will still work. If we set this up on the button with a type of Submit. Let's go here with on click. It's the same deal when we pass in animal Submit. Now our movement for a second even though we'll push it back, here, again, let's try it out and check it out, it will still work. So again, that is the case, where you have multiple options of how you would want to submit the form in the React either use this on submit, but make sure you place it on a form. Or you can still use the good old on click, make sure that the button is type Submit. And then of course, make sure that you in both scenarios as brahmer. In this function, you are accessing the event object. And then however you want to call this brahmer. In my case, I call this E and you can look for the properties that are available on that event object. So my guess our move this on click. So that would be a basic setup when it comes to forms in react. Nicely done. Hopefully we are clear on basics. Now let's see how we can connect our input to the state values. Because at the moment, yeah, we can prevent a default, we can console log hello world. But of course, what I would want is to access the data that is inside the input correct as I'm typing or as I'm submitting. And the way we do that in react, we set up state values. So again, we'll use use not only to add two attributes on the input value, that will reference the stored value. And then on change on change event listener will fire the callback function each and every time we type something in the input. And I guess let's start by setting up our state values. So here I'm going to go with cons on first name, and then I'll say set, first name, first name and that is equal to my use straight on by default, it is just going to be an empty string, I'll copy and paste. And of course, I'll do the same thing with email, where it's going to be an email and then set email. And again, by default, it is going to be a empty string. So now what I would want is to head to my input. And then like I said, we have to add two attributes, one is going to be value. And the second one will be on change event listener, where we'll set up our callback function. So in here, let's write value. And now which value would want to reference from the state? Well, I guess most sense would make personnel correct. So again, I'll just referencing here, the state value. And now I'll do the same thing with my email. So again, we go with value online, we're looking which state value would want to reference. And the moment you do that, you'll notice something interesting. First of all, there's going to be a big fat error, because react will complain, or maybe more specifically a warning, where react will complain that I provided value prop. However, I missed out on the on change handler. Memorial react will be on change handler a little bit later. Now, I would just want you to understand that, notice how you're typing, and nothing is happening. Why nothing is happening? Well, because we connected our forms, meaning our input to the state routers. So since both of my state values are empty strings, they all the time will stay like this. Now, of course, if I'll say hello, world, of course, in my name, one, I will have that HelloWorld. Just keep in mind, of course, now we have connected those inputs to the state value. The last thing in a puzzle is to set up that on change. So each and every time we'll type something in a form will fire the function. And within that function, we will set up this state value. And then in return, you will right away see it in the form as well. Just hopefully this is clear, we're now the value in the form depends on state value, since it is an empty string. That's why you can type all day long, and nothing won't change in the form. With that said, Now let's set up our on change handler. So we go here with on change. Again, we can set up a reference, meaning we can set up a separate function and reference it. Or we can set up the inline one. Now since this is already fifth or sixth example of inline and reference, I'm not going to set up two separate scenarios, all just do the inline, where we'll have to pass in our arrow function first, because again, we will be invoking. And now we'll go set, first name. So here comes the interesting part. Remember, when we were submitting the form, we have access to the event object. And in this case, the method that we're looking for on the event object was prevent default. Now with on change, we also would want to access the event object. However, in this case, what we're looking for is the event target value. So the same deal, like we had with handelsman, where we had access to the event object, same works with onchange, where again, we can access the event object, or in this case, what we're looking for is the event, Target, and more specifically value. So that is going to give us whatever is typed in the actual input. So I'm going to go here with event target, and then we're looking for the value. So now what you'll notice with the first one, as you start typing, actually the values are displayed. And what is even more interesting, if you go to the components, you'll notice that the moment there's nothing there. Yeah, that is true, more controlled inputs, or I'm sorry, in here. So notice we have the state value as you start typing. Notice the state value also changes. So we're affecting that in two places. Because we have connected our form each and every time I type something in the form the on change, function fires. And then within that function, I have set first name, and then I'm controlling the state. Now in turn, I'm also controlling the input. Remember when it was just empty string, while we can type all day long, and nothing was changing in the input. Now, of course, once we have our on change, we have the function, we access the event object. And then in order to get the value for this particular input, I would need to go with a rent object. And I'm looking forward to target and then I'm looking for value. So similar, like we worked in just vanilla JavaScript, or in this case, we directly can access our input, because we have an event object, then we have a target. So that is going to be our input. And then more specifically, we're looking for the value property. And of course, once we have this set up, I would want to do the same thing for my email, where I'll copy and paste in the email, I'll also do the same thing. So I have onchange. However, in this case, of course, I would want to call set email, my first name, but the event target value, of course, won't change. So I'm going to go here with email. And once we do that, check it out. Now I can type and everything is displayed correctly. And of course, once we have this particular setup, now in the handle submit, instead of looking for specific input, once I submit the form, now I have access to them in the state, the first name, as well as the email. So let's do that. Our will console log here, the first name, last name, first name, or I'm sorry, email, I guess more properly. So let's type, I'm going to go here, you know what, let's write some reasonable named john. And then we're going to go with [email protected]. And once we add the person, there it is. Now we have john [email protected]. So that's how we can set up controlled inputs in react. Remember, you need to have a value property that references some state value. And then you have on change event listener, where either you set up a reference. So either you set up a function here, like we did with an or submit, just make sure that in either case, you're looking for this event. So you pass in that first parameter, because that will reference the event object. And then in order to control the state value, you call the set function. And then what do you would want to pass in is the event target. So you're grabbing the input, and more specifically, you'd want to get the value for each and every time you type something in a form. In turn, you'll change the state value. And since that state value is referenced over here, also it will be displayed in the form input. Excellent work. Now we understand how we can set up controlled inputs in react. And just to complete this particular part on forms out also want to create a little app where we can add about person to our list, because up until this time, all the time we work with lists, we were just getting some kind of data, whether that was external data coming from the API, or it was ours. Our in this case, we'll take a look at how we can add those items dynamically divorced. Since now we have covered forms, I can grab more inputs. Now, I'll start simply by creating my state value for my list of people. So I'm going to vote people, people over here that is you state and we are know that we need to start with an empty array. Right? Not bad, not bad. Now, what is the next step? Well, once I submit the form, I can see that I can grab these values show Wouldn't it make sense that once we submit the form, I would want to add that new person that I'm creating to my people? All right. I think that would make sense. Now, before we do anything, well, let's think about it. Do we want to have the functionality where once we click, we can also submit the form. And notice how as I'm clicking on adding the person, I have to empty routers. Now why do I have to empty routers? Well, because first name and email are both empty strings, right? But nothing prevents me right now. From console on show. Essentially, if I would want to set up some kind of functionality where I'm adding this to a people array. I can definitely do that. So that's why I'll right away set up the condition. Where I'm only going to submit the form meaning I'm only going to add my item to the array if both of the values are true, because we already know that empty string is positive value. So of course, that condition will fail if both of them or one of them, essentially is a empty string. So in this case, I'll say first name, I'll use an operator, and email. And what you'll notice that only then I can submit the form submit the form we form. And here, let me write empty values. So that is not the case, of course, the values all will be empty. So I'll set up the else. And let's say empty Mars. And you know, I think I will leave this for your reference. So we'll have the else there's going to be no modal no info to the user. But at least we will know that if we see in console and developers, that just means that the user is trying to submit with empty vouchers. Now, if both of them have some kind of value, what I would want, I guess, I'm going to start by creating a new object. So I'm going to go here with const, online person. And I'll start with first name, and email. So what's really cool in ear six, if the property value matches the variable that you're assigning to, then you can skip one step where essentially, if I'm creating a new person, I could say something like this first name is equal to a first name, and then email is equal to an email. And now if I add the value, let me just console log the person first. But if I'll say here, by the way, let me save it here. Now, not here, sorry, I'm confused a little bit, I would want to save my file first. And let's write again, john. And we're gonna go [email protected]. So once we add the person, notice how in the console, I did create this person, I have the object, and everything works beautiful. Now, the thing is that I can shorten this a little bit, because in the last six, we have a shorthand, where if the key name matches the variable that holds the value, I can just write something like this. Where email is email, and first name is first name, please keep in mind, both of them essentially have the same value is just a little short syntax, which I'm going to use throughout the tutorial, as well as the course. So if we go here with [email protected], you'll notice that new person, yeah, we still have the value. So everything works correctly. Now, next hour would want to add this new person to Mirek. Correct? How do we do that? Well, we go with set people. And just so we can keep on practicing on a function setup as well. Remember, that was my old people, or current people, or whatever. So I will call this same thing, people just remember that we're talking about the current value in the state. And what I would want to return from this function is data.so, whatever we have as far as the values in the array, so we're using the spread operator. And then of course, I'm returning a new array. However, I would want to add that person object as well. Again, I know I said this 20,000 times, but we also have an option of just passing this directly in set people. The reason why I set this up as a function is I would want you to practice on setting up the function as well, if you see that in someone else's code, you're not confused of what is happening. And now of course, what I would want is also set both of these, the first name and the email back to an empty string. Correct. That would make sense. So let's go with set first name, now is going to be equal to an empty string. And I'll have also a set email the same way. So now, once we click, by the way, if you want, we can console log it somewhere, the people or not, let's use the React dev tools. Sorry. Let's go here to a bigger screen. Notice I have this value over here, the empty array. And now if all go again with maybe Peter, if also the email at Peter g gmail.com. Check it out. Once we have the person, now, we clear this one, we clear the first and second row in my state, email, and name respectively, a man in the state, check it out. Now I have email, the first name for the Peter. So what now we can keep on adding more and more people. Now before we add more people, why don't we also set up here a return, where we display what people we have in our array. So again, we'll iterate over the state value, then each and every item will be an object. So I'll name this in my Paramor as a person as far as the return our return a deer over here, and I'll go with const, a man ID, a man first name, first name, email. So essentially, what I'm doing is, I'm destructuring. My, you're probably wondering about this ad, well, don't worry, we will create that Id in a second. Because remember all the list, we needed to use something unique here, even though technically, I could do something like this index. And I'll set it equal to index. The problem is we'll start once we start removing the items. Now, I'm not going to do that in this particular example. But in general, you don't want to use index. Once you start adding and removing items to the list. Or even though you are technically in this example, we might let it slide and then use the index, I'm not going to do that, I'll show you how we can quickly set up the unique key as far as when we're creating the person. So for now, let's just go with Dev. And notice how we destructured the first name and email from the person. Because we already know that of course it is there, because we are creating a particular object. And then in here, what I would want is to have the handling for all show the first name so reading for first, ma'am. And I'll also add a class name of item, just so we have a little bit of styling. And then let's have the paragraph with a email site value. So now every time we add something in a form, that person should be displayed. Now, React will complain, because we don't have that unique value in the key warrior all summed up in a second. So let's go with Anna. Mine is going to be on G gmail.com. And yeah, we do have the honor, everything is displayed correctly. Again, the problem right now is that unique key prop. And this is not the most vigorous setup. But we'll cheat a little bit where I'm going to use the new date get time to string. Normally, you'd use some kind of package. You You rd is one of the most popular ones, where it's a NPM package installer, you import it, just like we did with for example, react. And then you set up that unique ID again, in my case, I'm just going to cheat a little bit, where I'll use a nifty set up off ID. So now notice how I'm creating this new person, I'll also add this key of ID, and that is going to be equal to a new gate. And then we're going to go and get time to string, we invoke it. And now what you'll notice that each and every time you create a person, there is going to be that unique ID. So you fall console log the person. In this case, we're going to go with Susan, for example, Susan on [email protected], check it out. Once we are the person, there it is now of course we have the ID. And the last thing, of course, is where we are rendering the list of people now want to also get that Id now I already destructured out of my person. So now remember, we needed to use the key prop and set it equal to the ID. And once we do that we shouldn't have no issues whatsoever. We can type whatever names we would want. And we can clearly see all they're also affected in our state. So we go here with gmail.com. Of course, once we are the person, where is my person in the list, and I can clearly also see that in a state. And I shouldn't have no errors in the console, because I am using those unique keys. So that's how we can combine our controlled input with our list. So each and every time we add some kind of item in the form, we can just submit the form If values are more than an empty string, and of course, we trigger this functionality, where again, we have some kind of state value for the list. And we just add a new item to the list, clear the items, set them back to an empty string. And at the bottom, we just iterate over the list of items, grab all the properties that we want, nicely, displaying them on a screen. Beautiful job. Now we know how we can use our controlled inputs with our list. Next, I'll want to showcase how we can have multiple inputs with the same on change number. Now, the use case that I'm trying to showcase is the one with many, many, many, many inputs. On my case, I'm just going to add one more to our current setup. But keep in mind that the whole idea is to show you what if you would have, I don't know 10 inputs, you don't want to have 10 different state values than different functions that you're calling inside of the handler. Now, first, we will need to navigate to the address. And we're looking for a different file. In this case, we're looking for file number two, and the multiple inputs is the name. So save it, and what you will notice that it is exactly the same, like we finished in the controlled inputs. And that is by design. So essentially, I'm not the biggest fan of refactoring. But this is exactly what we'll do in this video, where we will refactor it a little bit. So our whole setup is going to be exactly the same where we are still submitting the form, we're still adding the items. And all that good stuff is just the implementation will be a little bit different. I would want to start by adding one more input on again, when you're looking at this setup, the one that we're about to set up, please keep in mind that we're talking about the form with multiple, multiple, multiple inputs, not just two or three, we have two or three, probably, there's nothing wrong with our previous setup. Now what I would want is to copy and paste, so we're adding one more item over here, I'll call this age. So we'll change this around, we'll say that HTML four will be for age. So also, of course, the ID will change, we're going to add here age value as far as text, let's change the ad to age. Now, we also would want to change the name, which by the way, we haven't used it yet. So in this video, you'll finally see why we're setting up that name attribute all the time. And then I would want to get a state bar. So for the time being, I will copy and paste. I'll copy and paste and I'll say age and then set age, by default age will be no no, I think I'm going to go same way we have an empty string cared about is going to be my age. And of course, in here, where I have the value, the treasure, I would want to change it to age and set age. So this should work correct. But wouldn't it be better if we would have only one value in a state instead of three, or instead of 10, or 15, or how many inputs you have. And also wouldn't it be better if we would have only one function that is responsible for on change, regardless of which input we're typing in. Because that way, if we need to make some changes, we only need to do it in one place. And we will do that by first setting up one state value. So instead of first name, email, the age, I will go with const. And I'll call this person so say person. And then of course, there's also going to be a set person function. Now it is going to be equal to a US state and now set this equal to A object, someone wrote first name on that it will be equal to A empty string, or email, same spiel, empty string, also the age and you guessed it, empty string. So once I set up these values, now instead of using them one by one first name, email and the age, now I would want to reference the person and you're not by the way, I will delete Donald submit and we will write it from scratch. So let's just delete it so it's not in our way. And then eventually we'll set up one more Done. And of course, I have my person with all those three properties. And now, where we see the inputs, of course, we would also want to change, or now the value will be person dot person, not just the person. By the way, I think in here, I'm just going to comment this out, or you can delete it, it's up to you. So we have person, that first name, and person of that email. And eventually, also, we have person of that age. Correct. Now, the gotcha here is that we're still using these functions. Correct. So we have set email, we have set age, and all that. Now, there's a big fat complaint from react, because, of course, we don't have the handle Submit. And also, we don't have the functions. So what I would want to do right now is just delete, we will flip it over to the submit button. And as far as the on change, lead, just reference the function in this case instead, so go with no man change. So that is, of course, the function we haven't created yet. We're going to go with Collins and then handle change. Again, I definitely would want that event object. So I need to set up my parameter, I'll have access to the object. And like I said, we'll copy and paste. So we'll change this around, there's not going to be three separate functions, there's going to be one function. And again, Frank 15 inputs. That is where it definitely makes way more sense. So we have onchange, equal to a handle change. And then on the submit button, well, let's go with on click, just so we can see that, of course it is going to work on in this case, I'll call this handle shop will scroll up, crowns on handle. Right now, still in the same setup, we need to have access to the event object, and will right away prevent the fault arc. So that is the function that we're looking for. Now, at this point, it's complaining the handle change is not defined. So of course, I call this handle. And that's not what the function name is. So let's say now we don't have the hairs beautiful. Now everything works, but it will start to try typing. Course, again, nothing will work, or because the handle change is not doing anything. Now, why am I showing you this particular setup? Well, because now I would want to run the handle change, regardless of the input, I would want to get those values. And depending on which input I'm changing, I also would want to affect the person. Now, two properties that I definitely want from the event object are the name and the value. So if I go here with const, name, equal to event, Target, name, copy and paste. And if we go here with the value, changes there around again to event target. So that is the input where we're typing. Same how we access value. In my previous case, remember, in the controlled inputs, we use the value correct. When we were setting up the first name or the email, we use event target so that x is the input. And then we use dot value property. In this case, I'm looking for two things. I'm saying whenever I call my handle, change our own check for the name of the target, and the name will be right here. Remember, each and every time we set up that name attribute on the input. Well, now we'll use it now say run target name, and then the var. So if you'll console log, you'll notice something pretty predictable, where we go with a name and value. And the planning depending on which input entrepreneurs, this tells me that the name attribute on the input is first name. And then I'm also getting the values. Now nothing is displayed right now in the input. Because we haven't updated the person yet. Meaning we're accessing Of course, the person that first name, and we're not doing anything with that person yet. But don't worry, we'll do that in a second. But if we change to an email, beautiful on ours again, it gets me the name of the input. And it also gets me that current value. And the same of course, is going to be with an edge. Now, why is that? So cool? Well because now once I know the name and the value, I can use the Dynamic Object Properties. Again, this is coming from JavaScript. So please either utilize my JavaScript nugget series, or just google dynamic properties, how you would set them up in JavaScript. So now I have the object, correct. And of course, the object set person. So what I could do here is I could say, set person. And then remember, I need to copy the old values first. Because since it is an object, it has multiple properties. As I'm updating one, for example, name, I don't want to remove or delete the email and age. That's why we first start by proper data.we, copy the person from the state, and then we add a comma. And then after the comma, we would want to come up with whichever property we would want. Now, of course, that is going to depend on which input we're typing in, correct. And this is the case where we can do this dynamically, where I can say, you know what, get me the name on that object. Because in here, I'll pass in the value. Now, what were my values, it was either first name, it was either email, or it was age, now will dynamically update this property equal to whatever value we have, please keep in mind, it's the same thing as you'd write over here, first name, and then it is equal to a value. Now the difference is that we are doing this dynamically, because we have three inputs. So if I'll just leave this as a first name, you'll notice that each and every time I type something, it's actually displayed over here, which kind of doesn't make sense, right? Why? Well, because I'm not selling this dynamically. I'm saying first name, where if I have access to the name, and of course, those names need to match to whatever I have in the object. Now each and every time, I'll type in any of the inputs, I'll dynamically update that state value as well. So that's why I need to go with that name. And that's why we added the name, right from the get go. Now, you're not going to use it all the time. But there's going to be some use cases where it is very nifty to update whichever state value references the input. So now again, let's navigate to a bigger screen. Notice I have my state. And now check it out. Where I have the name, I'll start typing. And there it is, in my state, in person, right away all access the first time. And now of course, that it will be equal to a job. Now if I go with email, I go with [email protected] and murders. Now we have [email protected]. And lastly, we have age of 24. So notice how nicely, we updated all the routers. And now what's left to do is again, to submit the form, so we prevented default. And now I would want to check if, and in this case, I'm checking for three things. So first name, and person, then dot email. And then the last property, of course, was age. So I only would want to submit this form, if all three of them are more than just an empty string. And then let's do the same thing where we are creating a new person. Correct. So we go here with const, then new person. And then as far as the value out, we want to copy the person value from the state with this one, since this is what we're sending up as far as the input. And now I also would want to add that ID, someone roll with ID is equal to a new date. Get time, good time invoked. And then we have to string invoked as well. And lastly, let's just add person to a set people. And then let's set up person back to an empty string. So we go with set people. That is my array, of course. And like I said previously, we use the function and in this case, I'm just going to pass in new array, where I'll copy the values from the state. And then I'll add that new version. So we're just practicing in the previous example, where we used a function, we can also pass directly here to value. And then like I said, I also want to set person back to empty values. So we pass in the object, we say first name is equal to an empty string. Then email is empty string, and then the age is empty string. Now, watch this. going out on a bigger screen, where we go with Susan, then we're looking for [email protected]. And on the edge will be 25. And the moment we add the person veterus, there is our Susan. Now, if you want, of course, you can add also in the JSX. That particular age, you've that what you're shooting for, of course, we're going to go here with age. And then in the first name, instead of the first name, we're going to go with paragraph. Or let's just say age, like so. Let's try it out one more time with [email protected]. She was going to be 26. And of course, the moment we add the item that is displayed in our list. So that essentially is how we can set up multiple values with the same handle change function. Now, again, are you going to use that all the time? No, there's going to be some use cases where it's just going to be much faster and easier. Instead of setting up all these multiple servers, separate functions that update each and every time you type in the input. In this case, we have the same function. So even if I would have 20 inputs, if I want to change something around, I just need to do that in one place. amazing work, we're done with forms and take a breather, we will cover use ref. Remember, when we talk about forms presented, we have controlled inputs. But we also have the option of using on controlled inputs. And we do that using the use ref. So even though there are multiple things that we can do with user F, most popular one is targeting the DOM element. And essentially in turn, that allows us to set up uncontrolled inputs, similar to how we would have been a JavaScript, not the father, we're looking for years user folder. And then of course, we have a setup. And then we have the basics. In the app JS course I imported a file user of basics, and I'm just rendering the setup. If we navigate to use ref basics, we can see that I have three comments. And essentially, user ref works a lot like us state corridor some differences. So as far as similarities, it also preserves the value in between the renders, just like you said, however, the difference is that online use state user of hook does not does not trigger re render. Like I just mentioned, one of the most popular use cases is targeting the DOM element, just like all the other hooks, we import as a named import or we use react and then dot and then whatever the hook name. Now I'll start with my return because I simply would want to create a form. So I'm going to go here we form element will add right away a class class name will be form, just we have somewhat good looking form. And then inside of the form, there's going to be a div with an input text. And eventually we'll set up our ref. And then also our want to have my Submit button. So let's go with button type. And by the way type needs to be placed here, type. And then we're looking for the button. And we'll just type here, a met button. And we should have a form with a submit button. No surprise there. Now let's take a look at the handle Submit. Again, we have the form we can either place it where we have the button or where we have the form. Again just to spice things up. We're gonna go with on Submit. And then of course we'll have a handler show handle handle met. All right, awesome. Let's try to submit our form const. Met function I would want to have access to the event ardra show in the primer I type II Amman first I would want to prevent prevent the default. And I'm second I'll set up my use ref. Now the white use RF orcs, we would need to come up with a name for markers. I'm going to call this ref painter and that is equal to a huge array F and now we need to pass in that in initial value shall go with user F. And by default, I'll set it equal to a no. Okay. Now next thing, we need to use this value, in my case, a ref container, and then set it equal to a ref attribute. So in this case, I have the input, and I have the button. So what I could do is add this ref attribute, and I need to set it equal to my ref container. And once we have invoked use ref, assign it to a container, bypassing some kind of initial value, and then use the attribute in our input and set it equal to the name of that we chose. Now, of course, let's console log just so we can see what what is actually a rough container. So rough container was not as my name. And we'll notice something interesting where it is a object. It is a object with a property of current. So now what happens when we submit the form water, you're going to see, since we added this ref attribute, and set it equal to a ref container, when we're submitting the current dot value, will hold the value of our input. So to showcase that, we're going to go console log here, and then go ref container. And then dot current show I'm looking for a current property. And now this, the current property is now our input show, what I could do is just grab the value like we did before, okay. However, in this case, of course, we're not using EDA target, we're using ref containership, whatever is the name, the current property, which initially is no. And then once we submit the form, it will have the value. So if I'll type something here, and by the way, I probably need to save it first. So if I type something in my input, and once I click, I shouldn't have some kind of value in the console. But I don't, the reason why I don't have it is because this should be submit, my apologies, it shouldn't be button, it should be Submit. And once we change this around, Now, of course, once we type something in input, and once we click, check it out, now we have the value. So this is going to be different queries, where we're not setting up a controlled input. So notice, in this case, we don't have the state value that reflects the value that is going to be in the input. And we don't call on change each and every time we type something in the input. Instead, we use this ref, so use the ref. And then we have this ref attribute. In the current property, we're going to have a value. Now of course, you can add this earth to any HTML element, you're not limited to just the input. And in order to access it, you have to go with rough container on the ground. For example, if right next to the form, I pass in a div with a Hello, world, e4, set up ref, I'll create a new container. So let's call this div container, copy and paste. I'll call this div container. I'll still set it equal to null. By default, if I go here with dev container now, once we console log, when we're submitting, we should see that there have container current should point to that def. Sounds tried to submit on top something murders. Now notice the dev container current is pointing to my Dev. So if you would want to do something specific with this particular DOM node, you can use the use ref book. Again, the general idea, it preserves the value between the renders, but it doesn't trigger a rerender. And then it's mostly used to target DOM nodes. Now One really cool thing that we can do, once we have the general understanding of use ref hook is to focus our input. The moment our app renders, sure, the moment we see the form will right away, place a input. Now since use ref doesn't trigger a rerender, I can simply call user fact I can pass in my callback function, and I don't need to worry about setting up this dependency array. I don't I can just call it here. Because it won't trigger the rerender. So for example, again, I go with console log, and then I'm going to be looking for ref container, and then dot current. And we're going to go with a ref container, van, current. And we're going to call the focus method on it. So what you're saying, the moment we render, we're going to get our input tax, and right away have the focus. So once we refresh, notice, the focus is there. And then I can clearly see that in console log, that the ref container current is pointing to that input. That's why I'm able to grab that value when we submit the form, because again, we just call that dot value property. But what we're doing each and every time we render the application will, we're adding the focus on the current one, okay, and we simply couldn't do that without any kind of dependency list. Because the ref, the use ref hook won't trigger the rerender. So those are the basics of use erfolg. And probably the most likely use case we'll be targeting DOM nodes, or elements. All right, um, next we have use a reducer. Now use reducer hook is used whenever we have a more complicated setup, as far as the state. So you can definitely use it with simple examples. But honestly, if you have like a to do list or something like that, I think using just regular use state is good enough. However, as your app gets more complicated, it definitely is a good practice to use a juicer, because essentially, it will add more structure to your state. So you won't be able to add just willy nilly however you want, and change the state. Here, we'll have to go through certain steps. And that is very, very useful when you work in a team. Again, if you have a simple to do, I don't see a big use case for that. However, as your app gets complicated, then of course, I definitely would suggest using use redress, because it will just add more structure to the initial setup that you have in the state. Now, before we go any further, let me just mention, I purposely picked this example to be somewhat simple, and tutorial. And then once you're done with the tutorial, I would highly highly, highly suggest going right away to the project and then do the use reducer project. Because that project will be a bit more complicated. And of course, a better use case for a reducer. And before we start working in our setup, let me just showcase what we're going to build. So I'd want you to import from tutorial, version six, the user juicer, and then the final one. And notice how we don't need to go for specific file. And I'll talk about it in a second. But for now, you'll just looking for that component that is coming from the final. And once you render, you'll notice that again, we have the form, we have some kind of input, I can go here with item, I can add it, not only I can add the item, but I also have have this model. And notice how the application gets a bit more complex. And that's a good use case for using users. And if I try to add the item that doesn't exist, then I just have please enter value. And we'll start simply by building this using the traditional setup where we had two values in a state of mind we will refactor it to use reducer. Now user juicer relies heavily on Redux. So if you're familiar with Redux, awesome, if you're not then once you understand use reducer, it is going to be very easy to pick up Redux because a lot of the lingo, and the functionality is exactly the same. So first, let's deal with this specific path where we don't have any filename. And we're going to do that by going to a sharp here. And instead of final, we're looking for a setup. So I'm looking for to set up of course I'll change my component name as well. And once I save, I should see the use reducer when we navigate to the six we're looking for setup Notice something interesting where I have two files in there, I have in luxurious and the model. So here's what's happening. In this particular setup, more we can do is use index j s in the folder. And then once we import, we don't need to go with specific file anymore, because index j s in every folder, unless you change the setup manually, will be the main entry. Meaning if I, for example, go with import from the folder, and if I have their index j s, it will right away import that index js. And you'll see that in a lot of people's setup, where we have a bunch of folders, and then each and every folder has this index. And that index is that main entry in that folder thrown here, I can do whatever I want inside of that folder, but index JS will be that main entry point. So everything at the end of the day will be either imported here, or the logic will be sitting there. So I can have as many components as I would want in the same folder, but all of them in some way, or shape or form will meet in that index js. And like I said, we'll just start with a very basic setup, where we'll still have the form, we will still have the simple state value, and all that. Also, we'll have a simple toggle as far as the model. And then slowly, but surely, we will refactor it to use reducer. Now, let me close some of the folders over here. Notice we have the modal component monitors the component that's sitting right next to our index j. s. Great, beautiful index js, I would also want to import data, import data. And that is of course, the name the imports we go from. And then again, we go few levels up, we're looking for the data because first we'll just try to do that, using the regular setup. As far as the state values are concerned, I'll close the sidebar, we're going to go here with comms on people. I'm not upset people that is equal to our your state. And then we pass in our data. Okay, awesome. And also, I want to toggle that model. Now if you check out the model, there's nothing there, there's just a div, that I am model, but eventually, it is going to be there. And as far as my state value, I think I'll say show, model, and then set show model show model. By default, I'll say that I'll hide the model. So it will be hidden by default. And now of course, I would want to come up with my return. So let's go again with our fragment here. And as far as the return, we'll start by just checking the model. What is the show model scenario. So if it is true, then I would want to showcase we already know how we can do that, of course, we have our model component correct. So I go to model, and I go here with a modal component. So if the show model will be true, or some If not, then we're going to hide that. Now we're going to go with form. We'll go with form. And I think I'm going to go with on submit, on Submit. And as you can see, I'm kind of keeping up the pace here because we have already covered this before. We'll have a handle on met. And then of course, we need to have a dev and an input. It's going to be a text. Now as far as the value, well, we'll have to come up with a new State Route. Correct. So let's just go with text, I guess I can call it that way. I think it is going to be good enough or not. Let's just go with name. So name, and then set name is equal to reuse state. A manager is going to be an empty value for now. Variable Type name here, and then on change over will invoke again our inline function. And then once we invoke it, we would want to go with set name, short name, and then we pass in whatever we're getting back from our input. So event, target and event dot value, not the moment it completes. Well, we have no access to event, because he is not defined. There is now here is the fun, and also the handle summit. So let's just go with const and then handle. Sir met, that is my function. Now I would want to prevent a default, of course. So I'm going to go here with E and then rent, default, let's invoke it, let's save. Yep, we shared something there, then let's add a little bit of styling as well. So let's say here, there's going to be a class name, form, once Also, our button. So right next to Dev, we're going to go with button type is going to be met. And let's just right here, add person or add or whatever you want. And there it is. Now, of course we have our form. If I would want to add that item to the people, well, I would need to do that when I'm submitting the form. Correct. So first, we prevent the default. And then now we want to check if the name is more than just a empty string. If it is a empty string, then of course, I would want to display the more now how I can display the model. Well, I can go here with else. And I can say show model. And I'll set it equal to true. Correct, because now our one of the split, also, you know, the value is empty. Now I'm not going to pass in any kind of values, we'll deal with that once we set up use reducer. So for now, we'll just display that show model. Now, if the name is of course, there, if we have typed something, then we can say show modal. And again, we'll set it equal to true. So that is also going to be use case where we show the model. And then I would want to add that item to my list to more people. So let's write here. We go with certain people, than all passing that new era where we spread out the old values first. And then we pass in what we pass in the new person, now new person is going to be an object. So let's say here ID property. We'll go with new date, again, a little bit of cheating, get time involved. And lastly to string invoke. And now let's set up a name. Let's say that the name will be equal to our state value. And of course, we show the model we added to the people. And then lastly, let's use set, set name is equal to an empty string. And now of course, let's iterate over here we show the list show right after the form. We're going to go we people, people van map. And then of course, I'm looking for each and every person, like show. Once I access it on one return, the diff needs to have a ID of course. So he and then person have that ID, we're going to go with heading for let's just display person, dot name. Now eventually we'll add the button, but not right now. So let's type some gibberish. And once we add, of course, show modal is not a function, because well, it's not a show model. It is set show model, set show model, as well as here, set show model. Again, straight out some gibberish, I can see the item over here. And I also can see the model. And once I refresh, it will also happen if I tried to submit the empty realm. So that would be a scenario if we use these state values. And like I said, if you have a small application, there's nothing wrong with that. But as your app gets bigger, bigger, bigger, bigger, you'd want to have some kind of structure, because notice here how we have no problems, changing state values how we would like. But that's not usually a best use case. If you have a bigger app. And if you work as a team, you'd want to have some kind of guardrails, where you're only updating the state in a certain way. So that way everyone is on the same page. This is exactly what we're going to do. Starting from the next video. Our basic setup worked somewhat. Okay. Now let's refactor this sucker to use array juicer All start by removing this people show now. So we won't need these guys, because we'll set up a new one. And we're going to go here again with our array destructuring. And we'll set up a state, again, versus just a name. Or you can call this burrito if you want, but I'm gonna go with state. And then we have a second thing, a function, a specific function by the name of dispatch. Again, you can call this whatever you'd want. But a common practice is using this dispatch. Why? Well, because when we invoke use reducer, again, we're getting two things back, we're getting the state value. And then we're getting the dispatch function. So similarly, how we have with us state. Now the difference right now is that in the use reducer, the first thing we pass in is the reducer function. And the difference between the US state and use reducer that each and every time, you want to do something with that whole state, you always, always, always mass use this punch. And it's going to go through their juicer. And you can think of reducer function as something that takes the old state and takes in something called the action, which we're going to cover a little bit later, and then spits back that new state. So you always need to have that reducer function. And the kicker here is that eventually we'll move this into a separate file, just so we have less code in our main component. So reducer function, it is just a simple function. So we set up a reducer. And eventually it's going to look for two things. So state, that is going to be the state right before the update, and then the action. And you can think of actions of what are we trying to do. Now for now, we'll just leave it blank, we'll get there in no time. So user juicer is looking forward, you sir. So the function of that will manipulate the state, it will happen once we call dispatch or once we dispatch the action, I guess that is more proper way of saying that. And then the second one is that initial state, now we can serve this up as for the separate variable you want, or you can type it directly in here, I think I'm going to go here, I'm going to say const, and then default state, and that is going to be my object. Now, any object what I would want, well, we had a people, correct. So that was my people array, and for time being is just going to be blank array, then we had show model, right? So as you're on, you're going to go is model open, let's maybe try it out that way, is modal, open, and by default is going to be false. So it's not going to be open. And then last one is going to be modal content, whatever text we would want to place on here, so have a modal content. And on here, I'll just start with hello world, eventually, of course, it is going to be an empty string. And now where we have this use reducer, we pass it that default state again, you could have easily set this up as an object right here as well. Now, once we have that, of course, our app will break for multiple reasons. For example, there is no show model anymore. So first, what I would want you to do is just save, and then slowly, but surely, we'll start dealing with these errors. And first, I want to remove all these three functions, if name is there, as well as this one, because we won't need them anymore. And where we have show model, well, now we have a state. Correct that is the object. So now what I would want to do, of course, is change it around and say state and then years model open, because that is the property that is responsible for showing the model. And then where we have the people again, we need to go state and run people now of course, it is going to be an empty array. So don't be upset if there's nothing on the screen. And of course, there's nothing there show we are in good shape. And before we go any further, let me just pass in two things into the model or not. Let's start with one and then eventually there's going to be another one once we set up the function. So we're gonna model out want to set up a modal content, and I'll pass in state and then model content again, property that is coming from my state value. And then before we go any further I also want to show the model Meaning I would want to add some changes to the model, where it's going to be destructuring, two things, model content and eventually close model function, which we don't have at the moment. And as far as the return, let's add a class name and add model. And inside this paragraph, let's just go with a modal content, show modal, modal content, not save. And now, of course, if you want to test out this manually, the only thing you need to do is just change these values. So we have the data. Right? Now, I'm not going to set up adding data. Because what I want, we will do through the reducer properly, how if you want to see whether you can access these routers in a state, simply set people equal to the data. Now, of course, you have the data, okay, just to showcase that it is still just an object, we're still accessing that in a state that has an object and it has properties. So if I want to show the model, and of course, I'll say that it is true, because I have stayed model is open. So if it is true than showing the model and model continent will be hello world, America is now of course, I have the HelloWorld Yes, of course, we will do this dynamically starting from next video. But for now just understand that we have a state, which is an object in the object, we have these multiple properties. And the whole idea is why we're using that user juicer, because I only want to update these things. Once I call dispatch. And once I pass in proper action, I'll handle all of them in one place, it's only going to happen in one place in that reducer, and essentially will just be affecting this state. So now let me go back to property for values, where we have empty string, where it is hidden by default, and the people will be an empty array resave it. And now we can start dealing with our reducer. Alright, and once we have refactor to basic use reducer setup. Now let's see how the dispatch works. How the reducer works, what is a action, in order to affect anything in our state, we would need to dispatch and I'm going to do that if the name is there, meaning if it is true, if it's not an empty string, so I'm going to show you I'll have to add at least one letter, and then I'll click on Add. And in here, we'll call dispatch. So that is our function. And we always, always need to pass in the object with a property by the name of type. So that is going to be our action. So action is going to be our object. And in an object, you must have the property by the name of type. And when you need to set it equal to something, a common practice is using uppercase, but you don't have to. So in my case, I'll just call this testing. And then once you dispatch, once you dispatch your action, that's what it's called, then in reducer, you need to handle it. And like I said, reducer is taking as parameter two things state right before that update. And then what action you will want to do for now case, that is, of course testing. Now, one thing you need to keep in mind that producer, you always always, always want to return some kind of state, because again, this is going to be that use case, where if you don't return, well, none of the functionality that you have later is going to make sense. So let me just simply start by console log, and you'll see how there's going to be a big fat error if we don't return the state. So we get the state right before the update. And then I also want to console log the action. But if I don't return the state from this function, then this functionality won't make sense. Because now of course it is going to be on the phone. So once I save and once I had the letter over here, check it out. Now I have cannot read properly his model open of undefined. Why? Well, because I had the initial state, the default one that is right here. But since I dispatch the action, than the action went to reducer, in reducer, I did not return a new state. My whole functionality went bananas. Because there's no more is more open. That's why you always always need to return some Kind of state, if you want your functionality to work. So once I say run, once we have, for example, letter F, once we click Check it out, what do we see in the console. So now, of course, I see my old state, correct. And I also see this object with a type of person. So that is the state right before the update, where we have people array, and then his model open, and then model content. So now let's see how we can work with these values. So we have the state, and we also have the action. So why don't we go with if statement, the condition and check whether we are dispatching the action with a type of testing? Let's do it, let's say if we go with action, then that type, remember, that was the property name. And if that is equal to a testing, then we would want to do something. So essentially, what you do, you set up your dispatch functions with your action object where you set up type property with a value. And then in reducer, you catch them, you say, all right, if I dispatch testing, this is what I would want to do. So notice how we are not directly affecting state. It's not like we call set name, or set people or set model, we're not doing that. We only control the state when we dispatch the action. And then in reducer, this is where we deal with our state. And essentially, it is more structured. So even though it's a little bit more boilerplate, it is less prone to errors, or some kind of silly bugs. So let's deal with RF. So if the action type is testing, well, what I would want to do, well, I would want to return correct, I always need to return a state. So in this case, this is default one now. But now, if the type is correct, if it is testing, then I would want to return that new state. And since it is an object, again, we need to keep in mind that if I just add some kind of property here, then still my functionality will go bananas. Why? Well, because I need to have people, I need to have his model. And I also need to have moral content was the way of getting all those values, well, we are returning the object correct. And then we go with dot dot dot. And then I would want to copy all the values from the state right before the update. Correct. And now we add a comma. And then we just decide what vouchers you would want to change. And for now, we'll just do it manually, where I'll say, you know what, people will be equal to my data, right? Then his model open is going to be actually true. So say the model. And also as far as the model content, model condom, well, we'll set it equal to item added work. So let's test it out. Again, this will only happen when we click on a button. Correct. So let me add something here. And there it is. Now I have my list, john, Peter, Susan Anna, and also have item added. So the next time I will do something as far as dispatch, I will already have this particular state value. And you can clearly see that if your console log. So if we go here with a state, the first time we'll click, notice, eight is going to be empty. But then if we just click one more time, then of course, we already have the last state value. That's why it's so important to always return state. Now, as far as this default, one, you can return a state if you want. But another way, how we can do that is throw the error, if the action that you passed in, does not match any of the types that you're checking for. For example, here, I could go with throw new and also no matching action type sure where I would use that, for example, if I have here the house, and then I dispatch. And I don't know by mistake, I'm going to go type and random around them. So once I save once I click on the button, if my value is not there, if it is empty, of course, I'm going to have a big fat error. We're just gonna say no matching error type. So what is happening here? I could technically return a state. Yeah, that is an option. But this just gives me a clue that I'm dispatching something that I'm not catching in reducer, because in the reducer at the moment, notice, I have my Action. Action, of course, has the type. And I'm just checking for testing. Now, if I would be checking for a random one that I pass, then, of course, there is a different scenario, then everything would work fine. But this is a good default scenario where I have bunch of these ifs for all the action types that we're about to set up. And then if none of them match, then we throw the error. Again, the alternative would be just returning a state. And then if we return to state, you'll notice that nothing will happen, because of course, we're not checking for that random. But also, the problem might be that you won't notice that, hey, there's something wrong, I'm not checking for this action. That's why the alternative would be throwing the show with me delete it. And now let's set up to something useful. Now, what is that useful? Well, instead of testing, I would want to say Add Item, because essentially, this is exactly what I would want to do. So I'll say dispatch, and then type. And now I'm going to go with add on underscore item. Again, this is just a naming convention, where everything is uppercase. And then in between the words, we just use the underscore, that is not a role. And of course, in the reducer, I would also want to check that. So I'm going to go back to add, and then underscore item. Now, everything is awesome. But of course, we understand that we won't return just a data. So this is where I would want to get that value that is coming from the input, and then add to my empty array. The people right, now let's just leave it blank. But we're heaters. And we need to decide what how we can pass that data. And the way we pass that data is by adding more properties in here in the object. Now, of course, what would help is if I would actually create that item once on trying to submit the form. So let's do it this way, I'm going to go with const. And then new item is equal. Again, we need to have that ID. So I'll come up with that property new date. And then let's go with get time. And lastly, we'll set it equal to a string. Now grab that name for whatever is in my state value. And now once I dispatch, remember, I just said we can add more properties. And a common convention is calling this payload. But again, there's no rule. And the way you would do that you would add a comma since it is a new property, and payload is equal to my new item. Sure. Now, in the reducer, not only I'm checking for the type, which of course I'm doing, since I would want to set up some kind of return. But I also would want to grab that payload. So right above my return in the Add Item condition, odd want to say new items. And that is going to be equal to data.so. Let's copy all the values that we have from default state or the state one before the update, which of course essentially is going to be empty array. But as we keep on adding items, there's going to be more and more items would go with state items. So whatever array items we have, and then I would want to add action and payload to the new items. So now where we have the people, I'm going to go with new items. Now of course, I would want to open up the model. So I will leave his model true. And of course, I'll also leave item added. So once we save we have a big fat error because I did not add space in between New. And so now let's try it out our goal with random man, once I click on Add, then I have another issue set items is not iterable. And of course the reason for that is because it is not items. Sorry, it is people, my apologies. So now everything should work. And you know, while we're still on the subject, well just call this new people. The reason for that because in my original setup, I went with items. And now as I'm recording, I just changed my mind. That's why we got this bug. Let's just say random, odd, and there is now we have item added, shall we display our model. Beautiful. Also, we showcase that here in our list. Now what else we would want to do I guess I would want to clean out my values. Once I submit, correct, that only makes sense. So let's do it this way, where we have the name, right after that, I'm going to go with set name, and we'll set it back to an empty string. And knowledge dispatch another action, or this one will be no value action. So if I tried to submit an item without any values, then of course, I would want to showcase that in my model, we'll just change the action around where it's not going to be five random, will say no, on the score, and then value. Now when it comes to our no value action, but we'll just go with action type is equal to now underscore value. So if that is the case, what I would want to do, I simply want to return different modal content, correct. And I also would want to showcase the model. But remember, I still want to return my people are still want to show my items correct. So that's why again, we go with return data dot state. So we copy everything coming from the previous state state before the update. And then we say show model is true. And also, of course, I want to add different model content. So say model content, and that will be equal to a place and their value. Let's save it. And the problem here is that course smart enough, I added in my previous condition, and you know what, also the name is a little bit different. It is is modal, open, like show analysis route, we're out tried to submit and devalue. And now of course, we dispatch the null value. And then in action, we just check, again, the whole point where we copy this virus, because essentially, we just want to change two properties on that state is more open and more complex. And I want to leave the people, the list of people. In fact, maybe there's going to be cases, for example, with a closing model, that will only affect one property. That's why it is very important, once we return state, always to copy the values the previous values from the state, and then just decide which property value we would want to change. And in our previous example, of course, we changed all three of them. If you want to dispatch a action, and then change only one thing, just make sure that you copy all the hours. If you would want to burn through things, again, the same thing, make sure that you complete the hours. If you want to change all of them. Again, it is a good practice to always make sure that you're keeping track of your old state priors. And I think we're in good shape. So now we can add more actions to our arsenal. Nice work. And let's add two more actions, one for removing the item. And then also the clothes model one. So I removed that console log, I don't think we need it anymore. I mean, just keep on scrolling. So we add one for no value. And I guess let's start by passing in the closure modal function. And the way we'll set this up, notice we have handle submit, let's also create a function that will be responsible for closing the model. So const, close modal, not going to look for any arguments. However, within the function body, we will dispatch an action that we haven't set up in our juicer yet. And the type will be close underscore, mortal. And the only thing that I would want to do as far as this functionality is again to return all the state values, and then change his model to false. We're gonna go if action and non type is equal to close, none underscore Morrow, then return again, copy all the previous state values state. And let's go with his model open. And let's set it equal to a false. Now the gotcha here is that I would want to call it in model on our we want to call it after three seconds. So what I would want is to pass this close model as a prop down to a model. So let's go with closed model. is equal to a close model work show. And then once we do that in the model, of course, we can access it. So I'm gonna say here, close, close model. And in the model out want to set up a user, where like I just said, I would want to close it after three seconds. So let's go here with use effect. And in our callback function, we'll just set up a timeout. And let's say we have a callback function. And I would want to go with close modal here. And I would want to call it after three seconds. And that, of course, is 3000 milliseconds. So once we type something, first of all, that item should be added, we added the item. But then after three seconds, notice how we dispatch with dispatch this actual close model, I'm not of course model is. And similarly, we could add here a button to our items, and then remove that item, if we click on that button. And for that, of course, again, we'll have to dispatch an action. And of course, we will have to handle that action in the reducer. Right below the heading for let's go with button. I'll set up on click right away. And here, let's pass in our callback function. And our want to dispatch an action. Now type will be remove item. So type, and then we go with remove underscore item. And then I would want to be payload again. Why? Well, because I need to be specific, which item I would want to remove on orders. In this case, we're not passing that ID. Otherwise, how do I know which item I would need to remove. So we're gonna go with payload payload in this case, is going to be equal to that person, and then.id. So once we save, of course, we should be able to see. And there it is. And by the way, I should have added the item class, first of all, is going to look a little bit better. And also, I would want to add some kind of text here. So let's say of course, let me try, I'm saying item. And then once we have various, our item. Now that is our model, okay, Ireson after three seconds. And now we want to handle that remove item. So if I'll click right now, what do you think is gonna happen? Well, we're not handling that, right. So we should have this error. And this is awesome. Because at least tells us Hey, listen, you are dispatching an action that you're not handling in the reducer. So I go with if action men that type is equal to or more item, or more, move around. So within my condition, I'm going to come up with new variable, new people, that is equal to state people out want to use filter, I'm going to access each and every item as far as the parameter of person. And then I'll say person ID, there's not much to a action, and then pay well. So that is the case, then I wouldn't want to return this particular item. And now of course, I just need to return the state. So I'll say here return a new object. So we'll go with dot, dot, and then state where we have the people that is going to be equal to a new people. All right, we save it. And what should happen once we click the button, the model shows up for three seconds, and it says, Hey, please enter the value. Now, if we successfully add that item, example will say a random item. And once we added it displays random item, and of course, we can remove it as well. So that's how we can set up our state using user juicer where notice how it adds way more structure. And last thing that I would want to showcase is that normally, since reducers, are going to have a lot of functionality, you do move them to a separate file. So in a setup, I want you to create a reducer j s, then take everything as far as the function reducer, cut it out or show and in the reducer, copy and paste. Now of course we would want to export now if you want to export this as default, you can definitely do markers I will export this as a named export. And here we go with import, Van reduce. And then of course we are importing this from the reducer Now our functionality should still work. But I just need to make sure it is reducer. And now, of course, I can keep on working with my form, and everything will work. And now notice how much cleaner, more structured is our application, where we have the reducer, that just deals with our data. And each and every time we want to do something, we just dispatch this action. Again, like I've said this before, of course, it has way bigger use case, as your application gets bigger, or you get more people on a team. And if you'll go right now to the project and start working on the use reducer project, you'll see use reducer in a more complex setup. And of course, like I keep on saying, it is going to be a better use case for use reducer hook. amazing job. And once we have covered use reducer, and hopefully worked on practice project as well. Now I want to talk about the prop drilling. Now, let me just emphasize something right away, where prop drilling is not an official term. However, it is somewhat of the side effect. When you have multiple components on line, you're out the big component tree. And then you need to start passing some state from the top component all the way to the bottom of your component tree. And the reason why we will cover prop drilling first is because in a next tutorial chapter in the use context, we'll see how use context fixes that. And more specifically, we'll take a look at the context API that is designed for the use context hook is the new way how we can access that context. So this is going to be somewhat of a repetition, where we will share up a component where basically we have less than than each and every item in the list has a button, and we would just want to remove that item. So a little bit of repetition, just to see what is prop drilling, and how it looks like. And then in the next chapter, we'll see how we can fix that using the context API, as well as use context. Alright, now, we're going to navigate to our prop drilling folder, we have prop drilling dress, and of course, it is being the folder number seven, and then the setup file. In the app, only one input I guess I want to start with that, where I'm going to go with import. I'm looking for setup. And it is coming from the tutorial, Van prop drilling, of course, and then the setup. Now we would want to render sure we're going to go here or hit a sharp and there. Now of course, it complains that there is some type of issue. So let's navigate there, we have the prop drill, and everything should work. And of course, the reason why it doesn't work, because I successfully messed it up by not pointing to a specific file. And now of course, we have the prop drilling. Now, once we're here, like I said, a little bit of repetition, where essentially we'll create a list. And we will have the items in the list. Of course, each and every item will have that option of removing itself from doors. Now we do need to have a data here. So let's go with the import and data that is coming from. And of course we need to go multiple levels up. So I believe three, there is our data. So once we have the data, now I would want to set up a my main component where I have the const I'll have a list value here. So people again, set people set people amount is equal to a year state. And then we'll pass in that data, we're sure to have, again, that basic array that we already covered before. And now of course, what I would want is to do some kind of return in my JSX. So we'll start by returning a section. So let's go with a section. And let's write heading three, maybe, let's just say Prop, a drilling. And also I would want to have a list. So there's going to be a list component that takes as a prop, the people. So we're going to look for people here. And that is going to be equal, of course, to my people state value. And what's missing is my list correct? So we'll go with list now I already know that I'm going to be looking for People prompt. So that's why I will destructure it right here without any hesitation. And as far as the return, I would want to iterate over that array, because we already know that it is an array. And then for each and every item, I want to render the single person component that I haven't created yet. So I'll just go with return, we'll close out our fragment. And like I said, we'll just go with people array, we'll use map, each and every item is a person. And what I would want to return is a single person component that we're going to create in a second. So columns, and single person is equal. And now in a single person, again, I know that person is an object, there's going to be multiple properties. If you need to jog your memory. This is our data. So we have ID a name. And what I would want in that single person is to target the ID, and name for now, eventually, there's going to be more data. But for now, we'll just Target ID and Name work show online as far as the return, let's just return a div with a class of item, class name. And item here, for the time being largest right, single item, so heading for one single item. Now, of course, what I want is where I'm returning, I'm going to go with single person, and all right away get my ID, because remember, we still have the list. So we need to use the key Prop, we'll just say here, person, and then.id. So once we save, we should have four single items on the screen. Now why do we have world because my array has four objects. Just so we all are on the same page, we have our array, we set it equal to data, that's our initial value, then we have the first return, where we have a heading three with prop drilling, and then our list component that takes a prop. And I named people and I set it equal to my state value of people. Then in here, I'm the structure right away, the people prop out of the props on returning a people map. So a new array, where I'm iterating over people. And then for each and every item in my array, I return a single person component. Since it is listed, I need to pass in the key. And then in this component, of course, I'm accessing the ID mm, which I'm not using at the moment. And as far as the return, I'm returning a single item. So that is something that we have already covered more than few times when we talk about tutorials, as well as the project. Now here comes the interesting part. Well, what if I would want to set up a function that deletes that one single item from the list? Okay, let's first set up the functionality. And then of course, we'll do with rest on the use case. So we're going to go with const, I'll call this a remove person is equal to an ID, because this particular function will be looking for the ID, then we need to call set people that again, just so we can practice a little bit, all call this in a function. I'll say my current state value is equal to people. And then let's just return people filter. And each and every item will be set up as a person. And I'll say, if the person ID does not match to whatever ID I pass, then then of course, I'll return it. If it does match, then I'll remove it from the person ID is not equal to an ID work. So let's save it. And we have the function beautiful. And now the interesting part starts where now I need to get this function where? Well, I need to hear correct. So what are we doing? first need to pass in the life, then we'll have to destructure it of course, then we'll need to pass into a single person. And then eventually, we'll also have to use it over here. So the big question is, how can we get this function all the way here, and this is that prop drilling where essentially, we have the component here and you can make a good argument that this component last component does not, does not need that remove person function. But there's no other way for us to pass it down to a single person. I mean, I cannot simply say, all right, remove person, you'll be called here in a single person, a single person needs to somehow have access to that remote person. And this is what the prop drilling is where the list component will have to take the remote person and pass it down to a single person. So first, let's start by passing the Remove person as a prop down. That is something that you need to keep in mind, where when we talk about the functions, we also can pass them as props, we're not limited to just state values. So in this case, was to go with remove person is equal to A remove person. So now I'm passing in my function. Now in the list, like I said, I would need to destructuring I would need to say, all right, so get me this remove person from my props. And now I need to pass it into a single person. Now, I also need to pass in this ID and Name. And like already previously covered, we have multiple ways how we can do that. But my preference is using this spread Object Notation, where I just go with curly braces, and then dot, dot dot, and then whatever is the name of my primer, meaning list now, points that item in the list. And I'm just saying, you know, add all the properties, meaning in this case, ID and Name on to the props of the single person. And that's why right away have access to the RDMA. And then again, we need to pass in that remove person. So go here with remove person. So now we're passing it down. And of course, if I'm looking for ID and Name, I can also look for remove person Prop, correct, because now we pass it down. So we say remove person. And now it's finally set up our logic, we're not going to say heading, forcing the item, nurse a name here. So I'm going to be looking for my name prop. And also, we want to set up a button where I could set up a on clerk that will trigger that remote person. So button on click is equal to A in one function here. And we'll say remove person, I also want to grab that ID, each and every item, single person item will have that unique ID correct. And now of course, I would want to invoke my remove person, once I click on a button with that specific ID. And then as far as the value again, we are right. And again, idea of Prop drilling is following where list component technically does not, does not need to have access to the Remove person. But we have no other way to pass down our function into the single person, unless we actually pass it through the list. That is something called prop drilling, because we need to understand that there's definitely could be more components. So if we, for example, set up this function all the way up in the prop drilling, what if I'm gonna have, I don't know, two, three components down the component tree. So from the single person, I would need to keep on passing and passing and passing and passing all the way down to that one specific component that is looking for a remove person. route is something that the context API, as well as Redux. But Redux is definitely for more complex cases. I wouldn't suggest setting up Redux for this particular scenario. But context API is beautiful for this type of scenario, where essentially, we can avoid this prop drilling. Okay, hopefully that is clear, understanding waters prop drilling. And then in the next chapter, we will take a look at how context API helps us to fix it, where we won't have to pass in return through the list or any other components we would have into that one specific component that is looking for the function that is all the way up in the component tree. And once we have looked at prop drilling, once see how context API as well as use context hook will help us to resolve that issue. On first I would want start by pointing to a different folder on the file. Can we're looking for tutorial then I'm looking for use context As well as the setup and context A p II, once we render, we should see the prop drilling, and especially everything that we worked on in a previous video. And that is by design, because this is going to be the use case where we'll have to add a little bit of code, as well as refactor or old one, in order to see how context API as well as use context works. Now, what you'll notice here is the same exact file. And I would want to start by adding a few things, I'll say, use context. So that is the hook that we'll use eventually. And also, you know, I don't want the same name. So I will remove it. And I'll say, context API. It's not a big deal. But just makes a little bit of sense if we do that. And once we have the setup, ran, let's see. So we have this remote person. And again, the whole deal was that we were passing this remote person through the list through many other components. Of course, if we would have more components, down to that one component that is looking for that particular function. So how we can fix it? Well, first, we need to create the context. So I'm going to go above the context API. And I need to come up with a name. In this case, I'll say person on non-complex. Now that is equal to A react, and then we say dot, and now we're looking for the function of create contacts. Now we can pass in some default one, but in my case, I won't do it. Now, the moment we do that, now we have access to two components, the provider and the consumer. So let's say here, two components. One is going to be a provider. And then the second one is the consumer. So with the arrival of us context, we want to use the consumer previously, before the hook was introduced, we were using the consumer. However, now we don't have to, I'm just telling you that you will get essentially, two components back, once you set up that create context. And the way you access those components, you are going to go with person context, and then dot and then provider, or the consumer. So the thing is, provider works as a distributor. So what you would want to do is, for example, this is your root component, correct. This is where the rest of the components are rendered. Because you're less than nine within less you have a single person. So you'd need to find out a root component, and then return of that root component you would want to wrap in person context. And then the provider. Let me show you why is that important? So instead of section, I'm going to go here, we a person context. And then like I said, I'm looking for that provider. Now, why is that important? Because for the provider, we have the value prop. And what's really cool is that we can pass whatever would want. So we'll start very simply by passing in the Hello. And what's even more cool. I can also use use context to access this value, whatever it is. And to showcase that. If I go to single person, I can simply say coms. And I know that there's going to be some kind of value. So I'll call this data. Right now. We'll refactor it a little bit later. But for now, let's just say that it is data. And now let's use our use context hook. And inside the use context hook, we need to pass this context that we created. So please don't mix the two, we have person context provider that needs to wrap your whole component tree, or later, in different projects, it will wrap our whole application. Okay, that is important. Please keep that in mind. But when we talk about person context, we need to pass in that context into the use context. So don't mix and match don't say personal context, that provider here. Now, here, we're looking for the person context, but we would want to wrap our component tree or our whole application in the person context dot provider. Now of course, I keep on all the dimensional person context, whatever name you have, or here for the context, okay, in my case, that his person context if you would have bananas context, then you would go bananas context, dot provider. And what's really cool that if you log data You'll notice something really, really interesting. Check it out in the console. I have Hello, hello, hello. And isn't that awesome? Because what that means is that I have here, person, context provider, all the way down in my component tree. And I can pass whatever values, regardless of how many levels deep. And I'll have access without this prop drilling. So without passing it through the list. Now, you're probably saying, okay, you just pass in a simple Hello. I mean, it's not a big deal. Yeah, but remember, we are using JSX. Correct. So why don't we pass in the object? Again, we have first curly braces, which just means that we're going back to JavaScript plan. And here I'm just saying object. Again, this is not some secret JS x syntax, where we have double curlies and just simply means, yeah, I'm going back to JavaScript. And in here, I would want to have an object. Now what do I really want in that object? Well, I would want remove person, correct. Here's what I can do, and say remove person. And now, of course, I need to scroll down, I know that this is going to be an object so I can right away destructure it. And I can say, remove person. And now you'll notice that our functionality still works. Now, of course, is going to be a big, fat, massive complain, because the name is exactly the same. So now what I would want is to return or to remove all these instances, I don't need it over here. And I also don't need it over here. Correct. Lastly, I don't need it, where I'm setting up my list, so I can remove all of them. Now, of course, data is the same name, like I have, as far as the import. So now let me remove it amorous now, my functionality still works. But I was able to go around that list. So if I would have, I don't know, two, three more components that are inside the single person, I would be still able to do it. So we set this up in a room, and then whatever is set up inside here, all those components will have access to whatever we pass it down into the value list, because of course it was just from person. But keep in mind that since you're setting up the object, you can do pretty much anything. And similarly, you can argue well, we can also maybe omit the people. And you're right, because I can pass here, the value of people. So the state value, and then I can access it where well in my list, right. So now I don't need to pass it through the component as a prop, I can simply say that I want to access it using the use context. Now in order to speed this up, I'm just gonna copy and paste. And then notice we have the remote person. Now in this case, I will showcase that it is an object. So let me call this main data, something like that. And if you'll console log, you'll see that, of course, main data will be my object. Now it's gonna complain to people is not defined. Because of course, now you need to access that main data, and then dot people. Now, of course, everything works. Now the reason why I set up a separate variable, because I want you to understand that in this case, we right away destructured, the Remove person from the object that we're getting back. In this case, I'm just showcasing that, of course, we're accessing the object and you don't have to destructure you want to do it this way, you can do it this way. Whatever is the name of the object, whatever you're getting back, and then whichever property or method you will want to choose. So in my case, since I'm looking forward to people array that I just passed them. That's why I go with main data, and then dot people. And then I'm iterating over. Now, few things that I would want to mention. I personally don't find it that useful. If I have only one level, meaning with the list, I see no problem of passing that people state value as a prop, where I would introduce the context. That is definitely if I have to three or whatever lows the ban definitely mentioned. And also, a lot of times I stick to setting up it one time globally. Don't worry, we'll cover that in the projects where essentially we cover our whole application in that context provider. All right, and the way we do that we need to export this The person context the provider, as well as the main context, and we will need to wrap it in the index js. Again, that is something that we'll take a look at. In the project, I didn't see the point of jamming everything here and authorial. But just keep in mind two things that I have no problem of passing this one level as a prop. Now, some people right away introduce the context. Again, that is their preference. It's just a lot of times I see students where once they learn about the context, they say, Well, why we're still doing the prop drilling. Now, in my opinion, the prop drilling starts when we start passing in two or three levels deep. Essentially, we start passing through the components that don't need that info. When we look at the people that we just passed into the list list was using. Again, I have no big issue over there. All right. Now, last thing, I guess, what I would want to do is just change this title, from say, context API, and then forward slash use context. So hopefully, it is clear how we can avoid passing unnecessary data through the components. And now we can move on to our next topic. of Next we have custom hooks. And essentially, custom hooks allow us to reuse the functionality. So let me be clear, we're not talking about reusing HTML elements, we already can do that with components. We are talking about the functionality, whether that is fetching data, saving to local storage, and that sort of thing. Also, before we begin, let me just mention that I purposely added only one example of custom hooks, since you can easily find other custom hooks examples. So the code community has created for three years by just typing custom hooks in your favorite search engine. The point of this example is to make sure you understand the purpose and the setup of the custom hooks. So after that, you can either create your own custom hooks, or with ease use someone else's custom hooks in your own apps. Without Let's start by importing the module. The module we're looking for is module number nine, by the name of costs them. Again, we have final setup folder. And of course, in the address, we're going to be looking for the setup folder. So we go here with import online the setup. We're looking in the tutorial, online more specifically, folder number nine custom hooks, of course, the setup. Now in this case, there is a file name, and we're looking for fetch an example. So in this case, I'll remove the heading to learn of course, I'd want to showcase the setup show once we load, notice we have loading the doc, and then we have the data. So what is happening over here? Well, if we navigate to our file, the first example, we'll notice that we'll have somewhat standard setup to fetch data. So we have used state we have used effect, we have loading state variable, we have set loading, of course, by default loading is true when we have some kind of state variable that is called product. Initially, it is an empty array, then we have the function that fetches something. So in this case, this is purchasing from my own API. And we use this in my JavaScript course where we have the product. Now, if you want, you can of course, navigate to a bigger screen. And then copy and paste, it is an array of products. And don't worry, we'll use it a little bit later in tutorial. So you'll see what this is all about. But essentially, it's just a bunch of product with some price with some name, and image and all that. So we're fetching that, I hit the URL course I get the response, I rhombi. json, and then I set to state values, my offset product, and then I have set loading to false. And of course, I'm running this with my user. And I have the empty array means that it runs by default, the moment we run that, and that's it. And then of course, I'm just console logging the product. Now the point of this is not to tell you that there's something wrong with the setup. The point is to showcase what what if I would want to reuse this functionality, because there's no way for me to reuse it. I mean, I can use this with this. particular URL. But if I have a different component that also needs to fetch something, again, I'm just reinventing the wheel. Now, before we do anything in our custom Hawk, let me just showcase that. If your console log, of course, you'll be able to see the product. Again, the point is not to setup anything, as far as the component, we simply have loading. So we check whether the state value for the loading is true. If it is, then we showcase loading dock. And then once we're done with loading, we just display the data. And what you should see in a console are these 12 products. So again, this is not our main concern. If we have the products, that just means that our fetch was successful, our point is somehow to come up with functionality that we can reuse. So if I have another component, that also would want to fetch data, I don't need to duplicate these lines of code. By the way, in this case, we don't have the error. Keep in mind, normally, you'd have the error as well. And of course, once we set up our custom hook, we can definitely add error, as well. And I already said that, we will be creating a new custom hook. Sure, you can probably already guess that in the second file that is in the folder called use fetch. This is exactly what we're going to do. Right navigate there, I can see that I have react, I have used state and I have used effect, not don't honestly, we actually don't need the react, we can just use use state and use effect. And then I have this function, I have this use fetch function. So here's what we could do. First, I could save it. And then where we see the fetch example, show our previous component, I can just cut out the lines starting with loading all the way to where we have the use effect. So let's just grab everything. So starting with line five, all the way to line 17. And just get it up, and then navigate to use fetch, and copy and paste. Okay, that's an awesome start. So we still have our loading state value, we still have the product. And of course, we still have the function. Now, if you want, you can rename this something more generic, for example, data. But since we will use them later, so we will use this customer later. But we'll still be fetching products, I won't do that. Just keep in mind that you are not limited to calling this product. It's state valor. Sure, you can call it whatever you'd want. So my whole idea is that I would still want to perform this functionality. Correct. But I'm not doing this anymore. In the component show, I have my custom hook. And of course, in order for this to work, I would need to return something from this customer. And what I would want to return is an object. And then in the object, I'm going to place my two state vouchers, one is going to be loading. And then the second one is going to be product since I also would want to make this reusable, I will set it up where I'll pass in the URL into the function. So I wait when I call this use fridge later, in different components in different topics, I can simply pass in the new URL. And I'll still get back my loading, meaning whether that is true or false. And also the data that I'm getting back. So I'm going to say here that I'll be looking for one argument, the URL argument. And also, our would want to call this user for when the URL changes. So it's going to run one time when essentially we invoke the function. And also if we change the argument for the US fridge custom pork, so I'll save this beautiful. And now of course, I need to navigate back to fetch example. And I need to import. And as you can see, in line number two, this is exactly what we're doing. So we import the use fetch custom mock. And of course, it's coming from of the file the use fetch. By the way, I just noticed that my naming is somewhat off, should be used fetch. So of course in your example, it's already going to have a proper name but in markers, I would need to change this where this is used much and also my import should be used Now once we're done, of course, now I want to invoke my custom hook. And this is the case where notice, we're returning a object over here. So normally when we use use state, since we're returning an array, we did a array destruction. So this is going to be the case where now of course, I would want to destructure the object, because that is what I'm getting back from my custom code. So here, I'm going to say cons, and then loading. So that is the first thing that I'm looking for. And the second one is the product. Correct? Man, I'm going to set this equal to use fresh, so not use effect not used. But my own custom hook by the name of us, and lanforge. And now, of course, I need to pass in that URL. And, of course, we already have the URL in the component correct, because we have the variable by the name of your URL, and not point back to my own API. And now the cool thing about you'll notice that once we run, our functionality didn't break. So now we can still check the loading animal can still get the product for navigate there, check it out. Once I refresh, I definitely can see that I'm still fetching my products. However, now my functionality is tucked away in a separate place. Now my functionality is tucked away in a custom hook. So if I would want to reuse it, and which is exactly what we'll do in the later topics, just so I can emphasize the point of using the custom hook, every time I would want to fetch data, instead of using use state and setting up the loading, setting up some kind of array, and that type of thing. I will just call use fetch, pass the URL from the function, I'll get back to you things, the loading, as well as the product. So like I said, if you'd want to introduce her as well, definitely be my guest. But in my case, we're just going to stick with loading and product. Now the one thing that I would want to mention that since this is a custom hook, it has to have this huge. So for example, if you'll just say, fetch, so you're exporting fetch, you'll see a big fat error, even if I change the correct import, because we're not allowed to use hooks inside the regular function. So either the function needs to be a component, or it needs to be a customer. That is something you need to keep in mind. So that's why we need to make sure that when we're creating our own custom hooks, we need to use this huge show. In this case, I call this use fetch. So now of course, I just need to make sure that my import is correct. So I'll say here, use fetch. And of course, everything is going to work. Nice work. Next, we have prop types. And effectively prop types allow us to validate our props, so the props that we're passing into component. In order to get up and running with our example, course, we will need to import from folder number 10. In this case, again, we're looking for the setup. And as you can see here, I have the images, meaning the main entry. So we just need to look for the folder in the app js. So we'll go with import and set up from online tutorial of course, then we're looking for the folder number 10, the prop types and then forward slash setup. And we're good shape. So right after the heading to or not Miramar with. And we're right here set up my clothes, my component, I should see the product, the devs with a single product backlog. So what's happening over here on what we're trying to achieve? Well, of course, we would need to navigate first to the index js. And what you'll notice is the imports. So we have import for the product component, which essentially is where we're going to do most of our work, then we have our use fetch custom hook. And if you didn't watch the last example the last topic, then please do so. Because I'm not going to go over what is happening with use fetch with our customers. So we import from the folder from the final folder in this case. And then of course I have the URL which I pass into the use fetch That's the nice thing about the custom hook. Because now, every time in a project, when I want to fetch some later, I can simply use my use fetch when passing the URL. And I know that I'll get back to you things, I'll get back to loading as well as the product. Now, in my case, notice how I don't need loading. So I'm not using him. So I'm just getting the product. Again, this is just to emphasize the cool thing of custom hooks, were now of course, I don't need to set up your state, I don't need to set up use effects. Everything has already done in the US fridge custom. Now, with that said, Of course, I'm grabbing the product out of my return. And then I have the section with a class name of products that I'm iterating over those products. And then for each and every product, I'm returning a product component. And then of course, we need to pass in the key prop value is equal to a product.id. And I'll show you the API in a second. And then we do the object spread operator, where I pass in all the properties from each and every product into the product component. Beautiful. Now, I guess we'll start by checking out the API, and essentially are set up this API myself, just so we can have the example, of course, which you can do is again, navigate to a browser, and then just copy and paste URL. And you'll see that again, we have some kind of array. And then each and every item in the array is an object, which represents product. And there we have the ID property, we have the name, we have some kind of image. Of course, if you want, you can open this up. And then we also have the price. So far, so good. Everything that we have covered already before. And we can probably already imagine that in that product component. Well, we'll have to access those properties one by one correct. Only to have the name, we'll need to have an image with the URL more specifically, as well as the price. So let's try it out. And let's see where prop types come in handy. So I'll open up the sidebar, and I'll check my product. Like I said, the moment the single thing that I'm returning is just single product text. But of course, I would want to change that around access those properties, because I know that I'm passing the amendment correct. In the next jarius, we do pass them in. So it's not like they're missing. But there's going to be a gotcha. I'll look for my image, I'll look for my name. And I'll look for my price. Now, of course, in the return, well out mana make it a bit more interesting, where I'm going to return article with a class of product, that still stays the same. But then I'm going to look for heading four. And I'm going to say you know what, show me the name, get me whatever is the name of the product. And so far, so good. We have utopia so far, all the way to a surface. Alright, so that worked. We got our prop by the name of name. And of course, we can split. However, what do you think is going to happen when we try to do the same thing with a price. So let me access here to price. And what you will notice that all of them have some kind of price. But the last one, for some reason, displays nothing. And that some reason is simply because in this API, well, all the objects have those properties, apart from the last one. And I did this on purpose. Because if you're ever worked with API's, you know that you're not always guaranteed some kind of value. Yeah, for the most part course, if you have an array of objects, the values for the properties won't be there. But once in a while with some images with some prices, some of the values might be missing. So here the problem is that I'm relying on the fact that I will for sure have this price. But the question is, well, what if all the data that I'm iterating over that property? So that value is not there? We're done. Because Yeah, it's nice to say, Yeah, I would like to get the price. But if the price is not there, what are my next steps? And what's even worse, is because we have the image, an image purposely, I set it up as an object in the object. I'm looking for the URL. Now what do we know about JavaScript? If I'll try To access the URL property on the image that is undefined, in my last object, you'll see that we will get a big factor. So what I'm trying to show here is that even if 99 out of your 100 items have all the properties, if one of them is going to be missing, since you're checking for the property that is in the object, you'll get a big fat error. And of course, you'll have to deal with that, showcase that I'm going to go here with an image. And what I would like is, of course, set up my return, then I have my source. And then remember, we needed to go for image, and then dot URL. All right. And now of course, for the alternative will also go with a name. So once I save, like I said, there's going to be a big fat or Now why is that error? Well, it's simply there, because I already mentioned few times that we are getting the property values on the object. And even though for rest of the items, image property is right there. The last one doesn't have it. Since I'm checking the property on on defined, course, reacts, complaining, if you ever see this kind of setup, first of all, I would suggest not freaking out. And what I mean by that a lot of times I see students right away going for questions saying, Hey, listen, there's something wrong with my project, because, well, I cannot access the property, I have this on the phone. If you ever get this case, what you simply need to do is just make sure that you're turning some kind of static value. And then one by one, you start checking, hey, listen, what is happening with my prompts. Now, why do I want to return a static value? Well, because of course, I don't want to access them dynamically. Because that will always throw the error. So always, always, if you ever run into some kind of issues like that, I would suggest, in this case, commenting out and then saying some kind of value, some ground return, it's going to be heading for and then again, back to single product. I'll save it. And of course, I would want to check, hey, listen, what is happening? Where is my image? Where's my name? Where is my price. So once we go back, of course, we're going to do that in the bigger browser window, and I can see that something's off. So yeah, for some of them, I have the values. But then I see those on the fines. And of course, now I would want to set up the prop types that essentially would check that forming. And the second thing that I would want to do is set up some kind of default values. So first, let's start dealing with those prop types. And what's really cool, as far as the prop types, we don't need to install, any extra package is coming right away. By default, when we set up create react app. And we go with prop types. And then from and package is exactly the same, it is called prop types. So notice how this one is with an application. And that is done on purpose. Because in order to set up prop types, we'll have to set up a prop types property on the component. So we go with the name of the component, in this case, it is a product, and then we go with prop types. So that is the name of the property. Keep in mind, this is an import from the package. And then this is the property on the component that is always going to be there. And then we just say, Hey, listen, what kind of props are we getting. So if I have image name and price, then the same way in this object, I'm going to say that I'm going to be looking for image prop. And then I need to run my import the prop types. And then of course, we have multiple prop types, whether that is a string number, object, or whatever justified. So in my case, I know that image is going to be what? Well, it's going to be an object correct. So go with prop types, then I go with object. And then since I would want prop types, to yell and scream, if something's missing, we also add this is required. And effectively for every prop that you have, you would want to do the same thing. Now in my case, I have name and price. So just copy here. Then since it is a JavaScript object, I just need to add a comma. Of course, change the names. So I'll change it to name and also change it to a price. Now in this case, of course, I'm not looking for the object. I'm looking for the string. Like I said, I can add whatever job value would want. And here we go with number. Now, since I set them up as required, which you'll notice in the console, now we don't need to go and manually check and say, Hey, listen, is one of them without the image in price, because I can clearly see that in my console, where I have the warning that says failed prop type, prop image is marked as required, but then the value is undefined. Now unfortunately, it doesn't point me back to that specific product. But at least it tells me Hey, listen, there's something off, you need to do something because the props that you're expecting, well, in one of the items, they are missing. So that's step number one. Now the next thing that we can do is start using either the short circuit operators, or we're going to set up default props. So first, let me show you how we would set up a default props. And then from then we'll take a look at the short circuit operators, as well. And the way we set up default props, simply because I don't want those big fat errors, if the image is missing is like so where we go with the product. And then the property name is default props. It's as straightforward as it gets, where again, I write my prompts. By the way, here, I need to have a equal sign. And then of course, what is going to be a default prop if that prop is missing. So I go here with default name. If the name is missing, then I go with the price. Now for the price, I'm just gonna go with 399, just in case it is missing. Remember, last one also have the price missing. And when we have the image shown here, I'm going to go with image. But it would help, of course, if I would show some kind of image. Correct. So that could be either URL, or, in our case, if we check out our project, we should see the assets folder. So right next tutorial, notice we have the assets folder. And in there, I have default, hyphen, image. jpg. And this is going to be the case where I'll also show you how we can import images into our components when we work with create react app. So what we would want to do in that file, in the component where we want to use, we're going to go import, then we need to give it some kind of name. So in my case, I'm going to give it somewhat explicit name, and somewhat long, I'm going to go default image. And then we need to navigate to that folder. So this is going to be three levels up. Because of course, now we're in a product. So we need to go first to the prop types Vantage authorial and not eventually, we need to be in source. And this is where we look for assets. So we go dot dot, and then we leave one folder, then dot next one. And then finally we arrive at assets. And then since it is not a JavaScript file, we need to go with default. And then hyphen, image and then jpg. So essentially, you need to have a full path, including the extension. Okay, hopefully, that is clear. And now of course, what I could do is just say, default image. So if the image is missing, then of course, this is going to be set up as a default image. Now, what are we doing next? Well, now are concerned. And of course, I can try to uncomment. So on comment, and of course, I can see something beautiful. So that is not that bad. I can see that I have all these products. Okay, good, good, good. And by the way, there's extra single product that I don't need. And then for all the products that have those properties, life is great. But then the one that is missing, remember the last one, not only the image was missing, but also the price was missing. Now I can see that I see that default price. So that's already a good start. However, there's one more problem where now of course, this image is an object. Correct. So even though I set up default value for the image, when I'm going with image on that URL, well, I still cannot see the image. Why? Well, because there is no URL property on the image that I'm providing. So we'll also need to take a look at how we can use short circuit operators in order to fix that. Now before we go any further don't. I would just want to showcase that. As far as the image we can import In any file we would want. So if we go back to index, if I'll just copy and paste the path, because of course, it's going to be exactly the same. And if I want to place my image, I'm just going to go with image from source. And then of course, we're going with default image, just to showcase that each and every time you'd want to use it. And by the way, I need to push it above the URL. That's why it's not working, then of course, I can use my image. Again, same setup is going to be for every component. So you can set up your images. And as far as the import, you just need to give it some kind of name. And then of course, the full path because it is not a JavaScript file. So that should cover my images. And I'll just comment them out for your reference. But now let's finally deal with this product. So I have the product, I have some problems that are there, some that are not, technically, I was able to fix somewhat a lot when I talked the default props. But there's also another way how we can set up those default props. So I'll comment this out for your reference. And now take a look at another way. Now yes, there's going to be a big five compliant. But first, I would want to showcase that we can use or operator. So if I know that price might be missing, what I could say is, get me the price. If the price is not there, then we use or opere. And then we can add that default value. So in this case, I can go with 399. Now the problem is going to be that we will still have this error, because when we check for this URL property, and the image, we cannot use this or I can say here, get me the property on the object. But if the image is undefined, while this all makes sense. So even though you might think that I could just check for default image this way, it's not going to fix the situation, because JavaScript still complains about we're trying to access the property on the on their farm, which of course is going to be our last project. And this is where the AND operator comes into play, where we can set up some kind of variable markers, that is going to be a URL where I can say, you know what, if the image is there, only then get me back the URL. So if the image is there, then get me URL. If the image is not there, well, van is just going to be defined. So that way, what we're doing is we're only checking for the URL. If the image exists. If the image doesn't exist, then we're not even checking it. So the last product, of course, it doesn't have the image, it is undefined. So if that is the case, we're not even checking for that URL. So in our case, you will notice that I nicely display that default image, because for all the products, I'm checking for the image images there, and then I get back the URL. And then of course, I display the URL, or here. However, for the last one, since the image is not there, I'm not checking for the property that is not an object, so I don't get the error. And then in here, I say, Well, you know what, if this is false, then just display the default image. And of course, I can do the same thing here for the name if I would want I could use my OR operator. So that's how we can use prop types in react. And before you ask a question, Well, why we won't use it all throughout the project as well as remaining of tutorial? The simple answer is that, well, it is adding too much code. And in my opinion, it just gets a little bit messy. So since our goal is to learn whether or not is building the project, or working on a specific part of the tutorial, that's why I will avoid using a bunch of these prop types because in my opinion, they just make our files bigger and harder to read. Now one last thing before I let you go is the fact that of course, you can set it up the prop types using the snippets as well. So I'll just create some testing file here. First thing js. If you'd want to add prop types, you just go here with this B. So you have our A f c and e is going to start for export. But then if you add this B you also right away get this prop types. And then of course, you export the testing component. And then one more thing if you want to have a short Got where you're setting up the prompt. So for example, I could go with name, prop. And then if you want that is required, then you go with PT. And then whether that is an array or string or whatever. So in my case, I'm going to go with a. And then if you want required, then you just go with our under notice you have prop types array, and then years required. So those are just the shortcuts that you can use. And those are use cases for prop types, where they first allow you to see which props are missing. And then when you combine them with short circuit operators, you can just make sure that if the prop value is not there, you have some kind of default value. So for all our examples, we're in the same page. Even though it works for our tutorial, when it comes to real apps, it's nice to have multiple pages. Now when we talk about JavaScript frameworks, we are not talking about traditional HTML pages. In that case, we have a new term, a single page application, which just means that we have our one page, in this case where we have a div with an ID of root. And instead of going back to a server and requesting info about the pages where the user navigates, we set up a routing on a client side without the page refreshes. To give you a visual example, navigate to App j s. on import. As always, you can call it whatever you would like my case, I'm going to go with final Of course, from we're looking into tutorial, when we're looking at the folder number 11. And the final folder, show here where we have the advanced react. In this case, I'm just going to add my final component to give you a good understanding what we're going to create. So notice here, we have the number. And then we have three links, and check out the URL bar as well as the refresh icon. Where notice, as I'm going from one page to another one, I'm switching the URL, but we're not doing a full page refresh. So each and every time we navigate to about or people, or Hey, we're not going to a server, and fetching the data and then coming back. Instead, all this is happening on a client side. And of course, this is what we're going to create in the following videos. Now when it comes to react, it does not have built in routing, and will need to use an external package for that. And the most popular routing library in react land is by far the React router. But let me be very clear, it's not part of the official react. Even though it might seem so because of its popularity, it is still an external package. If you check the folder for react router, you will find a markdown file with more info. Sure, what I would want right now is to remove our example. Hopefully you can see what we're going to create. Navigate to react router folder, and then you're looking for react router, info markdown file. And here, you'll find a link to official docs, just so you can see where I'm getting the information from. And also keep in mind that for your own project, you'll have to install the React router Dom first. And you do that by running npm install react router DOM. Now, of course, I already installed this. So if you go to package JSON, if you check out the packages, you'll see that there is react router DOM, and more specifically, the version of 5.2. Now just to showcase how we would install the package, I'll stop the dev server. And then again, we'll run NPM. And remember, what was the command, it was npm install and react, router and then down. So all what you need to do in your own project, you would install the dependency and then it's going to get added to the package JSON. And then of course, you can start using it because you'll see that there's going to be some imports in the upcoming videos. Now let me start up the server again. So we go and start. And the last thing that I would want to mention, as far as the React router general info is the version number. It is safe to say that you'll be watching this in a future just like any other software course. There's going to be some update. So if you're watching this, if you install it, and you can see that the version number is already, for example six, then of course, you will have to go to docs and see what are the changes if there are any, and most likely there will be as far as the syntax. So the syntax that we're about to cover is for version five. Keep that in mind. Once we switch to a different version, it's a good chance of that also, some syntax will change as well. Now, you'll still be able to use a vis index, if you go with this specific version. But if you want to use a newer version, if it is available already at the time, then of course, you have to go to a doc, and make sure that you follow the proper syntax that relates to that specific version. Nice. And once we're done discussing the general concept of react router, of course, let's get to work and set it up in our own application. First, of course, we would need to navigate to address then we're looking for folder number 11. And you can probably already guess, of that, we're going to go with the setup folder. And you would be correct. Server navigate to tutorial. And we're looking for folder number 11. And then we're looking forward to setup. Again, I have there the index show the main entry point, so we don't need to show specific file. And then of course, instead of there's a random text, the React router, one, we're going to go with a setup component. Awesome. Now it's still going to display the same text, so you're not hallucinating. But now of course, I would want to navigate there. And most of the files that you find in a setup folder are going to be our pages. Now, Iran is a bit confusing, don't worry, once we set up the router, you'll see how it works. But essentially, we have about error, we have also the home as well navbar people on person. So everything apart from index, where we're setting up our react router, and then the navbar where we display the links, those are going to be our pages. Hopefully that is clear. Once we have that out of the way. Now let's navigate to mixtures. And notice how I'm importing all the branches. So once we set up the router, depending on the URL, we will display that specific component. For example, there's going to be a home page as well as a single person page. Now in order to get up and running with react router, we'll need to import from the package from the React router DOM, the browser router, a common practice is giving it an LS. In this case, we are giving an alias of router, a route as well as the switch. So one by one, of course, will cover what each of them does. In this case, let's start by setting up our return. And this is the part where we would want to wrap all our index return into the router. As a side note. Normally, when you work with react router, you'll wrap your whole application. Again, most cases since we have a separate folder for each and every example. That's why we're wrapping the return of images. Just keep in mind, when we will be working on our project, we'll go over how we wrap our whole application. So essentially, the setup is going to be exactly the same. But the difference is going to be the router, we'll wrap our objects or the images doesn't matter, whichever place you pick, as long as it is a root component, because that way, of course your whole application can access the React router and can use it. In this case, only the setup folder. Of course, the final one where we have the final code can use the React router DOM. So with our router in place, now we need to set up the routes. Essentially, it just means that in the URL, when we navigate with our data is the homepage of bulk. Well, then we display that specific component. Like I said, these are just components but I gave it a comment of pages. So these are just components that will become our pages. And the way we set them up as pages. We're going to go here with a route. Then we have a path prop. And this is a specific prop. So make sure you name it exactly the same And then this is where we showcase what is going to be our URL. And the first one I want to showcase is the homepage. Now for the homepage, we just go with forward slash, that just means the domain. Now in this case, of course, our domain is localhost 3000. But then normally, you'd have cnn.com, or, or google.com, or whatever, just think of the domain, for your application, whatever is going to be. So that is going to be the homepage. And then once we have the route component, inside that route component, this is where we display whichever component we would want. So keep in mind, technically, if you want, you can play whichever component your heart desires. Because even though this says that, yeah, it is going to be a home page, you can easily place here, people components as well. Keep that in mind. But of course, in my case, since it is a home page, I also have a homepage component, meaning the component by the name of home, and then of course, I'm displaying it. Now, in order to make it a bit more interesting. I'm going to copy and paste One, two. And then of course, I'll add about as well as people now 40, about what is going to be my era Well, if the forward slash is the homepage, let's say that 40 about page, I'm going to go with forward slash about. But again, you are in charge, if you want to write about shake, bag, Lazarus means that this is going to be the page where you navigate. Okay, keep that in mind that you are always in charge. Well, what is going to be your URL. Now in my case, I'm just going on with forward slash about. And of course, in order to showcase my about page, I'm going to say that once we navigate there, I'm going to display the about component. And finally, I'm going to go also with a people. And you can probably already guess that we're going to be going to a people page. Now the moment we refresh notice, now I have the homepage. Now why do I have it? Well check it out. If we navigate to a home dress, or home component, this is what we have. So if I'll go here and say shake, Berg, improv probably already guess that will display the paragraph with that specific text. So hopefully that is clear. We have on page. And now of course, in the URL bar, since we haven't set up the nav bar yet. If we go with forward slash, and then about, we should. And let me emphasize something because there's one gotcha, we should see the about page. And once I press Yeah, I can see the about page, but there's a tiny issue, where I can also see the home page. Now let's try it out with people. So in the URL bar, go here and say forward slash people. And let's see what we're gonna get. Again, same thing, I can see that I have the content from the people page. And if you want to check it out, here it is, essentially, I have my data here, I set up the state variable. And I'm just iterating over. And don't worry, it's gonna make sense, once we get to URL parameters, why we have this specific setup. Most importantly, what is happening here, why we have homepage with Shrek and back. And then the people page, even though technically, we are in the people page, where you're seeing what's happening by default, when it comes to react router. If the path matches, it's going to display both components. And as you can see by the URL, well for the homepage, it also matches the about correct. And then it also matches the people. That's why when we navigate to people to about or whatever page we will set up, it will also display the home page because technically, the path matches. Now in order to fix that, we will need to add another prop where we say exact. So once we save, you'll notice that now only the exact path matches whether that is people or whether that is about or whatever URL your setup. And only once I go back to my domain, then of course I can see the home bridge. Now if you want you can have this exact path to every route. pad is totally up to you. But in this case, since I don't have any nested pages, so there's not going to be about Ford slash and something else. I'm just going to avoid that. Just keep in mind you're not limited to adding this exact to only the homepage you can add it To every route, and that way, only the exact match will be displayed. So that would be a basic setup for react router, where we have a router, we wrap our whole app being in this case, of course, it is just the index JS in the setup. But normally, you would wrap the root component. And then you have routes online for each and every route that you have, you just set up a component, whatever you will place in that component in return is going to be displayed. And then we need to remember about the path Prop, where essentially we say, Well, what is going to be the URL as far as the homepage is just going to be a forward slash. And then you can come up with your own components, of course. And once your display as well as the URL, just go with forward slash, and then whatever the name you choose. And then in order to set up exact match, you just need this exact prop is an easy now we're familiar with react router basics, of course, let's make things a bit interesting. And talk about the error page, as well as why would want to use a switch component as well. As far as the error page. Well, if we go right now to the URL, and if I go with forward slash, and then Hello, what do you think is going to happen? I have three pages of home about and I have people however in the URL? Well, I'm navigating to a Hello. With our current setup, the only thing we're displaying is a empty page, it will be a better experience. If at least we would tell the user to Hey, listen, such a page doesn't exist. And then he or she can navigate to some different bridge, most likely the home bridge. And of course, the answer is that yes, that would be a better setup, the first thing we would need to do is go with error page. Of course, that is going to be our component. But as far as setting up the route, it's going to be a little bit different, where we go with a route component. And then for the path, we go here with the star. So instead of setting up for slash error, or not found we just go here with a star. Now it started means that it will always always match. And of course in here, our one on display the error component. And now you'll see that I have my garbage. And technically everything works nice. Now I have my Hello, we haven't covered links yet. So don't worry, eventually, we will add here a link that allows us to navigate to a different page. But at least it's a good start. Once we navigate to a page that doesn't exist, whether that is a Hello or shake and bake. And of course we have the error page. Now, the problem here is going to be a bit different. Where once I navigate to a home bridge, I can see the error page. Once I navigate to a bulk page, I'll also be able to see the error page. Why? Because this one always matters. This is where the switch component comes into play, where we'll go with a router. And then we'll have our switch component. And we'll put all our routes in the switch component. And with a switch component, only the first one that matches is displayed. So that way, if I go to homepage, then I can only see the home page. If I go to your about page, of course on the about page. But if all nicely go to a Hello. Since this one always matches, we have the error page. That's how we can set up error page with paste which component in react router. Nicely done, I think we're making a good progress. So now let's talk about dealing. Because even though we could technically leave it the way it is, where a user needs to navigate using the URL bar, you would have to agree that probably that is not the best user experience. And for that, of course, we would create a navbar. Now I already created the component. So the only thing we need to do is place it inside the router. Now again, please don't place it within a search insider or show right above this, which we're going to grow here with a navbar the moment the only thing we have here is some kind of text. Now of course, let's navigate to our navbar component. And this is where I would want to set up a ordered list. So I'm going to go here with our list and list item and then instead of going for traditional link Like we have been doing already in the HTML. In this case, you need to import a link from react router DOM. And, again, there's a specific prop. And that is to show you go here with link to prop. And this is where you specifically say, well, where I would want to navigate. In this course, I'm going to go with a home page. So of course, the only thing I do is match whatever was my setup in the index. So for the home, I had a Ford slash. So of course, if I would want to navigate back your home bridge, well, I will just use to prop and then forward slash. And here I say home. Now, I would want to make two more items. And I'm looking for about 10 people. So first, let's just change this text around. And we'll say people, and also we, of course, need to change the URL. So if for about my URL was forward slash about, and of course, make sure that it matches. Otherwise, you will navigate to a error page, not the end of the world, but probably also not something that you're looking for. So let's save it. And there it is. Now I have my lunch. So instead of using the URL bar, now, what I can do is just say, hey, show me the people page. And as you can see, like I said before, now we're just displaying the people component, then we go to about, and then we go to home. And we can already put two and two together. If this only component allows us to navigate to a different page, not only I can use the nav bar, I can also use it in the error correct. So navigate to notice here, how I have imported already a link component, just keep in mind that that is a named import. So make sure you add the curly braces. And the only thing that is missing here is link to then we go for example to our home page. Again, you can navigate to whichever page you'd want. I'm just going to a homepage, and just a little bit of CSS, I'm going to go with class name. And we're going to go with btn. Let's just say back home, back, home. And now try it out where not only Of course, I can navigate around with my navbar. But I can also do here where I say forward slash and then shake, and bake. And now I have the error page. Now in this case, if I want to navigate back to the home bridge, either I can use the nav bar, which is still there. And by the way, this is somewhat important. We'll notice this nav bar will be added to every page. So these are my routes. This is where we are setting up everything with a search component. But navbar will be added to every page. So that will be displayed on every page, regardless which page it is starting with home all the way to error. So if I want of course, I can navigate back using the number or can if we go to a Hello, the page that doesn't exist. I also have a nice line that says back home. I click it. And of course, I'm back home. We're almost done with our basic react router setup. But before we move on to a different topic, I also would want to cover how we can deal with alerts. So in this case, notice I have the list of people, which is of course coming from my data correct. If we navigate to a people component, like I said, I import data, the file the data that we have been using. For our tutorial, I set up this use state hook where I have people and some people and I'm here are just iterate over my list and then display the name of the person. But now what I would want is to set up some kind of placeholder where we can imagine that this could be a list of blog post, or list of products or whatever, some kind of list of items. And then once we click on one specific item, we go to that placeholder page that just grabs the item that you clicked on, and then displays it. So essentially, I don't have to create four different pages for each and every item in the list or 20 different pages, depending on how big is the list. In this case, I can just create one placeholder. And then regardless whether I have 4000 items or four items, the moment I'll open up that placeholder I'll grab that specific ID, or some kind of data that is specific to that item, and then display only that one item. And if you're a little bit iffy off what I'm trying to make, well just hang with me. And we'll be in good shape. So I have my list of items correct. I display them, of course, by iterating, over my list. But what I would want is to set up that placeholder. And we can do that if we navigate to index j, s, and I already have this person component. So if you navigate to a person component, you'll just see that we have a person component. And it has a text of person, just like the other components that we used for pages. Now though, I would want to set up different things in index js, where versus my person component, I'm going to go right above the error, where we set up the route. So that will still say the same, where we go with route, or the values are going to be a bit different. Because in this case, I want to go with path. Instead of just word slash, we also have something called URL parameters. So the first part, the beginning part can be up to you, you can either go with forward slash, and then you can set up the Euro parameters. And by the way, those are going to be in react router, the colon, and Lan, whatever name you would want. So in this case, you can go with ID, you can go with name, it's up to you. Again, this is just going to show up once we start accessing that value. So naming is up to you Just remember that name because you will have to use it. So in this case, I'm going to go with it. But remember, I said the beginning part is up to you. If you want you can right person, forward slash and then of course, colon an ID, if you don't, you can simply write forward slash, and colon and then ID. So this beginning path, you can make as long or as short as you want. And then in here, we do a little bit differently, where we don't play that component inside, we go with children. And we set up well which component we would want to display. So this person component will be our placeholder for each and every time we will navigate to a person, and then some kind of ID, we will display this person component, now the difference is going to be in that person component, we will grab that ID and fetch that data. So in our case, that is going to be that one specific person, hopefully that is clear, we have our placeholder, we use our URL parameters. In this case, I named this ID, but you'll see in a second, that name is definitely your choice. And now what I would want is navigate back to a people show let me find my people array. And in here, right next to the hiring poor, I would want to set up a link. Okay, so I have imported the link component and also here hiring for. And now of course, I have my own component. Now the difference and now is going to be that, check it out. we're iterating over the list correct. And I have each and every ID available for the person, we already know that that's how our data is structured. So now when we set up to, we need to set it up dynamically. Now what do I mean by that we set up curly braces, and then we go with a template string, where I say that I'm going to be navigating to a person. So the only reason why I'm adding this first part is because in the index, I also added this person, if you don't have it if you just have the forest slash, and of course, don't add markers added add the person. So that's why I need to make sure that they both match, then I have another forward slash. And this is where I place that ID. So I know that in the data object, I have that ID. So the only thing I need to do is go with person, and then ID and what you'll notice that the moment you click on any of the links that we're about to display, they will all open the same page, that person bridge, the difference is going to be in the URL where the IDS will change. So within the link, we can just write whatever we want. So in this case, I'm going to say learn more And once we save, notice, these are my links. And like I said, Every time you click on them, we're still opening the person page. So we're still navigating to the person ID. And then of course, since in the children, the value was personal component, that is what we're displaying, the difference is going to be the URL, because notice now we have person and then one. So if we navigate to the third one, we have person and forward slash three. And hopefully you get the gist. So now, of course, the question is, well, how I can access that value, because the idea in the person is somewhat simple, where in the person, I would want to grab that value. And then in my case, I'm just gonna look for that specific person in my data array. Now, again, this is oversimplified example. Normally, the way it works is you have a list of blog posts have a list of products, and then you already fetch them from the API. But then if you'd want to have a more specific info, then of course, you fetch it one more time. So you set up the link, where you navigate your placeholder page, and you pass that ID. And then in that placeholder, this is where, again, you set up another fridge. Now, in our case, since data, of course, is local, I don't have to do that. So I purposely didn't want to overcomplicate things, but just understand that this is over simplified example. In order to access that, we need to use use params hook from react router now. So again, this is coming from react router DOM, where they provide this hook that allows us to access the parameters. Now, just to showcase that we can name our URL parameters, however we want, I can go with log, and then we go with use params. And then let me invoke it. And what you'll notice, the moment I navigate, for example, john, I'll see of course, my placeholder, my person. And then in here, I have the object. So in the object, I have the ID property, and the value is equal to a one. Now one gotcha, though, is that list will always be a string. And if you remember our data, it was a number. Correct. So that sometimes might trip you up, where some API's have their ID, strength, and some of them as a number. So for example, if their strength, no big deal, once you pass it through the React router, you'll be still in good shape. But if there are numbers, then of course, you'll have to keep on watching. Because in the following few minutes, we'll fix this issue where this is a string, that is very, very important. However, keep in mind, this name is an ID. So what that means is when I was setting up my index, and when I say person, and then the name of my euro primer was ID, if I change this around to a orange, you'll notice that the value doesn't change, it's still going to be one. So we're still within the people, we can navigate around, because we just pass in the value. However, the name, of course, is the orange. So this is where I'm trying to make a case that course naming is, in most cases, up to you. So I have ID on showcasing these placeholder. So now I would just want to have a simple setup, where I'm going to display well, which person is actually the one that I have clicked on in people, because for now, I'm just displaying the person, correct. And the way I would do that is navigating to person j s. And I would just want to get that value. And since I'm getting back the object from use params hook, I can simply say that it is going to be an ID. And I'll say use params sorry, not use if I say use prompts. So that should give me my ID. I know that I'm getting back the object and I'm just destructuring the object. But I also want to set up some kind of state value. So say const, Morgan for name, and then set name. And that is equal to use state. And for now I'll just say default name. And we're have the heading to our changes this around Pentagon. And I'll say yeah, you know what, I would want to display the name. I also would want to add a link just so we can navigate back to the people page. So let's say here link. And as you can see, of course, I have already imported. So we go here with a link on to. And in this case, I'm just going to say, let's navigate back to people. I'll also add a class name here, because I would want to add a little bit of CSS online. As far as like value, I'll say back to people. Beautiful. So once I save, when I click on Peter, I should have default name and back to people. But the good news is that I have my ID, here, we could set up the user, where we could filter out, well, which person actually clicked on. And then of course, just change the name. So that way, we can always be sure whether it's Peter, or john. So we're gonna go with use effect. So essentially, once the component around nurse, then we want to call our callback function. All set up empty array of servers, no dependencies in here. So just on the initial render, node want to get that person. So I'm going to go const, and I'll call this new person, and that is equal to a data. And now I'm just gonna use the find method. Now, the gotcha here is that, of course, I would want to parse the string, because keep in mind that this is a string in my data, this is going to be an ID. So if you'll simply say, like, so where you have the person ID matches the ID, this is not going to get you any person. Why? Well, because of this one is a number. And this one is a string. So what you need to do is go with parse, int, and then you wrap the ID inside there. And of course, we need to be closing parentheses. So now I have my new person. And I can go with setname. And we're gonna go with new person, and then dot name. So now what will happen, I have the peer. So if I navigate back to people, and I click on Susan, Now, of course, the value will be Susan. So that's how we can deal with less set up the placeholder. And then each and every time we click on some item, instead of creating a brand new page, we use the same page. But there is already some kind of setup, where I can get that unique value about that product or blog post, or whatever. And then we can fetch it. This display that specific item in the placeholder, here, we create only one component, only one page that could be used by 4000 items, or four items, like it is in our case. Excellent work. And next we have performance optimization. More specifically, we're going to cover react, memo function, use callback, hook, and then use memo hook as well. Now, before we go any further, let me just be very, very clear, where I purposely added this topic to be our last one. Why? Because react is fast by default. Again, let me repeat, React is fast by default. And what I mean by that is just because you have these tools to optimize the performance of your app doesn't mean that you need to run over to your to do list app, and start optimizing. That's not how it works. Now, I did include it. And by the way, I was debating back and forth. I almost skipped it. But I did include it in tutorial because I want you to be aware of these functions and hooks and how they work. But it doesn't mean that you need to use them in your apps. Yes, there are some specific use cases where they are useful. But trust me when I say this, just because Twitter guru says that you need to apply these optimizations, you have to do it. No. React is fast by default. And when it comes to optimizations, they do add their own costs. So it's not like it's a free ride, where we just add these magic functions and everything works like beaches. They do use the memory, they do use the competition power, they'll be mindful when you actually use them. During the videos, I will mention term memorizing. And that is not my term that is not react term. That is a computer science term, which just means that we're caching results, and I'll simplify it even more during videos where I'll say remember Remember, we're remembering the value. Just keep in mind what the official naming is because of course, remembering is something that I added, because I thought that we should simplify this memorizing term. And then lastly, if you don't trust me, if you think that everything that I'm saying is gibberish, and that you should use all of these functions, I would suggest going to your favorite search engine, and just type use callback will use memo on type again, and you should get the article by Kent Dodds, where essentially he talks about when you should use memo on use callback. And there's not much to add there, he just lays out step by step, why you shouldn't go crazy with use memo. Use callback org. So that's what we're going to cover next, there's going to be of course, an example. Now, I created that example with this specific purpose. Again, it's not normally where you would use these optimizations. But since I wanted you to have an idea of how they work and where you can use them. That's why I created so we get a good practice on the React memo, as well as use callback and use memo hooks. And once I've shared my two cents, about the performance optimizations in react, of course, let's go to our example. And we're looking forward to folder number 12. I named my component against setup, and you're looking in the memory use memorials callback folder, and then more specifically, the setup folder. Again, it's gonna have the index, so you don't need to give it more specific path. And what you should see on the screen is the count. So of course, I can increase the count, as well as I have some products are here. So now of course, let's navigate to that index. And let's see what all the big fuss is about. And you can see that I have some reports, I have you state use callback, use memo, something we'll use in later videos. And also, I'm using my custom fetch. So use fetch hook, where I pass in the URL. In this case, again, the URL is my own API, where I'm just sharing my product. So that is for my JavaScript course, we built a ecommerce store. And this is the API that is providing those products are getting back the product. Notice again, I'm not using loading, that I have the count and set count. So this is my state variable. Notice I have the heading one for my account. And of course, I have the button that increases the comp. And then of course, things get a bit more interesting, where I have my big list. So again, this is oversimplified example, we're talking about the big list, whether that is 100 items, 1000 items, or something along those lines, because if you check it out, my list is not a big sort of big list, then the problem is product, and I pass in the product that I'm getting back from my customer. And again, if you didn't cover custom hook, please go back because I'm not going to cover it one more time. I'm not on here, I have the section, I iterate over the product. And I created a single component, sure single component for the product. Just to emphasize one of the points online Of course, I have the key matters, that specific value, the unique one, because I have a list, and then that product. So I use the spread operator, where I grab all the properties of that are on a product. Of course, if you'd want to see what we're getting back, be my guest. In this case, I'll copy and paste. And you'll notice that of course, I have the array. And then each and every item is that product, I have the ID. I have the image and all that good stuff. Now that is not the most important part though. Because yes, in single product, notice, I'm maxing the fields property on the object, then I do a little bit more destructuring are give the image and this should look very familiar because we have done 1000 times already in this tutorial. The point that I'm trying to make is something else. We're at the moment I have the list I have click me. And you'll notice that if you add user for me single product, as well as the big list each and every time you click on a button, you're actually re rendering. Let me show you how is that gonna work. Sorry, imported, the use effect, by the way, didn't My apologies, let's go with use effect now again in your case is going to be already there. And if we scroll down here, and if we go with big list, and if you go with use effect, and then you call it. And we'll just log a big list called Big list called. And I'll do the same thing over here, where I'll copy and paste. And you can also add the array here, the empty dependency array, it's not going to change the simple fact that every time you click on a button, you will invoke both of them. So again, I have used the fact and now say, single item called, by the way, I can add here a count as well. So if I navigate to a bigger browser window, or refresh, notice, so once we call our component, yeah, I have item called that and called on, it goes all the way up to a 24. Now, what's more important though, is if you check out the console, I keep on clicking, notice these values, they keep on increasing. So I have 12 items, and then pretty much each and every time I click on a button, I see this big list called and also each and every item gets rerender. Now, first of all, why is that happening? Because I have the state value using use state. And then each and every time I click the button, what am I doing? Well, I changed the value correct. And remember, your state was doing what it was preserving the values between the renders, and it was triggering the let's say it all together rerender correct. Course, in my component in the index one, I have my big list. So each and every time I click on a button, I update my count value. I'm triggering the rerender. And then of course, I'm re rendering the big list. And then in the big list, I have my single product. More specifically, I'm iterating over the array, and I returned for each and every item, my single product. So those ones also get rerender. So what would be the solution? Well, solution is the memo function that comes with react again, please don't confuse it with use memo, use, my more is gonna do something else that is a hook, we're talking about function by the name of memo. If you want to be really specific, then of course, it is a method because it is on react. And what we would need to do here is just go with react, and othmar. Or you can import it. You can also do that up here where we're importing everything. And what you would want is to wrap your essentially whole component in that memo. So memoir is a function, and you just pass in your component. So simply your set of parentheses, and then you set up all the logic that you had for the component in that memo. All right. So once we save, we will notice that yes, on the initial render, notice, we have 12. So we call this 12 times because we have 12 items, then each and every time I increase, notice how we're not calling that usually Why? Well, because memo is checking it is memorizing Well, what is the value? Sure, if this props value did not change, then we're not triggering the rerender. Because we need to remember that every time the props or the state changes, component re renders. So in this case, what's happening is that we're triggering that rerender with account, correct, because each and every time we change the state value we triggering the rerender. Now when we have this react memo, what we do is we check, we say hey, listen, did the value for my props change, or it's exactly the same? And of course, the answer is, as you're clicking on a button, the value for the product is exactly the same. But then react is like okay, sure, now I don't need to re render my component. So if we don't rerender the big list of course, as a result, we also don't rerender the single product. So our is the memo function in react. Not bad. Not bad. We've got Got a react memo method out of the way. Now, let me throw you a mind read. What if I were to create a state value. And I'll call this card on not the actual item in the card, but will somewhat simulate that action. Wherever we go with karten and sipcot course we use use state, our awesome Hawk, we provide the initial value, which is going to be zero, then we'll also set up Add To Cart function. So we're going to go here with cost, and then add to cart Mark show for time being is just going to be an arrow function that does one very simple thing, it sets the cart to the previous value plus one, so cart, and then plus one. So that's my Add To Cart function. The thing is, though, that now I would want to pass that function down to my item. So first, right after the button, I'm going to create a new one. And I'll add a little bit of inline styling here, I'll say margin top is equal to three REM, I think a lot is a good value. And then in here, let's say cart is equal to my cart value. Let's save it, it should be zero, because that is my default one. But then, like I said, I would want to pass this sucker down to a single product. Yes, granted, we'll do some prop drilling. But I think we can live with that, because there's something else that I'd want to show you. So where I have the big list, now, let's go with the prop of Add To Cart. And then of course, our Add To Cart function, add to cart prop is equal to my Add To Cart function. Well, of course, we need to destructure it, we already know that. And then we need to pass it into that single component, correct. The single product component of the cart again, add to cart over here. And then finally, we're good down to the single product. And then in the single product out want to add a button that of course cause it. So right after the paragraph, I'm going to go with button, add on collect, and we'll pass in our Add To Cart. So we're not going to add that item literally to the card. But we'll simulate that action. So add to cart. And again, there's going to be a issue. issue is going to be simply because we click to add to cart and notice, again, we're calling that single item. So every time I click on this button, again, I'm re rendering all the items. Okay. Now, why is that happening? Well, if we scroll up, we see that we have this big list. Now in this case, we have the product that we technically took care of with a memo. Okay, but then we have Add To Cart function. So again, this is our prop. And I told you in the last video that every time props, or state changes, component will rerender. Now the thing is, when we change the state value, we trigger the rerender. And each and every time we create this function from the scratch. So that's why react things that hey, listen, this value changed, because it was recreated from scratch. And that's why again, we're triggering the rerender. Now what is the solution, the solution is using use callback, which essentially somewhat similar like we were doing with a memo, but now it's going to do with a function where it's going to check Hey, listen, has the value for the function changed. If it hasn't changed, good, I don't need to recreate the function from the scratch. If the value has changed, well, then of course, I would need to create that function one more time. So what we do is called use callback hook. And then we would want to pass in that function. So here again, we wrap our function in the parenthesis, that's step number one. But also what I would want is to add the dependency array. And that is very important because what I would want is each and every time I update the cart value, I also create this function, and I'll show you what happens if you don't do that. But the good news is now that if I'm Just working with a count, I'm not going to trigger that rerender. Because what you'll notice that once you click the count, check it out, see, the items are still just 12. So I don't rerender each and every time I click on a comp, because with our previous setup, so without this use callback, by the way, I didn't show you that. So my apologies, let me delete it. And I'll recreate it from scratch here, where now the problem is that, as I'm clicking on account, all the items still get rerender. Because again, this function gets created from the scratch. And then react thinks, hey, listen, the props change, so I need to trigger the rerender. That's why we use this use callback. So now we create this function only when we update the cart value. So just like we had dependency array with use effect, we have the same thing with our use callback. And that is a very important because you might be tempted to do something like this, where you go with, okay, I have my count, I have the card, so I only want to create a function, when I have the initial render. Now the problem is going to be, you're not going to get that second value. Because if you go and if you console log the card, it is always going to be zero. So if I go here, if I click on the add to cart, now as the cart is going to be zero. And then even though my value got updated in the state, since I didn't create this function, when the cart value changed, well, it's always going to be sitting on a zero. So here, you can keep on clicking. And notice, it's always going to be one because I didn't create that function one more time when this value changed. So that's why you have dependency array. That's why you add whichever value you'd want to use to recreate the function which of course, in our case is the cart show. Once this value changes, we would want to create a function one more time. Now of course, in that case, we will trigger the rear Enders Where is normal, that is not unexpected. But at least in this case, notice how I can keep on clicking the count. And I'm not triggering the rerender. Also, as a side note, if you check out the console, you should see here the warning, where we have react hook use effect has a missing dependency, we get product analysis coming from our customers. And this is another use case where we can use the use callback. So just wait a little bit. In the next video, we'll cover use memo. And we'll circle back. And we'll take a look at how we can use this use callback to get rid of this warning in the console much later. On. Next we have use memo hook, which unlike the use callback, which memorizes or remembers the function show if the cart value didn't change. That means we don't need to recreate function from scratch. The use memo deals with a value. So like I said, Please don't mix and match the two, where react memo will essentially be looking for the prompts. and see whether the prompts change, or do you use memo is specifically for the value. Now in order to set up our example, I'm going to create a function first that returns some kind of value. Certain here also cow who late again, I'm somewhat of the fan of explicit name for my functions. So expensive. Brand serve here. And I'll pass in there. And what I'm trying to do with this function is just calculate the most expensive value as far as my product. And the way we set up the logic. I'm just going to return from this function, a value using the reduce function. So I'm going to go with data, whatever I'm passing in, and I can tell you right away that I will be passing the product, then I'll use the reduce function. And again, it's not really important what I'm doing over here, in this calculate most expensive one, but since I would want to make it a little bit more realistic, I will actually calculate the values from my items. Keep in mind that you can return for this example some kind of random value, and it's going to work exactly the same. I'm showing here, I'm iterating over my products. And then I know that the price is sitting in fields and price. And again, if you want to double check that you can see it over here, I have my array, I have my object that of course represents that one specific product. And then I have this value for price. So that's what I'm looking for, where I would want to reduce it down to that one single value, which is the biggest one. So that's why I'll say that I'll be returning a number and I'll divided right away by 100. Because the price is incense, and then I'm just going to say that there is a price variable amount is equal to item fields. Right, so that is the property here. And we know that with reduced, we always need to return the total correct. That is my first parameter. And I'll just say that if the price so that variable is bigger than the current total one, well, then the total essentially will be equal to that branch. So I'm simply checking for the highest value of the price, whatever it is. And then once I have my function, what I would want in my return, right above the big list, but below the cart, I'm gonna have another heading one on in here, I'll say most expensive. Math is equal, again, to $1 sign, I guess, I will make more sense, I'm going to go with most, or you know what, sorry, the function name was calculate most expensive. And then I would want to pass in my product. What do we need to keep in mind that we talk about some functions that take a long time to calculate. So the function returns a value. But let's imagine that it takes a long time to calculate this value. And if I log on be able to see that every time I click for example, on account, I'm calling this Hello. And imagine that if this function takes a long time to get that value, it's somewhat of a pain. Because I'm calling this every time I'm updating the state value. So it would be nice if I would somehow be able to remember that value, and only recalculate it or essentially run it one more time to function if my data changes. So in my case, of course, that is the product correct, because that's what we're passing in. And this is where use memo comes into play, where we go with const, I need to come up with some kind of variable in this case. So I will just rename it to most expensive over here that I call use my mouse. So that's my hook. And where we need to pass into use memo is a callback function. And the first thing we need to set up is the function that returns a value, which in our case, of course, is calculate, most expensive van, we invoke it like so. And the second thing is the dependency array. And again, in this case, I'm passing in the raw duct. And then of course, I need to change from calculate most expensive shoe most expensive, and I can remove those products right now. So what you'll notice that it is still the same value. So we still call this function, but then every time we click on account, what we don't see the Hello. Alright, so that means of course, we're not calling this function, we remember the value using the use memo. And not only were the products change, essentially the data that we're passing in, only then we run the function one more time and recalculate the value. So that is react memo, use callback, as well as use memo hook in react. And the last thing that I want to showcase just like I promised, there's another use case for use callback. That is essentially when we're fetching data. An awesome example is over here, if we check the terminal, we can see that I have this warning where react use effect has a missing dependency, get product year included or removed from the pregnancy right. And of course that is in my custom, the US furniture. So let's say we'll navigate over there. We have our customer And then we have our use fetch, I can see that react is complaining that hey, listen, you have get product function over here. So you need to add it as dependency. But before you jump over there and add it as dependency, let me warn you, you will create infinite loop. Why? Well, let's see, we have Get Products. Correct. And what is this good products doing? Well, it is calling ship products. So it sets the stage value, which triggers the rerender. So if I'll go here, and if I'll say get product is my dependency, the first time I'll call the get product, I'll change that value. And then since this needs to rerun every time, of course, when we change something about this value, well, since get product, once we added there, since it will get created from the scratch, once we rerender. That's why we'll create a infinite loop. Because again, the same scenario like we had over here with index, where we had the add to cart each and every time you rerender. You create a function from scratch. So if this gets added to dependency array, technically each and every time when it gets created from scratch, well, you will rerender the component. Now in a function, though, you also change the state value. So you have that infinite loop. What is the solution? Well, remember, we have our use callback, right? So we can go here with use callback. And then I can set it equal. I can say use callback over here, one show. So let me wrap everything. And now I just need to say, well, one, I would want to create a function. Of course, the answer is when I have a URL change, for once the URL changes. Yeah, please recreate a VAT function from the scratch. And of course, once we have this setup, I can bravely grow to use effect and just add Mark get product. Again, let me re emphasize the point where previously, before we added this huge callback, if we simply would add theirs and get product, we would get a infinite loop. Why? Because this would get created each and every time. Now we only create a new function, launch the URL changes. And of course, as a result, we're not getting this infinite loop. So that would be another use case for use callback call.