Learn React JS from Scratch | Technology Mania | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Learn React JS from Scratch

teacher avatar Technology Mania

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

67 Lessons (7h 42m)
    • 1. 1 What will we learn?

      0:45
    • 2. 2 Your First App Overview

      11:06
    • 3. 3 Frequently Asked Questions

      9:18
    • 4. 4 Let, Const and Var in 3 minutes

      3:53
    • 5. 5 Install Node JS

      5:26
    • 6. 6 Create Your React App

      5:35
    • 7. 7 Why You Will Need To Create a React App

      6:27
    • 8. 8 Start Creating React App

      6:24
    • 9. 9 Do You Want to Learn How To Stop React App

      5:17
    • 10. 10 Important Functional Components

      15:05
    • 11. 11 Converting HTML JSX

      6:02
    • 12. 12 Inline Styling with JSX in React JS

      10:53
    • 13. 13 JavaScript Variable in JSX

      12:43
    • 14. 14 Three Tenets of Components

      3:34
    • 15. 15 Simple App with React

      2:55
    • 16. 16 Styling App with Semantic UI

      8:34
    • 17. 17 Building Component

      3:57
    • 18. 18 Specifying The Image in React JS

      3:19
    • 19. 19 Duplicating The Single Component

      1:58
    • 20. 20 Component Nesting

      12:06
    • 21. 21 Props System

      4:10
    • 22. 22 Passing Props to Child

      13:02
    • 23. 23 Reusable Component Overview

      2:46
    • 24. 24 Props Children

      12:42
    • 25. 25 Class Based Components and Functional Component

      5:48
    • 26. 26 New App Overview

      8:42
    • 27. 27 Getting Users Physical Location

      7:57
    • 28. 28 Handling Async Operation in React

      3:35
    • 29. 29 Transformation Functional Component to Class Based Component

      4:53
    • 30. 30 State Rules

      4:19
    • 31. 31 Initializing State In Constructor

      13:48
    • 32. 32 Lifecycle Method Overview

      12:25
    • 33. 33 Conditional Rendering

      5:18
    • 34. 34 Get to Know Lifecycle Method

      13:26
    • 35. 35 Refactoring App with Lifecycle Method

      3:08
    • 36. 36 Passing State As Props

      4:27
    • 37. 37 Ternary Expressions in JSX

      5:48
    • 38. 38 Showing Picture

      6:33
    • 39. 39 Styling The App

      10:11
    • 40. 40 Free React Developer Tools

      3:48
    • 41. 41 General App Review

      7:23
    • 42. 42 App Overview

      2:43
    • 43. 43 Component Design

      3:03
    • 44. 44 Handling Forms

      8:31
    • 45. 45 Styling The App

      3:22
    • 46. 46 Creating Event Handlers

      6:15
    • 47. 47 Controlled vs Uncontrolled Elements

      4:33
    • 48. 48 Why Controlled Elements

      7:39
    • 49. 49 Understanding ‘this’ Key Word In JS

      10:18
    • 50. 50 Communicating Child to Parent

      3:02
    • 51. 51 Invoking Callbacks In Children

      4:54
    • 52. 52 Fetching Data

      3:50
    • 53. 53 Axios vs Fetch

      3:49
    • 54. 54 Async Await Function

      10:06
    • 55. 55 Setting The State

      6:08
    • 56. 56 Rendering A List of Components

      5:15
    • 57. 57 Implementing The Key Values In List

      4:35
    • 58. 58 What We Have Learned From The App

      4:04
    • 59. 59 Initializing The Project

      3:13
    • 60. 60 The React Router

      21:09
    • 61. 61 Link and Nav Links

      6:05
    • 62. 62 Programmatic Redirects

      7:20
    • 63. 63 Route Parameters

      15:07
    • 64. 64 React Router Switch Tag

      3:53
    • 65. 65 Why React Portals

      8:49
    • 66. 66 How To Create A Modal

      7:38
    • 67. 67 Creating a React Portals

      6:53
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

150

Students

--

Projects

About This Class

Hello there,

Welcome to React: Learn React JS From Scratch with Hands-On Projects course.

React is one of the best choices for building modern web applications. If you are new to React or maybe you've been struggling to learn and truly understand what’s going on then this course is the best way for you to learn React JS.

In this course, we will take you through everything you need to know to master web development using ReactJS by providing a powerful knowledge through a mixture of diagrams and the creation of a simple application.

No Previous Knowledge is needed!

You don’t need to have previous knowledge about React. This course will take you from a beginner to a more advanced level with hands-on examples.

You will be confident in using React JS, and if you ever get stuck, we will be there to help.

