Transcripts
1. Welcome to React.js for beginners: Welcome to react one-to-one with your host, Caleb, tall lean. In this course, what we're going to be doing is creating a randomized Star Wars character generator using an API. So every time you click this button, it's going to find a new character for you using an API. You're going to get hands-on experience with component's state API requests, updating your state, working with props. You're going to create a brand new application using the React create new app command. And then we're going to replace it with our own called Star Wars. The project at the end of this course is really, really fun. I demoed it before, I'll demo it again. It is simply a random character generator. And this works with an API. Hi, my name's Caleb telling and I've been teaching people how to code since 2012. I've taught over 350 thousand students how to code worldwide. And today I'm going to be teaching you react. Now why do I think you should learn react? I think you should learn react because it is a high demand skill that a lot of web development agencies and freelancers need to know. And so pretty much any job out there is going to want you to learn react. And this is a really good introduction into how React works. A few prerequisites, you do need to know HTML. You should know a little bit of CSS and you should be quite familiar with JavaScript before taking this course. React uses advanced JavaScript. And that means you need to know advanced JavaScript if you're ready to start building a fun random character generator using an API, then this is the course for you. Look no further and I will see you hopefully in that first lesson.
2. What is React.js?: Before we get started, let's take a quick peek at what React JS is. So if you head on over to react JS.org, you can actually see they have tutorials and they've all sorts of stuff on here. It's actually really, really good site and I suggest, and I highly recommend that you get a little bit familiar with it over your time learning React. But what is react? React is a JavaScript library for building user interfaces. Okay, That's somewhat helpful. That's a pretty good statement about what React is. But what React actually is is, you know, how a website is made out of HTML, CSS, and JavaScript, and then usually some back-end language for data processing. React allows you to build interactive websites. So HTML and CSS can't do that. It can't be super interactive, but React can make it reactive, can make it fun and engaging, and that's what reacts does. Now React comes with an interesting syntax called js X. It's not just JavaScript, it looks like JavaScript mixed with some crazy version of HTML. And we're going to get into that in just a little bit. But basically, what you need to know in this particular lesson is React simply allows you to create very dynamic pages. Like if I were to click this, it just it's instant, it snaps its, it's faster than using jQuery is faster than using other libraries. And it looks a lot like this. Again, we will talk about the syntax of it in a little bit just because it looks a little bit bizarre at the moment. But we'll get into that in a little bit. So there's no task for you for this particular lesson. Up next, we're going to install Node and make sure that it is installed on your computer.
3. Installing Node.js and npm: Alright, let's go ahead and download and installed Node. We need the same called Node.js. So let's type into Google download Node JS, and this is going to bring us to NodeJS.org slash downloads. So if it brings you to the homepage, you can just click on the download. The download icon here or the, I guess not icon, it's a button. Go with LTS, that's long-term support. That means they're not trying new things. I means that 14 or node 16 is going to be supported for a long period of time. The odd number is usually are not supported and Ubunto works the same way to. So whenever you can go with LTS, long-term support, it's going to do what you expect it to do. For me. I already have node 15 installed on my computer, so I'm going to be using 15, but node 14 is going to work just the same for you. So let's go to 14 and it's going to download this. If it doesn't, you can always just go to downloads up here and pick either the Windows Installer, Mac OS installer, or the source code which you can download and install manually using Linux. Typically you just click one of these though. So if you're on Mac, click Mac OS installer, if you're on Windows, click the Windows installer, go ahead and install that, run through the installation steps. And when you're done, come on back and I'm going to show you how you can make sure that node is installed properly on your computer. All right, so hopefully you have no JS installed on your computer. What we need to do now is we need to make sure that we're running the right version of Node and that it is installed and the right version of NPM, which is Node Package Manager, which we'll talk more about all this stuff and we'll get some hands-on experience with a very, very soon. So I'm on Mac and I opened up a program called Terminal. If you're on Windows, you can open up CMD. If you're on Linux, you probably have a program called bash or you are already familiar with command line program that you like better than bash. So for me I'm on Mac, so I'm gonna open up terminal, which is this program here. And I'm simply going to type N ODE dash v, node dash v. And this says node dash version, and this gives me version ten. So that's not right. I have Node Version Manager installed terminus going to quickly switch that to note version 15. There we go. I switch that over to node 15. And if I do no dash v, here we go, I'm using node 15. So I want to make sure that I'm using node 15 or for you use Node 14 or the longterm support. So if you're watching this a couple of years from recording date, and we're on node 16 or node 18, and it's LTS. Make sure you download and install the LTS version. Next up we need to type npm dash v. And this is going to show me my node version, my Node Package Manager version. And this one doesn't matter as much. We just need to make sure that it is actually installed in that it doesn't give you some error saying that command doesn't exist. If no dash v works for you and npm dash v works for you, you are ready to move on to the next lesson. So your task for this lesson is to go to node js.org and download either from the Windows Installer, Mac installer or the source code. If you're on Linux, install it. Open up your command line program, whether that's Bash command terminal, any other command line program type node dash v or npm dash three or not or but, take both of them type node dash v and npm dash v. If you see that there is a version in there and the node version looks like a right version three to you. For me, this is node 15, your should say node 14 or 16 or some LTS version, long-term support version. If that's working for you, you have successfully completed your task. And let's head on over to the next lesson.
4. Starting a new project: Alright, let's go ahead and start a new project. So I'm using VS Code and this comes with a terminal that I can use inside of it. So if I go to View and then go to where is terminal? Terminal, it shows this little terminal for me. And so I'm in a folder called react 101. And just to make this a touch bigger, Alright, so I'm just in a folder here called react 101. And what we want to do is we wanna make sure React is installed. So you can type in npm install dash g, that's global. Create React app. And what this is going to do is go ahead and install Create React app globally on your computer. So you can see that that was very fast for me. It might take a little bit longer for you. Now what we can do is type np x, Create, React app and then give it a name. And I'm gonna give it a name of my dash app. You're going to see as this building, as this is starting to create the project, it creates a folder called my dash app on the left. So I'm just going to give this a little bit of time to do its thing. It's simply downloading and installing all the things that react needs. It's going to get all the JavaScript libraries that needs. It's going to install all of them. It's going to apparently install Yarn so that it can download things using yarn instead of npm. It's just a little bit faster. It's another package manager. Really, we don't need to worry about that. I'm pretty sure this is going to remove yarn. Yeah, did it removed yarn? And then it says all sorts of things that we can pretty much ignore at this point. We can either work with this or we can ignore it. So it says, created git commit. Cool, cool. Success. Created my app at, and then my app folder location. Inside the directory you can run several commands. We suggest that you begin by typing CD myapp. And what this is going to do is change my working directory in my terminal. Or if you're on Windows, you can type DIR if you're on a Unix like system, Mac OS or Linux, for example, and you can type PWD. You should be inside of the my app folder in your terminal. Just because you open it over here, doesn't mean it's opened in your terminal. So just to clarify, now, if we open up my app on the left, we have a bunch of stuff in here. We have node modules, public, SRC, gitignore package.json, readme dot AMD, yarn dot loc. We're going to not touch a lot of those things because that gets into, into several different subjects outside of the world of React. But for this course, we're going to be working mostly in the SRC directory. So let's go ahead and just get this up and running. So now that I've CDD into my app in my terminal and I can do ls dash a. And that shows me all my files in here. Or I can type DIR If I were on Windows. And you should see all these files in here. Once you see these files, especially the node modules folder in here, you can type npm start. And what this is going to do is build the React app and launch it in your browser automatically. And so this is going to ask me for permission. It's gonna say, hey, can I access Google Chrome? I'm going to say yep, again, and just wait for this to load. It's just gonna take a quick second. And here we go. We have a React app up and running on our computer. Now if your browser does not open for you automatically, you can always go to HTTP colon slash slash local host colon 3 thousand, and that goes to localhost port 3 thousand. Now if for some reason that doesn't work for you, you can always go to 127 dots. No.1, colon 3 thousand. It's the exact same thing. Just some computers are configured slightly differently, so there's two different ways to do that. Their next, let's go ahead and talk about some reacts syntax. But for the time being, your task is going to be basically getting this up and running. Make sure you have run certain commands here. So you have run npm install dash g for global, Create React app. Then type np x Create React app, my dash app. And that's going to create all these folders and all this structure for you. And then you CD into that particular folder. So mine was called my dash app, so I just CDD into that folder. I changed my directory into that folder. And then you type npm start. It should launch a browser for you. Go to localhost port 3 thousand and tells you right up here, local host port 3 thousand. And it will show you your React app, but you have to make sure that npm start is running in order for that to work. Once you're done that, let's head on over to the next lesson.
5. React.js syntax: Okay, let's take a look at react syntax. So what I'm gonna do is just make this a touch smaller, just move that down. I'm gonna go into my SRC, my source folder, and go into app.js. And this looks really, really, really bizarre. Gonna make this even just a touch smaller there because we don't need the terminal for this lesson. And this looks really bizarre. So if you're used to just writing vanilla JavaScript, you might have never even seen an import command before. This might be brand new to you. And if that is brand new to you, that's okay. We will talk about that and we'll get a little bit of experience with that as well. We see a function which looks just like a regular function in JavaScript and a return statement with an opening parenthesis. And if we go down here, there's a closing parentheses that matches it. You can see this line highlights up here. And then we have a div. Now this looks weird because we're not using a string, we're not using a template literal in JavaScript. We are using straight HTML. And in fact, this actually gets a little bit weirder just because we're not just using HTML, we're using this thing called JS Acts, which is basically XHTML. So it's HTML, similar to normal HTML5, but it's written inside of our JavaScript, which is pretty nuts to C. So if this is your first time looking at this and you're like, whoa, I either don't like this or I have no idea what's going on bare with me for a little bit. It gets a lot easier and it gets pretty nice to work with down the road. So let's just read through this line by line. We have a div. And notice that it's not class. Class is an actual name in JavaScript, it's a keyword, we can't use that, so we use class name is equal to app. We see the same thing here and here we have an image. It's SRC is, well, this looks a little bit bizarre. So instead of a file, lake logo dot SVG, we've imported logo dot SVG. So let's go and open this file. It's just a regular SVG file. We've imported that as a variable called Logo. Whenever we use one of these and react, we say the attribute name or the property name is equal to. And instead of having quotation marks on either side, like we usually do in HTML, we have curly brackets and opening curly bracket and a closing curly bracket. And then we put that variable name inside of it. And what that's going to do is inject this logo directly into this image source. Again, we have class name, not class, class name, it's a js X attribute. And we can see that here as soon as I hover over this, it says as a DJ ESX attributes and regular alt tags and class names, yada, yada, paragraph with some code, standard HTML. We have a link in here, class name, but the HRF is the same, the target is the same, the rail is the same and it says learn React. One thing to note though, is in your return statement, notice that we're using a bracket or a parenthesis at the beginning and the end here. We also wrap everything inside of a div. So you can't just type regular text. You actually need to have an HTML element with more code inside of it. And so that is one little quirk with React. But if I just make sure that my server is running here, looks like it is. It's on localhost 3 thousand. This is what we're going to see. Now to change this, let's say I wanted to change this line here. All I have to do is change this text. And then when I save it, and this is a really nice thing, it automatically reloads my browser for me. So by time I get back to Chrome or Firefox or Safari, it has changed for me, it's alive, updated. I don't have to hit Refresh, which is really nice because sometimes that's that gets pretty annoying if you do that enough in a day. All I have to do is type. And you see that a live changed right in front of me. And it's almost instance, so I'm in hit Save and then I'm gonna move over to Chrome real fast. And you're gonna be able to see it actually changed though. It was very, very quick, but we did see it change. So what I'm gonna do is just do that. You can see that every time I saved my app.js, that node is updating as well. So it says it's compiling every time I hit save, compiling, compiling, compiling. So your task for this lesson is I want you to open up your app.js, make sure your server is running and just change a little bit of text. Don't worry about the logo or anything advanced. Just worry about changing the text. And in your browser, it should change the text for you once you have that up and running, let's head on over to the next lesson.
6. Importing components: All right, let's take a look at importing components. And we can import all sorts of things. They don't just necessarily have to be a component. I will talk more about components in a little bit. But if we take a look at our app.js, which lives in our source folder. We're saying import logo. That's the name that we're using from dot slash logos. So this is saying the same folder that we're currently in, same folder that app.js is in, Logo dot SVG. Let's go ahead and open this file, logo dot SVG. And we can see that it is a standard SVG. It just important for us and makes it available to us to use in this particular file. Likewise, we can say import, and we don't have to give it a name necessarily. In a string, we can say dot slash. So this exact folder, app dot CSS. Let's open this up. This is app.use ESS, and this just makes the CSS available to us in our app ab.js file. So we can use className is equal to app. And let's take a look over here. We have an app in here, text-align center. Let's go ahead and change this text align left. You can see it recompiled quickly at the bottom there. And did this do anything? It didn't look like it did anything. Hmmm Do I have to re-save app.js? Nope. It's just funky CSS so that it looks like it's actually not really all that useful. Let's go ahead and change the text color to black. And let's slap and important on there because I don't know what else is in here. I haven't actually read through it and I don't want to waste your time reading through just the default CSS either. So let's go ahead and save that. And that didn't work, likely due to specificity. So let's take a look at the app header. We want to change the app header paragraph text. So this is just some front end work that we're doing here. So we've got App, we have app header somewhere, app header. And the color there is white. So let's go ahead and change this to black. Let's see if that does the trick here. There we go, changed it to black and it automatically compiled your CSS for us. So we could change this to blue for it. For this text automatically changes it for us as well, which is really, really nice. So that is how we import commands. Simply the import keyword and optional variable name. Either we want to import a particular component which we'll get into in just a little bit. Please bear with me. We're getting there, I promise. From and then a filename. And that filename is going to be in a string. So in other languages, python, we don't put this in a string. In JavaScript, we put this in a string, and then we end it with a semicolon. Now what I would like you to do for this lesson is opened up your app.use CSS and make some changes in their nothing major. So I just changed the text color to blue. I'm going to change that back to, I'm gonna change it to yellow so that it's bright and visible. If I change it to black, it's hard to read. Blue is hard to read, yellow is nice and bright. Go ahead and change a little bit of CSS, makes sure it shows up in your browser the way you expect it to show up. And when you're done with that, let's head on over to that next lesson.
7. JSX syntax: Let's go ahead and explore index.js. So this is where our app actually gets rendered. And we can see I just closed my terminal there, just let that run. I can always open it up with view terminal and you can see it's still running, so I just collapsed it. And now it says import React from React as a string. That's a package we installed react when we wrote npm install dash, dash g, Create React app. It created a package in there for us called react. Now if I go into my node module folders, you gonna see it. There's a lot of stuff in here. But if we scroll all the way down, a, C, D, E, F, G, H, all the way down. Where are you? P, Q, R, S. Where are you react? There you are. React. So that's what we're importing from, import, React, from React. And we can look at all the source code for React in here as well. If we wanted to, we're going to import reacted DOM From react Dom. So if we go back in here and take a look for React DOM, there's react Dom. It's also going to import a relevant, not irrelevant, but a relative, I guess it's also relevant, but a relative file called index.js s. So in our index.js file, we're importing, I'll close this one. We're importing index dot css. And so this is just going to add some margin and some code in there, and not margin but some body. It includes a margin and some code in here. So that's all that's doing. We're going to import App. This is basically our components. So if we go to app, we have a function called App, and at the very bottom we see export default app. And what this is going to do is say take this APP function and export it. And that allows it to be portable. So we're going to import App from the same folder app. Then we're going to import report web vitals. And that comes from a relative URL report web vitals, which is just going to report a bunch of stuff for us. We're not going to get into that in this particular module. And then we get to the nitty-gritty, the actual code. So we have react DOM or Document Object Model dot render. In React strict mode. We're going to put our app inside of it. And so this is GSS. This looks really, really bizarre. But basically our app in JavaScript was a function. We can now write it as if it were standard HTML or XHTML. And the nice thing about this as React is just going to go behind the scenes and say, oh, I know exactly what this is. And I'm just going to work with it. I'm just gonna magically make it work. And so we can actually get really, really complicated with this. And we can add things like variables dynamically to each component. We will talk about that in the future. Last but not least, we have two options in here. So this is our first argument for the render command. This is the second argument for a render command. What this is saying is say it saying in strict mode, render our app and strict mode and put it in our, our elements that has an ID of root. So if we go into a public folder and go to index.html, we're going to see somewhere in here, where are you? Id of root? This is where our app is going to live. So if we get rid of this, this is no longer going to work for us. So we want to make sure that that always exists. Now it doesn't need to be called root. You could call this anything else. You'll often see it called App as well. So just an ID of app. And if you ever change that, you have to change it in here as well. So just make sure that that's always matching. Last but not least, we are running web vitals. And this is really, really useful for, that tells us right here to start measuring performance in your app. Pass a function to log results. For example, report web vitals, console.log. So that is some of the bizarre syntax that we're going to see with React. And that's called the js X. The main thing that I want you to take away from here and there's no task for this lesson is I just want you to take a look at this, just read through it. Understand that this is being imported. This is a class, this is a method on that class. So we're getting into object oriented JavaScript programming. It takes one parameter, we can tell it's a parameter because there's a comma here. And the second parameter is where that app is supposed to be rendered. And then react as going to compile a bunch of stuff. It's gonna say, oh, react strict mode, okay, I know how to use that. Your app is going to understand what your app is and it's going to render it in here as well. What's nice about this is we're starting to get into components. So if we had a secondary app, we could have another app in here. Import that lets us pretend we imported it. We can call it app or we could call it shop. And it's going to render our app and our shop in our document root. So once again, there is no task for this lesson. I just want you to take a, you know, scratch at. The task is actually open up your index.js and just read through these lines here, just sort of get an idea of how this looks, because this is really bizarre at first. And this is nothing like anything else on the web. This is a completely new, this is called the js X. And so basically you have a component and ending component and inside of it, and it looks just like HTML. We have something inside. So this is like in HTML we can have a div slash div, and then we can have an H1 inside of it. It's very, very similar. So the learning curve for this particular part is fairly low. Once you're done reading through that, let's head on over to the next lesson and let's maybe gets started with creating our first component.
8. Your first component: Alright, let's go ahead and create our first components. So what we're going to do is first and foremost we're going to say import, React from React package. And that just allows us to use React. And then what we can do is create a new component in here. And it looks like this class, my component name. So let's call it an item, extends react.com. And in here it takes a render method. It looks a lot like a function. And in here, it takes a return statement, so it returns something we're going to open and close with parenthesis and just put an h1 in here. Hello world. Now that's nice. But you can see that this kind of isn't the right color. It kinda looks it looks dim. And so that's basically saying it's not actually being used. So let's go ahead and use this. Now we have this React component. And the nice thing about this is we can write it just like we saw in our index.js, just like this. So let's go ahead and create a new item inside of our code. And let's remove this paragraph. And first things first, let's remove the paragraph. Let's go back to our browser and just make sure that paragraph doesn't exist. This is what it looked like before it said changes text. I got rid of it. It's gone. Okay. Cool. So now that that's deleted, I can type item. And this is just a standard XHTML save. And it says hello world. So now I actually haven't said anything in here. I've wrote it in I wrote it. I've written it in here. And I can write anything I want here. I can say hello world. And then in small letters, this is a test. And what's nice about this is we don't actually have to change it in our app once we set that item, we can do a lot of our logic, a lot of our processing in a component. Now let's go ahead and split this component out into its own wall component file. So what I'm gonna do is I'm going to just cut this. Cut that. And I'm going to say import item from. And I'm gonna create a new file here called my item. And we can get rid of this line as well because it's not going to be used in this file. And I'm gonna create a new file in here called my item dot js. So notice that I called it my item dot JS, But it's just called my item here. When react compiles your code, it knows, it understands that this is going to be most likely a JavaScript file. Now, for instance, we specified app dot CSS because we had to tell it, hey, by the way, don't import app.js, don't import logo ab.js important logo dot SVG, but by default, it's going to assume JavaScripts. So I created a file called my item ab.js and wasn't a paste that first line in there. And then paste this code in here as well. And let's go ahead and fix up that indentation there. That looks good. And now you can see that item is also damned again, it's not being used. What we need to say here is export this item so that it's impossible later, export by default this item. And if I go back to app.js, we're going to import item from my item. Now let's open up our terminal and there are no errors in your, what if we type would this we said item two. It says fail to compile. Item is not defined. Let's put it back to the way it's supposed to and we don't get any sort of compile error in our terminal. Now let's go back to our browser. And it works. We have now created a component and split it into its own component file. And we can change this at any point in time. And just as an example, hello from Caleb Talia and that's me. And it says hello from Caleb Tolkien. And so now we can split out components, not just from large amounts of logic, because your app.js could get quite large. You can now split that component out into its own file so it's more maintainable in the future. And all your logic and all your processing for this particular item in your, for this one that we're rendering can go inside of your item component. So your task for this lesson is step number one. What I want you to do is add this, the text that I just highlighted to your app.js. And then I want you to actually instantiate. I want you to use that component that you created and you can copy my code. I'm not going to give you the source code necessarily, just because this is very, very simple. And it's really, really good practice to write this out so that you know that, for example, classes have curly braces, but return uses a parentheses. So go ahead and give that a try. That's step one. Step two is then to take that code from your app.js and split it into your own components like I did. Once you're done with that, let's head on over to that next lesson.
9. Working with props: All right, let's talk about this thing called props. So where's a good example? A good example would be a clean example would be in our index.js, we have a component called App. And we can have this thing just like an HTML where we have an attribute is equal to some sort of value. In React, we call it a prop. So a prop is equal to some sort of value and we can pass that in. Now when we pass in a prop or an attribute into our component, we can access that as a JavaScript variable. So let's go ahead and I just undid that. I'm going to close that file, open up app.js and where I have item in here, I'm going to give this item a name. And so this name is simply going to be gully. So I save that and we're gonna see that absolutely nothing happens. And in my item here, where I have this item, I can't just simply type gullies because a that's not a variable. I can't type gully and I certainly can't type name. You'd think that we would be able to, but we simply can't. So if I save this, we're going to say that we're going to see that it says failed to compile unexpected use of name. So let's go ahead and undo this place holder in here and save that. Now what we can do is we can access props using the, this keyword. So in react, when we have any sort of reference to other reactor, other JavaScript, we always open and close with mustache syntax with an opening and closing curly brace. Then we say this dot, props dot, and then what was that prop name? That prop name was just name. So we can say this dot props dot name, but save that. And it says I can now open this in the browser. And there it is, hello from gully. Now this is really nice because we can use this item in multiple places now. So we can create an item here. We can copy and paste this to a new line, rhubarb. Those are the two cats that I live with. I love them very, very much. They're super cute and I want them to be in this video. So I go back and it says hello from gully, hello from rhubarb. I put another one, me. Hello from Caleb. Hello from gully, hello from rhubarb, hello from Caleb. And so by writing a very minimal amount of code, simply using a component, a reusable component called an item that we named. Here. We can pass in a variable called Name, and that name can be accessed through this dot props dot name. And the reason we use this is because we're inside of a class here. So this refers to this entire class, just this one, not any other class. This is simply referring to this class as a component. Then we namespace it with props so that it's not just this.name because that can get very confusing when you have a larger project, we say this.name crops as in properties, and then the property name. Now what happens if we type the wrong one in here? Let's say we do this dot props, dot name with a capital N. It compiled, it worked fine, but it doesn't actually work for us. And the reason for that is because this isn't looking for a prop called name with a capital N. And so this is very, very case sensitive. So just make sure that your name casing always works. I said name with a lowercase n, there, there and there. And I want to make sure it works here. Now what I would like you to do as your task is for your component that you created. I want you to give it a property and when you give it a prop, and you can use my example as well if you like. It can be a name is equal to something. And then in your component, I want you to access that property. I want you to be able to show it on your page. So say hello from this dot props and then your property name. Make sure it shows up in your browser the way you expect it to show up. And when you've done that, let's head on over to the next lesson where we talk about adding click events.
10. Click events in React.js: Let's take a look at adding a click event. So I have a component in here called item. I have three of them actually with different names. So it's using the same logic. We're simply replacing the name. And in here we're using that problem. This is from our last lesson. Now what happens if you click on, let's say this one. Now that's sort of a terrible example, but this is going to really drive home the idea that there can be a click event. And so how click events work or how most events work is it actually uses old-school HTML, which we haven't seen in a long time. So one way of writing a function is onclick is equal to and then you can put some JavaScript or JavaScript function in here. Now a lot of places don't teach us anymore because it's really, really old school. But React leverages this very, very heavily. So to create an onclick event, we say onclick, and then we give it some sort of value. We're just going to delete that for now. And I'm gonna come back to that in just a second. We need to give it some sort of method, some sort of action. So let's create a new function in here called Click Me. And all this is going to say as console log, I was clicked. And then back to the onclick here. We put this in mustache syntax or curly braces. And we can say arrow function, run this dot, Click Me as a function. Now this looks a little bit weird at first, but you'll get used to it, I promise. So we have this opening curly, curly brace is this weird curly syntax here. And this is saying everything between here is going to be JavaScript, it's going to be react. The rest of this looks a lot like HTML. But hey, react when you go to compile this, and this is going to be JavaScript just so you know, so when you click something, there's going to be some sort of event and is going to then execute this dot click me. And this is object-oriented programming. And every time we click this is going to console log I was clicked. So let's go ahead and save that. It looked like a compiled define. And if I go in here, right-click inspect, go into my console. And let's just make this significantly bigger. If I click on golly, it says I was clicked. Rhubarb says I was clicked and Caleb says I was clicked. Now what's cool about this is because every component is its own piece of code basically. So gully is going to get as on-click event, rhubarb gets his onclick event and I get my onclick event. So what we can say now is I was clicked. And let's put this, Let's put a second parameter in here that says this dot props dot name. And it's going to say I clicked and then just the name. So let's go ahead and take a look. It says that it refreshed. Let's just clear our console there. And let's click this. I clicked golly. I clicked rhubarb, I clicked caleb. So now we can perform some sort of logic based on that. We can say, hey, if you clicked on rhubarb print, this was an orange cat. Or if you click on gully console log something else or if you click on Caleb, say that this is not a catch, we can perform some sort of logic based on that property name and a click event. What I would like you to do as your task is I want you to add an onclick event with a click function and simply console log the property that is being passed into your property from the last lesson. So now we're getting a little more advanced here. And to break this down just once more, we're saying onclick is equal to curly brace. That's how we know it's going to be javascript and react inside of this function is going to then execute this, which is this entire component. Dot click me with parentheses because that matches here. That's then going to be executed. And you can console log anything you like in there. It can be just a regular string or you can console log your props dot name. You could console log anything. You can create an API request if you wanted to, which we'll get to down the road, you can really do anything at this point in time because this is just regular JavaScript. So now you've combined your HTML with an onclick event connecting to your JavaScript. In React, go ahead and give this a shot, spend a few minutes on this. And remember, if you ever run into a problem. So let's say there was a typo in here. We can save this. It's going to compile perfectly fine. But when we test this, let's refresh the page. We test this. It's simply doesn't work. So you wanna make sure that your code is always, always working. And if you wanted to see this break, this will give you some sort of error. Watch this. Type error cannot read property prompts of undefined. So it's telling you there's some sort of problem in here. And that's because this is a property, not a method. This is acting like a variable, not a function. So anytime you run into an issue, you can always just read through it went away, but you can read through the error and it will likely give you an idea of what's going on. It's not perfect, but it'll give you a good idea of what's going on and how to fix it.
11. Adding state to your React components: Alright, let's go ahead and add some state to our component. And what state is, is it's a lot like props. Props is a value that you're passing in to your components. So it's a property, it's a custom property you're passing into your component. State is like a variable that's being internally tracked inside of your component. So every time you create a new item, it gets a new state. And this is kind of tricky to explain. And for me, at least when I was learning this a long time ago, the best way to learn this was to simply do it. So let's go ahead and create some state. For this. We're going to need to use a magic method called con structure. And I need to be able to spell our aid construct or, and this can take an props if we wanted to. And we could write super props. So we're just dealing with props there. If this were to extend from a different component, one that we wrote, this would make sure that all the other components from, let's say, not item, but maybe a list that we would write would be available to us here. And that's all that's saying. Then we can say this dot state is equal to, and this is an object. And let's count the number of clicks. So we can say clicks is going to be 0 and that's the number of times that this was clicked. Now in our Click Me state, another state where Click Me method. What we can say is every time this is clicked, this dot set state as a function takes an object and it basically matches this object here. So we're going to put the key of clicks, and it's going to be this dot state, dot clicks plus one. Now, that's cool and totally useless. It's not doing anything. At least we tend to see that it's doing anything. So let's go ahead and make sure that when you click one of these, it, it actually does something. So inner. One. Every time this is click, it's going to do something. So let's put the number of clicks below it. That's right, a new span in here. And this is just going to show the number of clicks. We can say this dot state, dot clicks is the number of clicks. And this is going to do two things, three things actually. So the first one here is we need to wrap all of this in some sort of HTML element. Let's go ahead and just move that up. And you notice that it was giving me a big problem there. It was giving me all those squiggly underlines. That's because the return statement is always expecting at least one element to be wrapped around all of your other code. So that's number one. I save, I go here. Number two is, you can see it says 0 as the number of clicks There was the number of clicks, zeros, the number of clicks. I wrote this in one spot. But because I have this component being used three times, it automatically updated in three different places. That's awesome. That means you have to do a lot less typing and your job gets a lot more easy or gets easier. It was a funny way of saying that. Okay, so the third thing is going to do is it's going to update the number of clicks. You can see that by default it says 0. If I click on gully, every time I click this, I mean, I probably should have made this a button instead of an H1, but every time I click this, that number goes up. Same with rhubarb, same with Caleb. And the really nice thing about this is that the number of clicks is local to this particular component. The number of clicks for rhubarb is local to this component, and gully is local to this component. What that means is this one isn't item. This is a different item. This is a different item. But we've written a logic just once. So we have constructor state is equal to an object with clicks is by default 0. Then when you click it and updates and the number of clicks by one. And all that's going to do is update it for one component. So when I click on rhubarb, three turns into 412 doesn't change for doesn't change. Only three does. And the only this component is being updated. That is the power behind state. Now, the syntax for this is a little bit weird and it looks a little magical. But we can basically say, when you have a constructor, this dot state is equal to, and I don't know why that moved. But this DOD state is equal to an object key value. We can have numerous values in here too. We can say total remaining is equal to 100. And if we wanted to update total remaining, we would just add a comma in here and say the total remaining. We're gonna update this all at once remaining. Make sure that's spelt the same yep. Is equal to, is equal to this dot state, dot total remaining minus one. And not a semicolon because this is an object, not a regular line of JavaScript. And then we could say in here, the total remaining is going to be this dot state dot total remaining. And remember we use that syntax, that curly brace syntax. That's how it knows that this is going to be JavaScript and not just HTML. So now every time I click this, this is going to go down. You can see that it's going down from 90 down to 80. Same with this one, same with this one. And the numbers are going up. So now we have two different states working at the same time for each particular item or each component. Now what I would like you to do for your task is I want you to first of all, add some state you need to write your constructor method. It doesn't hurt to pass in Props and super your props in there. Create your state in your constructor. Then in your click function from the last lesson, I want you to write this dot set state. It takes an object which looks basically identical to this object and just change that value. You could change it to a name, you could change it to number of clicks. You could change it to anything you like. Last but not least, you need to be able to actually put that state in your document object model in your HTML. And so all we do there is we say curly brace, this dot state, dot property name from our object that is. And then closing curly brace, normal HTML or JavaScript. That's all we have to do. Go ahead, try that out and when you are ready, let's head on over to the next lesson.
12. Star Wars component: Alright, let's create a brand new components. So what I'm going to do is I'm gonna get rid of, well, I'm going to comment this out so I can show you what a comment looks like and let me delete these other two. So a comment in JS Acts or in React looks like this curly brace. So we know that this is going to be JavaScript, ends with curly breaks. So we know everything between here is going to be JavaScript, then a javascript comment, and an ending javascript comment. So that's what that looks like. If you're on VS Code, you can hit Command. I'll type that out actually Cmd plus this, that slash. If you're on Windows, I can't remember if it is control slash or slash, but either way, you can simply go to your line and command slash for me. And it just commented out for me so I can go ahead and save that. And we're gonna take a look and it says compiled with warnings item is defined but never used right up here. So we can go ahead and we can comment that out as well. This uses a regular JavaScript comment because it's not inside of js X. Save. And let's go ahead and create a brand new components in here, and then we'll split it out. So let's create a new component called Star Wars. So Class Star Wars extends react. That was a strange autocomplete react.component. And because we're using React.component, we need to import React. So we can say import React from. And then the string react because it's a package. Then in here we need some sort of render function. So Render and it's going to return on multiple lines, so we use parentheses and H1. And here, this is Star Wars. That's all we're going to do for now. In this particular component, at least, let's go ahead and grab Star Wars. And because it's not being used, let's make it used. So let's go ahead and get rid of our header. We don't need that. And let's just clean this up a little bit. So let's say this is a test to make sure this works the way we expect this as a test. We actually want that header in there because that is coming with some nice styling. So let's keep that header. I just undid Control Z or Command Z. This is a test. There we go. This is what we want. So what I can do here is now that I have basically gutted the inside of my default React app, I can go ahead and put Star Wars in here. Let's go ahead and write Star Wars. And this is a React components. So we write it like JS Acts says logos not being used. Let's go ahead and get rid of that. And we don't have any more complaints are warnings. And it says this is Star Wars. So in just a couple of minutes, we are now creating a React component on the fly very, very quickly. Now over the next number of lessons, what were going to do is we're going to create an API or we're not going to create an API, we're going to consume an API. We're going to use an API that allows us to randomly generate Star Wars characters every time you click a button. So what I need you to do for this lesson is I need you to create a new class, a new component, it extends from React.com. Just render a thing. We can change what it renders a little bit later and then use that in your JS Acts. Once that's actually working in your browser, feel free to move on to that next lesson.
13. Pseudo coding: Alright, let's do some pseudo coding here. First of all, we're going to be creating a random Star Wars generator using an API. So let's go ahead and find an API. So let's do Star Wars API, not data, GitHub. And we can go to swap dot def. Swapping dot co doesn't exist anymore. There's also some copy.txt if you want to. This is the Star Wars API swaps. And anytime you go to HTTPS swapping dot.gov slash API slash people slash one for instance. It's going to give you information on Luke Skywalker. So let's go ahead and type this into our URL just to make sure that this works. Slash api slash people slash one. And here we can see this is what is going to end up returning for us. Now the stylings little weird because there's like white text on a light gray background. But this is the JSON that we're going to get back. And let's go ahead and add a name, height. Let's add a home world URL and the films that this character is N. So we're gonna do a little bit of pseudo coding here. We're just going to set ourselves up for success. So we're going to create a div, which is going to be our container for all of our code. Then in here we're going to have a name. And then what did I say? We're going to add a height. Let's maybe add that height in centimeters. Home world is some sort of home world. We don't know yet. So that's going to be a URL, that's going to be a link. And then p maybe let's not do a P, Let's do UL, an unordered list with an LI. Just as an example, not an LU but an LI films in here. And this is going to look pretty terrible, but this is going to work for us at least. So it says name. This is all text align left. Let's go ahead and change that. I change i to the very beginning, index dot CSS. Nope, it was in app.js S text-align. Let's get rid of that because it's not doing anything text-align center. You can see that it recompiled down near. There we go. It's centered. O last but not least. We also need some sort of button in here. Because how are we going to randomly generate a character without a button? So let's go ahead and add a big old button in there. So we type button, button and this is just HTML. Type is going to be a regular button. Class is going to have some sort of class name we can add. A clash is called btn button, I guess. And this is going to say Randomize character. Ok, we have a little button in there. Let's go ahead and make that button bigger by opening our app dot CSS. And I'm going to scroll to the bottom and type in dot btn because that matches the class name. This is just CSS here. So note that file, but the class name here, so this is regular CSS and I actually made a mistake. It's not class, it's class name is equal to btn. And we have a class in here called btn. Let's change the background color to black. Border. One pixel, solid black. No, Let's do yellow. Text color is going to be yellow as well. Padding is going to be 20 pixels all over the place and the font size is going to be much larger. Let's make this 25 pixels and save, wait for it to compile randomized character. So this is a button that's actually doable. We have an error in your Though class. Did you mean class name? Let's go ahead and refresh. And that was just an error from Hill hast compile. So I just refreshing and got rid of that error. So now we need to randomize this character, but we've pseudocode it a little bit in here. And all we did was we said, hey, there's gonna be a name and it's going to be heightened centimeters. There's going to be home world is URL. There's going to be films in here. So we're not actually doing any real JavaScript coding at the moment. We're just hashing this out where roughing out our code so we know what to work with. In the next lesson, what I would like you to do is mirror me. I want you to do some pseudo coding. So if you don't want to use the swapping API, this one here, if you don't want you Star Wars, there's another one called the Pokemon API. You just have to Google it. It'll give you basically a very similar looking site with very similar data structures. But I'm going to be using the Star Wars one. And I wanted to get the name of a character, the height, home world and the films. And that's what we're going to start doing from the next lesson forward. So go ahead, mimic me and when you're ready, let's head on over to that next lesson.
14. Another React.js click event: All right, we now need to add a quick feature, so an onclick feature. So we have this Star Wars component here and it's rendering HTML with a bunch of H1, PP, UL, ally and a button. And every time you click that button it needs to do something. So we went over this once. Let's go ahead and go over it once more. So we're gonna say onclick is equal to. And then instead of your regular quotations like we usually do in HTML or XHTML. And we're going to say this is going to be JavaScript's. We use curly braces. Then in here we can say get new character is going to be a function, and this is simply going to get a new character. But let's just make sure this, it works by console logging something, get new character from a button. And we didn't fill it onclick. So OnClick, this needs to be, this is going to be an arrow function. This dot get new character. This is a method, so we use parenthesis. And what we can do here, and you'll see this a lot, is we can put this all on new lines as well, so it's a little more readable like this. And yeah, you're gonna see this quite a bit down the road as well when you're writing a lot of react. So we have an onclick function here. Let's go ahead and save this and refresh our page. It's just clears that console out for me at the bottom here. And when I click it, it says get new character from a button. So it's working. Our click event is actually working. Now that's all we're going to do for this particular lesson. And I would like you to do the same. Make sure you have an onclick event. It has to actually trigger something. Don't worry about making API requests yet. We'll get to that in just a little bit. But make sure that you have a click event that actually works and I just write console log as a test. We're gonna end up deleting this code in a little bit. But it's a good test. It tells me that it's actually working. So go ahead and get that setup and when you're ready, let's head on over to the next lesson where we start working with a little bit of state.
15. How to store data using React state: Alright, let's go ahead and add some state to our Star Wars random character generator using an API. So first things first, we need to add a constructor con, instructor. We can pass in the props if we wanted to, there is no problem. So we're just going to skip that. And we're gonna say this dot state is equal to. And then it takes an object. Or if you come from Python, it takes a dictionary. And we need to store, what do we need to store? The name, the height, the home world, and the films they're in. So let's go ahead and store the name as null. We don't know what that name is going to be yet. The height is going to be null. We don't know what that height is going to be yet. That homework is also going to be null. We don't know what that is going to be yet. And the films, that's going to be an empty array. And the way I got this, and we'll come back to this in just a second with a super. But the way I got null everywhere is because we don't know what the name, height or home world is. But films, we know that that's going to be at least a list or an array. And if we go back here, we're going to see films. See right here, this is an array. And so we want to store that data just as it is inside of our application. Now let's go ahead and run this. And this is saying that super needs to come before. So let's run super cool. That seems to work. Good enough. Now, every time we click get new character, we need to update this state. And we do that with this dot set state. And I'm literally just going to copy and paste this over. And we're going to hard code some of these just for the time being. So the name is going to be Luke. The height is going to be a 172. If I remember. Ted to please don't judge me if I spelt that wrong. And I'm gonna leave the films as one item and you're just Item one. Actually, I'm gonna put item two in here as well, just so we can see what this looks like. So we're just going to hard code these values and then we can change it in here. So we can say this dot state, dot name, height in centimeters, I think it's in centimeters. This dot state, dot height. The whole world is going to be a URL. So this dot state, dot home world. And again we're setting that state. We originally said that state and when you click, we're going to set that S8 or we're going to update that state. And lastly, films is going to go in here. This is going to be an interesting one. We're gonna work with this a little bit later. But we could say this dot state dot films. And we hard coded this as not using an API requests that you can see it kind of looks a little bit ugly, little bit broken at the moment. When we click it, it automatically fills those things in for us. Check that out. That's pretty nice. Now, let's go ahead and make sure that this doesn't show up. We're gonna do that in the next lesson. So everytime you load the page, there's just a button. And none of this stuff is going to show up until that button is clicked. We'll do that in the next lesson. But for the time being, make sure you have this hard-coded. Don't worry about the API requests. We just need to make sure you have a construct or make sure you run super first. Babum, babum, this.tab state, you're going to want to name height home world films, or any other data you want to use from swaps, from the swampy API. Make sure when you click, you're going to be setting that state. So you want to set the name, the height, the whole world, the films or whatever properties you set in your object and your state object. And then simply print that out to the page in your render function. Go ahead and try that out and when you're ready, let's head on over to the next lesson where we hide all this stuff until it's actually available to see.
16. If conditions in React: Let's take a look at hiding this stuff. So if we go back here and we refresh our page, it says centimeters home world and there's a list and we just don't want that to show up. What we need is some sort of if statement inside of our render method. So what we can do, then, there's a couple of different ways we can do this, but I'm going to show you the JS XY. So we can say open up or curly braces. That just means there's going to be some JavaScript logic in here. We're gonna say if something is true, and, and then we can give this a div. So we're gonna go back into js X. And let's move all of this stuff in here except the button. So up, up in, in, in. And something needs to be true. So what we can do is we can work with the state here. So by default we can say something is false. When that button is clicked, something is true. So we can say this dot has character or let's say loaded character. And this is going to be a state, so this.tab state. And we need to set that up here in our constructor. So we wanna say loaded character, this is going to be false by default. And when you get a new character, we're going to update that to be true. And what this is going to do is it's not going to show anything until we click this. Which is really, really nice because we didn't want that CME or that whole world, or just that little bullet there. We didn't want any of that to show up until there was actually some data. So to recap, what we did here was we opened up our JavaScript syntax. So JavaScript inside of js X, we said if the state of the loaded character is true and this is a shortcut from JavaScript. Then we say and end. We put some text in here or some JS Acts. That then says, if that character was loaded, we have all this other state. And basically by default we said characters not loaded. The button wasn't clicked yet. When the button is clicked, we're going to say like character is loaded. When that character is loaded, all this other stuff is going to be set at the same time, and we can show it in here. Lastly, we closed our syntax with a closing curly brace, and that just simply says everything in here is going to be some form of JavaScript logic. It's not just XHTML. Go ahead, try that out. Make sure it's working for you. When you're ready. We're going to head on over to that next lesson together. I'll see you over there.
17. Your first React-based API request: Alright, let's go ahead and make our first API requests. So what we need to do is in our get new character, not only do we need to set the state, but we need to make an API request over to swap you have to get some information. So let's, let's work with this. In a very, very simple matter to begin with. Let's go over to swap e.gov. And I'm gonna get this API slash people slash one URL. And I'm gonna put this in here as const URL is equal to just that URL, then we're going to create a fetch API requests. So we're gonna say fetch that URL using a get request by default. Then we're gonna take that response and we're going to JSON, defy it or decoded from JSON because we know that response is going to be coming from JSON. This is JSON format here. So we want to make sure that response, whatever it is, is going to be JSON. Then once that is done, we're gonna take that data, all that JSON, and we're going to work with it and we're gonna say console.log data. And let's get rid of our first console.log so we don't clutter up our console. Everything looks like it's an order. It compiled perfectly fine. Let's go back to our React app and refresh. And you can see that our stuff loaded first, that's just because it's hard-coded. That's fine. We're not gonna worry about that for now. We're going to replace that in just a second. What we wanted to make sure worked was this. In our console. It got all the information. Got to birth year, got who is this? This is Luke Skywalker got his name, his height, his mass is hair color, skin color, films, gender, height, home world, mass, yada, yada, yada, all sorts of stuff in there. So we now have this data to work with in a object or in an object. In JavaScript, I almost called it a dictionary because I write a lot of Python, basically same thing. So what we want to do now is we want to take this code, the set state. And we want to move it up into the data here. And we want to set that data to be relevant. So the data name is going to be Luke Skywalker. We get data from here. So this whole object here is going to be called data. That's what we assigned it to here. And then we said the name is going to be right there. We've got the name. So data.frame height is going to be height is 172, I guess right? Now let's do data dot height. Home world. This is going to be a URL. So it's going to be a home world. And you can work with this a little bit later. Once you have this project up and running, you can then say, oh, there's a home world URL. Let's go ahead and also fetch that data as well. But for now we're gonna keep it simple and say data.dat home world, and it's just going to be a URL and that's fine. And the films is it called films in your yep. Films. There's four of them. Lucas and film 1236. These are the ideas, not the film order by the way. So we do data dot films. And let's go ahead and test this out. So what this is now going to do is when I refresh or you don't have to refresh. I like to refresh just as a habit to sort of clean out to my console quickly. What this is going to do is I'm gonna click this button and it's going to then make a request to swap e dot dev. And I'll show you, it's gonna show up in our console here. And once that request is done, assuming I don't have any typos, it's going to load the data up here and it's always going to show Luke Skywalker. There we go. Luke Skywalker, a 172 centimeters home world is planets slash one anys in films, one, ID of two, Film ID of three film idea for these are not the episodes by the way, this is just a different way of ordering data. So we have that working now. I want you to make sure you have this working the same way I have this working. And in the next lesson we're going to actually randomize this because right now every time I click this, it just loads Luke. And you know, as great as Luke is. Maybe we would want it to be exposed to someone else, some other characters out there that come from swapping dot dev.
18. Randomizing characters: Alright, let's generate a random Star Wars character. So you can see here that we have swapping dot dev slash, api slash people slash one. And that's just going to get the first character in their database. Id number one is the first character in swapping dot devs database. What if we go over to their website and we look at people slash for who was number four? Darth Vader, nice, Another common character. So that's a good one to use. What if we wanted to get whose number? I don't know. I'm going to guess number 11. Or you gotta be kidding me. I'm gonna wrongly here and it can Skywalker nice. So, you know, keeping it in the family. Okay, so let's random ish. Let's see what happens when we go to number 100. There isn't a 100. And so with a lot of APIs, and what we can do is because this is a detail URL, we can simply go to slash people and this will show us all of the people. It says there's a count of 82. So we know there's at least 82 characters in there with an ID. Now we need a random number between 0 or not 0, but a random number between 182. So we're gonna create a random number. Random number is equal to, and this is just plain JavaScript here. So we're gonna round whatever this number is, math dot random. And this is going to give us a number between 01. And then we're gonna multiply that by 82 and make sure that that's rounded. So if it's like 0.4. 1.5.2 three, it's going to multiply that by AD2 and then round that to a whole number. Then we can take that number and we can turn this into a template literal instead of a regular string. And we can throw this variable in here again, this is just regular JavaScript at this point. And what this is going to do is get a random number between 182. And so every time we click this, every time we click this function, this click event is going to create a new random number, create a new random URL. And it's going to affect that URL and then set that data for us. And every time that data is set, our page updates automatically. So let's go ahead and take a look at this refresh random character. One is Ben. And every time I click this, it gets a new character. So now we actually have this up and running. Now we still have a few things to work with, such as the film's, okay. If there's multiple films, let's find one that has multiple films. Here's a good one. C3po is in every film that they have in their database. This is one long string. What we want to do is actually show this as maybe a link and turn this into a link as well. So let's go ahead and first of all, in the next lesson, let's create the link here. I'll show you how to do that. And then in the lesson after that, let's go ahead and turn this into multiple bullet points.
19. Creating links from text in React: Alright, let's go ahead and link of phi are home worlds or home world is data dot home world and that's a URL. And when it shows up in here, it says home world and then just a URL in here. So let's, let's go ahead and actually cut this. And what we're going to do is we're gonna create a link. This is going to be a really, really short video. So I just pasted that in there. This is a regular link. And would you look at that compiled fine. The only weird thing here is that HREF doesn't have apostrophes around it. We're using JavaScript inside of it. So we're saying, hey, react when you compile this curly brace, this is going to be JavaScript in here, so make sure you know what to do. Oh, by the way, we're closing that JavaScript, the rest is going to be HTML. And behind the scenes, that works a lot of logic and understand what it needs to do. So when I refresh here, we're going to see that this is a now it's hard to read link, but it actually is a link. And if I click this, this brings me to planet 42. Haroun Cal, I guess. Oh, I'm sorry. If you're a big Star Wars fan, I'm a pretty big star was fine, but I don't know how to sail the names. So I'm sorry if I butchered that. But it brought me to mace Windows home world. And again, all we did there was we said HREF is equal to open and close those curly braces, then put your JavaScript inside of it. That's all we had to do in the next lesson. Let's go ahead and work on sort of link defying these films. But we have to learn how to loop through some of these first, and this is going to be a larger lessons. So make sure you have this up and working and when you're ready, let's head on over to the next lesson where we learned how to loop through things in our inner HTML or js X rather.
20. How to loop through arrays in React: Okay, let's loop through all the films. We know that the films are going to be an array, so we can loop through those. And how do we loop through those? In react? Well, reacts uses a different way of looping. So you're probably familiar with a for loop or a for each loop at this point. And I want to get rid of that as well, because we want every LI to be in every film. But we're going to be using a new way. Instead of using a for loop or a for each loop, we're going to be using map. So we open up our logic here and we say this dot state, dot films dot map. And this is a function. And this is going to take a film, so it's going to loop through every item. We're going to call it film. And we could return, lie with the film in there. Let's go ahead and see what this does. Let's create a new one in here and look at that. That's working for us. Now, that's really, really cool. But what if we wanted to throw this into a new component? We could do that very, very easily. And so what I'm gonna do here is because there's a lot of code. I'm gonna make this a little bit smaller here. And we're gonna get rid of this. And we're simply going to call this movies. And up here in our render function above our return statement, because nothing below a return statement is ever executed, needs to be above our return. Save it. And we can say const movies is equal to this dot state, dot films dot map. And what can we map in here? First of all, we can map the film name itself or the film URL. So let's call this URL. And we can also give it an index. We're going to need this in just a second and I'll show you why. And then instead of saying like LI something rather, which that didn't do what I wanted it to do. Instead of saying something rather like that and writing js X in here or HTML rather, we can write two js X. So we could return film Item Row, which does not exist yet, but we could make it exist. And this is giving me funny syntax highlighting and because I was missing that arrow in there. So now we have this new component. We haven't created this component yet. We need to go and create this component. Now this is going to be a rather simple components. So let's go ahead and say class film, Item, Row extends react.com, render. And we return, let's return multiple lines. So we use opening, closing, parenthesis. We're going to return an LI every single time. There's going to be a link that goes somewhere. We don't know what that is yet. And there's going to be some text. And in just a second we're going to pass in some properties that we can dynamically put some data inside of our film item row. So let's go down and find your film Item Row, film Item Row. And all this is going to do is throw every movie into a concept called movies, which we can then put inside of here. Let's go ahead and try this out and Did we get an error? The href attribute requires a valid value. Okay? That was my mistake. Valid value. So let's just say go nowhere. Dot HTML. There we go. No more complaints. K, let's refresh. And you can see in here it says some text, some text and that URL, if you'd look at the bottom left, says go nowhere. Now what's interesting about this is if I make this console just a bit smaller here we can read this error. It says each child in a list should have a unique key prop. If you ever see this, what you need to do is pass in a prop. And what we do here, because every component in React needs to be, for more or less, it needs to be unique. And so we pass in a key to make it unique. And we're gonna pass in that. I, let's go ahead and save that. Refresh. We don't get that error anymore. And let's go ahead and replace this text with the URL and that URL with the URL. So we're gonna pass it another property here called URL is equal to URL and that's just coming from here. So what this is doing essentially is, is looping through all of our films. For every film, it's going to map that URL and then the index in this basically a for loop. For every film. It's going to then return a new component that has a unique key in there. So it's going to be 0123, et cetera, et cetera, with a URL prop as well. Now what's nice about that is we don't have to write multiple components. We can simply put the prop in here. We can say this dot props dot URL. And I'm getting that from the dot-dot-dot. I'm getting that from where am I? Let's close some of this up. I'm getting the URL from here. So that's a prop. So this dot props dot URL does not belong in parentheses because that is a string. We want this to execute some actual logic behind the scenes. And let's put that same one in here. This dot props, dot URL, Save our compilers that there were no problems. We're going to refresh our page. I like to refresh. You usually don't have to refresh unless you see an error and it doesn't automatically update for you. I like to refresh this as an old habit and check this out. It says swapping dot dev API films for API films five, API films six. Let's go ahead and click this link. Api, films six, that matches up here. So that's a proper looking link. It is Revenge of the CIF episode ID is three, and it has all these characters in your, all these planets, all these starships, all these vehicles, all these species has all sorts of stuff in there. So that is working for us. Essentially what we did was we took a longer way of doing this. This is a very, very simple components. And so we probably didn't need to put this into a component, but we did. We put it into a new component that renders an ally for every single movie that a character is in. Then we said, pass that URL in as a prop. And as a prop looks like this. We passed that URL in. So for every film we called it URL, we could just as easily call this film. And this is going to work the exact same way. This is not going to give us any errors. If there's four movies, there's four movies that's going to store it in a constant, a constant variable called movies. And then we access movies down here. Now I want you to give this a shot. Go the hard way. Don't don't do the easy way that I showed you in the first minute or 90 seconds or so. Try this the hard way because this is what React is like in production. As a professional developer, you're going to see Components split out into tiny, tiny components like this, or larger components that use lots of other components. So you need to be really familiar with how to use a component. Last but not least, every item in a list. Every item in a list where you needs a key and that key. I just said this key is going to be i. So if this is the first iteration, i is going to be 0, second iteration, 1, third iteration, It's going to be the number two. And that's just going to say that every one of these is going to have a different key value. And that just makes it unique so that react as nice and happy with that and so that it knows how to handle that component down the road. Instead of saying every component is the exact same, Go ahead and try that out. If you get stuck, leave your question down below or feel free to ask your question. In the Facebook group, learning to code. When you're done that, head on over to the next lesson. And I'm going to give you a project.
21. Your project: All right, welcome to your final project. I want you to do something different. So I have this URL here, and I went to the wrong one. Whoops. Github.com slash, AKA bab slash Star Wars dash API. And in here, if you go into API, can go into Id. And if you go into ID number one, it says is Luke Skywalker. Just like swapping dot Dev has. The difference is there's an image and you can load that image in to your application. So when you randomly get a character, instead of just saying Sand Hill, show a picture of San Hill, or show a picture of anyone else that shows up in here. Now you're going to need to change the URL. So you can't use swapping dot, dot, dot because it doesn't support images. But if you use this URL right here, if you just click on like ID, one dot JSON, it's going to give you this particular character. Or if your random number was. And there are 88 characters. Let's see who number 88 is kept in plasma. If you're number turned out to be a random number, 88, it should look for this URL. So you're gonna want to make sure that eight is a dynamic number, it is a random number. Fetch that URL, get the name. And maybe the whole moral, Do I like this? This isn't actually a URL, this is a name I like that, that's a little bit better. Get that image. And maybe, maybe get their species or affiliations or something and put that in your app as well. So basically, I want you to recreate what we created in this course or in this module. And I want you to put an image up here. You're going to need to use state a little bit. You might want to use prompts. You're going to want to change your API URL and you're going to want to change the random number that we're generating because we're only generating up to 8082, I believe it was. This supports up to number 88. Don't forget if you ever get stuck. You can ask questions and the learning to code Facebook group, come join us. It is a completely free group. You can ask any question about anything web development related. You can see there's over 65 thousand members in here already. Feel free to come and join, ask questions, get feedback, and help other people out if you want. You can usually get an answer within a few minutes of your post being approved, which is really, really nice. It's very, very quick. There's a lot of helpful people in here. Last but not least, my name is Caleb Italian. I have been your teacher, throat react one-to-one. I hope you enjoyed this course. I hope this was fun and a fun introduction into React JS. If you want to follow Me, you can always follow me on all sorts of different places, but Twitter is a good one. You can always follow me on Instagram, or if you want to, you can get coding tips and tricks by going to Instagram.com slash coding for everybody. And you get nice little tips and tricks like how to work with Django, how to work with Python decorators, how to work with React, et cetera, et cetera. Thank you so much for taking this course. I really appreciate your time and I hope to see you in another one of my courses. Or if you're in one of my larger courses, I hope to see you in the next module. Thanks again, and I'll see you around. Bye.