Transcripts
1. Introduction to React: What's going on, guys, welcome to the React Basics module. I hope you're excited for this. Your boy PAPA React is bringing the fire today. And I want all of you guys to go ahead and put your phones on Do Not Disturb! This is going to be an intense module, is going to be where the fun really begins. And I want you guys to be able to go ahead and build apps just like this. So we have the Amazon Clone, the Netflix Clone then Facebook, zoom, Airbnb, Slack, Spotify clone, all of these things. I'm going to give you the skills to go ahead and get started with these projects. Okay? So let's go through a couple of things that we're going to be learning in this module. We're going to be learning about what is React. Okay, we're going to be learning about all of the different things like component-based design. If you didn't know what component-based design is, you're going to know soon, okay? You're going to be using that in an out of your react built. So it's very important concept to learn. We're going to be saying up our first create React up in this module. So get excited for that. I'm going to teach you guys what is JSX and how do I use it? Okay? The BEM naming convention, if you guys are fans of the YouTube streams are going to know all about this. If you don't know, then get ready to go ahead and learn something new. We're going to learn about an important concepts such as state, I'm props. We're going to learn about styling, React components. How do you even go about doing that, right? We're going to teach you all of this in the module in this series. Again, I'm also going to tell you about conditional rendering lists, React Hooks, class-based components of as functional components, the rules of hooks to use Day hug, the user factor. All of this is going to be inside this module. So I hope you guys are excited with that. Said, we're going to go ahead and stop the module with an absolute buying. I want the energy you guys haven't already. I want you to maybe spaces out, get into your rhythm. Don't go ahead and run through this module. I want you guys to take your sweet time, get into it. You know, like enjoy the process. This is not a sprint, it's a marathon. And I want you guys to hang in there for the long journey on you guys to benefit the most from this module. So my advice is pretty much go in with an open mindset. The prerequisites for this module are symbol. All you need are the following again. So I'm gonna go ahead and draw a bunch of things on the screen right now. And let's go ahead and pop out where we're going to need these skills before you get started. And let's go ahead and freeze. So you're going to need these skills before you get started. Let's go ahead and skills required yoga, yoga need write HTML. Pretty much. How did you get things on a webpage looking? It's going to look very simple by itself, right? But HTML is pretty much this. Go ahead and say that we've got some header, we've got some kind of picture, we've got some text in HTML. Watts. Write this stuff. We've been introduced to this, we should know this by this point. Okay? Then we're gonna go ahead and make sure that we have CSS under our belt. So CSS is how we get this thing to look pretty. Okay. This is where all the Spock who's come in. This is where all the, you know, the nice fancy colors and the design and everything starts to come together. And it's why Netflix looks like Netflix is how these apps look as beautiful as they look, okay? So all this stuff is really important to make sure that you need to know this or get to a point where you know, you know, you a little bit more comfortable with this stuff before you go ahead and jump into this, if you feel like your urine the edge and you kinda questioning, yeah, I would say go ahead and jump in because honestly the worst thing you could do is kinda sit there and delay, right? So if you do fall on the edge, just jump in. If you don't know it, it'll be fine. Okay. You can go ahead. You can build up on those skills. You can go ahead and improve things over time. Do not stress, okay, there is no right or wrong answer here. The factor here, well done, amazing to see each and every one of your beautiful faces inside of the course. So the final piece of the puzzle before we get started is JavaScript. So JavaScript in the previous modules, you would've gone ahead and been exposed JavaScript and the programming of concepts revolved around the, okay, so this is essentially the brains of the application. Okay, so this is going to be where our brain's pretty much like this. Go ahead and say brains of the app. So this is where the brain's live. Now, there's three things here, HTML, CSS, and JavaScript. So JavaScript is essentially like the ozone imagine like in the computer you have CPU and that's JavaScript on a website, pretty much going to power everything, right? So all of this gets fed into a webpage. Now where does come in like, Well, what his react, right? Like if you've never heard of reactor, you've never seen the YouTube streams like what the heck is react, right? So imagine, react is essentially something which kind of just wraps around it, right? So it's very, very simple and we think about it like that. We act and the wraps around. And let's go ahead and say like this. Go ahead and put reactive. Now react is something which we call a library. So it's not a frameworks. If you've heard of things like angular or if you've heard that things such as view, then you would know these to be things like. So. I think, I believe view is actually a library, but Angular is actually a framework. Now if framework is a lot more heavy, React is a library which means we only use what we need when it's needed, Right? So that's a very important point. It's very lightweight. Alright, so which means The learning curve to react is actually present, right? We actually go ahead and break it down as we need to. Now, a few things to mention before we get started with this module. The approach I want you to take is as you walk through the module, I want you guys to go ahead and go to the React documentation, right? This is going to be your second home as you go ahead and do this. Now why is this important? Because going through tutorials is great. It's a great thing to go ahead and get practice with. But something which we need to make sure is that our actual fundamental understanding of how React works actually nailed him and his doubted because then it will give us the ability to create something, bespoke something which doesn't exist, which is the most, which is most likely case that you'll be playing when you land that job or when you land that freelancing gig, or when you're teaching a student, all of that, I teach inside the coaching cool, so make sure you turn up to those. But let's go ahead and click Get Started. Now, here is going to be some helpful documentation to get started with the process when you're trying to learn, react to things like that. Don't worry, in each of the module breakdown. In each of the different lessons, we're going to go through all of this together. We're going to create an app together, which is exciting stuff, guys, I'm really, really excited. I've been waiting for a long time to go ahead and get this module bill for you all. Um, something I want you to constantly go back to is this section right here. So this is actually a very important section where here the main concepts right? Now, the main concepts like this say we cover a lesson JSX. I want you to come over here, click on introducing JSX. Then I want you to pretty much go ahead and just give this a read. Alright, so this is essentially like homework every single step. Now why is this important? Because, well, it sure we're gonna go through some JSX, but you're going to pretty much be connected to my tutorial or connected to a YouTube tutorial or something like that. Now, it's great to go ahead and detach yourself from this tutorial and actually connect your understanding to the fundamental principles of why React works the way React does, right? Why is JSX use and why do we want to go ahead and use it? And how do we go ahead and use things like embedded expressions in JSX and so forth. If we can understand it at that level, then using the thing is actually pretty simple. All right, so I want you guys to constantly come back over here. Let's go ahead and say we touch on prompts or function and class-based components, which is going to be a lesson. And I know it's a lot of love you guys. And girls actually go ahead and ask that question, so we're going to cover that here. But if you guys imagine we go through that lesson, I want you to then come over here, click on the main concepts, component and props, and then go ahead and give this a read. Now this is going to allow you to constantly be able to pretty much master the React documentation, which means that when they go ahead and add things or update things, you're going to be at the forefront of this right? Now. Before we get started, I want to make sure that everyone is always up to date with the latest react standards. So please go ahead and type in React status on Google and make sure you're signed up to this newsletter. Now, this is how I keep in touch with react. And it's pretty much going to help you go ahead and stay in front of the curve because that's what allows you to be separated from all of the other React developers out there. And it's why you need to kinda separate and differentiate you. And it's what makes Popper react, you know, teaching you guys the cutting edge of its first off like this. This is how we do that. And at the end of this module, I want to go ahead and break everything down that we've learned. And we're gonna go ahead and build a To Do app with react, right? So we're gonna have a to-do app with react, and it's actually going to have our own very own custom hook. Alright, so I'm actually going to teach you guys how Hua hooks firstly, then I'm gonna go ahead and teach you how to create a customer. So this module is going to be about if you have 0 understanding of React, I want you guys to walk out of this module feeling pretty confident that you know what React is about, you know, what we're going to be using it for and you know, the steps that you're going to have to take next in the next modules in the upcoming things. In fact, I would even recommend you start teaching off to this module or you actually go ahead and search for your first freelancing gig, because the next modules are gonna get a little bit more advanced. We're gonna go into React Context API. We're gonna go into redux. We're gonna go into a lot more of the complicated builds in the upcoming modules. But for this one, we're going to keep it nice and on the mentally crucial to you mastering the skills of react to go ahead and take you to that high paying or react job that we're all off there right now. Well done for being here. I just want to end off this first opening lesson on intro to the module by saying, I want you guys to keep the energy high. I want you guys to not give up. Persistence is going to take you that step further and feel free to go ahead and share your thoughts, share your progress in the Slack community and remember, use the community, use the communication opportunity with myself and the coaching calls and on Slack to make sure you go ahead and reach out. And guys, as always, let's go ahead and let's crush it. Let's get this thing started. And I will see you guys in lesson one of the React Basics module. Let's go guys.
2. Component Based Design: Welcome guys to lesson one of the React Basics module. Now, in this lesson, I'm going to be introducing the concept of component-based design. What does component-based design mean? Why do we use it and what the benefits of it and why does it make reacts such a powerful library to go ahead and use? Right now we already know that we can vote amazing apps like Airbnb, like Cuba, like Netflix, like Amazon, right, using React. Now the reason why the guys over Facebook really emphasized component-based design is for many reasons. We have maintainability. We have ease of scaling, we have the ease of implementation, building components and maintaining them. A very, very scalable. If a team gets bigger, you can pretty much put teams on designated components and things like that. Now, I'm going to jump into an actual practical demonstration of an application. So here we have an app. Right now this app could be written using React, or it could be written using React Native. In this case, we're going to assume is rare and using React, this is simply a web browser that we're looking at right now. Okay? So I'm gonna go ahead and show you how we would break down an application. So let's assume here we had the header component, right? So at the top we have the header component. So you can see over here, it has the header component, and now this is one component might, so let's go ahead and just call this one the header component, okay? Then what we can also do is have other components which we can reuse, right? So typically when we were coding with HTML, CSS, JavaScript basic by themselves, we wouldn't essentially have the element of components. We would kind of write the row once, for example, this row and it says go ahead and change the color. And we would essentially go ahead and write this row piece of code. And then we would kind of copy and paste there. I'm now imagine we did that. And then imagine I wanted to change something like the design of this section on the right. For example, the number of votes that this row has imaginary change that design entirely. Now I have to go ahead and update the piece of code that I copied over here. The piece of code that I copied over here, the pizza Kodak up and you get, you get the point right. It gets into this very nested issue of that's not really a maintainable solution. So what would the geyser or Facebook did when they were implementing react? They dove onto the component-based sort of way of thinking. So what we can essentially do is have a component, right? So these are the three different components or like we can order, this is one component, so let's go ahead and call this. Let's just call it the row component against keep things very simple way now, just to make our understanding very easy, okay, So I'm going to put these next to these things overhead. Do you have the header and the row? Now, all I can do is actually code up the rural component one time. So I can code this one's right. So if we call this ones, then why can do is I can reuse it. Now let's look at this component and think about, well, where are the elements on this component are differentiated? So the elements are differentiated by the picture. So this may change. So you see in every single row the picture will change again and overhead the picture will change. So that's something to consider. So let's go ahead and jot this down so we can say for the row component, okay? So for the row component, we pretty much have a few things that would change. Okay, so other things that we said, we said the image, the images, the first thing that will change, we also have the title. So the title, when I refer to this, I'm talking about things such as here where we have effortless, where we have what is my day rate? Elon Musk as cetera, right? All of these things are the tiles that we refer to you. I'm then we can also have things like the description. So we can now is the underneath the title we haven't description. And then we also have this up-going now. And every single diagram, the similarities are that we actually essentially have this arrow in every single one. Okay, so we have this upward arrow. So that's something which will remain consistent. But what do we actually want to change? I guess it would be this number right here, right, which is the number of votes. So here I guess the final property would be the number of votes. Let's go ahead and say like number of, I'm just going to change the color to make this a bit clear of you guys. Cisco and changes like case we can say number of votes, right? And this is camel casing indication OF, okay, so we have four properties for a row, okay? Now imagine if we can customize each of these properties every time we use the row component, then we will basically we should in theory be able to get this output right. We should be able to reuse the row here, we use the row here. Is there O'Hare, et cetera. And this, think about the benefit of this. Now, if we have one component where we can read it several times, because we have one file which is essentially row js. So this would be rho dot js, right? Because there was only one file now, as opposed to lots and lots of copy and pasted code over here, which we would typically have. So remember before in the, in the traditional HTML CSS JavaScript approach, we were to run this one and then we will just copied and pasted the code, which means you get this nasty like nested IF, like nested tree of code, right? And it doesn't look that great. Whereas now what we could essentially do is get to a point where in our app we would essentially just render a row, right? We would render a row. And then we would render a second row. Right? Now we talked about the properties above. We talked about the image title, description, number of votes. Well, in React, they've wanted this for us. They give us the capability of something called props. Now we're gonna go ahead and y up here. So probes right now prop stands for properties, okay? So essentially all it is is a property that is defined for component which allows one component when reuse to differentiate from another. For example, if we raise the row over here, it should be up to differentiate itself from one component to another, which allows us to then reuse the component which makes it so effective and useful into our code, we would have essentially a row or in hand. Now how do we actually go ahead and pass in those properties? So what I'm gonna do is I'm going to quickly go ahead and show you that in a nice little snippet. Okay, so I'm going to cut this out for a sec and I'm just going to show you if we wanted to render a row, for example, for Elon Musk, how do I do that? I say row and then I pass in the prop, which would be the title. And here I would say Elon Musk, okay. And then this go ahead and just scrap these two for now just to make it very simple. So if it's on the screen, we'll say number of votes again, number of votes. And here I'm going to go ahead and just say something like 23208 years or what they have to self-closing component. And there we go. We have offices component. Well, I could do with this is I can actually go ahead and copy this. And this one would differentiate because it would essentially not be Elon Musk, but instead it would be something like graph minted, which is the next one. So graph minted 2 and the number of votes for that component is 204. All right, so now essentially this code snippet would essentially represent the next thing that we're talking about. So let me go ahead and cut this out for you. So to make it very clear as to what I'm talking about. So now we should be able to see that. We can see that this one would render out this. And it would basically essentially take the properties that we pass in. And we can, we can reuse that into the component. And the second one over here, would, the output would be this. Now, the reason why I don't want to jump into the code in this lesson is purely because I want you to understand the fundamental of a y. That is a beneficial use case right? Now, let's go ahead and imagine we had a redesign of all of this right now. Okay, so I wanted all of the rows to now be different. How many files don't have to change? Just simply the one. I only have to change node.js, which in itself will have its own row dot CSS file, okay? And this means that everything is encapsulated, which means that you could put a developer to work on rho dot js and roto CSS. And he were pretty much, he or she will be pretty much working on that one bulb, 0, 2 vars. And then you can have somebody else designated on the header. And you see like we can have an entire redesign happening with a team which makes it more efficient, more beneficial, and maintainable for the future development of the company. So really, really important stuff. This is cooled component-based design and it's essentially the foundation of what React is Bill upon. And it's a really, really important thing to grasp and understand before we jump into saying UP office React app. So hope you guys enjoyed this lesson. Go ahead and jump on to lesson number 2, where we talk about setting up our first React app using current wrapped up. I will see you guys in the next lesson. As always, you boy pup or react piece.
3. Create React App: Yo what's going on, guys? Welcome to another great lesson. And today we are going to be building off us React app, right? So we're gonna be using an amazing tool called Create React app. That's a very popular tool. We use it all the time. Now the guys over Facebook created this tool to make it extremely easy to get started with your first react up now, it has a lot of powerful features, so you can actually go ahead and set the app up with TypeScript with redox using something called templates. But today we're going to be using the absolute fresh Create, React app experience. And it's the simplest way in my opinion to get started with your first step. So without further ado, if you're excited, let's jump straight into this video and see how to go ahead and get started. So the first thing that you're going to want to do is go over to Create React app dot dev. And you'll see this page if you can't find this literally Google Create React app, and it will be very simple to find. Now once you're at this page is pretty simple. You want to go ahead and check out the Quickstart, okay? So you can see over here it says Quickstart and we're going to be using MPI x, which is installed by default when you go ahead and south node. So make sure if you haven't already, you need to go to node on your browser and go over to NodeJS, and you just want to download the latest version. So I would recommend downloading the most latest stable version, which is this one. But to be honest, if you want to go ahead and experiment with some new features, go ahead and download this. Now this will add you to a node on your machine, on your terminal, and that will give you access to FBX, which is actually a way of executing packages. Okay, so the tool that we're going to be using today is called Create React app. Now I would give everything a read on this page to find the familiarize yourself with this. But the whole goal is a offers a modern builds out with no configuration. So that's always a win, right? So let's go ahead and get started with that. Okay? So what we're gonna do now is go ahead and open up our terminal. So I'm gonna go ahead and copy this first line. And all you wanna do is make sure you go into a terminal that makes sense for you. So I'm going to go into my desktop and I'm going to go into clever programmer. And then I'm gonna go ahead and copy that line. Okay, so I'm gonna make it very clear that and we have MAX Create React app. And then we want to go ahead and give up a name. Okay? So at this point, I can pretty much go ahead and cool. This is to say, I'll just tap into right now what it's doing is it's using the tool Create React app, giving it the name. I'll first up and it goes ahead and install all the packages that is required to actually go ahead and stop that first app is very, very clear. It actually goes ahead and tells you everything as it's happening, right? So while that's happening, We're gonna go ahead and look over here so you can actually see a very clear instruction. They have a nice little gift that shows you how to do it. And this will go ahead and get the app up and running, right? So once we have that done, you can pretty much go ahead and continue with the installation. Now there are a bunch of different ways that you can set up. You can see they have the template which I mentioned previously. This is going to allow you, for example, if you only use TypeScript in your app, you just do dash, dash template TypeScript. And I will actually go ahead and set up our app with TypeScript as your choice azure solver tool to start with. Okay? So even shows you the project structure. But what we're gonna do is we're going to wait into a disk, goes ahead and finishes, it should be done any second now. And if you have checked out a lot of the clones on YouTube, on the clever programmer channel. And you will have be very familiar with this. It will also set up a Git repo. So this is a very handy little feature that comes out of the box. While this is happening, I want you guys to go ahead and download something called oh my is that SH, so this is actually a very, very handy tool for the terminal which I recommend. And it makes it very simple to see which get run juren and things like that. So if you're waiting in the meantime, go ahead and do that. Okay. Now, you will see this page once we get, once everything is finished, which is awesome. So once we get here, you want to go ahead and you see it says It actually gives you the first step. So we're gonna go cd into our app. So I'm going to do all fessed up, jump into that right now you can see all my SH pops up where they get Mazda. And then here it's going to say you need to run npm stop. So the first thing we wanna do is I want to open up VS code again. So on open up Visual Studio Code. And once you're inside of VS Code, hit Command Shift P. Right now in Command Shift P, while wanna do is type in shell. And you can see it says install code inside this command impulse, right? You're going to make sure you hit that. So hit the Enter key on that and it will go ahead and install it. But for you guys, it might say install code command, and that's the one you want to do. The reason why it says code inside this Here's because I'm simply using a beta version of VS code. So once we've gone ahead and done that, we can close VS Code. And this will allow us to do something very powerful here. We can say code, and for you guys it will just be code dot. But if you're using the inside that edition like I am, and the code inside is dark, and that means open up VS code inside this current directory. So I'm going to hit Enter. And boom, there you go. Now opens up VS code in our project that we just got started with. So I'm going to minimize the terminal behind. And you can see now we have Visual Studio code in the app that we are currently working in, right? So now you can see on the left-hand side we have our first app which has just been added, right? And you can see the folder structure is very clear, right? We have the node modules and these are the modules that are required. To go ahead and they include all the dependencies that Facebook thing that we need in order to get the upside right now package.json is where all your dependencies live in store and all your project configuration is set up. And so you don't need to worry about all of this just yet. I'm just keeping it very simple and it's helped over into the source, right? So I'm gonna go ahead and make this a little bigger, this hop over into source. Now inside of source you can see a bunch of files inside of here. Well, I wanna do is hit Command J to open up the terminal. So now I have an integrated terminal inside of my workspace, which makes it a lot easier to work with. So if I go ahead and type in npm, stop. This will actually go ahead and stop our first app, which is awesome guys as very exciting. And now we should be able to see as localhost 3 thousand. And you can see here is a star in the development server and you say compiled successfully. And if you get to this screen, congrats, you have your first app up and running, right? So I want you guys to do here is we call it, so we like to call it a cleanup process. So this is what React give us typically when we saw off, I like to do a kind of clean up where I basically will go ahead and right now to keep things very simple, I'm going to go ahead and remove the test file and the subtests because we don't actually, we're not going to be running tests today, but we can do that in a later date. I'm going to delete the test files Google. And I'm also going to delete this report, web BI tools and Logo, SVG. I don't want that. Once we've deleted those files, then what we're going to need to do is it will say failed to compile cannot resolve Logo SVG. And now that's because we deleted the logo. So I'm gonna go into app.js, hit Delete, and I'll come down here and you see on line 7, just going to wipe that out. And I'm going to save the file. Now if I open up the terminal again, it will say kind of web of BI tools kinda reserve web vitals in our app. So let me go to index.js. And I'm also gonna go ahead and get rid of the web BI tools because we don't actually need that this point in time. So I'm gonna go ahead and remove that Save. That's actually a new thing which just go added and you can see compiled successfully. So I'm just trying to strip off everything that we know and essentially need all we're interested in right now to keep that very simple. Now I'm going to hit Refresh and we should get the app. Very blank state. Okay, So what we wanna do next is Command J, hide that, go back into app.js. Just going to go ahead and delete everything hat. And I'm going to create a H1 tag. And I'm going to say Hello world, right? This is our first up helloworld save. And you should be able to see inside of our app it says Hello World. Now notice how it's centered, why we didn't apply Centering. I mean, I didn't remember I don't remember styling anything which actually had this in the center of the page. All right, so what actually happens is you see here it imports app dot CSS. Now, app dot CSS has some sounds in like you can see, and that was what we saw initially with that very nice page that we saw. So we want to go ahead and highlight everything and remove everything from this file. Going back to our app, we can see now it removes that styling, which is why it's left aligned. But you can see by default, React adds this imaginary padding. You can see there's a little bit of this imaginary padding that's been added right here. So to get rid of that, we need to go to index HTML, CSS. And you can keep all of this stuff. You'll want to go ahead and say asterix. Asterix and then the curly braces, I'm going to say margin of 0. I like to do this because it pretty much gives everything a fresh slate. And you can see now we don't have the imaginary gap at the top anymore, right? So this is your absolute starting point. And it will be the place where as now everything that you add in terms of style will be your styles and they won't be influenced by the templating that react currently gave us. So at that point, Well done. A wall I would say is go ahead and change the class name here to a, which is a lowercase a as opposed to an uppercase because we're going to be following something called the BEM naming convention. Again, I will be going through this late today, but I'm naming convention is going to allow you to very, very simply name your classes. With that said, we have now completed off bus react using React app. So I hope you guys enjoyed that and we are now going to move over to our next lesson. What I'm going to run through some really useful extensions now going to make you a much more productive developer, then we're going to dive into React and all the different concepts and important basics that you're going to need to understand it. I hope you enjoyed this session. I will see you in the next one piece.
4. VS Code Extensions: Yo is going on guys, welcome back to another tutorial. Today we're going to be talking about E extensions that you need to become a lattice React developer, right? It's going to speed up your workflow. It's gonna make you much pasta writing code. It's also going to help you with things like formatting and all that sort of annoying stuff that we don't like to deal with when we're coding and we want it to be handled for us. Okay? So what we're gonna do is we're going to jump straight into the code and run through this and how you can get set up with those extensions. That's doing it. So the first thing we're gonna do is carry on from the previous lesson. And we should have our first React app built with Create React app. Now what you wanna do is go over to this left part over here where it says extensions, click extensions. And hey, you can see I have a bunch of installed extensions already. Now I'm going to run through my ones. And then I'm going to show you a few useful ones as well. So the first one is ES 7 or React redux GraphQL snippets. Now I live by this. And the reason why is simply extremely speeds up my development time. So let's go ahead and test it. Let's assume we were going to create a, another todo dot js component, right? And if I was going to create todo dot js component, typically, I mean, I would have, I would like, I would have maybe copied this and renamed it. And all. I would look at documentation. How do I write components? Whereas in this one, well, you have to do is you quite React functional component with an export, our FCE, and if I hit Enter, Boom, it even grab the filename and gave me that as the function name. So you see a lot of the hard work is done for us. And if we're coding in React Native, you can do React native functional component or an active functional export. And there you go, you have a rack native version. So RFC is will my go-to for this sort of stuff. You also have different variants. You react class with an export. There you go. You can also do React component with an exponent. And you see this, and you go ahead and get a class-based component all set up for you. Let's do another one. F, C, p. Let's try that one and you can see that actually goes and gives us prop types as well. So you can see this is a very powerful tool and allows me to quickly get up and running with the code that I need for React components and things like that. So really awesome stuff. There's also a bunch more that you can read about in terms of the snippets. But just to get started, all you would have to do is go over to Extensions, type in E7, and there will be a simple install button right here. You just want to go ahead and click Install. And that's it, not do anything well, so that's the first one. The way the second extension that I want to talk about is the get lens extends out was this is really powerful whenever you are using any kind of source control, right? So the way that this works is simply, you would literally hover over the line. And you can see the i2 hours ago I changed the capital a to a lowercase a. And you can see that it shows me the differences. And we get this nice though outline. Now imagine if I'm working with somebody called David, it would say David made this change at this time, right? So imagine if I was looking through some new code that I've ever looked at before, I'd be able to see who was responsible for that change and when that change was made. Now if we go over here to the top right, we can see get lens. I click that button and now you get a very nice breakdown. But when this, when the changes were made, for example, this would, this stuff right here in the blue was made with this commit where it says initialize project using Create React app. So that's actually a template star that react gets, gets put up with when you use Create React app. But then you also have these uncommitted changes, which are the changes I've made now which I have yet to commit. And if I had anyone else who's convinced you that you'd be able to see him here. Now, get lens gets a lot more, is actually a lot more powerful and you can learn a lot more about it. But just to get started with that is something that I recommend. So get lens, we're gonna go ahead and search it inside of here. So get lens. And you'll be sure to find it as the number one with nearly 7 million downloads. So I highly recommend you do them. Now. Another really good one, I like to use his current file path. So current ballpark is actually is very handy for you when you get lost him way of what current failure in the current structure. So if I go right hit to app.js and Control, Command B is to hide the sidebar. And you can see down here it says users sergeants ANG desktop to have a program on our first app source, app.js. Believe it or not, that's actually really handy. And what you can do is you can actually go ahead and click it and you can actually copy the current file bot. All you can go ahead and check out. You can see it starts from workspace. If I change that, it shows me just from the whitespace. If I click on Windows style, it will go ahead and show me off from roots or show me the mean, the root folder location, right? So you can see that that's actually a really, that's gonna believe it or not, you'll find that very useful as time goes on. So the next one that I wanted to talk about is Live Share. Now this is amazingly powerful. If, if you've ever watched the clones on YouTube, you'll see me and Kanzi using this all the time. The purpose of Live Share is if you essentially get a invitations, use up their lives. Yeah, well, you're going to need is a GitHub account to go ahead and get started with that. You And you simply go ahead and click on Share, read and write, for example, right? And then I can go ahead and sign in with a GitHub account. Once I do that, it will then go ahead and start a session. Now I will provide a link that I can share to someone else that would actually open up my workspace inside of their coding environment. So they would actually be able to code alongside me in real time. So I would be able to see them on my screen and we can code together. And now that gives them access to that you can share things like yourself. So you can actually share your terminal. You can actually share things like the poor. So if I'm running an app locally, they would be up to access that very, very powerful stuff. If you want more information about that, definitely check out the YouTube clones on clever programming channel and you'll be able to go ahead and find us and what should plenty of demos where we demo that live. So another one that I want to talk about is prettier. Prettier is fixes our problem that we all hate. How many of us hate the annoying indentation problem or any kind of formatting issue whenever we're coding, right? So there's put into perspective. Let's say I had a bunch of spacing here for whatever reason I add an H three over here and I had something like, Hey, Sonny, What's going on? He isn't you what going on? All right. If I just did this, for example, and, you know, sometimes Coke and get messy, I'm, I have a console.log, have a few extra spaces here and there. And I'm just very, extremely exaggerating this purpose ABC. Now as students I hit Save. What happens? So I hit save and boom, you see, oh, I'm actually changed my single quotes or double quotes to keep them standard. They got rid of all the extra white-space, did everything. I needed it to you. Now if I was to go ahead and indent a bunch of code out of place and then hit Save. You see correctly indented it. Now there's a few things you need to do to get this up and running. The first thing is click on prettier, go ahead and click on install inside of extension. So you just have to pick search extensions over here. Then you want to go ahead and access the settings inside of your code editor. And then you want to go here and you wanna make sure you've got format. So go to the search bar and type in format on Save. And you wanna make sure this is ticked by default, it's not ticks. You do have to do this to get that save formatting functionality. Now that's going to be a really, really handy feature. Trust me on that. Other interesting ones I would mentioned VS code style components. When it comes to using something called style components, it gives you syntax highlighting for that, which is amazing, is actually a very cool AI auto complete solution. It's a bit more, It's a little bit longer to sell out, but it's actually very, very powerful. So definitely go ahead and give that a try if you're interested. And you can have a few other ones. So you can see here I've got one for Python, React native tools, and IntelliSense for pots auto completion. So you can customize this to your preferences and it will help you out. Now another one that a lot of people do use, if you're happy in brackets, you can see bracket colorized and are nearly 4 million people are using this one. And it is very handy, but I personally am not a fan. So it's up to you. I know a lot of students that do use this and do you find this very useful? And it will show you a lot of us have been situations where you have closing brackets, open and closing brackets. Now, if you had this extension, it would very clearly indicates, you can see here very clearly indicates what the closing bracket is. But I personally am not a fan of over cluttering my ID, but completely done to you. I actually would recommend that if you're starting out because that will help you get past that issue. So that's going to be very, very cool. The final one worth mentioning is that, right? I mean, it's actually something which is built into VS code by default. And it allows you to do really powerful things, right? Let's say I want a div, and let's say I want to have inside of that div, I want to have a list, and I want to have five elements in that list, with each one having a class name of app, list item. And if I hit Enter, boom, we get an amazing auto-completion. We should now just create a div, has five list elements with the class name, app list item for each rhymes. Extremely, extremely powerful stuff, right? And now you have to do a little set up for this when you're using it with React. So I'm going to show you how to do it right now. So what you need to do is go over to your settings. I want you to go into the Search Settings type in. You wanna go down here to include languages. Now you want to click on Add item, and in the item you want to type in JavaScript and in the value you're going to type in JavaScript React. So just exactly like you see here, okay? Now once you've done this click, Okay, and you pretty much will have this row exactly as seen, right? That will then enable him to work inside of your React project. So you need to do that step in order to get him powered up. Now I would recommend going and checking out YouTube videos about how to use Emmet. There are plenty of really good ones out there. And I would definitely recommend using it because in this case, whenever I type, for example, if I need a HTML element with a class name of app, just say app title. There you go. I have my app tile with that class thing, which is a lot faster than doing it manually. So you can see these little tricks and tips are going to help you speed up your development. And it's gonna overrule make you a bad ass developer. So make sure you go ahead and do that. With that said, we are at the end of this lesson. I hope you found these extensions useful because they make you a extremely more productive developer. And let me know which ones actually worked best for you and which ones you find most useful. And if you guys end up using any other extensions, now it's guys know over Cp and that's going to be awesome. And guys, I want you to go over to the next lesson now. Well, we're going to talk about what is JSX? Why do we need it? Why the heck should you care? Bye. Alright, so I hope you enjoyed this lesson. I will see you guys in the next one piece.
5. What is JSX: Yo, what is going on, guys, welcome to another lesson. Now today we're going to be talking about what is JSX? Why do we need it? Why the heck, you should care by? Jsx simply stands for JavaScript XML, which is essentially mockup, which allows us to write HTML in, React and add in some additional JavaScript and kind of combine the two worlds together. One thing that I love about React as embraces the fact the areal rendering logic. So what we're essentially seeing on the screen is usually coupled with some other kind of UI logic. Now what does this mean? It means that when we click a button, when the state changes of our application, or if some kind of data changes, then we went on UI to go ahead and update itself. Typically what we'll use to seeing apps like this. Well, we pretty much have some plain HTML body and we have some kind of employing script for the JavaScript that we want to inject into our file. All right, whereas in React, we don't do this. In this example, it's very clear that okay, We have some HTML, we render out an H1 tag, and then we impose some JavaScript. But beyond that, I can't really see what's going on. And if I wanted to have a button click and I triggered IF function, everything isn't really visual, It's not very straight to the point. So what the guys over react one and done is they essentially went ahead and allowed us to combine JavaScript and HTML in one neat, convenient file. So we're going to take a look at a typical functional components. So this is where you would be currently if you had started with React app, you may have simply a different message, but that's completely fine. You can change it and customize as you fill. But this is essentially how we go ahead and render our components, right? So here we can see it's a function which we've quote app, and this is essentially renders the entire output to the screen. And what we're going to see here is it's just returning some HTML. Now you might be wondering, okay, well, where's the magic happening here? Well firstly, this entire file is a JavaScript file, so that's the first thing to realize. It's no longer an HTML file or JavaScript file and a CSS file. We've kind of combine the loads, right? So we are in fact still keeping a separate CSS file for styles. But for JavaScript and HTML, we've kinda much the two together. And that's why we have js now include react that we don't have to write dot JSX, but it is in fact being interpreted as a JSX file. And a React is doing some clever walk under the hood to make sure it knows that. Now what we're doing here is essentially every time we have a functional component, well, it's gonna do is return some output to the screen. So I'm just going to run the app using MPM. Stop. We're gonna go ahead and spin up this app and see why does now what can JSX do for us? The first thing it can do for us is if we have some JavaScript code inside of the body. So here is our function which returns some UI logic, right? So it returns is simply a div with a 100 one inside. Well, we can actually go ahead and do is let's go ahead and say we had const name equals sunny. Okay? And here we wanted to say instead of hello world, I just wanted to say hello Sunny. Now what we can do in JSX is very powerful. We can actually put in some curly braces and we can interpret JavaScript inside of these braces. So here I can go ahead and say name. And what we're going to see that if I save this file, I should be up to now, if I go to the app, it says, Hello Sunny. So what happened here is essentially allowed us to go ahead and use some JavaScript variable inside of our return block. So this essentially is what was getting seen on the screen right now. Where does this app, How does this work? So the first thing we need to take note of is if we go to index.js, this is essentially the starting point of a React app, right? So this is something very important. Now, React DOM is essentially react creates a copy of the DOM. And essentially if you only look into that, you can read up a bit more about the React DOM and the virtual DOM and how that works. But in this case, all you need to know is that essentially all it does is it renders some kind of output, which is what we're seeing. Now, react strict mode again, you can look into what that is if you're interested. But right now the one that we're interested in is app. Right now up essentially what we're doing is we're taking the AP and if we go ahead and inspect at this point, what we can see is we can notice that inside the body, if I go ahead and expand it, you see it says div id equals root. Right? Now all it's doing is it's rendering this. It's rendering this element. So this a react element which is a parent component which has app inside of it. But we don't actually need to have this strict mode, but it is a good practice to have treatment. And what it's doing is it's placing it where it finds root, right? And by default in a React app, if we go to public, we go to public index.html. This is essentially the optic as rendered. And you'll notice down here you have div id equals root, okay? What's happening here? So we go back to our index.js. You're going to see him. They ghost and finds the div with the ID root simply injects on app inside of it. So you can see this is essentially the app that I had created previously. So let's go ahead and look our app. You see why it's done here. It's actually going ahead and div with a class name of app goes ahead and gets put in here. So we want a div with a class of app. Now, something important, you might have noticed that in React we don't use class, we use className. That's because the class keyword is actually reserved inside of rent for class-based components, which we will touch on in a very soon lesson. So here we've got className app. So you can see this is what we're getting rendered. And then we've got the H1 tag, hello, and then the name variable. And but you see here is actually interpreted the JavaScript. So it says const name equals sunny and ends up rendering it as such. So really, really powerful stuff. Now a few things to remember with JSX, right? So you can essentially do a lot of powerful things. You can render expressions and you can evaluate a condition inside of here. So let's go ahead and double-check and say const is male and it's just a is true right? Now, let's go ahead and this is a Boolean value. So what we can do is we can say, let's go ahead and say h1. H2 tag is underneath it. All right, you are a. And then here we can say is male. If male is true, then we can do a ternary expression. And here I can go ahead and say, if you're male, then you can go into and output mail. Or Hey, you can go ahead and say you are female. So let's go ahead and see what this does. What he's gonna do is it's going to take this block, is going to evaluate the element, and it's gonna go ahead and see that the H2 tag renders you on a and it's going to read a value which is true. And it's going to therefore render this and this is the true. If you've not looked at ternary statements, defense pies to true output. And the second part is the first condition. So if we go ahead and save this, it should go ahead and once it re-renders, you are a male. If I change, is male, two photos, we should go to see you are a female. Okay, so you see that works really nicely. Now, remember one thing too, which is important to remember, which caught me off guard a few times, is when you're using a condition says go ahead and say we had a H3. If only do the same thing, you can't have a if 2. So typically we would see things like this. We would say if is male and then we would kind of think like, okay, this is still JavaScript right? Now. There are some limitations. You can actually render things like that. You're going to have to use more of the modern syntax like a ternary operator if you want to have an inline condition being evaluated with JSX. So just something to bear in mind. So in the React documentation, we actually have a awesome example. We have the Get Greeting function. So I've just gone ahead and pasted this in the right hip. And what we can do is we can go ahead on line 16 and add this line here. So inside of curly braces to essentially show that we want some JavaScript evaluated here. We're gonna go ahead and trigger the function with Get Greeting. I'm going to pass in the parameter for user, which is going to be Qazi right? Now here we're saying if that value exists, then go ahead and return the following. So it's going to return an H1 which has hello Qazi, right? Or whatever name we provide for the user. Otherwise it will return hello stranger. Now let's test this out. If I hit Save, it says, Hello Qazi, nice. If I go ahead and change this to Hello, Sunny. There we go. That's pretty cool. All right, so that works really nice. So now if I go ahead and remove this, it says Hello stranger. So you see it's very powerful and it's also very clean. So now if we look back are owed, the code was previously ran. You can see the exact kind of difference now. So you essentially have all of your logic and everything in one place as opposed to two different files, can get very confusing. Now that there is a go here, and the goal is to essentially build your app and a component-based design. So we spoke about earlier lesson, and you basically want to keep these different components, essentially very small, as small as they can possibly be. A very handy tip actually that we want to remember is that JSX prevents injection attacks. Now why does it do this? Because typically you might have been, you might have heard about something called cross site scripting attacks, right? And what happens is if in this example, I was to go ahead and have a backslash character and try and input some kind of C-Cl malicious code. Typically if you don't protect against that, it can actually be quite dangerous. And the user might be able to actually enter your database and do some really nasty things. We're not gonna get into cross-site scripting, but it's just something to know that using JSX is safe because whenever you, it will always escape any values embedded in JSX before it renders them. Alright, so safely escapes any value. So you can be sure that if somebody tries to do that stuff, It's going to go ahead and catch it before they get a chance to go ahead and do that. So that comes out of the box with React DOM. And when you're using JSX. Now I would recommend coming to this page over on React, going to the main concepts and the section to introducing JSX. As soon as you finished here, go ahead and read this entire section is going to give you a nice breakdown of what we talked about. And it's essential for moving on to the next lesson. With that said, we are at the end of this lesson. Next lesson we're going to be learning about the BEM naming convention and why it's awesome and I love it and I really recommend that everyone goes ahead and uses it and runs it. I actually didn't like it when I first had to buy it. So fun fact for you. But yeah, it's going to be an awesome lesson. We're going to teach you guys about how you should apply a form of standard to the way you name your classes inside of react. So get excited for that, and I will see you guys in the next lesson. Peace.
6. BEM Naming Convention: Joe, what is going on, guys, welcome to a nother lesson today we're going to be talking about the BEM naming convention. Now if you've watched any of the YouTube, those UB, a big fan of this already. I know the, I actually didn't like it when I first had abide by, it grew on me and there's a reason why it's going to grow on you. We're going to run through that today is essentially a standard that is put in place which is opinionated. Some people like it, some people don't. Some people prefer it over SAS. I am one of those people or prefer this over SAS because it keeps your codebase very simple and easy to maintain and it works very well with React is a standard for naming your class names so that you can reference them and style them very, very easily as you code. And in my opinion, it makes IT development workflow a lot faster. So without further ado, let's jump straight in. Let's go. So here we are on the BEM homepage. You guys can go over to get them.com. And BEM is not anything you need to install. In fact, it's a way of working, so it's simply a, it's just, a simple naming convention, is highly useful, is powerful for a reason, right? So we're gonna go ahead and click on the naming tab. Now, BEM stands for block element modifiers, you can see as three sections. And each one does a good job of breaking it down. What we're gonna be doing is actually showing you how to go ahead and put them into action. So block element modifier, right? So the first pop the block, the block is essentially in React, we referred to the block as the component. So in this case, App is a block. Right? Now the element is the next part. So imagine which one was our title. We can go ahead and do is give this a class name. And we can just say underscore, underscore because this is the convention for BEM. And we can say title, my title, Like so. Now we have our first block element, right? So we have our blog which is up, and then we have the element which is up, underscore, underscore title. So remember it's two underscores, that's the convention for BEM. So you can see here we've got a block and this in our case is up. And then here we have the element where you have underscore, underscore, okay? So blockName plus two underscores, and the final one is modified. So imagine we had a title, but we had a small variant of the title and a big variant of the Thai. Okay, let's go ahead and paste this line twice. Well, we can actually do is we can have a modifiers, we can have dash, dash. And in here we can go ahead and just say lodge. So this is a large variant and this is small variance. So now you can see that we have the app component in itself. You have up under which refers to this is a title component inside of our app. Then you have, this is a title component inside of the app, and it's the large variant. This is the title component inside of an app, and it's this ovarian. So very, very simple breakdown. Now there are rules to them, okay? One of the rules is you do not go to levels deep. So for example, let's assume we had another element. And this element had a class name of app underscore, underscore header, right? If we had a title inside of this, we don't then go like this. We don't do that because now we've crossed two levels. We always stay on one level. Instead, what we would do is we would create a header component and build it as so as required. So I'm going to show you an example of that in just a sec. But for this case, what we're going to be seeing is the main pro of using the BEM naming convention is that from a glance, when you just look at a class name, it's very, very clear. So here we can see underscore, underscore title. So this is the time, it was pretty simple, right? And here we can see app underscore, underscore title, dash, dash launch. So it's a large variant. Now how do we actually use this, right? So how is this actually useful to us? So let's go ahead and open up our app dot CSS. So you can either do go into a font directory at the command B, or you can go ahead and press Command P and type in app dot css. Little trick for you guys. All right, so now we're here, we're gonna go ahead and target the app plus, okay, So underscore, underscore tie tool targets the title components. So I'm going to go ahead and pull this side-by-side so we can get a side-by-side comparison of what is happening here. And just to make this very visual for you guys, I'm gonna say, I'm gonna say this is a title. And I'm gonna say this is, this is a title, this is a large title. And here I'm gonna say this is a small title. And we're going to actually render this out and see where it goes. So let's go ahead and see what happens. I open up my localhost and you can see this is a large title. This is a small title. Okay, So we have R code open over that. So with that done, we're gonna do is we're actually going to apply some styling to it now. So for the title, let's go ahead and say our title should be the color red. Okay, So kinda read, Save, and now you can see, okay, perfect. It's red. That's awesome. And it works really nicely. Okay? Now what we can do is you see where we have the Element Modifier, right? So, well, you can do here is you can actually go ahead and if we want this to be a title. All right, well, we can go ahead and say is we can actually continue to put up underscore tied to the fund. But then you can also give the appetite to launch appetite too small. Or you can, you can do that. So here what we can then go and do is we can add in. We can go ahead and now all three are going to get that cost. Because you see it's appending the only the base uptight tool, but it's also going to append this modifier afterwards, right? So let's, let's actually put this modifier into play. So if we do up on this one, the school tried to dash, dash wedge. And let's say for the large variant, so the modifier is large. In this case, we're gonna say font size should be ginormous. So we're gonna go in 90 pixels. Okay? So we're gonna go ahead and do that. And you can see, whoa, this is a lodge tile. Alright, so that was pretty good. And now let's go ahead and copy this. And I'm going to step into the target a small, right? And for the small, I'm going to actually go ahead and say it's a 10 pixels, so it should be really, really small. O amazing. Okay, nice. This is good. You only use modifiers which makes sense. For example, if I had dash, dash small, and they also change the color to green, It's kind of confusing, right? Because the modifier looks on the fun, that you're just making it smaller, but it doesn't say anywhere that you are going to be making it green. All right, so even though it does make it green, you kinda wanna make it so that if you looked at this only without the CSS, it would make a lot of sense. In this case, we can look at this code and be like Okay, app, then some app tiles getting applied. Okay, Awesome. We've got the app. I'm just going to be tied to being applied here. Okay, perfect. It's all working. We have a few tiles and then this is actually taking on the appetite to launch, right? So that's, that's really great. So you can see at this point it walks pretty good in one file, okay, but you might be wondering, I don't really see the benefit yet, right? So what we're gonna do is we're gonna create a component. So I'm gonna go ahead and remove these right now. And I'm gonna go ahead and simplify this right now. Let's go ahead and imagine we had a header component, okay? So we have a title saying this is a title, and then on top of that we're going to have a header component. Right now. We're going to create Office components. We're going to go into here. We're going to go into this band. We're going to do an add new font. I'm going to say header dot js. Now I've got these amazing snippets that had been installed. If you don't already have the ESM and snippets, rewind it back a few lessons and go ahead and install them, is, these ones are right here. So you're going to want to install the React redux snippet, right? So when you get to this point, you wanna go ahead and do the following. I say FCE to go ahead and create a functional component which is a header. And then here what we do is we say className is the block, right? So I'm gonna go back and comment here so to make it easier for us to see. So BAM, and that sounds for block element modifier. Okay? And here I'm gonna say the element is header. Right? Now if I had a tie to inside of this, I would say, Hey one and emit, you can go ahead and do something like this. You can say header, title. Boom, there we go. And you can say this is the header. Okay, now this is a very quick example. And we can also say this for example, go ahead and say, Hey, H2 a. And this one is called user. And then here we can say sunny is signed in, for example, okay, it's just an example. And I save that. And then we're gonna go into all up. And we're going to import this. Sorry, if I click it and I press control space bar, it says auto simple or I can just simply type in import head out from dot dash header, which means in the current directory that this file is in, go ahead and find the head and save it. And now we can go ahead and go back to our code and we should be able to see that the header appears, right? So we remove the header. We don't get the header anymore, but the header back. We now get ahead about, okay, so that works really nice. And you can see now, the reason why is because it's a convention now that we follow religiously throughout our code, right? So you, if you apply the BEM naming convention, remember it's a standard, it's a convention for it to be powerful. You need to incorporate and enforce it throughout your entire codebase. This makes it very quick to go ahead and debug and find things. For example, if I want to, if I know that my CSS is, is targeting something called App on this one and this will tie to, and I press Command Shift F. Now I can see it's found it, and I can see that it was inside of the app component. Okay. And it makes very much, a lot of sense. But even if I didn't do the Command Shift F trick, you can see is now that, okay, I know that this is inside of App and I know that it's a tie or component. Okay, So it's very, very handy. The block is essentially what is going to be the component itself, right? So it's going to be the component itself. For example, here it was the header, and here it was app. Okay, so block is usually when we're using bam inside of react, That's what we're going to go for. Now, the element is usually going to be the element that we're talking inside of that component. For example, the title here, the title and the user inside of the header, right? And so you see the title inside of the header and so forth. So it's very easy to quickly identify exactly what we're, what we're using. Right now, the final part of the modifier is going to be useful. And if we check this example, Hey, you can see we have a form. Okay, awesome. So we've got a style hit for formed. Then we have a variant of the foam, which is the theme for the Christmas styles. So, and then they've also got a variant for this simple. So this is going to apply simple styling as well as the new theme for the Christmas styles. So you can see it's very, very easy to go ahead and see if I look at this code, okay, So they definitely have some kind of X-mas theme going on, some Christmas theme going on. And it's also the simple variant, okay, That makes a lot of sense. And now I can look at the code and I can say, okay, form input, right? So this is the input itself and then this is the submit. And you see this is also form submit disabled, right? So the button has some disabled style being applied to it. So there you go. We can pretty much go ahead and see this is many different examples. In this case, m is one of my favorite standards to incorporate. I recommend if you still on convinced at this point, head over to Color program on YouTube and make sure you do check out the clones that we built so that React js cones. Make sure you actually go through them and build them. And trust me, you're very, very quickly see the power in which Ben has when it's used in practice. And if that doesn't do it for you, we're going to actually have plenty more coming up inside of this module. At the end, what we are going to go ahead and build out a pretty cool projects. So stay tuned for that. With that said, we are at the end of this lesson. In the next lesson, we dive into some of the React fundamentals and we're going to be starting off with state, which is in a very, very important concept inside of react. So get excited. We are about to level up on knowledge on react to a whole new level. And I will see you guys in the next lesson, Peace.
7. Class Based vs Functional Based Components: Yo what is going on, guys, welcome to another lesson. And in today's lesson, I'm going to introduce you to the concept of components and what are the different types of components? So we actually have two types of components. Yes. Two, we have one which is called a class-based component and we have one which is called a functional component. Now, which one do we use, and which one should I be dedicated my time towards? Now, the question is very simple. Functional components are the more newer, modern style of coding, functional components are the ones you're going to be coding in when you create a new component. And for many reasons, functional components are easier to write, easier to maintain, and they have a practicality and benefits by writing a component in a functional matter is easier and more efficient to do so. Now, class-based components are a little bit more complex. However, class-based components well around before functional components. And that is the key as to why you need to know them. Because most companies that you go into, chances are all of their code is going to be in class-based components. So you need to understand both class-based components and functional components. What are the differences? And actually the skill of taking a class-based components and translating it to a functional component. We're going to cover some of those basics today and I'm going to run through examples of each. Let's dive ARE IN guys. So starting off when we do Create React app, we get this starting template where we get the functional component app, which is built for us. Now, you would have reached this point if you had done the previous lessons. So at this point, all I want you guys to go ahead and do is stop your app by running npm, stop. And then it will go ahead and spin up on localhost 3000. Okay, so once you're at this point, this firstly is something called a functional component. Okay, So this is a functional. Now, why is a functional component? Because it's literally a function that returns something. Okay? So that's all a functional component is. It's a function that returns something for us, okay? So it's extremely simple and it's pretty, pretty easy terroir. Right? Now if we want to write this same component as a class-based component, now it gets a little bit more tricky, right? So what we need to do is go ahead and I'm going to use ES, snippets, which we've installed in the previous lesson. And I'm gonna go ahead and do React class-based component. So I'm gonna do CC and then it goes ahead and create a class-based. And now inside of here, if I want to do the same thing, I can go ahead and say hello. Oops, I can say hello, world, save it, and we get the exact same outcome. So you see what simpler this, all this C, in theory, this is actually a lot simpler guys. Now, because it's very straightforward. A function has some kind of input and some kind of output. The input would be the prompts. And at the output being whatever is returned from that function, which is a lot simpler in my opinion. So imagine we had a function and this function had some kind of input, right? So then we had the function here. So this is our function and this is called app. Okay? And then what we do is the app does some logic, it has some UI rendering logic, and then they simply output something. This is a functional component. It's as simple as that. Now what are the, what is the input here? The input could be props and the output would be the JSX, right? So it's pretty straightforward, and that's really as complicated as it gets when we're talking about functional components. You want to use capitalize whenever you do this. So we have an input of prompts. It, we have some UI rendering logic going on, and then it returns some JSX. So this right here would be your JSX that gets returned. Okay, so very, very straightforward. Now, everything kind of gets a little bit different when we move over to class-based components. So I'm gonna go ahead and move this from the screen. And what I'm gonna do is I'm going to undo what we previously had. So we had previously had this helloworld, a class-based components. Now to get the exact same format, I'm gonna go ahead and say export default apps. So there you go. It's a very similar format now to what we had previously. So if I was to go ahead and put this side-by-side in a comparison. And I was to go ahead and change this to JavaScript, React. So there we go. And I was gonna go ahead and say our FCE. Now what we would have is this essentially so we have the same app on each side. So I'm gonna go ahead and break this down. So hello world. And this is actually a very simple way to see the differences between the two components. Okay? So here you can see class APP extends component, and here you can just see function app, right? So here we need all these extra things. Now notice the first thing is class, right? Which is why in fact, in the audience x, we now use className because class is reserved and it's used to define a class components. Now, that's all cool. But again, function call is present, boy, functional colon is, seems like a lot easier, right? Way, right? So you might also notice the render function. So in a functional component, we can simply return our JSX. It's as simple as up. In a class-based components, we actually need a render function which then has the ability to return to JSX. Inside the render function, we can do a bunch of things. We can have console logs. You can have a bunch of JavaScript executed in here. And this is going to run every time the component re-renders. So that's another topic for a later lesson about component lifecycles and all of those things that can get interesting inside of react. So here we have the example of the same component again. Now how do we go ahead and consume these? It's the exact same. So if we go to where the app is used, we can see here inside of our index.js. So I'm gonna go ahead and close that one out. So you can see here inside of index.js, regardless of if it's a functional component or a class-based component, as long as the component is exploited, everything is okay, right? And you just need to import the component regardless of its functional or class-based and just use it as following. Right? Now, components are a little bit more clever than that. All right, a little bit smarter than that. And the reason why we couldn't use functional components before is because we couldn't support something called state. Now state is something very, very interesting and we're gonna be talking about that in the next lesson. And we're also going to be covering something called prompts. And these are the two fundamentals that you're going to need to know about to really master, react, and get your hands into the more complicated things, right? You need to be able to go ahead and understand, stay and prompts to a very high level so that every, because everything else essentially builds up from those two fundamental points. So moving back over to functional components, alright, I'm gonna go ahead and again, show you how would we change this into a functional component without on a handy little snippets feature. So the first thing I would do is I would go ahead and change this to you actually become a variable without this extends components stuff going on because again, class-based components can be a bit confusing when you're learning out. So I'm gonna go ahead and get rid of that. I'm going to change this to const, or we can make it a function. And I'll show you what I was about to do that. So we're gonna do this function and remember we no longer have a random block. So go ahead and get rid of that. And there you go. I no longer need this MBO. And our code is a lot more simple. So you can see the process of changing it from a class-based component to a functional component is actually taking away from the code, which means it actually simplifying a lot of the code. Right? Now you're probably wondering why did we do this in the beginning? And there is a reason for that is because functional colognes didn't support state. All right, So you couldn't do that until the entry of reactants, which we're going to be talking about in future lessons. So this is why the app is a lot simpler to read as a function. Like we said, it has simply has an input. It does some rendering logic, and then it has some output again. But it is very important that you understand how to use both class-based and functional components because both are going to be required when you land a job or freelancing time? It depends, but the point is, is that you can't guess all you can't always guarantee that the code base is going to be purely in functional components. Now we're gonna go ahead and open up the Y would recommend you start from so here we have the components and prompts section. I would recommend. After this lesson, please go over to function and class-based components, the React Dogs. And please give this entire section a read because I'm going to be jumping over to the next lesson right now, where I'm going to teach you guys about state. And the following lesson is going to be about prompts. Like I said, two major fundamentals. And it's going to be crucial. This was a prerequisite to get you guys a very simple understanding of what class-based and functional components are. We're gonna get a lot more intricate into this stuff. And we're going to understand why you would prefer to use each and the different types of books and things like that. So we're going to be touching base on all of those soon. But hope you enjoyed this lesson and I will see you guys in the next one piece.
8. Introduction to State: What's going on, guys, welcome to another lesson. Today we are going to be talking about state. So think of state as the correct way of defining variables in React. That's my little easy way of remembering it. I'm way allows us to do is essentially have some memory inside of each of the components, which is local to that component. For example, imagine we had a counter component and it had a plus and a minus button. If we hit the Plus button, we want the count to go up. If we want the minus button to go down that how do we keep track of that counter value? We use state. Right? Now we can store anything inside of state. We can store a number with a string. We can store an array data objects, and we can have multiple variables inside of OS day. Fun fact, previously, only class-based components could actually support state, which is why functional components were limited. But React Hooks came along and allowed us to use state inside of function on this. And we're going to cover that in a future lesson. But let's go ahead and jump into that counter example right now. And we can see exactly how to go ahead and solve a piece of state inside of React. Let's go ahead and go back to our code. So we're going to carry on where we left off from last time. So let's go ahead and assume we had a counter. So I'm gonna go ahead and code up a little counter here. And we're gonna say, welcome to my counter up. And I'm going to have a p tag with a value inside of it. So I'm going to get to a symbol p tag with a value inside their head and say the count is. And we're going to have some kind of count value being stored here. Right? Now, we're going to have two buttons. We're going to have one which is going to have m minus button. And I'm going to copy this, and I'm going to change this one to a minus and a plus. Now when I click this button, I want it to do something. I'm going to change the value of the count. So I'm gonna do, is I'm going to create a function called increment. And this one is an ES6 arrow function. And all it's going to essentially do is go ahead and change the account. So what we would have typically been used to is going ahead and having a value like so we have let count equals 0. And then what we would say is count equals 1, count plus equal 1. And this would allow us to increment. And then what we would have is another one for decrement. I'm going to have minus equal one, which takes away from the value, okay? And then what we'll have is the count is count, okay? And then what we'll do is we'll say onclick. We pass in our function. And here we'll say increment. And here I'll say onclick and I'll pass in auto decrement function. Okay, I'm going to save the app, go back and now we can see it says Welcome to my contract. The count is 0. Well softening him. So notice how the actual webpage isn't re-rendering, right? So you might be wondering, I've done everything correct because I've made it so that the count is now plus or equal to one. So you should have added one, right? But it doesn't seem to be re-rendering the page and showing us that being on the screen. So the reason why this happens is because we need to update things in the React way and that's where state comes in mind. The reason why we need to do it this way is we need to set up a piece of state where the count variable will live. And then every single time we update the count variable, we need to do it in the React way so that we can go ahead compare the new value that you are going ahead and giving count. For example, if we incremented, it's going to be plus one. If we decrement minus 1, compare that value using something called the virtual DOM against the actual value that is on the screen. And then react will know which part of the webpage to go ahead and refresh. So it is very, very important. And we're gonna go ahead and change this now to make it work. And we're going to be using the US State hook and we're going to cover hooks in a future lesson, but we're gonna go ahead and use a function provided by React and it's called a hook. And here what we're gonna do is rather than defining a variable like this, we're going to go ahead and say const square brackets for ES6 D structuring. So we're using a 3D structure here and we're gonna say, well, all you need to know is the actual syntax. In this case, we're gonna go ahead and say count. And then the second argument is called a SETA. And it's a function which allows us to modify the value of what is inside of the count variable. Okay, So in this case I'm gonna go ahead and the convention is usually say set and then whatever the variable is, quote, so in this case set count. So I'm going to say US state. And then inside of the US state parentheses, you need to go ahead and put an initial value. So in this case it's going to be 0 as it was a number inside these parentheses. You can go ahead and put an empty string. You can put an array, an object, or an object with some values inside of it, anything you really want to initialize this, and this means that count will initially have a value of 0. Okay? So I can get rid of this line. Now going back to the increment. Modify the count value instead of doing this, this is incorrect, this is wrong. I now need to go ahead and say set count. So anytime I manipulate the count, I need to use our setter function overhead, right? So I'm gonna go ahead and say count plus one. So set the count to wherever the current currently is, plus one. And then this is the correct approach. Okay? And then for this one, I'm gonna go ahead and do the same thing. I'm going to say set count to whatever count was minus one. Okay? And this again is the correct approach and this right here is the incorrect approach. So this is the wrong approach. Okay? Now the reason why this is very important is because when we go through this function, not only are we updating the count variable in a controlled fashion, because it's only going to update the count variable when we use this function, but it's also going to tell React, okay, a value just changed in your state. Go ahead and re-render a part of the webpage and react as a very kind of way of doing that using the virtual DOM. So now I'm gonna go ahead and get rid of the wrong code. And let's see what happens now. So I'm going to hit Save. I'm going to go back to my app. And here you can see if I go ahead and hit plus, there we go. Oh, okay, interesting. So we've got the plus and the minus back to front. So I just need to go ahead and swap these around over here. So constant increment and decrement. There you go. Because didn't minus should be decrementing, the last should be increment. And we're gonna go back to our app, refresh. And as you can see as I add, it adds the number as I minus. A minus is the number. So this is using a piece of state and is using the React way of updating since date to go ahead and actually go ahead and refresh the web page every time a manipulation is made to the count variable. Now we can have as many pieces of state of the one, so I can go ahead and add a different one. For example, if somebody's age, OK, you can go ahead and change this to be an age piece of state. And then, for example, their default value could be their age. So in this case 26. And then you can go ahead and use that by using set age to modify that value. Now, as you can see, we simply use it the same way we would use any other variable. So this in a nutshell is how we do it for a functional component. So something to notice is that you see when we update the count, as soon as I hit Refresh, the state resets back to that default value. Now, this is a very important point. State isn't non-persistent, which means that when the user refreshes or leaves the webpage, the state will disappear. So there are methods to make it persistent and to keep it. We can use things like local storage or we can retrieved from a database. But we're going to cover that in a later lesson. But it's a very important concept to understand this state is a non-persistent by default. So with that said Now I'm gonna go ahead and show you how to write this exact same component as a class-based components. So I'm gonna go ahead and create another app component. But when I say AP class or Justice 200, separate the two. And here I'm gonna go ahead and do the following. We say RCC, which is a handy low ESI snippet. And then I'm gonna go ahead and copy this div. So we want the exact same output for this component. Save it. There we go. And here we have the decrement and increment function. So I'm going to go ahead and copy that code that has essentially the same. And notice how he would belong outside of our render block, right? So that's where we would put these functions. Now notice how the const is erroring out. So inside of a class, we don't actually have variables. These are going to be class functions. Go ahead and save. And now we've got the increment and decrement. Now we need to go ahead and stop our piece of steak. So in a React class-based component to do this, we need to go ahead and do the following. We need to say constructor. And then I need to pause pass in. Perhaps a constructor takes something called props, which we'll explain in the next lesson. Here we say super props. And then what we have to do is say this dot state. And the state works slightly different in a class-based component is a little bit less clear, to be honest. Here you want to basically go ahead and say Save this component is an object and inside of the object we have account which has initial value of 0. Now if I wanted another one, I will go ahead and say age. And in this case I can say age is 26, and that's how we would do it in this case. Now notice immediately that the benefit of doing in a functional component minor is that we actually get a setter for each piece of each piece of state, which is inside of the component. Whereas here we don't get a setter for each. Okay, so something to note. Now, we're going to have the setCount functions inside of a class-based components. So here I'm gonna go ahead and remove these as such in order to update the component inside of a class-based component, I need to go ahead and say this dot set state. Now it's this because if you've ever done any class based programming, it's going to be referring to this. Instance of the class, because caspase programming for those, the object oriented approach whereby we would have an instance of the class that we're defining. So here we say this dot set state. And what we then do is we pass in an object. And here what we can do is we can say count. Right. Now. The count here we can say is this dot state, dot count plus one for the increment. So notice how previously I actually was able to just direct access to count because we just got the variable itself. But in a class we need to say this instance of the class. So this object that we're referring to, access to state, and then go into the account and increment it. So you see there is a different set and the code is a little bit actually quite more complicated as opposed to the functional component. And here y can do is I can copy this, go to the decrement and do minus one. Okay, save it. And what I'm going to now do is rather than using our app, I'm gonna go to index.js and I'm going to make it pull. So I'm going to import the app, but instead employ from AP class. Okay, and now we should be pulling it from this one. Now it says a few things. It says count is not defined, increment is not defined and decrement is not defined. The reason why this is happening is because inside of a class-based component, we need to now have the, this keyword. So we now need to say for the count mean to say this dot state.com to access to come inside of the state. And also for the class functions, we need to say this dot-dot-dot comin and this dot increment. Save it. And now you can see it's compiled successfully. So going back now, if we go ahead, we get the exact same functionality. And as we expect, if we refresh, it resets to 0. Now, as you can imagine, out of the two options, just from a glance, which one seems more simple. From this comparison, it's very clear that the functional component is the preferred choice when we're writing a new component. However, as I mentioned previously, is going to be likely that the case is that the codebase that you're going to be working on is cost base. In which case you're translating this over to a functional component is actually very, very important. All right, and if we weren't gonna go ahead and do that right now, I will show you how I would do it. So here I would go ahead and change this to be const or removed the class. I'll remove the extends component. And then I would go ahead and make this an arrow function. So you can do this, or instead of this, you can go ahead and make a function. In which case you just need to get rid of this and you get rid of the arrow. So you can do that as well. Now we don't need the constructor, but instead we need to replace this piece of state. So remember we used a US state hook previously. So now I can go ahead and say const, and we need a count. And remember the standard is to say setCount. We're gonna say US state and the initial value is 0, which means I can get rid of this entire block. Okay, awesome. Now we have this dot set state. So remember in a functional component we have the setters. So here I can say setCount, and I don't no longer need to do this. Here. We had previously this dot state.com. Now I can just say count plus one, so I can get rid of this piece of code done. And the same goes for this one. So I can say set count, count minus one. So you see the coding is actually a lot more simple in a functional component. Awesome. Now what I need to do is these need to be const because these are now arrow functions, which are variables inside of all functional component because they simply just normal functions. And then what we do, we need to do is delete the render luck, because in a functional component we can simply return. Now, we don't need this dot state because we can directly access the counts, we can get rid of that. And then here we can actually go ahead and get rid of this document and this.tab increment, we can hit Save. And the final piece of the puzzle is we now need to export this. We noticed the export default app as such. Okay? Now once we've done that, you can see everything is still working. And just to prove that this is still the correct cost that we're using inside of index.js. We are pulling it from AP class, which is this one over here, and is still doing the exact same functionality, but instead it's a functional component. Now, here's something to remember when you're dealing with class-based components. Whenever we update the state, it can be asynchronous. Now, this means that we could be updating the state in several different places on the page at 1 in time. So this dot state.com could be triggered and it could be out of sync with another action on the page. So the way that we deal with this is whenever we call this dot set state, what we have to do is go ahead and we actually get an argument here and we get the previous state as an argument. So here we can say previous state, right? And instead of this dot state, now, what we can now do is we can say the previous state dot com. Okay? And then here what we simply need to do is wrap these in parentheses. Okay, because now we're returning an object. If I go ahead and click increment, we can now see it still works as such, and the decrement still works in the previous matter. Okay? Now, what we wanna do for this one is this will ensure that at the moment we hit the increment. And then we decided to set the state. We are going to use the exact previous state value at that point in time to manipulate the count inside of state. So what I'm gonna do the same thing. I'm going to say the previous state and I'm doing a return. So I need to put parentheses around here. And this would have the previous state, and this would now say the previous state dot count. Okay? And if I go ahead and refresh this and do it, there we go, everything is still working as expected. And now regardless of if we cool this several times in different places, at the same point in time, it will update in the correct appropriate way. With that said guys, that is our introduction into state for React is a very important principle. I would highly recommend you go over to the react docs and now give this a read. So we're gonna go to the React Dogs overhead. Simply go to get started, go down to main concepts, state and lifecycle, and give this page a read. We will be covering the lifecycle in an upcoming lesson. But next we're going to be talking about props. Why props are so important inside of react? So get excited. I will see all of you in that lesson. Peace.
9. Introduction to Props: What's going on, guys, welcome back to another lesson. In today's lesson, we're going to be talking about prompts and why they make react so damn useful. Now, it's the reason why components can be reusable in the first place. So popes simply stands for properties. And imagine we had an app like imagine we had a component like a product. A product would have something like a name, a description, a price. We would write the component once and then we would reuse it several times and simply change the prompts that we pass to it. This would then render out to be the desired outcome that we want. So I'm going to explain this and break this down very, very simply for us. Now was mentioning that prompts are present in both functional and class-based components. There's something we need to know is that prompts are passed from the top down. So imagine we had the app component at the top, and then we rendered several products underneath, we would pass data from the top component down to those products and that would render onto the screen. We would then be able to render out several components underneath that and post prompts as required. This is why we have a tree-like structure and react, and it's essentially how reactant determines what to re-render out what different time. Now I'm going to go through an example here which were explained all of this to you. So don't worry if it doesn't make sense. We're going to use the example of a shop like Amazon, which is essentially an up arrow, which has lots of different products on display and different sub-components I rendered underneath them. So let's dive into an example right now. So here is our application. And imagine it was an Amazon lifestyle app, right? So there's an e-commerce platform. Typically we would start with the itself, so the app component in itself, just going to draw a little box around that to resemble a component. This would render out several sub-components beneath it. So imagine if it rendered out three product components. So we're gonna go ahead and write the product overhead like so. And what this will do is we're gonna go ahead and create one product and then reuse it several times where it's needed. Okay, So this will actually posed several benefits. It means essentially we only write the code once and then we have styling for that one file. And if we have a change that it's going to get changed in every single location it's used across. Now, each product can be customized via the use of props. So like we said before, a product can have different properties such as a name, a title, so I descriptions or we can have a name, a description. And we could have something like the price, right? And each one of these would get them passed over to each of the different components. So from the app component, we would go ahead and pass the required prompts, each of the components. So as we mentioned before, he would travel in a downwards tree-like motion. Now if we have a component beneath this level, so imagine a product has a Item Description Component. Imagine a product has any item description component. Then this would then get rendered beneath it as such. So imagine we could go ahead and do the following. So imagine the product went ahead and rendered this right here. And then we could go ahead and it could be rented out again for this and again for this, right? So as you can see, we have a tree-like structure where it's simply components being reused over and over again. So this would render this, and this would render this. And the DRI can go on and you can render whatever different components you want and however many different components you want each level. Now, from this level we can go ahead and pause something like say the item description only took things like the name and description, then only these two and get passed down if we only want that. So if we want these to as prompts, then they can only be the ones that get passed down. And we can maybe leave the price, for example. So that is an example of how the prompts travel downwards and only downwards. So you can't actually go ahead and pause a pop back up the tree. Okay, so it's a very important thing to note. Now another interesting tip that we have to remember are that prompts are read only, which means once a component receives a bunch of prompts, they cannot be changed. We can only then use and consume the prompt, but we cannot modify that property once it's passed down into a component. If we want to do that, what we would tend to do is use state at the component above, and then we would modify it accordingly and then pass it down to the child component. So what we're gonna do now is we're going to dive into a demo application. So we're going to start off from where we left off. Let's hop into our code. So here we have a stein application from Create React app and we just modified it to say Hello world. Now what we're gonna do is we're gonna go ahead and create off Amazon like application. Okay, So imagine what we're gonna do here is we're actually going to go ahead and create your product and then render it here, render it, hit, hit, hit. So we're going to have four different products. And each one, It's going to take a name, a description, and a price. All right, so imagine if we could pass these in. Each has different properties than that would be pretty handy because then we only have to write one component and we can reuse it, it bypassing different properties to that component. So in order to do that, I'm gonna go ahead and create a product dot js file. And I'm going to use ES snippets to go ahead and create my functional component. So here is our component made. And what we're gonna do at this point is right here where we have the product being initialized. We're gonna go ahead and say prompts. So prompts actually get passed in as a parameter to a functional component, all concentrates component. And the way we're going to access it is simply by going ahead. Doing the following so we can go ahead and say prompts dot whatever the properties quote. So if it was named, there'll be props dot name. If it was description, it'll be description and if it was priced, it would be propped up price. Okay, so what we're gonna do at this point is I'm gonna go back Kim, and I'm actually gonna go ahead and render a product. Okay, so notice it says auto imports. So you might get that sometimes with IntelliSense. But if you don't, you can go ahead and simply employ at the top manually. Now what we're gonna do is I'm going to pass in three prompts and probes are pasta and just like HTML attributes. So here I'm gonna go ahead and say name. And for this product we're gonna say Amazon Echo. And for the description, I'm going to go ahead and say Your AI assistant. Awesome. Okay. And then for the price, I'm going to go ahead and pass in a value. So if we pass in a number, we do the JSX curly braces and I'm going to go ahead and say this is 59, 99. Okay, so there we go that we have our first product with three different prompts being passed to it. So you can see it's very clean syntax. I'm gonna go ahead and save that file. And the prettier did a nice job of cleaning the up. I'm gonna go back to product and now we want to consume the information. So firstly, I'm gonna go ahead and add a H1 tag. Now, for the H1 tag, I'm going to go ahead firstly, make myself a bit more visible by having the app on the left-hand side and the product component on the right-hand side. So here I'm gonna go ahead and use the name prop. So I'm going to say prompts dot name as an H1 tag way and as a smaller H2 tag. I'm going to go ahead and say props, dot description. Save it. Now the price, I want to do something special. I'm going to go ahead and say we have an h3. And I'm going to go ahead and add in the props dot price here. But what I'm going to actually do is I'm gonna go here and I'm going to add in the dollar sign before it because it's going to be resembling a dollar amount. All right, so we're going to have props, name, prompts, description, probes, price. So let's go ahead and test this. I'm going to go ahead and press Command J to pull up my terminal and we are running on localhost 3000, gonna go ahead and open this up right now. So let's go over to localhost 3000. And you should be able to see, there we go. We have our component being rendered on the screen. So you can see actually pulled through that property that I passed in. So this go back and jump into our code and what we're gonna do is split the screen for you guys so you guys can see this very, very simply. And what I'm gonna do now is pause overhead. So here you can see an app. We have the product being rendered. We have the name Amazon Echo, we have the description, your AI assistant, and we have the price 5999. Okay. Now what we're gonna do is I'm going to change the name to go ahead and prove that this is correct. We're gonna say Google Home. And I'm going to save. And now you can see it changed to Google Home. So this is really handy. And what is this handy for? It means that we can actually go ahead and make one component, reuse it several times all throughout our application. So what I'm gonna do now is I'm going to copy this. I'm going to paste it three times. And I'm going to get rid of these comments, okay? And I'm going to change each of these products. I'm going to say iPhone, and I'm going to say the new iPhone 12 Pro Max. Nice. I'm gonna say the best iPhone because that's what they always say. And I'm going to say price is one hundred, two hundred because, you know, iPhones are expensive. And then here I'm gonna go ahead and this was bugging me. I can do that to myself right now. Hey, I'm gonna go ahead and say, let's go with a MacBook Pro, okay? And then your favorite compute HPC attack, right? And then we're gonna here, we're gonna go ahead and say it's 2500 because they're even more expensive, right? So I'm gonna go ahead and save it and watch the magic. There we go, guys. So you can see we're just reusing this component three times with different prompts properties, right? And it goes ahead and it renders accordingly. So if I go over to product, you can see I'll code, code is extremely clean at this point. Now what I mentioned before is that we could actually have a item description or another child component underneath this, unpause the props down to them. So the first thing I'm gonna do is show you a little neat trick. So in ES6 we have something called ES6 D structuring. So what we can do is prompt. Instead of saying prompts, don't name pops of description, props dot price. We can have curly braces around the prompts to say, pull upon this object, which is called the structuring. And then what we can do is we can go ahead and grab the elements directly at this points. We can say description, oh, and price. So now I can do is I can go ahead and get rid of all of the following things. And so that was named description and price because we're actually pulling apart the prompts at this point, the structuring it, and then we're rendering so you can see if I save it, nothing broke. Okay, but if you're broke at that point, probably didn't have somebody has index, right? So what we're gonna do now is I'm going to create a, another subcomponent, quote item description. And we're going to pass props down to that one. And I'm going to show you how that tree structure works. So let's go ahead and create a item description component. And this will most likely era because we haven't gone I am description component, which makes sense. I'm gonna go ahead and create that item description. Dot js, save it, and then go ahead and say RFC. Boom, we have it up and running. Okay, So that's awesome. And then now we go ahead and we got some props. And as I mentioned before, the item description is going to take the name and the description only. Okay. So just a soil test, right? So let's go ahead and save that. And then what we're gonna say is it's going to have a p tag. It's a p tag which will then show the name. So let's go ahead and say it takes the name and I'm going to have another P tag underneath it, which is going to be in italics. And this is going to have the description. Okay, there we go. And now what we're gonna do is go back to our product. We're gonna go to the end of the component name, Control Spacebar. Neat little trick photo import. That will be a nice little trick for you guys. And now what we can see is the item description renders, but I can't see anything on the screen, sunny? That's correct because we haven't actually post any props, which means that this is actually blank. Alright, so what I'm gonna do now is rather than having the name and description over here, I'm gonna go ahead and say, we're gonna move the price underneath the item description as such. And I'm just going to simply pass this down as a prop. So I'm going to say the name prop in this case is the name prop that we pass down from the app component. And then I'm going to say this description prop of item description is at the description probe passed down from the app. And then here we keep the price in this level, save it. And now you can see we have a nice item description with a big price, right? So there's very, very powerful. Again. Now, this is extremely reusable. It's extremely powerful and it's quite simple in terms of how effective and useful is. So notice how I remember I said it was top-down, which meant that you can't pass the backups. If I wanted to push the name backup to the app from this level, we can't because we went and downwards. Again, if I was good inside the item description, I can no longer pass the name and description back up, okay? Unless we introduce something like Redux, in which case there is a whole different type of data flow, which we're gonna talk about in a later lesson. So with that said now, what we're gonna do is we are going to demonstrate how you can change one of these components to a class-based component. And that is going to show you guys how to use props inside of a class-based component and show you how it's a little bit more complicated to write that. So as I've mentioned previously, functional components are the way forward. However, it's most likely that the codebase is that you're going to be interacting with all ODA. And remember guys class-based components went out longer than functional components. So we need to know both, unfortunately, is just the way it is. So at this point what I'm gonna do is I'm going to refactor this to become a class-based components. That will you get some experience about going from function class-based as well. So at this point, well, I'm gonna do is I'm gonna go ahead and copy this JSX, so I don't lose that for layer. I'm gonna go ahead and get rid of all of this code and I'm going to use my handy little snippets or CC to create a class component. Now inside I'm going to paste back my JSX. So we have everything we started with, but remember, don't actually have access to my props anymore. So how do I use the prompts? So in class-based components is not actually as clear as it may have been before. So firstly, we need to go ahead and say this dot props dot name now. Alright, so again, it's a little bit more abstracted. And even here I need say this dot props, dot description, hit Save. And you can see now we get access to those prompts, right? So you can see this is actually a bit more, there's a bit more code going on. We have the class, we have the extends component, we have a render, and then we have the return book inside of it. Okay, now what you might see in traditional apps is we used to have to write this syntax like so where is it construct a prompts, super props, but we no longer actually need to go ahead and write this. And this is typically where we would go ahead and say this dot state and define our state if we were doing so as we showed you in the previous lesson. Okay, but in the modern react syntax, we don't actually need that, which is quite nice. Okay? And you can see it still works without that. Now a little trick and one of the little top tips I've actually found people do. Now what we can do at this point to clean this up a little bit, if you are stuck with using class-based components, is inside the random block where we can actually have some JSX. We can go ahead and say this. We can go ahead and say const, and we can destructure. So Object D structuring in ES6 function is we can go ahead and say the name and description from this dot props. And what this is doing is going inside of this dot props and it's pulling the name and description. So what we can now do is go to this dot props and get rid of it. So that's another way of cleaning up your code if you're stuck with using a class-based components. But remember guys, you're not going to be stuck. It is always possible to go ahead and translate this entire code right here to a functional component. So with that said guys, I hope this has been useful to show you the differences between a class-based component and a functional component. And hopefully you guys all on my side and you prefer the functional approach because that is the modern approach for many reasons. And the main one being simplicity, is that one, it's a lot more simple. And with that said guys, it's very clear how we can go ahead and write code once, reuse it in several places where the prompts. Now, this doesn't look too great. So in the next lesson, I'm going to show you guys how to add some style to your code and actually style each of your components. And also show you how to level up your react skills by combining components with their own CSS files and watching the magic unfold in front of your eyes. So I hope you guys enjoyed that and I will see you guys in the next lesson. Peace.
10. Styling Components: Yo what is going on, guys, welcome back to another lesson. And in today's lesson, we're going to be talking about how you can style your components inside a React. It's going to be the essential to actually making your app look anywhere near half decent. Okay, so the way that we do this inside of reactors, we like to keep things isolated and we follow something called the single responsibility principle, whereby we want our components to be responsible for as little as possible really. And that includes the styling. So we want now starting to be kind of isolated component, which means that if we update the styling for the product component, then it's only going to be affecting the product styles. And it will impact everything because we reuse that one component in several places. So I'm going to show you two very useful ways that you can do this. The first is going to be using the BEM naming convention. It's the simplest you actually go ahead and implement and you can do it right now. If you are a bit rusty with the BEM naming convention, make sure you go back a few lessons and have a refresh where we talk about the naming convention. The second one that we're going to talk about is CSS modules as a more modern approach to solving this, solving this problem. And I'm going to show you the benefits of a why you should slowly transition from bam into CSS modules because it's going to protect your code from having your classes override one another. Okay, so with that said, let's go ahead and jump in from where we left off. And if you remember, dies previously, we left off with this example. So this have a look at what's going on here. So we previously had three products that were being rendered on the screen. So we were using this product component and what was happening is, is it was rendering on the screen over this side and we had the product being rendered, ones being rendered twice and being rented three times again. And we had different prompts which are being passed to it every time. So you can see we get the name description and the price which is being passed to it. This allows the output of the components on the screen, but this doesn't look very nice. Okay, so how do we stall our components inside a React? And it's actually very simple. Each component is going to have its own dedicated CSS file, and this is the practice that we follow. So if we're going to hop over to our product or JS file, what I'm gonna do is I'm going to create a CSS file called product dot css. And then what I'm gonna do is I'm going to go ahead and import this inside of our components. I'm going to say Import, and then we provide a direct link. So we say in this current directory, I want to go ahead and import product or CSS. Ok, save it. And there you go. Now what this is gonna do is it's going to actually go ahead and pull, pull in any values that we defined over here. So I'm gonna go ahead and split the screen and I would recommend you get into a habit of doing this. So it makes your workflow a lot faster. Because if you can see your style is being applied to the bomb and you have your functional code at the top. It makes a very nice, quick and easy so of workflow and a preview on the left, I would recommend using spectacle if you haven't already checked out to get a nice quick distribution of your screen, like so. Okay, now what we're gonna do is we're going to follow the same naming convention. So inside of the product components, the outer component is going to be product, and then the inner H3 is product price. But what if we wanted to introduce something like an error? Okay? So I'm gonna go ahead and say this, have a H1, H2 above it, which it says an error occurred, right? So an error occurred and we're just going to hard code this for now. I'm going to give it a class name, and I'm going to give this constant name, product. Product on this one is Coursera. Okay, save it. Now what we're gonna do is I'm gonna go ahead and make it so that the component itself first looks beautiful and then I want that product ever to be red. Okay, so firstly, I'm going to target the product itself. So I'm going to say target the product class. So we use a dot to resemble a class selector. I'm going to say is, I'm gonna say we should have a padding of 20 pixels. So let's go ahead and give it some padding of 20 pixels, a margin of 15 pixels. And let's go ahead and say it has a border of one pixel, solid red. Just to be extra drying, I'm going to hit Save. And now you can see that we already had that beautiful hot reloading inside of a React. So you can see a added that nice padding inside at a smaller margin around it. And then we have this nice red border and the beautiful buys you only saw me change code in one place. But because we're reusing a component is going to apply it everywhere, wherever that component is used. So imagine if you used, for example, Amazon where you have product towels everywhere throughout that you don't want to have to change the code and every single place you wanted to change it in one place. And then the component that is used is reused throughout, which means that that style kind of gets passed on throughout the entire application and the changes seen. Now, what the benefit to doing this is that if we want to go ahead and target something inside, what we can do is using the BEM naming convention is extremely simple to target things. So here I can talk at the product dot square error. And that could change the color of the error to be red. And this given a bowed font weights, we're gonna go ahead and say font-weight of Botha. So I'm gonna say as a Buddhist, and then you should see that it's actually turned to a bowed red, which is awesome again. Now I want to talk about something that could happen, right? So what if we gave the class name something like this, okay, So just arrow without the BEM naming convention. Now what would happen is if we had the same H2 inside of our app, right? So imagine we had an error occurred overhead. Okay, but what if I wanted the error inside of a product to look a bit different from the era outside of the products, right? So outside. Now, unfortunately what's going to happen is that if we target the error, error class like such, It's gonna get applied everywhere, right? So if I change this to blue, even though it's inside product dot CSS, because it has the same class name in app.js as well as product of jazz. And we're still going to get hit by that class styling rule. Okay, so we need to somewhat protect against this. So the first natural way of protecting against this is using the berm naming convention because here we say product underscore, underscore error. And now if we do this product and square error, you can see it's only going to target that error. Okay, so if I went back and changes to red, now you can see, okay, perfect. It's only tonguing the ones we want and not the outside because it's only being appended to square. So if you're going to follow them naming convention, then great, you can do that. But what if we want to protect it against the soft smaller mistakes? How do we go ahead and do that? Well, what we can do is actually go ahead and introduce something called CSS modules. Now CSS modules work slightly different and they're more of a modern approach because they fix an issue exactly that day. So I'm gonna go back to running this to error. And then here I'm gonna go ahead and change this to error like such. So now, as we saw before, Everywhere is going to get targeted by this. Okay? So what we're gonna do now is I'm gonna go ahead and add in. So I'm going to modify a product filename, product does CSS file name to product dot module dot CSS. So there's something called CSS modules and we essentially does. The goal here is to protect overlapping class name. So even if we had era in one file and it was used in another file, they shouldn't overlap. They should be isolated inside their own components. This is what Modules allows us to do. So design a product. That module, I'm gonna go and I remember I need to actually go ahead and change my import statements. So now I need to import styles from. And then here I'll say product dot module dot CSS. Right? Now, the way that we actually go ahead and grab this now is, is slightly different. So had our previous code where we said product and error. Now what we do is we simply go ahead and change some JSX here and we say Styles dot-product because we're going to target this. And here we say styles dot era. And it's more of an object oriented approach. So we actually import the default import, which is gonna import these selectors. And then what we do is we say the styles from that file, import products and the stars from the Import arrow. And we can do the same for the price. So here if we wanted to go ahead and say styles, dot price and save. Now what we can do here is we can say price and the price we maybe could say the color is green and hit the Save button and you might need to refresh. And now you can see that the green stars had been applied. And what is amazing about this approach guys, is that we still have error being used, but we don't see that change actually occurring outside of this file. So notice how even though I have era style is being applied inside of the product, the JS class inside of ab.js, it's not getting affected, which means we're essentially protecting our CSS rules from leaking to other files by using CSS modules. Or if we went to go ahead and add styles to app.js, well, we could then do it also is go ahead and say app dot module dot css. And we can do the exact same principle here. We can say error and we can go ahead and say the color of an error here could be perhaps purple. Okay, So just to make it a bit more extreme examples that you guys can see, and I'm going to go back to my app.js and I'm going to import, so I'm going to say import styles from. Import styles, oops, imposed hours from, and I'm gonna go ahead and say app, Module dot CSS. So save. Okay. And now what we can see here is if I go into my app dot module, does CSS refresh and hit Save? What we should actually see is I need to actually firstly changes to the JSX and we need to go ahead and say styles dot era. And now save, we see a purple error. So how does this work and why is it doing this? So we're going to look at a quick look at the React dots. Okay, so here you can see we've got two button error states as we've got an error here, which is inside of a module dot CSS, the same selector, but with a different role inside of a regular CSS file. Now, here what we can see is Even though we imported both, right? If we go ahead and pour the one from module file is going to go ahead and walk and only use that rule. But how does it do that without leaking or different components? And it's very clever actually, what it does is it will actually go ahead and firstly, append the class name that you also are referring to. So in this case, the button module was used for the button class is class name is going to be appended first. Then it goes ahead and appends the actual class name. So in this case, era, right? And then what it does is it gives a unique identifier. So this is where the genius part comes in and this prevents it from overlapping between different files. So firstly, we have a level of protection here where we have different file names being appended fast, and then we have a different unique identify here, which means that it's never going to overlap. Okay, so looking at this in practice, if I go ahead and inspect this right here, what we should know is, is that we actually go ahead and see, even though in our code, what we were doing is styling based on error. All right, Well we did estar based on era, and it was inside of the app CSS file and inside of the product module CSS file. So if I go back here, now we can see it says the product era unique identifier. Alright, so that's going to separate and you can notice how each single one, so if I go into this one, is going to have the same era as this one because it's the same component, right? But notice how the era outside, inside of app.js gets the class name app underscore era with a unique identifier. Okay, so this is going to protect any overlapping class names which are the same name, right? So it's a very, very powerful feature inside of CSS. Now there's a top tip that I want to kinda share with you on this, which is what like what if we even with this level of protection, if Sonny, I want to have a same color being used for errors throughout the app. I still want that protection that module modulo CSS gives us. So CSS actually gives us a really handy tool to do this. And what we can use is something called CSS variables. Okay, so here what I'm gonna do is I'm gonna go to index.js, ESS because this is the highest level and I want the variables to be accessible throughout the entire application, I can define a variable. And then what I'm going to say is for everything inside of this website, I'm going to go ahead and add a variable. I don't want to add the variable and let's go ahead and say Era, Dash, color. And this is the syntax for doing CSS variables. So here I can just write CSS variables as a comment. And here I'm gonna go ahead and say red. Okay, so the area should be red. So if we go ahead and save this, you might wonder, okay, so it hasn't worked yet, right? Well, let's go ahead and make it something that is currently not so so just to show you, so if it's blue right now, Arizona blue yet, alright, so there's nothing's working as we want it yet, but how do we utilize this variable? So y can do is if I can go into my product module and where we have the error color, where I can actually go ahead and say is I can say var to say variable. And what I'm gonna do is I'm just going to show that code down here. So you can see, remember the error code, color is the name of the variable. So here I can say the law and I can pop in the name. And now if I save it, you can see the error states have turn blue because it's using that variable and it's being pulled in, inside it put up don't modulo CSS and we still have that protection, right? So you know, it's how it's still different. Now if I go to app dot module, DO CSS, and I go ahead and change this now to var and then make it the era Kola, boom. Now we have the correct way of implementing it. Okay, so now we have the more preferred standardized approach whereby if I wanted to change my error color, now I can go ahead and change it to red and it gets applied everywhere. Remember we still have that additional level of protection where overlapping class names aren't going to be a problem. Now you might be wondering, Yeah, sure. So anyway, if I stick to bamboo, so I'm going to break anything inside of my app. Now guys, remember, what if you have your app scales, you now have ten developers on a team working on the code base. And seven and the developers follow the same naming convention perfectly. But then the other three, maybe more junior, don't actually follow the naming convention as they should. Now, if we simply had modules, this issue would never exist because it's going to append that unique identifier. But if we don't have modules, we can come into that issue where the class name could overlap into their different class, into a different file or a different component. And you're going to have class names which are going to be acting on unexpectedly because you'll, rules are essentially leaking outside of their components. Okay, So I hope that has helped you out with styling your React components. And next lesson, we are actually going to be moving over to talk about component lifecycle methods and how React chooses when and how to re-render components on the website. Okay, so we're gonna talk about class-based components and functional components, especially the use of fact hook and wanted to want all of this powerful functionality that it provides by knowing how to mess around with that solo kind of stuff, right? So with that said guys, I hope you enjoyed this and I will see you guys in the next lesson. Peace.
11. Creating Our First Input Form: Welcome to the next lesson guys. Today we're gonna be talking about creating your first input form with React. Now we're going to use state to achieve this, the Cielo tricks in this tutorial without further ado, let's jump straight in from where we left off last time, Lascaux, right? So in the previous tutorial guys, we left off with our app and here we had our application which had 81 had allowed, and it simply had three products to its name, right? So this was very simple. This is where we left off last time. So what we wanna do is when are actually going to need these products? In this demonstration, we're gonna get rid of those. We're going to get rid of the important line over there. We're going to keep the product class inside the code for now. It's not gonna do any damage for now. All right, so first thing we're gonna do is actually create our input. Okay, So here we're going to have an input tag. So relatively simple input tag. And then we're going to have a button which would resemble something like this. Go ahead and say Add Todo. Okay, so it's tick enzyme. And you can see now we have our Hello World. I'll add to-do. And to make this actually very contextual, we're gonna do is we're going change hello world to welcome to my to-do list. So that's pretty clear, right? Well, welcome to my to-do list. So now this is going to be, you guessed it, it's going to be a to do list up. And you can imagine what we're gonna do is they NGO is we're going to actually type in and then we want to have it. So I want to click Add Todo. It will add to a list of to-dos. Okay, so the first problem that we have to solve is where is our list of to-dos going to be, right, where they were simply going to be. So let's go ahead and create a piece of state. So hey, we're gonna say const, and we're gonna go ahead and say this, call it the to-dos. And then whenever we use US state hook, we have to go ahead and use the convention, or we should use the convention set to do is which is also a function. And we're going to say US state. And then for the default value, we're gonna give it an empty array because it's going to be an empty array to begin with. Okay, now we do need to import, so let's go ahead and do the appropriate EMBL. If it does this, sometimes I recommend placing it on the same line. Sometimes you get that right. So now we have our state, which is going to hold the to-dos inside of our app, right? So the first thing I wanna do is I want to render this dues to, render the to-dos, but after the buttons. Okay, so we're gonna have H2 saying, let's just say list of to-dos. There we go. And of course we'll make this a little bit nicer in a sec. But what we're actually gonna do is we're going to get the to-dos and we're going to map, right? So map in E is an ES6. So iteration function, which means it's going to map through, it's going to go through every single to-do. And each time it does it, we're gonna get the to-do itself. So the one that we're looping through and we're gonna do a direct return. You include the parentheses directly, it means return directly like this, right? If you wanted additional code, you can add curly braces and then have a return, like so. But in this case we're not going to have an any additional codes. We are going to directly return some JSX. So here what I wanna do is actually wanna return a simple P tag with the to-do itself. Okay, So this will be the to-do itself. Now let's give this a test to show you how this works. So imagine initially we have a list of empty to-dos. So imagine I went in here and I will go ahead and add a text string and say, take the dogs for a walk. So take the dog out for a walk. Save it. You can see it comes up right? And now I can do is I can also go ahead and enter another one and just say take the trash out, take the trash groups, take the trash out, Save. Now you can see it maps through each one, returns a p tag with the to-do inside. So that's how a map function once. Okay, so now we've got the base up. So what we're going to actually do is we're going to implement this so that we can actually write some texts, hit the Undo button and it should pop in as a to-do inside about to do this that, okay, cool. So how do we do that? We actually need to create a piece of state to track what the user types in. Okay, So as the user types in a value here, we need to have that value inside the code so that we can go ahead and add it to our to-dos piece of state. So to do that, what we're gonna do, we're gonna create a piece of state which is going to capture the input contents, right? So this is actually going to be the input contents that as we type here. So I'm going to say input set MBA, which is the standard that we're going to follow. We're going to use state. And initially it's going to be a default empty value. Okay? So we've created a piece of steak would MBA. Now we need to connect it. So when I talk about connecting, I'm talking about connecting this input field to this input over here, right? So we're talking about input filled on a connect this to the piece of state that I just created overhead. Okay, so now what we need to do, there's a few steps. The first one is mean, say value equals input. So we're simply saying the value of this input field is equal to this. And, but now remember, we assign the initial value of a blank shrinks. So now look what happens. If I go over to the input foot and try and type in, I'm hitting the keyboard as fast as I can and nothing is happening because is stuck to the value of input, which is an empty piece of string. All right, so what we actually need to do is after we do an initial set where the value, we need to add an on change listener. Okay? Now an unchanged does something pretty cool. So I mean, as the user types in it will fire off an event every single time the user hits the key, right? So that will fire off an event. So here we can call that E for shorthand. We're gonna do an arrow function here. And we're going to go ahead and say set the input, right? So every single time the user types in, I want to update the piece of state, the input that we have inside of the React app. And I'm gonna do E dot target dot value. Now you don't target HDL value is essentially saying, go ahead and get the event. So the event came from this input field to the user's typing in. The target is the actual HTML attribute, which is this input field, and then the value is whatever the user typed in. So now what's happening? If I save this as I type in ABC? What's actually happening is it's updating and it's setting the input in our app is updating the input value. So now I have a value that I can reference and do something with it, right? So for this button, one we're gonna do is I'm going to have an onclick, okay, so I'm gonna have an onclick. When we hit this on tape plan, I'm gonna do the following. I'm gonna say const, and I'm going to create a function called add Todo. Now this function, by default, every onclick carries an event with him, but we'll use that in just a sec. And then what I'm gonna do is when I click the button, them seem to get a trigger that function. So add to-do, go to test everything what I'm gonna do a console log. So I'm gonna say console log. And then I'm going to just say this is the input, this is the input. And we're actually going to use backticks. Yeah, because we want to do a little bit of string interpolation. And what I'll say is input. So now what we should do is if we open up the terminal, and so we go inspect, open up the console are now here. If I type in ABC and to do this is the input ABC. Also, that's really good. If you got to this point without any errors. If you did, go ahead figure out the error is Austin community and then carry on. But at this point we got this is the input ABC. Okay? So now what we can do is because we have a value, we can use that value to now push into the to-dos array. So here I can say set the todos, todos. And here we're gonna do some ES6 and call ES6 stuff, right? So we're gonna say, say it to an array, okay? But what we're gonna do is we're gonna say keep all of the to-dos that we currently have. And how do we do that? We use something in ES6 code, the to-dos, we call it the spread opera. So we're gonna say spread out, what are the current Todo? So if those five to-dos in here, it would just simply spread them out and hit is what the three dots resembles, its spreading the array. And then what we're gonna do is we're going to append our to-do at the end, which is the input. Okay, So this is actually gonna go ahead and set the todos to wire the current todos this had plus the input. Now if you want to append at the beginning of the list, you can do the following because the input to do is like so. But it seems natural to do it at the end for now. Okay, so we're gonna go ahead and hit Save. And now if I say, take dogs for a walk and I hit Add, Todo, boom, we've got take dogs out for a walk. If I go ahead and say take the trash out to do boom, works, right? So that's really nice and clean. So now what we wanna do is it would be cool to actually go ahead and have the input arrays every time we do it. So to do that, all we need to do is go ahead and say set the input to be an empty string. And now if I go ahead and say, let's go ahead and say paint the walls. And I hit Add to do Nice. Now the input even actually clears the input photon is, this is a really nice user experience, but the final finishing touches here, how cool would it be if I could do it like this? If I could say, let's say take the car out for a spin. So take the car out for a spin. And if I hit the Enter key, oh, it's not working, right? This is strange. This is what we usually expect in the app. When I hit Enter, it should add it to do to my to-do list, right? Instead I have to click Add to do which works, but it's not the best user experience. So here's a nifty little trick that you can do when you're handling this stuff. Here, what you can say is whenever you, you've got the input and the button here. So there's a nice little trick that you can do. The nominee people actually know about, hey, you can say form. You want to wrap the contents so the input and the button inside of a form. So that's the first step. Now what you want to see is your button. You need to go ahead and add a HTML attribute called submit. This means that the submit is going to get assigned. So when you hit Enter on the keyboard, this summit is going to get assigned to this activity bonds. Now if I type in ABC and hit Enter, did you see what happened? If we look really quick at what happened if I do ABC, I hit Enter. It, actually added it, but then it refreshed. And that is because previously when we use languages such as PHP, what would happen is it would execute a script, go to a different webpage, and then perform some redirect or something like that, which is why typically we have a page refresh however him react. We don't like refreshes. So what we can do is the Add Todo carries an event like we've seen overhead. Well, we can now say is E dot prevent default. Okay? And we can get rid of this console log now to keep the code clean. But either prevent default. Now this over here, this prevents a refresh, right? And that's, that's something that is crucial, especially when we're dealing with state which is non-persistent, which means when we refresh, it will go ahead and remove the contents of the to-do. So now what we can do is we can say, take the dogs out. So let's go ahead and zoom in. So you can see this. Take the dogs out and I hit Enter effect. Nice. And then let's go ahead and close that so we can say paint the walls and okay, nice, complete, complete the React Basics module. And a, That's nice. That's awesome. It's walking. So this is the first thing that you're going to actually have to identify whenever you want to go ahead and, you know, kinda build that user experience. You have to remember the user's experience has to be natural. So let's talk about what we went over in today's essence. Before we wrap up, we talked about preparing a piece of state to keep track of what the user types in the input file. And that's crucial. That's step one. All right, We then restructured the code so that we had a list of to-dos that was going to list out each of the to-dos as a p tag. That was very simple to do once we understand how to use an array in state. And now the key to getting the form working and to having our own first input inside of React is we had the input and the button. We had an onclick which is triggered when we click the Add Todo bond. However, when we wrapped inside of a form and when we gave type submit, it then got triggered when I hit the Enter key inside of the input phone. So if we add two input fields, even depending on if I was on the first or second one, soon as I hit the Enter key is going to trigger the Add Todo onclick function. So it's a very, very nice little trick to add to your codebase. And it's gonna make your user experience really, really clean, really, really nice. I hope you found that useful Guys. That was actually a nice introduction into creating our first input field. And we're actually going to be talking about some others or libraries that you can use in future lessons to control more complicated in both forms with more fields and so forth. There is one that uses an extensive react Cook Library, which is very, very cool. And I actually used the inside of the Gmail cloud. I use this, I can see you can go ahead and check that one out. You want to sneak peek and how to do that. But as always guys, I hope you enjoyed this lesson and the next lesson is going to be talking about the rules of hooks. So whenever we use hooks inside of our React app, we must obey the rules. As it's how I reacted does it's kind of a wizardry under the hood, is how you keep your reactant running smooth. So I will see you in the next lesson, these guys and enjoy.
12. Rules of Hooks: What's going on, guys, welcome back to another lesson today. I'm going to be talking about the rules of hooks. Right now. What the heck are hooks? Y0 hooks, so damn useful, right? And there are a few rules that we need to use. O need to remember when using hooks, and these come under the rules of hooks. Now two rules that we need to remember and account for whenever we use hooks like the US effect or the US, they hook and they're very, very important to ensure that react functions correctly when we're using these powerful features known as hoax. Okay, So firstly, before we jump in, I want to show you a little handy website could use hooks. Now here is a basically a website of recipes. So then React hook recipes. And if you didn't know, you can actually create your own React Hooks. So here you have a bunch of different hooks available to use that people have created and they are there constant being added and tweaked. So I'd recommend giving this a read and checkout after this lesson. So that's use hooks.com and that's going to help you out a bunch. All right, so before we get started, I want to inform you guys what is possible with hooks. Ok. So previously we talked about hooks and we talked about how we can use US state hook to actually incorporate state inside a functional component. Now, before when react was born, let's say you only had class-based components. Class-based components allowed us to have state inside of a component which is very powerful. Remember in the previous lesson when we talked about how state is like the memory of a component. And when you refresh is non persistent, it disappears. Now previously the only reason why we didn't use functional components is because we can have state inside of a functional component. And we couldn't actually use things like the lifecycle methods, which only existed inside of a class-based components. But React Hooks games to save the day. And now we have the US State hook for state functionality inside of a functional component. And we have the US effect hook to replace all of the life-cycle functions inside of a class-based components. So without further ado, let's jump into the code and I'm going to explain and break down the two rules that you must follow whenever you use hooks. So let's jump into the rules of hooks is called quiet cool name to it. So the first rule of hooks only call hooks US state and use effect as examples, only cool them at the top level. What do we mean by this, right? So I've got a few examples down here. So we've got three examples overhead. And the first one that we talked about as only call the hook at the top level. And now what do we mean by the top level? So here is an example of cooling a correct hook. Okay, So you said the top level, we have our function app. This is a functional component. And the top level we have the US State cohere we have used here, and then we have another one here, use date which just generates a random number between 0. That's going to come in handy in just a sec. Now, what does it mean to define this at the top level? So for example, if we were going to define this at any level, which is not the top-level, whether or not it is inside of a loop, a condition, or a nested function. It would break the something known as the COO order. So what we need to remember is whenever we use hooks inside of react, the way that react does it under the hood is essentially carries a court order and it has an order in which it calls the hooks. Now, it doesn't matter if we swap this around with this. That's not the order I'm talking about. Well, I'm actually referring to, so for example, we should not call hooks inside of loops conditions on nested functions. Okay, so the first example over here, this will break the corridor and they're CY, right? So we have a random number inside of our state, okay, so every time we, the page re-renders, get a random number generated. Okay? So what will happen is on the first render that say this number was 35, okay, so the first number was 35. And then here we have a conditional, right? So we're already breaking that the overall shouldn't be using conditional with a US state inside of it. So here we're saying if the random number is greater than 50, then we have a variable code test. Right? Now, think about what happens with here. If the number was 35 on the first render, right, it's going to not be executed. So this is not going to get executed, right? And then we have a huge effect afterwards. So let's think of it this way. Okay, let's give this an order. So they say that this order imaginary array of like, imagine when the program executes, it executes in the sand naught. Okay, So let's just say that this was the first element to render. So this one would be the first element. This one would be the second element. This one would be the third element to get code. And then we go down here. And at this one could potentially be the fourth element. This one could potentially be the fifth element. This one could potentially be the sixth element, and this one could potentially be the seventh element. Okay, So these are all the hooks that are getting triggered off. Okay? So you can see we've got a particular order that gets followed again. 123 are never going to change, okay, so even if we swap them around, it's fine because they always will remain in that consistent order. But let's look at number four, right? Four sometimes would get skipped. Okay? So think about it. If this, if a re-render occurs and this random number between 0 is greater than 50, it will get called because if the number is greater than 50, then this line of code gets reached. That means everything kind of proceeds as normal. But if for any reason it goes below 50, it won't get cold, which means that this technically would never get executed. So the first time that it's called this value, Let's say it was 55, would go ahead and get a, will get code. So it would have a predictable cool stack, also would think it would have a predictable cool stacks that way the next time it wouldn't think that number four in the coal order is going to be this. And that's how React is clever. It remembers how to rerender things. So the next time, imagine that the number wasn't greater than 50. Now, it thinks it's going to be executing this, but instead, it could potentially be executing that, say, this one, right? So it could potentially being executed first one, and this one it thinks is number 4, but instead it's number five. Now this break's react, right? So what we need in React is a predictable call order. So here you can see it's 1, 2, 3, and that's always going to stay as 123. But you can see here we have number four. Now number 4 isn't predictable. Why is it not predictable? Because sometimes random number could be greater than 50, sometimes it might be less than 50. And every time we re-render, it's going to get a different value. So this is a bit hard to sort of say React can actually predict. This is how React Hooks functions. And without this function, without this predictability, it breaks the entire flow of how React works. So we cannot do this, we are not allowed to have this. So how do we fix this? We essentially go ahead and we remove this. So firstly went on to have, if we're defining state, it should always be at the top level. So now this one is actually a valid cool. Okay, so we fixed this one. So this is now a valid code. Now for the second one, conditional, if we have a huge effect, I use effect is simply a piece of code which can get triggered off at various lifecycles of the component, which we'll explain in the next lesson. And we have a huge effect, then essentially if we have any conditional, it must go inside of the US effect itself. So you can have a conditional band has to go inside. Here. What we would actually want to do is have the US effect in the side and get rid of the rest of it. So you can see now, this is okay. All right, so this is actually okay to have this because what's going to happen is, regardless of what happens, this is always going to be number 5, right? This huge effect will always be number 5, right? So now you can see we have 1, 2, 3, 4, 5, and everything is going to remain in its position. There's no conditional. Maybe this is number 4, maybe this is number 5. And react needs this guarantee to make sure that it works well with these hooks. Quick little tip. It's recommended that you use a lintel plug-in. So it's ES lint plug-in React Hooks. By default, if you use Create React app, this is already installed and it will do is if you ever have an error like one of these roles being broken. So let's go ahead and save where we've got a rule broken over here. React to actually freak out and they will explain it was a React hook use effect is caught in a function testing, which is neither a React function component or a custom function. So if I go ahead and break one of the previous ones. So let's go ahead and have this one, for example, in a conditional block. So even if we had a very simple conditional block and we save it. And now you can see React hook, you state is called conditionally React Hooks must be cooled in the exact same order in every component render. And you can see here it says rules of hooks. Rules of hooks. This is actually a rule which will actually catch out in a lot of things. So if you have used Create React app, chances are that the compiler will scream at you if you get this wrong. So don't be afraid of like will I miss it when I miss it? It's just something that is very important to know about, right? So the next one we are talking about is the bad example, which is no nested function. So here we have a, remember we wanna talk about having it on the top level, right? So here where we've got a nested function. If you want to have a nested function, you're not allowed to have a huge effect inside if you can have a function inside of the US effect. So if you wanted to execute a function inside of the US effect, you can definitely do that. So I can go here and actually change this to have a inner cool. So we can have an inner function, which ones here, like such. And then you can basically call your testing function inside. So this would have scope only inside of the US effect, but the example would walk. So now that this would actually be a valid function, okay, So this would be number six and this one would work as expected. Okay, so what we can say here is that now we've corrected number 6 and number 7 was a working example. Okay, So this was the first thing that we talked about. It has to be at the top level and you see what we actually did that. We got everything to the top level. So you see, by fixing those issues, everything is now it's top-level. So I'm going to do at this point is explain the second rule. Okay, so you're not allowed to cool hooks from regular JavaScript functions. So that was actually the final example, this one over here. So you can only call React Hooks from a functional component or from a custom hook. Okay, so custom hooks will be addressed in an upcoming lesson. But here we can actually see we have a React functional component. And at the top here we have the US State core and we have a huge effect here, for example, all of this as being caught inside of a React functional component. However, we cannot remember the example we just demonstrated before. We cannot have a, let me do it as separate one down here. We cannot have a function. For example, let's call this bad function. We have a function. So let's actually do the old school way. We'll say function. And then we kind of have a function and then have a user fact or a US state coincide of there. So let's just have a blank US effect here and we just say console.log test. And let's see what happens here. So you see on line 48 found it. And it says react to use effect is called NA function, bad function, which is neither a React functional component or a customer react function. Okay, but if I was to go ahead and extract this out so it's at the top level and get rid of this function. We can now see the app works, right? So we are obeying by the rules of, the rules of hooks, and this is extremely important. This is extremely simplified with the help of the lint up plugin, which by default is installed, you have racked up, but if you go into a workplace and they don't have this installed, which is in, which is the case for a lot of companies, especially some that I have walked out then a that a at the plugin to make sure that this issue is addressed or be simply go ahead and make sure that you have these two rules in mind when you go ahead and create your React Hooks. Because it will, if you just continue to try and use the app, it will cause unexpected bugs. Now something to read on this page that I would recommend go to the React Dogs straight off this lesson. Go ahead and check out their rules of hooks. And I want you guys to go ahead and give this a thorough read. Okay, So this is a very interesting read. If you need to install the plug-in, you can do the MPM install or Yon add. Yes, then plugging in React Hooks, dash, dash, save, dev because it's a, it's a development dependency. And you can see I added to ESPN, but again, if you've used Create React app, this by default is going to get included. You wanna make sure you don't do it if you've already got that. And then what they've got is a bunch of explanations that you can use. This is actually a very clear explanation, but the main point here is to show that the first render. And so imagine we have four different cools. A US state use effect, you stay in the US effect. The first render for the component is going to be identical to the second window, so everything is fine. But then what they show is, they show if we were to go ahead and have a conditional piece of logic inside, then it would go ahead and skip the second hook, and then you see it breaks the cord S. And now it thinks that this one is two and this one is three. When in reality this one was three and this one was four. And that would cause some unexpected issues to happen because you've got dependencies. For example, a variable may be used in the next cool. Yeah, and that's going to break the current flow. Now, let's think about this one more time. I just want to go ahead and explain this so it's crystal, crystal clear. So imagine we had const name and we had set name equals uses stay. So let's go ahead and say you say, and then imagine this name was sunny. Ok? And now imagine we had another variable called student. And we said set student and the US day. And because hooks are simply functions, or you can do here is you can actually initialize one with another one because there is a certain chord that to this, okay, So this is actually completely valid, so this won't error out. So if we go here and we go over to our plugin, so let's go ahead and check on app. And now what we can see is you see that there's no era, everything seems fine. And what, what we can do, however, is if we went ahead and introduced an example where we can say if, and that's just a if there was some form of conditional and even if it was true, right? So it doesn't matter, I'm just doing a very dummy simplified explanation here. But if we were to put a, a conditional, I now think about what would happen. You see there's a strikethrough own name. All right, because name is conditioned the Met, which means they may not get hit. So if we save it, react immediately says, Oh no, you're breaking the rules of hooks. Again, it fails on a restricted global level. So that's actually a sort of like basic level because this variable is, hasn't got scope. And two, it's actually going to break because this may never get cooled. Okay, so it breaks the rules of hooks. So that's another way of simplifying it. But these are the two important roles that we must abide by when we're using hooks. So that's go over those one more time. We have only cool hooks such as US state use effect as examples at the top level. Okay, so at the top level, like we have here. So this means that you don't want to go ahead and cool hooks inside of loops conditions, all nested functions. Always use them at the top levels of view react function. By following the rule, you are ensuring that you are cooling the different reactants in the same order every single time a re-render a cause. By following this rule, you are going to ensure that everything is going to be in the same order or the same quarter every time the component re-renders. That's very, very important, okay? And that allows a reactive to correctly preserve its state in-between those use they and use effect cause. So you see like the example that I just showed you before allows it to correctly preserve the state between the close. Okay, So that's extremely, extremely important. Again, the 5 second rule that we spoke about is don't cool hooks from regular JavaScript functions, okay, So you don't want to call hooks from regular JavaScript functions. They either have to be a React functional components such as this one or for my custom hook, which we're going to build our self in the upcoming lessons. I hope you're excited for that. Okay, So this was the rules of hooks. It's a little bit tricky. But the benefit here is that you actually have a beautiful plugin which is going to spot the error is for you. However, it's just very important to know because it gives you that extra understanding who react you may never understand elsewhere. And also when you go into a production environment and if they if they didn't have the plug-in installed, you would run into unexpected errors. So it's very, very important that you understand and get a good foundation. We always talk about having a good foundation. Again, this is no exception. You should understand the rules of hooks if you're going to use them. All right, With great power comes great responsibility guys. That's the end of this lesson, guys, I hope you found that useful. And in the next lesson we're going to be talking about how you can go ahead and learn the US effect hooks that you saw it being used in this example today, we're going to dive into that next lesson and the use of fact two kids, so damn powerful because it replaces all of the class lifecycle methods that we see in class-based components and allows us to do the same thing, but in a much simpler fashion in functional components. And it's the one reason why now we can actually replace everything with functional components. It may seem tricky at the beginning, but we're going to break it down and we're going to get that together. So I will see you guys in the next lesson and until then guys enjoy your day and peace.
13. The UseEffect Hook: Joe is going on guys, welcome back to another lesson. And today we're going to be talking about the US effect hook. Now, what is the US effect took on? Why is it so important? It's actually one of the core fundamentals when we're using React, we have to understand how to use a user fact token. We have to know why it's so powerful and the different use cases of when we might need to use it. Now what does it use effect do a US effect Hooke simply allows us to perform side-effects on a functional component. Now, you might be wondering that sounds pretty cool, but I have no idea what it really means again, now in a class-based component, you used to have Azure functions called lifecycle methods. Okay, So these were things like component did mount, component, did unmanned component will update and so forth. And what this what this meant was that whenever the component would sort of reach a lifecycle point, for example, when it mounts, when it's about to render, when it's about to rerender, what happens before the rerender? So when a unmanned, what happens when it receives new props? All of these things you could tap into an execute a piece of code based on those lifecycle functions. Now, previously you couldn't do this in functional components. And as we know, the whole code base is shifting to functional components, functional programming. So with that said, the guys over react introduced the US effect hook. Now the user Factbook literally replaces every single one of those lifecycle functions or methods I explained in just a second ago. Now, we're going to explain all of the different use cases. We're going to break it down. We're going to make it super simple. Get ready, buckle up, get a coffee SCO, and jump into the code without further ado. So what we're going to be doing here is essentially showing you how we have the same components. So this is a functional component. This is a class-based component that resembles the same app. And essentially what we have at the bottom is with a minor difference of an input field, we have a render block over here, so we have the user factor with the window width for an example in just a sec. And over here we have the same example where we basically go ahead and show the window width, but we simply have an input for demonstration, which I'm going to show you in just a sec. Okay. So with that said guys, what I'm going to show you is previously in class-based components. This is how you would go ahead and tap into those lifecycle functions I spoke about. Okay. So we had functions like this, right? Component did mount component, did update component will unmapped. Now that what some additional lifecycle functions, however, these are three of the most used ones. Okay? The first one, what does that resemble? It resembles when the component mounts. Okay, so it's a lifecycle function well, so that we can call a piece of code when the component mounts. For example, in this case, we can just console log the app component loaded right now this is very important because imagine you wanted to request something from a database you could do at this point. Now we also want to run a another piece of code whenever the component updates. So this is where component did up that used to come in. However, this would run whenever you would basically get a change in props. This became a bit tricky when you're using this lifecycle functions. So the user effect does simplify this and we're gonna go over that in just a sec. The final one I want to talk about is the component will unmount. Now component will unmount is, as it sounds before, the components about to rerender, It's a Unbounce first, right? So the lifecycle that you have to expect is that whenever a, whenever the page loads, the component renders onto the page. And then the user might interact with the page which may trigger a re-render. But before the page basically repaints, think of it that way. It unmount that component and then it puts it back on the page, right? So it has to first mountain the component onto the page. So that way we see it, then it's going to receive some kind of interaction will change and that's going to cause it to unmount the component and then rebound a again, and that's what we see as an update. So that's how we get this interactivity or dynamic behavior with React. So we can actually tap into the appointment I unmatched with the component will unmanned function. Okay? So these are the three sort of crucial lifecycle functions I want you to focus on. Now in functional components, it's actually very simple, right? So once you understand that the user effect hook, so this one right here, the effect took essentially replaces every single lifecycle function that you may run into. Okay? So the question is not if it is capable of doing so, it is capable of doing so. You have any sort of concerns and you think, I could do this in a class-based component by can't do any functional, then, believe me, you can do it in a functional component. You do everything inside of a functional component. Now with our handy friend, the US effect, okay, so let's go through a couple of different variations on what you would use them for and how they compare to the class-based methods that we just spoke about, Gamma. So we're gonna go ahead and remove our current drawings. The first one is we have the user fact for triggering on every render. Okay, so firstly, let's understand how we weren't a huge effect to it. So firstly, you're going to have to employ it from react. That's the first typical step. And then what you're gonna do is type in US effect. Okay, now use effect takes in some arguments. The first argument is actually a function, okay? So it isn't as an arrow function. And the second one is optional. So you don't have to include the second one. And there are reasons for when you want to include it in their reasons for when you don't want to include it. And this changes the behavior or the point at which we're tapping into it. So the different last cycle functions on all points in the component cycle that I talked about earlier. This will change that behavior based on the second argument. So here we can pass in something called a dependency list, right? So there's a dependency array. And simply if we leave it blank, it doesn't sound behavior. If we put in a variable it has a certain behavior. And if we leave it blank without any sort of option that it has a different behavior. So I'm going to run through all of those right now, but this is essentially how we write it. So the first example that I want to talk about is on every render, Okay? So if we don't include that second argument, for example, like so, then what we're gonna do is I'm going to make this a little bit simpler. Let's just go ahead and say console.log. I re rendered, right, so this will trigger off every single time that component re-renders. So imagine we had an input field, you type in it, it's going to cause a re-render. So this will go ahead and the effect. So let's go ahead and go to our component. It's just type some stuff inside of here. So I'm gonna go ahead and comment out my previous console logs that we know that it's coming from this one. So let's go ahead and refresh. And now we can see I re-rendered. And if I type in a bunch of times, you can see every single time I type was some kind of re-rendering happens. It goes ahead and reflects on the page. Okay, So this is what is happening here. Now, this is how we go ahead and tack into that point in the component lifecycle. So this allows us to have this power on every single render. However, this could be quite expensive. We don't always need that. Sometimes we only need to go ahead and render something on the mount. For example, the component did mount method over here. The component did mount method over here. We need a way of replacing that and that is over here. So as you can see overhead, this huge effect, Cool. What is the difference between this one and this one? So this one you can see has the dependency array inside of it, right? But it has nothing inside the dependency or where and what that tells you react is only run this on the first render, right? So only one at when the component mounts and after that, if there is subsequent re-renders, don't run that code, right? So it's only when the component mounts, and it's only when the component mounts the first time. So essentially this right here, by including this empty array dependency test, we'll go ahead and replace Is component did mount. Okay, so let's go ahead and see that in action. So I'm gonna go ahead and say here, console log. And we're going to keep this one for every single rear NDA. And here I'm going to say, let's just say the component, the component mounted. Okay? So now if we go ahead and come back and refresh, it says the component mounted and obviously that triggers is a rerender as well. But look what happens, guys. If I go ahead and type the eye rear-ended should fire off. The component mounted should not fire off. So let's go ahead and type in. Perfect. You guys see that the I re-rendered gets fired up with the component mounted, did exactly as we expected. It. It did not fire off again, so that's perfect. And what that will essentially allow us to do is go ahead and replace this lovely snippet over here called the component did mount. So we don't actually need this complexity anymore now the US effect can do that, right? So really, really nice stuff. Now, let's move over to the second bit where we're going to talk about the component did update placement, okay, So the component that update previously only got triggered if the prompts changed. However, we might want a bit more granular soil of control over this aspect, right? So what we can do is we can actually replace this with the US effect. But this time we go ahead and we simply include a variable inside of the dependency array. Now this is a array which means you can include one or as many variables as you want in that at anytime any of those variables changes, it will trigger off this code. Now you can see what we can do is we can include prompts in here. We can also include pieces of state. We conclude anything that we want to go ahead and trigger there your NDA for. This makes it essentially a lot clearer because before, when we saw component did update, it wasn't always clear that I re-render was about to happen or not. Okay, So this makes it essentially very, very clear in knowing when that piece of code is going to get triggered. Now, a rule of thumb is that imagine we did not go ahead and include the dependency. However, here we want to say the name changed, right? So we only want to trigger this off when the name change. If I go ahead and save this and I opened up my compiler, you're going to actually see that it warns us because hang on. You have a dependency in here. Your code is dependent on the name variable, but you haven't included the name variable as a dependency inside of that dependency array. So if you go ahead and check your compiler who actually warn you of this, you'll say React hook US effect has a missing dependency name. Either include it over move with the dependency array. Now if we remove it, it's gonna go ahead and trigger on every rerender which isn't optimal. So we need to go ahead and pop in the variable that it's dependent on. So I hope that makes sense. And imagine we had different ones. Imagine we had another variable called age, for example. Then you would also need to go ahead and include it. So that way this code. Reflects delay test values as it's dependent on these two variables. Okay, so whatever variables you use inside of here, whether it's prompts, pieces of stay, they have to go inside of this right now if we go ahead and get rid of the age because we didn't define a variable, so it would error out. So let's go ahead and do that. And you should see a green o compiles successfully message. And that's perfect, right? So with that said, this one over here. So this overhead is going to be responsible for replacing the component did update lifecycle method. And it works perfectly guys, it really, really does. And it makes your code-based much simpler because you look at the US affecting, you know that this code is only going to get fired off when the name variable changes. Now something to remember. You can see here it also runs on the first render, okay, so every single US effect always fires on the first render, right? So when the component mounts, this is just a rule of thumb. We must understand this. It always will find it once when the component loads. Okay, so even if we go back here and you guys can read the React Dogs to make to understand why that happens. But I can go ahead and refresh and you see the name changed, right? And if as soon as I start typing in, right, so in this input folder at the bottom I have an example where I'm just essentially changing the name variable via a setName and we're mapping it to the name. So this go ahead and change the name input. So he says enter a name. So if I say sunny, so as soon as I type in, every single time I type in, it really triggers that code. And you see it says the name changed. Our rerender code, which was in the other use effect gets triggered off. And also the one that we just explained now that will get fired off to right. So I hope that makes lot of sense. And that is where we go ahead and essentially replace the component did update lifecycle method. Now the final example, and this is probably the one that will, may take a few moments to get your head around is the component will unmount lifecycle function again. So how do we replace this with a huge effect? Now, a US effect allows us to have something called a cleanup function. Okay? So in every single user access, use this one for an example, what we can do is we can actually return a function from the US effect again. And what this will do is it's known as the clean up function again. Now what this means is before essentially re-renders. So before, imagine I'm typing into the input vote every single time I type in it re-renders, right? But before it does that, you actually quickly unmount the component so that I can re-render another one in its place where and why it happens so quick, they looks dynamic in front of us. But why actually, what we can do here is we can actually go ahead and unmount something. So in this case, let's go ahead and demonstrate before the name changes this, go ahead and say we unmounted, right? So let's go ahead and do this and save. And then what we can do is, and this is actually very powerful because they're all going to be cases where, for example, you make a connection to a database. And every single time the component re-renders, you don't want to keep making the connection. Instead you have to do a clean up. You have to disconnect the current connection and then reconnect, or it would even be bad to only do it on the first render, right? So this is where you have to think about these things. Didn't know which use effect or which implementation to use. But let's check this out in action again. So I'm going to go ahead and refresh, and let's go ahead and say type in sunny. See look what happens guys. It unmounted, it re-rendered and the name changed. And here if I go ahead and type in sunny as such, you can see it happened a bunch of times and name change. We unmounted, I rear-ended the name changed. And then if I go ahead and type in again, we are mounted, it re-rendered and the name changed, right. So you see what happens if it has to unmount first, then it goes ahead and updates the name again. So this is called the clean up function. I've got a really cool example of how we can show you this one. So what we've done here is I've created a little helper function called const update window width. Okay, now, bear with me for a sec. At the top we've initialized a variable inside of our state called window width. Okay? Now what we've done here is essentially we set the initial value with the window in a width property. Okay, So this will actually just return a value which tells us how wide the width of the screen is, okay? And what we've done here is on the first render. So obviously, Hey, what we're saying is on the first render, but I'm going to show you something for us. We're gonna sound every single rerender. I want to add the event listener so that when the user resizes, I update the window width. And this is a function which simply goes ahead and sets the window width to the new window. Okay? So every single time it will do that. But let's not have a cleanup function and I'll show you what happens. Okay, so I'm gonna go ahead and comment this out. Now what we can actually do at this point is I'll cut this out. And I'll show you the sort of implications if you do this without correctly cleaning up. So what we're going to see now is this should actually reflect on the screen. But what we're going to see now is if we go ahead and refresh, you see here it says the window width is for 66. So if I go ahead and move it around, you can see it's re-rendering and this is changing value, okay? So I'll use effect is working here. It's actually triggering off to update that window value. However, what we're not seeing here is that every single time it triggers that rerender, It's adding an event listener to the resize action with the update window width function. Okay, so that's actually quite expensive. Though we might not see any harm in it works perfectly well. We can actually do, is we can run a piece of code inside of our console called event listeners for window inside a parentheses. And you can see you look, it has a 113 listeners. And if I go ahead and drag this around a few more times and I run it, it's going to have another a 146 because he rear-ended that it three more times after that. Right. And if we do it again, you can see like I'm just gonna go crazy now. And then this go ahead and do it again and move on another 50 re-renders. So you can see an ice added another 50 resize listeners. This is not ideal and it can extremely impact your performance of your React app. Okay, so I'm gonna go ahead and refresh and you can see just to prove to you, they starts off with one. We do this a bunch of times and you can see, for example, 24 re-renders layer. We now have 26 inside of our resize this notice which is not ideal. So there's two ways of fixing this. The first one is with a cleanup function. So let's go ahead and say Okay, before you re-render, let's go ahead and return. So the cleanup function, so when the component mounts disc cleanup code will run, we're gonna say remove the event listener that you added with the update window with function. So let's go ahead and do that, right? And let's just see what happens now. So if we refresh, we go ahead and see how many listeners have been attached. Okay, remember because it runs the first time it mounts. So this is why it is able to walk. And let's go ahead and do this a bunch time. So let's go ahead and move this around so we can see. Okay, I've dragged around a bunch of times. It says I re-rendered. Okay, now let's go ahead and say get the event listeners. And you can see we only have one, right? So this is again, really, really nice and it works really, really well, okay? Now they're all way, there are things to consider with this, right? Every single time we do this, it's going to go ahead and let's just say console.log. And it's just a attach this enough. Okay, we're going to attach a listener at this point. And I'm going to go ahead and copy this. And here I'm gonna say detach and that's not right. So you can see you might be thinking problem-solved, right? But look what is actually happening here. Okay, so attached a listener. And then here if we go ahead and check attached that listener, right, perfect. And if I go ahead and read size the screen, you can see what's happening right? Every single time I do it. Although we only have one resize listener available, which is what we wanted, it's actually doing quite a lot of work behind the scenes that we don't even know. It's right. It's attaching, retouching, attaching, detaching, detaching, and so forth, right? So this is not ideal. So what you can do is in this sort of situation to further optimize your React app, you can go ahead, delete this. Go ahead and actually only run this on the Mount, right? So remember it depends on your use case. But in this case, this would actually work perfectly because we only want to attach the event listener ones when the component mounts. And then we want to basically go ahead and just carry on with our day. Why it says go ahead and save this. And now if I go ahead and check it, refresh it attached to this. Now we can see it's only got one resize array. And then we can go ahead and do this. And now regardless of the number of re-renders, you can see a functionality is perfect, but we don't have any additional resize this. There's nor is it attaching and detaching every time it only attached once when the component mounted, right? So the example previously that I showed you with the cleanup function will actually replace the component unmount. However, you can see now, there's actually a lot clearer to see that we can further optimize this because of the power that use effect gives us. And we can actually remove this piece of code and just implement the additional on the Mount only to make it for the optimized. Okay, so this is extremely, extremely important and it allows us to go ahead and have that fine grain control over what our app does at different points in its lifecycle. Okay, So this was a fundamental part of class-based components. And now as the industry is moving towards functional components is really, really important that you actually go ahead and understand how we can mimic this behavior in functional components with a lot more control and power behind the ok. Now, just a little note to understand, we can have several US effects. That's the first thing. So yes, you can absolutely reuse effects. And also multiple effects allows us to separate concerns, right? So one effect could be useful, just console logging whenever rerender occurs. Another effect could be used for attaching that window listener that we spoke about earlier. And you see every single one has its own little purpose right now, I would highly recommend that you go ahead and practice this as this sort of power allows us to increase the complexity of the app without increasing the difficulty of reading the code base and it keeps it relatively simple. Okay? Now once you're done with this, what I want you to do is I want you to go over to your browser. I want you to go over to the React Dogs, and I want you to go ahead and give the user effects section a nice quick read. Okay? Now I make this a habit of every single time that you finish one needs to tourists, you go over to the React Dogs and you make sure that you give this a third read because yes, we went over all of these demonstrations, however, understanding the core fundamentals as to why these things walk, why they're important is going to be a lot more important for your future growth as a developer. So here it explains a few examples. It shows you the cleanup affects. It shows you the timings and the sort of ways that you can fire it. For example, it conditionally firing and effect based on, in this case the props dot source, okay, in this case, it's going to fire off based on the source, prop changing and so forth. Right now they haven't some important different notes that you should read by would make this a habit that every time we finish one of these lessons you come over here, give it a nice quick read and that way you can solidify what we just went through today, okay, so I recommend that you do this exercise, you code this out and you get everything working and test it for yourself. And yeah guys, that's going to help you concreteness knowledge and get good with it. Okay, so that was this lesson and it wasn't a very important element used effectively in the next lesson when you're going to do something pretty fun, we're going to build our very own custom hook is going to be a use Random joke. Generate acids can be a lot of fun. It's gonna make a fetch to an API service and then it's going to do some cool stuff with that. So until then guys, I will see you in the next lesson. Carry on working on, and I will see you later.
14. Building Our First Custom Hook & How to Use A useRef: What's going on, guys, welcome back to another lesson today we've got something fun. We're actually going to be creating off fast, very own custom hook. So we've seen the power of hooks, right? We've seen the US, they hook the use of fact cook and there are many more out there and I recommend you look at US hooks.com, very, very good website to go ahead and look at some hooks recipes that Bing custom created by other people inside the community. But today we're going to go up very own custom hook. I'm going to show you how to do it. So get excited for that and without further ado, less jumping guys. So the aim of today is that we're going to build a joke, generate an app. All right, so it's going to look something like this, right? So we're going to have the joke January. And when we click on Generate Joke, I want this to actually go ahead and generate some form of joke. Okay, so what it's gonna do is it's going to pull from an API. Now this is a public API that I've found. And why I've actually found is that this API has the following endpoints. So if we go ahead and I'm just going to paste it in at the top here. And you can see it's API, IC and db.com, four slash jokes for slash random. And you can see, hey, actually gives you back a joke. Alright, so I'm gonna go ahead and make this a little bit bigger. It's a simple JSON response. And here we can see inside we have a joke key with a value which is the joke itself. Okay? This is perfect. If we go ahead and refresh, you can see it gives us a new joke every time. There's something cool about this API is that we, if we go ahead and give it a firstName, and let's go ahead and say the first name is Sunny and the lastName is be careful there It's camelCase, so don't make that mistake. If I go ahead and do this, it actually goes ahead and uses my name in the jokes. Is this anything is the only person to ever win a staring contest against recharged and Stevie Wonder. So you can see, if I go ahead and refresh, it's going to keep on coming out with jokes that have my name inside of it. So it's really, really cool public API. So what we're gonna do now is we're going to go ahead back to our code. Now first I'm going to show you how to use a fetch cool to make that request that we saw over here. So the simple GET request, I'm going to show you guys how to do that inside of a US effect. And then we're going to refactor that into our own custom hook. Okay, So let's get ready to do that. So what we're gonna do is we're going to write a user fact overhead. And if you are unfamiliar with US, effects are highly recommend. You re-watch the previous video. We went over things extensively in that one and it helped out a lot of you. So this is a user fat cool. We have to make sure that we import the user fact correctly. There we go, Perfect. And what we're gonna do here is we're simply going to have a function called const, and it's going to say fetch joke. Right? Now what this is gonna do, it's gonna be an asynchronous function because it's making an API call. And what we're going to have is an arrow function. And this arrow function is simply going to go ahead and it's actually going to directly returns wherever can use curly brackets instead, we're going to use parentheses. And then we're gonna say await, because it's making a asynchronous course. We want to await the response. And we're going to say Fetch, okay? And what we're gonna do here is I'm actually going to go ahead and have backticks for string interpolation. And then I'm going to go ahead and paste the API endpoint again. Now, remember guys, we can actually go ahead and pass the firstName. So in this case this go ahead and say sunny and a last name and remember camel casing, like I said, want to make sure we don't make a mistake that i, and then the goal is to eventually go ahead and make these variables that we can go ahead and customize. Now once we've done that, I'm going to hit Save. So it pretty fires and gets rid of a few extra parentheses that we didn't need. And then what we're gonna do here is off to the Fetch is finished. I'm going to say then get the response of the fetch because this will come back with a, a object in the form of a JSON response like so. So what I'm gonna do is I'm going to pass this response as a JSON object, okay? And then what I'm gonna do is this will then give me the data back. So this will actually give me an object back. And it can do at this point is I can go ahead and I can console log data to see what we get inside. Okay, So this will happen on the component mount, but we have to make sure we also do. We have to make sure we actually call the fetch joke function. So let's go ahead and save. And then let's go to our right. And then you can see it's got a response back. So if we refresh just to show you and I dropped this down, it gives us a response which we've passed. So it was a JSON response when we passed in and gave us a data object. And then we can click into value. And you can see here is the joke, right? And you can see there are no such things as tornadoes, anything, they're just hates trailer parks, right? So there's a few little jokes that I didn't actually get that one, but I mean, I was laughing with that. So you can see inside of here you get the actual joke, right? So it's inside of Data dot value, dot joke. Okay? So what we can do here is we can just double-check data dot value, dot joke, right? Save it. And then this go ahead and refresh. At this point when you hit the refresh button and it will go ahead and have some jokes that are popping up on the screen. So some of them are very opinionated. So take it with a pinch of, so here you can see, okay, so we do get the data back. Okay, So what we wanna do with this information. Actually go ahead and store this inside of a variable. Okay, So what we can do here is we can simply go ahead and say const. And there's just go ahead and say joke, set, joke. And I'm going to create a piece of state for this. So use state. And here I will initialize the joke initially with nothing. And then once we get that data back, well Mike, she gonna do is set the joke to the data dot value joke, okay, instead of console logging in. And then why can do is because it will now be inside of this variable. I can go down here and I can go ahead and say the following. I can just say H2 tag, and I can just pop my token. And then what you wanna do is the final step is go ahead and import your US state. So, and then you should see compiled successfully perfect. And then you can see every time I go ahead and refresh, it will come out with a different joke, okay? So you can see everything works perfectly. I'm saying saying you can download emails for his pickup. Right. So you can see everything sort of comes out as we expected it to. Now obviously the button doesn't work as we want, right? So what we're gonna do is we're going to step this out into different phases. Firstly, we're actually going to create our own custom hook, and then we're going to hook up to that Generate Joke button. Okay? So what we're gonna do now is we're going to create a, imagine if we had something like this. So the angle here is to have our own custom hook, right? Which looks something like this. It's gonna say codons joke. And then we'll say US. Was they used a random joke. Okay? And what I wanna do is I want to be able to pass in something like this. Only be able to pass in my first name and my last name. And it will just make a joke based on those values. Okay, so what I'm gonna do here is I'm gonna go ahead and first the comment this out. So this is just so of a draft of what we want to achieve. But I'm going to create a new file and I'm going to call this one use Random joke. Okay, ab.js. And then here I'm going to use a handy snippets tool. So I'm gonna say RFC. If you haven't got the snippets and make sure you install those. And then what we're gonna do is you can see is simply a JSX. Jsx returns. We don't actually need the return block overhead. Instead, what we actually need to do is we simply need to do a few imports that we're going to need for a sec. Why? When you're going to need to use state hook and we're going to need the use of factor. Okay, so now we've got everything prepared. Well, we can now do is remember guys, that piece of state, that joke from earlier. I'm actually going to initialize that over here inside of our custom hook because we're going to need to store this value somewhere. And then what I'm gonna do is I'm actually going to go ahead and this user fact paste it inside of my custom hook and then hit Save. And then what I'm gonna do is over here, you can see now that we actually have the user fact. We have our joke, and it just sets the joke. And then what we're gonna do afterwards is we're going to simply return the joke, okay, Now at this point, we have hard-coded values. We have Sonny, we have Sangha. Okay. If I go ahead and save this just to demonstrate the first step of getting this to work, right? So let's just quickly reiterate what we have. And also you don't actually need this in the new React version. Create React app is actually not required anymore. So you have used random joke. We have our piece of state to keep track of the joke. We then have a huge effect which is triggered only on the hook mount. And then we'll actually happens is it fetches the joke, it converts it to JSON. It gets the data from the joke and sets inside of our joke piece of state, then returns the joke. So now what we can actually do is we can go ahead and you remember this code over here. It's going to be nearly that but it's not just a yeah, but it's going to say cons joke equals use Random joke. And then I can import, right, use Random joke. And at this point we can, we don't actually parse in any values, right? It just goes ahead and cools, cools our custom hook. And we also don't need to go ahead and have this top line anymore so we can hit Save now. And you should be able to see compiled successfully. And now we can see is the code actually walks away. We previously had it, right? So this is our first custom hook guys. All right, so we've actually just created our first customer bug. So it just says construct equals use Random joke. And it's honestly as simple as that. So you might have thought in my a bit, a bit more complicated. There's a lot that goes to it, but this is actually how simple is. So once you understand how to use the use of fact, you can see how powerful and clean your code can actually become, right? So jumping back in over here, we want to customize this so we can pass in the firstName and lastName like such, right? So the inlet, this example, the head. So how do we do that, right? So let's go ahead and do the following. First, let's go ahead and say Jim. And then as the second one will say Jim, Bob. So let's imagine we had a person with a first-name, Jim San, named Bob. And we want to pass that into our random Joe crime. So now what we can actually do is very simple. Actually, we can go ahead and just treat it like a normal function. So firstName, lastName because essentially all it is is a function where it takes a firstName and lastName argument. And then what we can do is we can use our string interpolation. We can go here and we can say firstName and lastName overhead. We can go ahead and say lastName. Now, before I hit Save, think about this. Do we have to update the dependency array with any value y? So I'm going to give you just a sec to have a think about this. Do we have to update the dependency array with any value? Okay, the answer is yes, we do need to do that. We need to go ahead and actually add the firstName and lastName to the dependency array as now the code inside of the US effect is dependent on two of these variable values. Okay? So this is very important that we get that right. Otherwise it will result in unexpected behavior. So we're going to hit Save. Okay? And then we're gonna go to our app. And now you can see it says use Random joke or Jim Bob. So let's go ahead and check it. This works. So I'm gonna go ahead and refresh. And you can say, they say curiosity killed the cat. This is Jim Bob could the cap, every single one of them. And they can go ahead and refresh. And you can see it goes ahead and continues to create a new joke with Jim Bob by and just to prove to you that this works, if we say Sony or it's just a papa react, save. Now it says Refresh. Crime does not pay although block and that one didn't do anything. Papyri that grinds his coffee with his teeth and boils the water with his own or age, right? So you see it works perfectly that. All right, so what we, what we've actually done here is we've created our own custom hook, which is working perfectly. It takes a FirstName, LastName uses state, it has its own use effect, but the key part is it's simply returns a value, okay, so I simply returns a value. And here you can see all we do is we store that into a variable and then we move forward from it, right? So this is really, really all it actually takes. But what we're gonna do now is we're gonna take this a step further, right? We said before that we want to have it. So when we generate a joke, does the exact thing and it creates and generates a joke. So what I'm gonna do now is I'm actually going to go ahead and upgrade this piece of code. And I'm going to show you how to use something called a reference, as well as two pieces of state. And we're going to upgrade this so that way we have two input fields and the Generate Joke button, right? So we're going to update this code right now just by doing them. So the first thing that we need to do is introduce two input fields. Right? Now I'm actually gonna do is I'm actually going to introduce a form. So if you haven't actually seen the custom form lesson, I'll recommend going ahead and checking that one out. Now, here I'm gonna go ahead and say input. I'm going to have one input and the second input. And then I'm gonna take this button, I'm going to pop it inside of our form. Okay, so that's the first step. The second step is by default is type texts. We don't need to actually have that. I'm going to go to the first form and this needs to have a placeholder in here. I'm going to say firstName. And for the second place holder, I'm simply going to say lastName, Ok, Save. And now you can see we should have firstName and lastName, Ok. Then what we're gonna do is we're going to go ahead and create two pieces of state to keep track of what's inside the input phone. So here we're going to say firstName, set, firstName. And then here I'm going to say a US state. And this again be an empty string. Copy this. And I'm gonna go ahead and simply refactor this to be last name and make sure you camelCase. Perfect. And then what we're gonna do is go ahead and save. But it's going to ask us to make sure that we import the US state. So I'm going to import US state like such. And then I'm also going to go ahead and hook up our input fields. So here I'm going to say value equals firstName. And then I'm going to do are necessary onchange on law. And I'm gonna say e set firstName, set firstName to E dot target dot value. Okay? And then I'm going to grab this. And I'm going to do the same thing for the LastName as we expect. Okay, so I'm gonna go ahead and do this and I'm going to say last name. And again, make sure your camel casing is correct the case, we can go ahead and just check that this works by simply typing in here. So we should be able to type in there we go, affect everything works. Now what we're gonna do is we're gonna create a function. So Hamline, I say onclick. And I'm going to say when we click the Generate Joke button, I'm going to trigger a function could generate job. Okay? I need to obviously create this function. So we're gonna say constant generate jug. And this is going to be a function which takes as an argument because it's a button Submit. And what we wanna do is because it's inside of a form and we're gonna do E dot prevent default to prevent the page from refreshing after I submit that form. Okay, so then final step for this is that we want to go ahead and only generate a new joke when we have clicked the Generate Joke button, right? So what we could do is previously what you might be thinking is a solution is we can go ahead and say use Random joke. And then here you can go ahead and say the firstName. And the last name. The problem with this approach, however, is that it will make a new request every single time the first name and last name changes, right? So it's going to be quite chaotic. So if here, if I go ahead and say sunny, you see, as I do that, it creates a new request every single time. And even here, if I go ahead and do this, it creates a new request every single time. So it's not actually dependent on the generate joke is just dependent on the values changing. But you can see how it's working in tandem with our new custom hook. So that's pretty cool, right? But what we wanna do here is I want to make use of the US or F functionality, right? So use rep is actually a hook provided by React, which allows us to have a reference to an element on the page again. So think of a big finger and it's just pointing an element. Okay, So initially that big finger is defined with a value of null, right? But what we wanna do is point that as an elements. So that way when we need to get the value of the element, the reference is pointing to the element, can give us the appropriate reference. Okay, so here was a, as I'll say, firstName ref. So let's go ahead and make a reference for the first name. So we'll say first name ref Jose equals user f. Okay, so we need to import this from reacts. So make sure you do that. And then we're gonna give this a starting value of no, because remember that paint, that finger is not pointing to anything initially, we're going to copy this and we're going to change rather than firstName, we're going to change it to a last name. And then what we do is we simply connect this to our values over here, right? So previously you see this is how we would have done things, right? However, it creates a new request every single time. So now what we can actually do is make this a little bit simpler. We can get rid of all of this and say href equals. And here I can say firstName ref. And even here what I can do is I can get rid of this and I can say last name, ref. Okay, Save. And then you can see our code's already a lot simpler. Now I can do is when we click on Generate Joke only at that point, right? So I'm gonna go ahead and remove this. Only at that point. Do we want to go ahead and grab the value from the input field and update US state, which will then re-trigger the joke to be generated again. So here what I can do is I can say set firstName to be, and then I can go into off firstname graphs. I can say, okay, get the pointer was pointing at the first name input field, right? This has something called current, which is a property which says, okay, the current element that you're pointing out. All right, so we want to get that element and then we just simply have to say value. So it will go ahead and get the element, and then it will get the value inside of it. Okay? And then we're also going to do the same thing for the last name. So we're gonna say last name, ref dot current, dot value. Okay? And if we go ahead and hit Save, think about what is happening at this point in time where so the initial value, Let's go ahead and say it's sunny sangha, right? So the first joke that we see on the screen should be a joke about Sony Sangha. Okay, then what we're gonna do is we can fill out the form. So this will go ahead and we have a reference to the first name input field, and we have a reference to the last name input field. But we can see now we're not actually manipulating the state of the firstName and lastName each time we type. And instead now only when we click the Generate Joke button will trigger off on Generate Joke function. And Ido prevent default prevents a page refresh. And here what will happen is it will update the firstName in our state with the firstName current value, right? So the firstname reference current value, which means it's going to go to the input field which has the reference for the FirstName, right? So we used FirstName reference to go ahead and connect them. And it's only at the point when you click Generate Joke, going to go ahead and grab that value and then you update the firstName. And the same happens with last name. Now, what then happens because of the rules of hooks, these values will update, which causes a rerender, which means that this line of code will get executed. Which means a will now have the updated firstName and the updated last name. And a new joke will be generated, right, so all of this elegance in one line of code. So let's go ahead and check this out. So suddenly Sangha, perfect is working. Now if we go ahead and say, let's go ahead and say Steve jobs and generate joke. Perfect. If you kill, if you tried to kill minus nine St. Joe's programs, it backfires. And let's go ahead and do Elon Musk. And that could even hit Enter on the keyboard because it's inside of a form and a tag team match. Elon Musk was teamed with the Hulk Hogan against King Kong Bundy, and Andre the Giant. He pinned all three at the same time. Because we know Musk is a bad ass guys. So as you can see, that was off just custom hook and that was pretty damn fun, right? We went we then went ahead and upgraded it with the functionality as we showed today. And you guys also got your first exposure to the US ref hook, right? So really, really fun stuff where we actually combined the only accustom of us own custom hook. But we also introduced the concept of use Ref, right? So the reference is inside of react and how they can be used to point to sine elements. So that way we don't have the unnecessary re-rendered inside of our app. With that said, guys, we are now at the end of this lesson. So if you found this helpful, go ahead and drop a comment below as to what was your favorite part about this lesson. And what we're going to be doing in the next lesson is we're going to be building a to-do app with React, right? So this is going to be your first major exercise. We're gonna go ahead and use all of the skills that we've learned here to go ahead and build a to-do app inside of react, right? So this would be perfect for your portfolio, is going to be a perfect little experiment that you to go ahead and test the skills that you've learned. So until then guys, I will see you in the next video, Peace.
Sonny Sangha, React Full Stack Dev + YouTuber