Meet Your Teacher

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. 1 What will we learn?: Hello and welcome. So in the next couple of hours I'm going to tell you everything I know about React. Now before I blow you away with all of my technical expertise, I want to tell you very quickly what you're going to learn and how you can get help inside of this course. So of course in this tutorial, we are going to learn all of the significant aspects about React. Like props, state, lifecycle methods, React router, react portals, and oh, so much more. So as you start to go through the videos and write out our code. 2. 2 Your First App Overview: Alright, so normally in a course like this, I would put together a couple of introduction lectures and tell you about what the React library is and what his purposes. But to be perfectly honest, that type a lecture at the beginning of a course just ends up being a little bit boring for me. And for you. Whenever I take courses, I just fall asleep during the lectures anyway, I want to get to it. So we're going to talk about what the purpose of React is and what the library is quite a bit, but over the range of time, because I think at the start of the course would be a lot more exciting and we put together a tiny React application instead. Isn't as why you are doing a course anyway. Of course it is. And that's what we're gonna do in this video. So we're gonna put together a tiny React application. Now, we might not understand everything or even a lot of the code that we're going to write into this lecture, but that's totally fine. If you stick with me, you're in good hands. Alright? So I just went right out a little bit of code and show you how quickly and how easily we can just put together something with React. So to put together this React application, we're going to use a little online tool. And I've gotten addressed to the tool that we're gonna use right here on the screen. And then we're gonna open up a new browser tab and navigate to that address. Alright, so this is a tool called CodePen. And we can use it to very easily put together little, little React applications. So we're gonna use it now, but in general, we're going to be working on our local code editor. So first we have to open up a new pen. Then at a library. Now in order to do this, I'm just going to go click on the Settings button on the top right-hand. Good. Then I can find the JavaScript button that's here in the middle. Alright, and then you'll notice that we had the ability to add in some external scripts, right? React is an external script. So we have to add it in as a discrete step right now. First I'm going to select fable right here. And then I'm going to search for React. So when I search for React, you're going to notice that too very similarly named libraries appear. So I'm going to add both react and react Dom as libraries. Now in order to do that, we'll first just click on React. And then I can search for react, Dom. And I'm going to click on that one as well. So now I should see two separate libraries inside of here. So look, that's all we have to do. So just click on save and close. And now we can freely write React code inside of this project. Now you'll notice that at the very top of the screen here, we've got these three separate panels, HTML, CSS, and JavaScript. Alright, so now we're going to write a little bit of React code into these three different panels. And then we'll be able to see our app up here. Here. Alright, I'm ready. Are you ready? What are you waiting for? Let's get started. Alright, so I'm going to find that JS panel, and I'm going to add a little bit of code down here. So I'm going to say class APP extends react.com. And then I'll place a set of curly braces like so. Now inside of this class body, I'm going to say state equals a java script object. And this object is going to have one property inside of it named btn color. And it has a value of Button Read. And then I'm going to put a semicolon at the end of the line. And after that, I'm going to add in a method to the class. And the method is going to be called the render method. Inside of here, I'm going to write out the return keyword, and then I'm going to place it looks like HTML. Now, remember, we haven't spoken about syntax just yet. So we're gonna go over all of this syntax in really great detail in next couple of videos. But right now, let's just focus on writing out this code. So I'm going to say return D I, V, and then I'll close the div off. That definitely looks like HTML. Then inside of the div, I'm going to write button with the same class name. This state btn color, which is referencing the button red. And I'm going to add it inside the CSS styles. Then just a few seconds. And then inside of the button, I'm just gonna right click me and I will close it like so. Alright, so now I'm going to add an other method right above render. So this one is going to be called onclick. And I'm going to assign this method by saying equals. And then I'll put in an arrow function like this. Alright, so this arrow function is going to be called with a single argument that we'll refer to as event. And inside the body of this function, I'm going to say this dot set state. And I'll place my parentheses to call that function. And then I'm going to put a curly brace pair inside there, like so. Alright, so now I can then expand that. And inside here, we're going to say b T n. Color, semicolon, and button gray. And one last thing for the JavaScript side of the project. I'm gonna go down to the button right here. And I'm going to add in a little additional HTML. So I'm going to say on click. So make sure that you have the same capital letters that I do. And I'll say that equals curly braces. And then inside there I'm going to put this dot on click. Okay, so hey, we've now finished this class. Now the very last thing I'm gonna do is go down to the very bottom of this JS panel just outside the class. And I'm going to write out react, Dom dot, render. And I'm going to call that function. And as the first argument, I'm going to say app and make it look like some HTML tag. Like so. Then after that, I'll say document dot query selector. And I'll put a string in here and I'll say pound route. Alright, so that's it for the JavaScript side of things. What do you think C, we're just moving right along and you're not even sleep in our yeah. So now I know some of this syntax is probably looking pretty crazy about now for you. But of course I just want to keep carrying on just a little bit more because you're going to see the method to my madness. All right, we're going to learn everything, believing in the next few lectures. But right now, it's just kinda fun, isn't it to explore? So now the next thing I'm going to do is to go to the HTML panel up in here. And I'm gonna put in a div with an ID of root, like so. And I'll close it off. And now the very last thing that we'll do is add CSS right here. So we inside the CSS panel, I'll say Button Read, and I'll give the background color of red and then color white. So the text will be white. Now the same thing goes for the button gray, background color of gray, and then the text will be white again. Now notice we get a red button over here. And when I'm going to click on it, you're going to notice that it turns gray. Okay, well that's it. That's the React app. Now, maybe you can probably tell why didn't want to tell you what we're building right away because it probably wouldn't make a whole lot of sense if I gave you the verbal description about React, I mean, it really, that's why it's called react, right? So what's the goal of this app? Would you say? I'm I'm just kidding. I'm not listening. I'll tell you what the goal is. I just wanted to show you a bit of the React code so that you can visualize the thing that I'm going to show you. All of it's components of the next couple of lectures. Alright? So obviously it doesn't really tell us a whole lot about what React is or what we use it for even or I don't know, it doesn't really tell us about all the crazy syntax either. So why don't we take a quick break. You can either take an AP grab some tea or whatever you need to do. Because we're gonna come back in the next section and we're going to go to town. Alright, so I'm going to start talking about what we just did and then we'll dive into react a little deeper. So quick pause. I'll see you back here in the next lecture. 3. 3 Frequently Asked Questions: So in the last section we put together a little application in CodePen. And when you click on the button, you get this gray button. So now the apple looks pretty simple, but at the same time we had some pretty complicated syntax. So I'm sure at this point you might have a couple of questions about, Well, what we put together. So in this video, I want to start to address a couple of these questions that I think you might have. What is React and what's its purpose? What was that class thing? What was that HTML look and stuff. Now why did we add react and react Dom libraries? How did the colour change when we clicked on the button? So let's start by answering these questions now I, and we will be answering more in the next coming lectures. So first off, what the heck is React and what's its purpose? What do we use this library for? Okay, so react by itself is a single JavaScript library. So the goal of React is to produce some useful content that is going to show up on the screen of your user's browser. Now when we say content, what we're really talking about here is the HTML. So the same type of HTML that you've probably learned right by this point. So divs, spans, buttons, forms, headers, and all those classic HTML elements are going to be produced by the React library. And then they're going to show up on the screen of your user's browser. So once those elements show up on the screen, users going to somehow interact with them, right? They might click on a button. They might type some input into text input, or they might drag and drop some div or something else around on the screen. Okay, cool. So the second goal of reactants to handle those user interactions. So anytime that user manipulates our app in some fashion, we're going to want to respond to that in some way. Alright, so now we'll talk a lot more about what we react is and what its purposes over time, it'll gradually dawn on your sink in or whatever. But now, right now, this definition will, will suffice. Alright? So let's move on to our next question. Yes, you in the back. Just plan. So the next question is, what was at class thing that we put together? Now, if you notice back over here and the JavaScript Editor line one, we had this class APP, extends react.com. Alright, you with me. So that syntax we saw there is a JavaScript class. Javascript classes are just part of what is referred to as ES 2015. And if you're not familiar with JavaScript classes, arrow functions, or class properties, that's totally fine. We're going to talk about all of these pieces of ES 2015 syntax throughout the course. So you're going to be an expert. Now, the class itself was creating something called a React component. So component is one of the most basic pieces of React. And in this course we're going to build a tremendous amount of different components. The ultimate goal of a single component though, is essentially the goal of the React library itself. What do I mean by that? Well, the single component is going to be used to create some amount of HTML that shows up on the screen. We can write and create React components using either JavaScript classes, which is what we just used, or JavaScript functions, pretty much the same functions that you're probably used to putting together. And we'll talk about the difference between JavaScript functions and classes being used for components all the time. So I don't really need to go into much detail now. You'll get it. So for now, let's just move on to the next question. What do you think? The next question was? What was that? Html look and stuff? So back inside of the editor over here, you'll notice that inside of that render method, we had what, sure enough, it looks like a little bit of HTML right here. So in fact, it's not quite HTML, even though it looks very much like HTML. Instead, what we wrote there was something called js X. So J S x is a special dialect of JavaScript. Remember, is a language that essentially allows us to tell a React component how it and what it should look like when it's rendered and shows up on the screen of the browser. So it's at J S X used to determine the content of our React application just like, well, normal HTML does. So in general, if you're familiar with HTML, you're gonna do just fine with Jay Sx. All of the syntax is almost identical. Okay, I say almost, but, you know, we're going to come across some of the details and I'll point them out when we get there. J Sx is you're going to learn a bit more and you're going to find out exactly which ESX is. But for now, again, that's enough. Okay, so what's the next question? Oh, yeah. So why did we have to add two separate libraries? Now, remember when we went through that initial setup, we clicked on the Settings button up here. We then clicked on JavaScript and we added do separate libraries. So one was called React and the other one was called react Dom. Okay, so I caught you up. The React library by itself contains a ton of JavaScript code that defines what a component is and how different components work together. And typical React applications, we're going to end up making multiple different components and somehow getting them to join up together to form an actual usable application. The React library itself is in charge of making that entire process work. Now, on the other hand, the reactant DOM library contains certain amount of JavaScript code that will take that collection of components and eventually get them to show up inside of the DOM or get them to show up as some type of HTML. Okay, so that's why we added two separate libraries. Alright, now what's it? Last question, you remember? Oh, right. So how did the colour change when we click on the button? Well, now remember, the kind of running theme here is that we wanted to make use of React to handle user interaction. So as we just spoke about opponents just a second ago, we spoke about components over here. Now, we said that component is used to present some content on the screen, right? We can also use a component to create something called an event handler. Event handlers are used to somehow detect when a user is interacting with our app by clicking or dragging or typing or whatever it might be. We can then use that event handler to somehow update or our application or were update our component, right? And then show some slightly different content on the screen. So what we want to write a tremendous amount of event handlers throughout this course. So I don't want to bore you with any more explanations. Because this is really one of the main goals of the React library is responding to user interaction. Alright, so that's a couple of questions answered. So, well, there's a whole lot of meat in there. You might want to digest that for a little while. And for my vegetarian friends. Yeah, there's a lot to digest there. So why don't you go over it, pause it right here, and review some of that material. When you come back, we're gonna go to the next section and start learning more about React. 4. 4 Let, Const and Var in 3 minutes: Oh, yeah, you came back. Wonderful. Alright, so let's, let's look at the main differences between var, let and const. So okay, first of all, let's create an outside block, which is going to be a function. And I'm just going to call that OK, Academy for now. Now, inside this block, I'm going to create another block which is going to be a simple if statement. And inside of here, Let's declare a new variable in the old way, and we're going to call it var pi. And it's going to be number 3.14. Okay? And we'll call that function as well. Ok, academy down. And then outside of the if block, let's print this out. So we can see that we've got 3.1 for the variable is being declared inside this block, but it's still being read and printed out from outside of that block here. So if we change this to be let instead of var. And if we try and do the same thing, then we're gonna get a reference error because the variables pi is an actually accessible from the outside of the block. So by the time we're running this line here, the variable doesn't even exist anymore. So what does that mean? Well, it means that if we add another variable up in here, also called pi and then this one to be two. Also, let's print this one out. So if we run this now, we're getting Pi declared up here. Then we're declaring a new version of pi, which is two. Then. So that's being printed out as you can see here. And then it's outside of this block. So we're again printing out what we can see here to be two. So what am I trying to say? I'm trying to say if you use let OR const, then they are block scopes. So they only exist within the closest block that surrounds them. And that's the same with const as well. So let me just demonstrate this here. Ok, works the same way. And the main difference between let and gone st is const, variables are immutable. What does that mean? Means you can't change them no matter what. So if you're using let, you can change and redefine the value within that let variable. But if it's const, then you can't do that. So for example, let's go back to this. And let's say that down here we're going to declare the value of pi to be one. Then if we run it. And as you can see, that's fine. That's being redeployed here. If we change this to be a cons and try to rerun that, you'll see that we get an error because you can't change the value of the const Hall, right? So hopefully that helped to clear things up a bit. Okay, then I'm going to see in the next lecture, I count on it. 5. 5 Install Node JS: Alright, so in the last section we spoke about, Well, a couple of different questions that we might have after we went over that little CodePen project. Now we're going to really start to move forward. So the first big topic that we're going to talk about is j x. So I want to make sure that you have a good understanding of the rules behind it and so that you can determine its behavior and predict his behaviour. So now in order to learn more about js X, we're going to need to be able to write js X in the first place. So earlier and so far we have written a little bit of j as heck over on CodePen and codeine is a terrific tool. However, my goal in this course is overall, is to make sure that you understand how to work on professional React projects. So rather than continuing to use CodePen, and we're going to move over to our local code editor. And we're going to generate professional work on React projects rather than using CodePen. And then when you are a professional, you can go back and use CodePen, but I want you to know how it works. So we need to generate new React projects on the local computer in order to do so. So we're going to go through a couple of different steps. And each of the steps are pretty straightforward. But understanding what's going on is it might be a little challenging. So pay attention. So the first thing that we have to do is make sure that you have Node JS installed on your local machine. After you check that, we're going to install a tool called Create React app, which we're going to use to generate a new react project. And then after that we can start to play around with Jay Sx so a little bit. So now in this video, I do want to focus on just making sure that you have the Node JS installed on your local machine. As a quick note, if you know that you already have NodeJS installed, then just feel free to move on to the next video, but I need you to know. So I'm trusting you. Stick around if you don't. And even if you just want to, I don't know. Review. Alright, you ready? Here we go. So now if you're not sure that you have the NodeJS installed in your local machine. You can open up terminal and run the command node dash v, like so. So when you run that command, you should see a number like this. If you don't see a number. If you see an error message that says command not recognized or command not found, That means that you probably don't add the node installed and you need to go through the installation process. So why don't we do that together right now. In order to install Node JS, we're going to open up a new browser tab and navigate to that link that you see here open on the screen. So now I'm going to open up a new tab and I'm going to navigate to it. And then you'll see a page like this appear. Might not be a surprise. No JS installation process is pretty much straightforward. So you'll select the installer for your particular operating system. And then if you're on Linux, you can get it the Linux version down here as well. So you may have guessed it already. I'm on Mac OS. So I would download the Mac OS installer. It's pretty quick download for me. So once you download that installer, you will see a window like this appear. Now even if you're on Windows, you're going to see a very similar message. So all we have to do here is click, Continue, continue, and so on. And that's pretty much it. Then after you go through the installation process, we can then open up our terminal again and make sure that node was successfully and installed by running it, node dash v. And here you should see a number appear. And again, if you don't see that number appear after going through the installation process, it's totally fine. But in order to get that number to appear, you might have to restart your terminal. Now you don't have to restart your whole computer, right? Just your terminal. So make sure you just close it down and quit every terminal or command line window that you have already opened. And then start back up and try running node dash V again. So assuming that everything got set up properly, we can move on. Because that's where we're going to download this Create React app. 6. 6 Create Your React App: All right, there you are. So in the last section, if you recall, we installed Node.js on your local machine. So now we're going to install a tool called Create React app. And that's going to be used to generate a new project. So lets dark data app right now. So I'm going to change on over to my terminal. And I'm going to run the command npm, install, dash, g, create dash, react, dash app. Just like that as you see on the screen. And we'll go ahead and run it now. So on my machine it's going to install very quickly on yours. It might take a couple of seconds if you're installing is for the very first time. So let's talk a little bit about this command that we just executed. Not to the first word on there was npm stands for Node Package Manager. So the Node Package Manager can be used to install tons of different open source JavaScript packages on your local computer to power projects that you are putting together. So in this case, we reached out to npm to download a package called Create, React app and install it on our local computer. The NPM command has many different subcommands associated with it. So in this case, we wanted to install a package. So we reference the install subcommands. After that, we then put in the dash g flag. This flag indicates that we want to install this package globally on our computer. So we're also going to see what happens when we install things without the dash g flag later on. Right now we're going to use the dash G. And then finally, we list out the name of the package that we wanted to install. So the name was Create React app. This is a very popular package that's used to generate new React projects. So we've installed this thing and we can use it to generate a new project. So I just wanna make sure that I am inside of a workspace directory. Okay? And then I'll run the command to create React app and then the name of the project that I want to generate. So I'm gonna call my project first app, and I'll hit enter. And that's going to start to generate my project. And now before we move on, Quick note, I want you to take notice. So you're going to find in this course that there are many different ways to do. I'd say just about everything. We've already seen that we could write a React app over on CodePen. And clearly we can also write a React app on our local machine. I'm going to highlight some of the different ways that some people choose and go through some different steps. But know that it's going to be your choice. I just want you to be aware. So if you go and you read the Create React app, official documentation, Well, they're going to show you a slightly different process for generating a project then then what I've just shown you. So any official documentation you're going to see that they say you need to run NP x Create React app, and then the name of the project. Well, sure. And you can run this command without having to first go through the npm install. So essentially if you take this route right here, you run one command instead of two. Now, the only reason I didn't show you this alternate fashion, even though it's slightly easier, perhaps. Nps is a command line tool that only started to be installed with versions of npm 5.2 and higher. It is possible that you have a version of NPM earlier than five DO2 on your computer, isn't it possible, yes. So I could show you this way, but it's very likely that you would have run into an error. So I don't want that. Now of course, if you want to, you can always update your version of NPM and node and then you can generate a project this way, but you're on your own pal, okay. There's absolutely no difference in other words, between the method that I just showed you and, you know, using the official one. It's just about running one command instead of two. And if you're creating a lot of apps, that really can be a timesaver. Alright, so if I flip back to my terminal, it looks like my project has finished installing. So, yeah, with so many npm packages. Alright, so I gotta take a break here if you don't. In the next section, I'm going to tell you why we had to install so many packages and will understand why we're using this Create React app tool. And the first place. 7. 7 Why You Will Need To Create a React App : All right, so we're back. How was that? Okay, good. So intellect section. Now unless you have the memory of a goldfish, you might remember that we generated a new project using the Create React app. And then after we generated the projects and says, If you scroll down a little bit and you probably saw that we had installed a lot of packages. So in this video, I want to let you know why we added one cell, so many packages just to run a React application and build one on our local computer. So we're gonna take a close look at a couple of different diagrams quickly. So just use the Create React app to generate a new react project. Now inside this React projects there, there are tons of different dependencies that we are going to use to help us write our application. So in this video, I want to focus on one particular dependency because it's going to help you understand why we had to install so much software. So the name of the dependency that I want to focus on is Babel. Now the term Mabel might well be familiar to you. I'm gonna give you a quick overview on what Bible is in this context and why we use it, and why it's included inside of Riak installation. And the other things such as web back and went back dev server. We're going to talk about the purpose of those dependencies over the course of time. As you've been learning JavaScript, you've probably been learning of version of JavaScript called E S five. And chances are, you've also picked up a couple of features out of something called E S 2015 as well. All I mean to say is that each version of JavaScript has very particular set of features and syntax available to it. There are different versions of this ES for every year after 2015. So again, chances are you've learned a little bit about ES 2015. Now of course, there is also an ES 2016201720182019 and so on and so forth. And every one of these different versions has some new wealth of features and upgrades to the JavaScript language. Now, the important thing to understand here is that these updates to the language are generally for the benefit of developers. So in other words, if we can make use of ES 2016 JavaScript in the next few years as well. Then we're going to have a really good dime because these newer versions of JavaScript has new syntax and new features available that makes your life as a developer a lot easier. However, there's a little bit of an issue with this. You might have guessed. It just so happens that certain browsers are not always 100% To date, at present, just about every single modern browser out there has excellent support for ES five JavaScript. So in other words, if we write ES five JavaScript code and we can send it out to just about any version of browser. And that code's going to be executed just fine. Now, the same is almost true for each 115 as well. I'd say. All the new updates to JavaScript included in IAS 2015 can generally be executed in every modern browser. But as we start to look at years after that, like 2016171819, barely any browsers for these recent years have support for the changes JavaScript that are included. So yeah, you can tell I'm heartbroken, but it's their loss. So we're essentially in a conflict here. And a little bit. On the one hand, we want to use the latest versions because they make our lives easier as developers. But on the other side, well, we can't actually run the code that we're writing because all the browsers don't happen to support it. So in order to overcome this, we make use of a tool called and you wondered where I was going with this fable. Fable. It's a command line tool that can take any version of JavaScript and it will convert it to a newer version. So this right here is a diagram of what might happen if we don't use a tool like Bible. We might write some VS 2015 code inside of some JavaScript file and then send it down to some browser with no guaranteed ES 2015 support. So if we did that, then our code might completely fail to run on that user's browser. And they probably won't see any content when they visit our webpage. I'll probably just see totally blank page or something like that. So with Bible, we write our EMS Dwayne 15 or 2016 or 2017 and so on and so forth code. And then we feed it into this command line tool called Babel and converts it to S five version of JavaScript code that is going to be safely executed on just about any browser in existence. That's the job of Babel. Now, as I said, anytime that we generate a new react project table is included by default. Internally, baby will consist of, guess what, a tremendous number of packages there are all different. Now there's definitely other dependencies inside of this project as well, and we'll talk about them over time. But we do need to understand a little bit more about the Create React app. So let's continue in the next section and we're going to start looking at the contents of the project that we've just generated. 8. 8 Start Creating React App: All right. I hope you have your seat belts on because we're gonna go for a ride. In this section, we're going to open up our code editor and explore our newly created Project. So I'm going to start up my code editor and I'm going to use sublime text. Now you of course, can use absolutely any code editor that you want inside of this course. I'm really not watching, so feel free to use atom or Visual Studio code or Eclipse or whatever it is you want. I don't even have to know. Now, I wouldn't say that any editor is better than another for working on React projects. That's why code exists right? Now, in addition to this course, we're not going to ever depend upon some editor specific features in order to get through. So again, just feel free to use absolutely any editor you want. In fact, you can use multi editors simultaneously. But once I have my editor open, and I'm going to open up my project directory. Alright, so here's my newly created first app folder right here. Now inside this folder, you'll notice that we have a couple of different files and folders. These are all automatically generated for us when we created our project in the beginning. So I wanna take a look at some of the different files and folders that are here and get a better idea of where they all do. So let's go over a couple of things quickly. First off, here you'll notice that the SRC directory, SRC stands for source. Now if you open up that folder inside of your code editor, you'll see that there's already a couple of different files inside a here. Now again, these are all automatically generated by the Create React app. Over time, we're going to add a lot more code to the SRC directory. But in general, we're usually going to delete these automatically generated files inside of here. So basically you can understand how to set up a rack project from absolute 0 or from scratch. So the next directory is the public directory. The public directory right here is going to contain different static files. So what's an example of a static file? Might be an HTML file that never changes or an image, or maybe some music or something else that we might want to serve up from our application. We're going to talk about the public directory throughout the course. We're going to learn a lot more about it, but I just want to show you where it is. And the next is the node modules directory. Node modules contains all of the different dependencies that we have installed into our project. So this consists of all dependencies that you just saw at your terminal a moment ago. Every one of these different folders, insider here, represents a different dependency. Now in general, we're never going to have to manually go into the node modules directory. It kinda just exist here and you don't really have to worry about it too much. Now the next step is the package.json file. The package.json file right here will list out all of the different dependencies that our project requires. And it also has a little bit of project configuration side of it. Over time, we're going to do several updates to the package.json file. And next we have a similarly named file that you package lock db.json. Now, that's the name that I see. You might see a different name in your text editor, but it's a little different name in my text editor, as you can see right here. Yarn dot loc. It's absolutely fine. Don't worry, nothing to see here. Okay. I'll tell you to be honest, because I installed the yarn package manager, which is an alternative to NPM on my computer and that's why we're seeing different file names. Now I'm going to recommend to you to use it on your own project because it is going to be faster than npm. But right now, we don't need to use that package and we're just going to use npm. Ok. Now, this file records the exact version of all dependencies that we installed into our project. If you scroll down, you'll see that there are a tremendous number of records that we've already installed in your project. And then we come to the readme file. So the Read Me file has some directions in it, tells you how to run this Create, React app project. So if you wanted to, you could definitely take a look at it, see what's inside here. But in general, I'm going to tell you everything that you need to know. Now there is one last file inside here. It is the gitignore file. Now that gitignore file is a reference to the Git version control system. Essentially, it lists out all the different files and folders that get should ignore. So let's go on to be tracking our project and maintaining a record of all the different changes that we're making to our code base. So hey, that's all. That's what we get by default when we generate a project with the Create React app. So when we come back in the next section, we're going to finally start writing out some code inside of our SRC directory. And we're going to be getting a better idea of how js X works. All right, see you in the next lecture. 9. 9 Do You Want to Learn How To Stop React App : So in this section we're going to start off our new project and start to play around with a code inside of it. In order to start this project up, I'm going to change into my_first_app folder. And then I'm going to run the command npm start. So before I run this command, I want you to know that it is extremely common to see error messages when you run this command or when you try to visit your application in the browser, just wanted to let you know. And so in this video, if anything goes wrong, please watch the whole video because at the end of the video, I'm going to walk you through to very common problems and how to solve them. All right, so let's run this command. Now. When I run it, you're going to see a little bit of outputs scroll, and then you're going to be automatically kicked over any other browser where new tab is going to open and visit localhost 3 thousand. And you'll see the default React application up here on the screen. And it's probably going to look something like this. Now, I just want to quickly mention here that I do want to tell you something that you probably going to want to know. We now have our React application being run inside of our terminal. So as long as it's running in a terminal, we can then visit localhost 3 thousand, and that's the address of where at. Okay, so that is where our application is available to us. If you ever need to stop the React application running in your terminal, you can open up your terminal, find the tab inside of terminal that's running the React process and press control C. So in fact, let's try that out now so that I can go back over into my terminal. And I'll see where my React application is running. And then I'll hit Control C to stop it. Just like so. So if I ever need to start it up again in the future, I'll just run npm start in my project directory. I can't run npm start from just anywhere. I have to make sure that I'm inside of my project directory. And now see here, I'm still inside my project directory and run npm start. And once again, my apple startup. And I'll get directed to local host 3 thousand. All right, so that looks pretty good. Right now really quickly here I want to mention that there might be two possible errors that you're gonna run into. So first off, you might see a message that says something like port is in use when you try to run npm start. And if you want to see what that looks like, you could open up a second tab inside of your terminal. Make sure that you're still inside of your project directory and run npm start. So we're now essentially trying to start up two copies of our React application. And the second copy is gonna show me a message like this right here. And so it's telling me, hey, there's something already running on port 3 thousand. So if you see this message, you can either stop the other server or you can say, yeah, go ahead and run my React application on an other port. So I'll just put in yes. And then it will start up on port 3,001 instead. So if you already have something running on port 3 thousand on your computer, just be aware that you might have to use a different port. Alright, so now the second problem that you might run into will be that localhost 3 thousand is not working. So you might get a new tab to open up for like so. And it will try to go to a localhost 3 thousand, but it won't. It actually might not show anything on the screen. So that's the case. Then a very easy workaround would be just go back over to your germinal. So find this message right here where it says on your network. And then you can visit that address instead of the localhost 3 thousand. So I'm going to copy that other address right here, and then I can visit it inside of my browser just as easily and I can still see my React application. Alright, so that's how we start up our app. And that's how we started. And that's how we restart it again in the future. So remember these commands right here, because we're going to be starting and stopping different React apps many times throughout this course. As frequently as you blink. So like now, f. Alright, I'm gonna see you in the next video. I'll look forward to it. 10. 10 Important Functional Components: Hey, so in this section we're going to start making a couple of changes to our project. So I'm inside of my code editor and I'm going to open up by as RC directory. Remember our goal right now is to get a better idea of how js X works. So I want to delete all the code inside of this SRC directory. And we're going to create new files which we're going to experiment with and just a little bit. And that way we will get a better idea of how js X works. So I'm going to highlight everything inside of the SRC folder. And just for the SRC folder. And I'm going to delete all of it. Ok, so now the SRC directory is empty, and I'm going to create a new file inside of here called index dot j s. Now, the name of this file is indeed very special. So just make sure that you name your file index.js as well. I'll tell you a little bit later on why is file so special? So dear to my heart? Now, when I create this new file, I can flip back over to my browser where I have my react application running at local host 3 thousand. So if I refresh the page, you'll notice is now completely white. Nothing, it all shows up. So right now, we want to figure out how to use React to get some content to appear on this screen. Once we figured out how to get some content here on the screen using React will then be able to start to play around with JS sex a little bit and get a better idea of all the rules around it. You need to know the rules to break them, or you need to break the rules to learn them. Well, let's move on. So it's a three-step process basically. And we're gonna follow 1-2-3. So to get some content to show up on the screen, this is what you do. Will begin right now with step number one. I want to import the react and react Dom libraries. And in order to do so, I'm going to write out import, React from React, and then import react, Dom from React, dash Dom. Okay. So now I want to talk to you a little bit about exactly what import statements are and why we have to use them at all. But before I do, I want you to take special note and makes sure that you put the capital D O M in your import statement, just like I have it here. Okay. So what's what the import statement ha well, I'd like to take you back a little bit. We are reminded that back on over on the other project that we worked on in CodePen. We didn't have to write an import statement. We just added the react and react Dom to our project, and that was pretty much it. Well now we are using it with the Create React app. And we're using a bundler system called web pack. We're going to talk about what web pack is and why we're using it. But for right now, all we need to understand is that every file that we create inside of our project is essentially its own tiny little universe. Any code that we write inside this file is not going to be automatically shared or made available to other files and vice versa. So in other words, if we want to gain access to any libraries or any other code that we write inside of our project. We have to write an import statement like the one that you see right here. How right? Now, quick diagram. So first we will place the import keyword. And it tells JavaScript that we want to reach out to either a dependency or another file inside of our project. So the import statements like this can be used to import either dependencies or packages that we installed to our projects such as React and react Dom. Now the second word is going to the name of a variable that we want to take all the code from that dependency or file and assigned to. Now, I know I kind of said that awkwardly. But essentially, what's going on here is that we're going to reach out to the React dependency. Yeah. So we're gonna take all the code inside that dependency and then assign it to this react variable. Now one thing to be aware of is that the name of this variable right here does not have to be exactly react. We could very easily rename it to something like My react or anything else really, if we wanted to. But in general, we will follow the naming convention where we name our variable along with the name of the library itself. That way nobody gets confused. So the library name is react. We assign it to a variable called react. If the name of the variable of library is react Dom, we can assign it to a variable called react Dom and so on. Naming convention clarity. Now, so the next step is the from keyword. And we want to pull code from a file or a dependency. And then finally, we will list either the dependency that we want to import from. Or a path to the file that we want to import in case we are importing a file that we've created ourselves. So now if we list out dependency right here, what's going to happen is JavaScript is going to say, OK, I see that you want react. It's then going to look inside then Node modules directory and is going to try to find a folder inside of here called react. So if you scroll down inside of that node modules folder, you're going to see that we have a folder called react right here. So when we say import, React from React. That means go and find the React folder inside the node modules directory and get all the code from inside of there. And then the same thing with the react Dom as well. Now you'll see that the REACTOME folder is right there. So if we wanted to, we could technically import any of the different folders that you see inside of our node modules directory. We could also install more modules into the node modules directory and import those as well. But before we do that, obviously, we're only going to import the dependencies that we actually want to use and really care about for this particular project. Okay? Okay. So next step is we're going to focus on creating a React component. But before we do that, I do want to very quickly let you know about what exactly a React component is. Alright, to the diagram. React component. So it's a function or a class component. Back on CodePen with that quick example we did a while ago, you, you saw an example of a class-based component and we can also create them as a function. The purpose, if a component is at either a function or a class, is to produce HTML that we're going to show to the user. Now it's secondary purpose is a handle feedback from the user. For example, anytime that the user clicks or types are drags or any type of event like that. So in order to produce content or HTML to show the user, we're going to write out some amount of js X. So remember J Sxx, that stuff's gonna look like HTML. Now in order to handle feedback from the user, you remember back when we used CodePen, we use those things called event handlers in order to handle feedback from the user. Of course you do. We're going to talk about this step a little bit later on. But right now our focuses just on showing content to the user and using a small amount of j Sx. So let's now flip back over to our end index.js file. And we're going to create a new functional component. So I'm going to say const AP is equal to a function. And inside of here I'm going to return a div that has the text. Hi there. Like so. Yeah, and that's a, that's a function based component right there. So now this is a component that is using a function with the function keyword. So very frequently you will see this rewritten using an ES 2015 arrow function. It would look like that. Rather than putting the function keyword that we put in the arrow, which is the equals, and then the greater sign on the other side of the parenthesis. And then inside of the functional component, we return a little bit of js X right here. Cool. So now that we've got a function based component put together, we want to take that component and we're going to show it on the screen in our browser. Now to do that, I'm going to add a little bit more code down here at the bottom. So I'm going to say react Dom. Now, let me remind you that DOM is capital D, O m dot render. And then I'm going to open up a function call and I'm going to expand it just like this. So just give myself a little bit more space to type. Now for the first argument, I'm going to take that app component that we just created, and I'm going to put it into js X tags. Essentially it looks like HTML tags. And I'll put an app like so, and then put a comma. And the second argument is going to be a reference to a DOM element that already exists inside of our HTML file. Now, we might just pause right there and say what HTML file? Well, we haven't really spoken about it as yet, but you will notice that inside that public directory, we have an index.html file. Anytime that someone goes to local host 3 thousand, they get sent this HTML file right here. So inside this HTML file, you can scroll down to the body. And inside the body, you'll see that there is a div with an ID of root. So by convention, in a Create React generated application, we're gonna take our component and render it or display it inside of this div with the id of root right here. So we need to essentially get a reference to this div with the ID root. And then we're going to pass it as the second argument to the react Dom dot render call back over here inside of our index.js file. Follow. So to do that, I'm going to write out document dot jquery selector. And I'll pass a string with pound route like Sol. Ah, so that call right there is going to get a reference to that div with an ID of root, right? So this is a built-in native function that is available in all browsers. So we don't have to import anything or do anything like that in order to use it. Okay, so that's pretty much it. That's the three steps that we have to go through to get some content to appear in our browser. So let's go ahead and save this file. Alright, so now that I've saved this file, I should be able to flip back over to my browser at local host 3 thousand. And I'll see the content being produced from our function base component appear on the screen. I'm not nervous. I'm just short of breath. Okay. It's simply says hi there. Lists. Am I right? Okay, so that's pretty much it. That's how we get some content to appear on the screen. We import, React, and react Dom, we've create a React component, and then we take that component and showed on the screen using the react Dom library. Boom. Oh, okay. So why don't we take a, take a break right now. And in the next section, we're going to learn a lot more about Jay ESX and how we interact with it. 11. 11 Converting HTML JSX: So in the last section, we finally got some content to appear on the screen of our browser. But that's just not good enough, is it? No way? So stay tuned because now that we've got a working application put together, we're going to start to focus on the js X that we had written into our app component in the index.js file. First, I just want to explain what exactly js X is. You've had a little bit of an introduction. But I want you to know that when you look at this stuff, as I've said many times, it looks like HTML, but in reality it's not. So I want to give you a quick reminder about something that we spoke about just a little bit ago. So remember that I told you that when we write E S 2015 code, which you don't like to do as developers. We do not send it directly into a user's browser because their browser might not have E S 2015 or 2016 or 2017 fully supported. So in order to get around that, we made use of the dependency called Bible. Now, we made use of by able to take that E S 20152016 or whatever code and converted down a normal E S five JavaScript. Alright, we got that out of the way. Now, before js X actually get sent down to a user's browser, it gets converted into normal looking JavaScript code. And you might be immediately curious as to how do we take something that looks like this right here and turn it into an equivalent normal JavaScript. Well, my friends be curious to know more because that's why we use this little brilliant tool called fable. I'm going to open up a new browser tab, and I'm going to navigate to the Bible homepage, which is at Bible js dot IO right on here. And we're going to find the try it out button right here at the very top. So now on this interface, we can write the certain amount of code here on the left-hand side. Now, this can be as 20152016 code that contains js X as well. And then it will automatically convert that code into normal ES five JavaScript and show it on the right-hand side. So really quickly, I want you to have a look at the left-hand panel over here and find the preset section. And just make sure that the react checkbox is checked. All right, so then once we're sure that it's checked, I'm gonna go back over to my index.js file. And I'm going to copy the entire app component. And we just put together, and I'm gonna paste it back over here on the left-hand side. All right, so as you can see, that div right there and that kind of J as hex looking thing actually gets turned into a JavaScript function call. Excellent. It's a call to react dot create element. So the first argument is a string that indicates that type of element that we want to create. And then the third element is the text that we want to show inside of that div. So every time that you see the js X we're writing gets turned into this big function call right here. So you might be curious, if this js X gets turned into a function call. Why don't we just write it out? Write out a lot of function calls. Well, I think the answer is really simple. Let's picture, if you will, that we have a little bit more but complicated component then what you might see right here. So let's say for example, maybe we have a div that contains a UL element inside of it. And then the UL elements contain a couple of l. So I'm going to put a couple of LI and maybe there was an l. I have texts of their own like high. Now, when we take a look at this thing and it's js X form, it's pretty easy to tell what's going on if we're familiar with how HTML works. Now, you can take a glance at this over here and understand that this app component is going to create a div that has a UL, n three l i. Now also, you can very quickly see what text those LI's are going to contain. However, if you look at the converted results over here on the right-hand side, it's a lot harder to understand the exact structure and content of what this component is. So the entire purpose of js X is to just be able to allow us to write out these different function calls. It normally occur behind the scenes for us in a much easier to understand, much easier to read, and that we will get a better sense of what's going on. Now, when you make use of React, It's not required to use js X, but it's not just me. I'd say that most everybody highly recommend it. Because if you try to write out all these different function calls, you're going to very quickly write out some code that's very challenging and difficult to maintain. Okay, I'm glad I got that off my chest. Thanks for listening. So let's take a pause here and I want to see you in that next section. 12. 12 Inline Styling with JSX in React JS: All right, so here we go again. Now in the last section, we started learning a little bit more about js X. We learned that it's technically JavaScript, it's not HTML that we're writing. And we also learned that browsers don't know how to understand that J is hex code. So we use tools like being able to take our js X, and then that converts it into normal JavaScript. So in this section, I want to go through a nifty little exercise. It's going to give us a better idea of how HTML and JS Acts are slightly different. So we're gonna put together a tiny little snippet of HTML using CodePen. And we are going to write out normal HTML. And then we're going to pull it into our React project and convert it into js X. So what this is gonna do is give us a really clear idea of some of the differences between the two. Are you ready for this? Right, so first, I'm going to open up CodePen by opening a new browser tab and going to the CodePen.io. Alright? If you're there, once were here, going to find that create section at the top left-hand side and create a new pen. So we're only going to be doing HTML here. So I'm going to minimize the other tabs and well put together just a couple of different element. So I'm going to put a div in here. So inside of this div, I'm going to first begin with a label. And I'll give it a title of, I don't know, enter email. How's that? Now after that, I'll put in an input and then finally a button. Alright, so for the button, I'll say submit. Now. Okay. So just very simple, straightforward HTML you might say. But now I'm gonna go through here and add on a couple of attributes. So on the label, I'm going to say that this is a label for input with an ID of name. And then I'll immediately add an ID of the name to the input. And then let's give a class name to the label. Now, we're not going to actually do any styling right now, but I just want to show you how the CSS class is changing when we use js X. So then on the input, I'm going to say type text. And then finally, I'm going to put a little bit of a custom styling on the button. So I'll say style is going to be background color of red. Alright, so now that turned the button red. And let's give the texture color of white as well. Alright, so that's it. Pretty simple HTML snippet that everything that we put in here is pretty easy to understand. So now let's copy this HTML and we're gonna go back over to our friend, the code editor. And we're gonna paste it into our app component. And then will see how this HTML displays inside of our React application. Okay, so back over here, I'm going to find the div that we currently have, and I'm going to delete it. And I still have the return keyword. However, don't forget that return keyword. And I'm going to paste in the HTML that we just wrote out and save it. And I'm going to see how this appears in the browser. Alright, so you can see that we immediately get an error message here. Ah, okay, what happened? The question of the day is, why did we see an error message when we just took some HTML and try to use it inside of our React component. So what we're gonna do is start to learn some of the differences between J Sx and just regular old HTML while we are responding to the reason that this error message occurred. So you're starting to see the method of my madness. Now, I got a quick little list right here. And general, all of the existing knowledge that you have around HTML is going to apply directly over to Jay ESX. But there are some differences, okay, they might be subtle at first, but you're gonna realize how big they really are. Now the first difference that I want you to be aware of is how we add custom styling to an individual element as we are attempting to on the button element right here. So that's the first thing that's different between js X and HTML. Now let's take a look at another diagram. And that's going to help you understand how we can take the HTML version and then convert it over to Jay Sx, o k. So in this example we've got a div with an inline style of background color red. In order to apply that to J ESX elements, we're going to change the syntax just a little bit. So we're still going to say style equals. But after that, we're going to place two curly braces in a row. The outer curly brace right there indicates that we want to reference a JavaScript variable inside of our js X. And the second curly brace right there is meant to a java script object. So in other words, when we do styling with Jay Sx, rather than provide a simple string like so, we're going to instead provide a JavaScript object where all the keys of the object reference a different property that we want to style and the values indicate a value for that particular styling. Yeah. Now the other thing that you need to be aware of. Is that if we're trying to apply a style property name like background, color, we're going to remove that dash and then capitalize the next letter. Then we need to make sure that our values are wrapped with a single quote out. Okay, so let's do it. First, remove the double-quotes and replace it with curly braces. And then remove that dash and makes sure that's a capital C already. Then all we need to do now is make sure that these values are wrapped in a string. So I can wrap it with a single quote, like so. Then we just remove the semi-colons and don't forget to add a comma right here. Now, you may have noticed that for these values right here of red and white, I use single quotes. Whereas for all the js X I used double quotes instead. So this is a little bit of a community convention. First off, when we use js X, we're supposed to use double-quotes anytime that we want to indicate a string. So in all these locations here, like label, name, text, we're supposed to use double-quotes. But then for any non js X property by convention, in the JavaScript community, we make use of single quotes. But there are tons of people that prefer to use double-quotes everywhere. Instead. For you. You can do it either way. It's totally up to you. Fun little fact. So in general, the conversion here is pretty straightforward. Just remove the double-quotes, replace them with curly braces. And then if you ever have the kind of compound property name, removed the dash and make sure you do a capitalisation. So then after you make a change, you can just save this file and then flip back over to your React application. And you will see on Baba bomb that the error message goes away. Alright, that's it. Next we're gonna talk about adding a CSS class to an element. So whenever we want to assign a class two js X, we're going to use a slightly different syntax from HTML. So let's go back over to the inside of our index.js file. And our label has a class of label right here. Now technically we're not supposed to use the keyword class inside of a js X element. Instead, we use class names like so. Okay. Now of course you may be wondering, why do we have to do that or not. I'm going to show you anyway because I want you to remember that when we were working with CodePen just a little while ago, we had created and ES 2015 class. And I'm going to show you a quick example of that right here. And we had written something like class APP extends react.com. So the keyword in there was class, that was a Javascript keyword. Now the reason that we have to use the class name instead of class in J Sx is essentially just to avoid collisions with this keyword class. That's it. Now you go to the head of the class. So in other words, we just don't want JavaScript to get all confused and think that we're trying to define a new JavaScript class with this, right? It's all for clarity, right? So that's all. It's going to be. Time to move on to the next section. And we're going to talk more about js X. 13. 13 JavaScript Variable in JSX: So here we are. We're in the next section. And this section, we're going to just talk about one last difference between js X n HTML. So this last little thing is what I consider a very well, perhaps the most important feature. So last but not least as they say. So this is what we need to understand about js X, because we're gonna be working with this feature quite a bit throughout this course. So js X can very easily referenced JavaScript variables. You know that essentially that means that we can take a JavaScript variable and easily printed up inside of our js X block. So let's flip back over to our code editor and get a quick example of what this would look like. So inside of the app component, I'm going to create a new variable. And I'm going to create, let's say, const, button text. And I'll give it the text of click me. And just like that. So now if we want, we could refer to this text variable inside of our button. In place of just putting the plain text of Submit. To do that, I would just delete that text, submit n. I'll put in a set of curly braces just like this. Now the curly braces are not indicating a JavaScript object. So instead the curly braces are indicating that I want to reference a JavaScript variable right here. So then type out the name of the variable that I want to insert into this button. And then save this file. Flip back over to the application at localhost 3 thousand. And I'll see that. Now the button says, Click Me. So with this curly brace, we can very easily reference different JavaScript variables inside of our js X. So we're not only limited to making very simple statements like this. Obviously, when we define a single variable at a time and then reference it inside, we may define something like function, get button text. And then anytime someone calls this function, maybe I will return Hi there. Then inside of my button tag right here. Rather than referring to text, I can delete that and call the function that we just created. So I'll say Get button text like so. Now make sure you get the parentheses on here so that you can actually invoked the function x on. So the other thing that I wanna do is clean up that variable that we're no longer using. Celt. Let's save this and see how it goes. And hits the button. And it says, hi there. So now there's only a couple of limitations around what type of variable we can reference inside of these js X blocks using these curly braces. Give you a couple of quick examples. So I want to tell you a little bit more about what different types of variables we can reference inside of J OSX. Specifically, when we're trying to put something in here, there's going to display on our screen as text or some other value. So first let me begin by deleting that function that we just put together. And then I'm going to go inside of the app component. So I'll say constant button text is Hello World, like so. And then inside of our curly braces right here, I'll again replace it with button text. Okay, so now we don't have a function and we do not need a set of parentheses. So it's just button text like so. Alright, so very quickly let's just save this file. And I just want to make sure that everything is still working. Okay, yeah, that looks good. If we want to, we can reference other types of variables rather than a string here. For example, I could instead replace this with a number 12345. Flip back over and we can see that the numbers printed up here. And I could also replace this with an array of strings or numbers. I could do something like hello world to strings inside of an array. So then if I save that and flip back over, you can see the two strings got pushed together. Editor essentially concatenated inside that button. And now if I want to, I could also replace it with a set of numbers like 512. Again, say this again, and I'll see 512. We clearly have a pretty good amount of flexibility here. Yeah. But there is one particular example of something that I do want to show you now that you know this. Because I can almost guarantee that you're going to run into this bug at some point in time. So I'm going to replace the button text right here with a JavaScript object instead. As is just a plain object. And we're going to give it a property of text. And I'll say submit. And I'm now going to save the file again. When I flip back over, we're going to see an error message. So now I want you to really have a look at this error message and have it imprinted in your memory. Because I guarantee you're going to see this at some point in your React career. So the message says, objects are not valid as a react Child, which means that we're trying to show an object like a JavaScript object inside of a React component as text. And React does not know how to deal with that. Okay, so obviously we are not allowed to take a JavaScript object and reference it inside of J OSX, specifically where we would normally show text. We could very easily fix this by. Putting on a button text dot text. So now that's going to refer to the text property of this object. And we can save this and we'll see that it's working. Now. The reason that I put a lot of emphasis on that last part, saying that We can't show an object as text is because technically we can't show a JavaScript object as an attribute on an element like this right here. Now, good. So now that we understand the purpose of this curly braces syntax, we can get a good look at the style property and get a better idea of what's going on. So what we're doing here is we want to reference a JavaScript variable for this style property. And the value that we're going to pass to it is this JavaScript object. So if we wanted to, we could technically cut that thing out, create a new variable up in here called style, and assign the style object to it and then reference that style down here, like so. And it would have the exact same effect. So clearly we can use JavaScript objects as long as we're not trying to print them up as text or something like that inside of our application. Alright, so you got me as pretty much hit. So I'm going to undo this last little change and just leave it like that. Okay, so now if you look at this diagram over here, I just showed the three important things for you to understand about the differences between HTML and JS x. Actually, it's kind of challenging for anyone to sit down and list out all of the exact differences between js X and HTML. So I want to teach you something. One teach a little trick about how you can figure out some of those differences between these two on your own without having to consult a chart or anything else. It's great detective work, I'll show you. So when I flip back over to our React application inside the browser, it looks like everything's running just fine. And we can see our content appear on the screen. However, what are we going to see when we open up the browser console? You can do it by right-clicking anywhere and then clicking on Inspect. So you'll see a window like this appear either on the bottom of the screen or the right-hand side. And at the top of this panel, find the console button. When you click on that, you're going to see a big red warning, like the one that I see right here. Do you see it? So this is a warning coming from the React library and it says invalid DOM property for well, didn't you mean HTML for? Like I said, at the end of the day, there's a whole bunch of other little differences between JS Acts and HTML. Many of these differences are not going to crash your application. Sometimes it's going to be a little bit of a challenge for you to detect when you've done something slightly wrong. So in order to detect when you've made a typo or referred to an invalid property. You should traditionally just leave your console open or at least reference at every now and again. And then react is going to look at every single different property that you're trying to pass to elements inside of your js X blocks. And then that way if it ever sees it, you're trying to pass and invalid property. It's gonna show you a warning message, like the one that you see right here. So this warning message is essentially telling us that our label right here has an attribute name of four. And react doesn't want to deal with that. It actually once is to replace it with the HTML for the capital F, like so. So why is that? Well, it's a very similar reason to the class name. The one that we used earlier. For some different browsers or some different tooling. It's going to incorrectly see this for the word right here is incorrectly interpreted as a traditional JavaScript for loop, like so. So as I said earlier, it's not really an issue. As you just saw a moment ago, our application works in the browser just fine without error. But nonetheless, the requirement is still encoded in the React library. So we have to replace it with HTML4. Now, if I do that and save this, flip back over and I'll see that the warning message just one-way. Alright, so anytime that you see a warning message from react like that, something it says, Did you mean to do this? Well, usually it's going to mean that you accidentally put together an invalid property name somewhere inside of your j as x. So I want to take, take a break here and we'll continue in the next video. I promise you, it's going to be terrific. 14. 14 Three Tenets of Components: I'll write my friends here we are. And I think that now that you understand the basics of js X pretty well, I want to expand your knowledge. So in this video we're going to start to move onto our next topic. So let's talk about what we're going to be learning in this video and pretty much in the next couple or three. Alright? So three big important concepts for us to understand. Component nesting, reusability, and configuration. These are all tenants of the React applications. So let's talk about each one of these in turn and we'll go through a couple of quick code examples. So first off, component nesting. So far all the code that we have written, we've only been creating one component at a time. But for real React application, we usually make many different components. So when we make many different components, we're going to nest them or essentially place them inside of each other to make an actual usable React application. So we're just going to very quickly start to look at a couple of examples of how we nest different components inside of each other. And the next thing we're going to start to talk about is component reusability. I want you to think about a typical web application that you might use every day. Chances are you use a web application that has some buttons or text fields are menus inside of it. And I've got a quick question for you now, and this is not a quiz, but just think about it. Do any of those buttons ever really look different from each other? Chances are they don't. Just about every button inside of a single React application is, is going to have some similarities or identical functionality. It's going to show some text and then do something when the user clicks on it. So rather than making a separate component or essentially write out some different codes for every single button or every single menu or every single text input that you might put into an application. We instead can make use of reusable components or little pieces of code that can be reused several different times inside of a single application. And then we'll take a look at a couple of examples on how we might achieve reusability. And finally, very tightly coupled with usability component configuration. So I just gave you the example of a button right? Now, most buttons will look very similar, but there's tiny little pieces about every single button that need to be customized in some very specific way. For example, one button might need to have the background color red, and another button might need to have the background color blue. And both of those buttons might need to do different things. So we need to make sure that when we create different components, we have the ability to somehow customize them when they are created. Okay, so these are the three big topics that we're going to start in each, were there specific video? So take a pause right here if you need to. And in the next section we're gonna talk more about these three things. 15. 15 Simple App with React: All right, so if it wasn't that long ago, in the last section, we talked a little bit about components. And now we're going to actually write some code to understand what's going on. So in this section, we're going to start to talk about a little application we're going to put together to get a better idea of what all these different terms mean. So I want to quickly show you the mockup. And now we're going to generate a new project to build this thing. Okay, so here's our mockup. And it's really rather simple and straightforward. We're going to essentially a couple of React components that are going to generate what looks like a list of comments. So we're going to display an image and user's name and bold and time at which the comment was posted. And then finally, the actual comment text underneath of it. Now until you look at this lot closer, you probably, you'll just notice that almost every little one of these comments look very similar to each other. Maybe the only difference between them is that they tend to have a little bit of different tags, maybe different usernames, different times, different content for each comment as well. But the styling looks almost identical. So now rather than just building a bunch of different components to build this thing out, we will just try to make one single component. And in that single component, we're going to put all of the js X that is going to make this a list of comments that looks like this. And after we see some of the negatives around that approach, I want to start to refactor into separate components. Okay? So we'll generate a new project to begin with. And we'll start writing some code for this in the next video. So right now let's start making up a new project. And I'm going to want to flip back to my terminal where we still have our first app project running. Do. Excellent. Now I'm going to shut that thing down by just hitting Control C. And then I'm gonna go up one directory. And now I'm back in my workspace directory. And then I can go to generate a new React application. So I'm going to run Create React app and let's give it a name, call it blog posts, like so. Okay. So it's installing dependencies. Some discount, let that finish and we'll start back with the next video. 16. 16 Styling App with Semantic UI: All right, so once all those installations are finished, in that last section that we started, we generated a new project and I'm going to change into that new project directory. So then I want to start up the reacts server with npm start. Alright, so now we've got a fresh React application up and running. So now I'm gonna wanna make sure that they open up my code editor in that new project directory. So I'm going to find that blog post folder we just put together. And I'm going to open that thing up like so. And then finally inside my SRC directory, I'm going to find all the automatically generated files inside of here, and I'm going to delete them. All right, so remember the first take that we're going to do on this project, we're going to put together a single component. And then we're going to write out all of the js X that we need to make these three different comments, all in one file, in one file and inside of my SRC directory. And we're going to create a new file called index dot git dot js. And then at the top of this file we will put in a little bit, a little bit of, a little bit of familiar code. So I'll say import, React from React. And I will do the end, I will do the implant and we'll do the import, react Dom from React dash Dom. Then I can make a new app component. And inside there I'll return a simple, a simple div. Simple div that says hello world. And now, and now I can go to the bottom of the file and I'll do react Dom dot render. And i will render an instance of my app component. So now I want to render it. I want to render it, render it into document.write query selector. And I'm going to find that you're going to find that deadline, that div with an ID of root. I'll Rhi, Rhi, Rhi. So now I'm going to save this file and then we should be able to flip back over to our browser and see that tr and see that text Helen, see that text Hello World appear on the screen. Okay, so it looks just Band-Aid. So now we're going to need to start replacing this div that we have here with the list of comments, just of comments and comments instead. Now, to be holy honest with you, this is not a course about basic stats, about basic styling, basic styling and CSS. So. Please just remember, I'm doing it simple. Simple. We're going to talk about how to integrate CSS in different forms into a react project. But we're not going to spend it too. We're not going to spend a Trump going to spend a tremendous amount of time writing out CSS from scratch. So what does that mean? So what does that mean? What does that mean? When I look at this list of blog comments right here, there's going to be a fair amount of CSS styling that we're going to, we're going to have, we're going to have to do so. Rather than writing out all of these CSS from a scratch, scratch, scratch, we're just going to use a very handy CSS library to essentially take care of all that IRR, of all that styling, of all that styling for us. So let's talk about the styling that we're going to use. First were first we're going to have first we're going to navigate Semantic UI.com. Okay? And I'm going to open up a new browser tab and navigate to semantic dash.com. Semantic UI is an open source styling or CSS framework. And you can, and you can click on this menu button on the top left side and then scroll through all of these different elements that are provided here, are provided here for you, provided here for you. You can click on any of them and take a look at some of the default styling that you can get. That you can get, that you can get if you make use of this semantic UI library. So that's just a CSS file. Is CSS file that CSS file that's going to give us a little bit of default styling. Now if we make use of semantic, semantic use Semantic UI, we can essentially get all of the styling that we need for free without having to waste a lot of time on at a time on. I'm on. Now if you want to exercise your design skills, that's something different. So with, so with Adam. So with that in mind, let's just install Semantic UI. Okay, so now we could, okay, so now we could install, we could install the semantic UI following the Getting Started documentation here. And it tells us how to put all of this stuff that we put all of this stuff together, follow this stuff together from scratch using build tools. But there's definitely a much easier way to install this. So for that, my friends were going to navigate to Semantic UI C, d, n. So if you open up a new browser tab, you can search for semantic UI CDN. And then the, and then the first, and then the first link that you'll see right here will probably be something like CDN js.com. Alright? Alright, you see it. All right, you see it. So if you follow and you click on that, it will just take us to a page. It will take us to a page that lists, to a page that lists all of the different versions of that semantic UI library. So you see, that's not C, So that's nice, India, that's nice and easy to use. That way we don't have to do any additional build stamps or anything like that. Now you'll, now you'll also notice here that there's many different versions of this library. So we're going to look for some theta. We're going to look for something called a trigger, something called semantic dot, min, dot, CSS. And you can probably just, And you can probably just scroll and even probably just scroll down and look for it on the list. Now if you can't find it in the list, you can always hit Command F, Command F do a quick and F do a quick search. There it is, semantic dot main.css, just like that. So now we're gonna copy that link right here. Now, this is a link to a publicly host, to a publicly hosted, vertically hosted version of the Semantic UI at CSS file. So we can very easily use that inside of our PRF, that inside of our project, inside of our project. So I'm just going to quickly copy it over here for the main.css and dot css font, CSS file. And then I'll just paste it inside of the HTML file that is currently used for our project, which is Project, which is insect, which is inside of that public directory. So when side of public, public, public, I'll find index.html. And then we're going to add this CSS file into our, into our heads, into our head tag as it would just any other CSS file. So after that, after the metadata, so after the meta tag right here, I'll put a link rel equals stylesheet. I'll sheet, sheet, and then H ref equals. And then I'll paste in the link that I just copied from, I just copied from that, copied from that CDN page. And make sure that on the right-hand side, I'll close it. I'll close off. I'll close off that tag like so. Alright, so now I'm just going to save this file. And then if I go back over to my browser and find localhost 3 thousand, we should see, we should see that. We should see that the page has automatically refreshed and you'll know that semantic UI has been loaded up properly, loaded up properly, properly. And looked at that, the text font right here has changed slightly. So that way, I know that, I know that some I know that semantic is installed correctly. Now another way of course that you can make sure that it got installed. It got installed. Installed, would beat a right-click anywhere on the page. Open up your Chrome Inspect menu, and then go, and then go to the Network tab. You can click on this CSS option right here and right here. Here. And refresh the page. And you'll see that semantic men dot CSS got Los, have got loaded up, got loaded up successfully. All right, so now we've got this style in library for February for really for free state. State tuned. Stay tuned for the next video. 17. 17 Building Component: So now that we've got our CSS library linked up, we're going to start to write a little bit of J sx into our app component inside the index.js file. And we're just going to write out a little bit of js X inside here. And probably we're going to copy paste two times to get that list of three different comments that we eventually want to wind up with. So okay, let's start. So first, let's begin by removing that text here. Alright, so now inside a here, beginning with the div that has a class name of UI comment. And then next we can do a div with a class name of comment. Alright, so this div is going to represent one single comment by itself. And then inside there I'm going to put a anchor tag with an H ref of forward slash. So this is a link that takes us nowhere because we don't have any navigation going on just yet. But hold on. After that, I'll just give it a class name of an avatar. And now inside of that anchor tag, I'm going to place an image. And what I'll do is I'll give it an alt text just in case our image does not load up properly. And I'll say profile picture. Now, of course we don't have any images to load up just yet, but stay tuned. So right now I'm not going to put on any SRC properties. I'll just close off the image tag and we'll put an image in there in a minute or so. Anyway. Alright, so moving on. Under the anchor tag, I'm going to put a div with a class name of content. And I'm going to do another anchor tag with the H ref of forward slash and a class name of author. And then I'll give it a name, let's say Sarah. Alright, so this is going to be the author's name. So after that's complete, under the anchor tag, I'll put a div. And I want to do a class name of meta data. And I'll close it off. Now inside of it, I will put a span with the class name of date and close it. And then inside of there, I'll put the time. So I'll say that this comment was posted today at five PM, will say. So. Then lastly, I will do the div with the class name of text. And this is going to be a comment part. So I'll say, it's amazing. And then I'm going to save this and go back over to my browser and let's check it. Alright, well that's it. So if you see any error messages appear right here, that means you probably made a typo somewhere as we were putting together the js X. So just do a quick double check with mine. And I'm sure that you'll find the error sum somewhere is just going to be a typo. So we've got our first comment put together, but we have an image to put inside of our js X. So take a break for now and then you can move on to the next section. 18. 18 Specifying The Image in React JS: What? Yep, you're back so soon. Fantastic. So if you remember in the last section, we put together our first little comment, but we still don't have a profile image, anya. So what do we do? Let's insert some images into I react project. First you should choose some images that are already available inside your computer. Or you might want to search and download them from the internet. But whatever. As you can see, I have installed three images inside of my computer. I'm just going to use those. You can use whatever you want. So that means we are going to open up our project folder, which is right here, and we named it blog post. Now you may have installed your project folder somewhere else on your computer. And you just have to find it on your computer and I'm not going to wait for you. So inside of here, this is where we're going to open up this SRC folder. So right now we're going to create our image folder and open it up. Then we're going to copy our images into that that we want to use inside of our project. And we can just paste it in. So now we can flip back over to our code editor. And if you see right here we have our images enzyme, the image folder just as we installed it. So now that that's setup, we have to link up these images with our image tag. Now remember, anytime that we want to use some code from another file or another open source project or dependency, we have to add an import statement. So I'm going to say import and then the name of the picture, profile one. And that's what I want to use inside of my image tag. Actually, you can really call it whatever you want as long as you're going to reference the same name inside of your image sewers. Then I'm just going to import it from the file that we put our images into n. We're going to go to the current directory, which is now SRC directory, with the point forward slash. And inside of the SRC directory. We're going to go to the image folder and get the pick one and inside of it. So I'm going to add that on as a source in image tag. So in other words, we're not going to put in a set of double-quotes like so instead, we're going to use that js X interpolation, where we're going to refer to some JavaScript variable. Then inside of here, we're going to reference the image that we imported right here. So now I'm just going to flip back over to my application in the browser. And I'll see the Automatic Refresh. And there's the image right there appearing in front of your very eyes. So that looks good to me. We're going to pause right here and move onto the next section. If it didn't go to smoothly for you, you can go back and review everything. Until then I'll see you in the next one. 19. 19 Duplicating The Single Component: All right, so in that last section, we got our image in place. Now we're gonna take the comment that we generated right here and copy and paste it down two times to put two more comments m. Now as you might imagine, this is going to turn our app component into a little bit of a mess of J S, x. And it's going to look a little bit challenging to understand at first glance. But after this process, you're going to quickly understand why we like to make reusable components. Now, to duplicate this comment, I'm just going to find the div with the class name component right here. And I'm going to highlight everything down to the closing div tag for that comment. Now I'm just gonna copy this thing and place it underneath two times. Alright, so now I can just save it and flip back over to the browser and we're going to see that we have three comments. And of course if we want to, we could go through and change the name and the time and the actual blog content on there as well. But we're going to have to do this in just a moment anyway. So what if I told you to go and find the second comment and edit the title. Well, you're going to have to scroll through this thing and try to understand what you're looking at by just duplicating all that J Sx inside of a single component, we end up with a little bit of a mess. And it tends to be rather challenging for us to make any updates to the App component. So let's take another break right here. And when we come back in the next section, we're gonna talk about how we're going to refactor this thing. So it's clear, understandable, and great for you to code. 20. 20 Component Nesting: All right, so as we mentioned, this app component looks a little messy. So in this video, we're going to do every single step to create a reusable component. Alright, so here are the steps to make a reusable component. The first thing we're gonna do is identify the js X that already exist inside of our app that is already to be duplicated. So now if we go back over into our code editor over here, we know that this div with a class name of comment, all the way down to the closing part of that tag right here is the duplicated part that we copied two times. Alright, so next thing we're gonna do is provide a name for the component that we're going to generate. So we're going to eventually take that duplicated J Sx and put it into a new component. And now one of the most important things in this process is giving that component a meaningful name. So in this case, I would say that the purpose of this J ESX right here is to display a single comment. Alright? So now I'm just going to give this thing a name of single common. And next I will create a new file to house the component that we're going to create. This file is going to have the same name as the component. So that means we're going to now make a new file called single comment inside of our SRC folder. All right, you with me. So I'm gonna flip back over to my code editor inside the SRC folder. And I'm going to make a new file called single comment ab.js, like so. Now I want you to take a closer look at the name that I put it in right here. You see what I'm seeing? Usually React components are written in uppercase or camel case. So that is a single comment for the name of this file in CamelCase form. So now we're going to create a new component inside that file, and we're going to move that duplicated js X over into this new component. That's deal right now. So inside of this file, I have to first import the React library at the very top. And after that, I'm going to make a new functional component for that single comment component. And I'm going to say const single comment. And that's going to be an arrow function. And then inside of here I'll put a return statement like so. Now I'm gonna go back over to where we have. Duplicate a js X. So everything from this div class name of comment all the way down to the closing div. And I'm going to cut that and paste it inside of this single comment component. Then as you can see right here, we have an image tag whose source is referencing the image that we loaded up inside of our app. So for this reason, we have to import that file inside of our new component, just like we did in the previous section. So I'm going to say import profile one from dot slash image and pick. Okay, so we just extracted a little bit of js X out of two separate components and created a new component. But we ain't done just yet. Now, the next thing that we want to do is get this component right here to show up inside of our app. So we want to render the single comment component inside of our app. So first off, we'll need to make sure that the single comment component is available inside of the index.js file. Right now. They're not connected in any way at all. So how do we do this? In order to get this single comment component to show up inside of our app component, we have to do two things. First off, we're going to place an export statement inside of the single comment component. And then that way the export statement that we're going to place inside of the single comment component is going to make our component available to every other file inside of our project. Yeah. So then secondly, to get access to that component, we're going to add an import statement to the index.js file. And that's what's going to be the link between these two files. And it'll make sure that the required single comment is available inside the index dot js file. So once we get that component inside of our index.js file, we can then render it inside of our app. What do you think? I mean, that's quite a technique. In fact, that technique is called component nesting. Okay, so go ahead and do it. No, I'm just kidding. We're gonna do it together. So first, I'm going to export this single comment component that we just created. And I'm gonna go down to the very bottom of the file and I'll add export, default, single comment, like so. Now again, this line right here is what makes this component available to the rest of our project. We're going to talk more about specific syntax that we're using here in a little bit, but for now, just stay with me. Okay, so now we're going to change over to the index.js file. And at the top we're going to add an import statement for our single comment. So I'm going to say import single comment from. And then we're going to provide a relative path reference to the file that we're trying to import. So in this case, a file it we're trying to import is in the same directory. So to indicate that we'll just put a dot slash and then list out the filename, which is single comment like so. So again, the dot slash right there means that you've got to look in the same folder that we're currently in and attempt to find the single comment file. So now you'll notice that we did not have to put a dot js or anything like that. The web pack library that is doing this kind of importing stuff and trying all these different files together is going to automatically attempt to find files ending in JS. Just for you. Pretty clever. That means you don't have to put the actual file extension on there either as it is indeed a JS file that you're trying to import. Alright, so it looks good. Now the last thing that we have to do is take this component right here that we just imported and use it inside of our app. To do that. I'm just going to clean out some of the existing J ESX. It's inside of here right now. And I want to leave the outside div with the class name of UI comments, but remove those two duplicate comments because we're going to replace them. Yeah. So I'm going to highlight everything from div, class name, comment all the way down to last div right here. And just delete it like so. So now we're just left with the one div with that class name. So now the last thing we need to do is tell our app component that it should show this single comment component. To do that, I'm just going to write single comment as though it were a js X tag. So inside here, I'm going to put single comment like so. Now, you might have thought that to show that component, we would use those curly braces and say something like single comment. But remember we just spoke about Jay Sx and we had said that if we want to refer to JavaScript variables, we're going to use those curly braces, but component or the one exception to that rule. Alright? So if we want to show one component inside of another, we're going to treat it as though it were a DJ S X tag instead. So whenever we're showing a component, we're going to use that js X tag. So now let's save this file and let's go see it on our browser. Out K. So there we go. So I see one single comment. And well that's pretty much it. So this is how we show one comment inside of another. Now, there's no limit to the number of components that we can show inside of another. If we wanted to, we could copy this single comment here a couple of times down like so. And then save the file again. Now, look back over in the browser, and now we'll see that we have three components showing up on the screen. All right, so the last thing we're gonna do is make sure that this new component is configurable by using the React props system. The React props system is a very important system for us to understand. So break it down a little. And in fact, I'm going to do it in a whole other video because it's a system that is a topic in and of itself. So I want to spend some time on it, but before we do, I want to let you know exactly what prompts are. And I want you to have a look at the js X that we just put into our single comment component. Okay? So chances are not every single comment that we want to show inside of our application is going to have an identical author time and content assigned to it. All right, so anytime that we will try to show this single comment on the screen is a component. We're probably going to want to be able to customize it when we create that component. Yeah. And that's what this entire prop system is all about. It will allow us to configure exactly how a component behaves and the content that it's going to show. So when we come back for the next section, we're going to talk exclusively about how we use that prop system. So let's take a quick break here and I'll see you on the other side. 21. 21 Props System: So in that last section, remember we put together our first example of component nesting. So we now have several copies of this single comment components showing up inside the app. Bravo. Without, as I've probably said many times by this point, the current issue with our application is that every single comment component has the same exact brothers named Time and content. So that's why in this video we're going to figure out how to fix that. You ready? So before I go ahead and spill the beans and tell you exactly how we're going to fix it. I want to show you a quick diagram that you're going to see many times throughout this course. You might have already seen it. Go to the diagram. So this diagram right here is what we might refer to as our component hierarchy. That's a diagram that tells us the different components that are currently being displayed inside of our application and the relationship between those different components. So as you can see in this diagram, we could say that we have a single instance of the App component. And then underneath it we have three single comment. So the single comment is nested inside the app. So we would refer to the app as a parent component. And these single comments are then child components, right? So we're going to use this term, child components a few times throughout this course. So that's you being familiar with it. So now we understand this diagram right here. I do want to tell you about the prompts system, which we are going to be using to customize a single comment when they show up on the screen. So the prop system in React is a system for passing data from a parent component to a child or a nested component. The entire goal of the prop system is to somehow communicate data from the parent down to a child with the ultimate goal of customizing the child and making sure that the content that it displays on the screen is different when the user interacts with it. So remember the overall goal of components. Their goal is to either show some content to the user or react to user interaction. So the whole purpose of profits is to customize those two things. Either customize how they're component looks or how a user interacts with it. Okay, so we got that out of the way. Our app component is going to show instances of this single comment. And when the app shows these components at the same time, it's going to pass in a little bit of configuration to each of those different components. So this little configuration of each of these would refer to props. And these props are going to tell the single comment to show a name of an author of whatever, Alex or Sarah or Jack. Now we can also use the same prop system to customize the time, content and picture that each single comment is showing. But we're gonna do the examples of that in the next video. Just wanted to give you that prompts system overview is just about having a parent customize how the child looks or behaves. You can think of it that way. So let's take a break here. You can play around with that if you want. And we'll go on when you're ready in the next video. 22. 22 Passing Props to Child: So in that last section, we started talking about the prop system in React. I think you've got it right. Remember, it's all about passing data from a parent to a child. Now, what about kinda child pass data back up to the parent? Well, not through the prop system directly, but we can do it indirectly. Gonna show you some examples of that later on. But the system is generally about communicating information from a parent to a child. Alright. Now, one thing that I perhaps forgot to mention in the last section is it props is short for property. Alright? But you probably figure that out on your own. So now let me tell you that when we use the prop system, there are going to be two steps. First, we want to provide information from the parent to the child. And then the child is going to be able to use that information. So let's first focus on how we get information from the parent to the child. So we're going to find in the parent component where we show an instance of the comment. So remember, we're going to provide some information from an app component down to that single comment. So we're going to write out what that looks like, just about any other property or attribute that we've been providing to J as x. So let us say that the property name equals and then the value for that property. And this information is going to show up inside the single comment. So now that syntax right there looks pretty similar to a lot of the syntax that we've already been making. You sev inside Sx. For example, class name equals comments. So the syntax here for providing a prompts to a child is very similar to what you've already gotten use to. And now the other thing that I want to mention about this property that we're looking at right here is the name that I chose. So I said name equals. Now there's nothing special about using this particular name. It's totally up to you. You can name it whatever you want. You could call it person or author or whatever. Now of course, you can get creative here, but I would caution you that it's gotta make some sort of sense within the context of the single comment. So now, in this case, the props that I've provided is a hard-coded string that says Sarah. And if we wanted to, we could easily place those curly braces and then reference the JavaScript variable inside here. So maybe we have some JavaScript variable inside of our component called name, and we can reference it inside of curly braces. Okay, so let's flip back over to our app component. And we're going to try to add on the first props name. And I'm going to add in a prompts name and I'll set it to equal Alex. So I'm gonna do the same thing on the next one. And so this one over here, let's do jack. And I'll put in a name of Sarah for the third one. So what we're doing is providing the same property name to each of these details, but in each of them, each one has a different value. So what is this telling us? That when we provide a props to a component, it's always going to be a unique version of that component. And this process name equals Alex is not going to somehow be shared with this second component or the third component either. Over here, this prop is unique. It's only being passed to this one. All right. So now that we've provided some information to a child, we have to open up that child's component in order to make use of this information. It is a two step process. The first one, I just had a little explaining to do. So first we provided the information. Secondly, we use that information inside of a single comment. So now we need to get access to that prompt that we have provided to this component. Okay? That prompts is gonna show up inside of an object that is provided as the first argument to this function. So now let's pass it as the first argument and just console log that props argument. And see what happens when we refresh our page. So I'm going to put that console log in there. And I'm going to save this file now and I'll flip back over to my browser. Now I'm going to also open up my Chrome Inspector so that I can see that console log. Alright, so here's my console and there's the three console logs. You see each of these objects that you can see right here, bump up up. They are the three instances of that single comment that we created. And if you'll notice, the prompts object has a key value pair inside of it. Now the key is the name that we provided inside the app. And the value is the individual name that we provided to each of those single comments. Okay, so now to make use of the props in our single comment, we can find where we are currently making use of the name Sarah, which is in here. So I removed the Sarah. Put in my curly braces to indicate that they are about to reference JavaScript variable. And then inside of there, I will say prompts dot name, like so. So now whenever this single comment is shown on the screen, the single comment is going to look at that prompts object. And it's going to see that there is a name property in there that's going to take that name and stick it into this tag. So now let's flip back over to our browser after saving this file. And now we'll see that our names have been updated. Each of the comments to Alex, Jack, and Sarah, which perfectly match up to the different property values that we provided to those components. Alright, so you've just learned the entire prop system. So now we can go ahead and remove that console lock. Certainly don't need that anymore. And then next we're going to go through that exact same series of steps to update our time right here. And the block content MBI image. Okay, so now let's focus on doing our date right here. So in order to do that, I can go back over to my app component. And I'm just going to add in a new prompt to each of these different single comment. And I'm going to name each of them date. I think that's reasonable. And let's provide a simple string that says something like today at five PM. And I'll do the same thing for the next one. I'll say date equals today at 06:00 PM. And for the third one, I'll do the same time equals today at 07:00 PM, just like that. So now inside of our single comment component, the props object right here is going to contain two key value pairs. Is going to have both props, name and prompts date. So I'm going to find the date inside that span and delete that. And I'll replace it with the set of curly braces. Then inside of here, that will say prompts dot date. So I'll save this n, flip back over and I'll see my newly updated times ri. So now let's go and do the others. Will first begin with the comment texts down here. Now in order to do this, I'm just going to first flip back over to my app component and I want to add a new property name to this thing. And I'm going to say text as a name for crops. And for the first comment, I'm just going to give it content of it's amazing. All my Yi Zhang. Alright, so on the second one, I'll do text equals. Great job. And the third one, thanks. Like so. And we've provided a comments now. And they got progressively terse. But now we can flip back over to the single comment. Now, remember, this prompts object now contains a key of content that we can freely reference anywhere inside this component. So let's see. I'll go down to here and I'll delete that hard-coded text. I'll put in my set of curly braces. And then I'll say prompts dot text. Alrighty, then so let's quickly take care of our images. And then after that, we're going to check our single comments in our browser. So open up App component again and import our profile pictures from the image folder. And we can do the same thing for the other picture. Copy and paste it and change the name like so. So now we can use those images as props. And I'll say picture equals and a set of curly braces. And then I can reference the image that we have imported inside of here. Now the same thing goes for the other components. I will say picture and profile two and again, picture profile three. So it'll be a slightly different approach, but in practice, the syntax will be identical. We used a set of curly braces instead of quotes. Because in this case we're not referencing the string, we are referencing an image. So now I'm going to be able to save this file. And let's go back over to our single comment component. And we have a new property on that subject. So I will reference picture prompts as a source for this image tag. And then inside of this image tag, I'm just going to pass prompts Dot picture, like so. Okay, so now I can save this file and I'm gonna flip back over to my browser where everything looks pretty good. So that's props in a nutshell. And that's how to pass basic information from a parent down to a child. Why don't we take a quick break right now and we can continue in the next video. 23. 23 Reusable Component Overview: All right, so in this video we're going to learn one last big topic in the world of props. And okay, here's, here's what I want to do. I was going to explain it, but no, this is what we do. I want to take each of those different components that we just put together and wrap them in a sort of user card, right, where we show the single comment and add a Friend button. So we're going to do some thinking about the best way to wrap each of our comments with some additional little card and a button underneath of it. And there's actually a really easy way to do this. We could absolutely open up that app component right here and add a little bit more js X to this thing that does show that kind of outline for this card looking thing. Remember, the ultimate goal here is to introduce you to one last big idea and the prop system. So we're not going to change our single comment component. Instead, we're going to create a new component called user card. And user card component is going to show this kind of outline around it with an Add Friend button. Now when we make the user card, we're not going to always show an instance of a single comment. And I want to tell you why. Because a, we were building an application that had this type of interface right here of like a comment with an Add Friend button. It's, it's entirely possible that we might want to reuse this user card component and just have like a white box with the Add Friend button underneath of it, but have a completely different content inside of it. So as you can see right here, we have the same Add Friend button, but completely different content in there. So we're going to put the user card together as a separate component. And we wanna make sure that we can somehow show the single common component inside of it. But we don't want to always show this single comment every single time when we use it. So that's the goal and that's what we're going to try to do. So I'm going to wait right here for you to work it out on your own now and do that too. Yeah, let's just take a break. And in the next section, we're going to start putting together that user card. And we'll talk a little bit more about the profit system. See you then. 24. 24 Props Children: So in that last section, we spoke about the change that we're going to make to our application. We're going to create a new component. So let's first create a new file inside of our project directory to houses new component. And then after that we'll start. Think about how we're going to put this together. Alright, so I'm gonna create a new file inside of my SRC directory. And I'm going to call this on a no user card JS. So let's put some boilerplate in to setup our component. And we will import React from React. And we will create our user card component. And this will be a functional component. So then at the bottom we're going to immediately put down that export default statement so that we can make use of this component in other locations inside of our project. Alright, so now we need to start thinking about that js X inside of this user card component. So again, we're going to borrow some super Steven from that semantic UI library. So we don't have to worry about doing a whole bunch of CSS. And let's just make the card with buttons underneath of it. And then we can start to think about how we're going to insert some custom content inside of that. Alright. So inside of my user card component, I'm going to put down a return statement. Then I'll do a div with the class name UI card. Now inside of it, I'll do a div with the class name of content. That's where ultimate content is going to go. And now we're going to play some text inside of here. So I'm going to place a div with the class name of Header. And I'll say Alex tan, crazy. As an author of this post, Please don't let Alex now that I'm doing this, I don't think he's going to be taking this class, but you never know. So underneath of it, I'll add a description with the div class name description. And I'll add some text inside of it. Just so that we can see that things are working out the way we expect. So finally, under this div class name of content, I will do another div with the class name UI button, button. And then we're gonna put our button and here. Now, I hope you notice that we have a plus icon inside of our button before the button text. So first we're going to add that icon with the icon tag and give it a class name of ad icon. Immediately after. We will put the text add friend makes sure that you don't have any typos inside that block of js X that we just put together. Alright, so that looks good. Now we've got this component put together. So let's save this file and go back to index.js. And we're going to import the user card and just show a single instance of it inside of the app component. And then at the top I'll add another import statement for user card. And I'm going to import this from the current directory. And I will say dot slash user card. And inside of my app component, right underneath that existing div that we have, I'll say user card. Cool. Then I can say the file and flip back over to the browser and let's have a look. Okay, so it seems pretty good. So we now want to show this single comment inside of our user card, just as we saw on our mock-up. But we don't want to use the user card to always show a single detail. If we did that, we then lose out on some of the reusability within that user card. For example, we couldn't reuse. It, shows an arbitrary text inside of there, like this. So now we're going to do this. Well, we're gonna make use of a great little feature in a prop system. Now, again, by this point, we've only discussed prompts as being some property name equals and then the value that he passed directly to a component inside of the component tag, like that Right here. But there is another way that we can communicate information into child component. Let me show you how I do it. So right now, right here we have a user card as a self-closing tag, right? Right. So I'm going to update this so that it no longer has a self-closing tag. So I'm just gonna delete that forward slash. And then I'm going to put a closing tag on the other side, like so. Now the syntax right here shouldn't look so crazy. It's essentially the same syntax that we use whenever we create a div. But we have the opening tag and then the closing tag. So to communicate this component down to the user card and tell the user card that we want to show the single comment. We're going to take this closing tag right here. I'll put it on the other side of the single comment. And then I'm going to indent the single comment. Alright. So we are now taking this single comment component and we're passing it as a props down two. And into this user card. We would refer to this as props as well because we are providing some configuration to the user card component. And when we pass this thing and user card, we now have to open up our user card component. And remember that every function that we put together receives a first argument that we refer to as props. So that means the component that we just passed as some configuration to this thing now exists on this prompts object. Now before we make use of it inside this file, I want to console log that prompts just to show you exactly what happens. Now, flip back over to the browser. Alright, so we have two warnings right here. First, we have an extra import statement inside a single comment component that we're not using anymore. And of course, the second one it says, you don't have to say picture or anything like that inside of an image tag. So let's remove that. Okay, save and flip back to the browser. Now, notice that we are now missing one of the three comments that we had before. So why don't we take a look at the console log of that prompts object. And what do you notice that the prompts object now has a single property inside of it called children. So we'll just ignore that underscore proto Oh, that's not related to any React stuff. So we can expand that children object right there. Now this right here is our single comment component. So essentially when we pass one component to another, the child component, in this case, single comment, is going to show up inside of the user card on a property of the props object called The Children property. So now we can show that thing inside the body of our user card. For us, in particular, we're going to replace this text with the whatever's coming over on prompts dot children. And I'm going to put crops dot children in curly braces because we want to reference that JavaScript variable. And then I'm going to remove that console log. So now I'll save this and let's flip back over to the browser. And what do you see? That my single comment is now showing up inside of the user card, just as we intended. That's the way we do it when we want to make reusable components. So if we ever want to show some component or content inside of a component, will take the child, wrap it with a parent component. And then that child component is going to show up inside of it with the props dot children property. Yeah, you got it. That's cool. So that's how we create some reusable components. So I think we need a little bit more practice. So let's wrap the other two single comment components with a user card. I'm just going to find the second single comment and I'm going to wrap it with a user card. And I'll do the same thing for the third comment as well. Alright, so now I can save this and then I'll just flip back over and we can see that all three comments are now being rendered inside of a user card. So now this is what I would call the benefit of this approach that we used here. We can set up a user card to take some arbitrary child anywhere. So why don't we try it out right now. Let's put a user card at the very top. And then I'm going to pass to it some plain text. I'll say Hello, my name is Sarah and I live in Istanbul. Notice here that we don't have to pass in a React component. You see that we can put plain text as well. So now I can save this and we'll just see that we have a new card at the top that says simply Hello, my name is Sarah and I live in Istanbul. Okay, you got it. That's it. So the one key thing to keep in mind here is that whenever we want to use this technique, we always have to make sure that we go into that target component. I could say it's lower, but it would hurt. So in this case, user card. And we just have to make sure that somewhere it references the prompts dot children inside of there. And if we don't reference props children, then the child that we pass to the parent will never show up inside. All right. Let's take a quick break and I'll see you in the next lecture. 25. 25 Class Based Components and Functional Component: And what do you now here we are again. So in this section we're going to start our next big topic. But before we get into it, I want to remind you of something that we spoke about. Could be a long time ago. When we started this course, we discussed what a component was. And I had said something like component can be a functional component or a class-based component. And that we use these to produce some content to show the user. And we also handle feedback from the user. You remember? Alright. We've only spoken about what a functional component is. Up until now. We've only just seen how to produce some js Sx to show the user but not handle any feedback or updates. So what do you say? In this section? We're going to start to discuss class-based components and how we can use them to somehow managed feedback from the user or from other systems inside of our program. And then have an update. How are components or rendering content on the screen based on some of that new information or all of it for that matter. Okay, so I want to first give you a quick overview on the differences between functional components and class-based components. One of the more challenging things to do when you are a beginner and the world of React is to decide whether to use a class-based component or a functional component. So I want to jot a, teaches some of the quick and easy rules that you can use in order to discern your component usage. So we can save it. We want to use functional components anytime that we're trying to show symbol content to the user without a lot of logic behind it. Now, everything that we've done so far, like I said, are pretty much all examples of simple components that we just create some amount of js X n, return it. So if your goal in creating a component is just and having some stomach contents show up, then you're not going to go much further. You're going to pretty much stick with a functional component, right? However, you're probably gonna wanna do more than just that. So that's why we have another type of component called the Class-based component. So if you plan on getting wild with your creations, you're not going to do just simple content. You're going to use a class-based component. So in other words, if you have any complex logic, if you have anything that needs to respond to user input, if you have anything that needs to make network requests, anything in these regards, chances are you're going to want to make a class-based component. So why don't we keep hammering that. Why don't I just show you how to do it? I know you're asking. What's the difference between the two? Why do we have to choose one or the other? So I want to highlight some of the pros and cons of well both approaches. And that way you will be able to make a fast and equitable choice. In my opinion, one of the biggest reasons to use the class based components is that we get an easier time to organize our code. That's in general. It's not always, but it's usually organizing our code is a little more straightforward. Now personally, when I look at a functional component, if there ends up being a decent amount of helper functions, you know, a helper function right here. And maybe we've got another one underneath of it with the same amount of code inside of there. And then it can be, Well, let's just call it rather challenging to merely take a glance and figure out what's going on inside of here. However, with a class-based component, it's a little bit easier to read as an engineer. But that one is totally subjective. So don't want to, you know, persuade you one way or the other. Don't want to waste any more time talking about it. But I do want to include some of the other benefits of class-based component. And that is that they can use this state system in React, which is something that we haven't learned yet. But we'll get to it. So right now we can just barely understand that the state system is something that we can use to make it easier to handle user input and then update our application. Now and the other benefit is understanding lifecycle events. Now that's another thing that we haven't discussed yet. I know, but we're going to discuss these two things pretty quickly later on. But right now, just basically understand that a life cycle event just means that it's easier to do some of the tasks when our application first starts up. So that's the gist of some of the benefits of using class-based components. But to be honest with you, understanding the difference between these two things, it's just nearly impossible until you see some very good examples of both of them. So why don't you just take a quick break right here and we will continue talking about components. On the other side. 26. 26 New App Overview: So now in this section we're gonna talk about an application that we're going to build to get a better idea of the differences between functional components and class-based component. We're also going to learn a little bit about states and lifecycle methods. And of course, these are very important concepts in the world of React. You might have gathered that already. So okay, here's the app that we're gonna bill. So as an application that doesn't make sense and doesn't have any purpose. It's going to make it easier for you to understand how class-based component's states and lifecycle methods work. So right now I just want you to focus on learning some of these key issues. Okay, coat. So that's going to be an application that's going to detect which hemisphere the users located in and the real-world. So going to say that if the user is located in the Northern Hemisphere, that means we have to actually detect our users physical location when they visit our application. And if they are in the northern hemisphere, we will be able to show it on the screen. So I want to be able to print on the screen is something like you are in northern hemisphere or you're in the southern hemisphere. So essentially, we're just detecting which hemisphere the user's n based on that user's location. So we're going to print different content on the screen based upon that information. And like I said, the application doesn't make sense, but there's gonna be a ton of hidden challenges inside of here that is going to require us to get a much better understanding of how React works. So I want to quickly just generate a new advocation. So I'll just flip over to my terminal. And I'm going to generate my app on my desktop. And of course you can choose wherever you want to save it to. And then I'm going to generate a new application with Create React app. And then I'll name my application hemisphere. So, so it may take a couple of seconds. Okay, so after we've generated a new project, I'm going to change into that new directory. And then I'll start up my development server with npm. Start. My browsers automatically launch now and I'll see the default reaction application up here. Now I'm just going to start up my code editor inside that new hemisphere directory. Okay, so we've got a little bit of refactoring up in here. So the first thing that I want to do is pull in that semantic UI CSS library. We're going to depend upon somatic UI for taking care of some styling. So I'm just going to search for semantic UI CDN. And of course we find a link here at CDN. 27. 27 Getting Users Physical Location: And here we are. So this is what the other side looks like. Anyway, in this video, we are going to learn how we can determine that user's physical location in the first place. So I was going to be pretty easy for us. We're going to be using something called Geolocation API. So this is built into most modern browsers by the way. And there's actually a tremendous amount of documentation about it online. Now I'm going to open W3 schools. I wanna say W3 and geo-location. You can read a little bit about it here if you want to. But essentially this is a function that's going to make a guess about where the user is physically located, depending upon a couple of different parameters, such as the user's IP address, different Wi-Fi networks that are visible in the area, and some other similar information. In practice, it can actually come up with a very good guess of where you are physically located in many cases. So why don't we just try it out? So I'll flip back over to my code editor. And I'll find my app component inside of here. And we're gonna make a call to that Geolocation API. I'm going to call window navigator geolocation. And then I'll say getCurrentPosition. And when we call this function, it's not going to instantly return our position. Instead, it's going to take a certain amount of time for this function to determine exactly where our user is. So in order to get a response from this or get some information about where that user is located, we have to pass to separate function callbacks. So the first argument is going to be a function callback that gets called anytime that this function successfully gets the user's location. So I'm gonna put a callback right here. And I'm going to take the first argument of this callback, which we will call position. And for right now I'm just going to console log that position to show you what we can get from this function. Alright. So we frequently refer to this as this excess callback, because this is the callback that gets called anytime that everything goes as planned. And we're going to put a comma over here and then enter. And then the second argument, which we've referred to as the failure callback, because it's going to be called anytime that the getCurrentPosition function is unable to determine the user's physical location. So I'll put in a second callback here that will be called with an error. So I'll save this. So now I'm going to flip back on to my browser and we'll see what happens. So I'm going to open up my Chrome Inspector and you'll see that I've already got my position console log over here. Now chances are you're going to see a little pop-up that says localhost 3 thousand wants to know your current location. So if you see that little window click allow. And then after a couple of seconds, you should eventually see something here that says position. And it will provide you with the guess of the latitude and longitude. And if you don't see a position like this, if you eventually see an error message pop up or something like that, I mean, that's going to be totally okay. I'll tell you why. So I want to show you a quick little work around to make sure that you will be able to get some physical callback like this. So if you get an error message, just hit Escape. And then this is going to open this menu. So on that dot, dot, dot, right next to the word console right there. You click on the dot-dot-dot and then select sensors. And then inside the sensors, you'll see that there's this thing called geo-location override. So this is going to force your location to appear as being one of these different locations on these different presets. For example, let's select Sao Paulo. Anytime that I attempt to geolocation call, myLocation is now going to automatically be returned as Sao Paulo. So like I said, you should only have to do that if you run into some type of error message. So now I'm going to refresh it again and I'll see that my coordinates are identical to the pre-set up, Sao Paulo right here. Alright, so that's how you get the user's location. Now we're going to use this position object right here to get that latitude because the latitude is going to tell us whether or not the user is in the northern hemisphere or the southern hemisphere. You're following this, I know you are. So now one thing I really want to be able to test as we develop the application is to make sure that we have a good understanding of what happens inside the app if for some reason the geolocation call fails. Now, one reason that might cause that called the fail is that if the user does not allow their position to be shared with our app. So we're gonna make sure that we develop our application to work, even if a user denies that request to share their location. So now in order to test that flow to understand what happens inside of our application when it gets denied, We need to reset our permission to make sure that we get that allow or deny pop-up to appear on our screen. Because as you might have noticed, every time you refresh this page after allowing it one time, you're never going to be asked again. So in order to get asked again, all you're going to do is find this icon next to our address. And then you'll notice that we get this drop-down and it says location. And we're always allowing. Ok, so in order to test our application and make sure that it still works correctly, even if we deny the location request, I can reset this to ask default like so. And then I can refresh the page. And then I get asked if I'm going to allow local host to know my location. Right? So this time I'm going to hit block. And then you'll see that we get this position error object that tells us why the geo-location failed. So we're gonna be using this a little bit as we go on throughout the rest of this application in this course, just to make sure that the app has a reasonable degree of functionality. Alright, so let's take a break here and we'll come back in the next lecture. 28. 28 Handling Async Operation in React: So now that we understand how to use the geolocation API to get our location. I'm going to flip back over to my code editor and find my app component again. So we know that this position object contains that latitude. We want to take that latitude and figure out if the users are in the northern or the southern hemisphere. So we're going to use it to customize the look of our page. So why don't we print out our latitude right here in place of the string Hello world. And I don't want to get my latitude to display on the page. Okay, so how would you do this? That's the question that will lead us into understanding why we have to use a class based component to begin with, right? So let's have a look at what is happening inside of our application as it starts up inside the browser. And as you see it visually unfold, you really are going to understand why it would be really challenging for us to somehow put our latitude in here if we were going to continue using a functional component. So this is a timeline of what happens to our application inside of a user's browser. We start up the very top where a JavaScript file and gets loaded into our browser. The browser then interprets our JavaScript file that we are trying to create an app component. And that have come along and gets created. And then at some point in time, the App component is going to be invoked. So when that function is invoked, we then call our geolocation service. But the very important thing to keep in mind here is that getting this geo-location result back takes a certain amount of time. So this can cause an issue. So we call the geolocation service. And then, and the very next instance, our app component returns a certain amount of js X. The js X is taken and turned into HTML and then is rendered out onto the screen. So that entire process occurs and we see content appear on the screen far sooner than we ever get a result from that Geolocation API. Yeah. So essentially we are waiting here to get a position back and we've already rendered our app component along time ago on the contents of the app component are already visible on the screen. So yeah, this is not very good. So with this functional component, we don't have any good way of well waiting until the success of the callback right here, and then taking into location and then sticking it into js X and then returning it. We just don't have that capability with a functional component. Yeah. So the solution that I'm going to propose and that is essentially your only choice, is going to be a class-based component. So why don't you pause right here. And in the next section we're going to talk about the class base component in the React state system. 29. 29 Transformation Functional Component to Class Based Component: Now you remember in the last section, we learned that we are going to run into some really big issues when we're using a functional component with this geolocation API. So the problem is that it takes some amount of time for the geolocation service to return our position. And by the time it returned to a position, we've already rendered our app component on the screen. And we have to somehow tell r component to rerender itself or update the content on the screen right after the success callback. So the solution is to create a class based component instead of the functional one that we're currently using. So once we move over to a class-based component, we're then going to be able to use the React state system and lifecycle methods. So we're going to learn these two different methods at the same time. You ready. All right, so here are some rules of creating a class-based component. First off, we must create a JavaScript class. Javascript classes were introduced with ES 2015. Now the second requirement is that the class that we create must have extends worth. Then we're gonna say React.com. We're going to talk more about exactly what that means in just a moment when we refactor the app. And then finally, the other rule of requirement of our class-based components are that they must define a render method that is going to return sum j Sx. So with all that in mind, let's flip back over to our code editor and we're going to start to refactor our app component. Now, I'm going to leave this functional component just right here. So we can easily make some comparisons between the functional and the class based implementation of our app. So sleeve it there. Now I say class extends react.com. So what I'll do is open up the class body with a curly braces. And then I can try to define a render method. And then once inside the render method, I'm going to return a div with a text. You are in the northern hemisphere. And that's all. I'm going to pull over this geolocation API stuff right here. So I'm going to cut all that and paste it down into the render method like so. And then I'm going to just delete the functional component. Okay, so now I want to tell you a little bit about this extending React component thing right here. So when we make a class, we are creating a new class inside JavaScript that has just one method assigned to it, and that is the render method. However, react expects that are class-based component has many other methods attached to it. Now, normally we do not implement these methods by ourselves. Instead, we follow all these other methods from this other class called React component. So essentially the reason that we're extending React component right here is that it allows us to put a ton of built-in functionality from this other class called React component into our class. So in other words, we're just borrowing functionality to put in our AP class. Alright, so let's save this. And then we'll flip back to our browser. And we can see our text. You are in the northern hemisphere right here on the screen. Now, you might think, great, that's fantastic. Our job is done here. You know, just turning that functional component into a class-based one is not going to solve any of the problems that we have fetching our physical location. But it is one step toward getting a solution. So why don't we take a break right here? And in the next section, we're going to talk about the second step, which is to use the React state system to approach the solution. 30. 30 State Rules: Just a little recap in the last section, we turned our functional app component over into a class-based component. Now, I mentioned before, but I'm gonna say it again. Doing this refactor alone is not going to solve the problem that we have because we still need to get the current position call. And that's gonna take some amount of time, right? So in this video we are going to talk about states in React. And that's the actual system that's going to solve this problem. So, one, we start by talking about states. These are the rules of the state system in react. First, state is only usable with class-based components, which is what we just created one lecture ago. So we've got that check. State is a JavaScript object that contains a certain amount of data that is relevant to a singular component. Now in our case, we would have one state property that is relevant to our app component. And the one that we care about in our app component is the user's current latitude, which we will get out of that position object. We don't actually care about the entire Position Object. The only one that we care about inside of here is that latitude. So with a state system, we create a JavaScript object that is going to contain some amount of data that is strictly relevant to our component that we're working on. Okay, next item, updating states or updating properties inside this JavaScript object on a component will cause R component to re-render. And that's going to solve one of the issues that we ran into back over there. Now, remember that we want to somehow show our component on the screen when our application first starts up. And then some amount of seconds. When we get the results of geo-location, we will then somehow get r component to render itself and update the content that showing on the screen. So the key here of getting a component to re-render is to update. It states. In other words, if we want to get a single component to update itself, we will update its states. All right? Next, the state must be initialized when a component is first created. So the state is going to contain some amount of information that is relevant to a component. So for this reason, when we first create the component, we have to initialize our state. I make sense. So the last item is so very important. Again, last but not least, right? A state property can only be updated using the function set state. Now I know you don't know what the set state is yet, but you can imagine. And I will repeat this line to you again and again because it is the most common error that everybody makes when they start learning react well except for me. But that's why I'm here. So again, what's the most common error? They try to update their state and they do it in ways that they are used to doing with JavaScript, which is not the right way to do it. Remember this line, we're only updating state using the function set state. Alright? So I know with all of these things could be a little confusing to you without seeing any code. But we really will do each of the steps over and over again until you understand it one at a time. So why don't we take a break? And then in the next section, we're going to start to implement state into our app component of c On the other side. 31. 31 Initializing State In Constructor: So in the last session, we started talking about this state system and react. In this video, we're going to start to refactor our app component to make use of state. So the first thing we wanna do is make sure that we initialize our state when the component is first created. After that, we're gonna make use of our state enzyme, the render method. And then I'm sure that you remember at some point in the future, we will also update our state with set state after we successfully retrieve our location. So I'm gonna flip back over to my code editor. Now, inside of our class component, we already have one method called the render method. And that render method is required for every single React component we create. If we don't define the render function, React is going to throw up an error. Now there's another function that we can define inside of our class-based component. And that's another very special function called the constructor function. So this function is not required by React, unlike the render function. And it's a function that belongs to the JavaScript language itself. Now this is a specifically named function that is particular to the JavaScript language, not specific to react in a JavaScript class. The constructor function is the very first function that's going to be called anytime an instance of this class is created, make sense. So in other words, anytime that we create a new instance of the App component and show it on the screen. This constructor function is going to be automatically called before. Anything else. Cool. And it makes sense that is very good location for us to initialize our state when our component is first created. Yeah, it's not the only way to initialize state. However, I'm going to show you another method of initializing state and in just a second. But, but right now, I will stick with this particular way because this is what you're going to see all of the documentation about it. And it shows you this how to initialize state using this method right here. I want you to know it before you break the rules, before you break the rules as what I mean. All right. When we define the constructor method, it's going to be automatically called with the props object. It's the same props object that we saw previously with our functional component. Now before we do anything else inside this constructor function, we have to go through one more little step. We've gotta call a function called super. And we have to pass the props as an argument to this function. Alright, so what the heck is a super thing, right? So if you notice we don't have any other functions inside this file called Super. So what could it possibly do? Well, you gotta remember that our app component is extending or borrowing functionality from the React.component-based class right here. This base class has a constructor function of its own that has some code inside of it to set up our React component for us when we define a constructor function inside of our AP class. So that means that we're essentially replacing the constructor function that is inside of the React.com class. But we still want to make sure that all of the setup code inside of this things constructor function still gets called. So to make sure that the React component's constructor function gets called. And we call it super with props. Super is a reference to the parent's constructor function, then that's all it is. So like I said, we have to do it every single time that we define our constructor function inside of a class-based component. If we don't define it, we're going to very quickly see an error message on our browser. Alright, so now let's talk a little bit more about this state system. The entire reason we define that constructor function, we could initialize our state object. So in order to initialize our state object underneath that super function. And super is always going to be the first thing in here. So underneath of it, I'm going to say this dot state equals an object. Okay? So this object, this is the state object. And it's going to eventually contain some different pieces of data that are very important and very relevant to our component that we're putting together. So now remembering in our case, the most relevant piece of data that we have is our latitude. So let's put that inside of here. And I'm going to simply say latitude. And now we're going to usually give it some reasonable default value. But in this case, we know that our latitude is going to eventually be a number as a property on our state object, but we don't have it yet. So we're going to give it a value of null by default, which means that we don't know what the latitude is just yet, but we will know what eventually. All right, so now we've got our constructor method defined. And then we have initialized our state object by creating a JavaScript object. And we put a property of a key value pair to it and then assign the result of it to this state. Okay, so let's update our state property. Now, as I said just a little bit earlier, we don't know the latitude value is just yet, but we will note at some point in time, as soon as we get that current position. So after creating the state object, we then assigned it to the this dot state property. So now we can freely reference this state object and the properties inside of it from any function inside of our app component. For instance, down inside of my render method where we try to print out our latitude. I'm going to put in a set of curly braces because we're going to reference a JavaScript variable. And I'll say this dot state dot latitude. Now, if we save this and go to our browser, theirs, nothing appearing on the screen because we've initialized it to be null. But very quickly, we can just replace it with a random number. I'm just gonna say latitude is 25. So if I save this and then flip back over to my browser, I'll be able to see that my latitude is 25. So you get the general idea is that we might make use of this state property inside of our j ESX or other functions inside of our component. We understand how we can initialize our state and how to reference it inside of some j Sx. So the last thing we need to do after we succeed in getting our position, we somehow update this latitude property in our state object. Now remember the big key to this thing is that anytime that we update our state's object right here, our component will instantly re-render itself. So if we're going to somehow get our location with the getCurrentPosition right here, and then update our state object. Our app is going to render itself and we should see a new latitude. Read it out on the screen. Right. Now, before we think about having to update our state, there's just one little change that I want to make to our class. The render method inside of a component is going to be called somewhat frequently. And we're going to learn a lot more about where the best place is to put calls that take some amount of time like this. Right now. I just want you to understand that we never want to initialize some work or some request or anything like that in the render method. The reason is that the render method is going to be getting called all the time. So rather than leaving this getCurrentPosition call inside of here, I'm just going to cut it. And then I can move it up to my constructor and I can paste it right underneath the state call. So now what does that do? It makes sure that when our app component shows up on the screen. We're going to attempt to start to get the user's current location. And then later on, when we call the render method again to update our component, we're not going to accidentally double fetch our current location. That's why we move it up inside into this constructor function. Okay? So now we can start to focus on updating our state object after getting our current location. So remember that the first argument to get the current position is a callback function. So this is a function that will be called at some point in time in the future. Rather than just doing a console log inside here, I'm going to put a function body in here. And then on this line, I want to take my latitude out of that position object. And I want to use the latitude to update my state object. Okay, so a quick little reminder. Anytime that we want to update our state object, we're going to always use the function set state. Alright, so now let's see how are we going to update our state object using set state. I'm going to call this dot set state. And they're going to pass it to an object that has the update to state that I want to make. So in this case, I want to use the position object and some property inside of there to update the latitude property on my state object. So inside of that state, I'm going to say latitude is position dot chords dot latitude. So let's double-check that at our browser, OK. Position towards latitude. Do it. That's all we have to do. So remember, anytime that you want to date your state, you're going to call set state. Come on everybody together. Set state. That's right. Set state is a function that gets put on our app component automatically when we extended react.com. Now, what I really wanted to focus on here is that in order to update our state object, we will never write something like this. Dot state, dot latitude equals position coords latitude. Got it. We will never do this. We never want to do a direct assignment to our state object. We can only do a direct assignment inside the this state object. Anytime that we want to change, update, or manipulate our state property, we always are going to call set state as opposed to doing a direct assignment. Alright, so I'm going to delete that line right here. So now I'm going to save all of this and I'll flip back over to my browser. And I can see that I get the correct latitude to appear inside of my component. I hope you see that too. So that's hit. If you didn't get what happened or you got confused a little bit because I was going a little fast there. Don't worry, because we're gonna get a ton of opportunities to understand exactly what state is coming up. Now before we start to write any other code, I do want to show you all flow with a diagram to make sure that you really do understand exactly what happened. Alright? Gotta love these diagrams. Yes. Alright, so I'm going to see you in the next section. 32. 32 Lifecycle Method Overview: So now I'm remembering in that last section, we initialize this state into our app component. Now I want to go through a very quick flow diagram to help you understand exactly what happens step-by-step. In that our application was first loaded up to the browser all the way to the point in time where we saw our latitude appear on the screen. Okay, so first, we loaded up the index.html file inside of our browser. And that requested our JavaScript file with all of our React code inside of it. So the Javascript file was loaded by the browser and then executed. When that file is executed, we created a new instance of the App component. Remember that the first function that's going to be called inside of our component automatically is the constructor function. Now we're not required to define the constructor function. We can optionally define it if we want to do some initial setup. So if we want to define the constructor function and we have to call the super function inside of it. If we don't call the super, we'll end up with an error. So we call the constructor function that we call super. And then right after that, we initialize our state object. So we created a new JavaScript object right here with the properties inside of it that we want to use inside of this component as. And in our case, the only property that we're concerned about right now is latitude. Now I, for whatever reason that we also wanted to include the users longitude, then we just have to assign it longitude to this thing as well and then initialize it to null. But of course in our case, we don't care about the longitude at all. We only care about the latitude. Ok, so now after creating this object, then we assign it to this dot state property. So this state is a very specifically name property, just like set state and render. We can't give it a different name. Alright, so then the next thing that happened was that we called that geo-location service. Now, one thing that I want to be more clear about is that this callback function right here, this is not going to be invoked until we eventually return from the constructor. So we're gonna run super with props. We're going to run this assignment. We're going to run get current location. And we're going to give it the call back. And then we're going to return from the constructor function. But this callback right here is not going to run until some point in time when we finally successfully fetched our position. So this set state call right here does not actually occur while we're running the constructor. Yeah, it's going to run it at some point in time, the future. Alright. So after that, react then takes out component and it calls its render method. And render method then returns some amount of j Sx and that gets rendered to the page as HTML. So then we wait for some period of time and we finally get the result of our geo-location request. And then we can execute that call back. This one right here. We take the position object, we pull our latitude out of it, and we call set state to update our states on our component. We update our state by calling set state. And when we call set state, React is going to automatically see that we updated a property on our state object. And of course you remember that anytime that we update our state objects, react is going to almost instantly re-render the component. So reacts saw that we updated the state property and then called our render method a second time. And the render method returns some amount of j Sx, which was then used to update the content on the screen. Now, one thing that's really important to understand here is the fact that our app component was actually rendered to times, right? One time when our application first started up. And then a second time after we updated our state. So there was a very small gap in time where a component was rendered onto the screen without any number right there. So in a very short time, we saw nothing on the screen. And then only after that we got our geolocation requests completed. We finally see you number that appears right here. All right, so let's have a look. So I want to reset the permissions by clicking on the little icon right here. And you can find the location and reset it to ask a default like so. Okay, so now I can just reset the and refresh the browser. Alright, so what's happened at this point? So we've gone through the process of calling the constructor that calls the geolocation service. One we call the geolocation service. And up pops this little approval requesting right here. And then immediately after that, react as already called, the component's render method, taken that J Sx and shown it on the screen with our states of latitude right here being equal to null. Now, when we render out null inside of a component, that component does not show the word null, right? It just appears blank. So at this point, we have not completed that request to get our location. Right. So when I click Allow right here, that's when we're finally going to call this set states, which is going to cause our component to re-render with a value of this dot set state. And we see now that the number finally appears. So now, I do want to focus on the second callback that we have provided to the getCurrentPosition call. Remember this is going to take some error from that request. And right now, just console log it out. And we'll just write this here because the application is not always going to work the way that we expected. So rather than going ahead and continuing on with our application and making use of the latitude, I want to instead make sure that will handle this error message in a reasonable way. So it's going to be pretty easy if anything goes wrong with that getCurrentPosition request. And we'll enter this error callback right here. And we probably are going to want to rerender our component and directly tell our user, hey, something bad's happened here and we can't really tell what location you're in, But hold on. So as we talked before, anytime that we want to render our component, we're going to update our state. So I'm going to add a new property to our state object right there. And I'm going to add a new property called error message. And I'm going to default this thing to be an empty string. So in our component is first created, we're going to have an empty error message. See where I'm going with this. But if anything goes wrong while we were attempting to get our current position, we're going to update this error message property right here. So now when we update the error message property, it's going to cause that component to re-render. And then we can attempt to show the error message inside of our render method. So come on, let's go ahead and give it a shot. So inside of the error callback right here, we're going to remove that console log and replace it with a function body like so. And then inside of here, I'll just call this set states and pass in an object the property that we want to update. So in this case I want to update the error message property on state. And I want to set it to be equal to error message. And whenever we update our state, we are not required to update every property in it. So when we call set state with error message, like so, it's not going to somehow delete our latitude. It's going to leave the latitude untouched. So when we call set state, we're only adding or changing properties on our state. Alright. We're never removing or deleting properties. Only adding are changing. So now let's reference that error message down inside of our render method to see the warning on the browser in case we have an error. So down here I'm going to put a set of parentheses and I'll say this state dot error message. Alright, so now we can save this. And let's flip back over. Click on the icon right here and block location. So now we can see right here it says User denied geolocation. And that's because I currently have my geo-location block, but I can reset it so that a less me again. So default like so I'll refresh the page. And now I have no error message. I get my latitude to appear again. And now if we have an error message, we're going to show it. And if we don't have an error message, we are going to show our latitude, Qu Leo. So we're gonna take a quick break right now. And I want to see you in the next lecture. 33. 33 Conditional Rendering: And what do you know it's time for the next lecture. So in the last section, we were able to handle an error occurring during our geo-location requests. But it's not necessarily appropriate for us to just put the word error right in here. Yeah. So in this section we're going to figure out how to handle the situation when you don't have an error and when you do have one. So basically there's three different combinations of latitude and the error message that we could run into as the possibilities, right? So we can run into a situation where we have a latitude, but we do not have an error message. So in this case, we probably would want to show the user are latitude. Then the second case we might not have the latitude, but we might have an error message. So this would occur in a case that a user denied our geo-location request. So that's the case. Then we might want to show the error and not show the latitude. And then the third case is, let's say that we might not have either the latitude or the error message. So in this case, what would occur is that our app is probably waiting for the API request. So if that's the case, then we might want to show something like loading to the user. And then when the user first uses our application, it's gonna take about two or three seconds for someone to load up. So during that time, we probably want to tell the user that they are waiting for something. So why don't we handle all three of these different scenarios right now. So in order to conditionally return some different js X, all we have to do is put in a simple statement into this render method. Now, this is going to be the most simple way of doing this, but we are going to refactor it into a slightly more elegant way. So I'm going to delete everything inside the render method for right now, and I'm gonna put in three different statements. First off, I'll say that if we have an error message and we do not have a latitude, then I want to return a div that contains my error message. So then in that case, I do want to show an error. And then next, if I do not have an error message and I have a latitude, now I want to return a div with the latitude. And then finally, for the third case down here, this would be the scenario in which I have absolutely no latitude and no message for the error. So in this case, I want to show that it is loading. Okay, so now I don't really need an if statement. I can just say if we failed these two checks, then chances are we don't have a latitude or an error message. So I'm just going to simply return a div that says loading. Ok. So now this right here is conditional rendering. So we're returning different js X depending on the state or the props of our components. So we're going to use conditional rendering quite a bit throughout this course, and this is the most simple way to go about it. So even in this application, once we understand how this block right here works, we're going to refactor it and is something that looks a little nicer than what you see here. So I'm going to just flip back over to my browser. And I see that I've already got my latitude on here. So let's refresh the page. And I have latitude on my screen. So now let's test out the other two scenarios. So I'll just reset my location by setting it to ask default and then reload the page. And then in the background here we don't have an error message or a latitude. So we're seeing that loading text. Perfect. But if I then allow, it is going to turn into a latitude. So now I'm going to try the other case. So I'll just do another default and I will refresh. Okay, so now I'm going to block at this time and now I see the error instead. And that wraps it up. So why don't we take another break here and we'll come back for the next section. 34. 34 Get to Know Lifecycle Method: All right, so when we initialized our state property right here, a couple of videos ago, I had mentioned that there are two ways to initialize state. So I want to show you the other way that we can initialize state because the alternative way is a method that you're going to see very frequently. And a lot of blog posts documentation. Now in order to understand this other way that we're going to use to initialize state. We have to talk about something called lifecycle methods. You heard me talking about it before, but now let's get into it. So this is the video that we're going to talk about lifecycle methods and then we'll start to refactor that state initialization. Okay, so component lifecycle method, it's a function that we can optionally defined inside of our class-based component. So if we decide to implement these methods, there'll be called automatically by react at certain points during a component lifecycle. And when I use the term lifecycle, I am referring to the fact that a component is going to be created and then show up on the screen of our browser. And then at some point in time we might do something like say, call a set state, which will cause a component to re-render. And then at some point in time, a component might be removed from the dom altogether and stop showing its content on the screen. So that entire series of events is the component lifecycle. So we've already seen the constructor function. That is a function that we can optionally define if we want to. It will be automatically called when a new instance of our component is created. And we've also spoken about the render method. The render method, of course, is not optional, which is unlike any of the other call methods here. So the render method is the one function that we absolutely have to define. Now, technically, the render method is a lifecycle function. It gets called at some point during the lifecycle of a component. So here's what happens in our app. Constructor is being called. Then the render method will be called. And we return some amount of j Sx, and then that content becomes visible on the screen. After that, we're gonna see a series of different lifecycle methods being called at different points in time. First off, immediately following a component shows up on our browser, a lifecycle method component did mount is called. So that means that if we define a function inside of our class, I write here outside of the constructor right above the render method. And if we define a method right here called very specifically component did mount, this function will automatically be called onetime when our component first gets rendered onto the screen. So we could put some amount of code inside of here to set up or do some initial data loading that we might want to do one time when r component first shows up. And then after that, the component did update, lifecycle methods will be called automatically. Now remember, and update is going to come in the form of calling that set state method, right? Because anytime we call a set state and update our state, the component will render itself. So anytime that happens, the component did update. Lifecycle methods will be called automatically. And then after that or component might get another update. If it gets another update, the component did update will be called a second time or even a third time. However many times our component gets updated at some point in time, we might decide to stop showing this component on the screen. We'll talk about these different scenarios that would occur later on inside the courts, don't worry. But if for some reason we decide to no longer shows some of our content, the component will unmount method will be automatically called. And then this method can be used usually if we want to do some kind of clean up. And of course, we will discuss that to get a better understanding of these different lifecycle methods coming up. Right now I do want to implement component did mount and component did update inside of our component and just put some basic console logs inside of there. So back inside my editor once again right above the render method, I'm going to define component did mount. And inside of it I'm going to put a simple console log that says component did mount, just like so. And then underneath of that I'm going to define a second lifecycle method component did update. And I'll put a console log inside of it that says component did update a hole, right? So let's save all of this and go back over to our browser. And I just want to see these console logs. So the first console log is from the component did mount lifecycle method. And it's going to be called automatically anytime our components shows up on the screen. And we then saw the component did update method. So our geo location request succeeded. And after that component did update method was called. So in this case I'm going to change location preferences to ask default. And I'm going to refresh the page. And as you can see, we don't have the component did update on our console because our geolocation requests didn't succeed and the set state function didn't get called. And I click on Allow. And here it is. The component did update, lifecycle method was invoked. All right, so we can remove these two lifecycle methods right here. And let's go to the diagram. So I just want to highlight a couple of notes on each of these different lifecycle methods. So first off, you've already seen the constructor, and I think you're already understanding that the constructor function is a really good place to do our state initialization, and that's exactly what we're doing right now. We could also do some initial data loading inside of a constructor. We can make a network request to some outside API, just like we did here. And we can make it inside of the constructor. It could be one possible solution, right? However, I distinctly remember when we started talking about component did mount. I told you that component did mount method isn't perfect location to do some initial data loading for our component, right? Or even to do some fetching of an outside process, I getting the user's current position. If you only have to do this thing one time. Now in our case, we only want to get our users current position one time. And the component did mount method only gets invoked one time. Sounds like a match. Yet you might now have notice that we did the same thing for the component did mount method and the constructor. In both locations. We can do some data loading or call our geolocation stuff right here. So in truth, we could use either a constructor or a component did mount to do that data loading. However, if you read the official React documentation and if you look at some of the community best practices, they're all going to say, do not do data loading inside the constructor function. Alright, that's understandable. But you absolutely can. It's just recommended that you do it inside the component did mount method. Now, there is a very simple reason for that. If you always centralize all of your data loading stuff inside their component did mount method as opposed to. Spreading it out between components. Well, it's going to lead to a much clearer code logically thinking, right? So if a new engineer ever starts working on your project, they can open up some new component file and understand right from the get go that all the data loading code is related to a single component, as always going to be placed inside of the component did mount. So I'll tell you what. We're going to take that advice right now and define a component did method. And we're going to move our getCurrentPosition call inside. That component did mount lifecycle method. But right now we're going to finish talking about these last few lifecycle methods. So next up is the render method. Now, I think you already pretty well understand what's going on with the render method. Yes. Inside of the render method, we're going to return sum j ESX in general. And that's the only thing that we do inside of there. We're not going to ever make a network request, right? Okay. We're not ever going to start up something like fetching the user's location or something like that. Render method is just about returning js X and not doing anything else. Now, the component did update method gets called every single time that a component is updated for any reason. Maybe our state changes or our component gets a new props from its parent. So this would be a great location to also do some data loading that needs to be done every single time that a component is updated. So a good example of that would be if we wanted to make some type of network requests, every single time that a user clicks on a button, or every single time that they enter some text into an input. Now finally, component will unmount. The component will unmount method is used any time that we are about to remove a component from the screen and we need to do some clean up after a good example of that would be if we're making use of Google maps, say inside of a React application. Okay, so you guys get it. Now technically is not the entire list of lifecycle methods. There are three other lifecycle methods called should component, update get derived state from prompts and get snapshot before update. Now the reason I'm not going to put them in the diagram right here is that, well, he's lifecycle methods are very rarely used. And so as you're beginning with React and you're learning at all for the first time, it's best to just ignore these and focus on what's, what's commonly used. Alright, you look like you could use a break. I'll see you on the other side. And we're going to have more fun with refactoring. 35. 35 Refactoring App with Lifecycle Method: Oh, great, you made it back. Excellent. So we now understand that we usually put some initial data loading requests to our code inside of the component did mount instead of the constructor function. And remember, there's not necessarily a technical reason for this, it's just considered a best practice. So at present, inside of our constructor, we've got this initial call right here to get our users current position. And we're going to put this inside of a component did mount lifecycle method. Now if we put it right in here, our application is going to work how it currently works. So I'm going to add a new function underneath my constructor function and call it component did mount. And then I'm going to find the entire block of code where we get our users current position. And I'm going to cut it and paste it inside there. And I'll save this and flip back over to our browser. We should see that our application still works as expected. So I can refresh the page and boom, it's working exactly as it did before. Okay? So now I want you to take notice of the constructor function. Its only purpose is to initialize our state object. Now remember that when we first initialize this, I mentioned that there were two ways to initialize our state. So now we're going to see that alternate way that does not use a constructor function. So let's have a look at it. And we're gonna go outside of my constructor function. And I'm going to say state equals an empty object. And I'll put in their two properties, that is, latitude is null and error message is an empty string. So what you see right here with a constructor function and this state equals something we had written here, totally equivalent to just writing out state dot equals and then the same string, our state initialization. Now I did not put a this dot state here. It's just state by itself. And now these two ways are identical. So I'm going to delete the constructor function entirely because we just don't need it now. Okay, so let's test this. Save this file, and go back to my browser and I'll refresh the page and the application works as it did before. Up above that is it. So I think this way is shorter and it's also cleaner than the way that we did before. But now you understand the mechanisms involved. So quick break and see you in the next section. 36. 36 Passing State As Props: So in this section, we're going to continue to develop our application. Now remember that we've already created a component called hemisphere display. So in this video, I just want to import this hemisphere display into the index.js file. And then down inside the render method. Rather than turning out the latitude right here, I want to show the hemisphere display component instead. So the goal here is not to show the user their latitude. The goal here is to show the user which hemisphere they are on. Okay, so let's do it right at the very top of the index.js file. I'm going to import hemisphere display from hemisphere display. Now remember we already created that component and it's inside the same directory, which is why we use the Dot slash right there. So now down inside of my render method, I'm going to find where we are currently printing out the latitude. And I'm going to remove that. Instead, I'm going to create the hemisphere display component. And when we create this saying, we're going to need to tell the hemisphere display what the latitude of our user is. And then the hemisphere display component figures out whether or not it is north or south. So we have to take our latitude, which remember, is stored inside of our state object and somehow get that value of State, pass it down into the hemisphere display component. So what are we gonna do? Good idea. We're going to use the prop system again. So I'm going to add on a new prompt with a name let to 2D. And then I will assign it a value of this dot state dot latitude. Now we're taking a property from the state on the App component and passing it as a probs down into the hemisphere display. And as you can see, the two systems of prompts and state are far more clear now. I hope you can see that. So we can take state from one component and pass it as props down to the child, in this case the hemisphere display. So now the hemisphere display is linked with the App component. And I know you can remember that anytime we call set state, the component updates itself. And that's going to cause the hemisphere display to be updated as well. Because if, if that latitude property right there changes, then knew latitude value is going to be put into hemisphere display. And then hemisphere display component will be rendered as well like dominoes. So anytime we call set state, that component renders itself. But in addition to the component, it will also render any children that it is showing as well. We'll see some really good examples of this over time. So now let's go to our hemisphere display component. Remember also, anytime that we pass a probs into a functional component, is going to show up as the first argument to that functional component. And we always refer to it as props. So inside of that object there should be a latitude property that contains our users Latitude. Lets see it. So I'm gonna do a console log of props dot latitude. Then save this and let's check out the browser. Okay, my latitude is right here. So now we've got that latitude inside of our hemisphere display component. We're going to start to write some code inside of this component to determine whether it's the northern hemisphere or Southern Hemisphere. Can't wait. But we're gonna take a pause right here before we go onto the next section. I was out for suspense. 37. 37 Ternary Expressions in JSX: So in the last video, we got our latitude down into our hemisphere display component. Now the only other thing that we have to do is help it to figure out which hemisphere the user is in. So we're gonna say that if the latitude is greater than 0, our user must be in the northern hemisphere. And if it's less than 0, that means that our user is in the southern hemisphere. That makes sense. So now, now we're gonna put together a little bit of code to essentially determine the hemisphere. But before we get moving on that, I do want to make, well, we'll deconstruct are prompts a little bit so that we can write a cleaner code. So let me show you what I mean. As you see right here, dow, we passed props as an argument to this component. And then we get the user's current latitude inside of this props by saying props dot latitude right here. Now instead of doing that, we could simply remove that props argument and place a set of curly braces. And then inside of these curly braces, I'll just put our latitude. And then any time that we're going to want to use latitude inside of our component, we can just call it latitude. Instead of saying props dot latitude, you with me. So we get a latitude property inside the props object, thanks to ES 2015 deconstruction syntax. Somebody you don't believe me. So let's test it then. See if it's working as we expect it to. We're going to remove that syntax and just say latitude. And let's save this and flip back over to the browser. And okay, you owe me a penny. It is working as it was before. Alright. So now we might be able to determine which hemisphere that user is in. Now to do that, we're going to use a JavaScript ternary expression. So we're going to say const hemisphere is equal to. And then we put our ternary expression. Now, if the latitude is greater than 0, we will put here a question mark, which means that if that's the case, and then we will return the northern hemisphere follow. So after that, we're going to be able to put a semicolon here, which means that if it is not greater than 0, in this case, we are going to return southern hemisphere. So again, we'll turn to the JavaScript, turned every expression. If this expression right here will be true, then we're going to return northern hemisphere from the overall expression. Otherwise, if Latitude is less than 0, then we will return southern hemisphere instead. And then lastly, we're going to return the result of this entire ternary expression and assign its result to our hemisphere declaration right here. So let's go ahead and remove that console log here. Alright, so now we need to customize how the hemisphere display component is going to look, depending on whether or not it is Northern Hemisphere or southern hemisphere. Now remember here that the ultimate goal is to show text on our browser, right? So I'm going to remove that hard-coded text of hemisphere display and I will replace it with a set of curly braces. Now remember we use those curly braces anytime we want to reference a JavaScript variable. In this case, we're going to put here the hemisphere variable. And it's going to say to us, either northern hemisphere or southern hemisphere, according to the result of that ternary expression. So let's save all this and we'll test to see if it's working. What do you think? Ok. So we're now seeing that I am in the Northern hemisphere. Now to make sure that it's working correctly, I'm going to refresh my application. And I'm going to make sure that the correct hemisphere is being displayed. And what do you know I'm still in the northern hemisphere for me, yes, indeed, that is correct. Now, I could change my geo-location override down here. So I could say that I'm in Sao Paulo, which is in the southern hemisphere. So now if I refresh the page, I should see southern hemisphere. And so now we have that text on our screen. I think we got something here. Now the last thing we have to do is just a little bit of styling inside of our hemisphere display component. Alright, so that was a lot. So I'm going to give you guys a little break and we'll go on to continue. On the other side. 38. 38 Showing Picture: So in that last section, we put together the logic of our project is show the user that they are either on the southern hemisphere or in the Northern Hemisphere. And I know I was pretty strict with use decon to the text. We still don't have an image here, and you probably distinctly remember that we went looking for some images. So let's insert some images into our React project. So I already have the image right here, my computer, and I'm going to just add that picture into our project file. And at the end of this section, I uploaded the finished instance of our application. So you may go and download it yourself. And after downloading the file, you can find the SRC folder inside the project and then you may get the image folder inside the SRC folder. And then you can insert it into your own project. Or you might find some picture on the internet that was somehow related. It just have to take it and put it inside of your projects SRC directory. Alright, so you got that. So now I've installed my image folder on my desktop and inside of it I have two images right here. And we're going to take them and put them inside of my project. So I'm gonna open up my project folder, which is just right here and name it hemisphere. Now you may have installed your project folder somewhere else on your computer, so you just have to find it and I'm trusting you to do that. And then inside of the project, we're just going to open up this SRC folder. Now we're gonna take this image folder and drag it inside the SRC folder, like so. And now we can flip back over to our code editor. And as you can see right here, we have our images inside the image folder, just like we uploaded. Alright, so now remember that the idea here is to use these images inside of our hemisphere display component. So in order to do that, we have to import it into this file. And I'm going to say import in then the name of the picture. And I'll call it Northern pick. And then I'm going to import it from the image folder. And then I'll be able to pick the northern hemisphere dot JPEG inside of it. So I'm now going to do the same for the southern hemisphere picture. So that means I'll just have to copy this line and paste it just underneath, right? So I can call this southern pick. And now this time we're just going to get the southern hemisphere picture. Like so. Okay, so now what we really wanna do here is somehow produced the name of our picture dependant upon our current latitude and then pass this name as a source into an image tag in order to determine the picture that we want to show the user, right? I mean, that makes sense. Okay, so to do that, we just need to make use of a very similar expression, like we used just a couple of videos ago in order to get our text. So let's see, I could say something like Const picture is equals. And then if the latitude is going to be greater than 0, we will return northern pick. Otherwise we will return southern pick Z. And then that will give me either northern BEQ or a value of southern pick like cell. Alright, so now that we wrote both expressions to get our text and now we can reference them into our image tag. So right here inside this div, let's say image. So we're not going to put in a set of double-quotes like so instead, we're going to use that JS interpolation where we are going to refer to some JavaScript variable. Okay? So then inside of here, just going to reference a text that returned from this picture result, either southern pick or northern pick. So to be clear, these two are a little bit of an identical ternary. Now the only difference is the values that get returned. Right? Because in this case we're going to reference this text here inside the JavaScript object. And of course you remember that we are not referencing this string inside of the JavaScript object as a source to an image. Actually, I mean that we're not using any quotes inside of this JavaScript object, right? So I'm going to be able to save this now and flip back over to my application in the browser. And look at that. You can see the Automatic Refresh M and we see the image appear right in front of our eyes. Alright, so that looks good. So it says northern hemisphere. And we'll do a little quick test over here. And I will select these Sao Paulo right here and refresh the page. And we are seeing southern hemisphere Bravo in case you missed it earlier. Sao Paulo is in the southern hemisphere. Show. For now. Let's just say that this is working well enough. Alright, so we're gonna take a little break here. And when we come back, we're going to talk about a little style inaction. 39. 39 Styling The App: At present, our code's not really looking too good. But let me tell you why. First off, we had these two basically duplicated ternary expressions, right? So I think that we could probably do a better job of deciding what text and image name to display rather than putting two expressions in a row. The idea is that we're gonna create a configuration object at the top of the file. So let's do it right now and you'll see what I mean. So the top of the file, I'm going to create a new object called hemisphere config. And this will be an object with two key value pairs inside of it. First will be a northern object, and the other one will be Southern. And of course there'll be an object as well. So now we have to make these keys inside of this object match up perfectly with the strings that we are returning from our hemisphere ternary operations. So we're going to change them as well. So I'm going to delete both of these hemisphere texts right here. So now these two objects are indeed going to tell us exactly what text N1 image name we should use. Its northern will say text. It is Northern Hemisphere. And I'll designate the picture of Northern Hemisphere. And I say Northern peg. So that what we can do is pretty much the same thing for the southern as well. I'll say text is, it is Southern Hemisphere. And I'll give you the picture of the southern pick. Alright, so now that we've got this hemisphere config thing put together, we can now remove these ternary expressions. So to get at either of those objects, sing right here, the text and the picture name. We can reference them back down inside of our component hemisphere config with square brackets. And inside of it I'll put this hemisphere. So so that's going to return object with a text and the picture name inside of this object. So then we can use a little bit of ES 2015 syntax to pull out that text and picture name and then very easily reference those properties inside of our return statement. So that means we are no longer going to have those duplicated ternary operations. So all the different options are very plainly separated right here. Didn't CEDAW and coming into you. So if a person, whoever needs it, come back to this component and update the text or update the picture name. It's going to be really easy for them to do. Inside of my js X I'm going to fix here, remove that hemisphere thing and say text instead. And we are already referencing the picture right there. So, so there's no need to change in. Okay, so let's write in here the alt text. I will say hemisphere picture. Alright, so without a doubt, this is a big improvement to the legibility of this component, yes. And now it looks pretty reasonable. Now, if we flip back over, we're going to see that our components are still working as expected. Alright, so it seems like we don't have a problem, right? Not a care in the world. So now is do some styling. So our app is a little bit different than we wanted it to be. So now we're going to use that. Remember Semantic UI, those class names. And we'll also learn by adding custom styling to our app. So first up, we're going to create a CSS file to customize the background colour. Alright. So inside my SRC directory, I'm just going to create a new CSS file. I'm gonna give it a name. Let's call it hemisphere dot C, S, S, and that's going to indicate it. Anyone else looking at my project that the CSS file is modifying the hemisphere display component. So let's first add a class name to our outside div right here. And I'm gonna give it a class name of hemisphere inside of JavaScript object. As we know, this is referencing the result of this ternary operation right here, right? So that means it's going to return to us either Northern or Southern depending on latitude. And I do that because I want to use different styling for both different situations. So right now I'm going to save this file and go over to Hemisphere CSS and inside of here. But on some styling for the northern and southern hemisphere. So I'm gonna say Northern and side of it I'll say display, flex. Justify content, center. Align items, center, height, 100, vh. Background color. Let's give it some, some of a pinky like color. Ok, so I'm gonna do the same thing for southern hemisphere. I'll copy and paste it. So now I just want to change that color. So this time, I'll give it a go, give it a a pretty color. Full disclosure. I did arrange this color before the lesson so you don't have to know the hex code. Okay, so now I'm going to save this. Now the last thing we'll do is make sure that this CSS file and gets linked up to our project. To do that, I'll go back over to my hemisphere display component. And at the top of the file I'll say import hemisphere dot CSS, like so. So now we're going to import that CSS file into our project. Okay, so let's save it all. And then we should see our updated CSS file inside the browser. Powerful. So now let's change the latitude over a year again to the northern hemisphere. I'm going to select Moscow and refresh the page. And it's working the way that we expected to. So right now, there's still a little bit more styling left to do. Can we quickly do it? I think so. And I am going to find my div right here. So inside this div, I will say another div with the class name of UI raised text container segment. Now I'm gonna take this image and text inside of this div. And then after that, I'm going to wrap this image tag with a div that has the class name of image. And I'm also going to ramp this text with the div, with the class name of UI, teal, bottom attached label. And finally, I'm going to put this text inside a H one tag to make it bigger. Okay, so I know we're going through the CSS a little quickly here, but remember the entire goal of this course is really react in JavaScript, Nazi SS. And I'm also kind of assuming that you understand some of the basics of CSS. Now if you're wondering about this class right here, you might have it look at the semantic UI documentation. How's that for a tip. Alright, so now let's save the file. Okay, it seems pretty good. So let's change the location to northern hemisphere and then refresh the page. Oh, yeah, awesome. So I think this is going to work really well. So let's take a little break here. When we come back the next section, that's one. We're going to make one or two last little changes that, Oh, I'm not going to say they're going to change your life, but they're going to make it a whole lot easier. See you then. 40. 40 Free React Developer Tools: Well, I owe their yard. I didn't see you there. Alright, you came back. Great. I'll be I had a good break because in this video, I'm going to show you the React devtools. Okay, but before I go any further and show you those tools, I just want you to check out one thing. And on the last couple of tutorials, we created this component and it had one element that this div inside, right, the render method, this single Div wrapped the other dip. But what if we want to say, for example, after this div, we want to add H1 tag and say hello. Okay, so let's save this and see if it works. So let's come back to the browser and see that it's not working. What? So if we look into the console, you can see that we have got these errors right here. So let's have a look and see what's happening. So what's happening here is that we've got two top-level tags within the return statement. And react doesn't like that. Can you see that? Yeah. So once you put everything in the return statement in one parent tag, so we can't do this, but by the way, we can get around it. And that's by doing a div tag at the top and then get the closing tag and put it at the end. You follow. So shift these. And now everything is contained within one parent tag. See how it works now. Awesome. So we can't actually add multiple elements, but we can put everything within one single parent tag. Has that. Pretty cool. So now I'm going to delete this whole thing. And now I want to show you some of the React devtools. So I'm just going to zoom into the console right here and you can see it on my toolbar that I have the React tab. Just click on it and you can see our app components. And inside of it here we can see our hemisphere display component. So it's showing the components in my application. And not only does it show the component, but if you click on it, it's going to show you the props and the state of that component. Now you can expand it to see what's inside. So now I want to show you how to download this reactive tool. I hope you weren't clicking around and on your computer and say, hey, I don't have that. So you can use it when you're developing a React tab. So what you wanna do is go to the Chrome web store and search for React devtools. Now it's right here. I have already installed it, but if you click on that, you should see an Add to Chrome button. And you just click on that and then it's going to install it for you. So if you ever need to do then is just right-click the select inspect and then open up your console and then go to react. And it's going to show you the different components in the application. So I think it's really cool tool that you can download. It's really going to help you when you're going to develop React applications. Alright, so that's that. Let's take a break right here and guess what? You come too far to quit. Now, let's move on to the next section. 41. 41 General App Review: Now in this video, I want to very quickly do a review of everything that we've learned inside of this application. Alright, so let's get to it. We first began by talking about the difference between functional component and class-based component. I hope you remember that I said that with class-based components is generally easier to organize our code. Now the reason for that is that if you start to look at this index.js file, it becomes pretty easy to understand what's going on at first glance. So we can open up this file and then instantly see that we have a class called app. It has dates, it has a component did mount method. And it has some optional methods here to decide what content to render. But if you open up our hemisphere display component, understanding what's going on inside of here is a little challenging when you first open it up. And my right. So you see something here called hemisphere config at the top and I don't know about you but I go like, wait, what hemisphere config? What's this saying? That on the other hand, if we would have a couple of helper functions inside this file, it will be a little bit more confusing. First, decide which one is our component. As you can see here, it seems a little challenging to decide what's going on. Okay, so I had to scroll all the way down to the bottom of the file to finally see the component inside here. And if we wanted to, we could definitely take that component out and move it up to the top like so. And we'd probably not run into any issues. So we could put the functional component at the chop. But you're going to find that in a lot of standards, people generally want to put the config objects and the helper functions at the top and then the functional components at the bottom. It's, you know, kind of a community convention to put the component at the bottom. So right now I'm going to remove this. And the next thing that we learned about class-based components is that they can make use of this state system, which makes it easier to handle user input. And the next thing we learned was that with a class-based components, we can make use of lifecycle methods. We then spoke about some big rules of class-based components. So we said that we have to define a render method that's going to return sum js X. And right here we've got the render method and we return sum js X. Now we are going to learn more about state. And right now we can only use this state with class-based components, even though technically there are some exceptions to this rule. And then hopefully you learned that state is going to be a java script object that's going to contain some amount of data that is relevant to a very particular component like this. All right, so next up we had to initialize our state. When our component was created. We first did that by using the constraint function. But then as we saw later on, the constructor function, it wasn't really necessary for initializing our state. And that we can actually initialize this state as an instance property, as you see right here. So even though we're not defining constructor here, bible gets it and puts it inside the constructor. And instead of making us do it, it's actually the constructor is going to exist anyway. So why not put it to good use? Then finally, we learned an important thing that the only way to update our state is by calling the set state function. And then we saw an example of that inside of our getCurrentPosition call back right here. And we also went over the fact that when we call set state, it would not overwrite, delete or change our error message. And likewise for the latitude, this would only modify the latitude property and it would not modify or change the error message. And then the last big topic that we spoke about was the component lifecycle method. We said that the constructor function is the first function that gets called inside of a component. We can use it for data loading or for some kind of long running operation. But community convention is to stick data loading requests into the component did mount method. The component did mount lifecycle method gets called exactly one time when our content first shows up on the screen. And then after that, anytime that the component gets updated by calling set state, their component did update lifecycle method will be called. So we make use of that lifecycle method anytime that we need to fetch data or redo something every time that a component gets updated. And finally, there was the component will unmount life cycle method. And we said that it's essentially used for doing cleanup. And there's not a whole lot of other uses for it besides that. Now hopefully you will remember that there are other lifecycle methods, but these are the ones that are most used and the other one's rarely. So we're not really going to talk about those right now because we learned about I'm might start using them for scenarios where they're really not going to help you out much. So it's much better to get used to the lifecycle methods that we have right here. So that's a whole lot, but it is everything that we've covered in this section. So hey, good job. You're sticking with it. We got more to get to. So why you take a break right here, have some rest, even a hen, I'm gonna meet you in the next section. 42. 42 App Overview: All right, so this is the video that we are going to start talking about handling user events and fetching data from an API. And we're going to build an application to better understand those topics. So first off, we still don't have a lot of experience handling users events, like clicking on something or typing on something or dragging something round on the screen, whatever. So what we're going to focus on right now is pertaining to this application that we're going to build, right? And that is, let's focus on how React deals with user event. So far we've been making use of static data, but in a real React application, we're very frequently attempting to fetch some data from an outside API or from some server and then pull that data out of some database maybe. So we'll learn how that we can correctly fetch data from inside the React application. So far we haven't really been building any lists of data. We've just been shown kind of individual elements and components one at a time, but we haven't been really rendering lists. So we are going to get a really good idea of how to show a list of records. Okay, so let's take a look at a mock-up of the application that we're going to build. Essentially what we wanna do is show a text input at the very top center of the screen. Users should then be able to type in some text here like cars or flowers, plants, any term. And then after they type in the term and then press enter, we are going to do a request to an outside API that is going to find images that match whatever term that user has just entered. Yeah. So if the user types flowers and then press enter, I would want to somehow get a list of images of flowers and then show them on the screen to that user. Now, yeah, there's not gonna be a lot of styling right now. We're just going to focus on the handling of user typing, searching for images and then showing that list of data. Okay? Alright, so that's the idea. Let's generate our app. I'm going to say Create React app, and I'm simply going to call this image list. And then while it's installing, let's just take a break right here, and I'll see you in the next one. 43. 43 Component Design: Great, so in the last section we generated a new project. And I'm going to go into that folder now. And we called it what image list with CD, image list. And then I'm going to say npm start and it will run my reacts server. So now let's open up our code editor inside that new image list directory. And I'm going to select the image list right here. Now before writing any code, I do wanna do a quick overview on how we're going to generally approach the design of our project. So let's go back to our mockup. And what we're gonna do here is somehow we're going to get the user feedback and receiving a user interactions anytime that the user types a new search term into that search bar at the top of our application. So we need to somehow get that text and then do a search with that text, right? So once we get that search term, we'll need to somehow use that term to make requests to an outside API to get our list of images. Now all we can do is throw the search term. And this outside API is going to give us back a list of images that match the search term. Then finally, we're going to take that list of images and render them as a list on the screen. And by doing all this, we are going to learn how we handle search terms, userInput, and fetching data. Now we could build this entire application, which is one component. That wouldn't be much fun, is it? But in general, we would like to break our applications into multiple separate components just to get a little bit more code reuse for the future. Alright, so let's break this thing up in a separate components and here's what we're gonna do. We're gonna make a search input component. And anytime that user type something into there, the search input is going to handle that typing event will also have a second component called the image list. Any image list will take a list of images and just render them out as a list on the screen. And we're going to have an app component. As always. You're always probably going to end up with an app component is going to be at the very top or the most root component of your application. So our component hierarchy is going to look like this. Great. So the app is going to show an instance of the search input and an instance of the image list. Alright, let's break it right here. Go over that and I'll see you on the other side. 44. 44 Handling Forms: Alright, so now in this video we're going to start putting this application together. Now in that last section, we started our image list project and my new react project running on the screen, and we also started our code editor. Now, make sure that you have those open now if you took an extended break, because now I'm going to go inside of my code editor and I'm going to open up that SRC directory. So I'm going to highlight all of those, and I'm going to delete them entirely. And then inside my SRC folder, I'm going to make an index.js file. And then we'll put together some, some of that same boilerplate that we put together inside the index js file. So I'll say import, React from React, import react Dom, From react, Dom. And then generally inside of here we would create an app component. But this time, we're gonna do things a little bit differently. Told you learn some. So in total, we're going to end up with a decent number of files inside this SRC directory. So rather than just throwing all of these different files directly into the SRC directory, we are going to try to impose a little bit more structure in this project. Now to do that, inside my SRC folder, I'm going to make a new folder called component. And we're going to end up creating all of the different components that we create inside of that folder instead of just the SRC folder. So now this includes the app component as well. All right, so we've got that. Now, rather than defining the App component inside of our index.js file, we will make a separate file inside the components directory called app dot j s. Now, this is a very common pattern, even though we've been putting our app components directly in the index.js file before. But now we're going to end up having a lot of setup code inside of the index dot js file besides the App component that we've had before. So rather than putting a ton of set of code inside of the index.js file. And at the same time, defining an app component. That's gonna make a little bit of a mess, right? So we can kind of break these two things down to make it more understandable by putting the app component into its own separate file in the components directory. So now with all that in mind inside of this new components folder, I'm going to make a file called app dot JS. And then inside there, we can very quickly put together some scaffolding for this component and then import it back into index.js to show it on the screen. So I'll do an import, React from React. And then I'll make a functional component. And this component will return a div with text Hello World. And I'll do an export default app just like so. And then back inside of index.js. And I'm going to import that new component. So I'll say import App from. Now. Remember before with every, every statement we did for a fine like that, we just said dot slash and then the file name. But this time around, uh, get that app file, we would say in the current directory to dot slash and look in the components folder and then get the file. So in other words, I would say dot slash components, app, like that. All right, so now we've got the reference to the App component that we can show it on the screen with a react Dom render. So as a first argument, I will say app and then I will pass a reference to our div with ID route. And that is shown inside the index.html file as the second argument. All right, so now I'm going to save this file. Flip back over to our browser and I should be able to see the text that we wrote. Yeah, I don't think we're gonna have a problem with this. Everything seems to be working well. Now then let's make our search input component inside of the components folder. As I mentioned earlier, a goal of this component is to show our search input at the top of our application. So inside of search input, I'll do my import, React from React. And then I'm going to make a class based component. Now, I know that I need to make a class-based component because I have to use state at some point, the handle, the user input, where the user is actually typing into the search bar, right? So I'm going to say class search, input extends React component. Then inside here, I'm going to define my render function and put in a return keyword. And then inside of a div, I will say search input. And at the bottom we'll do an export default search input. Now finally, I want to show this inside of the app component. So I'm gonna go back over to my app.js file. And I'm going to import the search input at the top. And then rather than showing the text here, I'm going to show search input. Come on, let's flip back over to the browser. And I see search input. Okay, so that's good. All right, so we know that we don't want the text search input inside here, right? We just need a text input. So back-end side of the search input. I'm going to replace the text inside of there with a little bit of j, x, you guessed it. And I will say div, because I know this is going to be a multi-line statement. So inside of here I'm going to place a form that's going to contain my input. And I'll say that the input type is text. And now I can save this. And let's go back and look at our browser. And sure enough, there it is. But of course it needs a little bit of styling. So in the next section, we're going to hook up that semantic uy. And that way we'll be able to add a little style in note, right? So let's take a break here. I'll see you on the other side and just a second. 45. 45 Styling The App: Yes, indeed, we are here in this section that we are going to add just a couple of class names to get a little better style in. And what we have right now. We're gonna do it quickly because I don't want to spend too much time on it, but you can spend as much time as you like. Alright, so we are going to use the Semantic UI as I like to do, and I would like you to do to get the hang of it. So let's flip back over to our browser and search for semantic CDN. And it's right here. So I'll click on that link. Press command or control F and search for semantic dot, min, dot CSS. Alright, so copy that link and go back inside of our code editor. We're going to open index HTML file. And we're going to create a link tag and put it inside this link tag. Like so. I'll write. So remember to close this tag and save and close the file. Great. Now you might be able to recognize some of the steps. But here we are. We're ready to add some styling. So I'm going to find my search input component. And then the outside div right here. I'm going to give it a class name of UI segment. And then I will give the Form class name. You I form. Now under this form element, I will open up another div with a class name field. And again inside of it, I will put another div with the class name UI, massive icon input. And I'm going to cut my input and then place it inside of this div. And I wanna give my input a placeholder search. Just like this. Now finally, just underneath the input, I'm going to add an icon and give it a class name of search icon, like so. And the last ouch that I wanna do is inside of the app ab.js file. This div, which is wrapping our search input component. I, will give it a class name of u i container. And I want to give it a little bit of a margin at the top. So I'll say margin, top 30 pixels. Now I can just save this file and flip back to the browser, see what it looks like. Looks pretty good. Alright, so that's enough for now. Let's take a break right here. 46. 46 Creating Event Handlers: So read back. So in this section we're going to add some functionality to our userInput. If a user's starts to type something, we want to react to the user typing, right? So I'm gonna define a new method at the top of the class. And I'm going to call this on input change, like so. So now I want to make sure that this method right here gets called anytime someone changes the text inside of our input. So in order to make sure that we're going to create an event handler called onchange right here. And then I'll pass it a reference to the on input change method that we just created. And I'll say this dot on input changed. And I want to highlight 1 here when we pass a method to a prompts like this called on input change, we do not put a set of parentheses at the end of it. If you were to put a set of parentheses on it, because I know what you're thinking. It means that on input change is going to be automatically called whenever a component is rendered. So we don't want to call on input change. When our component is rendered, you follow. Instead, we want to call this function at some point in time in the future. So in other words, rather than calling this function with a set of parentheses, we're going to leave the parentheses and we're going to pass a reference to this function, to the input element so that the input can call that function at some point in time. Alright, so now what that means is anytime that someone types in something into the input, our callback is going to be invoked. And then this callback will be run with one argument being passed to it automatically. And we usually refer to that object as the event object. So this is pretty much normal JavaScript objects that will contain a bunch of information about the event that has just occurred. In this case, the user types something. All right? Now there's usually just one property inside of this entire object that we care about. And that is the event dot target dot value property. So this right here will contain the text at the user just added to our input. So let's try to console log that and see what we get. So I'll save this and then flip back over. And as I add text, you will see that in my console over here, whatever text I enter gets console logged out. If I delete the text inside my input, that Console shows nothing. So pretty clearly anytime that we type into the input, and then the oninput change method is going to be called automatically. And then we will be given whatever is typed into that input. Now, I'm sure a couple of quick questions have brewed up here, so let me see if I can address them first off, you will indeed notice that we passed this callback function to a per obs on the input called onchange is a very special property name and different events are going to be wired to different property names. In this case, we want to get a callback when we want to change this text input. So we use the property name onchange. There are several other property names for wiring up callbacks or event handlers like onsubmit or onclick. Of course, we might have probably seen those event handlers at some point in time. But the last thing that I want to mention about event handlers here is the name of the method that I put together that you see right here is indeed a community convention. So usually it's going to always be on. And then the name of the element that we are assigning to this callback, in this case an input. And finally, the event that we are watching for, which is now the change event. So it simply on input change. And anyone who reads this is going to understand when this function gets called, it gets called on input being changed. That makes sense, right? Cool. Now, let me tell you too that in some cases you may see a little variation on this, like handle input change, which means this is a function that is responsible for handling the input being changed. Personally, I like to use the on, and I think that it's slightly more popular, but to me it's more clear. But actually the name of the callback does not really make too much of a difference. We can actually call this sing whatever we want. And as long as we're going to change this one with the same name. I'm just telling you what the community conventions are so that, you know, nobody calls you out. But this right here must be on change. If it's not, our function will not be called at any time. Alright, so that is how to handle event handlers. So now we've got some value coming back from our user. Why don't we have a break right here and we will continue what to do with it in the next section. See you there. 47. 47 Controlled vs Uncontrolled Elements: Yes, indeed. So in the last couple of videos, I believe we've been talking about event handlers in React. All we have to do is find some element that we want to watch for. And then add a prompts to it. Then we'll pass that prop, a callback. And then that call back will be invoked at anytime that the event occurs. So besides that, you probably see some different syntax for this callback right here. And it's something like that, that we can, we can pass an arrow function to this prompts instead of just referencing the method like this. So let me show you how to do them. So I'm going to remove this and I will put this function right here and then pass the event object as an argument to it. And we will say again, console log event target value. And I'm just going to remove this method right here. Okay, so now we can save it and go back to our browser and test it. I'm going to type something and you can see that it is working just as it was before. Okay, so now we're going to continue talking about event handlers. So inside of our search input component, we have created an uncontrolled form element. In particular, this input right here is an uncontrolled form element k H. Now in general, we are as React developers, we prefer to work with controlled components. Perhaps even just the way you are. You like to work with controlled components. So in this video, we're going to refactor our search input from an uncontrolled element into a controlled element. So first we're going to do it, and then after that, I'm going to tell you exactly what the difference between the two of them are and why we would prefer controlled element. All right, so let's get to it. So inside my search input component, at the top of my class, I'm going to initialize a state object. And I'm gonna say state is an object that has a single property that we will refer to as entry. And this is going to be an empty string. And inside of here, I will say this dot set state entry is going to be the event target value. Okay? So right now we are initializing our state. And it has a single property called entry that starts off as an empty string. You see where we're going with this, right? And then every single time a user types inside that input, we're going to update our state. So we're going to update that entry property with what ever the current value coming from the input is. And then as a final step on the input, I'm going to say a new prompt called value will be equal to this dot state dot entry. Alright, so I'm going to save this file. Flip back over to the browser and we're going to see that our components still work the same way as it did before, just the way we want them to. Perfect. So let's type something. Yeah. So you know, it seems like we don't have any problems. Ok, so now through this, you might have some questions bubbling up to the surface like, wait a minute, why are we using state? Why are we updating state whenever we change the input and I don't know why are we passing something called value back into the input? Well, don't worry about that. In the next section, we're going to talk about all of that. And we're going to discuss exactly what the differences are between uncontrolled and controlled elements are. So take a break right here, give you brain arrest. I'll see you on the other side. 48. 48 Why Controlled Elements : Here we are. This is what the other side looks like. In this video, I'm going to tell you what's going on with a code that we just wrote in the previous lecture that I'm going to tell you exactly what the differences are between an uncontrolled and a controlled environment. So first, I'm going to show you a flowchart to explain what's going on with that code inside of our component. So the first thing that happens is when the user types in that input and instantly our callback gets invoked. One, we're passing two on charge right here. Then inside that callback, we pull the current value of the input or whatever the user just typed in. And then we update our state on our component by calling set state with that new value. So now this state entry is going to contain whatever the user just typed into that input. Remember, anytime that we call set state, the component is going to automatically render itself. So the render method right here, it gets called a second time, the instant that user types something in there. Now when the component renders, we'll take that value of that this state entry right here, and we assign it to the value prop of the input. The value prop right there is going to essentially overwrite whatever text is already inside of the input. So now let me just demonstrate that to you pretty easily. So I'll change it to some random text. Save it, and I'll flip back over to the browser and you'll see that my text input right here now has all of whatever that was that I just typed in. So whatever we assigned to that value prop, is what the input is going to show. We take whatever this string is inside this dot state dot entry and then push it and to that input value. And then we show it in the input on our browser. So this entire series of flow is controlled element with the refactor that we just did. And we had an uncontrolled element. Now let's talk about exactly what the difference is between the two and why we prefer controlled elements. So let's pull up another quick diagram here. Now this is a diagram of the code before we refactored it to be a controlled component. So let's first consider the older version of the code. On the left hand side, I've got a diagram of what we called the react. This is essentially all of our components, all of our classes. And then on the right-hand side is the HTML world. And this is essentially all of the HTML that is showing up inside of the application and displaying some information to the user. Now with the old version of our code, how would you answer? If I asked you what's the value of the input right? Now, you see with the older version of our code, the only way that we could somehow figure out what that value of our input was at any instant in time, was to reach into the DOM to find that input element and then pull the value out of it. That was the only way that we could answer that question. So we had to reach into the DOM and pull out the value. Well, it was technically a time when our React component understood what the value of the input was. During all the periods in time. The source of data inside our application was inside of our HTML document, and it was not inside of our React component. And that is the most critical part to understand. We don't like to store information inside of our HTML elements. Instead, we want to centralize all of the information that we have inside of our React component. So we're not going to somehow store data inside the DOM. So let's have a look at the same diagram. But after we refactor it to be controlled. And now if I ask you the value of the input, you don't have to go over to the DOM. Instead, we can look directly at our React component. We can look at this date object and see my component has an entry of hello world. So does that mean? It means that the value of my input must be hello world. So we will not be going into the DOM and finding the current value of the input. We're always going to just make use of our React component. That's the difference between a controlled and uncontrolled component. So what's the best thing about this approach and what makes it so easy? Now, before I show it to you, let's change this value back to this state entry. So let's say for example, if I ever wanted to render my search input with the, I don't know a default value. So now when my component first renders the input, it will be rendered with the value of a or whatever. Right? So let's see it. Yeah, it's there. And I didn't change it and refresh and it's right there again. So that's easy to do. Yeah. Now the other thing that we can very easily do is manipulate the, whatever the user is typing in. For example, let's say that we want to force this text input to always have capitalised values inside of it no matter what the user types. So to do that, we would find right here where we get the callback for the onchange. And we would say to uppercase. And we're going to take that value and we're going to force it to be uppercase. So I'll save this. So now when I type in here, I am forced to enter capitalize letters. So it's very easy when you start using controlled components doing self-diagnosis. Yeah. It's okay. I think that our bash you over the head about controlled inputs. I think you'll be able to use them properly. So let's change it back to what it was before. Now we don't want to have a default value and we don't want to have forced uppercase text. So now let's take a break right here and we will continue in the next video. See you there. 49. 49 Understanding ‘this’ Key Word In JS: All right, so in that last section we talked about controlled and uncontrolled element. And now I'll react components and know what the user types in the input. Now that you know all that, we wanna make sure that if the user presses on the Enter key after entering some, whatever the search entry might be. We're going to want to somehow trigger a search for some images and then show those images on the screen. So if I go back here and type in flowers and press Enter on my keyboard, I want to somehow trigger research. What is that somehow seems you'll notice that when I press Enter, it looks like the entire page refreshes and our search entry disappears. So present you're seeing the default behavior of a form element. Remember, we have four element right here. So the first thing that we're going to want to do is disable that default behavior. And we don't want the entire page to refresh automatically in a time that the user presses enter. So to handle this, we're going to find our form tag right here. And I'm going to add an event handler to it under the name on submit. Then I'll reference a callback method inside of here called this dot on form submit. So then after that, I'll be able to put on my event handler up here. So this is going to be called with an event object. And I do not want the form to attempt to submit itself and refresh the page. So I will to prevent that behavior by calling event dot prevent default, just like so. So now if we flip back over to the browser and enter some text and press Enter. Well, look at that. No longer does the page refresh. So we've now got some callback here. And that's going to be invoked whenever the user type something in and presses enter. As a quick exercise, let's just, let's just make sure that we can console log out the current value of the input when the user presses enter and tries to submit the form this dot state dot entry. Now I can flip back over and I'll enter in some text. Hit enter. Now when I do it, I see an error message right here, right do you? Yeah. Alright. So this is going to lead us into some kind of interesting JavaScript territory. So right now, I want to start to figure out exactly why we're seeing this error message, okay? Your message and the reason for it is going to be the absolute most common error messages that you will see in just about every react project that you're ever going to work on. Without a doubt, you're going to see this error message. You know what, it's not even an exaggeration to say all the time. So let's first examine the message itself and then we can get a better idea the root cause of the issue. So the message here says cannot read property state of undefined. Now might not sound so clear to you, but actually it wants to say something like, I cannot access a property state on the value undefined. So let me give you an example. Inside of my JavaScript console. As you know, undefined is a value inside of JavaScript. In fact, if you've ever tried to access a property on undefined, such as undefined state, we're going to get the same error message that we just saw back over there. Cannot read property state of undefined. So this error message right here is essentially telling us we're trying to reference an undefined state. But as you can see with our code over here, it says this dot state undefined. So the root issue here is that JavaScript for some crazy reason things that inside of this on form submit function, this is not equal to our instance of the search input class. Instead, it thinks that this is equal to the value undefined. And that's the issue right there. So here's a diagram of our instance. So the search input that is created anytime we render a search input to the screen, the search input as a couple of different properties such as state, render on form, submit. Any code that we write inside of the search input. We are referencing the, this keyword back to the class itself. So when we say this, we're saying, give us a reference to the instance of search input that we are writing code inside of. Then we can use that to get direct access to our state, render or form submit properties. So for example, I can say this dot state, and it'll give me access to the state object that belongs to this particular instance of the search input. And we've already done that several times inside of our render method. So here is this dot on form submit. And in our case we can't reference this line of code to the instance of search input class. So we have to somehow bind this. To our search input class. And of course, just like anything else, there are many different ways to solve this. So what I'm gonna do is I'll show you a couple. There'll be your choice. So C, So the first way to solve this, we can define our constructor function inside of our class. So let's go ahead and define it. So I'll solve this by binding the, this method inside the constructor. And to do that, I'm going to say this dot on form submit equals this dot on form submit and bind this. So when we bind a function, it's going to produce a new version of that function. Okay, so this right here creates a new function that's going to always have the correct value of this. And the value of this will be equal to our instance of the search input. So that all we have to do is take that new function and overwrite the existing kinda broken function. Alright? So let's go ahead and check it, see its working. So this is the highly recommended way of solving this problem and you're going to see it. What did I say earlier? Like all the time? Well, frequently, at the very least. Alright, so also what I mentioned before is it's only one way to solve the problem. So let's remove this constructor function and have a look at a second way. So the second way we can solve it is to turn the function right here that we are assigning two on form submit into an arrow function instead. Now, I'm sure you're aware that arrow functions with ES 2015 are always going to lead to a broken value of this. Yet one of the special features of arrow functions is that they automatically bind the value of this for all the code inside the function. So we can replace this default implementation right here with this usual syntax that we've been using so far with an arrow function instead. The only difference is that this time around, rather than assigning an object, we're assigning an arrow function. So the arrow function is going to automatically makes sure that the value of this is always equal to our search input. So let's have a look quickly. Let's save this and let's try running the code that back over to my browser. And I will type something inside here, and then I'll just hit Enter. I'll Ri, we don't have any errors. All right, so that's what I wanted to show you. That's it for right now. Two ways in which we can solve this error. So I think that's enough for right now. We're gonna take a little break right now and we will come back and move on. And our next section, I'll see you on the other side. 50. 50 Communicating Child to Parent: So now when we type something here and press enter, we've got our search entry right here. Yeah. Now we know that if the user enters some amount of tax, whatever it is in its center, we're going to want to initiate an API request. And we intend to go find some images that are managing whatever we enter as text here. Yeah. So the first thing we're going to need to think about is where we go into right, some of that code to actually do that API request. Then after that, we're gonna talk about a service to fetch some images. So when I look at this search input component, Wow, I think that the only purpose of the search input is to allow a user to type in some input, right? And then submitted by hitting enter. Just now really the search inputs job to take this entry and then use it to make an API request or defined some images for that matter. Instead, I would argue that it's the job of the App component, right? For this search input, rather than doing any API requests, I think that we need to somehow take the search entry and pass it back up to the App component. And then the app component can be the one in charge of actually making an API request and somehow getting that list of images. So in this section we are going to figure out how we can somehow get that search entry from our search input back up and into that app component. So this is definitely going to be a new thing for us to learn here. At this point. We've really only learn how to communicate between components through the prop system. And remember, the prop system only allows us to pass information from the parent component down to a child. We can only pass information from the App component down to search input through props. But we can use a little trick. Alright, so here's what we're gonna do. We're going to turn the App component into a class-based component. And then inside of it, we're going to define a callback method called on search submit. And then whenever the app component decides to show our search input, it's going to pass that callback method as a props down to the search input. In the search input is going to call that callback. Anytime that the user submits are form with whatever search term the user's entered. Alright? So lot of theory. We'll take a quick break and then we'll come back and in the next section, we'll start refactoring our app component. See you there. 51. 51 Invoking Callbacks In Children: So in that last section, we spoke about how we're going to communicate information from the search input to the app. So step one is to refactor or app into a class-based component. Now I know that we've already learned about refactoring a functional component over to a class-based component. So I'm just gonna take this and I'll replace it with class APP extends, react.com. And then inside there are going to define render function. And I'll put a curly brace on the other side of it, like so. Alright, so now we can define a callback function on the app. I'm going to give it a name of on search submit. And I'm going to say that this thing gets called with our search entry. Alright, so right now, let's just console log that entry and makes sure that it shows up inside the app. So we can now take this method and pass it down to the search input as a prompts. So I'll say to my props on search submit and pass it to our on search submit method. And of course, I gave the same name to my probs. And this callback method right here. And I'm going to call this call back with the same props name inside of my search input component. And I want to run this function each time that the search input component is submitted. So the onsubmit event handler is going to run this function. Alright, then inside the form to submit rather than console log out our entry. We instead want to call the on search submit, which was passed in as props to this component. Yeah, you with me. Good. Now remember that anytime we pass a prompts down into a component that we're creating, we refer to that prompts with this name. So inside of this search input, to reference that prompts, we would say this dot props, dot on search, submit. Terrific, we're here, but there's one little issue that I want to bring up throughout this course. We have made use of props, but always in a functional component. Have you noticed that this is the first time that we're gonna make use of prompts inside of a class based component. One little difference between the two. When we're in a class-based component, we reference the props object with this dot props. That's it. That's the only difference. Cool. Not a lot to remember. Now, to get access to the callback that was passed from the app down to our search input. We would reference this dot props dot on search submit. Then I'll call that. And when I call, it'll pass in this state entry as an argument like so that it, so we're now saying that whenever a user submits the form, we're going to run on form submit. Here. We take the event and prevent the default behavior that would cause the page to refresh itself. And then we look at our prop subject and we call the function that was passed into this thing as the on search submit. And then we invoke that function with this dot state dot entry. So this is the function that ultimately is going to be invoked. And for right now, we're just going to console log out some value. Alright, that's good. So let's test this. So I'll put in some text here and hit enter. Now, just notice that it was console from the file. Alright, so we're not done yet. So we're gonna take a break and I'll see you in the next one. 52. 52 Fetching Data: So in this section we're going to start working on loading up some images into our React application. So let's get the general idea. Our application is going to be running inside of a user's browser, right? So once a enter a search term and they hit enter, we're going to make an ajax request over to an API, the pixabay API. And if we send them a request to get back a list of images with some keywords like flowers, cats, or dogs, whatever. The pixabay API will send us back a list of records. So far so good. We can then take that on and use it to render a list of images on the screen. So let's take a look at the pixabay.com and get a better idea of how works. So I'll just open up a new browser jab and navigate to pixabay.com. Alright, so the first thing that we need to do is sign up Pixabay. So to do it, just click on the link, thus Hand Side right here. And then you can enter in some information so that you can create a new account. I'm not going to sign up course right now because I already have a Pixabay account, but I'll wait for you to do that so you can pause the video and create a new account for yourself and I'll see you when you're done. Alright? So once you logged into their service, we can now go to API documentation. And when we scroll down to the bottom, you'll click on that API link and you'll be prompted to this developer page. Just click on the green. Get Started link. Okay, so this page is the pixabay API documentation page. You may look and learn more about the pixabay API if you want to, but we're going to just pass over it quickly. So scroll down a little bit more as end right here under the search image section, we can see the pixabay URL and then the parameters underneath of it. So we're going to use some of them to fetch data from Pixabay. For instance. We're going to use this API key and it's required. So this is the personal API key provided by Pixabay and we have to use it inside of our code. So just underneath it, we can see this q parameter. And this is going to help us to search our input entry. As you scroll down a little bit more, there's an example of the pixabay URL that is retrieving photos of yellow flowers. As I just mentioned, the q parameter right here represents the search term. And in this case the search term happens to be yellow flowers. And this is the unique API key that belongs to us. So have a closer look at it. It is just identical with what we have right here. So we can use it, just changing this search term right here with whatever the user enters in our search input. So we're going to use it to fetch some images. But right now let's take a little break can. In the next section, we're going to learn how to fetch some data from outside services. We're going to speak specifically about how we're going to make a network request from our React application. So let's pause it right here and come back in the next section. 53. 53 Axios vs Fetch: And here we are. So in that last section, we looked up the pixabay documentation for searching photos on the pixabay API piece of cake. Right? Now we need to discuss how we're going to make a request from inside of a React application. In particular, the one that we've been building. So here's a diagram. The first thing that I want you to understand is that it's not going to be the job of the React library itself to make the request over to that Pixabay API, right? React as a library is only about showing HTML to our users or showing content to our users in handling user interaction. So that means making an Ajax request to get some information is going to be the job of some separate piece of code inside of our app. And we've got a couple of different options to use inside of our app. So let's have a look at the options. I'm going to show you two of the most commonly used options in React applications so that you'll come across at first. All right, so these are two different options. Scos is a third party packages that can be very easily installed into a react project using NPM. And we eventually are going to be using MCOs. Now the other option is the fetch function. Unlike axioms, this is not a separate package. It is a singular function that is built into almost all modern browsers. So with fetch, we don't have to install any third party packages, which means that our final application size or the amount of code that we have to send down to a user's browser is going to be slightly smaller, making use of fetch over axioms. However, axiom is more basic and lower level function to be able to obtain our data that we're looking for. So I'll put it another way. If you use fetch instead of axioms, you're probably going to end up having to write a lot of code that's already written for you and axial OS. So if you want to, you could absolutely use fetch. But in this instance, I would recommend SEOs because it makes the developer's experience a whole lot easier. Besides the fact that we're going to be using axial synthesis project. So I just wanted you to be aware of that. Alright, it might look more appealing because it's smaller, but come on, let's get with the program. So in order to do that, let's install axioms as a third party package. And then we're going to make use of it to make a request over to the pixabay API. So to install actually, oh, so I'm just going to flip over to my code editor and find my running project right here. And now I'm going to stop the project with Control C. And then I'll say npm install dash, dash, save Exynos. Alright, so it's going to be a little while. Alright, so let's get our server backup with npm start. And now I'm going to go back to my app file and I'm going to import Exynos from. Now we can make use of axioms to make a request over to the pics bait API. So let's take a break right here. See in the next section. 54. 54 Async Await Function: Alright, so we did a lot of prep. And the last section we installed axial sin nor project. We're not going to use it to make a request over on Pixabay and then console log out a list of images that we want to show the user. So I'm gonna flip back over to my Pixabay documentation. And I see all the documentation here on how we search for photos. Were gonna get type network request to this URL. Now in order to make a search for a list of photos matching with this Q parameter, I'm going to change this static yellow flowers data to the search entry. As a reminder, please check that the API key is this one. If they're both the same, then you don't have to do anything. If it's not this one, just take this one and then put it inside of this URL. Okay, so I think pixabay is doing that instead of us. All right, so let's copy this URL and flip back to our code editor. Now in order to make a request with axial. Inside of the on search submit method, we will call as ACOs dot get. And then this getter function is going to take our URL and paste it inside of here. Alright, so now we have our access key right here. And we saw that key just a moment ago when we were looking at documentation. And remember it's required to be able to fetch data from the pixabay API. And then there's one last thing we have to do. And hopefully you'll notice that when we make a request to this URL, we have to include a Q parameter. And I think it's an abbreviation of query. So this Q parameter is going to contain the search query that we want to use instead of yellow flowers like it was before. So in our case, we want to add in a parameter of q, and we want to set its value equal to the entry that was passed into the on search submit function as an argument. And because we don't always want to be fetching data for yellow flowers. We do want it to be fetched data of whatever the user types in the input. So in order to ensure that's what happens, I'm going to remove these quotes. And I'm going to use ES 2015 back ticks. And instead of these pretty yellow flowers, I'll just put in our search entry. I will say dollar sign. Right after that, put a set of curly braces and inside of it, I'll put the entry parameter like so. Now if you're seeing these back ticks for the first time, in our case, it will actually help us to add dynamic data into this string. Is going to add the search entry into the line, into this particular line of the request. Or in other words, this Q parameter will be equal to my entry. Makes sense. So if we're searching for cars, that's going to be car. Alright. So this right here is going to make a request over to the pixabay API. And it will make a search for certain number of photos on Pixabay. And it's going to send back some photos that are found. So let's just go ahead and save the file and tested it in the browser real quick. All right, so now I'm going to open my Network tab over here. And I'll just clear the request log. So I'm just going to type in some search terms here, like flowers at her and see the requests appear. Now I can select it and then go to the preview tab right here. And I should be able to see some results for the data that was fetched. So let's open up results. And it's gonna show me the first 20 images that were fetched from the pixabay API matching the search term flowers. I'll right, so we've got our request to get the data. Now we're going to start to think about how we're going to get the data out of the request and eventually render a list of images onto the screen of the user. But we're going to have a little, quick little discussion about how we're gonna do this first. Alright, so that's what's gonna be happening in, in a time sequence of events, right? So in chronological order, we first start with rendering our application. The App component is going to render itself onetime without any images. Remember when we first load our application, we will have no images. So it's only when a user enters a search term and then hits Enter. Then the on search submit method gets called and we make an actual request over to Pixabay API. When we make that request over to Pixabay, it's going to take some amount of time to get a response from that API. So we're essentially going to be waiting for a response. And then when we finally get a response, then we want to use that image data to update what our app component is showing. And in order to get our app component to re-render, we're going to have to call the set state function. And then setting our images as state. And the app component will cause the App component to re-render. And then we can use that as an opportunity to show the list of images. So remember when we first start out f, we had said earlier that we would make a new component called image list. And that would be responsible for showing the list of images. Right now, let's just print out the number of images that were fetch because I don't want this particular video to be so long. So I'm going to find my own search submit function. And I'm going to mark it with the async keyword like so. Putting the async keyword in front of the function name. That'll allow us to use the async await syntax inside this function. And now in front of the network request that we make will be using axes right there. I'm going to put an await keyword. And then in front of that, I'm going to assign a new variable called response. So now I have const response equals a weight, acts IOS, and then that entire request. Okay, so I can console log out the response in order to show the result. All right, so before I tell you anything more about this syntax right here, let's save the file and then run it so that we can see the result. I'll just put in a search term of cats and hit Enter and I see the result of that object right here. So this object contains all of the images that we're searching for, right? So when I click on it and open the data, we can see the array that contains 20 different images, which is cats, right? So let's console log out to see it more clearly. Will say response dot data, dot Hits. Now let's look at the results again. I'll type cats and hit Enter. Alright, here we go. We can see the array of cats again. Good. So now let's talk about this, this async await keyword. So when we want to use the async syntax, we just put that async keyword in front of the method name. And then we're going to find whatever is returning or whatever is taking some time to resolve. In our case, it's a network request with vaccines dot get. And we put the await keyword in front of that. And then whatever gets returned from this entire statement right here, we will assign it to some variable, in our case this response variable. And then we can freely work with that variable later on. All right, so now we're able to get our list of images in here. So we're gonna take a break and we will continue in the next section. 55. 55 Setting The State: Wait, what? We back. So we are okay, so where we're NLS action, we learn how to take the response from Pixabay API. And then we logged out the list of images that we got from that the API. So now what we want to have happen is after we get that response from the API, then we set it on our component state, which will then cause our component to re-render and then we can print it out on the screen. Right now remember, we just want to print out the number of images that we fetched. So to add n state to my app component, I need to first initialize my state at the top of this class. I will say state equals an object, like so. So now we have to decide on a property name for this state, and I'll just call it images. Because we're going to store an array of some of these images inside of this state object. Then I'm going to put an empty array in here because we are going to use the map function that's built into the array object in JavaScript. Ok, so now instead of the console log, I'm going to update my state with this dot set state. I'll put in here some images. And it's going to be a response, data hits, like so. So now after making a request over to Pixabay API, we have the response. We pull out the list of images and we set it on our state object. And that will cause our component to rerender. So then the very last thing to do is down here underneath the search input, print out the number of images that we fetch. So I'll just say we have and open up curly braces and then this state images length. Now here's another reason to default are images property to be an array. Because if we had defaulted it to be null when we try to access this statement images at length, we would've seen an error message and it would say cannot access property length of null. And it would be right. So why don't we go ahead and save this and I'll just flip back over to the browser and do a test. All right, so right now I'll see the default because we have no images, 0, bupkis. So I'm going to enter flowers in here and hit enter and we get an error message bump of a bar. It says set state is not a function. So this error message, doesn't it seem familiar? Where have you seen it before? So it is an identical error message to one that we saw before. But it seems to be complaining that our value of this or some property on this that we were trying to reference is not as it appears. So why don't we go back to the code editor and console log the this in here. Console log this. So I'll save. And I'll do another search for flowers. Okay, so now we can see the console log and you'll notice here that the value of this is on search submit. So in order to reach the state object of our app component, we want it to be equal to the instance of our app component. So this is the exact same problem that we went over a couple of videos ago. So in order to fix this, what do we need? We need to use one of those two strategies that we had done previously. We can set up a constructor function and bind the on search submit method. Or we could set up an on search submit as an arrow function. Doing, now you remember. So either one of those gonna work out just fine. So why don't we just fix it by assigning it as an arrow function. Now before I do, I'm going to remove this console log here. We're going to turn that function into an arrow function. And this time it's going to be a lightly different because we have this async keyword in here. So I'll first begin by removing this async keyword. Then we're going to turn this thing into an arrow function, just as we did previously. And I'm gonna put a sink as a keyword right before that argument list, just like so. Okay, so we'll say this. Flip back over to the browser and enter dogs K, c. Now we have 20 wonderful images of dogs. So that's it. That is data fetching. Inside of a React application. It's very fetching. Don't you agree? All right, doggy. Go fetch. So why don't we pause here, get it, get it, pause. And I want to see you in the next video in just a minute. 56. 56 Rendering A List of Components: And we are back. So we've got a list of images. Now we're going to start to discuss how we're going to create this image list component. And then render out a list of images that are going to show up on the screen. So let's get started. Inside the components directory, I'm going to make a new file called The image list dot js. And inside of here, I'll say import, React from React. And I'll define image list as a functional component. Then I'm going to return a div that says my images. And I'll do an export default of image list at the bottom, like so. Next up we're going to import this thing inside of App component. So I'll flip back to the App component. And here at the top I'm going to import the image list component that we just created. And I'm going to show this component inside of the apps render method. So we don't need to have this thing show up anymore. So I'm going to replace it with the image list component. And then I'll save the file and go to the browser. Yep, sure enough says my images. So the next thing we need to do somehow is communicate our list of images that we fetched down to the image list component. So we're gonna do that communication from a parent down to a child component using the prop system. So it means I'm going to define a new prompt on the image list called images. And I'm going to pass all the images that we have inside of our state object. So I'm gonna say this dot state images. And then I will go back to the image list file and I will put the prompts objects as an argument to here. So let's console log it to quickly test it. So what my application first re-renders, I get the empty array because, well, we don't have any images yet. If i enter flowers. Oh, there's my 20 images just like that. Alright, so let's now show a list of images inside of our browser. So just remove that console log and then I'm gonna do a map over prompts that images. Just like so. So I'm going to put an arrow function into this thing. And this inner arrow function is going to be called with each image from our list of images. Okay, so now we need to use that image object is somehow return an image tag that has the appropriate source, like this. Okay, so now this image argument right here is going to be exactly identical to some of those different objects that we console logged out inside of our application. So we can look at the definition of each of these different images. And as you can see right here, all images have links to different URLs. So inside of here we want the web format URL, this one. So go back inside of our image list component is specify the image URL that we want to show on the screen. And we will reference Image.all web format, you are L. And then that's going to return that really long URL. Excellent, excellent. So finally, we're going to take this tag that gets returned from the map statement and assign it to the variable images like so. Now this image is variable is going to contain all of the images that get returned from the array that we fetched. Pretty cool. Inside the div, I am going to remove this text and I will reference that image variable. Okay, so let's save all this and go back over to our browser. I'll do a search for flowers. And now we have a list of images. And if you've noticed that on our console, we got a little warning message. So why don't we pause right here and we're going to fix it up in the next section. 57. 57 Implementing The Key Values In List: Hey there. Alright, so this is really coming together. In the last section, we got our list of images to display in the browser. But you might have noticed that we got a little warning and our console. So actually this is a warning, it's not an error message and it says each child should have a unique key prop. And then it also goes on to say the source of this warning is the image list component. So let's talk about what this key thing is and why we're supposed to use it. So right now, we have a list of images. We have rendered this list of images, and we've shown it in the DOM and it's visible on the screen. And then maybe at some point in time our user comes along and decides it, well, they need to add one more picture to list. To do so, we tell React to rerender our application and update our list of images with the incoming new picture. So React is going to take the list of images that we now have rendered as js X. And it looks at each one of them, which is currently present in the DOM. So reactor is going to look at each one of the images and compare the current list to the new one. And it takes the new picture that we have added inside the new list and renders it inside the DOM. So it actually append some new element to the DOM and skips the existing ones. Not while React is doing this, it is also comparing the existing contents key with the newly rendered contents key. And by this method reacted Terman's the new content and then renders it inside the DOM. And as you guessed, each one of the key values has to be unique. So C, that's the purpose of the key. Now, it's purely a performance consideration. And it's really going to help react to update the lists to be more precise and more performance oriented. And no, we cannot apply the key for every element. It's only for lists of elements. And then one last little question. How can we determine the different keys for each image? That's a really good question. So let's look at the console and I'm going to open up this image object. And it has a lot of properties inside of it. As you might have seen. We have an ID right here. So in this case, this ID is unique for every element of a list. So we're going to use it as a key value. Alright, so now let's go back over to our image list component. So heres where we are rendering our list of items. And we want to find the root j Sx tag that is being returned from our map statement. So in this case, it's the image tag. And I'm going to add a key prop and give it an ID out of this image object. So I'm gonna say Image.all DID. I think I've mentioned a second ago that we're going to add the key property to the root tag that we're returning inside and the map statement. What I mean to say is that if we had div that wrapped the image tag, like so, in this case we would add this key property to that div instead of an image. So we only have to assign the key root element that we are returning from the list of records. So let's save this and flip back over to the browser. And I'm going to enter cars and see what happens. All right, so we don't have any warning message right now. I say debts 6S. So quick break right here and we'll continue in the next video. 58. 58 What We Have Learned From The App : I'll write my friends, we've finished up this image list application. Now I know it seems a bit, I don't know, ugly. But I'm leaving the style and part of the application to you and you can improve it as you see fit. Go to town. I'm serious. We are going to learn a lot of stuff about reacts in the next sections though. So I want you to feel good about what you've got. Now, of course, it took a fair amount of time, but I think you'll agree with me that we learned a heck of a lot about reactant as advocation, right? So before we move on, I do want to do a quick overview of some of the really big things that we covered in this app. So we're going to first start off with these search input components. We learned more about event handlers. Now remember the event handler, This one in particular inside the input tag and form tag, we had passed in a callback function. And then whenever that tag emits that event, that callback function will be called. And of course, one issue that we ran into when this callback function was called, the value of this inside of them. But you also saw the errors we ran into inside the App component. And this is of course an issue that you're gonna run into just about, well with every react project that you work on. And remember the rule to keep in mind is anytime that you have a call back function, just to be safe, you can use this arrow syntax like this. And that's going to automatically bind this function and make sure that it always has the appropriate value of this inside of this function. Oh yes. So the next thing that we covered with our search input component was with the prop system. We only communicate from a parent down to a child. And that eventually ends up being an issue because we wanted to communicate the search entry from the search input up to the parent component of the App component in this case. So in order to communicate from a child who apparent, we pass a callback from the parent to the child. And then the child will call that callback identical system to what we're doing these event handlers down here. Okay? And then the next issue that we ran into was inside of our image list ab.js file. We learned a little bit more about how to render a list of images. So the key thing to keep in mind here is the map function from JavaScript. Every time that you want to render a list, you're probably going to be reaching for that map function. And then after we rendered our list, we saw little warning. We fixed it by defining a key on the root element that we are rendering into that list. So we should use a key that has a value that is consistent and unchanging for each record between renders. And so if you're ever working with data that has an ID property, and you're always going to use the ID of each record as the key property. Wow, that was a lot. So I hope you enjoyed learning this application and building in. So right now all of a little bit of a break and we'll continue in the next section because we've got some exciting stuff in store. 59. 59 Initializing The Project: And here we go. Now so far we've been using React to show only one page and the browser, right? Most websites guess what? They have several pages. So how do we implement different pages in react? So React applications are single-page applications where only one HTML file is sent down to the browser from the server. So what happens when we do wanna see different pages, like a homepage and an About page or a contact page and all that stuff. So from the start, if we are a browser and we make a request to the homepage, we will make that initial request to the server and then we get a response, which is the index.html page that goes to the browser. Now React is going to look at this thing right here and say, okay, I know you want the homepage, so I'm going to load up the home component. So app.js is just sitting at the top, and that is the root component. And that will always be showing in the browser. But React is going to inject the home component inside the app js, right? So we see that home component when we go to forward slash home. And this is what the React routers are doing. Okay? Now, how do we make the next request inside this component? For instance, we have a nav bar in our app and we want to click a link on it and then go to an About page. How does that work? Alright, let's have a look. We make that request, but it doesn't go to the server. Instead, the React router catches requests and doesn't send them to the server. It's going to serve up the About component and it injects it into the app JS. So that's what the React router does. It stops requests from going to the server because we only need that index.html file every time. So there'll be no point in sending it over and over and over again. So instead it just injects the component it needs to. So this is the main point of the React router. All right, so to see how we work with the React router, let's create a new project. And I'm gonna flip back over my editor and open up my project directory. And I'm going to say Create React app. And I will give it a name of React router, just like that. And I'm going to end this right here will take a bit of a break. And in the next video, we're going to put together our application. Stay tuned. 60. 60 The React Router: All right, so here we go. In the last section, we created our React application. And so now let's start up the application. And I'm going to go inside of my project directory and I will say npm start. And then I'm going to open up my code editor. And inside of it I am going to open up our newly created React application, React router. Okay, so the last thing for setting up our app, we're going to add Semantic UI library to our app. And that's what we usually do, right? So I'm going to open up a new browser, tap and navigate to Semantic UI C, d, n. And we're going to search for semantic dot, min dot, CSS and a right there. I am going to copy this link and put it inside of our index.html file. So I'm going to open up my index.html file inside the public folder. And I will put a link tag after this link element and paste it inside of this H ref attribute. And again, remember to close that link. Okay, so now I'm going to open up my SRC folder. And now we've got all the default files inside the source folder right here. And of course I'm going to delete all of them except the app.js and index.js file. Because we already learned how to set up a React application and we've done it a couple of times already. So let's quickly put together some code to better understand this React Router. So I'll get rid of all this stuff inside this div right here. And I will say app inside of it. And I'll get rid of this import statement. And let's save it and look at the browser to see if it's working. Shall Nava, it seems everything's working okay. Now I'd like to demonstrate the React router for you. To do that. I'm just going to need a few different pages. So I'm going to very quickly mock up three components. One for the About page, one for the homepage and one for a contact page. And this third page is gonna have some really basic content. So we'll have a few different components and I don't want to create them all in this directory right here. So instead I'll create a new folder and I will put my components inside of it. And we're gonna call it components like so. And I'm going to use this kind of structure. Because the more your applications grow, you will need this kind of structure. So you may use different folders for your components, will just keep all of them inside here. Now we'll create a new file, and I'm just going to call it home J f. Alright, so this is going to be a functional component because we, well, we won't be using states. I need to import the React library from React. And then down below I'm going to create a functional component. And I will say const home is equal to and arrow function. And inside that function, we're going to return sum j, x. Okay, so in here we'll do a div. And this is going to have a class of u. I raised very padded text container segment. This is a semantic UI CSS class. And it's going to keep our content with a central column on the page. And I'm also going to give it an inline style of margin, top 80 pixel. And inside of this div, I'll do H RI tag. And this is going to have a class name, UI header. And it's gonna say home inside of it. Now underneath of it, I'll just do a p tag. And then I'm gonna put some text inside of here. Let's export to function down here. I'll say export, default, home. Cool. So we've done that component. Now let's save it. So now I'm going to copy all of that and I'm going to paste it inside another file that I created called about js, like so. And then I'm going to select this home. And I'm gonna change all those to about. All right? Okay, so if you don't know how to select multiple elements, I can show you. I selected this one and then I just hit Command or Control D, Just like this. Alright, love shortcuts. So now we have an about component, same as the home component. We're just changing the text right here in the H three and the name of the function and the thing we export. But everything else can remain the same. So save all that and we'll do one more new file. We'll call this contact JS. And pay sad and again, select this and change all the occurrences of home to contact. Like so. Yeah, that's it. So we now have three components here, and these are the three components that represent our three pages in the application. So if someone goes to forward slash, we will load the home component. If someone says forward slash about, we will load the about component. Yeah. So we have all those down, but we need to link them. Now to do this, I'm gonna create a navbar and then set up the React router. So I'm gonna create another component here. And this is going to be called navbar JS. Alright? So again, this component doesn't need state, so we'll just make it a functional component. And at the top a here I will say import, React from React. And then underneath it, I will create the function component. Const navbar, set that equal to an arrow function. And inside here again, we'll just need to return some JS. Alright? So I'm gonna say nav as the surrounding element. And this is going to have a class of UI raised, very padded segment. And it's going to create some kind of wrapper. And inside here, I'm going to put an anchor tag and I'll give it a class of UI, teal inverted segment. Just basically you just kind of title in the navigation. Yeah. So I'm gonna take away the H ref for now because we don't need that here. And I will call it. Yes, I'm gonna change it to Gloria. You'll see. So then just underneath of it, I will put a div that has the class name of UI, right? Floated header. And inside here we'll put a button and give it the class name of u i button. And inside of this button, I will put an anchor tag again. And I will say H ref, forward slash. And then inside here, I'm going to say Home. So this button will now navigate us to the homepage. Now I'm going to copy this line and multiply it two times. And I will change this to forward slash about. And this is well, change the next to contact. So. All right, so now we just need to export this nav bar. So I will say export default and then the nav bar. Awesome. So we've created that nav bar and now I want to import that into the root component right here. So we can nest it inside the root component and it displays on all pages. So I'm just going to import the navbar from dot forward slash and the components folder forward slash nav bar. So now we can just nest that right in here by saying nav bar, like so. So if we save this and go to the browser, we should be able to see that nav bar at the top of the screen. We have Gloria here, and we have these three links as well. Excellent. So now I want to set up the router so that when we click on one of these and we go to the forward slash about, we actually want to see the About component. Or if we go to a forward slash contact, we want to be able to see the contact component. So right now even though we're just going to be able to see the URLs, we will not get the content on the screen. So that's why we need to install right now the React router. So I will open up my terminal and I am going to open up a new tab in our project dictionary by saying CD.. React Router. And I'm gonna say npm install React router DOM. Please make sure that you are in the correct directory. In this case, react router is my folder. And there is another alternative. You can always stop. You're currently running reacts server by hitting Control C and then load up the npm install React router DOM package, and then start your server again. Alright, so now we are installing the React router DOM, and that is the package that allows us to set up the router inside of this application. So now let's import it in order to use it in our app. Now we're going to import a series of things. I'm going to say import and open up some curly braces. First thing we'll import is the browser router, like so. And this is going to be from React router Dom. Now we need to use it inside this applications so that we can use the routes. So the way we do that is by surrounding our entire application inside the JS eggs with a browser router hat. Like that. Now we can add routes. So we want our routes to be inside this application just loaded in below the nav bar. So right here, this is where we can set them up. And to do so, we will need to import the route parameter down here. And let's set these routes up here. So I'll set up the first route and I will say route. And the path is going to be equal to forward slash. And then a component that we want to load in for this is going to be the home component. So the React router doesn't know this home component, so we need to import it into this file. So we'll say import home from. And it's going to be dot forward slash components folder. Then the home component. And there we have a route setup for the home component. So first we set up the browser router and wrapped the whole application. So this application can use routes. And then we're saying that we want the routes to be loaded in below the nav bar. So grab the component for this route and load it in right here. And we say whenever a user goes to this route forward slash, then the React router is going to load up that home component. So if we save all this and go to the browser and check out the homepage, then we can see we get the home component. But what happens if we go to the About page? We get the home component. And if we go to the contact page, we get the OEM component again. Alright, so of course we don't want that. We're going to want to load up the different routes for the different contents. So in order to do that, I'm going to just flip back over to my app component. And I'm going to copy this line and paste it just underneath. And in this case a path is going to be forward slash about. And this will load up that about component. And of course we can do the same for the contact page. And I say contact component, like so. Now let's import these two components as well. So I'm just going to copy this and paste it twice. And this is going to be about component and this one will be contact. Okay, so that's good. Now let's save it and test it. So if we go to the homepage, we get this. If we go to the About page, we get home and about pages. And if we go to contact, we get home and contact. So it's kind of strange behavior. Why do you reckon that we're getting a home content on every single URL? Okay? I'll let you know. The way the React router works is that it sees that we're still in a subset route of home. Okay? So if you look up at the URL bar right here, we still have present, right in this slash. And because it's present, the React router saying, okay, it's a subset of this and it shows both components on the browser. Alright, so if we change this to the forward slash home inside the app.js and do the same thing for the Navbar component and save it. Okay, now let's go to the contact page and we don't get that anymore because home is not part of this URL. So let's go to the About page and homepage. Okay, so it looks like it's working now. So the reason we were getting the home component loaded in on the about and a Contact pages because we were saying for it to look for any routes that is just forward slash and then load it in. So now the contact hasn't forward slash within it, so it holds the homepage. I know it's a little bit weird behavior, but this is the default behavior of the React router. So that means the way that we get around that is either by doing what we just did by changing the link to home. I can understand that you might not want to do that. So we'll change it back to just the forward slash there. And we'll change this back to just four slash as well. And then the way that we can get around this is by saying, okay, make this an exact match. So the route has to be the exact path equal to forward slash. Now of course, forward slash about is not exactly the same as forward slash. So that means it won't load in the home component. So if we save this and flip back over to our browser, let's get to the contact page and about page and then the homepage. Okay, that's it. So we've set this up and we're getting the right components. But there is one issue here. Yeah, I wanted it. Notice what happens very quickly on the page. When we click on a link, it reloads the component and then sends it to the server. So we don't really want that, right. We don't need to make a request to the server every time and reload the page. We want to receive back the same index.html file. So before we get into all of that, why don't we take a break here and we'll look at how to dissect that in the next video. 61. 61 Link and Nav Links: Alright, so we set up this application with the React router. We're getting the right component loaded on the page whenever we go to one of these URLs. But I know that you notice now every time I click on a link, it's sending off a request to the server to get that index.html page back. We can tell that because we get a little refresh up here when we click on a link. Now if you wanted to, you could open up the dev tools and you could check that request out in the Network tab. But the question is, how do we prevent this behavior? Because we don't want to send a request to the index page over and over and over again, right? We already have it. We don't need to change it. We don't need to make that request. In fact, we just want to load in the component. So the way we do that is very, very simple. And I'm going to go where we have the nav bar. And instead of using anchor tags directly, we're just going to use something that is built into the React router. So let's import this. Now. First of all, at the top I will say import, and then we're going to import a couple of things. So open up curly braces and then we're going to import the link and then the nav link. Now, I'll explain the difference between these two in a minute. But for now let's just say from React Router. So we want to change these things right here from anchor tags directly to link tags. So let's just go ahead and change this to a link and close that link off as well. Now the way we do this is by adding on a to property. And this is going to be where we want this link to go, just like the H ref attribute. So we want this to be two forward slash. And now let's do the same for this thing. So I'll say link to about and then close off the link tag. Then finally I will say link to forward slash contact. And close that off. All right, so now we've changed all those anchor tags to links. And if we go to the browser, and it still looks the same, but have no fear. I am here. If we inspect this in the dev tools, then you're going to see it actually outputs an anchor tag. So what does this link tag DO differently than the anchor tag that we've already put in. There was a difference. All right, I'll tell you the link tag over here that we imported from the React router DOM prevents the default action from occurring when we click on one of these anchor tags. So as you know, like we did a prevent default on a form submission to prevent the page being reloaded. And the link tag behind the scenes is doing something similar. Says something like, okay, prevent that default action of going out and making a request to a server. Well, we don't want that to happen anymore. Instead, I'm going to tell the React router DOM to take over and just load in the correct component based on the URL. Okay? Okay. So if I click on home, then we get the home component. But you'll notice we didn't refresh the page or send another request. So I'm gonna click on about and then contact. See, now it's looking a lot smoother and quicker because we're not making that request anymore. That's fantastic. We always should use the link tag, even if we want to link to a page rather than anchor tags. So when I said that, we also imported this thing right here, the nav link. So let's see the difference. So if I type in nav link instead to a link, and I'll do the same thing for contact. And I'll just leave the top one as it is for now. Okay, so let's save this and go back to our browser. Now if I go to one of these, for example, about and it works is same. But if I inspect this element, now we have this class applied to the element because of the nav link class of active. Right here. We didn't get that with a link tag. If I click on home, you can see that we don't get that on the home link right here, but we do when we use the nav link. When we use a nav link to output an anchor tag, we get this active class. So this is very useful if we want to start applying some different styles to the active links, right? So now, well, I think we've made it about as clear as mud, how to use the link in nav link to, link to different pages or components. I'm just kidding. You can go back and rewind and play around with it all you want. You'll be able to see if you haven't already. So what we're gonna do, we're gonna take a little break and we will come back in the next section. 62. 62 Programmatic Redirects: Okay, so here we are. This must be the next section. So now I'd like to show you in this video how to programmatically redirect the user to another URL. So first of all, let's go to our contact component right here. And now I want to show you something which I think is pretty cool. So if we take in the props right here, we have automatically added to the props. What we now know is the router information. And that's because this is one of the components that the router loads up by any of these things right here, the router attaches some extra information to the props object. So let me show you that right now. If we console log this prompts object, then we're going to see that extra information about the router on the props object. And let's save it. And we can view this in a console over here. So now if we go to the contact page, now, do you see it right here? These are the prompts objects, and we can see that we have the extra information already added to the props. So the router has done that automatically. So we have a history right here, and we have all of these different methods and properties. We have the location. So it says right here the current path name. Now it also says that we're on the contact page, which is exactly where we are. So for now we want to redirect the user to a different page. For example, if we are at the homepage and then after we wait, let's say two seconds, then we are redirected somewhere, right? Maybe to the about page or the contact page. So how do you do that? Well, in order to do that, what we need to do is use this history object on the props object. So if you look down here, we have this push thing right here. So the history in itself keeps track of our history obviously. And if we push a route to that history, then it's going to add another location to the history and essentially pushes to that location. So I'm gonna show you how we do this. So instead of logging to the console, I'm going to set a timeout. And then this is going to wait for about two seconds. And then after two seconds it's going to fire this function. So we will say that props dot History, dot push. Good. Now remember it was on that history object. Then the push method right here. So right here it says we can take an argument which is the path. So the path is going to be forward slash about and it's going to wait two seconds. So how do we make it two seconds right here, I'll just write 2 thousand milliseconds. Okay, yeah, so that looks right. Let us save all this NCBI works. So let's click on the contact page and wait for two seconds. And as you see after two seconds it