Learn React JS - Full Course for Beginners - Tutorial 2019

Learn React JS - Full Course for Beginners - Tutorial 2019

SUBTITLE'S INFO:

Language: English

Type: Human

Number of phrases: 3174

Number of words: 50583

Number of symbols: 228240

DOWNLOAD SUBTITLES:

DOWNLOAD AUDIO AND VIDEO:

SUBTITLES:

Subtitles prepared by human
00:05
Welcome to an introduction to react. My name is Bob Ziroll, and I'm here to guide you through learning how to build front end web applications. using one of the world's most popular front end web frameworks react. But first, a little background about me. I'm the Director of Education at V School, which is a technology education school that teaches full stack JavaScript and UX courses to those looking for a career change. I've been teaching in the boot camp space since the very early days of boot camps starting in 2014. Over the years of teaching and designing curriculum to help students learn difficult topics in a very short amount of time, I've developed my own learning philosophy, which I think would be helpful to share. First of all, the easiest way to learn something is by doing it the hard way, there's truly no substitute for getting your hands on code as soon and as often as possible. During our class orientation at V school, I typically give an analogy about myself. So I've recently developed an interest in woodworking. I've read books, I've watched hours of YouTube
01:08
videos, I've received new tools as gifts. However, none of those things has actually brought me any closer to becoming a skilled carpenter. It's not until I actually put in the hours of cutting, sanding, gluing, screwing things up. And finally, eventually building things that I'm actually proud of that I can say that I'm actually starting to become a skilled woodworker. As such, if you actually want to learn react well enough to be able to use it, you'll need to be actually writing react code. Most of the lessons in this course are followed up by an exercise that I fully expect you to put in real time and effort into accomplishing on your own. Now, if you decide to breeze through them the easy way without actually doing the exercises, you're actually kind of taking the hardest road possible to learning react. And along those lines, you should really use the scrum platform to its full potential. Throughout the course, I'll be having you pause the lesson and actually dive into the code making changes. But even when I don't ask you to pause and play with
02:13
the code, you should take the initiative to do it on your own. And just be curious in general, doing this is going to help you avoid what some call tutorial hell. And if you want some more information, there's a medium blog posts that I've linked here in the slides. The idea essentially being that you should get your hands on the code as much as possible. And by doing so actually do the things. Okay, not just necessarily the exercises I asked you to do, but anything that you're interested in curious about. And as I mentioned, scrubba is ideal for this sort of learning if you use it the right way. Another main point of my learning philosophy is that spaced learning and repetition are absolutely key, this information to actually stick in your mind. And one of the main tenants of spaced learning is that you don't just binge on the course, this kind of goes in line with the concept of Tutorial How, where it can be the easy way out to just binge on the course and feel like you're actually learning something when in reality, your brain has been incapable of actually retaining the information. So as you're going through the course, make sure that you take frequent breaks.
03:16
And I don't just mean for five or 10 minutes here, there. But finish a couple of key principles, practice them quickly, and then rest your brain for the day. And when you come back to the course, don't be afraid to go back to previous courses and review them. Yes, it will obviously take a lot longer to complete the course that way, but it will be super beneficial to your learning. Okay, I'll get down from my soapbox for now. But I'll be reminding you of some of these things frequently throughout the course. So for now, let's quickly cover what you'll actually be learning. When we talk about react, we can't avoid the concept of components. components in react are the core building block for making reusable pieces of HTML. And pretty much everything else that we talk about deals with how to use these components to build the web applications that we want to build. We'll also be talking about JSX, which is reacts proprietary wrapper around JavaScript. And it simply lets you build components in a very familiar way, using the HTML syntax that you're already familiar with. We'll also spend a little bit of time talking about styling your components will get a chance to learn
04:20
about props and how to pass data around your application. And when we talk about props, we oftentimes talk about state which is how to maintain and change data in your application. We'll talk about event handling, and how you can have strong interactivity with your users. We'll talk about lifecycle methods, which help you hook into different timing events of your react components. We'll talk about fetching data from an API using HTTP. We'll talk about forms and their role in creating a good user experience. And there's plenty more that we'll be covering in this course as well. Now, there's a few things that you should already know before taking this course. And honestly, it's just the basic building blocks. htm Well, CSS, vanilla JavaScript, and ideally a little bit of the updated syntax for JavaScript in iOS six. If you're feeling rusty on any of these topics, I've included links on the logo that you can click, and it will take you to another free course here on scramble to brush up on that topic. Okay, that's plenty of talking. For now, let's actually dive into react.
05:26
Let's take a quick look at some of the applications that we're going to be building throughout this course, this should give you an idea of what you'll be able to accomplish by the time you're done with this course. The first one is kind of the default required to do list application, it may seem a little bit boring, but it actually covers a lot of the topics that we're going to be talking about in this course. And of course, you can click an item to mark it as completed, and we see some style changes and everything. And is kind of a capstone project to this course, you're going to be building a meme generator. And the idea is you input some top text, some bottom text, hit the button, and it will randomly choose meme image from an API that contains meme images. Some of them are funnier than others. So get excited. React is really exciting technology. And it's going to be an excellent tool in your tool belt as a developer. Alright, let's get started. We're gonna jump right
06:30
into learning about react. But first things first, let's learn why we're going to be using the React framework, instead of just developing something in vanilla JavaScript. One of the things that you'll hear people talk about with react is its speed, and how fast it is compared to web applications that are developed in vanilla JavaScript. The way that react is able to do that is by using something called the virtual DOM, we're not going to go into a lot of detail about the virtual Dom right now. But if you're interested in learning more about it, I've included here a link to a YouTube video with a pretty simple explanation of how the virtual DOM is different than the way that web applications work when you're developing in vanilla JavaScript. So feel free to pause the screencast and click on the link to watch that video if you want. For now, it's enough to know that the virtual Dom helps make react work a lot faster than vanilla JavaScript. Another really awesome benefit react gives us is the ability to create reusable web components. And I'm going to talk about this through an example. Right here, we have the bootstrap default navbar.
07:36
If you haven't used bootstrap before, it's just a CSS library that has pre written code that makes some elements look really good for you. But you can see that it's about 40 lines long, and it's pretty unwieldy and difficult to understand. And if you were to include this in an HTML page with a bunch of extra content in it, it would be pretty difficult to decipher, and everything would start to feel pretty cluttered. reacts, web components allow us to take these pieces of HTML. So this 40 lines that we see here, and put it into a component of our own, almost like a JavaScript variable. In this case, we call it my sweet navbar. But you could call it whatever you want. And we can see that this is a lot easier to read, if you're coming into it as a developer, to see exactly what is going to be where, in this case, the body of my HTML will have a navbar on top, some main content in the middle and a footer at the bottom. The ability to do this is really nice for reusing these components on other pages if we need to, and for making our code
08:36
look a lot nicer when we're working in it. Another reason why react is so awesome that I like to include is that it's maintained by Facebook, whether you care for Facebook or not. There are a lot of really smart developers at Facebook whose job it is to work on react. On top of that, because react is so popular. There's a lot of contributors on their GitHub, which is open source who contribute to the React framework, which means it's going to be evolving for the foreseeable future. And last but not least, React is very hireable. At vi school, we focus our curriculum and our efforts on the things that are most likely to get our students hired. And react is very in demand right now. So if one of your goals is to get a job as a front end developer, React is a great choice in terms of frameworks to learn. So that's enough talking for now let's jump into some code. Okay, we're just gonna jump right into the code. One thing you're gonna want to be somewhat familiar with is es six, or ACMA script six or ACMA script 2015. It's a slightly newer
09:40
version of JavaScript if you're used to using things like var. We're going to be replacing that with some Yes, six stuff like const and lead. There are some videos here on screen buy that should be able to help you learn that if you're not familiar with it, and you'll want to do that before you move too far along in react because we'll be using a A lot of ESX in react, one of the things we'll be using really often, in fact, in every react file we create is the import statement. And so I'm going to import react from react. And you can see over here on the left, I have react and react Dom dependencies included in this project. So I'm actually also going to import react Dom from react DOM. And the last thing we're going to do is use react Dom's render method to render something to our screen. But let's stop and explain this a little bit here, I'll get to why we're important react in a second. But for now, I need to import react Dom so that I can use
10:43
it in my line for code here, where I use the render method. And what this is going to do is it's going to take two arguments, one is going to be what you want to render. I'm doing this in pseudocode, obviously, so that it's clear that this is not the right syntax. And the second parameter is, where do I want to render it? react Dom dot render makes the second one really easy. Remember, everything is going to have to tie back to an HTML page of some sort, the JavaScript we are going to continue to write is simply going to be compiled down to or turned into elements on a page. And so you can think of it as being inserted into an HTML page of sorts. So let's go over to index dot HTML really quick. You'll see everything in a basic HTML pages here, including a link tag and a script. Don't worry about the fact that this is slightly different right now, it will still connect correctly to our index dot j s. One thing I want to point your attention to though is this div
11:47
right here with the idea of Route right in between the opening and closing div tags is where react is going to be sticking everything that we create, you can think of this as a container for our entire application. So back in our index dot j, s, this, where do I want to render, it needs to point to the div with the ID of route. And the way that I can do that is using a vanilla JavaScript document dot get element by ID route. This way render looks at the first parameter, which I haven't filled out yet that says, What do I want to render, and it will stick it inside of the div with the ID of root. Now let's look at this first part, what do I want to render? Let's get rid of this placeholder. And let's just start with a simple h1. And of course, we have to say hello world to refresh the browser over here, and notice that we actually get an h1 with
12:52
a Hello World in there. Now the astute of you might have said, Wait a second, why are you putting an HTML element in the middle of your JavaScript parameter, that's an obvious syntax error, JavaScript is going to think that that is a less than symbol and that this is a greater than symbol and not know that this is an HTML element. Well, fortunately for us, the people that created react created a little pseudo language, you could call it called JSX. JSX is very much like a JavaScript rendition or version of HTML. In fact, we're gonna see that most of JSX looks almost identical to HTML. With this few slight differences that we'll talk about along the way. There's a lot happening under the hood with react, where everything is getting compiled down to a plain JavaScript version of itself. But for us, we can just pretend that this will work just fine. And it turns out, this is why we need to import react from react because the React library is the one that will enable
13:53
JSX to work the way it's supposed to work. In fact, you can see that if I remove the import react line, and try to save it and refresh the browser, it tells me that react is not defined. Even though I'm not explicitly using react anywhere in my code here. Under the hood, it's getting used to interpret the JSX. Another point I want to touch on really quick is also dealing with JSX. It's important to note that I can't render two JSX elements next to each other. For example, if I wanted an h1 and a paragraph, you can see that it's already not liking what I'm doing. And if I were to save the page, it tells me that you can't have two adjacent JSX elements. But instead they have to be wrapped in something so that it counts as just one element with two elements inside. For example, I might choose to wrap this in a div
15:02
And I need to put my reactant back. And there we go. Using JSX can take a little bit of getting used to, but it's much better and nicer after you get used to it, then doing it the old way where you'd have to say things like, var, my new paragraph equals document dot, create element paragraph, and add some inner HTML, then take that paragraph and append it to a parent. That was very imperative. Whereas now we're going to be doing things much more declaratively. I also want to interject right here that you should remember that the benefit of scrambler is that you can pause this screencast and play with this code. So please take some time to do that. Not just at the end, but also throughout the entire
16:03
screencast. We're also going to be including entire screencasts that are dedicated to you doing exercises, as mentioned in the first video. So take some time, play with this, study it up and get ready for the upcoming exercise. All right, welcome to the first practice of this course, this is where it makes a lot of sense to you scramble over a regular video. As we mentioned, we highly encourage you to actually give these practices and exercises a shot. Sometimes it's really tempting to just skip ahead to the solution. But you're only going to be hurting your own education. If you do that. So please give it a shot. The way this will work is I will put an objective up on the screen sometimes some hints as you see here. And then I'll leave about five to 10 seconds of silence to give you a chance to pause the video and actually try to accomplish the objective. If you get stuck, I recommend that you not just skip ahead to the solution. But instead that you go back to a previous video and relearn the thing that the practice
17:07
is about, the more effort you put in, the more likely This is actually going to stick. So let's take a look at this practice. Your objective is to fill in the basic boilerplate react code needed to render an unordered list to the page inside that unordered list, you can put three list items with anything that you want in them, it doesn't really matter. The way that you'll know that it worked is that it will show up in the little browser window on the right here. Since it may be your first time working in react, I've included a couple hints that remind you of the steps you'll need to take. So I'm going to leave some silent space now and go ahead and pause the screencast and give this a shot. Okay, let's go through the solution together, I'm going to remove the comments that I have. And the first thing we will need to do in almost every react file that we create is we're going to need to import react from the React library. And since this is our index dot j s, and we're going to need to render something to the page.
18:14
We're going to need the React Dom library. Last but not least, we're going to use react DOM. We're going to use its render method. And there are two parameters that we need to pass into render. The first one is what do we want to render? Well, as the challenge said, we need an unordered list. And inside that unordered list, we need three list items. Copy and paste this so we don't need to 123 you can see here, this is kind of looking pretty ugly. We're going to see in the future how obviously, we're not going to put our entire page here in the render. So I'm going to move this on to its own line so that it looks a little more like regular HTML. If you didn't do that, that's totally fine. And
19:19
then I'm going to be really boring and just put 123 in here. Okay, that's the first parameter. And the second parameter is where do I want this to load into. If you remember from the last screencast, we have a div with the ID of route. And that's where we want to place our application. So in react Dom dot render, I need to provide get element by ID route, so that it will go find that element and let react Dom dot render node, this is where I want you to put This code and when we refresh the browser, we get our three bullet points with 123. If any of that was confusing, I highly encourage you to go back to the previous video, rewatch it, play with the code, come back, do this practice. Again, mess with the code that I put here, see if it works, the way you understand
20:22
it, try to break it, etc. Doing that is going to really help you understand react on a deeper level than just passively watching me explain it to you. Awesome job. Let's move on to the next topic. In the last practice video, I mentioned that you wouldn't want to end up sticking your entire application right here inside of react Dom dot render. Imagine having a web page with hundreds of elements on it, this would just be impossible to maintain. Back when we talked about why react was popular. One of the reasons we mentioned was reusable web components, we're going to get a chance right now to learn how to create functional components in react. The reason they're called functional components is simply because you create them by writing a function, I'm going to add some space here and create a new function called my app. Notice here that I'm using the constructor convention of having capital camel case for
21:24
my component name. This is a very strong convention that you should adhere to in react always have camel case and start your first letter as a capital letter. And the really simple thing about functional components Is that all you need to do is return the JSX that you want this component to represent. So in our case, we can just take this unordered list and return the unordered list from our functional component. It's important to know that although in this case, it would work without it, it's always a good idea to wrap this in parentheses. And then another strong convention that I really like is to put everything on its own lines. This way, it reads a lot more like HTML. Then in react Dom dot render, we can create an instance of our functional component by placing the name of the component and wrapping it in basics tags, you'll notice that I've made this a self closing tag, there
22:32
are some instances where you'll want to create components that can accept children elements. But for the next little while, we're going to make every component a self closing component. Now notice when I refresh, I have the same thing that I had before. Though the same rules apply to our functional component as they did in react Dom dot render, meaning I can't return two different elements next to each other, like having another ordered, ordered list near this one. That just wouldn't work because our component needs to return a single JSX element. And here it's returning to, you can usually get around this by just wrapping everything in a div, or whatever other elements that you want to wrap it with. In this case, we're just going to return the unordered list. So maybe you can start to see the power in doing this, we're going to be able to create our own components, which contain pieces of
23:32
JSX, which represent HTML in our final product, and we can start composing them together. Here I have a component that I created rendering, React elements or JSX elements or HTML elements. But as we create more and more complex applications, I'm going to be creating components that render other components that I have also created. Eventually, it needs to boil down to a regular HTML element. But sometimes that can happen over the course of maybe dozens of your own react components that you created. Eventually, as we start to create more and more components, we're obviously going to split these into their own files. But for now, it's important to play with this and see what you can get to work, what doesn't work and get a really good idea of how a functional component works. As we move on, we'll start to make our file structure more and more complex. Now that we've learned about basic functional components, let's put it to practice. Okay, let's get some practice of functional components in. One of the things we really
24:41
pride ourselves at V school when we're teaching our curriculum is that we include a lot of spaced learning and repetition, which is a principle of teaching that helps people retain as much information as possible. As such, like before, I haven't included any boilerplate code for you to start with. So it's going to be up to you to build everything from Scratch during this kind of repetition is going to be really good for your memory and should help you really understand the concepts. So let's go for the objectives you have. First, you're going to set up the basic react code from scratch again. And then you'll need to create a functional component called my info that has an h1 with your name a paragraph with some information about yourself, and an ordered or unordered list of the top three vacation spots you'd like to visit. Obviously, since we're not going to be grading this or anything, you're welcome to change this to whatever UI you'd prefer to present. And then you'll need to make sure to render the instance of your functional component to the browser. If you want a little extra challenge. Although we haven't yet gone over how to style your components, feel free to search on Google how you can add some style to your page. If
25:44
it's enough of a challenge, just getting the functional component working, then don't worry about that we're going to cover styling in a future lesson. One less thing before I give you some space to pause the video and try this out for yourself, I will once again get on my soapbox for the last time, I promise that you should definitely actually do this exercise. If you're hoping to get from this course, a real understanding of how react works just passively watching isn't going to do it. So please take the time to actually do this. Okay, I won't mention that again. So go ahead, pause the video. And we'll pick up in just a few seconds and solve this together. Alright, so like last time, we need to start with some of the boilerplate code, we're going to once again import, React from react, import, React DOM, React DOM. And this is going to be a little out of order. But I already know that I need to render something
26:45
to the page, they already know that I'm going to call my component my info. So I'm going to put an instance of my info right here. And lastly, I'm going to do my get element by ID route. So that render knows where to put the my input component. Okay, now the more fun part, let's build our function. Remember, the one thing that the functional component needs to do is return the so to speak HTML that we're going to be putting in the page. In reality, as you know, it's actually JSX. But sometimes it's helpful just to think of it as HTML. Since I already know this is going to cover multiple lines, I'm going to put everything inside of parentheses. Now one thing you may have tried to do just by habit is putting an h1 and putting your name and then going to the next line and trying to put a
27:50
paragraph. But think for a second what the problem with this is. If you realize that the reason this is a problem, you may have tried to save this and it says adjacent JSX elements must be wrapped in a enclosing div for an enclosing tag. So I'm going to put this whole thing in a div. And it's a very common mistake to make, especially as you're starting. So if you made that mistake, don't worry about it. Okay, right here, we should have something that is at least working. So I'm going to save this and see if it renders and there we go, we have a good start, all I need to do is add my unordered list and put a few list items in there. And I've always wanted to visit Thailand, let's say Japan. And I've
28:51
never been to the Nordic countries. So we'll just add Nordic countries in general. And when I save this, I should see that my list shows up in the browser. As a reminder, if you look in the very upper right, there's a little left arrow. If you press that and open the side menu, there's a chance to ask questions on any pieces of code you're unfamiliar with or didn't understand. And I'm going to be trying to check these as often as I can. So if you ask a question there, I'll try to get back to you as soon as I can. Also, just because we finished this example, don't be afraid to spend some time playing with this code a little bit more before moving on. Again, the more you get your hands on the code and actually play with things, the more likely this information is to actually stick and for you to be able to be productive with react. Once you feel pretty comfortable with everything we've covered so far. Let's move on to the next lesson. Let's talk really quickly about our setup here. Right now we have our functional component inside of our index.js. But remember,
29:54
one of the main benefits of react is that we get to create a lot of our own components. Eventually, we're not going to be able to To put everything right here in this file, so what we need to do is we need to take our my info component and move it into its own file. And it's a pretty good convention to have each file contain just one react component. So the first thing I'm going to do is create a new file. And there's a quirk of Scripture right now that you won't be able to see me typing this video, I'm going to right click up here by file since a new file and a dialog box just popped up for me, and I'm going to give it the same name, my info as my component with the same capital camelcase and everything. And you should see it pop up here now and notice that the file, my info is spelled exactly the same with the same capitalization as my component. That's a really good idea, because it will make things a lot easier for you when you're looking through a complex project tree. The next thing I need to do is take this component out of this file, so I'm going to cut it, go over to my info dot j s, and paste it in. There's a few issues here. You may remember
30:57
in one of the early videos, we talked about why we import react from react, even though we're not using react anywhere, try to think if you remember why that is. The reason we had to do that was because of our JSX. We used to have this component here and it contained JSX. The computer won't know what this is because it's not normally valid JavaScript. But the React library helps it become legitimate JavaScript, which means we undo that back over in my info.js. Anywhere we're going to be using JSX, we need to make sure to import react. Almost every react component you create is going to have this line in it. The last thing we need to do is make this function my info available to other places in my application. The way I need to do that is by exporting it. If you don't feel totally familiar with import exports from ESX, that should be okay, as long as you remember this export default
32:02
and then the name of your component. But I would also recommend that you go check out the free introduction to s6 course here on screen. But now that this component is exposed through the export default, I'm going to go over to index dot j s. And let's just Command S, we'll save this and see what comes up. Notice it says my info is not defined. Well, that's because we used to be declaring that function here in this file and making an instance of it by putting these braces around it. But now we're not doing that. So we need to import my info from my info dot j s, that's really easy to forget that we can't just say my info dot j s. reason is because when imports don't have a relative path, they will automatically look for a module with the same name that you're providing. This works okay with react and react Dom because they are third party modules or dependencies that I've installed into this project. When it's one of my very own modules, or one of my very own files,
33:05
I need to make sure to provide a path. So I'm going to say dot slash, which means from the current directory, look for a file called my info dot j s. Another important thing to know about imports is that they assume that you're importing a j s file or in other words, dot j s is the default extension. So I can delete dot j s, and it will still work just fine. Now if I refresh, you get my component back in the browser on the right. As your project gets more and more complex, it's going to be really important that you have a good organizational structure. One simple organizational structure I can employ right now is by creating a new folder called components where I'm going to put all of my components in. So I'm going to create a new folder. I like components. And I'm going to drag my info dot j s into components and looking back@index.js what do you think I'll need to fix here. If you notice that the path to my my info file is now incorrect, because it's no longer inside
34:07
of the root directory, I need to provide dot slash components slash my info. And when I save this, everything should be working just fine. Having a components folder is to me a little bit of an oversimplified way to organize your application, because you're going to have so many components that you create that you're going to need to find a structure that works best for you. And I'm not going to offer one that works best. You'll probably even see me throughout this course using a few different types. But each person has their own opinions about what the best organizational structure is. And it definitely depends on the project as well. Before moving on, try playing with this a little bit. Maybe go change some code inside of my info, or maybe move it into another folder or change the file name and see what you need to fix in order for everything to keep working. Or if you're really wanting to be forward thinking you're welcome to try and create a new component and nest that inside of my info, but this is actually what we're going to cover in the next lesson. Once you feel comfortable with everything we've talked about here, let's
35:07
move on. In this lesson, we're going to talk about parent and child components, our applications are going to be much more complex than just having a single component my info, for example, render to the DOM. Instead, you're going to have a complex hierarchy of components that eventually lead down to JSX elements. I'm going to start from scratch here just for repetition sake, so bear with me. Take a second to see if you can remember what the next step is, you can start with something simple like getting HelloWorld as an h1 to show up in our browser. In order for anything to show up on the page, we need to use react Dom dot render. first parameter is what we want to render, so maybe h1 hello world.
36:08
The second parameter is where do we want to put that we'll be in an element called route in our index dot HTML. If any of that's confusing, make sure to go back and review some of the previous lessons. But I'll assume that that makes sense from now on. I refresh my browser, I get hello world. But we've moved past this so far. Instead of having an h1 here, we put my info in less time. Instead, this time around, let's create a component called app. An app is going to be an entry point into our entire application. In order for this not to fail, we need to import app. And in order for this not to fail, because that component doesn't exist yet, we need to create it. So I'm going to create a file called app dot j s. Notice it has a capital A because it's a react component. In app.js, I need to remember always to import
37:10
react. And before I forget, I'm going to export default app works at this point app doesn't exist. So let's create it. Before I put anything in the return, I'm going to refresh the browser really quick. And notice that there's a problem. See if you can remember what we need to return here inside of this component. I need some kind of JSX element. So I might put an h1 Hello, again, refresh. There we go. Or I could put any kind of other HTML in here as well, maybe a div. Inside I have an h1, maybe something like an unordered list. Maybe at this point, I
38:16
decided that I want this to be an actual website and I start putting things together. So this top section might be a navbar. And below the nav I might put a main section where most of my content will go. And at this point, I would do something like add some styling to my unordered list so that this was more like an F bar. As you can see, this app component is getting pretty large. And it's kind of defeating the purpose of react, we talked about how we can take each piece of HTML and put it into its own component. We're not really doing that very well here. Instead, we may decide to create separate components for each little piece of HTML that we need on our page. Take a look at this diagram to get a better understanding of what I'm talking about. Here we're rendering the app component, but app may decide to render another component called my info where my info may eventually render some kind of regular JSX element. Notice I'm making a distinction between components and
39:17
elements. elements are the ones that boil down essentially to regular HTML code. Notice that here I have a lowercase D and Dev. That's a dead giveaway that this is a regular element rather than a component that I've created. On the other hand, my info starts with a capital M. And that helps me understand that this is a component that I've created. You may have heard of how the DOM or document object model is oftentimes referred to as a tree where the HTML element is the most base root of that tree. In our case, we can think of the app component as being the root of this tree. And the app component isn't limited to just rendering my info. It could also render, for example, a footer and that footer could render an app actual element called footer, which has all of the HTML relating to our footer in it. And if we have a footer, we naturally probably want some kind of header. I've specified these as awesome header and awesome footer. So it's not to be confusing with the regular footer element. And just like app is rendering more than one component
40:20
header may also render multiple components, for example, a navbar, but also maybe a logo component. And those eventually would need to end up as regular elements of some sort, in this case, an image element and the nav element. Hopefully, here, you can start to see how our react application could become more and more complex as time goes on. And this is only scratching the surface. So in our sample app here, let's create a little footer really quick, going to create a new file called footer dot j, s with a capital F, as seen here, which you'll need to import react from react is always going to export the thing before I even create it just so that I don't forget. Notice here the difference between the capital F footer and the lowercase f footer. As I
41:23
mentioned before, the lowercase f footer is the actual element that will get rendered to the screen. Whereas the capital F footer is the component that I'm creating. It's just a function with a name. Inside here, I may put, I don't know an h3. This is my footer. I've created this component. But notice it's not showing up on our page. That's because our app is not rendering a footer anywhere and need that footer in this file in order to create an instance of it. So I'm going to import footer from dot slash footer. And maybe right under my main section, I'll include the capital F footer that I just imported. refresh this now. There's my footer element. At this point, I have kind of a strange mixture of elements that are regular JSX elements being mixed in with components that I have here. If I can, I really like to have this
42:25
app component almost be like a table of contents, where instead of having some elements in some components, it's mostly just components. So this might look like this. header, main content, and footer. And then I can go to each of those individual components and see what elements those are rendering. Now header and main content don't actually exist. But the point is, you can continue to nest your components as deeply as you need, we're going to get a chance to practice this in the upcoming lesson. But if you'd like you can spend some time trying to fix this code. Since header and main content currently don't exist, go ahead and create them. Also, before we move on, feel free to click in the blue slides in the lower left to check out that diagram once again. Once you feel pretty comfortable, let's move on to the practice. Okay, let's jump right into the challenge, you're gonna set up a react app from scratch. Once again, what you're going to render is the root app component,
43:29
as mentioned here, and that app component should render three separate components, each of which will have some kind of elements that they render, first, a navbar component. Second, a main content component, and third, a footer component. So give this your very best shot. Remember, you can always turn to Google for help. Once you think you have this challenge, then move on with the video and we're going to do this together. Okay, let's get started. We're going to import react from react, React DOM, React DOM, we're going to use react Gmes render method to render a component called app ranks you select the root element app doesn't exist, so we need to import it. That file doesn't exist, so we need to create it epital a app dot j s. Remember, I like to treat this file as kind of a table of contents.
44:36
So we'll need to import react from react again. At this point, I'd like to just put something on the page to make sure that I'm on the right track. Okay, at least not showing up tonight. No, I haven't made a mistake up to this point. If you look back in the challenge, it said to create a navbar main content and footer components, we could do this in any order, we could first create the files, and then import them, we could import them and create instances here and then create the files, whichever way you want to do and makes most sense to you is totally fine. I'm gonna finish my app component first, and then go create the components necessary for that to continue working. And remember, everything needs to be surrounded in a single component, because any given component can only return
45:36
one element. Here, I'll put my header content and footer. Up GS needs to know about those first, so I will import those. And those files don't exist yet. So I'm going to create, you can imagine as I keep creating new components that this is going to get pretty cluttered. So I'm actually going to put everything into a components folder. drag my footer, header, and main content into my components folder. I also need to fix my app j s. References here. Okay, over in those files, I'm going to start creating those components. This will just have a basic footer element. For now,
46:42
I'm just going to fill it with some text because it's not too important what's there. If creating these components is still a little bit foreign to you, and you have to remember what step comes next, I'd recommend actually retyping everything from scratch. Because I've done this enough times, I'm actually just going to copy everything and paste it into header changing some of the references. It'd be the same thing for main content. elicit this just says main instead of main content, and that it's got a lowercase M. Hopefully you understand at this point that this is because this is a regular, you could say HTML element, main, header and footer are all semantic html5 elements. main content, however, is something that I created. And so I couldn't say something like main content, because it's not a real HTML element. Let me refresh the
47:48
page and see if it's working. Okay, it's pretty boring. And it looks like I forgot to put this is the main section. Right. In the next couple videos, we're going to learn about actually styling this because this is pretty awful. And we want this to start looking good. Once again, feel free to pause the screencast and play with the code that we have here. Or if any of this was still confusing, go back to the beginning and try it again from scratch. Once you feel comfortable, let's move on. Alright, so from what we've learned so far, we can get started on our phase one of our to do application. So what you'll do is you will initialize a new react app from scratch, you're going to render an app component in the index js file here, which means you'll need to create an app component from scratch. And your app component should render three or four checkboxes with the paragraphs or spans or whatever kind of text you want next to it as if you're making a to do list with some hard coded items already in it. So pause
48:50
the lesson here and give this a try. And then we'll go over this together. Okay, so let's do this. I'm going to erase my comments here. And as always, we need to import react from react, import, in this case, React Dom from react DOM. We're gonna use react Dom to render an app component to the screen. And we want that to be in the element with the ID of route. The app component doesn't exist yet. So we need to import it. And this file doesn't exist yet. So I'm going to create it. We'll move over to that file. Now. Where I want to also import react from react will create it our functional component and want to remember
49:50
to export it before we forget. This functional component should return the div will need to wrap everything in it. Because it can only return one element at a time. And inside this div, we will put our input type checkbox. And our paragraph. For now we'll just put some placeholder text. You save this and see how it looks. Okay? It's pretty ugly. But we're going to get to that later. And it said to do three or four times, so I'm just going to copy and paste these two lines here. And there we go, we've started our application. That's pretty straightforward. And the next time we see this, we're going to have learned about styling. And we're going to add some style to this, so it isn't quite so ugly. So if anything was confusing, go back and play with this. Again, try to do everything from scratch if you'd like, feel free to post a question in the q&a section. And when you're ready, let's move on to learn more about styling.
50:56
This example is the same one that we finished with at the end of the practice in the previous lesson. And I wanted to take some time to learn how to style this. Now, there's actually a bunch of different ways to style things in react. And we're going to start with the one that's probably the most familiar to you. And that's just using CSS classes in CSS rules on those classes. Let's drill down the tree here and see where we can actually start putting some classes. You'll see on my index js, I'm rendering an app component. And the app component is rendering a div with three other components header, main content and footer components. And each one of those is just a basic component that either has a single element as part of it with some text inside, let's focus our efforts on styling the header. And normally, what you do in HTML, when you're going to add a class to something is you add a new property called class. But one thing we need to remember right here is that we're not actually dealing with HTML. Instead, we're dealing with a variation of JavaScript JSX. And something you'll just
51:57
have to remember with JSX is that using class as a property name doesn't really fly. Instead, we need to use something called class name with a capital N. A lot of places will tell you the reason that you have to do that is because class is a reserved keyword in JavaScript. But the truth is underneath JSX is just using the vanilla JavaScript Dom API. And if you've ever used the vanilla JavaScript Dom API, you'll have something like document dot get element by ID, something. If you wanted to add a class to that, you could say dot last name, plus equals and then add a new last name. I prefer class list myself because it has properties that you can use to add and remove classes. But that's beside the point. Class Name is an underlying JavaScript Dom API property. And so using class name as part of our JSX is simply a way to access that Dom API under
53:01
the hood, which is what JSX and react is doing. That's just a little bit of extra background that you may or may not be interested in knowing. But the point is, all you need to do is wherever you normally would say class in HTML use class name instead. Here I'm going to say class name equals F bar. I'm going to delete this before it becomes a problem. Then over in my style, that CSS, I just need to select the navbar and include whatever styles I want. For example, I might change the background color to purple. If I save and refresh this, you can see that now the background color is purple. I'm going to copy and paste in some style since this isn't a course on CSS, so that we can get something that actually looks pretty good. Okay, the only thing I've done here was added a zero margin to the body so that it went all the way to the edge, and a number of styles to the navbar. If you're interested in actually checking this out, feel free to pause the video. But the point is everything that you normally do in CSS is going to be essentially the same as you do here. The only change we've
54:06
made so far remember is that we have to use class name instead of class. One of the other things to keep in mind that maybe tricky to remember at first is that you can only apply the class name attribute to react elements like header or paragraph or h1. If you try to apply class name to a component that you've created, such as header or main content, it's going to do something a little bit different than you think. And we're going to talk more about that in the future. But for now, just remember that the only thing you can apply classname to are react elements and not react components, the things that look basically like regular HTML. Another thing that can be kind of tricky in the beginning is if you're using something that requires different levels of your tree hierarchy, like Flexbox or CSS Grid, where you need to know which items are the flex container and which items are the flex items. be tricky looking at your component to know exactly how that works. For example, if I wanted to make this div a flex container, and I wanted to specifically style one of
55:09
the items they're in, I would need to go to the header component or the main content component. And look at the elements, they're in order to give them the class names that are necessary. For example, if I go to header js, this header element will be the direct child of this div. Think of it as react, taking the contents that this header component is returning, and copying and pasting it into this place. When you create your react applications and you inspect with the dev tools, you'll see that this is actually how things end up in the DOM tree. So take some time to play with classname. In this project, see if you can style the main section in the footer a little bit differently. And once you feel good, let's move on to the next lesson. Before we get too much further, I wanted to cover some caveats about the way that I tend to write my JavaScript, you may have noticed that I tend to leave out things like semi
56:11
colons, you may be super used to putting semicolons everywhere at the end of a statement, I personally have recently decided that I kind of hate them. And so I've been removing them from my code. Obviously, there's still some places that you simply can't avoid them. For example, when you're writing a C style for loop, zero semicolon that's necessary in order to separate the three different statements on one line. But for the most part, at the end of statements, they're not really required, and they won't break anything by not having them there. This is totally a personal style decision. And like I said, one that I've only recently made. In fact, it's such a strong habit for me that I may accidentally put some semi colons in future videos. Another personal preference is although ESX technically gives us the ability to put arrow functions everywhere, we used to have the function keyword. For example, I can say const app equals an arrow function. And one of the benefits of this is actually
57:12
that I can actually just wrap everything in parentheses and get rid of my return. And in this case, I could even simplify it like this. I've either not yet gotten used to this syntax, or I simply don't care that much for the look of an arrow function. I think they're extremely useful in certain instances, for example, whenever you normally would put an anonymous function or when you need to write a class method, which we'll talk about later. But my personal preference is to keep the function keyword and it just to me makes it look a lot more like a regular function component. There's a lot of people who will disagree with that. And I'm totally fine with that I totally understand the preference for doing it as an arrow function. But me personally, I tend to keep my function keyword in there for my functional components. I'm not going to necessarily advocate for one way or the other. So that's totally a decision that's up to you. Okay, I just wanted to get some
58:13
of that out of the way. Let's move on. Before we can move on to talk about inline styles and some dynamic styles, we first need to understand how JSX and JavaScript play together, we saw that in the middle of our JavaScript, we're able to return something that looks like HTML, but we've discovered is actually JSX. What if I have a variable that I want to stick inside of my h1? Maybe for example, I have a first name and the last name. And instead of saying hello world, I want to say hello, Bob's a role. Well, I might be tempted to say hello, and then first name, plus space plus last name. But I'm assuming you can figure out exactly what's going to happen here. When I save this. It literally interprets every character that I typed as if it were the text inside of the h1, which is pretty much exactly what we should expect it to do. So how do we jump into JavaScript while we're in the middle of our JSX, they
59:19
actually made it really simple. All we have to do is surround any JavaScript that we want to be interpreted with curly braces. And once I refresh this, you'll see that it actually interpreted everything inside of the curly braces as JavaScript. The way I like to think of this is we're looking at JavaScript, JavaScript, JavaScript, JavaScript, and now we're in JSX land. Once we're in JSX land, which actually started with this less than symbol, everything will be treated as if it were regular HTML, meaning any text inside is going to be literally interpreted. However, as soon as we want to get back into JavaScript, we put a curly brace and now we're back into JavaScript. Learned JavaScript JavaScript JavaScript, closing curly brace tells me we want to leave JavaScript and go back into JSX. And you can do pretty complex JavaScript operations inside here. Since we've mostly converted over to the e6 syntax, I'm actually going to change this to the string templating syntax of ESX, where
01:00:20
you put backticks, and then $1, sign curly brace surrounding any variables that I want to show up, then I can just put a space itself, and that will be treated as a literal text space, then $1, sign curly braces again, last name. And I save that and you see, we get the same result over in the browser. Because this is just regular JavaScript inside pretty much anything that I could regularly do in JavaScript I can do inside of these curly braces. Let's look at one really simple example. Maybe when it's morning, I wanted to say good morning. And when it's night, I wanted to say goodnight, without actually having to come in and change the code manually. Well, I can just do some simple JavaScript to set that up. I'm gonna speed this up really quick, but we'll get a chance to explain it in a second. Here, you can see one example where I've created a new date instance, and simply put in my h1 It is currently about. And then in JavaScript, I got the hours and did a modular 12, so that it would be in a 12 hour clock system. Alternatively, I could check the current
01:01:22
hours for what time of day it is, and set a string equal to either morning, afternoon or night, which let's try that out right now. So here, all I did was set a variable called time of day, and did a simple if else, to check what time of day it was. Then down here, I simply said good, jumped into JavaScript. And said time of day, when I refresh this, I get good night. Because it's nighttime where I'm recording this, hopefully, you can start to see the possibilities that this brings. And we're gonna see as the course moves on that this is actually really useful. We needed to see this right here simply so that in the next video, when we talk about inline styling with the style property, the way that we have to do that, we'll make a little bit more sense. Feel free to mess with this, there's some pretty fun things you can do. Once you're ready, let's move on. Let's pick up really quick where we left off in the previous video, we created this little
01:02:23
application to tell you what time of day it was. Essentially, we want to add some styles with inline styles this time, and we're going to see why this might be the way we choose to do it instead of using a class name. Normally, to do inline styling with HTML, we simply put a style property and set it equal to whatever CSS styles we want. Maybe we want to change the color to be this kind of yellowy color that I just grabbed. Well, let's see what happens when I try to save this. Let me open the console. Notice that it says the style prop expects a mapping from style properties to values instead of a string. We have to remember here that we're not actually inside of HTML. So sometimes the rules are going to be a little bit different. In this case, JSX expects style to not be a string, but instead to be an object, a JavaScript object. So I'm going to delete this and put in an object and say, color colon, and then as a string. That color again, notice that I have
01:03:25
some syntax problems. Remember, anytime I want to change from JSX into JavaScript, I need to wrap my JavaScript with a set of curly braces. This can be a little confusing at first, because objects are also wrapped with curly braces. But in order for this to be a JavaScript object, I need to wrap it in curly braces. So we end up with two sets of curly braces. Now when I refresh this, you'll see that I get my more orange or yellow color as the color of this text. If I want to add additional styles, because this is an object, I just add another key value pair. For example, maybe I want it to have a background color of this somewhat red or color that I got. Well, what's my problem now take a second to see if you can figure out what's going on. Remember, because of this set of curly braces over here, we're actually inside of JavaScript. And inside of JavaScript, I can't have a dash in the middle of my property name. I technically can in regular JavaScript by surrounding this with quotes, but that's beside the point.
01:04:30
Because of this inside of the object where we're defining our styles. We're going to change anytime that there's a dash, we're going to get rid of the dash and make everything camelcase. This right here is the legitimate style object. Let me refresh. And you can see now we have a different background color. As you might imagine, this style object right here may end up getting longer and longer, in which case this h1 line is going to become really long and it looks a little bit ugly. to split this out onto separate lines, so what I prefer to do is actually make a separate variable. Let's just generically call it styles for now. And put this entire object into that variable. We can split this onto its own lines without it looking funny. inside of my curly braces here, where I'm now inside of JavaScript, I can just put variable name. And that's going to be exactly the same thing. Notice when I save, it continues to work. What's nice about this is as I continue to add styles,
01:05:34
it doesn't clutter up my h1 down on line 24. There's a number of little tiny quirks that we have to remember when we're doing these style objects. For example, anytime I have a measurement that's going to be in pixels, I technically can just put the actual number value in place, and the default will be pixels. So when I save this, you see that I get a slightly smaller font. But 200, I get a really big font, and so forth. I can also still specify pixels. But obviously, that's not going to work with numbers by putting 200 pX because that's not valid JavaScript anymore, I need to turn this into a string. And now it's valid JavaScript again. And then anytime I want to use another unit like M or VW or percentage or something like that, I will also put that as a string. Also notice once again, that I've replaced the dash with a camel cased version of font size. There are some pretty interesting limitations with
01:06:36
this. For example, it looks pretty funny when you have to add things like vendor prefixes. But there's other things like pseudo selectors, such as colon hover, that become actually impossible to do inside of these inline styles. If you need something like that, for now, you're better off just doing that in CSS and using class name. And in the future, you can learn about really cool styling libraries, such as styled components. For now, we're just going to keep it simple and stick with either inline styling or using class name and using CSS styles. You may ask yourself why you would ever want to even use an inline style like this. Well, one reason is that you may want something to be more dynamic, in which case JavaScript would actually determine what the styles are. Let's take a quick look at what that might look like. Notice what I've done here, where I moved the styles up here above my if else, and set a default font size of 30 pixels, then I let my if else in my JavaScript actually determine what color the font is going to be, I changed not only the time of day string, but I also changed the color property of my styles object. Because
01:07:41
it's an object, I can access and create properties just by using the dot syntax. If it's morning time, I use this color. If it's afternoon, I use this color instead. And in any other case, when it's night, I use this color instead. Because I'm recording this at night. This red color is the one that's actually showing up. But let's see what happens when I create the date not for the current time. But instead for a time that was this morning. This is the year, a month today. Let's say it's 10am. I save this, notice that we get instead the color that is the color for morning. If I change this to, let's say 15. And it's hard to see, let me choose a different color for the afternoon. You can see a little more clearly this is choosing a different color for the afternoon. This may be a little bit contrived. But the point is we can have dynamic data that actually changes the way that our hard coded components display. Take a second to try and think of
01:08:46
different things that you may be able to accomplish by having these kinds of inline styles. I'd also at this point, recommend spending as much time as you can to really solidify the stuff that we've covered together. So far, we're about to come up on a topic that typically is a little bit challenging for some people to really help you to make sure that you understand everything we've talked about up until now. In the next lesson, we're going to talk about a concept called props, and how we can make our components quite a bit more reusable. Props is a super exciting topic. And we're about to get into parts of react that make it extremely useful. So get excited. And let's move on to the next video when you're ready. Alright, so let's pick up where we left off with the to do list. Now that we understand Parent Child components and how a parent component can render a child component, and we understand how to inject some styling into our react apps. Let's progress our to do list forward a little bit. So before we get to styling, what I want you to do is to take these input
01:09:49
and paragraph pairs, and I want you to put them into their own component called to do item. For now it will still have just this hard coded placeholder text here paragraph And later, we're going to learn how we can actually make those different. But that'll be the first thing to start with. And then essentially, you have a blank canvas to paint whatever kind of picture you want, you can make this look as traditional or as weird as you'd like. So go ahead and hit pause and give that a try. Alright, so the first thing is moving each of these into their own component. So I'm just going to copy this and create a new file called to do item dot j s. And while I'm still here, I'm going to import the new item from that file. Let's go over to to do item, we'll import react from react, create our functional component, we'll just return the thing that we copied before. And
01:10:56
remember, I can only have one element that I'm returning at a time. So I'll wrap this all in a div. And then over in app j s, we don't need these anymore. But instead, we can just create instances of our to do items. And everything looks the same. Now since this isn't necessarily a course on styling with CSS, I'm basically going to cheat right now, I'm going to set myself up by creating a class here of to do list. And over in my to do items, I'm going to give this div a class name of your item. And I'm basically just going to paste the styles that I've already created. Okay, and you'll notice that let me make this a little bit bigger. And notice that I just kind of came up with a cool little paper looking stack and have a checkbox next to each one that's a little bit prettier, with nicer font and little separation and so forth. Obviously, you're welcome to pause this and look through
01:11:58
some of the styles that I have. But it's really nothing too fancy. And since I'm not really a wizard at CSS, stuff like this, with the cool little effect on there, I basically just found online. main takeaways, though are to remember that if you want to apply class to your elements, you'll need to use class name instead of class. And if you wanted, you could apply some of these styles just right here in line. So with a little bit of CSS styling, our to do list is already looking a lot better than it was. Now we are checkboxes do technically check and uncheck but what we're going to do is make sure that when we check these, some actual data is changed, which will allow us to do something cool, like put a little strike through through these texts. Once you feel pretty comfortable with this, let's move on. Let's talk first about the concept of props in react. To do so we're going to look at just a regular HTML file, notice that this has nothing to do with react. This is just
01:12:59
a basic index dot HTML, I want you to take a close look at the three elements that I've put inside the body, the anchor, the input and the image and think about what's actually wrong with them right now. None of these things are actually going to do anything important. anchor tags need an H ref for them to make any sense at all. This way, the HTML spec can define the anchor tag once and allow us the ability to change the place that the link sends us. For example, here, I may put a link to Google. Or obviously, wherever I want to send the user to in this link, an image tag is very similar. An image tag alone without the source property is pretty useless. An image element needs a source in order to function correctly. This may either be the path to a local file or the URL to an image hosted online. In those two examples with anchors and images, the href and source properties respectively, are required. Inputs technically will show an input on the page. But I can
01:14:05
beef it up a little bit by adding additional properties such as placeholder, or the name property, or the type property type is an interesting one. Actually, it allows me to change this input to be multiple different things. For example, this may be a radio button or a checkbox or a regular input. That input could be either text or an email or a phone number, and even changing it to a submit button. A lot of times these are called attributes. But another legitimate word for it is a property. If this simple concept in HTML makes sense to you, which I assume by now it probably does. Understanding props in react is not too difficult. Instead of using the built in HTML tags, since we're creating our own components, we can actually make it so that we can allow properties to modify the way that the component acts. So in the next video, we're going to see how we can actually do that. I want to make one more conceptual point before we actually get into using props with react.
01:15:09
This here is from the YouTube homepage. And while I'm pretty sure the YouTube homepage doesn't use react since Google is the main backer of Angular, the concept will remain the same. Think for a second how this page may be developed in react, something you'll begin to get really good at doing is noticing how something can be divided into separate components. For example, notice that each of these separate pieces of the page are all very similar in their own way. If you notice, each one of them has an image on the top that takes up about the same amount of space. Each of them has a title, which is in bold and appears usually directly below the image. Each one has a number of views. Each one tells you how many days ago it was published, each one has a little timestamp inside of the image that tells you how long it is, you can imagine that the creator of this page didn't actually go into the code and copy and paste this a bunch of times. If this were developed in react, then you can imagine there might be a video title component that is created. And
01:16:11
that component has a number of components inside such as an image, maybe an h3, a little timestamp box, and so forth. The main point of what I just said is that it will be a single component that's developed once, but we need to make it so that that component can change depending on the different properties such as the image URL or the title. That's what we're going to be working on in the next video. Right before we move on, though, I wanted to get you used to the idea of thinking in terms of react back a few lessons when we talked about parent and child components, that tree can go as deeply nested as you want. In fact, you can see here, we have different lists. So there may be a component that is a list component, which renders a number of video title components, which in themselves render an image and an h3 or whatever, like we talked about. Also, over here on the left, you can see a number of things on the page that may have only been developed once as a single component. And then given a property of maybe a little image on the left and the
01:17:14
text that should show up as part of the link. Hopefully, you can see how the idea of web components and reusable HTML is really powerful. And this can help you understand why frameworks like Angular and react and Vue JS are very popular. So that's enough with the conceptual let's move on to some code and see how we actually do this in react. So let's take a look at an example where it would be really nice to have separate components, but not just separate components. But those that could take different attributes or props in order to make them a little bit more dynamic. Here, I've created just a really basic contact card list, where it shows the image of the contact and a name for the contact the phone, and email. Right now I only have four contacts and my contact book. To start, we know that it would be really nice to take these pieces of repeated HTML code and put them into their own components. But from what we've learned so far, we would actually have to create four
01:18:15
separate components, one for each individual contact, but that's not really gonna work for us. So first things first, let's actually create the component. And then we'll learn how to make it more dynamic. We're going to create a new file called contact card, Gs. And I'm going to take this div, which is the repeated div across these four contexts, and just copy it. And I'm going to start a new component. If you'd like, feel free to pause the video and see if you can figure out how to do that. As always, for components I'll need to import react from react Yak. And I'm going to export the function that I'm about to make my spacing here. And this is a great start. The problem with this is that it has a hard coded image source,
01:19:17
a hard coded name, hard coded phone, a hard coded email and so forth. Instead, we're going to want to figure out a way to make it so that this contact card when I make separate instances of it will be able to take as properties the different information that I'm going to put into these places. Another quick conceptual point you can think of has to do with functions, which actually mirrors pretty nicely what we're doing because we are using functional components. When you create a function, let's say add numbers. Maybe this function returns the result of one plus one. Well when I want to do an operation with one and two, or one and three or two and three, I'm not going to want To create separate functions for every single one of them. Instead, we use function parameters, maybe a and b. and make it so that any two parameters we pass into this function, we can get a different result depending on those inputs. The same concept of adding parameters to a function to allow the function
01:20:20
to be more reusable is the same thing we're going to be doing with react components. Let me delete this. In order for us to illustrate this, let's go over to App j s. And I want to be able to replace all four of these with the individual information for each component. But let's start by actually putting the component in there, I would like to be able to say, I want a contact card here. And I actually want four of those. Well, for this not to fail, I need to import contact card from that file. And now comes the time to actually pass down individual information for each contact card, just like we did with regular HTML where you pass in an attribute or a property right here, we're going to do the exact same thing, except this time, we get to decide what the name of that prop is. For example, each of these contact cards has four pieces of dynamic information, the image URL, the name, the phone number, and the email address. So let's pass a property down for each one of these,
01:21:24
it's actually pretty simple, I'm going to say name, equals, and then put in the name that I want this contact card to use. And I'll do the same for the other information, image URL on an email. Now, for me personally, when these start to wrap on two separate lines, I like to put everything on its own line and in rented, I'm gonna do that really quick. I'm going to go through and do this really quickly for the rest of the contact cards, putting each of these individual contact card information into properties of the contact card component. Notice when I just refreshed even though I've put separate different pieces of information into each one of these contact cards, I'm still getting Mr. Whiskers send four times. The reason is a contact card currently has hard coded values inside of itself. But we're
01:22:29
passing in separate props, name, image, URL, phone, and email. So let's see how we can inside of contact card j s access the data that we're passing down to the contact part, over in contact card, one thing that we haven't put in quite yet, is inside the parentheses here in this function, it's going to take a parameter called props. Because it's a function parameter, you technically can call it whatever you want, but it's a strong convention to call it props. Props is an object that has properties of that object, each one being a prop that you passed in, or rather, the name of the prop that you passed in. What I mean by that is, we will have inside of contact cards will have props dot name, and props dot image URL, over in contact card j s. Let me just console log ops.
01:23:30
Take a look. Take a look at this, we got four console log entries, the reason being we have four instances of our contact card component. And the props are an object with a name, image URL, phone and email properties. This means now inside of my code, instead of having hard coded values here, I can use the property of the props object that's coming in. So I can say source equals, and I can't just say props dot image URL, think for a second why that doesn't work. And think of how you might fix it. Remember, when we're switching between JSX and JavaScript, we need to use curly braces around our JavaScript. We can do the same thing for the other values here as well. Props dot name. Here, I can leave phone colon space as a hard coded value. And then just replace this with props phone in the same thing with the email. Now when
01:24:40
I refresh, I actually get my four separate contact cards with the individual information. I'm going to delete this console log so it's not cluttering things up. And as easy as that I now have a component that is reusable in a lot of different ways. Now at this point, I want you to think What would my component look like if my contacts had, say 50 properties to them over an app js, each of these contact cards would end up getting pretty long, right? I would have a prop for each individual thing that I'm saving about that contact, which like I said, perhaps could be something like 50 different properties. Another legitimate way to do this is instead of passing down each part of this person or contact as an individual property, I could pass down an object that was the entire contact. For example, instead of name, image URL, phone and email, I might simply pass down a prop called contact, whose value is an object. Remember, I'm going between JavaScript and JSX here, so I need
01:25:46
to put a double set of curly braces, the first one getting me into JavaScript, inner one being the object itself, that object would have a name, an image, URL, phone, and an email. This technically would allow me to get rid of these four properties, and just pass down the single property called contact. Now, this may not actually look better than what we had before. But we're going to see eventually how this data isn't usually hard coded in like this, but rather comes from something like a JSON file, in which case, it can be really nice to pass down the whole contact as a single prop. However, our component is going to be broken now. Notice when I refresh, the only thing that shows up are the phone and email hard coded text. Pause the video and try to think why that might be. The reason is over in contact card, we're receiving a props object, and we told it that that object
01:26:51
would have a property called image URL and phone and name and email. However, for our first contact card, we're no longer passing a phone, email and name or image URL. Instead, we're passing a prop called contact, which is an object. So let's go over to contact card, pause the video and see if you can fix this to work. If you're having trouble, one thing that may help is to console log prompts. See what's actually showing up here. Okay, now that you can see this console log, give it a shot again. Notice the first one is not receiving a name, image URL, phone and email like I mentioned before, but instead is only receiving a single property contact. And that contact property is an object, which means I would need to change everything to props dot contact dot image URL, and props dot contact dot name.
01:27:53
And the same for these other ones. Now, of course, when I refresh, I'm going to have a major problem because my other components aren't receiving a prop called contact, therefore, it's undefined. And I'm trying to access the image URL property of undefined. So this won't just not show up, it's actually going to crash, which means I need to go back to App j s, and fix each of these other contact cards. I'll spare you the monotony of watching me do that and speed this up. Okay, that was pretty tedious. Let's refresh and see if that works. Okay, now we're working again, our contact card is passing down a single prop called contact, which is an object that has all of the properties that we want. Again, normally, this won't be hard coded, but instead would be something you get from a data file, such as a JSON file, which we're going to cover in a future lesson. And over in contact card, I'm receiving all of my props as an object called props. And since I only pass the single prop down, I have props contact, but props contact is an object. So that has
01:28:58
properties itself like image, URL, name, phone, and email. Again, this concept can be a little bit tricky. And I totally understand if this didn't make sense the first time through. As I mentioned before, the sweet benefit of schema is that you can pause this and actually mess with this code. So even if you feel like you understood this, I'd really appreciate if you pause the video and go through and actually mess with this, change the data over in app j s, see if you can then reflect it to show up correctly on contact card. Also, feel free to go grab different image URLs and put those in and see how it affects the code. More you mess with this more likely you'll be to actually understand it well enough to implement it yourself. To Go ahead, give that a shot. And only after you feel really comfortable with it, move on. Okay, I'm sure this has been pretty obnoxious. But this is the very last time I'm going to ask you to do this. I want you to create another react app from scratch. Obviously the repetition is going to be really good for you and what this react app should do is render an app
01:30:02
component which should be in its own file. And the app component should render five joke components, we can see that this is going to help us practice the parent child component tree, it's going to help us practice putting components in their own files. But the main thing we're going to practice is passing props down through the joke component. So each joke component should receive a question prop and a punch line Prop, and then render those to the page however you want. That's just kind of the basic part of the practice. But I've added a little extra credit section, which I'd really encourage you to try. So in this case, if your component does not receive a question prompt, you need to think how might you make it so that it only shows the punch line instead? For example, if you've hard coded in a question, text that says, a question colon and then appstack question. Obviously, this syntax is incomplete. But how are you going to make it so that you don't have question, colon, and then an empty space? Also, while you're at it, see what happens when react
01:31:02
receives a prop that's undefined? If you don't have a question colon, and you're also not passing down a question Prop, see what happens. And while you're at it, spend some time practicing the style, if you joke component, make it look good. So pause the video do this practice. And we'll go through this together in just a few seconds. All right, I'm gonna delete this. And I'm gonna actually leave some of these comments here, just so that I can remember exactly what to do. We know we need to in a basic setup, import react, and react, import react DOM, React DOM, when to use react DOM. To render our app, we're gonna put it at the root element. Don't have apps, I'm going to import app from a file called app that doesn't yet exist. And I'll create that file. Now. I put a app.js. Over in that file, I need to again import
01:32:06
react from react for the app component that I'm about to make, wrap everything in a div. Okay, and here, we're going to render our five joke components, that should be capital J 2345. Now for this to know what I'm talking about, when I am trying to create an instance of a joke component, I will need to import that. And that doesn't exist yet. So let's make that I'll create a file called capital J joke. dot j s. And over in joke j s, let's again, import react from react. Default joke. And before I get too deep into playing with props, I'm going to just have it render something simple
01:33:08
just to see if it's working. I may have forgotten something. But let's check this out. Okay, yep, my five highs on the screen, which means my five jet components are working. React Dom dot render is rendering the app component, the app component is rendering a div with five joke components. And the joke component is just rendering an h1. And that's how I'm getting five highs on the screen. And that's the tree that we're working with. While I'm still in this file. I'm going to work on the props here. So I know that I need to pass in a variable. I'm going to call it props because that's the standard. And let's start with something simple. I'm going to render a div with maybe a couple h threes inside. One will have the question. One will have the answer. If you
01:34:09
had gotten stuck anytime before this, I'd really like you to pause the video and go review these things that we just went over and then try it again from scratch. You can go back in time to the beginning and actually try to build this out yourself. Then once that makes sense. Come back to this point and move on. Now if everything did make sense up to this point, pause the video here and see if you can figure out how are we going to get the question from our joke that's being passed in. Of course right now. It's not yet being passed in the wind it is how are we going to place it right here. Remember, we're inside of JSX right now. So I can't just say props question because that would literally put the text prompts question here. When I want to go inside of JavaScript, I need to surround it in curly braces. Notice that I get nothing On the screen, think for a second why that might be. Let's actually console log prompts question. Open the console and
01:35:12
see what shows up. That's what I get. No. That's because this joke component when I'm creating instances of it in my app, I'm not actually passing in a question or a punchline prop. So when react tries to render a component, and we're not passing it any props, everything will be set as No. What's really cool about react is if any JavaScript inside of JSX evaluates to something like undefined or no, it simply won't display it. This right here is going to be something we need to figure out how to fix when we have our joke components that don't take a question prop. But for now, let's assume that they all have a question and an answer or a punch line. So over here, I'm going to also add props dot punch line, and they can delete my console log here. Let's go back to App j. s. And let's actually provide a question in punch line for every one of these jokes.
01:36:16
As I mentioned in a previous lesson, I prefer to put these on their own lines, if they start to get so long that they're wrapping around. You may decide this isn't your style. And that's totally up to you, I still go back and forth as to whether I want this closing bracket to be on the previous line or not. So let's refresh this and see what we get. Cool. Everything's a little bit squished together. So you may decide to do something simple like at the end of a joke, you may put a little break tag, or maybe something like a horizontal rule. But obviously, however you want to style it is totally up to you. And there we have the basics of the first part of our exercise. Now, as we see in the extra credit, some jokes are only a punch line with no question. And as it stands, I have this hard coded word question colon space here. I provide a joke that doesn't have a question. Like my favorite one only has a punch line. See, when I render
01:37:24
this, I get a question with nothing there. We're going to talk in a future lesson about conditionally rendering parts of our page. But for now, think about the way that we style our page and see if you can think of a way that we can make this disappear if there is no question. So video and give that a shot. Again, there's actually going to be a real way we do this with something called conditional rendering. But for now, you may find a way around it where you can say I want this h3 to have a style feed display of none under certain circumstances. But afraid here I use the ternary operator to decide what that should be. inside of my object I could say essentially is props that question a thing? Is it truthy, if so displayed in the regular block format, but otherwise displayed is none. Notice that my first one has an h3 that is now displayed none because it no longer has props question.
01:38:26
If you're not very familiar with ternary, I highly recommend you go spend some time learning about them because they're actually used quite often in react. Another slightly more concise, but perhaps more confusing way to write this would be instead of using a ternary. And having a default of its own default, like an h3 being display block. We can get rid of that. And we could actually say if there isn't a proper question, then we want to display none. But otherwise, basically ignore this rule totally. If you're not familiar with using the double ampersand in this way, we're going to talk about it in a future lesson. But just know for now, this totally works. You can see over in my browser, I have just an answer to my joke that doesn't have a question in it. But the question does show up in all of these other instances. Now if you look at my joke that doesn't have a question, it doesn't stand out very much. Maybe you might decide that you want your answer only jokes, your punchline only jokes to look a little bit different maybe to be grayed out or to be a totally different color or underlined.
01:39:26
I don't know something, also video for a second and think how you might do that using inline styling and JavaScript the way that we did in line six. Maybe what I might do is on my answers, h3 is add an inline style with an object it says the color should be and then do something similar to what I have on the question art on the h3 above where I say if there is no props dot action, then I might want the color to be I don't know some kind of gray This is pretty contrived. But you get the idea, we can start using the different props that come into our component to display things differently. And as such, our joke component is now more or less reusable, we can add jokes that just have punch lines and jokes that have both questions in punch lines. And automatically the joke component knows how to style itself based on the incoming props. And that's pretty much it for this practice, feel free to pause this and play with this as much as you want before moving on.
01:40:31
Alright, so we're going to pick up where we left off in the previous practice with our app component rendering a bunch of joke components. Some of these have the punch line in them, and some of them have a question and punch line. But you can see right now that they're hard coded into our components written directly as text. In reality, most of the data that you'll be displaying on a page will actually be coming from some kind of HTTP call to an API, where there's a server that hosts the database, and that database and server are returning JSON data to you. We haven't quite gotten to the place where we can make API calls quite yet. So what I've done is I've made this file jokes, data j s, and it's just an array variable that I'm exporting. And that way in a component, if we want it, we can pull that in and pretend like that's us getting data from an API. So how am I going to take an array of raw data and turn that into a number of components? Well, there's a common saying for those that are learning react, where they say that react helps them
01:41:33
become better JavaScript developers. And the reason is, because things like this are oftentimes handled by methods and kind of magic under the hood for other frameworks like Angular or view. But in react, a lot of these simple operations are handled just with vanilla JavaScript. Let me show you what I mean. With a quick aside, we're going to talk about some higher order array methods. If you're not familiar with these, these are methods that you can run on an array that take a function as a parameter and allow you the developer to decide exactly what should happen to the elements in that array. For example, if I had the following array, I can run a higher order method on nums. All map, and map is a method of the nums array, and it takes a function as its parameter, this function will receive each individual number in the array. So I might say num or number, Tim, this function will then run on every single item in the array. And with map, whatever
01:42:37
I return from my inner function here, will be placed in the same index of a brand new array with some kind of modification, meaning map actually returns a brand new array, so I'm going to save a new array called maybe doubled. Now, if I from my inner function, return, num times two, doubled should be an array of 2468 1012, and so on, let's take a look. And there's my array of all the double numbers. If you're not familiar with higher order methods, they're one of the key components of functional programming in JavaScript, and they're really, really awesome, I'd highly recommend go study up a little bit on map, and filter and reduce, and some of the other ones that are really useful. With this, we're gonna stick with map and we're gonna see what we can use it for. So the first thing I'm going to do is pull in my jokes data importing. And then we're going to follow the same pattern
01:43:40
that we did in our example here, I'm going to say, oops, data dot map, provide a function. Now before I typed the longhand function, so that it was a little clear what I was doing, but we're going to use an arrow function, which can just as legitimately be used here, function is going to receive each individual joke object, so I'll call it joke. And with arrow functions, if I just have one parameter, I can get rid of my parentheses. And what I'm going to return from this inner function isn't some modification on the joke objects per se, but rather, I'm going to return a component joke component and pass in the data from the individual joke object that I'm looking at. Because I'm only returning a single component, I can actually just do this on one line if I want. And if you're familiar with arrow
01:44:43
functions, there's an implicit return so I could actually get rid of some of that extra stuff. If this is confusing at all, then feel free to put the return in there. It looks like I have an extra space there. And remember, map returns A new array. So I'm gonna save that in variable. And now I have an array of components. So what am I going to do with an array of components? Well, React makes it really nice, where I can just put an array of components directly here in my JSX. And if I refresh this, you'll notice a couple things. First of all, my jokes on the right are working again, just like they should be. And second of all, you might have noticed this little error that popped up that says each child in an array or iterator should have a key Prop, we won't go too much into the details of why react expects a key prop on repeated components. But it's enough to know that whenever you're doing a map like this, you should give the component that you're
01:45:45
creating over and over a new prop called key. Now, whether you're putting this on a component that you've created, or some kind of div that you're surrounding it with, doesn't really matter. Just give it a key prop and put something unique inside the key prop. Usually data from an API will include some kind of ID number or something else that's unique about it. As long as it's unique, it should be fine. Here, I could use the question because the questions are all unique. But I've also included for the sake of mimicking real data, some ID numbers that I might decide to use instead for my key. So over in app j, s, key is going to be choke.id. Now when I refresh, my warning goes away, my app js is much cleaner than it used to be, my data is coming from somewhere external, like it would in the real world. One of the main takeaways, though, is that we're just using the built in JavaScript map method on arrays. In fact, I'm going to include some links to the MDN docs on these methods
01:46:46
that will be really helpful for you to understand, if you don't already feel comfortable with them, you can see on the far right in the last part of the URL exactly which method it is that this URL is going to be talking about in this course, will mostly be using map, but we may throw in one of these other ones every now and then you don't necessarily have to go memorize these perfectly right now. But this is just some more material that you'll definitely be interested in learning about. Something else that I just thought of that may be really helpful to you is to realize that things that we're teaching here, because so much of react is just vanilla JavaScript, you can use these things as tools to do a lot of what your imagination could come up with. For example, as I'm iterating over a joke component and creating a number of jokes, I may find a reason to also put a map inside of my joke component. And I end up with a loop inside of a loop, where each joke component renders an array of its own components. That's totally possible. And it's as simple as putting another map inside of your joke component. One joke component gets rendered, it renders a number of other components.
01:47:49
The second joke component gets rendered, it also renders a number of other components and so forth. Some of these other methods, like sort, for example, may be used to put things in an order that you prefer, or something like filter could only display certain elements of an array rather than the entire array. If you want an extra challenge, try making it so that our array of joke components gets filtered to only display those that have fewer than X number of characters in the question, or maybe filtered to only include items that do have a question rather than those that are just an answer. This is pretty much everything we have to learn about map right now. So when you feel pretty comfortable with this, go to the next lesson to practice it. Okay, so I know I told you, I wasn't going to make you create the entire react app from scratch. But I didn't make it a whole lot easier for you. I did put the basics in so it's rendering an app component. And the app component is just rendering an empty div right
01:48:52
now. And here we have the instructions for this exercise. So given a list of products as an array, which will be the products data that I'm importing from the file called visco products, you need to create first and then render a product component. For each product in the list, you're going to have a chance to practice creating your own functional component, passing props to it, and rendering the correct things to display inside of that component as its receiving props. And you'll also need to practice using the map method on the products data. This array of data is just an array of silly objects that I created for a presentation that I gave last week here in Salt Lake City. And each object has an ID, a name, a price and a description. You won't necessarily need to display the ID as text on the page, but try to think of what this ID might be helpful for. So I will go back to the app and I'll give you a chance to give this a shot. Good luck. Okay, let's start with just a really
01:49:54
basic product component. So I'm going to create a new file and call it product dot j s Which I'll need to import react from react and export product. It my functional component already know this is going to need to receive products. So I'll put props there. And let's just return some really basic JSX. For now we'll wrap everything in a div. I have, let's say an h2. For the props dot product dot name. Now this is a nested object because I anticipate passing the entire product down as one object rather than passing down each individual property of the product individually as a prop. Instead, I'll just pass the whole product down as one object and access the properties through props dot product, dot and then the name of the
01:50:58
property. Down below it, I will put a paragraph put $1 sign in front of props dot product, price. And then one thing I'm actually going to put here is a string method called to locale string, which allows me to display this as currency. And I believe if I do that, it will automatically put the dollar sign there for me. So I'm actually going to take my dollar sign out. And then after that gets evaluated, I might do like a dash and put the description. This is pretty boring. But I'd spend some time if I were you styling this and getting some more practice with styling. So over in app j s, I know that I'm going to be rendering a number of product components. So I need to first import my product component file. And at the top of my functional component here, I'm going to create a new variable called
01:52:04
products. That's a product components. That's going to be coming from products data dot map. So products data dot map, again, we'll create a new array, and we're going to make sure that array is filled with product components. So this will receive an individual product or item. Maybe I'll say item just to distinguish it from all the other things I have named product. I want this to return a product component where the product is my item. And now that I have this array of product components, I'm going to put it inside of my div here and try refreshing. Cool. One thing you notice is I got that warning about the key prop over here, I will also add a key property. And I'm going to pass in the items Id just to allow it to have something unique so that react can correctly place everything the way that it wants to. And I need to fix my spelling here. Let's try refreshing again,
01:53:08
everything is showing up correctly on the right, and I no longer have that warning popping up, which is great. I'm a bit of a stickler for correct indentation, so I'm going to fix by indentation here. And this essentially is the completion of this exercise. Take some time to try and style this, see if you can display things a little bit differently. Play with adding products to the visco products array and see how that affects our website. One thing I didn't show is that I can scroll down here and see all of the other products that are listed in that array. Maybe try building a button that when it's clicked in each product tops up an alert with the information about that individual product to spend some time with this. And once you're ready, we're going to talk about conditional rendering. Let's use what we just learned about mapping and props to make our to do list a little more dynamic. What I've done is I've created a to dues data js file here and all it is doing is exporting an array of objects each object representing a to do item. Now normally,
01:54:11
you wouldn't do it this way, you would get this data from an API of some sort where the data is living in a database. But since we haven't really gotten there, this will do for now. Then over in app j s, I've imported that data as an array called to dues data. So your task is to essentially turn this array of objects into an array of to do items. Now remember right now to do items are hard coded with what they're displaying. So that will also need to change. Go ahead and pause the lesson and give this a try. So the first thing I'm going to do is take my array and turn it into an array of to do items, then we'll have to fix to do items so that it can receive props before my return. We're going to create up An array called to do items, which is the result of doing to dues data dot map, which will pass a function to that receives an item. Essentially, we're
01:55:15
just going to create a to do item. And we're going to pass the information from the individual item object down to to do item currently to do item doesn't accept anything, but we'll fix that in a minute. So I'm going to pass a prop called item. And its value is going to be the object. And now that I have an array of to do item components, let's take these out and replace it with my array of to do items. Okay, and you'll notice that I forgot to put a key prop in here, always an important thing to do. And with the two dues data, what I've done is added an ID property, these IDs we can assume will always be unique. And so over in app j s, I will just add a key. Let's say it's item that I be rid of that warning. Now notice that I still have placeholder text here. But now I have it five times. And that's because I have five items in my to dues data. But to do items still has placeholder text here
01:56:19
hard coded in it. Well, we're passing an item prop down. So let's go over to to do item, have it accept props. Instead of putting placeholder text here, we will simply say props dot item dot txt, dot txt, because that's what the property is called in my object. So I save this. And there we go. We have our to do item showing up. And essentially, we're declaratively turning an array of raw data into elements on our application. Now, it's actually going to be quite a while in this course, until we learn about forms and learn a little bit more about how this input type checkbox works. But what I can do is give you a little hint as to how to make it so that the checkbox is checked, when the item is considered completed. Over in the data, you may have noticed that I've set a couple of these to complete and true. Let's make it so the checkbox actually gets checked. When that happens. Again, we're
01:57:21
going to cover this quite a ways down the road. But just so you know, for now, every type checkbox gets a property called checked. And essentially, it tells the checkbox whether or not it should be checked, if the thing inside is true. And it will be checked. And if not, it won't be checked. This is going to throw a little warning that basically says you've added a checked property, but you can't change it ever. So it doesn't have an on change handler. But for now, that's okay. We'll cover this again in the future. But you can see in my window over here, take out the trash and mow the lawn are already considered completed. And you'll see when I tried to uncheck it, it won't let me like I said, we'll fix that in the future. But this is kind of a cool little addition we can make now, hopefully that wasn't too difficult. If it was feel free once again, go back, rewatch everything, catch up on any of the lessons that you may have struggled a little bit through up until now. And once you ready, let's go
01:58:22
forward. If any of you have done a react tutorial before this one, you might be curious why we're using functional components instead of a class based component. When I'm teaching react, I prefer to start with functional components simply because functions are really easy to understand. And it's obvious what we're doing, we are simply creating a component with a function that returns the UI that we want to show up on the page. But as we go deeper and deeper into react and start learning about some new parts of react, we're going to find that a functional component can't do everything that we need it to do. And so at this point, what we're going to do is actually learn to create a class based component. For now our class based component is going to do exactly what our functional component does. And then in upcoming lessons, we're going to talk about what class based components can do for us, such as allowing us to implement state and lifecycle methods. But for now, let's just look at converting a functional component into a class based component. If you're not
01:59:22
really familiar yet with the class syntax in e6, then I'd recommend going over to the scrim by six course and learning a little bit about classes. So instead of converting this functional component to a class component, I'm actually just going to create a new app class below it. And that way, we can kind of compare the two. The class base component will always start with the class keyword. And we're going to give it the same name of the component as we had before app tip instead of parentheses and curly braces, we're going to extend react component and if you're not familiar With classes or what this is doing under the hood, essentially, this is still using a prototype system in JavaScript. And it's setting up a prototype with react component, all that really means is that we're getting a bunch of goodies from react component that are pre written for us. And we're gonna get a chance to see that in upcoming lessons. For now, I'm just going to open this with a set of curly braces. And every class based component at least needs one method, and that
02:00:26
is the render method, and it actually needs to be spelled exactly this way. And then render will return exactly what we have in our functional component. In this class component is identical to the functional component we had above. So I should be able to comment this functional component out and save to watch the browser refresh. And we have exactly what we had before. Now let's take a look at our render method. Anytime we have any kind of display logic, that's going to happen, I prefer to do it inside of my render method before the return. For example, you might remember a few videos back where we created a date object. And then we use that data to determine what time of the day it was. And we displayed in the text and used some styling, and all sorts of stuff like that. If you have any code that determines the display logic, or in other words, what exactly is going to show up on the page or
02:01:27
what the style of that element will be things like that can go right here inside of the render method before you do the return. So this is a good place to set up your style objects. If you're doing any inline styling, running the logic that will determine how something will get displayed on the screen, things like conditional rendering, all of that can happen here inside of the render method. Now, if you're familiar with classes, you technically could also take that and put it inside of a method of your own a class method. To do that, above render, you would just enter your own method right here. inside of this method, you can do any kind of display logic that you wish. And then from inside the render method, you can call your method by using this dot and then the name of your method. If your method returns something, this is where you put that a few lessons in the future. We're going to talk about some caveats with this. But for now, it's just
02:02:28
as easy to put your display logic here inside of the render method. There's one other thing that we have to touch on before we're done with this. And that has to do with props. In our functional component, we could pass props to the function itself, then inside of our code, we would just say props dot, whatever the property was on the props object, there's only one small change we have to make with the class base component. And that's that anytime we use props, we need to make sure that we are using this dot props. It's a pretty common thing to forget to do, especially when you're converting from a functional component to a class based component. But it's also a bug that you'll get really good at catching and being able to fix right away. And before this becomes confusing, I realized I forgot my curly braces up here. And to be consistent, we will add a dot whatever here. As I mentioned at the beginning, class base components enable us to do a lot of really cool new things with react, we're going to be covering those over the next few lessons.
02:03:31
But for now, let's get a chance to practice this. So take a second to play with this code. And once you're ready, let's move on to the practice in the next lesson. You can see that I've set this up where I just put all three of these components in the same file. And as I mentioned before, you obviously would want to put these in separate files normally. But for the sake of practice, we're just going to keep them here so you can see everything at once. And as you can see in the challenge, all you have to do is convert all three of these functional components to be class based components. And also there's a small bug inside of this program. So see if you can find it. So now's the time, pause the video and give this a shot. Okay, hopefully this wasn't too difficult. All we're going to do is every time it says function, and then the component name, we're going to change that to class. We need to extend react component, get rid of our curly braces. And then instead of having a bare
02:04:34
return here, we need that to be inside of a method called render. And take this return type here, fix my spacing. And that's it for the first one. The second one is essentially the same thing except now we have props and we have to remember exactly what we're going to do when we have props. So Then function will become class will extend react component and get rid of the parentheses, put my return inside of a method called render. And then the one thing that's always really easy to miss here is that instead of props, it needs to be this dot props. Because this is a class based component. This third component looks a little bit more complex. But essentially, it's the same thing. Class greeting. And,
02:05:35
and now, like I showed you in the previous lesson, we could decide just to put component here, which then means at the top, we would need to import react and component, then all of this logic is also going to go inside of the render method. Looks like this component is not using props anywhere, so I don't need to worry about changing that to this dot props. And you can see I still am getting exactly what I had at the beginning. Now hopefully, you'll also notice that there's a bug here, it says welcome, comma, and then a space with nothing in it. If you didn't do this in the beginning, take a second now to try and figure out why that is. Well, let's look at the component that's in charge of actually displaying this. And that's our header. Here, we notice that it's
02:06:36
saying welcome, this stop props, that username. But when I am creating an instance of header, I'm not passing it any props. So it's coming in as undefined. So it's coming in with nothing. And I need to actually pass something there. So the prop I'm going to add is username was then we can put whatever we want here. There we go. That's fixed. Hopefully, this wasn't too difficult of a challenge. If it was then go back through it and try to convert these classes back into functions. And then from functions back into classes. I know that sounds pretty tedious. But honestly, it's one of the better ways to learn. Once you're ready, let's move on. Okay, so we finally come to one of the most important parts of react and that is understanding state. State is simply the data that a component maintains. And when I say maintains I mean, it actually can change its value. The reason
02:07:36
that's a distinct feature over anything we've learned so far is because props, the other way to pass data from a component to another component cannot be changed by the component receiving the props. They say in the React documentation that props are immutable or unchangeable. All that means is that I can't receive a prop and then say this dot props dot something equals some new value. Okay, I can't change props. And if I do, it may cause some weirdness with react. So state is different in that it's a way that a component can maintain its own data and change its own data if it needs to. Let me get rid of this before it becomes confusing, because you should not do this. So anytime we're going to introduce state to a component. The first thing is that the component needs to be a class based component. We'll talk a little bit in the future why. But for now, just know that if you want state in a component, or if you want a component to maintain its own data using state, it will need to be a class based component. The first thing we'll do to introduce state to this
02:08:37
component is we need to add a constructor method. constructor is a specific method that's built into JavaScript that initializes parts of this class, if you're feeling a little unfamiliar with classes, I went and grabbed the link to a screencast that has some information on classes that you're welcome to pause and go look at really quick. But the important thing to know is that when you have a constructor, it's a place where you're going to be initializing some values. And the first thing you should always do inside of a constructor is make a call to a global function called Super. In short, what super does is it goes to the parent class or what's also called the superclass, and it grabs some of the goodies there and brings them down so that our class or our app component can use those goodies. One of the main parts of react component that we'll be using is a method called set state. And that allows us to change state but we're going to get there. For now just know that if you have a constructor, you should always add super. And then the only other thing we need
02:09:38
to do to add state to this component is to add a property to this called state. And state will always be an object. And so I'm going to set the start state equal to an object. And now I have state in my component. I can access this state anywhere else my components code by referencing this dot state Now you'll notice that I have an h1 here that says is state important to know. So I'm going to add a property to my state as an initial value, the property will be called answer. And its value will be yes. Now take a second to think how you might get that value to show up inside the h1 after this question mark right here. Pause the video and see if you can get that to work. The first thing I'll need to do is add some curly braces, because I'm going to be interpreting some JavaScript inside of JSX. And then I simply type this dot state answer.
02:10:39
When I refresh the page, you'll see that it shows up on my browser window over to the right, yes, here, what I'm doing is I'm giving an initial value to my state. This is the data my component will have when it's first initialized. And the special thing about state is that I can always change this to something else later if I want. The only other thing I want to touch on in this lesson before we move on is to mention that we can pass state from this component down to a child component. And remember, the only way we can pass information from one component to another is through props. And so that might look something like this, where I have some kind of child component right here. And of course, if I want to pass any information down to it, it needs to happen through props. So maybe I have a prop that I add called answer. And its value is this dot State DOT answer. The only other thing I want to mention in this lesson for now is that react will do some really cool stuff
02:11:39
if we ever change state. And I don't mean changing it here manually in the initial value. But I mean, when we use the set state method that I mentioned, which we'll talk about in a couple of lessons, but if we ever use that method and change the state, React will automatically update every child component that is receiving parts of that state. And so changing the state will automatically change how things get displayed on the screen. But we'll cover that a little more in depth when we start talking about changing state. Now take a look at this code and try playing with state a little bit. And we'll move on to a quick practice. Okay, so here's your challenge. And this is actually a challenge that incorporates a little bit of debugging, not just talking about state specifically. So you're given an incomplete class based component that doesn't have a constructor. And your job is to essentially initialize state and make sure that the component gets fixed. Pay attention to the console, which I've opened in the bottom. So make sure you look at that. And that should give you
02:12:42
some good hints as to what's wrong. And for the values of state, you should be able to figure those out based on the context of this component. So go ahead, give this a shot. And we will do this together in just a few seconds. Okay, so there's a lot to be done here. And I'm going to start first by adding a method that this return can be inside. It looks kind of like this was a functional component, and was changed haphazardly to a class based component but in completely. So the first thing I'm going to do is add a render method that this return live inside. Okay, so when I refresh this, you'll see it says component is not defined, well, that's a pretty helpful hint. We either need to extend react component, or we need to import component from react. If we do it this way, then I can actually keep it as component either way is totally
02:13:44
legitimate. The next area we're going to run into is a little bit tricky. So I'm going to save this. Notice it says cannot set property props of undefined. Well, that's pretty confusing, because we're not actually using props anywhere here. And where this comes from is this little set of parentheses that shouldn't be there. That's how a function is defined, but not a class. So I'm going to get rid of those and save it again. You'll see cannot read property name of No, well, here's name, and it's seeing that this state is no. So as the instructions say I'm going to create a constructor method. And the first thing we should always do in a constructor method is add super. I'm going to initialize my state is an object. And I can see from the render method that that object should have a name property and an age property. So inside this object, I will add a name property and we'll say le
02:14:48
age of saving again, now have a functioning component. There's no errors in the console and Sally and 13 years old are showing Have correctly over in the browser. Now one thing we've been talking a lot about at visco, which is the coding boot camp that I work for, is how important repetition is. And I know I've tried to get you to write this code over and over again. But I'd highly recommend that if any part of this was confusing at all, that you go back to the beginning of the screencast. And you pause the video immediately, and you try to fix it yourself again. And then after you do that, do it again, go back to the beginning, try and fix it again from scratch, and do it again, and do that as many times as it takes for the syntax to kind of be second nature for you. Doing that is going to do a number of things. But mainly, it's going to make it so that in the future, you don't get so hung up on figuring out and remembering the syntax as much as figuring out how to solve specific problems. So feel free to stop here, go back, redo this as many times as
02:15:48
is necessary. And then when you're ready, feel free to move on. Okay, so I actually decided at the last second that I wanted to add another practice in here. And this practice is going to do two things, it's going to give you the chance to practice converting a functional stateless component to a class based component. Again, it's also going to give you a chance to add state to a component. And then I have kind of an additional challenge here, that covers something we haven't quite talked about yet, which is conditional rendering. But I want you to just give it a shot, use your intuition. And if you're wanting to do any kind of Google search, you're welcome to do that, too. And we are going to cover this soon. But I figured this would be a good chance for you to exercise your problem solving skills. So given the component here, change it to a stateful class based component, give the state a property called is logged in, which should be a Boolean, either true or false. And that's the first part. If you can do that, that's awesome. Then I
02:16:50
want you to give it a shot at rendering the word in if the state is logged in is true, or the word out if it's false. So go ahead give this a try. Okay, so the first part, we should be able to do relatively easily, we need to change our functional component to a class based component. So I will add class here, going to get rid of my parentheses, add extends react dot component, I return needs to be returning inside of a method of some sort. So I'm going to add my render method, my return inside game, then if I'm going to add state to it, I will need to make sure I have a constructor which calls super. I add a property called state on this, this that state equals an object. We know that object needs to have a property called is plugged in. We will initialize it
02:17:56
as true. You were able to get to this part, that's awesome, great job. The next thing is making it so that it renders the word in here if is logged in is true or out if it's not. And again, we're going to cover this when we talk about conditional rendering in a few lessons. But one way that we may decide to do this is to maintain a variable that looks at the current version of is logged in, and has a string that represents the word that should be displayed here. That display logic, as I've mentioned, I like to do inside my render method but above my return. And so I'm going to maybe initialize a variable called Word display. And do a simple if else statement that says if this start state that is logged in, is true. We're display should be the word in otherwise, or display should be out. Finally down here, instead of having both in and out here, I'll put curly braces
02:18:59
because I'm interpreting JavaScript inside of my JSX. I will simply put word display, I noticed that word display is just a local variable to the render method, I don't need to put this dot State DOT word display or this dot props that were displayed because it is neither a prop nor a piece of state. Now when I refresh this, I get you're currently logged in. And that happens because is logged in is true. And if I change this to false, tell me I'm logged out. We're gonna see more concise ways to actually do this is a totally legitimate way. And in fact, I believe this is the way that the React docs tell you to do this. One thing I like to do if my variable is clearly named to be a Boolean, like is logged in, I'm just going to get rid of my triple equals true because that will already either be true or false. And that's it. So once again, please go back, try to redo this yourself. See if you can do it from scratch, even delete the entire file and see if you can write everything from scratch once again. Repetition is really going to help you get the syntax down muscle memory so that
02:20:01
you can focus more on problem solving. Once you feel pretty good about this, let's go forward. We are at part four of our to do app. So this should be a pretty short one. Until now all we've done this loaded our to dues data into our app component by importing it and then mapping directly over the thing that we imported. However, eventually, we're going to want to modify this data, which means that it's going to have to live in state of this component. So all you need to do for this challenge is to make it essentially so that two dues data lives in the state of this app component. Pause the lesson here and give that a try. Okay, like I said, to dues data is just imported. And we originally were mapping directly over the thing that we imported. But let's put this on state. for that to work, I need this to be a class based component. That will extend react component. parentheses, we need a constructor
02:21:10
always calls super first. And we'll start some state, which is an object and we'll have maybe just to use is an array, we'll start as an empty array. And that in just a second, right now, this map and the return need to happen inside of a render method, we'll just move that in there. And then like the challenge says, We essentially want to load the imported two dues data into state, which essentially just means that instead of an empty array here, we will put to dues data, then the last thing is to change to dues data to this dot State DOT two dues, because that's where the two dues data is living now. I believe if we refresh, we're working great. The warning that we receive is from the previous lesson where we had the checked property, and we don't have an on change. But we're going to get to that later when we talk about forms. For now, this is heading in a good direction. We will revisit this in a little bit. But until then, let's learn some more react.
02:22:15
Before we can seriously talk about changing state using the set state method, we're going to need to have an understanding of events in react and handling events. event handling is essentially allowing the user to interact with your web page and do something specific when a certain event like a click or hover happens. And handling events in react is actually quite simple. You might be familiar with regular HTML is the ability to add something like on click equals and then you execute a function like my function. React is very similar to this with just a few small changes. The first thing is that all of our event handlers are going to be the JavaScript version, which has a camel case convention on click will have a capital C, on mouse over will have a capital M and a capital O and so forth. And the reason it does this is because it uses the same convention that regular JavaScript
02:23:17
as if you were to add these events to elements on the page. So let's make it so our button can do something when a click of the button happens using onClick. And then the only other major change we're going to do is that instead of passing an executed function as a string, we're going to pass a function directly into a set of curly braces. I don't have another function pre written so I could just do an anonymous function right here. And maybe console log something. We can shorten this up quite a bit by using yes sixes arrow function syntax. Or as always, you could write a separate function somewhere. And put the reference to the name of that function right here. Any of those should work just fine. I'm going to save this and click the button. And you'll see that we get a console log of I was clicked. If
02:24:21
we open the console, we will see that more obviously. As a quick reference, I want you to take a look at the following react documentation. This is a full list of the supported events in react. The reason I want you to look at this is because I want you to pause this lesson and add the functionality so that when the mouse hovers over the image, another thing gets console log. So pause lesson here, feel free to go to that URL and see if you can find the event that we'll need to use so that when we move our mouse over the image, it will execute a function And then go ahead and add that to your image element. Okay, so I think there might be a couple different mouse events that we could use. But the one that I'm going to use is the on mouse over. And when that happens, we will run the following function. And we will just console log, Hubbard save this. And I'll open the console and try
02:25:27
hovering over Bill Murray. Like that. Every time our mouse goes over the image, it runs our function to handling events is going to be really helpful. Obviously, console logging stuff is not all that exciting. But we're gonna see how events mixed with the changing of state will allow our application to start becoming really robust and actually really awesome. Feel free to add a few elements here, see if you can do some of the other events that are found at this URL. And then we'll talk about setting state in the next lesson. So we another really quick update to our to do app, we just learned about how to add event handlers to elements. And you may remember that we used to have a warning, saying that we have checked prop on our input. But we don't have any way to change that. So it says it will render a read only field. So your challenge is to get rid of this warning by simply adding an on change to our input. And for now it can just console log something.
02:26:32
So pause now and give that a try. I'm going to close this console for some extra room. And this simply entails adding an on change that is equal to and then I could write this function somewhere else. Or I'll just do an anonymous inline function that until logs. While I'm at it, I'll put these on their own lines. And now when I click these, it doesn't change the checkbox. But our warning is gone. And my onchange is firing correctly. So we're going to learn about how to make these events actually change our state. And then we'll be revisiting this app again soon. Okay, man, every new lesson just feels so exciting because you're learning something that's like really bringing you close to making awesome web applications with react. In this
02:27:33
lesson, we're talking about changing state, okay, having state in your component is great. But if you can only initialize it to a specific value and can't change it, then frankly, it's kind of pointless to be there. And it's really no better than just hard coding it into your code. So let's learn about changing state. And what we have here is a component that is a class based component. Because we're using state, we have our constructor, we're calling super, as always, we're initializing state with a property called count, and setting that equal to zero. And then in our render, we simply have an h1 that displays the current count. And we have a button with the word change in it. I've added a little bit of CSS, so it wasn't quite so ugly. And now we're going to learn about how when I click this button, using the event handlers that we just learned about how can I change the state to be something different, so that clicking the button will actually change the value that gets displayed here? Well, let's start by adding an event handler, which should be reviewed from the last lesson. So go ahead and see if you can make it so that when you click
02:28:37
a button, maybe something gets logged to the console. For now. Remember, to add an event handler I'm going to do on click in this case, because I want it to handle the click event equals and then inside of curly braces, I'm going to put some kind of JavaScript function. Now I could put an inline function right here, which I don't particularly like. So instead, what I'm going to do is I'm now going to create my own method constructor is a method that's built in to classes in JavaScript. Render is a reserved method name for react. But in between here, I can put as many methods as I want. One strong convention that people tend to use is to have a method called handle click when you're handling a click event. So I'll finish the stubbed out version of this and then down here, instead of an inline anonymous function, I'll have it run handle click. Now let's see if I can get a console log to show up. Let's save that. And this is a common mistake. When the method is part
02:29:44
of my class, I need to reference it on the this object. So this dot handle click to begin, click my button and says I'm working. Okay, that worked. Well, that's pretty boring. So let's make it so that when I click it, actually changes my state and increases my count. Now one thing that would be really tempting to do is to try and modify state directly, as in typing this dot State DOT count equals one, or saying something like plus plus, or this is something that you will actually never do, you're never going to want to directly modify the original version of state. You might remember in the introduction to state, I talked about how state is kind of like the clothing that you wear. Well, when it comes time to change your clothing, you don't modify your clothing, right, you don't paint your clothing a different color, you don't cut a T shirt, and so on buttons, so that you can have a button up shirt instead. But what you do is you completely replace your old clothes with your new clothes, or rather the clothes you were wearing with the clothes
02:30:47
that you want to wear. And this is essentially the same thing we're going to do with state. You also might remember that I talked about some kind of goodies that we're going to get from react component. And that's the reason we're extending react component. Well, one of the things that we're going to get is a method called set state. And anytime you want to change state, you're going to use this method set state. And it's a method or function, so I'm going to call it and there's actually two different things that you can pass to set state. Let's first look at the easier one to understand. What I can pass to set state is a new version of state, while state is just an object as we see up here. So I can pass to set state an object, and I can say, the count. Now, one might have already figured out what's going to be the problem with this. But let's see if this works. So once again, my button has an unclick, that will run this dot handle click when it's click, this dot handle click uses the set state method that comes from
02:31:50
react component. And it provides a new version of state, okay, like your new t shirt that you're putting on. And it says now the count should be one, I'll click the button. And we run into a very common error says, cannot read property set state of undefined. This brings us into a realm that's actually kind of hotly debated with react. And I'm going to give you a very simple solution to this, that may not make a whole lot of sense at first. Essentially, anytime you create a class method that you want to use set state on, you're going to need to bind this method to your own class. If you're not really familiar with binding, I'm not too worried about that right now, just know that anytime you write a method that uses a set state, you'll want to bind it and the way you bind it is inside of your constructor, we're going to say this dot handle click equals this dot handle click
02:32:51
dot bind this, like I said, this is probably pretty confusing if you're not familiar with binding. But essentially, what it does is it makes sure that the handle click method is bound to the context of this as it exists within this class. I'm going to refresh this and click my Change button again. And awesome. Look, our state changed from zero to one. Now this is where the problem that you may have figured out already comes into play. If I click Change, again, it looks like nothing's happening. But in fact, it's actually doing what I told it to do, right? When I click the Change button, it sets the state to the count. And the count is now one. Well, it was already one and I'm changing it to one. So it's actually not changing. Therefore, I can't see it changing on the display. So that brings us to the second way that I could use set state, if I don't care about what the previous version of state was. passing in an object is a really nice simple way to
02:33:53
provide a new state. But a lot of times we actually do care what the previous state used to be. In this case, we want to know what the previous state was. And we want to add one to it. So anytime I need to know what the previous state was, I can also pass a function to set state that function is going to receive in its parameter, the previous version of state. This is really important. And it might be tempting to think that you can just access the previous version of state using this dot state, which sometimes will work but oftentimes will not. And so it's really important to always pass previous state or whatever variable name, you want to give this to your function. Now because it's an arrow function that just has one parameter, I can get rid of my parentheses around that parameter. And what my function should return is a new version of state. Okay, so before we provided just a new version of state directly as an object literal, but this time we're providing a function that returns that object literal. The benefit of doing it this way
02:34:58
is we have access to the previous version of state. So in my function, I'm going to return an object, that object should have a count property, so that I don't break my this dot state count down here. And I want you to take a second and see if you can figure out what the value of that property should be. So positive lesson and give that a try. So remember, previous state represents the old version of state. And the old version of state is an object. So I can access the previous version of state by saying proof state. But that's the whole object, I just want to count property. And I'm not going to say plus plus, because that's directly modifying the old version of state. But instead, I'm going to just add one to it, we computer will do is it will figure out what the count used to be, they will add one to that. And it will set that as the new count property of my new state object that's getting returned from this function. Now, when I save this,
02:36:01
and refresh, and I click Change, I can click it multiple times. And it will continue to increase the number that's displayed on the screen. And this is really cool. I mean, it seems kind of lame, because all I'm doing is increasing a number. But this opens up so many possibilities. And you're going to see from here on just how much we're going to be able to do with react. Now that we have the ability to have components, maintain their own data and state and actually change their own data using set state. I mentioned before that you are allowed to pass state down to other components as props, for example, having a child component of some kind that receives, you know, your account, your state. And if we were to define this child component, we would see that it's receiving a prop called count, the value of which is the current state of its parent component app. Well, what react will do is anytime this value changes, anytime it sees that there's a child component that's
02:37:05
receiving a value that changes, it will rerender. This component, it will run that components render method, once again, or if this is a functional component, it will just run that function again, so that that component can reflect the new version of props that it's receiving. And in this case, it will change every time the state count changes on the app component, which as we just made it do happens every time we click the Change button. So right now child component isn't actually defined. So I'm going to get rid of that before I get a syntax here. And let's do a quick recap of everything we did. We have our h1 displaying our state, which just has a count property, we initialize that count property to zero, we added an event handler to our button that runs a method called handle click handle click is a method defined on this class. And because handle click is using the set state method that comes from the parent class react component, we need to make sure to bind
02:38:08
it, which we can do inside of our constructor. And once it's bound, we can run set state, which can either take an object literal, which is the new version of state that we want to pass to it. Or if we care about what the previous state used to be, we'll pass it a function that takes the previous state as a parameter. And that function should return the object literal that represents the new version of state. Now I just rattled off a lot of jargony stuff. So I want you to spend some time with this state is going to be extremely important for you to understand. And we're going to be using it pretty much through the rest of the course, though spend some serious time with this, I'd highly recommend as I have in the past tried deleting this entirely writing it from scratch. And we're probably a good stepping stone to that is rewinding this video to the beginning and seeing if you can add all of this stuff again, you're also welcome to try adding different events that may also change state in play with the state that's getting changed, maybe you want it to increase
02:39:13
by more than one or something like that, I don't know. One really good exercise is to have a button that will double the number and another button that will have the number. So there's plenty of things that you can try to do with this. So use your creativity and your imagination, see what you can come up with. But spend some real time with this and play with it. Then in the next lesson, we're going to get a chance to practice this. Okay, we've come to a pretty beefy part of our to do app, we're going to make it so that when we click the checkbox, it actually makes a change to our state. And this actually is a little more involved than it may sound but it's really not too bad. up near the top. I've written down what your challenge is and This will help you accomplish this task. And I've also stubbed out the handle change method and written some pseudocode inside here. So you have some hints, essentially to help you accomplish this. And just so there aren't any weird bugs, I've also bound this in the constructor for you. So your challenge is
02:40:17
going to be to take this stubbed out, handle change and actually implement it so that when somebody clicks the checkbox, it makes a change to your state and updates the item that they checked so that the completed property flips from either true to false or false to true. And then you're going to make sure to pass the handle change method down to your to do item. And then over in your to do item, you'll need to implement the on change with the new method that you've passed to it. So I go back here to app. Pause now and go ahead and get started. Okay, so I might do this a little bit out of order. But I think the very first thing I'm going to do in my handle change is just to console log something. Say we changed. And since we're getting the ID, let me just go ahead and add the ID to my console logs, so I can make sure that that's working. And then I think what I'll do is hook up parts two, or complete parts two, and three, and just see if I can get this console log to
02:41:22
happen. And then we'll go ahead and add this logic. And so part two says that I need to pass the method down to the to do item components. So right here, I have my to do item, which gets a key and the item. And let's go ahead and pass down a handle change was passed down this dot handle change. And then over into do item, it's now receiving a prop called handle change. So props that handle change. And notice that it says it's going to be taking the ID as a parameter. However, we know that events when they fire, they actually receive an event property. And so it won't be good enough to just say props dot handle change, because because this is not going to receive an ID property, it's going to receive the event object instead. And so what I can do is say, Well, this is the function that's receiving the event here. And what it does is it calls props dot handle change. And now
02:42:25
I can pass whatever properties I want to this, I want to say props.item.id. Since I'm not actually using this event, in this case, I'm just going to get rid of that, it'll just be an empty function that calls props dot handle change and passes the ID to it. So let me update my page. And we'll open the console and just see if my console is working. Okay, change to change three, one, notice that it's matching up with the ID of the item that I'm clicking. So this is ID of one ID of two ID of three. And if I click the clean Gecko tank number three, it says Edit change. Number three, awesome. So we've made some good headway there by finishing parts two and three. But let's get to actually updating our state. This is the trickier part. The part that's tricky about this is that we need to deal with the entire array, because we're saving an array in our state. And we never want to modify state directly, it won't be as easy as just looping through this array,
02:43:30
finding the item with this ID, and then flipping it because that will actually modify the existing state. But instead, we can essentially do that same thing. And just make sure that we return a brand new array where almost all of the items are exactly as they used to be except one item has changed its completed property from true to false or false to true. And a great way to do that is to use the dot map method, because this returns a brand new array. And so what I can do is I'm going to start my set state. Because I do care what I have in my previous state, we're going to use the function way of updating state and receive my previous state. And then what I'll do is I will use map to loop over my proof state.to dues array and look for a to do with the ID that is given here in the method. And so I'll create a variable that says maybe updated to dues. That's going to be my old
02:44:33
version of to dues. And sorry, this shouldn't be this that state but rather create State DOT map. And we're going to look at each one of the two dues in this array. We'll run this function and we're going to say if print to do that we're looking at has an ID that's equal to the ID we received from our parameter up here. Then we know this is the to do item that we want to flip the completed property of So I can say the to do dot completed, should equal the opposite of whatever it currently is. And whether or not we actually did that flipping of the completed property, we're going to return that to do that makes it so that it puts this to do item in our new array in the same index have the original array. And all of this is my map. And so what my set state needs to do is actually return a new version of state, which is just an object. And our state is an object with a to dues property. So I'll say to dues now be the updated version of to dues, the array
02:45:37
that we just created. Let me clean this up a little bit, get rid of these comments, this, and let's try flipping these awesome. And it looks like everything is working the way it should. So as a recap, we are looking at our previous state, and we're creating a new array that almost perfectly mirrors what it used to be except one of the items, which has the same ID as this function received from the on change handler that is happening when we click these checkboxes. That one item is changing from true to false or false to true. And then this brand new array is essentially replacing the old array that we had up here, and it gets rendered to the page. Then we're taking this handle change method, and we're passing it down to every one of the to do items that we create in our map down here. And those to do items are receiving the handle change. And anytime it's checkbox gets checked,
02:46:39
it calls on change. And that has an anonymous function, which then calls handle change and passes this items ID so that we can correctly identify which in the array we need to flip. And as a reminder, the reason the checkbox is actually showing up or not showing up is because of this checked property checked determines whether the checkbox should be checked or not. And it says if the item is completed, then it should be checked. And if the item is not completed, and it shouldn't be checked. And essentially what we have now is a working to do app, we're going to do some small tweaks to it. But great job. Hopefully everything that we've covered so far makes sense. And we'll be revisiting this soon to talk a little bit more about styling, but feel free to celebrate a little bit and whenever you're ready, we'll go forward. One of the really nice things that we've mentioned about react is how we get to essentially just write vanilla JavaScript. And react is taking care of a lot of stuff behind the scenes,
02:47:40
will with the stuff that's going on behind the scenes, every single component that we create, is actually going to go through a series of phases or milestones during its time being alive in your react application. Often this is analogous to a human being who is born has life milestones, and dies. Similarly, every react component will undergo a series of events when it's being rendered and updated. Now I've divided lifecycle methods into two parts, because the React team has just recently deprecated or gotten rid of three of the original lifecycle methods that we're about to talk about. And instead of going through every single one of these individually, I'm actually mostly going to just talk about the ones that are the most important to you right now as you're learning react. And then as you continue to learn, you can play with some of these other ones as well. For for reference, I'm going to post here a URL to a site that does a really good job explaining the lifecycle methods that were a part of react before version 16.3. Check out those changes that happened
02:48:45
in 16.3, you can check out this website, which is the official blog of the React team. With that being said, let's start talking about the lifecycle methods that were most likely or most commonly going to use. The first is one that you're actually already familiar with. And it's a little bit of a gray area, because this is oftentimes not listed as a lifecycle method. But the render method, right here is something that we've been using, as we've talked about class based components. And one analogy that I like to use is that it's like getting dressed for the day. Its job is to determine exactly what gets rendered to the screen, which in turn is how the component is displayed to the world. Now the render method can be called many times, anytime react determines that something changes like state or props, which might affect how the component is supposed to display, React may run the render method once again. Similarly, you may have had days where you've decided to change your clothes and look a little bit different to the world based upon what you're about
02:49:47
to do. So hopefully by now that one's pretty straightforward. The next lifecycle method that I want to talk about is called component did mount and these lifecycle methods are defined just like other methods inside of your class. Here. So I might say component did Mount camelcase, like this component did mount is a lifecycle method that's essentially like saying you were just born the component, this component did just mount to the screen, the very first time the component shows up, React will run the component did mount method. This method will only run once while the component is showing up on the screen. Things like a rerender, which changes the way that the component is displayed does not rerun component did mount. And that's because the component doesn't actually unmount and remount. Most common use case for component did mount is to do things like an API call when you need to get data from some kind of external source. For example, maybe this component is actually
02:50:49
a to do list. And I need to get the list of to dues from some kind of server or database. Before I'm able to accurately display my to do list. As soon as the component finishes mounting, I can get the data I need to correctly display. We're going to see this in a future lesson. But just know that that's one of the most common use cases for component did mount. The next lifecycle method I want to talk about right now is called component will receive props component will receive props is kind of like when someone gives you a gift. This component could be receiving props from a parent component. And every time this component is receiving props, it will run this component will receive props method, and component will receive props will not only run the very first time the component is mounted. But it will also run
02:51:49
every single time a parent component decides to hand props to a child component. For example, if a parent component decides to change the props that it's passing down to this component, one thing we can do inside of component will receive props is check to see if the new incoming props are even different at all from the existing props. Oftentimes, we will then say if they are not different, just don't do anything. But if they are different, maybe I have some kind of calculation to run or state to set or something like that. To receive those new incoming props component will receive props receives a parameter called next props. And it's just a parameter so you can call it whatever you want. But oftentimes, we put next props. And sometimes you'll see something like an if statement that says if next props dot whatever property you're looking at, does not equal the existing props. Then do something important here. So there's some good use cases for component will receive
02:52:54
props. However, as I mentioned, this is actually one of the lifecycle methods that's going to be deprecated, or actually is deprecated. Starting in 16.3. Until react 17 comes out they've renamed this with all caps unsafe underscore component will receive props. So if you really need to use this, you can still do so. But once react 17 comes out this is going to be completely removed in component will receive props will no longer mean anything special. So just be aware of that. It's a good lifecycle method to understand. If you're looking at legacy code. For going forward, this won't be a part of react anymore. Another cool lifecycle method is called should component update. And in our person analogy, I like to think of this as making a decision as to whether you need to change your clothes or not. Behind the Scenes if react has any kind of question at all as to whether a component needs to rerender it will always choose to rerender
02:53:54
it just in case without any logic specific to your applications needs behind that decision. I think I said in the past that sometimes react will rerender a component even if nothing about that component has changed. Well, that can become kind of an expensive or rather slow operation. If you let that happen to every single component in a large application. Should component update gives us the developer a chance to optimize our app, we can implement some logic here that allows the component to determine whether or not it's important for it to even think about updating. To help make that decision. This is going to receive the incoming props and the incoming state, which we'll call next props in next state. And in the body of the function we need to either return true if we do want it to update or we can return false if we don't want it to returning false Should component update
02:55:01
is what will make your application more performant. But you'll just want to make sure that you actually don't want this component to update. Otherwise, it could really introduce some weird and hard to debug bugs into your code. Less lifecycle method we'll talk about right now is component will unmount. Just like in life, all good things come to an end and your component will eventually unmount from the screen or disappear altogether from the screen. The main use case for component will unmount is to do some kind of cleanup or tear down of anything that you've set up, it could potentially lead to clutter in the DOM or in your application. One of the most common use cases for this is if you in component did mount set up like an event listener, for example, you wanted to run some code every time somebody scrolled on the screen, this would be a chance to remove the event listener, that that's just one example. In general, it's a place to tear down or clean up your code before your component disappears.
02:56:07
I'm going to move to this after that, so that it's obvious. It's just an example. And that's actually all the lifecycle methods, we're going to cover in part one here, there are a number of other ones that are important to understand. But for now, they're more advanced than what we're planning on getting into in this course. And so I'd recommend if you're interested in learning more about them, going up to this link up here. Now this link was written before 16.3 was announced. So also take a look at the second link here, which will talk about the three lifecycle methods that have been deprecated. As well as the two new lifecycle methods that are introduced in their place, which we're going to cover in the next lesson. You had a chance to go over this link here, which is the announcement of react 16.3. And the changes that came with it, you will have read about the three lifecycle methods that
02:57:08
have been deprecated. One we talked about already, this component will receive props, that's going away. A couple more lifecycle methods that are also being removed our component will mount I'm just going to comment that out right away, as well as component will update shall also comment out those three component will mount component will receive props and component will update are being deprecated or removed from react. In its place, we're receiving two new lifecycle methods that we can use. One is called get derived state from props. Now there's one change about get derived state from props. And that's that it's a static method. So we have to include the word static beforehand, get derive state from props receives props in state and should return the new updated state based upon the props. And I don't plan to go too much more into this. And the reason is because the React
02:58:14
team has actually written a blog about how you probably don't need derived state. A lot of times this has been misused and caused weird bugs or performance issues in people's applications, when in reality, there's actually a better way to go about what they were trying to do. The idea behind get derive state from props is for like it says in the blog, the rare cases when your component needs to take incoming props it's receiving from its parent, and set its own state based upon those props. But again, the React team kind of discourages the use of this method. And so I'm not going to talk too much about it. And we probably won't be using it in this course. However, if you're interested in learning more about it, here's a link to the docs on get derive state from props. And the last lifecycle method, the new one that's being introduced is called get snapshot before update. You can think of get snapshot before update as a lifecycle method that allows you to sort of create a
02:59:17
backup of the current way things are. When I say backup really all you'll be saving is some kind of data of some sort, probably an object with multiple points of data inside of it. And that object would be called the snapshot because it's like a snapshot of the way your application is right now. Again, the React team says that it's not a super common lifecycle method that you'll end up using. And so we're not going to talk too much more about it. But once again, here's the documentation if you're interested in learning more about it. So that's essentially it for lifecycle methods for now, as you get more and more advanced in the applications that you're building with react, you'll definitely want to become pretty familiar with these lifecycle methods. For this course, we'll pretty much plan on sticking to component did mount and render. And if we end up meeting another one, then I'll make sure to talk more about it at that time. Feel free to read through some of these articles. And when you're ready, let's move on.
03:00:19
You know, one of the hardest things about teaching react is that you learn a number of tools that can be used in a variety of ways. But you aren't necessarily constrained to just one way of using a tool. The other thing is react uses so much vanilla JavaScript that a lot of what you can do with react is done a number of different ways, using just vanilla JavaScript. Conditional rendering is where this kind of comes into full view. So I just wanted to start with that caveat, before we get into this, because I don't want anyone to think that the way I'm about to show you conditional rendering is the only way it can be done, I'm going to cover a number of use cases, but there's for sure going to be other ways to use it that are totally legitimate. So I've done here is I've added a class based component, it has state with a property called is loading that is either true or false. This is something that's oftentimes used when you're making a call to an API. And in the meantime, you want something to show up, perhaps that call to the API will take three or four seconds.
03:01:22
And you don't want the user to think that your website has crashed. And so you'll maintain something in state that says, hold on just a second we're loading right now. And conditional rendering will be used to actually display something on the screen that tells the user that you're currently loading something in the background. We'll talk about component did mount in a second. But now in the render, you'll see that we are rendering a component called conditional, which I'm importing up above, and I'm passing a prop to it called is loading, which is the current version of state. And then over and conditional, we're going to be adding what gets displayed on the screen here for now. But before we get there, I want to be clear of what's happening with our component did mount. Remember that component did mount is a chance for us to run some code right after the component, our app component in this case mounts on the screen for the very first time. And what I'm doing here is kind of faking an API call, I've set a timeout, which will wait one and a half seconds before running the code that's in the function I provide it. And what's happening
03:02:24
in that function is I'm changing the state. So that loading is false. Think of this as a fake way to pretend that we're making a call to an API that takes 1500 milliseconds, or one and a half seconds to come back with data. At which point we're saying we are no longer loading because we finished loading the data from the API. And once we talk about using fetch to get data in a future lesson, we're actually going to be doing this for real, but I just wanted to make sure this wasn't confusing before we move on. And actually, this is a good time to talk about the lifecycle methods once again, because once set state changes is loading to false, our component or conditional component, is now receiving a different Prop, because it's receiving is loading of true when it first loads. And then when state changes and is loading as false. It's receiving a new Prop, or rather, it's receiving the same is loading prop with a different value. And so what will happen is when the state changes, our render method will run again, because something has changed,
03:03:28
which means the conditional component will also rerender. Now conditional is just a functional component, which means the function will just run again. And whatever we're returning from here could potentially change because props are going to be changing. When we get to the end of this lesson, I'll highly encourage you to play with it because this is a really important topic. Okay, so my conditional component is receiving a prop called is loading. And before we get anywhere else, let's see if our set state is working. I'm going to fix the syntax error by actually having something render here. And I'm going to console log props.is loading. Notice that and I'll refresh this again, notice that immediately, what happens is it shows up as true. And then 1500 milliseconds, or one and a half seconds later, it re console logs false. And that's because over an app, after 1500 milliseconds, it changes state to false, and that's when conditional re renders or runs again, and the props that
03:04:34
it's receiving changes. So first, it logs true and then it locks false. Well, let's talk about conditional rendering. Essentially, all that means is that I'm going to load something on the screen if a condition is true. In this case, instead of an h1 that says temp. What I might do is say if upstart is loading is true, then what I want this component to return is an h1 that says loading. But if props that is loading is not true or in other words, I can put that inside of an else once you to return and have different text. And notice what happened when I refreshed, I'll do it again. At first it says loading. And then it changes to the
03:05:35
different h1 that we have here that says some cool stuff about conditional rendering. The app component starts with is loading is true, and therefore renders a conditional component where is loading prop is true. And then the conditional component checks if props that is loading is true. And first, it loads this h1 or renders this h1, then when props.is loading changes to false because the state of the parent component changed to false, the conditional component that we have here runs once again and it notices that prompts that is loading is no longer true. And therefore what it returns is this h1 instead, this is just using plain JavaScript. And if statements. One thing that I personally prefer, because I'm returning from my function in my if statement is I don't actually need my else here. This will simplify my code a little bit. And this return will only run if my if statement does
03:06:38
not evaluate to true. And therefore it's kind of an implied else. Well, this is a perfect time to talk about a common way to do this kind of if else rendering using something called a ternary. operator. If you're not familiar with turn Aires, this is not even a new feature in iOS six, this is something that's been around for a while. And it's very commonly used in react applications. When it comes to conditional rendering. Essentially, the way it works is you provide a condition and then a question mark, you provide a statement if it's true, followed by a colon, and then a statement. If it's false, in our case, our condition is, is props.is loading equal to true. And then I like to read it like an English sentence with the question mark props that is loading is true. If so then I want this h1 otherwise, is what my colon means I want
03:07:39
this h1. Well, I'm going to have a syntax error here. And that's because when we're doing this inside of a component, we have to do this inside of our return. So I'm going to delete what we have here, I'll delete my comment, I'll add a return. put this inside of my return. Now, technically, this works. If I refresh, you'll see it shows loading, and then some cool stuff about conditional rendering. But this looks really strange to me as because we're not immediately returning a parent JSX element, which we usually want to do. So I'm going to wrap this whole thing in a div. And then when I refresh, you're gonna see that there's another error we have to fix. Notice that it's literally interpreting as text, the stuff that I shoved inside the div. So if I want this to be interpreted as JavaScript, I need to wrap it in curly braces. And now when I refresh, we're back to working. What's nice about this is that when I inevitably have other things on my page, like some kind
03:08:42
of navbar, which I'll represent with another h1 here, maybe a footer, I can still be rendering conditionally parts of my page. Another simplification that I can make here is because is loading is already a Boolean, I technically don't need the triple equals true, I can get rid of that. And this will test the truthiness of props, that is loading, I'll refresh and you'll see it works the same. There we go. Now, I put in this navbar, and footer as demonstration purposes, but I want to remind you, there's so many different ways that you can structure this, that it's really hard to teach all of them. For example, usually you won't have your navbar and your footer inside of a child component of your app, these would likely go in your app component or somewhere similar. That's a parent of this little conditional component. And another thing is I've put this conditional rendering here inside of the conditional
03:09:43
component, just so we could see it all in one place. But the truth is, our app component is probably the one that should be in charge of the conditional rendering. The reason is whatever we put in our conditional component should probably just be able to display when it's told to display it. If our app is in charge of determining if something is loading, then it's probably the one that should determine what should be rendered down here in the render method. So the way that I would actually probably structure this in this specific case, when we're talking about having a loading thing pop up on the page is right here, I would put my conditional this.state.is loading, question mark, and if so, display our loading word. But otherwise, display our component. Which means this conditional component wouldn't even need a prop called is loading. In this particular case, and over in conditional j
03:10:46
s, I would just display the stuff that I wanted it to display. And we see that it's still working this way. Obviously, the navbar and the footer are gone. But the point is, this function should only really know what to do when it's supposed to display. And our app component being the one that's maintaining whether something is loading or not, can determine in its render method, which should display here. In part two of conditional rendering, we're going to see some other ways that this can work. But before doing that, I'd really encourage you especially since this is the first time we're using component did mount in a real way to play with this code, spend some time playing with the different ways we've already talked about here with conditional rendering. And once you're ready, let's move on to part two. There's actually only one extra little part with conditional rendering that I'd like to cover right now. And that has to do with using the logical AND operator, you may be used
03:11:51
to using the logical AND operator to refer to something on the left and something on the right as billions in determining whether the entire condition should be considered true or false. So for example, true and false would be false. Because with the AND operator, both sides need to evaluate to something truthy in order for the whole thing to be true. Well, in reality, under the hood, what JavaScript is doing is with the AND operator, it's determining the truthiness of the thing on the left. And if the thing on the left is truthy, it just immediately returns the thing on the right, which means when it's true and false, it returns false, because that's the thing on the right. If the thing on the left is falsie, then it just returns false right from the beginning. And so the AND operator can be a way to conditionally render something if a condition is true, or just render nothing if it's false. So with
03:12:52
this little example that I've created, I've added some unread messages in state as an array of strings. And you can see here it says you have to unread messages because the length of the race too. But a lot of times, you wouldn't necessarily want it to say you have zero unread messages, you may just want it to instead not have any h2 there at all. Okay, using the ternary that we learned in the last lesson, I could say something like wrap this whole thing in curly braces, and then say, essentially, if this dot state unread messages that length greater than zero, then render this array, but otherwise render nothing. So I could just say no, let me clean this up a little bit. It's a little easier to read. But I can simplify this a little bit by getting rid of my ternary. And my No, and just saying, check the truthiness of this dot State DOT unread messages dot length is greater than
03:13:53
zero. And so in other words, if that's true, and render this part, however, if it's false, it will just render nothing. And we can see on our screen, there's nothing there. Once I add some unread messages back shows up. So the AND operator isn't strictly necessary, because you could most of the time, just use the ternary where one of the results is no, but this can really kind of simplify it just a little bit. And you may be seeing this every now and then in the code that you look at with other people's react code. So that's pretty much it with conditional rendering. Let's go ahead and move on. Okay, let's practice some conditional rendering. So here your challenge is given a stateless functional component, just this app component down here, I want you to follow whatever steps it takes to add some state to it. I want you to then have that state keep track of whether
03:14:53
the user is logged in or logged out. Then you should have a button that will change That state. In other words, a button that logs them out if they're logged in or logged them in if they're logged out. And there should be some text on the page that says whether they're logged in or whether they're logged out. If you want an extra challenge, make it so that the button will actually display, log in if they're not logged in and log out if they are logged in. So as usual, give us your very best shot. And we'll give you a few hints if you need them in just a few seconds. But in the meantime, pause the video and try it out. Okay, really quick, some additional hints that you might need, because this is actually putting together quite a few of the lessons that we've talked about recently. So one thing is in order to add state, you'll need this to be a class based component. And part of
03:15:54
that is you'll need to add a constructor method to that class based component for keeping track of whether the user is logged in or not, you could use a Boolean is like in the Boolean either true or false. Adding a button that logs the user out will require an event listener, which would be your unclick. Probably, and then both the extra challenge and challenge part number four would require some conditional rendering. So if you're feeling a little bit stuck, feel free to pause it again and try it out. Now that you have some hints as to how to complete each step. And we'll go through this together in just a few seconds. Okay, let's try this out. So we need to make our component into a class based component because well, actually, for a couple of reasons. One is we want to keep track of state, which
03:16:56
means we are required to have a class based component. But we're also going to be writing an event listener. And technically, I could just write another function that handles that. But personally, I prefer to have a class based component and put my event handlers inside of the class itself. Okay, so to change this to a class based component, we need to change function to class, it rid of our parentheses, will extends react component return needs to be inside of a render method. We'll move it there. And to add state to it, we know we need a constructor method. Always call super First, add a property called this dot state which is an object we'll initialize it with is logged in of true or actually the start false. Okay, so that is steps number one and two. Now we need to add a button that will change is logged in to true or false. And so there's a couple things we can do.
03:18:01
One is inside this div, let's get rid of that and we'll add a button. And for now, I'll just say log in. And we'll play with this a little bit later with the extra challenge. Now I need to add an event listener to this so that the button being clicked actually does something. So add an unclick equals a call this dot handle click. So anytime This button is clicked, it will call this classes method called handle click well that doesn't exist yet. So let's create it. Right here, I'll add a handle click. And I'm probably going to run into a binding error here. So I might as well bind this now. Let's say this dot handle click equals this I have a quick dot bind this. Before I get too far, sometimes I'd like to have little sanity checks along the way. I'm just going to put a console log here. Now we can check if I click the button if it will console lock I'm working. Refresh
03:19:09
the page and I get this login button. And when I click it, okay, our console log is working just fine. And that's awesome. Now the thing I want handle click to do is change false to true or true to false depending on which one it currently is. And anytime I'm going to change state, I need to run this dot set state. And remember, there's two different ways that I can set state two different things I can provide to the set state method. Take a second to think of what those two things are and which one is going to be most useful in this case. So I can either provide set state, just a brand new version of state, and it will smartly combine and replace the current version of state. But since in this case, I actually need to know whether it currently is logged in. Rather, if logged in is false or true, I need to instead provide a function that has the previous state asked to it so
03:20:10
that I can use that previous state to determine what the new state should be. My function is going to return the object literal Where is logged in, the value of is logged in is the opposite of whatever it used to be. This is a really concise way to change a Boolean from false to true or true to false. Technically, you could also do an if else statement that says if proof state.is logged in is true, then return an object Where is logged in as false. Else return an object Where is logged in is true. But this way, I just say Just give me the opposite of whatever it used to be. Now, we don't currently have a really great way to see what the current version of state.is logged in is. But I can do this extra challenge right now and make the button say login or logged out depending upon what the current version of status. So I might do that right here in the render. And the first thing that comes to mind is just to
03:21:11
have some button text saved in a variable. So I can initialize this variable, and then I can say it equals, I'll use a ternary to determine whether it says log in or log out. So if this.state.is logged in is true, I want the button text to be logged out. If they're logged out already, I want it to say, login. Man, instead of hard coding a login here, I will put button text. Hopefully this will actually show us whether they're logged in or out on the button, it says login, I click it, and then it says log out. So I know under the hood, my state is actually changing. Awesome. Okay, Part Four to display text that says log logged in or logged out, depending on the current version of state is actually pretty straightforward. It's about the same as what we already have. And so I might say, let display
03:22:16
text equal essentially what we have here is instead of log out and log in, it would be logged out. Or sorry, log in because if they're logged in, then I want it to display a login logged in. Otherwise, no, no, but I have this display text. I could put maybe an h1 here uses the display text. So the button says log in because it's a command to log in, and it says I'm currently logged out. Then when I click it, it says click this button to log out because you are currently logged in. And that's it for this practice, then as much time as you need to really understand exactly what's going on. And when you're ready, let's move on. Alright, we've reached the final part of our to do app and we're just going to hammer out
03:23:19
this last little styling piece. And we'll be done. So your challenge is notice we're here in the to do item component, what you're going to do is make it so that the items that are completed look a little bit different than the items that are incomplete. I'd recommend maybe graying the text out doing a line through it, maybe turning it to italics or something like that, I'm probably going to do all three. But whatever kind of styling you want to add, go for it and pause the lesson. Now give that a try. Okay, so I'm thinking this will be pretty straightforward. inside of my function here, I'm going to create a inline style to be called completed style. And let's change the font style to be I like essentially, the styles represent anytime that one of the items is completed, they will get this style. We'll make it metallic and then we'll make it maybe
03:24:19
a light gray color. And we can put a line through it with text decoration. And then the thing that I want to style is the paragraph here that has the text of the to do. So I'm going to add a style property. And I need to do some conditional rendering here that determines whether or not I should apply these styles. So I'm going to say if props dot item dot completed is true. I'll just do this inside of a ternary then I want you to apply the completed style. And if it's false, then I'll just say no, which essentially means Forget it. I'm not actually going to do any styling here. So if I Save and refresh this. There we go. My completed items are grayed out, they're italicized, they have a line through them. If I make it incomplete, it essentially takes those styles out. Awesome, great job on the to do app, hopefully, you actually took the time to try and do a lot of this yourself. If you haven't, I really highly recommend going back and actually doing
03:25:20
these. Again, you might remember one of my strong philosophies is that you'll never actually learn to create these applications unless you actually do it by hand, just watching somebody else do, it isn't really going to cut it. Now coming up soon, you'll get a chance to build an entire app from the beginning. And catching up on things like this to do app and actually trying it yourself is going to really make that task a lot easier. Once you're ready, let's go to the next lesson. In our past lesson about lifecycle methods, we talked about a lifecycle method called component did mount, I want you to take a second and see if you can remember what component did mount does. component did mount is like a hook in our react component that allows us to run some kind of code immediately after the component first mounts to the DOM. I mentioned when we were talking about lifecycle methods that one of the most common uses for component did mount is to get data from somewhere so that your component can do what it's supposed
03:26:24
to do. As a quick refresher, I can add a lifecycle method right here as a class method has to be spelled correctly though it has to be component did mount and let's just take a look, if I do a quick console log, see that it ran our console log and it ran the console log immediately after the component finished mounting to the DOM. Well, like I said, right here is where we would get any kind of data that's required for this component to display what it needs to display or do what it needs to do. And so for this lesson, we're going to be using a couple tools that are really helpful for doing that. The first one is a built in JavaScript tool that's more or less new, called fetch. and fetch is a nice, easy promise based way to perform HTTP requests, so that we can get any kind of data that we need. I'll put up near the top here, a link to the MDN docs
03:27:28
on the global fetch function. Another tool we're going to use is an API called the Star Wars API. Heavy school, we really like the Star Wars API, because it is cores enabled, which means that there are no issues with our front end application getting data from their database, you can find the homepage for the Star Wars API right here. Pretty easy to use. And the data that comes back is pretty fun to play with. So feel free to take a look at that website, too. And another resource that I figured out, add here is a medium article that talks about promises just in case you aren't feeling as familiar with promises as maybe you should. But the truth is, there's a million articles out there about promises. So you may have to read through a few of them and just practice them yourself until you feel comfortable with them. Okay, so let's get started with this inside of my component did mount I'm going to use fetch, which I use by just typing fetch. And this is a global function. So this should just work. And here, I'm going to put in the URL where I'm going to be getting the data from. So I'm going to put in the Star Wars API endpoint here.
03:28:33
And we're going to search for slash people. And we'll just get the person with the ID of one, which happens to be Luke Skywalker. And that's all we need to do to use fetch to get some data for us. And I'm going to resolve the promise by using a dot then, which will receive a response that is not quite yet in the format that we need it to be in. So I'm going to use a method called dot JSON, which will turn this into a JavaScript object for us. And next in my promise chain, I can chain on another dot then which will actually receive the data that we want. At this point, I'd like to do something just like console log the data. So you can see if that worked, we'll refresh this. And it looks like we got some data down there. It's an object with some properties, like a name property, which we see is Luke Skywalker and some other properties that describe Luke Skywalker. Now that I have some data and need to get this to display on the screen Somehow, I want you to pause
03:29:36
the video and just try thinking through what that would entail. How are we going to get this data that we just received from our fetch call to actually show up inside of our browser? Well, now that my component has received the data, if I don't save it somewhere, it's going to disappear. And if you remember the way that we save data, Within a component is by state. So right here in state, I'm going to add something like character, maybe, instead of equal to an empty object, I chose an object because I know the data that's going to come in is going to be an object. And then right here where I'm receiving my data, I want to make sure that I save it in my state. So I'm going to set state what's the video again, and see if you can write the set state that we're going to need to do in order to save this data to our component state. Anytime we want to change the state, we're going to call this that set state. This case, I really don't care what the previous state was, because
03:30:44
I just want to change this state character to be the data that I just received. So I'm going to provide an object here, say character is the data that I got. Now, unless I'm inspecting this with my dev tools, I don't currently have a way to show that this is actually working. So down here, in our render, I'm just going to choose one of the properties probably name and see if that will show up on the screen. inside of my curly braces, I'll say this dot State DOT character, dot name, refresh the page and see what happens. Hey, now this API call is fairly quick. It made the call, waited for a response, got the response, set the state and then displayed Luke Skywalker on the screen all pretty quickly. But if the person using this app has a really slow internet connection, or the API is really bogged down, or for whatever reason, it's taking a long time for this request to complete, there's actually going to be nothing that shows up
03:31:46
on the page until that request is done, which is a little bit off putting for a user. So although this doesn't directly relate to this lesson, fetching data from an API, this is a great place to talk about having some kind of loading message that lets the user know that the data is on its way. Now usually, I like to use some kind of fancy loading spinner or something like that. But for now, let's just make it display the word loading until that data comes back. This will illustrate a little bit of the power of saving state in your component and updating state as you go through a really simple way to do this is to add to my state, a Boolean as to whether or not we're loading, I'll start by saying it's false. And then right before we perform our fetch, I'm going to change it to true. Pause the video and see if you can figure out how to change loading to true. Okay, remember, anytime we want to change state, we're going to use set state. And I don't care again,
03:32:48
what the old state was, I'm just going to provide an object and say, loading is true. Now what we need to do is figure out how to display the word loading. If state says that the data is loading. Pause the video again, and see if you can write something down inside a div that shows the word loading if this dot State DOT loading is true. Right now I have this dot State DOT character dot name. Here, you can see really quickly when I load this, that there's a moment where it's blank. So what I could do is right before my return, I could say something like text equal to and then provide an if else statement. Or I could shorten that by putting a ternary statement here. So I'm going to say simply, is this dot State DOT loading true? If so I want the text to say, loading. Otherwise, I want the
03:33:50
text to say this dot State DOT character dot name. And instead of having this done here, I can put in my paragraph or whatever element of text I want. And I'll say it before I refresh this, I want you to try and think like the computer and see if you can figure out what's going to happen. Let me refresh this. And what's going on here. It says that it's loading constantly. To thank for saying it, why would it be doing that? Why is it consistently saying loading rather than changing it to the character's name? Well appear we set loading to true, but we never again set loading to false. And so this is always evaluating to the string loading. So now pause again and see if you can figure out how to fix this bug. This one's pretty easy here. When we're setting state of the character. We're also going to set
03:34:50
the state of loading back to false. Let's refresh. You'll see it said loading for just a short amount of time and And then it resolved to Luke Skywalker. Awesome. Okay, so we have successfully used component did mount as a place to fetch our data from an external API, so that our component can do what it's supposed to do. In theory, this components job is to display one of the characters from the Star Wars API. And it needed the data from the Star Wars API. To do that. We've also implemented a loading feature that lets the user know whether it's currently loading or not, so that they don't just give up on our site and leave. I also think this is a good time to take a step back and remember how awesome it is that react is so declarative, if you were doing this with vanilla JavaScript, or jQuery or something more imperative, rather than simply having a ternary, that checks the current state of your loading variable and deciding whether it should display loading or not. And then just say whatever that is
03:35:54
display the text. Instead, you would have to manually get an element by its ID, change it to loading, start the API request, and the data came in, you would have to get the element by its ID, again, you'd have to change some other kind of style, you'd have to change the word to display the data that just came in. Whereas here, we simply get to be more declarative and deal with state and say, whether we're loading or not tell it when to say that it is loading, tell it when to say that it is no longer loading, and react will handle the rest. So this is pretty cool. But it does require a completely different way to think about web development. A few minutes to play with this code, feel free to go check out the Star Wars API and try getting some other resources, see if you can get different things to show up on the screen. And when you're ready, let's go to the next lesson. Let's talk a little bit about forms in react forms tend to be actually a really important part
03:36:56
of having a web application. And I found from teaching students at vi school that it's actually a rather tricky part of react, because we do things a little bit differently than we're used to when it comes to forms. So I'm going to do something a little bit different in that I want you to do a couple things before continuing on with this lesson. The first thing is I want to make sure that you understand state as well as you can, you don't have to be an expert with it. But as long as you have been able to follow along with everything we've talked about so far in state, and been able to complete the challenges, you should be good. If not, please go back and spend some extra time with state. The next thing is I want you to actually pause this video and go to the React documentation on forms, I put the link right here. And this does a pretty thorough job talking about the concept of forms in react. Once you've done that you can move on. So with forms in react, we actually do things a little bit different than we're used to with vanilla JavaScript. In the vanilla
03:37:58
JavaScript Dom API, you create your form in the HTML. And once the user decides to submit the form, you go through all of your form inputs, and gather all the data together pretty much at the last second. And that's when you would do any kind of form validation that you need, and so forth. Well, with react, we're going to do it a little bit differently. Instead of waiting until the very end, right before submitting the form together all of the information, we're actually going to constantly keep track of all the information in state, which means on every keystroke, we're actually going to update state so that we can always have the most updated version of what the user is typing into the form. To really illustrate this, let's just start with a single text input. Down here, instead of a div, I'm going to render a form. And we'll put a single input inside of there. Give it a type of text. Let's give it a placeholder for now, just to keep things simple. Let's see we're gathering
03:38:59
the first and last name of person. We'll start with first name. Okay, so like I said, normally, our form might have a button that says submit the form. And at that point in the vanilla JavaScript Dom way of doing things, we would gather all of the information typed into all the inputs. But in react, we want to watch for every single change to this input box. So think for a second how we might do something like that. Well, input boxes have an event that can get fired called on change. So what we might do is every single time the input changes in the input box, we will run a function. Let's call it this dot handle change. This function obviously doesn't exist yet. So let's create it. Now my goal is to make it so that every single time somebody types in here, I actually update state and I want to do a couple things. I want to Grab the current value of this input box every single time
03:40:05
it changes. And I want to then update state to reflect what the current value of that input boxes. Well, first of all, my state currently doesn't have anything saving anything right now, right? So I'm going to add a property called first name will just started as an empty string. Now I have something that I can update every time the handle change function runs. Okay, well, to update, I use this dot set state, anytime I want to change the state. Truthfully, I don't care what the previous state was, I'm just going to provide an object here that says the first name property should become something. Well, what am I going to put here? Well, I need this to be the current value of my input box. If you're familiar at all with vanilla JavaScript Dom API, then you know that when events fire, they pass a pre determined parameter into our function. We don't get to choose in this instance, what's actually going to be here, it's always going to pass to us information about the event
03:41:09
that fired. And this event has some really important information. For example, I can get access to the value of the input box by saying event got target. Target represents the element in which the event was fired dot value. And that's the value of the input box. So what I've done here is I've said every single time a character is typed into this input box, run the handle change function. And the handle change function changes the state, so that the first name property of state is updated to reflect whatever the current value of this input box is. I can't open the dev tools and inspect state inside of scrambler. And so I'm just going to create a little h1 that will display whatever the state is. So we can see it. And now I'm actually going to run into a little error. You'll see that
03:42:11
it says I can't read the property set state of undefined, see if you can figure out what I'm missing. Anytime we have a class method that's calling set state, we need to make sure we bind it inside the constructor. And so inside the constructor, I'll put this dot handle change equals this dot handle change that by end of this. Okay, so let me refresh this again. And I will start typing and you'll see every single character is upgrading state. Okay, well, I have something that's going to violate the DRI principle, don't repeat yourself principle. Now what's going to happen if I want to create another input for my last name. So I've made another input, that is also running my handle change function. Let me initialize
03:43:13
a last name property in my state. And I added my h1 to show what the last name property of state is. Okay, so I have a first name, last name, first name works great. But what happens when I type in the last name? Notice it just gets rid of everything from the first name. That's because I've hard coded into my handle change that it's updating the first name property of state. Obviously, one way around, this would be to make a whole extra function called handle last name change or something like that. And make this on change be a different function altogether. But that's not going to work in a larger form that may have like 50 inputs or something crazy like that. Now instead, what we're going to do is we are not going to hard code first name here. And we're going to give a name property to our inputs. That perfectly matches what our state is. First Name, capital N, and last
03:44:16
name, capital N. And remember, up in our handle change, we have this event that we're receiving, well, this event has a bunch of information about the input that is firing this event. For example, we grabbed the value of the input box. But I can grab any part of the input object that I want, not only the value, but I can also grab the name property. And so to the left of my object here in the property name here. I can say event dot target, which is my input box. Got name, which is the name property. This isn't quite right, right, because this is a syntax error. If I want this to actually represent the first name, property or the last name property, I need Make sure to wrap this in square brackets. And this works because the name property is a string. And if I'm describing a string property name inside of an object, I can wrap it in square brackets. This is just a principle of JavaScript that you may or may not be familiar with. And so now when I refresh this, anytime I
03:45:18
type into the first name box, I get a change to my state in first name. And anytime I type into my last name box, I get a change to the last name. Okay, as a quick aside, this same principle here is going to work whether I am using a type of text, or anything else that's text based like an email, or phone or number, all of those are essentially going to use this exact same handle change function. And you need to make sure that you give it a name property that perfectly matches the property and state and that you pass your on change function to it. Now I'm actually splitting forms into a two part lesson. And in the next one, we're going to talk about some of the other types like checkboxes, radio buttons, text areas, and select boxes. But before we get there, there's one more thing I want to touch on. And that's the concept of a controlled form. If you did what you're supposed to do, and went over and read the React documentation on forms, you read about controlled forms. The idea is that we actually want what's displayed inside of our form to
03:46:23
perfectly match up with what is in our state. Right now, state is being reactive, as in every time the input in the box changes state updates, according to what's in the input box. Well, with a controlled form, state actually directs what is inside and showing up inside of the input box. This is kind of a splitting hairs distinction. But it really jives well with the idea that state should be the single source of truth, it doesn't have to be that complicated, the only thing we really need to do, especially with these text inputs, is add a value property. and the value should always be this dot state, dot, and then whatever property that box is holding, first name, last name. And when single elements start to get too long like this, I like to put each of these attributes into their own lines. Okay, that's a lot better. Okay, now we can see that everything,
03:47:24
I'm going to refresh this, everything is still working essentially the same as it was before. But now what is showing up in this input box is because of what the current version of state is, in other words, I'm forcing the value or what shows up inside of the input box to exactly match what state is also going to give you one quick best practice that will help you avoid a really difficult to debug bug that could come up in the future. In this case, we're not seeing it. And I'm not going to worry too much about explaining what that bug is exactly. But a really good idea is instead of directly accessing the name and value properties, by drilling into the event, that target object here, you can save yourself a lot of grief by simply pulling those values out of the target before you set any state. Using some basic object D structuring, I can say name, value equals event dot target. Then
03:48:25
down here, I can just say name, value. If this is something that you're actually super interested in understanding, you can look into reacts synthetic event. And you may get a better understanding of why this is important. But it can be really helpful to make a copy of the name and value before you run setstate. Okay, that's enough for this part of the lesson. Take some time to go over this again and digest it, feel free to practice with it. We're going to talk about forms part two next, and then we'll have a practice that goes over both of these parts together. So far, we've talked about some of the most basic input types when it comes to forms, anything text based is essentially going to act the same way that we've talked about in the previous lesson. But unfortunately, forms are a little bit more complex than that. And with some of the other elements that you can use, things start to get a little bit more complicated with react, but it's not too bad. So let's walk through it. Down here, I've made some notes about some of the elements that I'd like to talk about the first one
03:49:28
and probably the easiest to understand is the text area element. If you've used the text area element in regular HTML before, you know that it is not a self closing tag, like the input element, but instead has a closing tag. If I refresh this page, you can see that it's essentially like an input box, but it's a little bit taller and the user has the ability to make it bigger or smaller. We also have the ability to change the default height and width with properties called rows and columns and in regular HD Well, if you wanted to pre populate some text in here, you would do so by typing it in between the opening and closing tags, or rather the inner HTML. Well, what react has done is they wanted to make text area much more similar to the input element. So in react, there's a major difference in the text area element in that it is a self closing element. This is actually really nice, because we are able to use the value property now. And we can use it exactly the same way as we were with an input. This is nice for consistency. And it also makes
03:50:34
it really easy to update the value of the thing inside the text area by updating state. So you can see if I were to add some default value in here. That's what shows up in my text area element. And that's it with text area. Let's move on to checkboxes. checkbox is just a type from input. So input type equals checkbox. But one of the major differences is that you are not going to use a value property like we did with text area or input. Instead, the idea of a checkbox is that it's either checked or it's not checked. This means that we are going to add a checked property here and I'm going to start putting things on their own lines will have a checked property. And this is going to be determined by some kind of Boolean because a checkbox is either checked or it's not checked. And so checkboxes typically maintain Booleans in state. For this example, maybe we are checking if the person that we're referring to is
03:51:35
friendly. Now in state, I haven't yet defined this. So I would come right up here to state. Ad n is friendly, and maybe we'll initialize it with true for refresh this, you'll see that I now have a checkbox and it starts out by being checked. We'll notice that if I click it, it's not letting me uncheck it. Think for a second why that might be? Well, down in my check box, I've told it that it is checked if this.state.is friendly is true. And essentially this true value is being forced upon this input. And so even if the user tries to uncheck it, React will say, Nope, it is actually checked because this value is true. So you might have noticed something popping up in the console that says that I've provided a value prop without an unchanged handler, essentially rendering a read only field. And that's what we're seeing here. It's Read Only I can't make changes to this because I haven't taught
03:52:36
it how to make changes and how to change state. Well, this is where things get tricky, because what I don't want to do is add an unchanged, that is looking to something like handle checkbox method. Right? It would be nice if I could just use my existing handle change method to handle changes on a checkbox. And so we're gonna see how you can do that. First, I'm going to put this to handle change. And just like our other inputs, I'm going to give this a name property that is the same as the thing in state is friendly. And now Give me a second to make this look a little better in our form over there. Okay, that looks better. And now the tricky part comes in. Because in an input box, we're keeping track of what's being typed into the input box. You might remember from our handle change, we are grabbing the value event dot target dot value, an updating state with the
03:53:38
new value. Well, our checkbox doesn't have a value, it has a checked property. And the checked property is actually going to return either true or false. So what we're going to need to do in order to use our same handle change function for our checkbox, is we need to check if the element that is being interacted with in the form is a checkbox or not. And so there's a couple things that we need to pull out. First of all, notice how we have type equals checkbox. Type is a property that we can pull from event target. So besides just the name and the value, if it's an input or a text area, you can also grab the type. And then just like we discussed how checkboxes don't have a value, but instead have a checked property, we can pull that from event target as well. And so now we know that I can check if the type is a checkbox, I won't be able to do this, this dot set state because I won't have a value property. But instead we'll need to change the name which is is friendly to
03:54:39
whatever the current value of checked is. You could do an if else statement, or I could just do a ternary here. So I can say is the type equal to checkbox? If so, we're going to update state in a certain way. But if it's anything other than a checkbox, we'll use our existing This dot set state. Now here, we will also run a set state. And we are going to access the name property. But instead of using value, we're going to set it to whatever the value of checked is. Let me open this up a little bit so that it's a little bit easier to read. And now when I refresh, let's see if I'm able to update my checkbox. Now when I click the check box, it's going through my handle change, it's seeing that the type is a checkbox. And so it's running this, this that set state. And when I go over to my other input boxes, I can still say, name,
03:55:40
and it's updating state in a different way. And while we're at it, to get rid of the warning that we have in our console, let's add an on change to our text area, so that it stops yelling at us. Excellent. Well, now let's talk about radio buttons. Because radio buttons are kind of a combination of the input type text, and the checkbox. What I mean by that is that they are going to use both a value property and a checked property. So I'm going to make a copy of my checkbox, so that I can quickly get something prototyped up, I'm going to change the types here to radio, let's give the name of maybe its gender. And now notice that I'm giving the same name to both of my radio buttons. What this tells the DOM to do is to make sure that I can only choose one of these two radio buttons, wherever they're also going to have value, the value will be slightly different. So maybe first one is
03:56:41
male, and the second one is female. And I'll update my label here. And let's put some breaks in there. Now notice what happens when I go over here. Again, I can't change them. But if I click on his friendly, notice that it chooses one of these two to be checked. This is kind of quirky. And the reason is, first of all, because I copied and pasted, which sometimes leads to funny bugs, it's still saying that it's checked if his friendly is true. But this is where radio buttons are a little bit different, because I can't just say it's checked if some value in state is true, because radio buttons jobs aren't to maintain true or false values, right? That's what the checkbox is for. Instead, I want this to be checked if the value of this dot State DOT gender is equal to male. And similarly, if this one is equal to female, I don't have gender maintained anywhere in
03:57:47
state, so I'll need to go update my state up here. Maybe we'll just start gender as an empty string. Now, when I choose this, it will let me choose one or the other. And under the hood, it's maintaining a gender of either male or female. Again, since I can't pull up the dev tools in scrambled, let's go down here and just display something here. Okay, and we should probably use some kind of conditional rendering. So this doesn't show up until one of these is chosen, but that choose male and female, it's updating state, and therefore updating the text that we're seeing down here. I think this is probably a good point to mention that a lot of this stuff may seem really complicated and different from each other. And it's just important to know that you're not necessarily expected to have all of this memorized. Honestly, I end up coming back to some previous examples that I've written just so I can remember this syntax. This is probably also a great time
03:58:51
to mention that there's a really excellent library out there called Formic. There's a few of them, but I'm just gonna put the name right here. So you can take a look. Formic basically takes all of the pain out of writing react forms, it's a library that you can install and just use their API to make your life dealing with forms much nicer. Okay, the last form element that we're going to talk about is the select box. And in regular HTML, you're probably used to having a select with options. And fortunately, React has chosen to use the value property again, so that we can easily determine which of the select elements is chosen. And also to very easily be able to update state, though for example, maybe we are deciding what our favorite color is. We'll have a state property called favorite color, and the value of this whole element is going to be whichever of these options we choose.
03:59:54
First thing, let me put favorite color up in my state. And we'll just start it off as blue. Okay, and then down here, I'm going to make sure that I'm watching for a change on my select box. So unchanged, I'm still going to run my handle change, I also need to give it a name, just like I did with my input boxes will make sure that this matches the name and state. And then the only other change I need to make is make sure that my options also have value. And the value here is going to be whatever I want the different options to be. So this will be the value under the hood. And then the text here in the inner HTML is what will be displayed in the select box. And that's probably good enough. Oh, and it looks like I put my slash in the wrong place here. Okay, let's give this a break.
04:00:56
So it's on its own line. And maybe put another label here. And yes, I understand this form is very ugly right now. But my click my drop down box, you'll see I have my options. And before I select something, let's just put another thing down here. So I can see that state is updating. Okay, notice that my state initialized correctly. And when I change this, it's changing the value of state. what's so cool about the way that react has chosen to implement the API regarding elements and forms is that it makes it so that we can write a single on change, rather handle change. It had to do one workaround with the checkboxes simply because the philosophy
04:01:59
behind checkboxes is so different than all the other elements. But essentially, we're reusing this one handle change, and it's working for all the elements in our form. Yeah, I totally get that this is a lot to digest, we're gonna do a practice right after this, that should help cement this information a little bit. Don't feel overwhelmed so much with understanding or rather learning all of the syntax of every one of these elements, that may distract you from all of the other coolness that react has to offer. Instead, don't be afraid to just practice this a couple times, and then come back to it whenever you need to, eventually, you'll gain a muscle memory that will help you remember all of this. One last thing that I failed to mention in the previous lesson was how to actually submit this form or do something at the end of filling out this form. Kind of two general ways that you could do this in either way, it's going to be a good idea to put a button in your form of some type. Now in html5, the button element if it's found within a form,
04:03:00
acts like the old input type submit, if you're familiar with using that, where you would give it a value that displayed the text on the button, and so forth. I personally really dislike the way that input is used in so many different ways. And so I never use the input type submit myself. Instead, buttons in html5, if they're found within a form. When they're clicked, they are a submit button. And they will fire the on submit of the form itself. So when you want to do something, when you're finished with the form, one thing you could do is to just add an on click on your button. Personally, I like to handle that action on the form itself. And so I will have an on submit handler. And we didn't write this but it would be just as easy as creating another method that's called handle submit and doing something like submitting the form to an API or something like that. Okay, take a deep
04:04:03
breath, you've basically finished all of the most important parts of forms. We've talked about input type, text, and other text based inputs like numbers and passwords and so forth. But we've also learned how to handle checkboxes, radio buttons, and select boxes and text areas. Okay, let's move on to the next lesson, which will be a practice of forms. So let's practice building forms. Your challenge is to wire up the partially finished travel form below so that essentially it works in react. This challenge is actually one that we use at vi school and the URL for the original challenge is right here, you'll probably want to go there so that you can see exactly what's supposed to be done. Now in this goal will use this as in plain HTML forms challenge so it doesn't really have anything to do with react, but I'm just adapting it for react for this lesson. So pause this lesson, go take a look at this website. Learn some more about what you're trying to accomplish in this form, and give this a go.
04:05:06
Alright, so there's a lot of different ways that we could approach this, I think what I might do is initialize everything with state first, and then start wiring things up one at a time. Okay, so I know that my state is going to have a first name. Last name. We'll also do age, which actually have a little bit of a question myself on, but I'm just going to initialize it at zero for now, and then try something a little bit later. Let me scroll down here, I know I'm supposed to have under and I have a select block for location, I'm pretty sure this is supposed to be destination. So I'll say destination, then a checkbox for dietary restrictions. Now, what's actually going to be there for dietary restrictions is a number of checkboxes. And because they're checkboxes, it's possible that they will check multiple boxes. And so if I'm going to have multiple dietary restrictions, what I might
04:06:07
do is choose to take this as an array. And okay, that seems to be the last thing because here's my Submit button. Now that I have my state initialized, I'm just going to start putting some of the things that I know will need to exist in my existing elements here. So we'll start with my inputs, I know that I'm going to need a name property for each one. Now I'm going to need a value for each one. Actually, this is going to be determined by state. So this will be this dot State DOT something I know each one is going to want to be able to change. So I will have an on change will probably call it handle change. While I'm added I'm going to put everything on its own line. Okay, so the names will need to match the parts of state that they're representing. So this will be first name, last name, and
04:07:09
age. And I'll actually have the same thing for state. So this will be first name, last name and age. So that looks like I lost my curly braces there. Now maybe before I go creating a bunch of extra elements, I may finish this part off and make my handle change method. Right here, I will need a handle change. I'm going to take an event. And before I forget, I should probably find this I know that I like to pull some of the elements from the event that target. So for this right now, I just need name and value will add to this later when we get to the checkbox. And I'm going to set state here whatever name I'm concerned with changes to the new value. Okay, so the buggy thing
04:08:15
here is that this starts with a zero. Let's go down and see if these three inputs are working correctly. So with your name, going to put this dot State DOT first name, base, and this dot State DOT last name. If I type in these boxes and see if it's working great. The same for age. And it already says zero. But if I change this to something different. Okay, that works. And now the thing I actually wanted to test was to see if react complained when I started this as No. And it does. Okay, and it looks like it just doesn't like that the value on the input is no. So it recommends using an empty string. But part of me going out and doing a bunch of research this will
04:09:19
just have to do for now. Okay, so after a refresh, you can see I don't get my zero age anymore, which is smart, we wouldn't want that showing up as a default of our form. And it looks like so far, so good. Let's go down and fill in some of these new elements here. Let's start with the radio buttons for gender. I like to wrap my radio buttons in a label that said that the person could also click on the text of male or the text of female and select the associated radio button because the text is a parent of the radio button. So I'll just put the label as a parent of my radio button which is an input Type radio. And I like the text to be on the right side of the radio button myself so that the radio buttons are nice and lined up on the left side. And remember the radio buttons were kind of a combination of checkboxes where they have a checked property and also the text inputs where they have a value property. So I'm going to be adding a lot of stuff to
04:10:21
this radio button, I'm gonna go ahead and start putting things on their own lines already. And then we'll say response has a name, which will be a gender value, in this case, it will be male. And we're also going to have the checked property. This one is a little bit trickier because it's going to say this radio button is the selected one. If this that state that gender is male, then we'll have our on change to be our this dot handle change. And let me go ahead and just copy this and change it to work for female as well. Another great here. Hey, let's refresh the page and see what we got male and female, and it looks like I can check those. Let me see down here, if that's working. So under your gender, we'll put a start state that gender doesn't start as anything and choose male. And there we
04:11:32
go. Change it to female. Perfect. All right, we're cruising. So let's do our select box now says the select box for our locations or destinations. And this is going to be a select box. And we know we're going to have some options in here. And let's put before options. Obviously, this is not a great airline that's flying to only three or four locations, but whatever. Now I remember that our select and our options all take a value property. They're a little bit different from each other, but I'm going to go ahead and just add a value. Okay, the value on my options is simply what state should be if this option is the one that's chosen. So this is where I'm going to put my actual locations. So I might say something like Germany.
04:12:36
And I'm going to keep this lowercase for the extra value just to stay consistent with how I have things elsewhere. Let's do Norway, the North Pole. And why not, say the South Pole. The value of the select box is not the options that we have, but rather the chosen option. So this will be determined by state as part of a control perform. We are calling this destination. Then just like our other ones, we need to make sure that this has a name, say his destination again, it needs to match the property and state. And we'll have our same on change, which is the standard change is getting long. So let's put it on its own lines. And down in the Display area, we will put destination
04:13:44
from state. Now you'll notice here that it has automatically selected the first one, but doing so has not actually updated state. So my destination is still empty. If I want to Germany, I would actually need to switch to Norway, and then back to Germany to actively choose this as my option. And so what a lot of people will do is they'll just put an option at the top that maybe we'll leave empty and put something like something like that. Okay, Germany gives me Germany and I can actually actively switch to any one of these that I want. Okay, well, we've saved probably the more difficult one for last. And that's our checkbox. I feel like I've had some clarity since I first started state. At the beginning of this lesson, I created an empty array for my dietary restrictions. And I'm thinking
04:14:48
it's actually going to be easier if I save this as a sub object where I have an option for each one of my dietary restrictions and the value is going to be a Boolean. So instead of trying to manipulate my bullions into some kind of text value. Instead, I'm just going to create an object. And each one of these will represent a Boolean of some kind, I will probably want each of these to be unchecked as a default. So I'll just say each one is false. The is kosher. Free. That should be good enough. So now I'll need three checkboxes, each one representing one of these three properties down here in my form. Again, I will wrap everything in a label type of checkbox.
04:15:50
Name, the vegan unchanged will continue to be this handle change, which if you remember, we're going to need to update in order to correctly handle the checkbox. And then I need something to direct whether or not this is checked. And this is going to be a little extra nested level here. So it's going to be dietary restrictions.is vegan. And as part of my label, I'll just put a label that says vegan. Okay, so I'm actually just going to create a few of these and update them. So I have is vegan is kosher. And this one was lactose free. Okay, let's take a look and see what that
04:16:52
looks like. Okay, awesome. Now notice that once again, I'm not able to change any of these checkboxes. If you didn't get this far, when you did this yourself before we started doing this together, pick the time now to see if you can update our handle change so that it can handle the changes in a checkbox. Okay, so once again, the checkboxes don't have a value property. And currently, our handle change only is able to update things with the value. But we know that we're going to have to check if the type is checkbox. So I'll need to pull the type from my element. And I'm also going to want to see if property is true or false. Or rather just see what the check property is, then what I need to check is if the type is a checkbox, I'm actually going to do my set state on its own line, it's gonna get a little more complicated. Remember that in this case, I can't just say
04:17:58
to set the state of name checked. That's because I've chosen to have a nested object here. Apparently state does not have a property called is vegan or is kosher. Instead, it has a property called dietary restrictions, which has a property called is vegan, or is kosher. Now normally, React is smart enough to know that if I'm updating just one part of state like the destination, it will combine that with the rest of state. However, I'm not 100% sure offhand, if I update just one part of a nested object, if it will also update the rest of state. So I'm going to be live testing this here with you. Let's give it a try. First thing is this won't work either way. So this will have to be dietary restrictions. Be an object, and we will update the name. Before I can test this, I need to finish my ternary because this is broken Currently, there will say otherwise. This dot set state name value just like we had before ever feeling
04:19:02
this isn't going to work, but let's give it a shot. So no errors so far. That's good. You know, just put something in here, we'll see that my name is working. Now if I check vegan, it doesn't seem to like it, it thinks that I'm changing something from a controlled form to an uncontrolled form. And that has to do with the way that date is updating out Fortunately, I think I should be able to use the object spread notation, which means what I can do is pass in the previous state. If you remember when we talked about that state how I can either provide a brand new version of state or I can provide a function that receives the previous state as a parameter and uses that to update state. I'm going to change this to the second way and I return a new object and inside of dietary restrictions, going to take all of the property These from proof State DOT dietary restrictions, and then update the rest. And it actually looks like maybe
04:20:07
scripted does not have the ability to do object spread notation. It really depends on what version of ECMO script you are transpiling using Babel. In this case, it seems like the object spread notation doesn't work in scrubba. But at this point, I think it kind of worked myself into a corner. One workaround that I can do and probably will do for now is to just get rid of my sub object, dietary restrictions. And make each one of these their own property on state, we just got promoted. which case, I can probably simplify this quite a bit and go back to the way it was. So we'll get rid of dietary restrictions, we'll get rid of this name checked. And now that is vegan is kosher, and is lactose free are kind of first class citizens here in state, I can simply update by its name and determine whether it's true or false. Let's try this. Okay, we're doing some live debugging here, it says that it cannot read property is vegan, of
04:21:08
undefined. And notice that I still have my checked saying this dot State DOT dietary restrictions. We don't need that anymore. Or handle change and try again. Okay, so now I should be able to enter something as a first name, which shows up in my name, and then choose some of these. And oh, we haven't updated our dietary restrictions display yet. Down at the bottom, let's just see if we can get this to work your dietary restrictions, say, vegan. state that is vegan. And we'll just do the same with kosher and lactose free. You'll notice that it looks like they're starting out empty. If I had
04:22:10
checked them, it's not actually displaying any text here. Isn't is react does not display Boolean true or false as text on the screen unless you go out of your way to make it text. But one quick workaround that I could do is I could put another ternary here that says you should display Yes, if it's true. No, if it's false, then here, I actually get the nose showing up. Let me put these each in their own paragraphs, so that they don't mash together this way. And you'll see vegan, no kosher, no lactose free No. When I select some of these, those have changed. Yes. Or another fun practice that would just be a regular JavaScript challenge is to try to get it to display the words vegan, kosher and lactose free is a comma separated list. I won't do that here. Because I've already
04:23:11
taken up time just trying to debug this with you. If you want, you can pause the lesson and give that a shot might be kind of a fun challenge. And with a little bit of workaround, and having to change a little bit of our state, we have been able to successfully build our form. It's obviously not very pretty, but it seems to be working. So if I fill everything out, not 9999, as it turns out, looks like oh, I have to select the destination. Let's go to Norway. It looks like everything has filled that correctly. I mentioned at the beginning of learning forms, it's a kind of complicated process. And forms in general are very important when it comes to web applications. Obviously, they're not always going to be filling out lengthy or forms like this. But if you think about it, anytime you click a checkbox, or anytime you have a radio button, or a signup form, or a login form, or anything like that, a lot of that is using forms. So really understanding this is going to help
04:24:13
you be a better developer for web applications that users can interact with. So although I said it's not necessarily important to have each input type syntax memorized, it's still a really good idea to practice this, play with it, see if you can really understand it so that when the time comes to build the form in your react app, you can do so relative ease. Thanks for your patience while we went through and debug some of this stuff. Hopefully, that was a good exercise in general. When you're ready, let's move on. So when we built the travel form in react, you may have noticed that a lot of the time we were scrolling up and down and we have an component here that's 146 lines long. Now you'll notice that A lot of this space is being used as display logic, right? It's showing the form, it's displaying UI, it's creating elements, all of this happening inside of the render. But then we also have a place where we're maintaining state. And we have
04:25:15
our handle change function, which is doing some business logic. You know, there's been a study done that shows that a programmers ability to understand the code that they're looking at diminishes dramatically, when the file that they're looking at is one in which they have to scroll to see everything. And I've noticed that with my students as well, if I have code that's too long, and I'm scrolling around the screen all the time, it's very easy to become disoriented and lose your place, and makes it much more difficult to actually understand what you're looking at. It would be nice if we separated our concerns between the UI logic or the rendering logic, and the business logic that actually mandates how the rendered logic changes. And so this idea emerged a few years ago of having a presentational component and a smart component or component that's in charge of the business logic. There's a lot of different names that you'll hear presentational and container components, smart components and dumb components, containers and components. But they all refer to essentially
04:26:17
the same thing. The idea is that you have one component whose job it is to maintain state, and to have the methods that update state. And then for that component to essentially delegate all of the UI logic or presentational logic to another component. That's called the presentational component. That presentational component will only be in charge of receiving props and displaying things correctly. If you'd like you could read den epor mobs, medium blog post where he talked about presentational and inner components at this URL. And if you're unfamiliar with Dan Abramov, he's one of the primary developers of the React framework. So let's take a minute to organize some of the code that we've written here. First of all, I currently have everything happening inside of my app component. And I just did that for simplicity. But in reality, I want my app to render my form, and let my form do all of the for me things. So I'm going to create a new component called,
04:27:19
let's just say form dot j, s. And I'm essentially going to take everything here, put it over and farm, clean up a few things. palette form, and export form. And then over in app, we will make sure to import the form. And since our form is handling all of our state and everything, we basically can change this into a functional component that just renders the form. So maybe I'll go ahead and do that. That's pretty simple. And you'll see that everything is showing up the same. And remember way back when I kind of talked about how I like my app to be sort of a table of contents where I could put a header above this and a footer below this and whatever main elements and then delegate the rendering of those main UI components to the other components.
04:28:21
So our problem is essentially still the same with form j s, because we still have one component that's doing all of this stuff. So what I'm actually going to do is I'm going to create another component, this one we will call form component, that j s. But essentially, you could call these whatever you want, you could have form container dot j, s and form component dot j s, you can even put them into a folder called form and make form j s actually just index j s and then have form component dot j s, I've seen it done a bunch of different ways. And for clarity, right now, I'm actually just going to rename form to form container so that it's obvious which one we're looking at. And that just means over an app js, I'll need to update this to form container. And we're still working. Okay, opening the form container, I'm essentially going to take all of the rendering logic, let's get this whole return statement. I'm going to take it out. While I still have it in my clipboard, I'm going to go over to the form component and create just a regular functional component.
04:29:26
Thank you receive props. And let's paste our whole return in there and fix some of our indenting. Awesome. One thing you might notice that's broken because we copied this from a component that was a class based component. We have stuff like this dot State DOT first name and this dot handle change. Well, this functional component doesn't have a handle change method and it doesn't have any state. Instead, it's going to be receiving everything through props. So we'll come back and fix this in a minute. But over on our form container, you now have an empty render. And what we're going to do is let the form container delegate all of the UI stuff to the form component. So at the top, I will need to import form component, the form component file, and simply render a component.
04:30:28
Like we said, we're gonna have to pass a bunch of stuff through props down here. But already, we can see that my form is quite a bit simpler than it used to be. Okay, well, let's wire up our form components so that it has all of the same information because it right now if I refresh this, you'll see that we have some problems. And so what I actually need to pass are all of these properties in state. And I also need to pass my handle change method. So let's start with the handle change method. And I might as well just keep the name the same. That over in my form component. In props, I'm receiving a prop called handle change, which means every time I have this dot handle change, I need this to instead, say props dot handle change. That's a good start. We still have problems because we have no state in this component.
04:31:32
So let's go back to the form container. And I have a number of different options, the most annoying of which is I could pass down first name, which is this dot State DOT first name, and then do this for every one of these properties. But it's really that's pretty obnoxious, right? Because my form component is now going to have maybe like seven or eight extra lines. Another option is I could just pass everything, the whole state object down as a property called something like data to the start state, this is leagues better than what we had just tried to do. But it does mean that in our form component, we're going to have, instead of this dot State DOT first name, we'll have props dot data dot first name. And truthfully, that's not so bad. And in fact, in my personal development life, I have tended towards this, where I pass an object down and I just give it a name, it does mean that I have a little bit of extra typing where I say props dot data dot first name, instead of finding a way to just have props dot first name. But as we discovered,
04:32:34
when we were doing the travel form, screenbid doesn't do so well with the object spread operator. But if you have the correct ECMAScript versions supported in your project, you could simply say, pass down all of the properties of this start state. Doing so would allow you to in your form component, say props dot first name, props, dot last name, and so forth. Again, I have actually leaned towards sending down an object, simply because it makes following the prompts a little bit easier for myself in the future and other developers. But I've seen it used both ways. So it's really just up to you here in screen. But I believe I'm going to have to do something like this. So now let's go over to our form component and update everywhere it says this, that state change this to props dot data. Let's see if we have any problems, says nothing was returned from render usually means a return statement
04:33:38
is missing. Yeah, I think in my form container, I Yep, I got rid of my return, which we cannot do. So we're gonna put the return back. And we have one more error, it looks like it says that I probably forgot to export my component, which Sure enough, I did. export our form component. And it says react is not defined. And that's because I forgot to import react. And you might remember way back in the beginning, the reason it says that is because JSX is normally not valid JavaScript. And so I actually need the React library in this file so that it knows how to handle JSX. And our form is backup. Let's see if it's working. Good news. Choose the destination. And say we have some allergies or preferences and we're male. And
04:34:41
yeah, it looks like everything else is working. Perfect. And as such, we still have a quite large form that we have to scroll a little bit in. But this entire file is only caring about the UI component of our form. Whereas over in the form container is only caring about the business logic of the form. This way, we have a nice separation of concerns. And it allows us as a developer to essentially have an easier time when we need to make changes to this file, we don't have to scroll up and down over hundreds of lines of code. Now, one thing that's probably good to point out now is with libraries like Redux. And with the recently released context API, notice that the container component split of components here, like we just did is not actually used quite as often, especially when you are injecting context or global state from Redux or something like that into your components. When you do that, a lot of the business logic is delegated to another place entirely. Which kind of means
04:35:45
that you end up writing a lot more functional components to simply consume the data that lives in Redux or in some global context or something like that. But as you're developing your applications, this can be a really great way to separate some concerns, if you find that you have a lot of business logic, and a lot of display logic happening all inside the same component. Hey, with that, under our belts, we are ready to move on. Alright, we've made it to our capstone project, where we're going to build the meme generator that we talked about at the beginning of this course. Now, the way this will work is part of the time, I will put comments here that will give you some direction for you to build out parts of the UI yourself, at which point like I have in the past, I will give you time to pause the lesson and do that afterwards, we'll go through that together. And there will be other times where I'm just building things on my own and kind of explaining what I'm doing. Now notice that we're starting almost completely from scratch, the only thing that I have included already is a bunch of styling that I've pre written. And the reason I did
04:36:48
that is because while this isn't a course on styling, and just for time sake, so that it's not too boring, but over an index js, we have nothing here. So get excited, this is gonna be fun. And let's get started. Okay, so the first thing you need to do is to create that boilerplate code that will get react to render something on the screen. And the thing you'll render should be an app component, which you'll need to create separately. Pause now and give that a try. Okay, let's get rid of this comment. And we'll say import react from react, React DOM, from react dash DOM. We'll use react Dom to render our app component, which doesn't exist yet. We're gonna put it at the root.
04:37:50
we'll import app. And this is basically the boilerplate we need for there. So let's create our app. Yes. There we will also import react from react or export our component. Let's start by making a functional component called app. Which we will have returned something so we can see that it shows up on the screen. Awesome. Okay, let me type up some comments for the next thing that you're going to do. Okay, so you need to create two new components header and meme generator, the header is only going to display things and the meme generator will be calling to an API and holding on to data. So let that information help you determine what kind of component you're going to create.
04:38:53
And as always, each of those components should be in their own file of the same name. Pause now and try that. Okay, this one's pretty straightforward. So let's create a new file called header dot j. s. And a new file called meme generator. Yes, these comments are in the header import react from react. export the header. And since this is going to be component that just displays things, we'll make it a functional component. Now, always I'll just put something that says header. And over in meme generators, since this will be holding data and making calls to an API and so forth. This should be a class component. We'll still need to import react from react
04:39:56
and since it's going to be a class I'll go ahead and just import opponent as well export the meme generator and create my meme generator class that it will need a constructor which calls super. And I mentioned that it's going to hold some state. So I'll just put some empty state there. And I will also put my render. So that as before I have something showing up. Now that I've created both of those over in my app j s, I can import them. I'll go ahead and use them here, I'll need to wrap
04:41:00
everything in a single element. We'll make an instance of our header of our meme generator. Awesome, good so far. Okay, over in my header, I'm just going to begin putting some stuff here. So I know that I want to use the semantic html5 tag header. And I want this to have an image. And we will set this as our source which is a troll face. And we'll give it an all property of problems. too long for this line already. So I will separated, we'll just have a paragraph that says and I save this. Okay, you'll see my styles have kicked in because I used the header tag. And I'm going to go ahead, I didn't do
04:42:03
a great job making this responsive. So I'm just going to make this window a little bit bigger. If that has overlaid your code a little bit, you may want to make sure you maximize the window here, first grandpa and go a little smaller probably. And this is everything we're going to do with the header for this project. So we're going to go to meme generator, and pretty much everything else we do will just be in this file. So now it's time for you to get your hands back on the keyboard. So I will write up some comments here for what you're going to do next. Okay, we'll just take this one small step at a time. So all you're going to do is initialize state to save the following data, top text, bottom text, and a random image. And I've provided the URL to the first image that you'll use. So pause now and do this. It sounds pretty straightforward. So to initialize state, I'm going to build up this object here and save
04:43:08
top text, which is text, but I'll just start it as an empty string. Bottom text, also an empty string. And my random image, which I'll just say, IMG is the image I provided. They were not rendering this anywhere. So we can't really display this. But that's okay. This is good for now. Let me delete these comments. Okay, I have another challenge for you. Let me write up the comments now. So we're going to be using an API that provides a bunch of meme images. And your task is to make an API call to that API, which I've provided the URL to, and save the data that comes back, which you'll find under response dot data dot meems, to a new state property called all meme images. And the data that comes back is going to be an array. Let's pause now and give this a try. When we're getting data that we expect our component to have at the beginning,
04:44:15
we're going to use the lifecycle method component did mount. As soon as the component mounts, we're going to use the native fetch function. And we're going to call to the URL that I provided. And this will return a promise that we need to turn into a JavaScript object. We will call the JSON method on that. Then we'll get the actual response that will be useful to us. And I'm going to pull the memes array from response dot data. And then like it says, we need to save it to a new state property called all meme images. So I'm going to initialize that as an empty array, and start, and then I will set state. And I don't really care what the previous state was. So I will just say all meme images. Now B means
04:45:18
that we just pulled just so I can see that this data is here, I'm just going to console log, the first item in this meme, and take a look at what that shows me. Cool. So I've got an ID, a name, and a URL, which is what we're going to be using is this URL property. Awesome. can delete these comments here, if you remember back from the demonstration of what this meme generator will look like, there's going to be two input boxes here that allow you to input the top text and the bottom text on the image. So what I'm going to do now is just stub out a form. And then I'll have you create the input boxes. So I'm going to wrap everything in a div building a form. And for my styling, I'm going to give this a class name. informer. And we'll create a submit button. It says Jen, all right, and then I'm going to put
04:46:28
some comments here for what your task is next. So now that I'm inside of my form element in JSX, in order to write these comments, I have to put the curly braces. So that basically tells the system that I'm back inside of JavaScript, so I can write these comments. So what you're going to do, you can delete this when you're ready, what you're going to do is create two input fields, one for the top text and one for the bottom text. And remember that this form should be a controlled form. So you'll need to add any of the attributes to these inputs that you'll need in order for that to still work. Don't worry at this point about creating your on change handler, because that will be the next thing that you do. So pause now and try this. Okay, so this is just creating two inputs, so we will make two inputs. And save time, I'm going to do this in both places,
04:47:33
we will have a name attribute which one of them is going to be top text. And the one is going to be bottom text. In both of these should be a type of text, I will give them a placeholder. So I don't need to worry about having labels. Take up text and say button text. And then for this to be a controlled form, I need to make sure that I set the value equal to whatever the current value of state is. Up text, bottom text. Now the last part that I mentioned you'll be doing next is to write the on change handler. And since these are both text inputs, you won't have to worry about checkboxes or anything like that. So this one should be fairly straightforward reference, let me write the comments up here. Create the unchanged handler method here and it should make sure to update the corresponding
04:48:40
state property on every change of the input box. Pause now and do this. Okay, as I mentioned, this is going to be a fairly straightforward one, we're going to have a handle change that will receive an event. And to fix my syntax errors down here, I will add this to this dot handle change. And that method will need to be bound in my constructor. And while we're at it, I'll just put a console log here. See if this is working. Let me get rid of that console log from the means console. And our method is correctly firing. I want to pull the name and value properties from event target so that I can get the name of state that I'm
04:49:47
supposed to update top text or bottom text and then whatever is actually typed into the box and I'm going to update my state. Now I don't care about the previous state So I can just provide an object and I can say whatever the name is it the value that we pulled from the box. Okay, and we'll get a chance to see that that's working pretty shortly. If you want, you could pause now and there, right a console log or put something in your render that shows whether or not this is working. But we'll just move on. Next thing I'm going to do is have a place to display our meme. Now remember, we're receiving an array of all the memes that this API has. And what we're going to do is make it so that when they hit the gen button, it just chooses one of those images at random to display in the area below. So I'm just going to build the area below right now. Make it a div. And for
04:50:47
my styling, I give it the class name of meme. Have the actual image here. source is going to be what we've saved in state as the random image. And I'll just put an empty alt property for now. And then for the text itself, I'm going to have a couple of H twos which have a class name of up and bottom. And all they're doing is displaying saved in state objects, text and text. Okay, so my image is showing up. This is the random image that we initialized here. And let's see if my text is working. One does not simply walk into Mordor and you'll notice
04:51:55
that every keystroke, my text is showing up correctly, which means I'm correctly setting the state on every keystroke. And the time has come for you to do the last challenge of this Capstone. So let me write out some comments. I wrote these purposefully a little bit vague so that you had to think back and look at your notes or go back and look at previous lessons, whatever it might take, going to create a method that when the gen button is clicked, chooses one of the memes from our all memes images array at random makes it so that image that it randomly chose is the one that shows up in our meme display image area down here. Now remember, the property on the chosen image in the array is dot URL. You write that here. That URL is the property that is the string of where the actual image is hosted. This is your final push, give that
04:53:00
a try. Okay, so we could make it where I have an onClick handler for my button. But because this button is inside of a form, I personally think it's more semantic to have this be an on submit of the form. We'll call this handle Submit. So this is where we will create that function. Need to grab the event, because we don't prevent the default into try and refresh our page, which will be annoying. So we don't want that to happen. And while I'm at it before I forget, let's bind the handle submit in our constructor. What we have now is just a basic code challenge. Oh, I will just pseudocode some of this, I'll say I need to get a random number, which represents index the array and get the meme from that
04:54:06
index. Once I have that meme, I'm going to set my random image property to the URL the random item I grabbed. I've broken this problem into smaller parts, we're going to get a random number so that I can make sure that it's one of the indices in our array. We'll make sure that I multiply whatever the random number I get by the length of the meme images array. And now that I have that random number, it should be easy to get a random meme just just the index of the all meme images Random number that we just got. And all I'm concerned with is the URL property. So I'm just going to snag that right now. And I just need to update
04:55:12
state now. We'll use set state. I don't care what it used to be. And I know that I'm upgrading the random image property, and the value will be the random meme image. Let's save this and see what we get. Oh, you'll notice that some of these are funnier than others. But point is we have a random meme generator, we've written the top text, the bottom text, it's randomly choosing from the array of images that we pulled from the database online, we now have a completed meme generator. Just because I'm OCD about this stuff, I'm going to get rid of these comments. This would be a perfect time to check this code out, see if you can play with it make a better one, be try to get the gist from a different API. And although it sounds really obnoxious, one of the best things that you can do to practice stuff like this is delete all of this code and try it again from scratch. Feel free to take a break at this point, you've really accomplished a lot of great things by following
04:56:16
through this course and learning the things that you've learned, I have just a few more topics that I want to cover before we finish up this course. Oh, as always, when you're ready, let's move on. Because react is maintained by Facebook, and quite a few developers over at Facebook, as well as the open source community react is progressing really quickly. If you've ever tried to watch tutorials of react from more than maybe two years ago, you might notice that it's quite a bit different now than it used to be. And we even had a lesson on how react version 16.3 introduced some new lifecycle methods and also started the process of deprecating some other lifecycle methods will react 16.6 was just released. And there's even more new functionality now and a lot on the horizon for react version 17 and onward. So I thought I would make this quick lesson about some of the more modern features that you can use when you're creating react apps. And a lot of these features will work or won't work,
04:57:21
depending on which versions of ACMA script you're supporting in your project. But as long as you're using a transpiler, like Babel, you'll be able to use pretty much the most modern versions of ECMO script and therefore use some of these things. Now, I didn't do enough research to know which of these are just experimental or which of these are definitely going to be included in reactor in JavaScript in general. So you may want to just be aware that any one of these at any given point may just disappear and not work anymore. But it's pretty widely used. And I'm fairly certain a lot of this will be included inside of either react or JavaScript itself. Now one of the major changes is that our methods can be written as arrow functions. And I believe that scrim that may complain a little bit about this. But if you're doing this in your own environment, this should be okay. I can change this to be an arrow function, which looks like a very small change. But in fact, what it does is it gives it a lexical this inside, which means that it doesn't create its own this context,
04:58:24
but instead uses the this of its surrounding environment. Basically, what this means is I no longer have to bind my methods in the constructor anymore. So I could get rid of this. And because this is an arrow function, and it's using the this from the class, everything should just continue to work. So that's a really easy and convenient update that you can make to your class methods. Now, another one that's a little more dramatic, but also really nice is the ability to create class variables, just like we're doing here with this dot state. But doing so outside of a constructor, so I can create this class property by simply saying state equals an object. And I guess in this case, to be consistent, we would have a first name, which is an empty string. And doing this essentially allows me to get rid of my constructor entirely. The last time I checked, this was still a proposal in JavaScript, but it looked like it was heading towards being included into
04:59:29
the language as a permanent resident. So I haven't researched this recently, but just take this with a grain of salt and know that again, this may not be included, but it's looking like it will be we can simplify this a little bit, since it's just a one liner. So those are both really nice, fairly simple changes that we can make. I mentioned once again, the changes to the lifecycle methods, I created a lesson that you've probably already gone through that talks about some of those new lifecycle methods. So if you need a refresher, go back, watch those again. But Down here at the bottom, I've included some resources to some of the more either advanced react topics or brand new react topics. So for example, in react 16.3, they introduced a kind of public non beta version of their context API, I've had a chance to play around with the context API, and I'm a total convert. In fact, a Wii school, we have opted to drop Redux in our curriculum, and OPT instead for using the context API. And there's a number of reasons to do so that doesn't mean that Redux no longer
05:00:33
has a place. But for our purposes, the context API does everything we want, and it's quite a bit simpler to learn. And then there's some advanced react topics such as air boundaries, render props, higher order components. All of these can be found directly inside the React docs, which you can see all of the links here just go directly to the React docs. And in fact, in the menu bar, they're all part of an advanced react sub section, that would be a really great resource for learning more. I've also included here, a link to the React router homepage, the React router is a great way to make single page applications using a very declarative library, which is react router. It's very widely adopted and used in most larger applications that are single page applications. Then, at the time of this recording, these topics react hooks react, lazy, memo, and suspense are all brand new additions to react. I haven't looked too much into lazy and memo. But I know suspense has to do with asynchronous loading. And hooks
05:01:36
have to do with a way of essentially including and modifying state in a functional component. And in fact, if you look at some of these changes that react is making, it's looking like they're heading towards a place where react will almost completely be written in functional components. And class based components will not officially be deprecated. I think they even say in their docs that there's no plans to remove class based components. But it seems pretty clear that they're moving in a direction that they are encouraging the use of functional components more and more. Hopefully, I'll get a chance to update this course, to include some more topics as they become released. And as I become more familiar with them, but for now, just know that react is changing constantly. And it's always a good idea to be checking the change log to be engaged in your community and watching for these changes, because it can be really beneficial to you and your career to be up to date on the most advanced and most modern react features.
05:02:39
So we just went through and created the meme generator together. And before that, we had done a multi part series on creating a to do app, but to do apps, honestly, are pretty boring. And the more you do them, the more boring they get. And so I decided to include here some resources that you might use to come up with ideas for apps that you might want to build yourself, I was going to come up with a list of my own ideas. And then I came across Free Code camps lists that they have built over the years. And each one of these is an entire blog post with a whole bunch of different ideas that you can use. So I would honestly just recommend visiting these websites, reading through the ideas that they have, and either picking one or using that as inspiration for ideas for you to come up with. Alright, you've made it. Now there is so much more to learn about react. But you now know all the building blocks, you need to start building react apps for yourself. So let's look at a quick summary of the core concepts we've talked about in this course, we talked
05:03:43
about JSX, and how it's a wrapper around JavaScript that allows you to write your UI using a familiar syntax. html, we noticed that there were a couple slight differences here and there. But for the most part, it helps writing components feel very familiar. We talked about two different kinds of components that you can make a functional component and a class component and what each one of those is capable of. Basically, if you need state or lifecycle methods, you will have to use a class based component. Otherwise, it's a pretty good practice to just stick with a functional component. In fact, going forward react is kind of looking like there'll be releasing features that allow everything to be written as a functional component if you want. We talked about some basic ways to style react. If you're using CSS classes, you'll need to use class name inside of your JSX in order to assign a class to that element. Or you could write your CSS as a style object directly in your JavaScript, which can be helpful if you need them to be dynamic, or you just generally prefer to style right there
05:04:44
inside your component. We talked about props which are the primary way to pass data down the component tree and we covered state, which allows your components to hold on to and modify the data. Anytime you want to change state you'll need to use these sets The method, we talked about conditional rendering, using various vanilla JavaScript techniques, you can determine which parts of your UI you want to show up at any given time. And oftentimes, this is done based on some variable that's held in either state or props. And we spend some time learning about forms in react and how to gather input from users in form elements. And there is so much more about react that I would love to cover, but we're going to have to save all that other good stuff for another course. For now, thanks so much for letting me guide you through learning one of the best frameworks out there.

DOWNLOAD SUBTITLES: