Transcripts
1. Welcome to intermediate React: Hello and welcome to react to 001. This is intermediate react in this module or in this course, we are going to be working with a lot of different components in React. For example, making a single-page application so you can switch between pages instantly. We're also going to be working with search. So I can type in Star Wars and get all of these different search results. I can even click on the details of one of these and go to some form of a detail view using React routing. We are going to be using functional components in React to 01. And we're going to be working with things like state and setting state. Working with APIs such as the movie db.org API. We're going to be working with props. And we're even going to be working with history along those lines. We're also going to be using US effect, which is a React book. So we're going to be using that in conjunction with state. Again, we're going to be using an API. We're going to be using routers, were going to be using components. We're going to be passing props to these components. And we're gonna make this entire application talk to different components of one component can talk to another component. Now, why would you want to learn intermediate level react? React as one of the highest in demand skills for front end web development. Knowing React can almost guarantee you a job as a front end web developer. So getting good at React is really, really important. If you're going to become a freelance web developer, you're going to need to know how to write reactant what it does. And this course is just a little bit different from react one-to-one. React one-to-one was very, very basic. We didn't use different pages or anything. It was all just on a single page. This one is more of a progressive web app where you can literally type anything into this search bar and get API responses immediately. Colleen and I have been teaching web development since 2012. I've taught over 350 thousand students worldwide how to code and in react to one, I'm going to be teaching you a functional components using React. Welcome to react to a one, and I'll see you inside.
2. Creating a new React app: Alright, welcome to react a tuple 1 first things first, you need to have Node installed and react installed. If you don't have node n, React already installed on your computer, please head on over to react 101 where we covered the basics of React including getting installed and getting up and running with Node JS. Now I'm going to assume that you already have Create React app installed on your computer using node and NPM, in which case we can just dive right into this. Alright, so what I'm gonna do here is I'm gonna type n px, Create React app. And I'm going to call this movie Browser, Movie browser. And this is gonna go ahead and install a bunch of stuff for us. All right, so before we continue here, let's take a look at the version of node that I'm using. I'm using node 15. You want to be using Node 14 or newer if possible, if you're using Node Version ten, this Create React app command is going to build something different for you. So you want to make sure you have basically the newest version of the newest LTS version of Node. So use node 14 or 15, or if 16 or 18 is out, use the LTS version, maybe 16 or node 18. So now I'm going to cd into movie Browser. And what I can do is ls dash LA. Or if you're in Windows, you can type DIR. And it shows you that you have a read me node_modules package, public, SRC, yarn dialogue. You should have all of these files and folders. What I'm gonna do is I'm gonna open this up and VS Code by typing code dot. If you don't have this command for whatever reason on your computer, that's okay. You can simply open up VS code and go to File Open and select the entire folder. And you just wanna make sure you select that movie browser folders. So you can go to file open. And you can select this entire folder here. So Movie browser. Alright, once you have that up and running, what you can do is in VS code or if you don't have VS code actually, you can just open up your terminal like what I had opened before. Just this terminal here or PowerShell or, or whatever you want to use. What I'm going to do is I'm going to use this right inside of the browser. So I'm gonna close this down. So terminal quit terminal. And in my VS code I'm going to view my terminal in here. So all of my code are all my files is going to be, they're going to be on the left. My terminal is going to be at the bottom and my code is going to be at the top right up here. So now what I want to do is I want to type npm start. And this should bring you to your first sort of react page. It tells you exactly what to do. Edit SRC slash app dot JS. And we're going to do a bunch of stuff. So this point in time, you should have this up and running. If you don't have this up and running, make that your task for this video. Make sure you have your first React app up and running using Create React app command.
3. Code cleanup: Okay, welcome to the next lesson. In this lesson, what we're going to do is we're gonna go into our SRC and go into app.js. And I'm simply going to a make this just a little bit smaller. And there we go. That looks a little bit more reasonable. And what I'm gonna do is I'm just gonna get rid of this stuff in here. Just, I don't need the logo anymore. So let's go ahead and delete that logo. Delete logo. Yep, delete className app. I don't need that class name in there either. And I'm simply going to say return H1, hello from React 201. And that's all I'm going to do. And to save this. And you can see that this compiled successfully, it'll tell me compiled successfully as we expect. So let's go ahead. Save. Every time I save, it's going to recompile. And every time it recompiles, it should read refresh my browser for me automatically so I don't have to hit Refresh. It's really, really nice. And so it should say Hello from reacted to a one. Let's go ahead and clean that up. And while I have you doing that, let's go ahead and open up app.use CSS. And let's just clear that out as well. We're going to continue to use app.use ESS. We just don't need any of the default CSS that it comes with. So let's go ahead and delete that and save it. And you can see that it says compiled successfully. Once you have that done, let's head on over to the next lesson where we install bootstrap five.
4. Installing Bootstrap 5: All right, welcome to the lesson where we install bootstrap. This is what's going to make our site look nice. And instead of just looking like a, a gross standard text-based website, we're going to actually have like a navigation system and Lake, a hero section and cards and stuff. So let's go to bootstrap.com, getbootstrap.com and click Get Started. And in here I'm using docs version five by the way. So I'm using Bootstrap five. It says in the Quickstart that I can basically just copy and paste this CSS sheet in to my page. And that's all I'm gonna do is I'm literally just gonna click copy here. And I'm gonna go over here and open up public index.html. And it's going to have a bunch of stuff in year, bunch of comments and whatnot. I want to do two things. First of all, I want to put this link in here inside of the head. So before this slash head and before, not before but after the head. So you want it somewhere between here. So if I collapse this, you want the code somewhere between these two tags. The second thing that I wanna do is I want to rename this from React app to movie browser. And that is simply going to look like, Honestly it's going to look like it did nothing. Basically, it did nothing. It just changed some of the spacing, sort of reset or CSS a little bit. It did do something, but basically a didn't do anything at this point. All this did was allow us to use our CSS from a bootstrap five, which is eventually going to allow us to use nice little components such as this card. So go ahead and get Bootstrap installed. Make sure you just copy and paste that link this style sheet in here. Just make sure you copy and paste that into your index.html that lives inside of your public folder. Next up, let's go ahead and create a navbar functional component.
5. Adding a Navbar component: Okay, let's take a look at adding a global navbar to our site. So I just have app.js open and this is where basically the entire app is going to live. And so I want this navbar, this theoretical nav bar to live somewhere in here. And I want the rest of the site to also basically live in here. But there's a few different ways we can do this. And the first way is through a functional component. The second way is through a class-based component. And the third way is kind of similar to the first way, which is a functional component. We can use const. And so I'm going to show you both ways using functional and const. So I'm going to write function navbar. And all this does is return something. So I write div in here. Div, this is my nav bar, and this is a functional component. And all it is, it's literally just a function and it returns a bunch of js X. So JavaScript and XML put together. So we copy nav bar and let's go ahead and write this as a component nav bar. And you can see this was successfully compiled. So if I open up my browser now, and let's close Bootstrap for now. We don't need it. It says This is my nav bar. And if I change anything else in my nav bar, this is my navbar 123123. You can see it automatically updated for me and said This is my navbar 123123. So that is a function based component, a functional component. And these are a little bit different from class-based components which you learned about in react 101. Now in my opinion, there is no right or wrong way to write components. You can write them as functional components or you can use them as class-based components. I personally just like to make sure that if I'm using functional components, but they're all functions, or if I'm writing class-based components that they're all classes had just sort of keeps the code standardized that way. Now if you've got a job down the road and you notice that when you're writing react that one section is using a functional component and another second is using class-based component. That's actually ALK. There's nothing wrong with that and this is just a preference of mine. So reacts to a one we're going to be using functional components. So let's go back to our browser and let's type in Bootstrap five, actually close that too early and bootstrap F5 and I wanting navigation bar in here. And so I'm gonna go into components. And where's my nav bar? And there's one in your specifically that I want that we're gonna modify and it's this first one here. So I'm gonna copy all of this and we're going to run into a few errors here. So first of all, I'm just gonna paste all of that in there and change at indenting. And now you can see when we save this that it says expected corresponding js X closing tag for HR. Where is HR? There is an HR right here. And so in regular HTML, you can write HR like this. You can write BER, like this. You can even write IMG and have it not really self-closing, n js X. You need all of your self-closing tags to actually properly be self-closing with a slash at the end. So let's go ahead and save that. It says expected corresponding js X closing tag for input on line 3838, column 1038, column ten is gonna show me right here. That's actually not quite right, but it's close enough. And what it's looking for is this input tag. Input is the same thing JS Acts and he's a self-closing tag. Let's go ahead and save that. And now it's gonna give me a bunch of other warnings. And I believe at this point in time, this should work perfectly fine. So let's go back up to our browser and look at that. If it doesn't work for you, can just simply hit refresh and it should work for you at this point in time. Now the drop-down was not going to work. We didn't add Bootstrap. Javascript are not going to be using that. Basically, we just want the navbar home link, maybe a disabled link, and the search in there. That's all we're looking for at this point in time. Now one thing to note is when you open up your inspect tool. So if you right-click inspect and you go into console, you're gonna see that it's going to complain at you pretty hard about a lot of things. And first of all, let's go ahead and fix up this tab index. Did you mean tab index? React and js X is a little bit. Now there's no way to put this. It's picky. And I type tab index with a capital I. And when I refresh my page and scroll back up to the errors, that error doesn't exist. And the nice thing is it actually tells me what it thinks. I mean, the other one here and this one trips me up all the time and this is probably going to get you as well. Is this says invalid DOM property class. Did you mean className? Now we're not using classes in the sense of JavaScript classes, but we are using classes in the sense of HTML, CSS, class attributes. And so class is actually a reserved word. It's a keyword in JavaScript and we don't want to use that. So what I'm going to do is I'm gonna select all of these and go to selection and then add next occurrence. And it's just going to select all of these. So I want to select classes equal to and then select all of these, every single one. And then I can type, basically, I can type in all of these places all at once. I can type a class name with a capital N. Okay, let's go ahead and refresh and look at that. And we don't have those errors in there anymore. We have some warnings though. So let's go ahead and clean this up just a little bit and we might need to ignore these warnings for just a few minutes. So this dropdown, we don't need that nav bar. We are not going to call that nav bar. We're going to call that movie browser. And it's going to be complaining about HRF with blank link. So just a number sign that's a blank link. Let's just say going to go to somewhere just so that we get rid of those complaints for now, let's go back to our browser, hit Refresh, and with our console open, we see that there are no errors in there. Now if we click any of these, this isn't going to go anywhere. You can see that it goes to somewhere in the URL, doesn't actually do anything. So we're going to tackle that pretty soon. But the main thing that we should be taking away here is that class, the attribute class is actually class name in react. So you wanna make sure using class name. And you want to make sure that all of your elements are JS Acts or XHTML, not regular HTML, XHTML. And the difference again is just in regular HTML you can write image. Or input, or HR or BR. Whereas in JS Acts and in XHTML, it's actually image slash. And this is why you see me in other courses or other modules writing it like this. This is old school way, but this is also the way React is expecting you to format your code, your HTML. So it's always expecting that in their react when it compiles, is going to say, hey, if there's a BR without this slash in here, then there's probably going to be a closing BR tag. But in HTML, there isn't a closing BR tag as a self-closing tag. So we use this self-closing tag whenever possible using React. Okay, there's one more thing we have to do here. We have this function at navbar. We need to put this into a different file, otherwise, our app.js file is going to get insanely hard to deal with. So let's go ahead and right-click on SRC New File. And I'm gonna create a new folder in here called components. And this is going to be called navbar ab.js. And what I'm gonna do here is I'm going to literally just going to cut this code out. Let me go over to the nav bar dot js and paste it in there. And I told you I was going to show you that there's a functional way, like a way to write a component using the keyword function. And there's also a way to use const. So when I export this eventually down the road, I'm going to be using const. And so what I mean to say is const nav bar is equal to an arrow function with no parameters in it yet. This is where we're going to be putting our prompts. We'll talk about that down the road. But basically this is an anonymous function, anonymous arrow function going into a concept called navbar. And at the bottom I'm going to say export default navbar. Now, that's actually not going to do anything except remove our navbar from our app.js and it even fails to compile because navbar is not defined. So what we need to do now is import navbar from.com. That's saying this particular folder, then the components folder. So dot slash is going to be this particular folder, then the components folder, and then navbar. We don't need to take navbar ab.js because it's going to assume ab.js was the only time we need to write our extension is if it's going to be layout.css or something, but React and basically web pack in general is going to assume that when you import something, you're importing another JavaScript file. So let's go ahead and save this. And if this works correctly, we should see that nothing has changed in here. That means it is working for us. Now at any point in time, React is really good this way. At any point in time, if you have an issue, you can always look at your terminal. It'll tell you exactly what the problem is. If you need more details, you can always open up your browser and it will tell you the exact same thing. So in this case, nav bar is not defined. This is saying, hey, trying to use navbar, but it wasn't defined because it was commented out. Now I imported it. I have access to this as a component. It's going to work for me. It's going to compile successfully. In our next lesson, let's go ahead and create a new component for our homepage. So this is going to be our homepage here. We're going to have more details inside of our homepage. So in the next lesson, let's go ahead and do that.
6. Adding a Home component: All right, let's go ahead and create a functional homepage component. So let's do console. I'm going to use constant this time. I'm gonna call this home homepage, home view now just call it home is equal to parenthesis arrow. So this is an arrow function. And I can return anything I want in here. And so I'm gonna say return with a div. And in fact, a cool little thing you can do is you don't need to write div, you just need opening, closing JS Acts in there. And you can write hello world from React 201. And notice this one just says hello from reactor one. This one says hello worlds. Let's go ahead and get rid of this. And because we have this constant here, that's an arrow function and anonymous arrow function called home. We can now rate home as a component. Go ahead and save that. And let's refresh our page and says hello world from react to a one. Or if I wanted to, I could do yada, yada, yada, and it will automatically update for me in my page as well. Now, that's cool and all, not super, super helpful. But what it did was it took the code out of app and put it into a component so that in our app, you can just sort of pretend that this is all our app code here. It's nice and clean. So we know we have a nav bar, we have a home components. And if we wanted to, if we wanted to just change at home components, what we could do is open up home.html or nav bar dot js and edit those separately. So it's keeping our components separate is, well, that's the idea Anyways, is we can keep our components separate and that's why we call them components. So what I'm gonna do here is I'm going to take this cut that i'm gonna say import home from dot slash components slash home. Now this is not going to compile for me. What I'm going to need to do is create a new file in here called home.html. And that just lives in my components. You can see that here components. It's also in my components. And what I'm gonna do is I'm gonna say paste this and then export by default that home const. And now you can see that this works. And so if I just refresh the page, there is little error down there in the console, but if I refresh the page, there is no more error. And if I ever wanted to change my homepage, I get say this is a change in a different file. And what's nice about this is my homepage is now self-contained. I don't have to write all of this logic in my app because the whole thing is going to be your app. And if you did that, this file can get really, really long. We're talking thousands and thousands of lines of code. And that is really, really hard to work with. This is a lot easier. You can just say, hey, look, there's an app, it's got a nav bar, it's got a home. Let's right-click on navbar, go-to definition. It opens it up for me in VS code. Not all browsers will do that, but VS code is really, really smart when it comes to JavaScript. So what I would like you to do for your task here is I want you to make sure you have the Navbar component and a home components. Make sure they are in separate files. Import them and use them. They don't have to be complex. The don't have to have a lot of text and here, in fact, this doesn't even have very good text in it. This is simply just says hello world from reacts to a one. Go ahead and make sure that that works so that we can write our code in other files. And that's just going to keep our our code is also going to keep her sanity in line moving forward.
7. Adding an About component: Okay, let's go ahead and create a new page view. So right now, the only page view we have and what I call a view. And what I call a view is this, this whole thing in here. So this is like the homepage view. And if there was like an about page, that would be an About view or if there was a dedicated search page, I'd be a surge review. And we use this term a lot in template rendering languages and frameworks such as Django. So this is a view and we need to create an about page. So we haven't homepage, we now need an About page. So let's do const about Vw is equal to an arrow function and return, this is going to do is returned and H2. That says About Us. Now, this is cool. You can actually see that about v was assigned but it's never used. What we can do is we can throw this in here and we can say about view. I probably should have called that homepage, the home view. But moving forward, let's just keep this named view. So we have this about fuel and you can see that it, it compiles successfully. But the problem is, we now have a homepage view. Oops, and we now have a homepage view. And we haven't had a boat view and we actually want them to be on separate pages. So what I want you to do is I want you to write in a boat view and then I want you to move that into its own component. And then once you have that done, let's head on over to the next lesson where we learn about what we start to learn about the React router DOM, it's a different package. We're going to be installing a new package in the next lesson. So make sure you split this out into a new component. That's your task for this lesson. When you're done that, I'll see you in the next video.
8. Installing a React router: Alright, well, we need to do now is we need to start working with this thing called a rotor. And the rotor is basically how we route from different pages. Is it route or is it root? I say route. So if you click on home where if you click on length, pretend this is like the About page. It should only show about us. And if you click on home, they should only show the homepage title. And the URL should even change as well. So it should be like slash would just be your home is slash about is going to be the About page. Currently it just renders all of it together. So in the next few videos, let's get used to working with react, router DOM. And so what we need to do here is enter terminal. Let's just cancel control C to cancel there. I'm gonna do node v. That's just going to show you that I'm using a wrong version of Node. Surprisingly, as I'm going to change that node, use 15, that's my newer version. And what I'm going to do is npm install React, router, dash, DOM. And this is gonna go off and install basically another useful tool in the world of React called a rotor. So if we look at our package.json and we go in here, do, do, do, do do. We're going to see dependencies. We have react, react, Dom, reactor, router, DOM, so we have that in there now. And that's just proof that it was installed properly. So what I want you to do for this particular video is simply run NPM install, React, router, DOM. That's all you need to do once you have that up and running or I guess not running, but once you have that installed, let's head on over to the next lesson where we set up our browser router.
9. Using the Browser Router component: Alright, let's take a look at actually activating our router. So the router, just because we installed it with npm install React router dump doesn't actually kick in automatically. We have to tell it to be used. And so what we want to do here is go into index.js and we want to type import, and we're going to structure this or deconstruct this. We're gonna get the browser router from React Router, dash.com. And you can see that this is sort of dim because it's not actually being used right now. Inside of our Strict mode, what I'm gonna do is I'm just gonna create a new element in here. And it will move this app inside of it. And so I have react strict mode, cool. Then I have browser rotor, and then I have my app inside of that. That's what we worked on in the last few videos, is our actual app. You can see what's coming from dot app. Dot, dot-dot-dot, ab.js. That's coming from here. And then I said close the router in case we didn't want to use a router anymore. Close strict mode. Now, that just says our app is going to be inside of a router. All that that's doing. So let's go ahead and save that. Let's go back to our app.js. And in here we need to do this thing called a switch, and then we switch the roots. And so if you have written a JavaScript switch statement, it looks something like this. Switch, your case. And then it's going to say your case is going to be thing, do something, break. Case, Default. Do something break. And so this is a switch statement. It's, it's basically a very quick if, else if statement using just a different type of syntax in JavaScript, a lot of different languages have a switch statement and JavaScript is one of them. And so what we want to do now is we want to write our switch statement in here. So I have this div and what I'm gonna do is I'm gonna write switch and that automatically created switch. Let's go ahead and move that up. And then I can write router. Path is equal to slash exact. And in here I can say there's going to be a homepage. There's another way we can write this two and let's move this sum of this navbar up outside of the switch so that it's always going to be global. And there's another way to write this. We can say rotor path slash a boat. And then we can pass into component. We can say that component is going to be the About view. And it's a self-closing tag this time, let's go ahead and save this and see if there's any problems. Npm start. And we have, yeah, that makes sense. Switch and router or not defined, it's because I didn't import it, of course. So what I want to do here, it's not a router either. What am I doing here is route. And what I wanna do is import, switch and also route from for React, router, dumb. Let's go ahead and save that compiled successfully. Let's go ahead and see if this actually works. So if we go to localhost port 3 thousand, we can see that says hello world from react to a one. If I go to slash about, it shows the About page. In the next lesson, let's go ahead and add links in here so that we can link to and from the pages. It's a little bit different than a regular link because you'll notice if I do this, it's sort of flashes quickly. So if I just typed slash a boat, you sees other page sort of flashes, takes a quick 15 or 20 milliseconds to load. It's not instant. We can actually make that to completely instant when you click a link. And that's going to make our app a single-page application. We're called a progressive web app. We're going to do that in the next lesson. For now, what I want you to do is I want you to make sure you have switched setup. Inside of your switch, you have different routes. You should have one route for your homepage, one wrote for you about view. And there's two different ways to do this. They're the exact same, it does the exact same thing. One thing you're gonna wanna pay attention to though, is this is your homepage, so just slash is going to be your homepage. And it says exacting here, this is the only route that's going to take exact. And that's coming to say, if that path is exactly this, then it's going to render our homepage. If the path is slash about not exact. This is angling V. Here's this one particular case. If it is exactly that, then render homepage. Otherwise this path is slash about component is about view and we know about the, about fuel, we know about the home component. We've built these out already. We've, we've imported these, we have these in different component files already. And so these are, this is just two different ways of doing the exact same thing. Whichever way you want to write it is totally okay with me. I just wanted to show you that there's this way and there is this way.
10. React based links: All right, what we have is if I just open up Google Chrome and we have this navbar and currently the links don't actually go anywhere. Let's go ahead and make sure that those links do go somewhere so we can switch between the about page and the homepage. And for that we need to open up navbar ab.js. And so we have this movie browser, and this is just our title. That's right up here. And it says that is going to somewhere. So instead of saying a, what we're going to say is that we're going to grab all of these. We're going to use a link. We haven't imported this yet, so this is going to be a little bit of a problem, but we'll get there in just a second. I'm going to grab all the closing link tags, the anchor tags and do slash link instead. And all the HRFs. Href is going to be too. Now that movie browser is going to go to slash home is also going to go to slash. And this isn't going to save. You can see this is actually going to fail because link is not defined. Let's go ahead and import link. So import link from React, router, dash.com. And there we go. Okay, so let's go ahead and change this of their link. The one that just has regular Lincoln there to about there and yeah, let's just call it about not about us. And this is going to go to slash about and weren't getting slash about from is right here it matches this particular path. So slash about disabled. Let's go ahead and make this one, say coming soon. This one to do doesn't matter. This link is disabled anyways, so it can go pretty much anywhere. And I think that's all we have in here. And let's go back to our browser, refresh. And we have an About page. And when I click these, you can see that it's instant. It's super, super quick. And the nice thing about this is it's not reloading all of my JavaScript is not reloading all of my CSS. He's already loaded at once. And so when I, when I click one of these, all it has a switch out the content for me. And so how we do that is we write link, which is imported from a React router DOM. So we have link class name just like a regular HTML element. More HTML elements attributes to instead of HREF, we write 2x is equal to and then we put in a link that actually exists. So slash goes to homepage, slash About, goes to our About view. Then we say slash link. So it works a lot like irregular anchor tag in HTML. This one is simply saying that hey, because you're using a router, you can swap out that content instantly. You don't have to worry about reloading the page or anything. It just already knows that it exists. And so this is going to be really, really fast when people eventually load your page. You know, once you have your page on a live server, someone's going to load it up and it's just going to be instant. So go ahead and change those a tags to a link tag. Don't forget to change your HREF 2A, two attribute. And when you've done that, let's head on over to the next lesson where maybe we add a new component called, yeah, it's not a new component called Hero. And we're just going to add a nice little title to each of our pages.
11. The Hero component: Okay, let's add a new component called hero. So let's open this home.html file and let's create a new component. So constant, let's call it Hero is equal to an empty arrow function and it's simply going to return some Bootstrap. So we can say the header. And this is going to be a hero section. I'll show you what that is in just a second. Class name is going to be VG dark. I can't remember if this is Bootstrap or tailwind. I think this is Bootstrap. So BG, dark text white. Let's do padding five all the way around. And let's just say one. This is a hero component. Now this isn't going to do anything. You can see here it was actually dammed and we get a warning that is assigned, but it's never used in our home. What we can do is we can now say hero as a component. And that seems to render perfectly fine. Now when we go back to our page, Well, I'm currently on the about page, but when I go to the homepage, This is a hero component. Now we didn't have this leading up to this point. And what we can do is if we didn't want it on the about page, we can just leave it off of the about view. But what we can do is say, hey, I liked this component and I also want it to be on the about page. So let's go ahead and split this out into its own components called Hero. And what I'm gonna do is create a new file called Hero ab.js and just paste that in there. And I'm gonna write export default and then the name of this const hero. And when I opened up home.html s, It's going to try to access hero, but it's not defined. You can actually see that it says that down here. So what I wanna do now is import hero from not slash components or dot slash components because we're already in the components folder. So we want to say in this folder, So dot slash hero. And that works for us. Now, if things worked, we should see no change. That's perfect. When you don't see changes while you're moving code around, while you're refactoring, that is exactly what you want. So let's go ahead and move this hero and not move, but let's add this hero. So I'm gonna copy line one and line seven. And I'm gonna go to my about view. I'm gonna paste that in here too. And we have to do a little bit of work here. So in my about view, I'm going to import hero as well. So this is one component being used in two different files. And I want to return js X. I want to move that hero up. I want to move the about us up. Let's get rid of that. And everything looks good. Now when I go back here, we have this hero component on both pages. Now in the next lesson, what I'm going to show you is how we can change this based on the page so we can make this dynamic because this is a hero component. This could say welcome to movie browser, but if it says Welcome to movie browse on every page that's going to get kind of old. Nobody wants to see old content on every single page. So we, we want to say, see that this says about us or why we exist or something. And the homepage is going to say, welcome to react to a one or something along those lines. But for now what I want you to do is I want you to create a new hero component. And then I want you to import it into your homepage and import it into your about view as well. Make sure you use it in both places. It can be hard-coded and should be hard-coded at this point in time. And just as this is a hero component in the next lesson, when you've done this, we're going to talk about passing in props.
12. Component props: Alright, let's take a look at passing in a text prompt to the hero components. So on our homepage we have this hero component and it renders a header. With this is a hero components. And we want this to be different because currently on the About view, we have the same thing. We're importing this hero component. But if I right-click and go to definition, it says the exact same thing and that's no way to live your life. What you want to do is you want to be able to pass in something a little bit more flexible. And so what we're gonna do is first of all go to our homepage and we're gonna add our first prompt. And it's just going to be called text. And this text is going to be welcome to react 201. And in fact, because this is just a regular string, I don't need that curly brace in there. So we have this text property or an attribute in HTML, but in React, we call it a prop. And because it's called texts, but we can do now in our hero, we can use curly braces, type text, and then we can put the text inside of our component, like this text. And it says welcome to react to one. The About page has nothing but the homepage says Welcome to react to a 1s. So it's, it's becoming a little more dynamic at this point in time. Now, what we want to do for our abode view is we're also using the hero component here. So let's say the text is going to be about us. And again, what that's going to do is say, hey, render this hero component with a property of text. In our hero components, we have Collins hero is equal to. And then we do some restructuring in here. So that first destructured variable is going to be text, and that matches the property name right here. And then we can use that inside of our return statement. And so when we go to our homepage now it says about us and this is perfect, that content is being dynamically changed. Now what's nice about this is we now have a hero. We can get rid of this one, that H2, and on our homepage we can get rid of that H1. And we have this page sort of coming together, these two pages coming together. So I want you to make sure you have a hero components, not the homework, but hey, hero component, that's taking a property. Pass in that prop. Use whatever text you want to pass in there, but pass in that prop into your hero component and then render that prop in your return statement. Go ahead and try that out. And when you're done, let's head on over to the next lesson, where we just add some basic content to our homepage and our about page.
13. Adding generic content: Okay, let's add a little bit of content to our homepage and our about page. So this is actually not super reactive, but this is sort of important for building out a page. And so we're using bootstrap and I'm in my home dot js file here. And what I can do is type div class name is equal to container. Div class name is equal to rho d of className. And this looks a lot like regular HTML, just writing bootstrap five, class_name is going to be coal, LG eight offset LG too. And that's just going to center my eight out of 12 columns here that I'm going to be setting. And let's go ahead and write lorem ipsum in here. And let's save that. Go back to our homepage. We can see we have some lorem ipsum in here. Now we need to add some margin here in margin top and bottom. So margin y of five. There we go. That looks a little bit better. And what we can do here is because this is supposed to be a paragraph. Anyways, what we're going to do is say this paragraph class_name is going to be lead. And that's just going to make this text a little bit bigger. And this is again just regular Bootstrap. And so you can see the text going a little bit bigger. Let's go ahead and close that down. And on our about page, let's go ahead and do the exact same thing and you can write anything you want in here. I'm just going to keep this as some dummy text. And when I get to the end of this, before I give you all the source code, I'm going to change what this text is on the homepage. I just didn't want you to have to watch me write this out because that's boring and no way to live your life. And so I'm going to simply paste this in here. And this formatting got all funny. So what I'm gonna do is first of all, I have an extension called prettier installed. So PRE TTIP, ER, It's this one and it's a simple code formatter. And so once you have that installed, you can hit Command Shift P, control shift B on Windows, all shift P. Either way, you're going to want this little fellow open. So if you hit like ALT P, you can just hit the greater than sign and then type format document. And this might ask you to configure using prettier, in which case you'll go, you're going to have to select prettier, which is totally fine, and it will format your code for you. So maybe I'll do that on a couple other files here to let's do this on the Home Format Document. Let's do this on App format. The document, nope, nothing changed. Perfect. We're doing good there. Index.js, we can close, we're never going to touch that again. And that's about it. And so that just formatted my code for me nicely. And so now when I go to about and home, we have different content and yeah, let's actually make sure that we have different lorem in here as well, Lorem 25. Just so that we can see that this is in fact changing and that was the exact same text. Let's see Lorem 50. I just have a shortcut on my computer for Lauren 25 and Lauren 50. There we go. That looks different. So now we have a homepage and about page using a single-page application. Now our React site is using this and what's nice about this. If someone comes to your site, go to straight to slash a boat and it's going to render the About page for us. We don't have to do anything magic. It just magically figures it out for us, which is great. In our next lesson. Once you're done working on this and making it look the way you want. You can add images and anything else you want in here. When you're ready. Let's head on over that next lesson where we create a new search route end view, because right now our search doesn't do anything. This does not work. And we want this to start working. So in the next few videos, we're going to be working with search.
14. Adding a search component: Okay, let's go ahead and create a search route and a view. And so what I'm gonna do here is before anything I'm just gonna say import search view from dot slash components slash search view. And now this doesn't exist. And this is going to complain on me in just a second and I'm gonna create a new route here. And this route is going to have a path of slash search and that's all it's going to do. And in here I can say the search view and I don't want that to be closing, I want this to be self-closing. Now this is not going to compile. This is obviously going to say that components Search fee doesn't exist, can't resolve it. Let's go ahead and make it exists. So let's grab our home. And I'm just gonna resave this as search view dot js. And we need to change this to search view. And yeah, let's keep our hero the way it is. Because I kinda like that. And let's just keep this saying something like you are searching for. And then some stuff in there. We'll leave it as is for now. Make sure we export that. Okay, now it works. So now we can go into slash search. And it says you are searching for. So we've now created a search view very, very quickly. And we created a new route. And just sort of on that route, I used this version the same way we use the homepage just to show you that you can do this two different ways. I could have just as easily wrote it this way. I chose to write it this way. So maybe the next one that you end up writing is, or the next one we end up writing because we are going to be writing one more. We'll, we'll use this way just to show you and to demonstrate that you can use either one interchangeably.
15. Search component props: Okay, let's talk about using state as well as passing state down through prompts to eight, another component. Now that might sound a little bit scary, a little bit overwhelming, but no, we'll just take it one step at a time, like we always do. So in our app here, what we can say is this magical thing called cont. We're going to D structure and array. So we're going to call this search results comma set search results. And this is going to use state, not statue, but state. And it's going to take, I think it's going to be an object. No search results we need something to loop through later using the map function. So we are going to set an array as the default. Now you state is not important, we need to import this. So let's go from Import. Use stateless also, you get US effect while we're here, we're going to use this a little bit down the road. And we're gonna import that from React. And so when we compile, at least this is saying that it's not being used, but at least it's not complaining that it's undefined. Now we're going to need to set one more thing in your const search text. That's what we're going to be showing in our page and set search text. I'm going to show you how prop works in just a second. So use state and the default value is going to be an empty string. All right, so I'm going to show you how this works, but we need to get the setup first. So let's go ahead and get the setup. Actually nominate. I'm gonna go back on that. So whenever you use set search results are set search text or whatever you call this. This is going to be your variable that you can access. This is going to be the function that you then set that state. And so if you're brand new to State or if you're relatively new to stay and you've, you've played with a little bit in Lake class-based class-based components, such as in react one-to-one. Well, we use in react one-to-one and react one-to-one. Use this dot state. While we don't have that in function based components. So we use a hook called US state. And we can change this by saying set search text, new text. And, and so let's go ahead and do this console. Dot log. Search text is the default. I have a typo there, but that's fine. I'm gonna delete this in just a second. And then let's do set timeout. And let's make this an arrow function as well. And that's time that out by two seconds. We're going to say set search text, new text. And then we're going to console.log. Search text is the new text. And so let's go over to our movie browser and refresh our page. And I didn't make that big enough quickly enough. And you can see that this is actually starting to change a little bit. Now, there's a little bit of a bug in here. And what I'm gonna do is I'm gonna get rid of this just because and this is really important to know. There we go. There's one and didn't want that trashing my browser is every time you call the set function, using state is going to rerender your entire app. So what this was doing was it was getting my search text, which was nothing by default. Then after two seconds, it would set my search text to new text. But because set search text was used in the state, it re-rendered my entire component, which just happens to be my entire application. Which then again it reads from the top to the bottom and says, okay, let's search text is going to be nothing into seconds. Set it to be new text. Oh, look at that. Okay. Search text changed again, re-render the app. And it goes over and over and over again. There's a way around that I'm gonna show you how that works with US effect down the road. But for now, let's go ahead and pass some of these things into our search view. And so our search view here is going to be like keyword is going to be and this is a prop search text. And when we get to search results, we also want to put that into our search of view as well. So we're gonna say search results is equal two search results. And what this is going to do is because we have a nav bar and here we also have these different components. All of this information, the state is going to be stored in the overall application. And so in, let's say our nav bar and we could say set search results is going to change the search results. When those search results change, it's going to then re-render this view or this whole application and it's going to change our search view for us. So let's go ahead and save this. And let's open up our search view. So I right-click and go to Definition. And our search view now needs to take to props and ESA, take keyword and search results. So let's D structure these. So we say keyword and search results, and I just copied and pasted that from my clipboard. I've a fancy clipboard so I can copy and paste multiple things at the same time. And then what I want to do is I want to change that keyword. So watch this keyword and it's just going to change a text in my hero. So if I go over to slash search, there's nothing in there by default. But if I change this, because this is the default value. Searching for dot-dot-dot, searching for dot-dot-dot, 1-2-3, 1-2-3, 4-5-6, 4-5-6. So that's just going to be using the regular search text in there. Now I don't want it to just say whatever I'm searching for. I want this to actually say a sentence. So const title is equal to a template literal. You are searching for, and then keyword. And what we can do is instead of using a string here, we can use this title. You are searching for. And then blank. There's nothing in there yet. That's okay. We're gonna work with this. Now let's also go ahead and console log our search results. Console.log or search results are the search results. That's all we're going to do for now. Eventually we're going to take the search results, which is going to be a list or an array. And we're going to loop through each one and put some text into our page so we can actually loop through search results using an API. We haven't got that far yet, we just needed to pass this in at roughly the same time. So as a quick little recap, what we did here is we said search text and set search text is going to be using state. Set search text will change searched the search text. And whenever search text is changed, using this function, it's going to re-render the entire application, which may or may not be what we want all the time. And so there's a way around that using US effect. Then we said that search text and the search results, which is going to be a string and an array are going to be props of the search view. So we can pass these into the search view to render down the road. Then in our search view, we said there was a keyword and search results. That keyword we put into a template literal and a concept called title. And we dynamically changed that Hero text. And so eventually when we change our search results, when we change that keyword, is going to say you're searching for Star Wars, you're searching for Star Trek. You were searching for minions or any sort of movie that you want to look for. It will be a lot more dynamic down the road. Now, go ahead and give this a shot. This might be a little bit confusing, but at this point in time, it doesn't really need to make too much sense because we're sort of in the middle grounds of a couple of major features here. And this just the way it works when you teach online is it needs to be split up into multiple videos. And so we're in a weird little state here. And if this doesn't make sense to you, if what I did in this video didn't make perfect sense to you, that's okay. Power through this anyways, give this a shot. You can always check the source code as well.
16. Binding keyup events: Alright, let's go ahead and work with our search bar. So in our search bar, when we type some stuff, we needed to actually do something. And currently it does not do anything. So let's go into our nav bar where our search is. And in here, you know, let's format this document. So we have this input and we want to set a value on here. So the value is going to be, let's say test. It is test, but you can see that we actually get an error in your ear saying or a warning component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value which it was, it was currently question mark and now it is test, which should not happen. Decide between using a controlled and uncontrolled input for the lifetime of the component. There's more information here, you can always read about that. But basically what this is saying is, hey, this was a read-only and you can't type in it and I don't know if you can hear me slamming on my keyboard here, but I'm typing, nothing happens, and that's a problem. So how did we get around that in react? Well, first of all, react always says an input field is always read only if you tried to set that value. Well, we need to do is we need to set this value to be the search value. We also need an onchange event handler to actually handle this. And we're gonna say update search text. Now, this currently makes no sense. But if, if, if, if it's close, some of those nope, too much. There we go. This is just getting kind along here and I just want to make this a little shorter so we can see roughly all the stuff in the same, in the same window here. We can say const, whether we call it update search text. Update search text is equal to an event. That's the first parameter. And we can say console dot log e dot target dot value. And that's just simply saying this is on, let's say an input. It's gonna say E dot, basically input dot value, whatever that value is, it's going to cost a lot for me. Now, this is not super-helpful because currently this is hard coded. The value says To be the search value. And we need this to be something a little more dynamic, like the search text. But search text is not added yet. So let's go ahead and make sure that we have it added in here in our nav bar so we can say search text and inner nav bar in our app, we have to add that search text as a prop. So now we can say search text is equal to search text. And this is the property name. It just happens to be called the same thing as our state variable here. So let's go ahead and try this out. Let's refresh. And every time I type you can see it shows up in my console, so it's actually working now. That's great. But we actually need access to this from a higher level. And what I mean by that is. We need to then be able to set that search text up here so that we can pass it back down to our search view. So in our nav bar, we are going to be setting that search text. It's going to come up to our app, which is where this is defined. And then it's going to go back down into our search view as search results. So we need to set that search results. And what we're going to do is pass in as a prop. So we're gonna say set search results is equal to set search results. And this is going to be just a property, a prop. And all we're going to do here is put this into our nav bar, which means we have to add this in here as well. Search text and set search results. Don't, that's around one set search text. That's the right one. Sorry about that. I use the round one. And that happens from time to time. So we need to set that search text. Now when we set that search text, we need to make sure that every time we click a key that we set that search text. So right now we're just console logging. But what we can do is we can say set that search text E dot target dot value. Now this is going to set that search text, which is also going to change the value up here, which is what React is looking for. It's looking for a specific event handler like that. But because search text is also changing and it's going to come up here. Say it changed up here as well. That keyword is going to change as well. Which if we go back into our search view, that keyword is going to go into our title, which is going to go into our hero. So theoretically, if I type in here, if I type over there big mouse, it should change in here as well. So let's see if I broke something or if this is going to work. There it is. Star Wars. It changes for me. Pretty good, right? So that's working. And at this point in time, we can actually start working with an API, which is exactly what we want to start doing. We want to start working with an API because API's make the world go round. So big breath. I might have confused you on this one. I know when I was first learning react if this was definitely confusing for me. So what I like to do is think about my app is being, this is really big bucket. So let's say you've got like a giant, giant bucket and inside of it you have these little containers of ice cream. And so what we're saying here is app is our giant, giant bucket. Navbar is our flavor of ice cream. Home is a flavor of ice cream search views of flavor of ice cream. And we need to basically get a chocolate chip out of our nav bar and put it into our search field. And so what we need to do is we need to say, Hey, when you set that search text, pull it up out of that container in our bucket, and let it float around in our bucket for a little bit. And then when it finds that search view, put that chocolate chip, but that little nugget of chocolate back into the search view ice cream container. And so the idea is that our data flows from nav bar up to our app, and then back down into our search view. And we did this very fancy UI with a bunch of props. So we pass the search text so that we could always render the search text in our input field. Set search text is a function which we passed in as a set search text. We deconstructed it. No, that's the wrong one. We deconstructed it and set search text is in here. And anytime this value changes, it's going to run update search text. And then it's going to set that search text, which then bubbles back up to our app. And then goes back down into our search view, where we have our keyword and we're getting keyword from our search text here. We just happened to rename it as a property, as a problem. We have this keyword and then eventually lands up in our hero text. Go ahead and try this out, don't forget, you can also reference the source code at any point in time. If you get stuck, don't forget to ask questions. I am here to help. But most importantly, you know, tried to have some fun with us, even if it breaks. Every time it breaks and gives you an error, go in Google what that error is, that it is a great way to learn. So anytime you see an error, just go and Google it. Or if it gives you a link right to the React Docs, read the React docks, the React Dogs are really, really good.
17. Getting API keys: Alright, let's get started with some API stuff. So first and foremost, we're going to be using the movie database. So tm DB. And I don't remember his.com or.org. It's the movie db.org. And so you're gonna want to sign up for an absolutely free accounts. You don't have to pay for anything. I but you want to sign up for a free account and then you're gonna wanna go into your settings. And in your settings you have this little API section. Now, I already have an API key, so you're going to need to create a new API key. And I'm using the V3 off. And so this is my API key. And can I make a new one? I don't think I can make a new one in here. That's unfortunate. Otherwise, I would show you exactly how to do it. But what you can't do is just go ahead and create a new API key and you want to copy this. So just right-click copy and you're going to want to store that somewhere because we're going to reference it a few times. And so what I'm gonna do is even just in my code where I am going to be searching. What I'm gonna do is just put a comment in year t IMDB API key is equal to that, just so I have access to that later. Now what you can do is says developers dot the movie db.org. There's a few things we can do in here. And so first of all, let's go ahead and look for movies. And we can try this out. And what I'm gonna do is just slapped my API key and their movie ID. Let's do 559, student number 11. And let's send this request. And oh, it says service is unavailable. Interesting, interesting. I wonder if that's couldn't cause me problems while in recording in the next few minutes, I hope not. But essentially what this would end up doing is spitting out a bunch of information. Boat is going to be JSON format about this particular movie, whatever in this movie is. There's another API, API endpoint that we're going to use called Search and not just general search, but we want to search movies. We can try this out as well. And let me put that API key in there. It's already in their query Star Wars. And let's try this auto veggies or going to 503 on me as well. Yeah. I don't know if that service is actually down or what the problem is. We could look into it if we want. We're developers, we could figure out why this is happening, I'm sure. But let's not waste our time on that. That's not our service, that's not our farm. It is not our animals worth taking care of. That is someone else's problem. But it doesn't give us a nice little link that we can use in here. And we're going to end up wanting to copy this link. So I just copied all of that. And I'm going to store this in here. Example Link for movie searches. Searches is equal to and then just the link in there. And you'll notice that it says queries equal to star Space Wars in there. And that's what we're going to be adding. And that's what we're going to be dynamically changing. And our API key is going to be this API key. You can see that it selects in both spots and include adult. Yet let's make sure that's false so it's safe for work if you're watching this at work. And that is about it. So what I need you to do for this particular lesson is go to the movie db.org. Create a new account if you don't have one already, go to settings, go to API, and get an API key. So it should look something like this. It's not going to be exactly the same as mine, but it should look something similar to mine. So a bunch of letters and a bunch of numbers. So once you have that feel freedom, move on to the next lesson.
18. React based API requests: Alright, let's go ahead and make an API request. Anytime you type into the search bar. So anytime that search text changes, we are going to make an API request. And so for this we're going to be using US effect, which comes from React. We haven't used that yet. I has been complaining that it hasn't been used yet. Let's go ahead and use it. Type, use effect. And this is a function and it takes an anonymous arrow function. And as its second parameter, what is it going to monitor for changes? So it's going to monitor the search text. So we're setting the search text here. We're passing it down to the nav bar. That nav bar is going to onchange, update that search text, which is then going to set that search text. So set that search text, set that search text, which is then going to update this search text. So now we can say console.log. Search text is the search text. And I don't mind that I have a typo in there. That's okay. And let's just go ahead and refresh this and you can see there's nothing in there is a search text. But if I type Star Wars, you can see Star Wars is the search text. And that's starting to come along. And so anytime we type a character, we need to make some sort of API requests to TMD B. And so we can do that with fetch. And where's that link? That link that we wanted from that last lesson arrayed in here, that's the one we wanted. We're going to take that API request. And the only thing we want to change in here is where it says Star Wars, we want to change this to be a variable called search text. Then we're gonna take that response and we're gonna say, Hey, by the way, JavaScript, this response is going to be a JSON response. So parse it into JSON. And then we're gonna say take that remaining data and just console log that data just for a second. That's all we're going to do. And so when I refresh and I type Star Wars, you can see I'm making a bunch of requests here. We get one page with a bunch of results in here with 20 results per page. And so the first one here is an object adult false. It has a backdrop, genre IDs, which are IDs. We can make another API requests. The original title Star Wars overview princess layers, layer. Princess Leia is captured and held hostage by the evil imperial forces and their efforts to take over the Galactic Empire, yada, yada, yada. So we have all sorts of information in here. We have a poster path as well, which is going to be eventually an image that we can use. And so we can see that every time when we type something, we are getting different results. So total pages, 414 pages. The more we typed, the less pages we got. Eventually we got down to eight pages where you can type just Star Wars and get about a 160 results or a 157 in total, in total. So the one thing we want here is we want this array. Why we are looking for an array is because we want to set those search results. And the search result is set to an array. And the reason we want an array is because we can loop over an array easier than we can loop over a single object. And so this entire page here, this entire result is an object. And in fact, what I can do is let's just go ahead. Right click open in new tab and we can see the entire JSON response here. Let's just make this bigger. So we have an object page ID, results is equal to an array of results. And we can make all of the smaller because they're basically the same. Well, that was fun. Let's just open up one. And so this is an array of results. And in every result, every iteration is an object. And we just want this list and we just want this array of data. We don't want the page number. If you wanted to, you could have the page number and stuff later. Maybe as a way to extend this project as your own project. But let's go ahead and just keep these results. And so what we wanna do here now is we want to say set search results. Data dot results. Yeah, it was called, so this whole thing is called data. Oops, what did I do here? So this whole thing is all of our data and we want data dot results because that is a list, that's an array, that's what we want. And again, we just want that so that we can loop through it later using JavaScript. So we're going to set those search results as data re.search results. Now at this point in time, it's going to look like nothing has happened when we do a search in here. So I type Star Wars and it is making all these different API requests which is working. It's just not rendering anything yet. The other thing too is when you're in here, you can type in Star Wars and you can see that it's making all these different API requests in here for me. That's cool. It's working, but it's not actually on the search page and we want to force this to be on a search page. So in the next video, what I'm gonna do is I'm gonna show you how when someone types in here, you can automatically force them to go to the search page.
19. React browser history: Alright, let's take a look at how we can force people to the search page anytime you search for something, let's go ahead and get rid of this console log in here. We don't need that. We don't need that search results either. And in our navbar here, what we want to do is we want to import, use history as well as link. And then we're gonna say const, history is equal to US History. And then anytime we update that search tax, but we're going to do is we're going to force the user to go to slash search. And so watch this when I'd go, let's say to the about page and I type anything, I'll type the letter T. It brings me straight to the search page, changed my URL for me, T E S T. If I go back to the homepage, test two, it brings me back to the search page every single time I type. So all we did there was we said whenever we type with this input, whenever it's changed, execute, update search text, which is a anonymous function up here, an arrow function. It's going to push that history to search. And then we're going to set that search text. Now we used history here. We said contest history is equal to US history. And we imported history or the US history hook from React, router, DOM. That's all we did. So within three lines of code, we simply said, hey, user, whenever you're on any page, let's say you're on the homepage and you type in a letter. Any letter, go straight to the search page because you're searching, so should go straight to the search page for you. And it does that automatically for you? Yes. I said automagically because it is a little bit Magic. Go ahead and get that set up and when you're ready, let's head on over to the next lesson.
20. Mapping search results: Okay, let's take a look at mapping our search results. So in our navbar, we're setting search text and inner search view. Eventually it comes back down as search results and that go through an API and we're going to then use search results. So what we can do is we can use the search results and we can loop through each result and do something. So let's loop through each result using the map function in JavaScript. And then let's put all those search results in our document object model in our page. So let's say const results, HTML is equal to Search Results dot map. And this is going to take an object and in iteration, and it's going to be an arrow function. Now if you're wondering, where did I get object and iteration from? In here, where we're going through each of the search results. There is an object in here. So for the search result number one, we have object number one. For number two, we have object number two and we can see that it's an object because a, this is just JSON and be JSON looks just like JavaScript. And so this is the symbol for an array and this is the symbol for an object. And so that's where we're getting the object. We're saying for every search result, loop through all of them. We get the index. So it's 12345, et cetera, et cetera. And we're going to get the object. And so then we can say return div, whatever that object is and the data that comes in here. So let's say div original title. So I'm just gonna paste that in there. Object dot original title. And with our search results, we can put our search results in here now. And this is simply going to do a very cool thing. Check this out. Oh, we broke something. What did we break here? Let's go Star Wars. Oh, we keep breaking something. What did we, what did we break? Cannot read property map of undefined results. Let's see what we can do here. So we probably want to make sure that there is some sort of result in here and some sort of texts. So we wanna make sure if there is search text, then do this API request. Otherwise, if there is no search text, don't do anything. So let's try this. There we go. That works a little bit better. So the problem there was, there was nothing in here. So this query was empty and it was returning nothing for us, which isn't odd API response. But we had a handle that. And so we're saying only perform the API request if search text changes. And there is in fact some search text in there and it's not null, it's not empty. So now when I close this and three fresh, Let's go to the homepage. Let's make sure this works. And I type in Star Wars and we get all of these different Star Wars movies and stuff. So that's good. We get the first page in here. That is basically all we wanted to do at this point in time where we're filtering, which is great, we're filtering through an API. So if i wanted to type star, star track, if I can type that right, Star Trek and we get Star Trek. Star Trek Beyond Star Trek nemesis, interaction into darkness, evolutions, et cetera, et cetera, et cetera, et cetera. Now, there is a little issue here warning each child analyst should have a unique key property. And what this is saying is in our search view, this should have a key. And so we can simply say C0 is equal to i. And so this is going to be 0, then one, then two, then three, then four. So it's going to basically take that iteration and throw it in as a key. And let's go into make react happy. So let's go ahead and refresh. And you can see that error doesn't show up anymore. One thing to note is what happens if we type a bunch of junk in here and there are no results? I'm gonna leave that up to you if for part of your final project is to make a, whoops, there are no search results. There's gotta be some sort of text in here, so that's going to be left up to you. But continuing forward, we're just going to make this into a nice cards. So what I want you to do is make sure that your search is actually working. Now, really all we had to do was add three lines of code. In our search view, we have this search results and then we said constant result is equal to a bunch of stuff in here. All right, go ahead and try this out when you're ready in the next lesson, what we're going to do is we're gonna create a new component for our search results. And instead of just using a div, we're going to use a bootstrap card.
21. Bootstrap 5 search Results: All right, what we need to do here is, first of all, head on over to getbootstrap.com. I'm using Bootstrap five and I'm going to copy this to my clipboard and all all all I did was I went to components and then card. And I just chose the first one because I like this one, that's the one I want to use. And so the idea is anytime you type in here, instead of just saying Star Wars or something like that. And it should say, or should show a card with your image in it. And so we're going to generate that using a function based component. And so let's go ahead and create a new component in here. Const movie card is equal to, and this is going to take a property. And we're going to call this prop movie. We're gonna pass that in eventually. And it's going to be an arrow function. And this is going to return a bunch of stuff. And so I want to just bump that in and where it says Class is equal to k, we need to fix up every time it says Class is equal to two, class name is equal to IMG needs to be a DJ Sx image or a js X element. That source needs to be some sort of poster URL. So we'll talk about that in just a second. That all is going to be the movie dot original title. Let's also copy that from here into our HIV where it says card title, get rid of that, go somewhere in this is going to say Show Details. Now this currently does nothing. Poster URL is not defined, that's currently not going to do anything without that being defined. So let's do cons. Const. Poster URL is equal to, and we want this poster URL. Now, this is not an image, we don't know where this comes from. So what I'm gonna do is type in TMD BY poster path, image, something like that, and just click on the first result and it will give me something. So let's click on one of these. Yep, that's what we wanted. I think it was from Fight Club. So let's take a look at this documentation. And yeah, here it is, an image just like this. So what I wanna do is copy that and paste that into my URL. And I have this poster path with a slash in it. And so presumably, all I have to do is take out the last slash and all those funny characters in there. Paste my new one in here. And what movie are we going to get? Star Wars? And this is saying there is a width of 500, so that's what we want. The other option is original. So let's take a look at the original one. Origin. Now, this one is way bigger and look at that. Or we can do width of 500. And can we do with of anything else? I think it's just 500 and what about 250? No, image size not supported. And that's fine. We'll stick with width of 500. And so basically we want, we want to take this URL, this entire URL. And we simply want to replace this last part with movie dot poster path. And where I got post your path from was right here. So now we're doing a lot of moving around. So this movie card is instead of this, we're going to say return. Movie card. And that movie is going to be the object and the key because we always need to Key. And so that's going to take this object, for instance, this one right here. It's gonna rename it to movie as a prop. We're going to accept that prop. Then we're going to check that movie dot post your path, movie dot poster path. Append it to this URL here. And that's going to be our poster URL. Now, this is not going to look great at the moment. We're going to fix this up in just a little bit. But what this is going to do is render out a bunch of HTML for us. Let's go ahead and save this. And it's going to complain about this. Link will tackle that and just a little bit. But let's go ahead and see what this does to data. Something is broken. Oh, style. There's a different way to do style. Okay, so if you ever see this particular error, this style prop expects a mapping from style properties to values. It's looking for JavaScript here, oddly enough, for your style attribute. And so you would write it like this style is equal to double curly braces. And then you can say like the width is equal to 18 m comma, and then it's just an object. So it looked a lot like a regular JavaScript object. It just has the two curly braces around it. The outside curly braces. This one right there. And this one right here is saying, Hey, hop outside of HTML and use just regular JavaScript. And then in here it's saying, oh, this is what you're mapping is going to be. We don't need either of that will deal with style a little bit later in a new feature. Let's just go ahead and delete that because I don't want that max width in there and refresh declare a console, Star Wars. And you can see that it changed a lot of stuff in here. And it's big. It's too big. It's pretty close to what we want, but it's too big. So what do we want to do here? We want HTML results or results HTML and end if there are results, then we can do something like div class name. Let's throw this into a container. Let's add another div class name is equal to a row. And then let's put our results HTML in here. We're going to see that this is not quite what we're looking for, but this gets us a little bit closer. So this is now at least all inside of a container. The problem is, in our row, we have all these different cards and what we actually need as columns, because in Bootstrap five you have a container with a row inside, with a column inside. So what we can do is instead of writing class name card, we can say div, class name is equal to coal algae of let's do, let's see what two looks like. And large end up. That's also do col, md. So medium up, there's going to be 33 times three plus three plus three plus three. Quick math, there's going to be four columns because columns are always out of 12 and bootstrap. Otherwise do coal, SM, not SM but coal of two. And this always needs to be inside of a parent element. So let's go ahead and slash div that. And look at that. That looks okay. That looks a little crowded, too crowded for from high taste. Let's go ahead and say coal LG. Three. That looks a little bit better, still little crowded together. So for every one of these that's adding margin top and margin, bottom, margin on the Y axis of four. There we go. That looks pretty good. Let's take a look at what this does searching for Star Wars, check that out. It does an actual search for us now gives us the title, gives us a name. And that is how we add Bootstrap cards to our project. So what I would like you to do for this lesson is I want you to add Bootstrap cards to your project so far. And all we really had to do was we created a new component which we should be familiar with. We pass in a prop called movie. And in our map we said, use that new component prop of that movie just happens to be it's called OBJ At this point. We always give it a key so that react it doesn't complain. And then we just basically returned a bunch of HTML that was purely bootstrap. Well, not purely ninety-five percent bootstrap. And then we just swapped out some of the properties like the image SRC is equal to the poster URL. When you are done that and it is working for you. What we're going to do next is we're gonna change this link to a detail view. And so you can actually click this because right now you can't click this and it's not going to go anywhere. Just scrolling back up to the top of the page, which is not useful. We're going to set up a movie detail view so that you can actually use, for example, your website.com slash movies slash 11. And it's going to show you movie ID 11 using an API. And it's gonna look really nice and it's gonna do a bunch of stuff. So we're gonna do that next.
22. Movie detail component: All right, let's go ahead and add a movie detail view with API requests. So first things first, let's go ahead and get rid of this line. We don't need that. It's findable in other places. Doo-doo-doo-doo. Let's open up our app.js. And in our route, let's go ahead and create a new route. I'm going to copy this one and just use this. And it was going to say slash movies slash colon ID. And we're going to use this ID down the road. And instead of about VR, we're going to call this a movie view. Now I could have used this method, I could have used this method, doesn't really matter. I like using this method if you have props to pass in, such as keyword or search results. But I don't. So I'm just going to use a movie View and I'm going to let the U or L figure out what that movie ideas and then make an API request based on that movie ID. So let's go ahead and say this is going to fail to compile as expected, movie view is not defined. So let's go ahead and import a thing that doesn't exist yet, imports movie view from dot slash components slash movie view. It's gonna continue to complain. I'm just gonna rewrite about VW two movie view dot js and dent it, edit it and it ended. About view is going to be called movie view. And this will at least load for us now. So if I go to slash movies slash 11, it says about us. That's not right. And it was not a typo in the abutment? Yeah, it did say about us. Let's just change that about us. And there we go. And movie detail view eventually this is going to be the name of the movie. Now to get the parameter out of that URL, we need to first import. And what is it? I think it's used params, if I remember correctly, use params from React, router, DOM. And then let's grab that ID and we'll deconstruct that. So const ID is equal to use params initially going to magically figure it out for us, which is amazing. And console.log that ID. And let's open up our tools here and we can see that it says 11 in year, so it's getting 11. Let's do like 550. It gets 550. So that's perfect. We are now pulling data out of our URL and into our application. That's exactly what we want to use. Next, we want to make sure we have some movie details in here so we can do const movie details as equal to note naught equal to set movie details is now equal to US state. And this is going to hold an object. And the only movie data that we want to hold is this particular data in here. We don't want all the movies, we just want a particular movie in here. And in fact, what we can do is if we go back to our developer documentation here, let's go to movies, movies, movies, where are you movies? We want to do. Yeah, let's just do get details. Send request. Five over three, that's not working for us. Let's copy this and paste. And, you know, actually paste just the text that you want, not to the button as well. There we go. This is all the data that's going to come back to us. So I'm gonna close the original one. Close up bootstrap. I don't think we're going to use that anymore. And what do we have it in here? We've got budget, homepage ID, IMDB ID, which is pretty cool. Original language, original title, overview, popularity poster path. We should have a backdrop as well, which is going to be a slightly different image. Just a bigger backdrop like a giant poster. For instance. Production company's revenue status, tagline, et cetera, et cetera, et cetera, all sorts of stuff in here. So this is what we want to use. We want this Lincoln here. So it's just tuck that in our back pocket for now. Now we need to use a fact. So whenever this ID changes, we need to then go and fetch new data from TM db. So we need to import, use effect from React. And we're going to write an effect in here right away just to prove that this is going to work. So we're gonna say Use effect. It's going to take an arrow function, Console.log, make an API request. And second parameter is going to be what is it looking for? It's looking for the ID. So anytime this ID changes in the URL, it's going to, it's going to make a, an, an API request to whatever that ideas. So let's go ahead and save this user state is not defined. Yeah, that's correct. User state is not defined. So use a fact and it's also important use state that Rio, complaining about some stuff that we can fix that up in a little bit. Star Wars. And we can't go to any one of those, but let's go to movies slash 11. And we can see 11, make an API requests to 11. That's perfect. That's what we want. So okay, let's take a step back here and let's go back to our search field. And let's do Star Wars. And when we click one of these buttons, it doesn't go anywhere. It just brings us back up to the top. And so we want this to actually go to our new detail views. And what we can do is go into our search view and swap out a HREF for link is equal to. And this supposed to go to movies slash DID whatever that's going to be, we're going to swap that out for a const in just a second. We need to import link. So we import link from React Rotterdam. And then we can get the const detail URL. I call it a detail URL because that's what we call it in Django. And the idea is it's going to show just detailed data on a particular movie. So it's not going to show all your movies, which is going to be like a ListView or search view, is going to show data on one movie, one particular movie with an ID, and that's called a detail view. And so this is supposed to go to slash movies and then whatever that ideas. And I got that ID from my app.js. And that comes in to, to, to, to, to do route, path movies colon ID. Now what I wanna do is I want to replace that colon ID with the actual movie ID. So I could do movie DID, I believe it is. And let's take a look at this. This is our API response. Movie ID is equal to 11. That's what we're looking for. So that works perfectly. Detail URL and just replace that string with our variable. Let's save that. And let's go back to our page here. And you can see that when I hover over at the bottom-left there it says slash movie slash 123475. Let's click on that one and it goes to a movie VW 13475, make an API requests and 13475. So we're getting there, we're getting there. We're making this work slowly, but surely. We're creating a detail view here. So we can close up our search view because I think that's all done now. And let's go back to our movie view. And what we're going to want to do is we're going to want to fetch this data. And so let's go in here, grab this link. It has our API key and there were just totally fine. I'm just gonna deactivate my API key later or it'll get deactivated when too many people end up using it. But in here we want to swap out that ID. So we went to api dot the movie db.org slash 3 slash movies slash whatever that ideas. So in my case it was 11. And then my API key. Then we're gonna take that response and we're gonna say, hey, response be JSON, or it's coming as JSON and sort of converted from JSON XML, parse it from JSON. Then we're going to take that data and we're going to say set movie details is the data. And then in here we can change this to be something like movie details. Dot original title. And whereas movie details coming from currently, it's set as nothing. But what we could do. And what we are doing is we are using this effect. So anytime that ID changes, we're going to then make an API requests to that ID. We're going to say, hey, it's JSON. Work with that data as JSON. Set that data, which are going to then change our movie details. And whenever we use the set part of our US state, it's going to re-render this entire component for us, in which case, and this is really nice. This is going to be blank at first and then it's actually going to show up with a name. So let's go ahead and do this. And let's go to number 11. And you can see how when I refresh, it's sort of there's nothing there and then all of a sudden there is something there. That's because it's making that API requests. It's saying, hey, use number 11, then make that API request and it's using number 11 again. So let's get rid of that console log. And what else do we want to do in here? That's just about it. So what we're going to do in the next lesson is we're going to add some more details in here. We're going to add a container, a row, and a bunch of columns, some extra information. And we're gonna, we're gonna make sure that there is some sort of loading in here so that by default, if this is still loading, it's going to say loading and then it's going to show the title. So instead of just being blank and then join with that, at least it shows something instantly. So we're gonna do that in the next lesson. What I would like you to do for this particular lesson is in your movie view, use params, use state, let's put those together. Use effect. Get that API requests. Make sure you put this as your ID. If you don't put this as your ID, let's say you put this as movie details. You're going to set those movie details. It's going to be then trigger this use effect, which is then going to cause another API requests which is going to set movie details. Movie details will be different. It will then cause this effect to run. Again. We don't want that. We only want the effect to run when the ID is changed. So when you go from like slash movie slash 11 to slash movie slash 13475, go ahead and try that out and when you're ready, let's head on over to our next lesson.
23. Loading state: All right, let's add a loading state to, to our page here. And the reason is because in our last video, we refresh the page and you can see it's blank for a quick second, and then it actually shows up with the data, so it's blank for a second, then makes that API request, gets the data, then re-renders or component for us. And that's cool and all. But that's not really a good user experience. Sometimes we just want this to say loading and then automatically replace it. So the idea is that your users don't get frustrated with the idea that there are, with the concept that there could be no information until there is information, they just always want to see something. And so let's go ahead and add a loading state. So we're gonna say const is loading and set is loading is equal to US state and by default, is it loading? It is. And once we get data in here, we can say set is, loading, is false, it's no longer loading. And we can create a new function inside of this function. Let's say function render movie details. And we can say if is loading, we want to then return hero with a text of dot, dot, dot or loading dot-dot-dot, it would be better. Otherwise if there are movie details and where I'm getting is loading and movie details from is up here movie details and is loading. And I'm just setting those changes using state. So if you are loading, then it's going to make this API requests and then it's going to say that loading is false. It's no longer loading. If when we render these movie details, it is in fact loading, it's going to say loading in our hero. Otherwise. Let's just move this up into this line here. And let's render the movie details. So instead of a big return statement, we're going to return a function which is then going to return some more JS X4 as depending on a conditional. Okay, let's refresh. Ceo says loading real quick. Loading, loading, loading Star Wars loading Star Wars, loading Star Wars. That's what we want. Now, the reason we do that is because if someone's internet connection is really, really slow, it might take a little bit of time. It might take 2-3 seconds for any API to respond back. And so while they're waiting, at least it's going to say loading. And let's just do this as an example. Settimeout. And what we're gonna do is we're going to change this to wait for two seconds or 2 thousand milliseconds. It's grabbed that move that up a line. And let's refresh. It says it's loading. And then it says it loaded sorrow or so we mimic the idea that an API could take two seconds to respond. Now my internet is nice and fast, so it just flashes very, very, very quickly. But if someone's internet is slow, it might show up as loading dot, dot, dot for a lot longer. And that's why this is important. So that's how we add the is loading in there. So we say is loading set is loading. And we, we could've done all of this honestly inside of our main return. But just to make this look a little bit nicer, what we ended up doing was creating another function in here and saying, if is loading, then return the hero with loading. Otherwise, return a bunch of other stuff.
24. Movie component API: Now let's go ahead and make this a little more complicated. And not complicated, I guess because we're not really doing anything complex here. We're gonna write something big, bigger. So let's open up some JS x in here and close that js X. And we're going to have a hero in here, but we're also going to have a div class name. And it's going to be a container. We're also going to write div. Class name is equal to row. And we're going to put two columns in your div class name. The first column is going to be col md E3. And this is going to be the left column. And then div class name col md nine. And this is going to be the right column. And let's go ahead and add some margin as well. Just what's not quite hugging our banner or our hero all the time. Look at that left column, right column. So let's in the left column is go ahead and add an image in here. So we need that poster URL. And so we have a poster URL. Where are you? Poster? Oh, it's called poster path. And that's coming back in our movie details. So now we can say in here const poster path is equal to and we know that it's going to be movie details dot poster path. And where did that image come from? Rate in here. We want that 501 as well. So let's just grab that first part of that URL. And we're gonna put that in here. And we're going to append it with the movie path. Now what I want you to do is when you're done working on this project as your homework, what if there is no poster path worth that poster path comes back as null? What do you do that? Because this is going to say image that team db.org slash T slash p slash w 500 slash null or might not even say slash null, it might just be null. So how do you handle that missing image? And that is something for you to work on as well. So todo deal with a possible missing image. And that's really just a conditional. If there is something, if there isn't something, change this variable. So that poster path, let's go ahead and add an image in your IMG SRC is going to be that poster path. Alt is going to be dot-dot-dot. We can put anything else we want in there. Class name is going to be IMG fluid to make it responsive using Bootstrap. Let's give it a shadow and let's round it. And let's see what this looks like. Oh, there we go. Got little image in there. And then let's change some of the stuff in the right column. So let's say there's going to be an H2 in here. And this is going to be the movie details dot original title. And let's go ahead and add a p with a class name of lead, and that's just bootstrap. And let's put movie details. I think it was called Overview, to-to to-do overview. What this movie is about. Movie details dot overview. And I've got that. So now we have a little bit of an overview here and you can put more details in here if you wanted to. You could put a link to the homepage. If you wanted to. You could link to an IMDB page. There's ratings in here as well. There's vote counts, so the average person likes us. 8.2 out of ten. Status has been released as it not been released. For example, let's take a look at Deadpool. And I just found out today that there's going to be a dead pool of three. And this is the ID 5.3.3, five, 35. Let's change that in here and let's see if that released. Status is changed. Released its planned. So Deadpool three is planned and there's no voting for it. So how do you deal with that if there's no votes? So there's a lot you can work with here. There's not even an overview. Yeah, we don't know what the movie is going to be about. So maybe put that in an if statement. So that is how we create a little bit of a detail view. Now this isn't the greatest example just because there was nothing in there but the Star Wars one looks pretty good. Now in the next lesson, let's go ahead and take a backdrop, which is going to be this backdrop image. And let's place it back here so that the text is always layered on top. And we're going to write a little bit of CSS for that.
25. Adding a backdrop using CSS: Alright, in this video, and this is going to be our last lesson before the final project. I believe. We want to change this image back here. So right now it's just gray, but let's go ahead and actually change it to an image so that there's something a little more themed about this. And for that, we're going to need to work with our hero component once again. So let's open up our movie view. And in here, our hero, we're going to add a backdrop. Backdrop is equal to some sort of URL. So let's call this backdrop URL. We don't know what that is yet, but let's go ahead and figure out what that's going to be. So const backdrop URL is equal to something and it's called backdrop path. So we can put a variable in your backdrop path, movie details up backdrop path. And then we could probably take this as well. And let's call that original. I think that's what it was a few videos ago. And we're gonna take up backdrop URL. And we're gonna put it into our hero, which means we now need to open up our hero and accept an optional backdrop. And just for funds these, let's go ahead and let's see what that backdrop is going to be. And let's open this up. Yeah, that's a big image, that's exactly what we want. So we want to put that image back here. Now for that, we need a little bit of CSS. So first of all, let's go ahead and call this our hero container. And for H1, let's give this a class name of Hero text. And for an optional div for the image. We're gonna say className, hero backdrop. And we're gonna keep this backdrop in here for now just so we can access that if we need it in just a little bit. So now what we wanna do is we want to open up our app.js S, which we haven't touched at all yet. And let's, let's split our screen. And so we have BG dark text, white padding, five Hero container. So psu dot hero dash container. And this is going to be position relative. Is that index of 100. We also have hero 2.txt, our hero dash text, position, relative zed index 200. And then we have our hero backdrop, hero backdrop. And this is going to be position absolute. Top, 0, left, 0, width 100%, height 100%. And background x2 background size is contained. And let's just leave it at that for now. We'll adjust it in a little bit. I'm sure this is not going to turn out the way I expect it to turn out. So we have this hero backdrop and that matches here. Let's go ahead and save this. Yeah, I'll just close this for now. We can always reopen that a little bit later if we need to. And we need to set this backdrop, this background image. So we say style, opened our JavaScript and then open an object with our mapping. Let me say back, ground image is equal to, this is where it gets weird. Back ticks, URL, opening and closing parentheses. Then we have a variable with opening and closing curly braces. And then we put our backdrop URL in here. So this is a lot to write and what I like to do is I just do URL open and close. Then inside of that URL, I write my variable. And then inside of that variable I write the actual variable name background or not background but backdrop. And that just sort of keeps it manageable. Because at this point, this gets to be a lot to look at even though it's only, well, what does that data to the 3839 characters that this part looks like a lot. So let's go ahead and save this and look at that. That looks not bad. And as expected, it didn't turn out the way I expected it to. So let's go back to our app.js S. Backyard size is going to be covered. And let's change the background position to be center and center. And what if that text is white on white? That can be tricky. So let's do opacity or it will pay city 0.5. just make a little bit darker and it's always going to show up. Let's maybe make that just a touch darker as well. And there we go. Now let's go look at another image. Let's do Star Trek, like that. Looks pretty good. Star Wars. Let's look at this one. Nice, that looks nice and themed. And so we now use a little bit of CSS. We also used this, let's use a conditional in here just to make sure that this div doesn't show up if there isn't a backdrop. So we can say back drop. And, and we'll put that div in there, refresh. And it works. Check this out and even says loading and then loads everything all at once. That is really, really nice. We really, really like that. Now that's pretty much all there is to do for this for this entire project. We did a lot in here. So in the next video, what I'm gonna do is I'm going to describe to you some of your well, basically the things that you need to do in order to finish this project says, I got us about 90% there. We learned a lot along the way, but there's about another 10%, which maybe 5%, which I would like you to do. And we'll talk about that in the next lesson, which is going to be your final project.
26. Your project: All righty, welcome to your final project for react to a one. Now this is a little bit interesting, a little bit different from the way I usually do things. Usually I showed you the fundamentals and get you to build something on your own. But because React can be so big and there's so much information out there. What we did was we built this entire movie database searching application out almost entirely. And what I'm going to do is leave the rest of this in your hands. So there's a few things I want you to do for your project. And there's a few bugs that I purposely have not solved yet. So there is no 404 page. So for instance, if I go to slash missing page, there's just nothing there. So there should be something that I want you to create some sort of catching page that says, Hey, this page doesn't exist. There should be a 404 in there. Sometimes a search result doesn't have an image. And a good example is Wanda, I was trying to look up one division for instance. And there's just no images for one to, I can't even say that name or the movie just Called Wanda. And so what I want you to do is if there is no poster path, I want you to change it to be something just generic, just so that there's always an image in there. There's also no handler if there are no search results. So if I type in one to 99999, it doesn't say anything. And there should be something in there for good user experiences says, hey, look, I know you're looking for one to 99999, but there are no results. Just doesn't exist. So you're going to need to create that. And the search button, Search button in the navigation does not work. So if I type Wanda and click search, it doesn't go anywhere, it doesn't do anything. And that's going to be a big one, that's going to be a hard one for you to implement. So go ahead and give those a shot. I'm purposely leaving you hanging about 5% of them were about 95% there. So you just need to finish up those last little bits. And then we are done. The nice thing about this and the reason why I'm doing it this way, and it's a little bit different from how I usually create a project, is these tasks I've purposely left out of this project so that you have to solve them on your own. And this is very, very, very similar to basically a take home assignment that a company is going to give you when you apply, when you work with them. And so once you get through your interview phases, company will often give you a little bit of code. They'll email it to you or something. And then you have to work out some of the bugs. And you have to figure out what those bugs are and how to solve them on your own. And this is really good real life practice where 95% there, you have to get us over that finish line with that last 5%. Because that is how we do it in the professional world. That is how pretty much everyone does it. And so this is just really, really good practice for you. So go ahead and try that out. And don't forget if you get stuck, you can leave a question down below. Last but not least, my name has been a Caleb Tolkien has been no, My name is Caleb Pauline. Thanks for following me through react to a one. Don't forget, you can download the source code at any point in time and have some fun with it. You might need to swap out the API keys. I'm not too fussed about to the API key is being mine or someone else's. So you don't have to swap those out. But you can definitely take a look at the source code. You can always follow me on Twitter at Caleb Tolkien or on Instagram. Coding, dot for dot. Everybody. Thanks again for checking out reacts to a one. I hope you had a lot of fun and hopefully I will see you in another module of mine, bite.
Kalob Taulien, Web Development Teacher
