React JS | Beginner Fundamentals - Project Movie App - Hooks [2020] | Thomas Weibenfalk | Skillshare

React JS | Beginner Fundamentals - Project Movie App - Hooks [2020]

Thomas Weibenfalk, Developer and Designer from Sweden

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
25 Lessons (5h 3m)
    • 1. Introduction

      5:48
    • 2. Tooling

      4:38
    • 3. create-react-app and dependencies

      10:33
    • 4. JSX and React Components

      12:31
    • 5. Scaffolding Home Page

      13:00
    • 6. Crash course in Props and State

      13:27
    • 7. Fetching data from TMDB API to Home Component

      25:18
    • 8. Styled Components 1 - Header

      17:02
    • 9. Styled Components 2 - Hero Image and props

      19:17
    • 10. Styled Components 3 - Global Styling

      7:06
    • 11. Grid and MovieThumb

      18:52
    • 12. Load More

      13:08
    • 13. SearchBar - Controlled components

      20:31
    • 14. Routing with Reach Router

      8:15
    • 15. Scaffolding Movie Page

      5:37
    • 16. Fetching data from TMDB API to Movie Component

      15:26
    • 17. Navigation and MovieInfo

      15:40
    • 18. MovieInfoBar and Actor

      11:16
    • 19. PropTypes

      13:03
    • 20. LocalStorage and SessionStorage

      13:58
    • 21. Deploy to Netlify

      8:18
    • 22. Deploy to own server

      2:41
    • 23. CLASSES - Refactor SearchBar

      7:06
    • 24. CLASSES - Refactor Home Component

      11:30
    • 25. CLASSES - Refactor Movie Component

      8:37
42 students are watching this class

About This Class

Do you want to learn how to build a modern and beautiful looking Movie Application?

Are you a developer and a beginner at React? Do you want to learn React.js fundamentals and intermediate React in a real world project oriented course? Do you like quick learning and straight down to the point?
Then this is the course for you!

Guaranteed no "foo" and "bar" ... and no "to-do-list" app ;)

There's many great React.js courses out there but they're very huge and A LOT to grasp for beginners. My teaching style and belief is that you learn more by creating many smaller projects than one overwhelming 25 + hours course that tries to show you everything and don't focus on the fundamentals that much. So this is a 5 hour(ish) course where You'll learn how to create a Movie App from scratch based on The Movie DB API.

What will we do in the course?

We'll build a light version of an IMDB style React DB Web Application and dive straight into creating our app and gradually learn more until we reach the finish.

My main goal with this course is to mix fun with teaching. There's many tutorials and courses out there that are great but too complex and focus on a lot at the same time. I'm a great movie lover myself so therefore I thought it would be fun to create a web application based on movie data for this course. Hope you enjoy it too!

Please make sure to download the STARTER FILES from the resources!

PLEASE NOTE! We're using a free API key from The Movie Database in this course. This is a great API with a lot of information about Movies and TV Series. Please note that I can not guarantee that the API key i have provided for the course will work forever. Therefore I will not take responsibility for this. I strongly recommend you to get your own free API key from The Movie Database. Just register for a free account at The Movie Database and go to your account setting area and select API in the menu. There you can register for your own free API key.

In this course you'll learn:


- React Fundamentals and intermediate techniques

- React Hooks

- Styled Components

- Components, props and state

- JSX syntax and expressions

- Fetching data from an external API

- custom Hooks

- Use Create-React-App

- Deploy the finished App

- ES6+ concepts and syntax

- Use localStorage and sessionStorage to keep state

Transcripts

1. Introduction: welcome to this re recorded and second edition off my react course. We are going to build a movie application based on the movie database. A p I. Andi I created a new version of this course costs. Things have changed in the react world. For example, we know got something that's called the Hook a P I and that change things locked in the react world. So we are going to rebuild this one using hooks, and I'm also for the sake of it, going to show you how to create this application. You could say the old way by using class components, but that will be as a bonus at the end of the course. First, we're going to build it, using the react hooks and all the new modern ways we have to create react applications. In this video, I thought I could show you the finished application and what we are building and also quickly show you the movie database. AP I What you see here is the finished application. I put it on Raven or MDB Dr Natl If i dot com, if you want to shake it out so I have done some few updates on the U I also for this one. I, for example, set of border radius on this once and also changed the load more button and some small things to make it look more modern as of where the U I. Trends are going right. No. Okay, so let's start from the top here. We're going to build this header here. We're going to have the logo and also the movie database log on. The way React works is that you create components. So we're going to talk a lot about components in this course, and this is a beginner course, but I think it would be great to have some knowledge about the basics in react, for example, go to react Js doc Torque. And they have a great tutorial here and explain everything in the docks. So I recommend you to read through things here to get the basic knowledge, how react works, and then I'm going to explain stuff in the course of also, of course. But I think it would be great if you start here and read about react by the people that actually created react. All right, so then we're going to have this kind of here image with the text here. This image and text are based on the most popular movie right now. So at the start page here at the home pitch, we're going to show the most popular movies on Weaken. Grab the most popular movies from the movie database AP I easily. So I'm going to show you that also on, we're going to be able to search movies here. As you can see, we're showing the search result here. The views change to the search result, and if we remove this one, we go back to our initial view. We're also going to be able to load more movies here, Justice Man asked various Andi, also, we're going to save stuff in the local storage and the session stories are going to show you that also, and if you click your movie here, we're going to get more info about the movie and we have the poster here, Onda Header and a text here about the movie. We also going to show the IMDB rating here, and this is also one thing ashamed because I had this kind of a meter showing up here before, but I think it looks more clean and nice just to show the score in kind of this white circle here, we're going to grab data to show the running time, the budget, the revenue and also the actress. And this is where this tutorial stops. We're not going to be able to click and read more about these actress because I think that this will show the most basic stuff in react. And you can probably addis in yourself because it's going to work the similar way to create the page for the different actors and stuff like this. So your yeah, your possibilities are endless here, actually, because the movie database is great, you can use it to grab a lot of data so you can actually have this application as the base and extend it. If you want to do that, you can also create a log in for the user and stuff like that when you get more comfortable , we'd react and how you could build things like that. But for this course, I will show you how to build this page and also the start page to get you going, as this is a kind of a start, of course, and I don't want it to get too long. So that's why I have limit this tutorial to these pages. All right, so this is the basics of this application. And as I said, I'm using the movie database A P I. And you can read all about what the movie database is at the movie db dot org's and also you have on a P I overview at the movie. Db dot org's slash documentation slash ap. I and here can get the different endpoints and why it works the way dust and a lot of other useful stuff for the A p I. And in this course I'm going to provide you with a pikey. But I can't guarantee that it will work forever because this key is going to be used by all you people that are enrolling this course. So I don't have control over If something goes wrong somewhere, and someone do something that makes the key another legit key. So a strongly recommend that to go to the movie D B side and you sign up for an own account and you can grab your own a P I key and you do that by go to your profile and you have settings. This one is in Swedish now for me, but I think it will say settings here in English. And then you have something that's called a pie. And inside of there you can get their own free ap I But you have to register to get this a pikey. So this is what I recommend. Create your own a pikey, and I will show you in the course where you're going to put that in your application. All right, so I think we're good to go. In the next video, I'm going to show you to set up And what tools we will be using in this course to get this up and running. 2. Tooling: way going to talk a little about tooling in this video and what you need to get you started . And if you're not a complete beginner, you can, of course, keep this video. But I think it's good to show you these things. If you're a beginner at coding and don't know what tools to use. And if you that kind of a beginner, I actually recommended to learn some other stuff before you learn. React because you're going to need some basic devastate skills and basic HTML and basic CSS skills. I think to be able to enjoy this course to the fullest, it's a little bit advanced. If you're just starting off with Web development, I think there's a lot of things you should learn before learning react. Well, that's that We're going to need a few things that will make our life easier. And first of all, if you're using chrome or in my case, I'm trying out the brave browser right now, and there's something that called React Developer tools, and that's an extension for chrome. Or it works in brave, also, that you should download because it gives us access to this neat way off inspecting or react application in the browser. So as you can see, they actually just changed these ones here. It said React before. But they've split it up in components on a profiler and the Profiler Don't Burke. Now it says here that it require production profiling Bill. And to be honest, this is completely new. They just released it the other day, so I haven't checked this one out. But the most important thing here is the components tab, where we can look at their different react components, and we can also see props and stuff like that. So react developer tools is the really great tool. You can, of course, manage without it, but I recommend you to install it because it will make your life easier when you're inspect your application, your building. We're going to use NPR models when we build this application. So if you don't have installed no Js, you have to install that one. So go to know J s dot org's and download the latest version and install that one. We're not actually going to use node, but we need to use the note package manager that's called NPM because otherwise we can't install all the dependencies that we need and use models in our application. We're also going to base this application on something that's called Create Racked Up, and I'm going to talk about that in the next video. And of course, you also need to have some kind of, ah, code editor and in my case, as yeah, I think in many people's case I use something that's called visuals to the code, and you conducted it for free here at co dot visual studio dot com on it looks something like this. It's a great editor that you can start to your LA Kings and change theme and things like that. I'm using a theme right now That's cooled. I think it is. I think it iss one monarch a eighties. I also get a lot of questions about the front amusing, and I'm using a phone that called operator Mona. It's a quite expensive front. It's about $200 so you can find alternatives to this front if you don't want to pay that much for it. And also the colors in this steam amusing or quite yeah, it s it said is quite of the eighties colors almost like Yeah, you know, the old TV serious, my advice or something. They use this kind of colors in that world. So I think it's actually nice because the colors here are quite, you know, Sutter and not that bright. So this is the stuff amusing. And also, one great thing with visual studio code is that you have a built in terminal. I'm also using a match. So in my OS, I have this built in terminal, but I never use it. And you probably have something similar if you're using windows, but you can use this built in terminal in visual studio code on. I'm actually using another terminal that's called hyper. We're not going to be that much in the terminal. Mostly when we install the dependencies and set everything up. And, of course, we have to start up or developer environment every time from the terminal. I think that's it about tooling, and I'm actually truly excited to show you this one to build this application course. I love using react, and I also love movies. So I think it's a great combination for me as a teacher to show your product like this, and I hope you're really going to love it as much as I do, and you can see how great it is to build applications with react. And in the next video, we're going to look at the product set up. We're going to talk about, create, racked up and all the dependencies and stuff like that that I'm using in this product. 3. create-react-app and dependencies: Welcome back to the course in this video. We're going to set everything up for us and install, create direct and all the dependencies that we need for our application. And I'm actually going to give you two options here. Are you, Tim, full of along in this video and install everything from scratch. Or you can use a pre installed folder in the start of false where I set everything up for you. So if we take a look inside or start of files, you can see that there's some different numbers here and different folders, and it's the number two reactor MDB start here. If you're not that interested in installing, create, racked up and all the dependencies, you can just navigate into this folder. And when you're inside of that folder, you just type NPM install and that will install all the dependencies for you. And you're good to go after that when everything has installed, you can just type mpm start, and that will start up your application. But if you want to do everything from scratch, you can just follow along now because we're going to install everything we need. The first thing we need is to bootstrap or application with something that's called Create Racked Up Create. Racked Up is something that the development team that created Wrecked has created for us to make things easier to get a started with direct application, it will boost up a development environment for us that is based on the Babel and Web pack, for example, you could, of course, set up your own environment, but we will not do this in this course we will use create, racked Up. And it says here, if we look at MPM day as dot com that we can install it with MPM, I create tractor, but actually don't have to do that because, no, we also got something that's called MPX on MPX. Let us use packages that support it kind of remotely. So that's why we don't need to install create tracked up globally on our computer. So if we never get somewhere where we want to put our application folder, we can just type MPX, create dash, react to dash up, and then you just name your application, and in our case, it's going to be react, dash or indeed be so this will grab the latest version off, create racked up remotely and set up a product in a folder that's called React Dash or MDB . So if we press enter now, it will install everything for us. It will take a little while, No. Okay, and I'm back. Hopefully everything went smooth for you, and you should have a folder that's called React, Dash or MDB, and we can never get into that folder with CD React, Dash or MDB create Racked Up, created some folders and files for us here, and it's time to install all the dependencies we need. No, the first thing we need is something that's called prototypes and prop types. Is the package that let it types Check your props in your application, and that's really good, because you always should type. Check your props. I won't use it in the beginning of this course, as I think it would be too much to learn in the beginning. But when we have created everything, I will have this video where I show you how you can use prop types to make type, checking off your props so that's a package we need to install. Then we need to have some roading for our application because we want to be able to change page. If we, for example, click on the movie, we want to go to that specific movie, and for that we need some routing library because we're not doing any reloading in this application. It's a single page application, so we have to kind of simulate that we change page on. I think the two most popular roading libraries are react Rohner and reach Roeder. In our case, we're going to use Reach Router, and I'll tell you why when we reached a point in our application. All right, styling can be made in many different ways. In your act application. We are going to use something that called style components on. I think that it's gained some ground the latest year. It's probably the most popular way right now. I wouldn't say that for sure, but I think it is. So we're going to have some special videos where I show you how to use style components, and also we're going to use a couple of front also microns. So that's why we are going to install the dependency that called React Dash Front also, so that's the four packages we need to install in our application. Let's go back into our terminal. Make sure you're in the correct folder here. That's direct Dash R and D B. It's really important when we install these dependencies that we are in the right folder and we could, of course, install them one by one. But we can also install them in one go and we can do that by typing and PM I and we have off prototypes, prop dash types. Then we have a reach Roeder. So we installed it by typing at reach forward slash router. Then we have a style dash components on our racked dash form. Awesome. And this will make sure that we install these dependencies in one go. So we press enter and this will also take a while. Okay, you may get some peer dependency warnings here, but we're actually fine. We're not going to use these in this course, so you can just ignore this one's Pierre Dependencies is something that is a chapter of its own. So I won't go through that here. But you have to install Pierre dependencies yourself with MPM, and in this case, it's for example here it's typescript, dependencies, and we're not going to use typescript in this course. Okay, we can open up the code editor again. And as we can see here, if we look in the package Doc Jason, file, we can just check that everything has installed as it should. So we have a reach rotor or prop types or react and react dome. We need this one to be able to render our things in the dorm. We have the react front, awesome, the react scripts and style components. And that's everything we need. We have one more thing we have to do before we go to go. And that is I provided you with some files. We have to cook it to this folder and you can find them in the start of files. So if you navigate into your start of files and then you have a folder that's named one SRC files to be copied to your create racked up folder, and if we look inside of that one, we just have ah SRC folder And inside we have a components folder conflict dot es helper stopped. Yes, and index dot es. So first, if we just take this folder source. We can cope it on, actually Weaken. Just delete the SRC folder in our react dash or in the bef older because we're not going to use this one. We're going to replace this with SRC folder that I provided for you. So I just delete this one here like this, and I'll make sure that I grabbed SRC folder that I've provided. It's the one in the folder that's called one SRC files to be copy into your create tracked APP folder. Then I navigate into my application folder and as I deleted my SRC folder, there's nothing there now so I can just paste it in. If you didn't delete this one first year, of course, have to replace everything to make sure that you could be the new files to this folder. Okay, then we can take a look inside of the SRC folder that you just copy it and see what it contains. First, we have a conflict doctor is file, and this is the conflict for the movie database. AP I. So we have the AP bureau on the A P R Ky. The image based Ural, and we also have a backdrop size on the poster size and these. Yeah, I've provided these for you. So you don't have to set this up yourself. So we're going to use these in the course, and then I also provided you with a helpless file. And this is a function for calculate time and also function for converting to us dollar currency. And there's an index dot Js file on. Yeah, it's almost the same as the one that was there before now. I moved my up component inside the components for order. So that's the thing I've changed here. Okay, then we can take a look inside the components folder and there we have our abductees file. For now, it just says, start here. So this is going to be the starting position. The starting component for our application then are provided you with an images folder. And for example, the logo is here and the movie database logo. It's on SPD, so we don't see it here. We just see this. Yeah, kind of code here for that one. All right. And then we have a styles folder and the stars is going to be start components as I provide to you. I'm going to show you start components. But I'm not going to style every component in this course. So these are the styles for every component on. I'm going to import them and use them when we go through the course. So if you're very interested in CSS, you can just check these files out and see how are styled this application, all right? And I actually think that is it. So if we go back to the terminal and yes, type and PM start, it should open up automatically in your browser. In my case, it opened up in another window here, so I have to type it in myself here. I can just paste it in its local host at the Port 3000. And as you can see, it gives us the start here, and then we know that it works. So hopefully everything worked out for you. And if it didn't and you feel that this is hard, you can just use this folder that I showed you before that has a number two reactor and DB start here instead. And this one should work because I have installed everything for there. So just run am PM in store inside that folder and NPM start and hopefully it will work. And also, I want to tell you that if something goes wrong along the road in this course, you can always check in at the steps solutions that I provided for you. And you can compare your code to the working finished code for each video. Here, you'll also have a folder with finished application where you also can compare your code. So always check there first. If you can't find a solution if something goes wrong for you. So that is it. I really hope you will enjoy this course. I sure in your trading it and it will be a joy to show you how to create this application. 4. JSX and React Components: All right, we are going to start building something on this up in this video. But first I have to talk about something that is called J S X. And it stands for JavaScript, XML and JSX is something that will make it easier for us to code in react. First, we can take a look at the reactor Js doc torque page on. In their documentation, they have something that's called JSX in depth. And on this page they will explain most of the things you have to know about JSX. So I highly recommend that you read this one and I'm going to show you the most important things for this course. And JSX is awesome because we can write code that looks almost the same as HTML. But keep in mind that it will not be html. We are writing, it's JSX. And the ASX will be converted by Babel into JavaScript and they actually have a link here on this page, the online Babel compiler, where you can write code with day of sex and it will show you how it will be converted into Deva script here. So this one here we're using a div here with some text inside it, and it will be converted into this one here. So in react, we have something that's called create element on. They also talk about this here, create element. Take some arguments here. You have your component and you have the props props. We're going to talk about that in a later video and you have the Children. And as you can see here, this code, this example here with my button it is the exact same thing that's riding it like this. And you can probably understand that it will be quite complicated when we have some nested components and a lot of components in our application. If we're going to write them like this. So this is a much, much better syntax, so really special. And now I'm going to tell you some facts about yes, X and I will go back to the code editor for that. And I'm not going to show you here so I can be in this file here. I'm going to give you some bullet points here telling you different facts about JSX. So the number one is that gay sex is syntactic sugar for react dot create element. So it's just an easy way for us to write things in or react application, right? And number two is that JSX Can't self close on by this, I mean that if you for example, have a div. Hello. This is how you write it if you have a text inside of a day of in html. But if you have a deal that doesn't contain something, you can just self close it like this. So you don't have to have both of these here. And that is true for all types of elements. And of course, we're going to go through this a lot in the course when we create our components on number three, user defined components should start with a capital letter. So if we, for example, create the component that is named header, we are going to use a capital letter here. Otherwise, react won't know that this is a custom component that we've created, and it will think that it is a built in component like a div or ah, for example, stability and header component. So it's really important to know that we must have a capital letter when we create our own components. All right, Number four, you can use JavaScript expressions inside of JSX. Let's say we have a deal here again on. We want to calculate something in this division. Then we just use curly braces, like so an inside a curly braces weaken right? Or JavaScript expression. So we can, for example, type five plus five. And this will evaluate to tell every time when we want a JavaScript expression inside over day a sex weaken. Just use curly braces, and we can go inside a deaf astri planned inside over curly braces. All right, Number five. You can nest components just like you can in HTM. Oh, so we have Ah, maybe a header here. And inside that one, we're going to have another div. And we can also have an age to tag. Hello, Header. It will complain here now, my limping rules because, yeah, this is not legit to write it here, but yeah, you can see it anyway. Here. And as you can see, we are nesting things here, and that's completely legit to do in JSX on number six, nested content can be accessed in something that's called props. Stop Children and as I said, we will be talking more about props in future videos, so I won't go into detail on that one now. But you should know that when we have Children inside or component, you can access these in the property. Children on your props object. Okay, I think these six facts are great to know before we start coding something here, and it's kind of the basic stuff with day of sex. It's not complicated, really. I think you will get into it and learn real quick when we start using it. There are a few differences compared to HTML attacks in HTML. If we have a div on, we set a class. This is a live like so hello, this is the way we do it in HTML. In day or sex, we don't have something that's called Plus, we have something that's called Class Name, and it's also camera taste. JSX is more close to JavaScript, so that's why we use camera case when we using gay sex. And it's also a few differences. For example, if we have a known click, we also right on flick on. We have the camera case with a capital C here on this will also be more clear when we actually start coding stuff. Okay, so I think this is it. This is some basic knowledge about their sex on. We're going to start to scare ful out or had a component now and put that inside off the app component. So I delete this one's now on. Also, make sure you're inside over your folder react, dash or NDB. And every time you come back and want to code on your application, you need to start up your development environment and you do that by MPM start. And this was start everything up for us for me, it opening up in another window here, but it should open up automatically. Otherwise go to local host on the port 3000. As you can see, it's a star here, so we know that our application it's working. OK, so make sure you're inside a correct folder here. And as you can see, we already have some fold this year. If you have followed all the steps that I showed you before and you have coping over all the files and stuff like that and inside or components folder, we're going to create another one that's called elements to create a new folder and name it elements with lower case letters. And inside the Elements folder, we create a new file that's called Header with a capital age dot Js. So, header Doctor. Yes, and we can start to create our first component. The first thing you always do when you create Iraq component is too important wrecked. So we import react capital are and we imported from react lower case letters, and this is the six in tax for importing models were using here. Babel will convert everything for us down to es five so we can use your six in tax and beyond here. And in the end, it will transpire down to yes, five. Okay, The next thing we're going to do is to create a functional component before the react hooks a p. I was released. We had to write class components to have state in them. Class components is mostly used for components that need to have some logic and state and have access to different life cycle methods. I will talk about this in the videos at the end of this course where we also create this application with class components. But no, when we have react hooks, we just have to care about functional components because we can have state for components by just using functional components. So that is what this main course is going to use. We are just going to use functional components, and I like to create my components with the Essex Arrow. Functions like this cost header equals and then we have a narrow function like this. But you could also, of course, just write it like a regular function function header like this. If we use on arrow function, we can use something that's called implicit return. And that means in this case, we just going to return. Dave, that's the header. An acid is an implicit return. We don't have to use the return statement here because the arrow function will return this for us, and this is fine in this case. But if we're going to have logic insider components, we have to write just as usual, Curly braces and we have a logic here, and then we have to have a return statement in the end. But in this case, it's just one line, so we can type it out like this and it will return this dim for us. And as I said before, don't let yourself get fooled here and think that this is HTML. It is not. This is JSX. So this is Deborah script. And also you can see that we are importing react here. But we're not using it anywhere here. And that can be quite treasures because we actually are using direct. We are importing here because this will transport down to the react dot create element as we saw here so we can go inside their Babel compiler here. We can just grab our function here, paste it in here, and as you can see, it will be converted to react or create element. And we have our diva. We have another here cause we don't have props for this one, and we have our text header. So this is what we have in the end. And as you can see, we using react here. So don't let yourself get fooled and think that we're not using react here. We have one more thing we have to do in our component, and that is for us to export it on. We export the default, Heather. Otherwise, we can't import it in the other components and use it. So this is really important. Always export your components so we can save this one. And this is it for now. We're just scare filling this out now and we're going to modify this later. Okay? We have one last thing to do in this video, and that is we're going to move inside or app dot Js component. And when you want to use your component inside off another component in react, you always have to import it. So we import our header, we grab it from dot forward slash elements on a header, and this is enough. You don't have to type dot Js. It will know that it's that file that you want to import from, okay? And we can just use or components inside of here for now and with self close it, we're not going to have anything inside of it. We can save the fun. And then when we go back inside, over up here in our browser, we can see that it is successfully showing are headed text here, and that's great. And we also have the start here text because we are also showing that here. And as you can see, it's great with this developer environment, it will update itself so I don't have to reload the page. So it's really smooth working with this and that's built in would create racked up. And it's where packed that is setting this up for us. Okay, so this is it for this video. In the next video, we're going to scare fill out all the components for the homepage. 5. Scaffolding Home Page: we'll come back. We are going to scaffold off their components for the home page now. But first, let's take a look at what components we need. This is the homepage over application. So the header we already scare for this one out. So that one is? Yeah, finished. For now, then we need to have this kind of a hero image here that's going to contain the image off the most popular movie right now on the text under. Yeah, I'm quite sad here because I really wish that there was a more cool movie here. Right now. It's changes and grabbed the first that's in the list of popular movies. So this is what we have. I have to live with this one. It would be much cooler if it was a SciFi or action movie or stuff like that. A much cooler image here. Yeah, all right. And below this hero image, we have this search bar that we're going to have a component for, and we're going to have agreed component that will contain all the movies here. And also we're going to have ah component for each movie or movie thumbs. And as you can see down below. Here we have a load more component, a load, more buttons so that one we're going to create. And we also have a loading spinner that we're also going to create. So these are the components we need for our home pitch. So let's start scaffold him out. Now We just scare fielding out the structure here, kind of the skeleton off our home pitch in our application. And then we will feel these ones out as we go along in the course with more code, so we'll get back to them later. It will get quite repetitive in this video, and that's because I think it's great when you learn something to just repeat stuff. And that way I believe it's well, yeah, kind of get stuck in your memory much easier than just copy and paste things because you could just copy this one here and paste it in in the different components that we're going to create. No, it's going to be a lot off the same code here, but if you're new and a kind of a rookie at react, I highly recommend that you full of along and we just type in the code. So you get used to the code and how you create a basic component. Indirect. Otherwise, if you feel comfortable and you know some stuff in react, you can just copy and paste it. Okay, so we're going to be in our elements full too now. And we're going to create a new file that's called grid Doctor. Yes, with a capital G, we can just create all of them. We create the component that's called hero Image Capital aged capital. I I'm doctor. Yes. And we have another one. That's our load. More bottoms. We can call that load more. VTM, doc? Yes, Capital L A Capital M and Capital B. Make sure that to get all the letters correct here. Otherwise it can give you trouble in the future. Okay, we have another component and that's our movie Thumb Capital M capital T on dot Yes, and we have two more to go. We have our search bar capital s capital. Be on dot Yes, and we have the last one here and that's our spinner. Capital s Okay. Lets go inside a grid component or great doctors file first, we import react capital are from react. Then we create the function that's called Grid Capital. De and I used a narrow function here, and we just created deep for No, that's that's good, all right. And then we export the full or a grid. So this is everything you have to do for now in this component. And this is going to be the same thing we do in all these components. So we go inside or hear image components we import, react from react. We create in our function that's called hero image, and we create the deal. Call it hero image, the export default here. Image like so. And of course, we also save all the first when we do this, so make sure you want to save them. We have our load. More button we import, react from react. We create a narrow function that's called Load Mawr VTM, and we create another deal with load more. But, um, the export default load more. Beat him and we saved a file. We have our movie thumb import react from react. We create an ER function. Call it movie thumb Onda Deve with moving something inside of it and we export default move with some. Oh, this is getting boring. But we have to do it. We have a search bar we import react from react. Hopefully you feel like you're getting to know this. No. When we repeat this stuff this much, we create a narrow function with a certain more onda Dave with a surfboard. We export default search for, say, that file and the last one inside or Elements folder for now is the spinner. So import react from react. We create a nerve function spinner. Uh, you probably guessed it. We create the Div with spinner inside of it on, we export the four spinner like So So this is the components we need for our homepage. But we also need to create a component that is our homepage, and we're not going to place that one inside or elements were going to place it inside or components folders. So make sure you're inside your components folder and inside there you create a new file that's called home Doctor. Yes, on we import react from react. And here we have to import or components that we're going to use inside of this one so you can make a little common here import components and we start to import the ones that we build. So we have our hero image and we import it from dot forward slash elements here remains the import or sort for from not forward slash elements. Search for import or greed from dot forward slash elements grid. We import our movie thumbed from dot forward slash elements movie thumb. We have two more to go. We import a load more beaten from dot forward slash elements load more bottom or BTM. We import offspinner from dot forward slash elements spinner who that wasa lot six components and now we create our home components. We create the narrow function called home and we are going to feel this component up with a lot of logic. But for now, we can just trade parenthesis here and make an implicit return. You create the parenthesis when you have more than one row here. And also one thing with wreck is that you must return just one component and nest things inside of it. We can't just type out or components here. It will complain at us because we need to wrap it in something and you could of course rapid in a different. But sometimes you don't want to create a day of just to wrap your components and then you have something that is called react fragment Onda react fragment react dot fragment Just going to type it out here closing tug. This will rappel or components, but it will not create an actual component in the dome. And that's great. And we also have a little short town here we can use instead. You don't have to type out react out fragment. We can just remove it and just have empty tax like this. So this is the same as typing out reactive fragment and then inside of here we can just for no place, all or components, so I'll place them into order that they will appear on the page. So we have our hero image and we can self close it like this. We have our search bar self close it. We're going to have agreed here and for no, we just self closing it. But we are going to place or moving some components inside of this later. But for now we can just place or movie thumb like this, so we just know that it's working or spinner goes below their self close that one on we have or load more BTM like So of course we export default home and we saved a file. And for now, nothing has happened because we haven't imported or home component in the and this is also important to know or starting point in or up is going to be the index dot Js file. And as you can see inside of here, we're importing react and we import react dome from rectum. And this is the way that we actually can show something in the dorm in the bro. So So we need to use this one for that cause. React can be used not only in the dorm, not only Ambrose's. You also have, for example, react native. That's also react, but to use it in another way and they don't display your components in a browser we have imported or after. That's going to be the start position for up we are creating. Index will import the app on render after app to the dome, and we do that by used to render method on the react dome that we import here so it takes the component we want to render and then we tell it to render it in a div. That's called Route and this is found in the public folder. We have our index dot html. This is stuff that create racked up created for us. But if you look down below here we have a deal with an idea route and it's inside of this deep that react will place all of our content. You don't have to do anything in this photo. No, I just wanted to show you this Div. So that's the deal we're grabbing here with the JavaScript. Get element by i d. And we render out or after in that team. So that is how our up gets placed inside off the index dot html file. All right, so let's get back inside over. We can import home from dot forward slash whom on the up are going to contain or roads that were going to be later because when we click a movie, we are going to show the movie page and it's going to happen with different roading inside of this up component. But for now, we can just render out or home components like so we can actually make this a little nicer . So we create parenthesis so it gets a little bit more readable. Here. We say that file, and as you can see, it's changed here automatically. We don't have to reload the page, so we have our header. It's going to be the same on the home page and the movie page. And then we have our hero image or search bar, agreed movie some spinner and load more button components so we know that they are working now and that's great. The next video is going to be kind of, ah, outside one because I want to show you a different example on her props and state works before we move on to build this application. So in the next video, you can just relax and sit back, and I will show you how props and state works, so see them 6. Crash course in Props and State: thing is a little special video that we're going to go through before we continue with our application. Therefore, in this video you can just grab a cup of coffee or something else you like to drink and just relax and watch, as I tried to describe as good as I can. But props and state are because they are two very fundamental things in the react ecosystem . On as you can see here, I created this nice little red car here. At least I hope it looks like a car. It's made with the very simple CSS, and also, if you want to fall of along in the code, I've included this one in the start of files. It's called React Dash or MDB Dash core, and there's the code so you can just go inside that folder and just run NPM install and that will install all the node models for you. And then you can just start application up with MPM Start. Just as before, I created this one we'd create racked up also, So it's the same pattern to start things up there. This is a very, very simple application. We just have the index file here and just before the up component is the start off the application and inside of the app it's very simple. You're also I have a car component that is going to have a body and some wheels. If we look inside a core component that is going to be, I think, the biggest one of them. Yeah, So if we look inside a core component, I'm creating some state, and I also position out the wheels and the body here inside this JSX. I just created an object here for styling. That's one way you can start things in react. You can just create a new object, and then you use it as a style here on the day of itself or in the component itself. And this is also good, except because this is just JavaScript. It's just a devastated object. So you have to use Camel case here instead, off like a dash like you do in the regular CSS. Mostly when your name things, it won't work. So you have to have this camera case here. Keep in mind that this CSS you see here is just a regular object, and that's also why you have these ones in the quotes here because this is an object property and this is a string in the object and we just pass it into the style prop on the Dave here and that will make sure that this Dave gets styled this way. So this is one way you can use the assess in your rec components. We are going to use style components for our application on. We talk about that in a future video. Okay, But we have the body here and we have the style for it. And as you can see, also, I'm selling in something that's called a prop to this world. And that's what we're going to talk about and also the state in this video. And I think I can actually do like this. We can see the car at the same time. So if we look in the core component, this is kind of the main component for this world. You can see up here, I import react, and then I also import something that's called use State. And this thing is quite new. When I record, it's because it's from the hooks, a P I and the Hooks. AP I haven't been out that long before we had hooks. If we want to have some state, we had to create a class component. No, we can have state inside or functional components, and that's great. We don't have to complicate things with class components. We can just focus on creating functional components. There are still some that, like class components, more so It's completely legit to use class components to have stayed in them. And there will also be a lot of code base out there that it probably will take many years before they convert it to use hooks instead. And that's why I also in the end of this course, gonna show you how to use class components. But I see it more like not a primary way of doing things today in react. I always use hooks now, and functional components with use state in them. On the state in a component, is something that can change. We can have different state, depending on what time in the life cycle of the component we're in, and that was also something we had before. Now we have to step out of that kind of way of seeing things and think Maurin like yeah, in renders How will our component looked on each render? So instead of life cycle methods, we have the sequence of different renders in our component and we have to decide how are component we look on each render when we create the state in our functional component, we do it like this. We destructor out our state and our center for the state, and you can call this whatever you want. And as you can see here, I've actually used on underscore for this one. And that's because it's not used. And my limping rules here are telling me that I'm not using that, but also so we could also just delete this one if we're not using it. But I wanted to keep it in here so I can show you that this is the way you create a setter . So, for example, we could create another state. We call it state and set state. And with the structure, these ones out from you state. And in this case, you don't have to send anything in here. I'm sending in red here, and that's because that's our initial state. So every time you create the state, you can send in your initial state to this hook here. And if you don't know much about the destruct Oring I can just type this out in a sequence for you instead. So if we, for example, have our state, I recall you state like this. This would give us back an array in the state here. So we've grabbed the first value in the state calls that I created here. It will complain our cause. I have another one that's called State there. But we don't care about that now. So ST zero will have the state itself. I think it will be clear if yeah, let's say that we send in the number 10 as an initial states. This one will be tell, um, state. If we grab the second element in the rate, it will be the center for the state. And that's a function that we can use to update our state. So we could have typed state. We grabbed the sector, and then we send in 20 and the state will be 20 instead off tell. But as you can see this one Yeah, it's quite a verbose, and they're not that good to work with, and that's why we can destructor it out. And we can name it whatever we want when we destructor out this array that we get back from this one. So I think the convention is here to you. Name your state, and then your name is 2nd 1 to set and also the name of the state. Then you know that you can set the state with this function and we'll see a lot more about this when we create their application in the next video, we're going to grab some data with the FBI, and we're going to keep that data in our states. We'll see that inaction them. So this is how you create a state with react hooks. And also it's worth mention that we'd react hooks. You can create as many state as you want. Before in our class component, we just had one state, but now you can kind of separate the mouth and have different state for different things, and that's also make it a little bit more readable, and you can compose different things together, and that's great. We'd react hooks because you can also create the custom hooks and also abstract things out . And that's really great. And we're also going to create a couple of custom hooks for application, just too abstract things out and make it a little bit more clean and readable. If we go down here to Orender to our JSX here, you can see that I have four wheels. I got the two front wheels. I got the body and the two back wheels, and I have something that's called wheel position left on wheel position. So I set the pixels here for the position left on the top position here. So this is what we call a prop. We can name them to whatever we want here. Unless you can see we're using camel casing here when we name the props. You can have as many off these props as you want and send them down to these components. And if we look at our wheel component, you can see as I said before, here I do some in line styling with no back. I just sell it one into the style prop on ordeal, and we also have or a prop here. So these are the ones that were standing here and they will be named the same as we name them here. So in a wheel, we have an object here that we received. So this one is just a regular JavaScript object that looks something like this, I think. What did we name them? Wheel position, left on wheel position talk. So we just have wheel position left. Then let's maybe in 90 pixels and then we have wheel positions. Talk. Let's say that's yeah, 100 picks up. So keep that in mind that the props or just a regular object that you can also the structure out these things. So because yeah, you can name it props like this or actually you can name it whatever you want. But the convention is to name it props. So if I change this one to something else crew car, it will still work. But you should name them prop, or you should actually the structure of the props, because that's also convention. So we have the wheel position left and we have the wheel position. So that's the way we destructor out props. And that way we don't have to type in props every time we use them. so we can get rid of these wells and we have them in a nice way like this. And we're also going to do this in the application. So I'm going to show you how to do a little bit more the structuring their okay, so we're setting the left on the top position by getting the value from or props. And as you can see, this is a very dynamic way to do things with props. You can get different values inside of your component, and you can change stuff inside of it. Depending on your props and props are read only state. You can change the state with the center. And that's also good to mention that the state shouldn't be updated directly. You should always use the setter for the state and not update state directly, because that will not trigger a re render react. That depends heavily on a mutability and not modifying the state directly. So that's a very big thing. You can keep in mind, never changed the state directly. Okay, so we grabbing these values here, so that way we can change the position over wheels and hopefully you can see the greatness of reactor and using components to create your application because we have the same component here with just changing some values. And we can get different positions on the wheels here, depending on what values were sending him so the same component. But we just changed the position off the wheels here. That way we don't have to create four wheels. We just create one wheel and we used it four times, and also the body were sending in a color prop to that one that I'm using here. I can show you got no to destructive these props. We have the parenthesis and then with the structure off the ability and we have the color so you can get rid of this one. So this is the way you should do it. It's good to learn a lot about Year six in tax and JavaScript itself. Before you start using react, your life will get so much easier if you know stuff like that. So I think it's a great idea to be familiar with the structuring and things like that before you take a course like this. Okay, so we can change the color here off the core depending on what value are prop color has. So if we go back inside or a car, maybe we can change this one toe orange. And we saved a file with changing the color of the core really easily. And it would be fairly easy for us toe exam. Have a button here that random masses color. And just by changing the state, it will go through these components and re render them. When we update the state, every time we update the stage, it will trigger a remember or components. We can change it to something else, maybe green and save it. And as you can see, this is really powerful. To be able to do it like this, we just change one value and it will update or complete application by changing this. I think the name react is really good because you can clearly see here how are application react to things that we change in our state. So we send something and it will react to that. We can have Ah, maybe pink and a court will be piqued. And also we can try to change these props here to maybe 50 picks us and you can see I move this wheel out by changing this one. So it's really powerful Tobe able to do it like this. I think this is enough to introduce props and state before we move on and continue creating our application in the next video. We're going to grab some data from the movie database tape. I and we are going to put the data in a state in our application, so it would be a great idea if you don't understand this. Go through this again. So you understand the concept off props and state before you move on and I'll see you in the next video. 7. Fetching data from TMDB API to Home Component: okay, It's time to grab some data for application before we start styling it to look nice. And we can start by looking in or config dot Js file. I provided you with everything you need to get started with the movie database AP I hear we're going to use or a P I. You Earl, and this is going to be the base your l in the m points that we're going to hit for the FBI to grab or data. Then we have the A P I key. I told you before that it's best if you get your own key because I can't guarantee that this key will work forever because this is a key that everyone of you is going to use in this course that I provided for you, and I don't know when or if they revoke it. Then we're also going to grab some images for a movies, and we also have a base year l for that one. So this is the Ural here, and we have a backdrop size and a poster size, and these are values that you can change to grab different sizes off the images you want to use. In this case. I'm using the with 12 80 pixels for the backdrop size on 500 pixels for the poster size. So you don't have to change anything here. Except if you grab your own a pikey, you just paste that one in here instead. And as you can see, I'm just exporting all of these in an object here. And that means that we can import them where we want to use them so we can move along into the home. Doc Js file our home component and we're going to import all of these here. So just below where we import react, we're going to import. And we have totally braces. We have our A p I under school. You're Ella. How are FBI Underscore Key or a P I underscore, based on the school, your oral or poster on the score. So Royce, on our backdrop underscore size and we can make it look a little bit nicer here by placing them on their own road. Something like this. I think we're going to import them from doctor put forward slash convict, right. The poster size on the backdrop size. We're not going to use that right now. But as we importing things from this file now, we can also import them so we can use them later. We're going to grab the most popular movies for the homepage on we're going to use to hook you state to store our data in the state in a functional component. When using hooks, there are some fundamental rules we have to apply to when we use them and direct team have created on Yes, Lind plug in for react cooks so you can install this if you want your code editor to give you nice warnings when you do something that's, ah, out off the ordinary with react hooks. So that's great. And after say, they will provide this in a few to release off Great racked up. Also, that's a quick little tip, because that will help you a lot when you use react hooks. So we're going to create some stadium now, and that means that we need to import you state from react, and we're also going to use the hook that's called use effect in this component, and we'll talk about that when we reach the port. One of the great things with hooks is that you can have as many states as you want in your component. When we use classes, we just have one state in that class, so we have to have an object with different properties. But now we can separate these properties out and create state for each of them. And in this case, we're going to have a kind of a main state. And then we're going to have a state for loading and one for error. And these are going to be just brilliance. So if, for example, the loading is true, we know that we should show the loading spinner. And if the error is true, we know that we, yeah, should show some aero message to the user. So just below here, we have to make curly braces here now because we cannot make an implicit return as we're going to fill it up with logic. So you're going to have a return statement. We can move everything of this inside of that return statement. All right, then we're going to create three states here on as I showed you in the crash course with props estate, we create the state by calling you state a new state will return Honore for us, the first element is going to be our state. And the second element is going to be the sector for the state. So we can the structure off this one's with your six syntax. So we have a cost. We destructor out our state and our sub state. And if you remember, you can call this whatever you want. In this case, I want to call it State and set State and we call you State and we're going to send in a new initial state for this one. And it's enough for us to set the movies to an empty array. Because if we don't have an array when we try to look over things before we get something from the a P I, the application will throw in arad us. But if we have an emptory initially, it won't throw an error. Okay, then we're going to have a loading state. So we create the coast loading and set loading equals. We call you state. There were going to send in falls us default. Then we have a new cost with error and set our we call you state again, and we also give this false. And as you can see here, we can have ah, complete object here estate, if you want, we can just have a value. As in this case, that's also great. Um, for the sake of it, we can also council log out the state. So we know what we grabbing here later. And in the end of this video, we're going to create a custom hooked where we move all this logic inside of that custom hooks we can clean up or component. But for now, I'm just going to create this code inside of this component. So we get that the work, and then we move it into a custom hook. Okay, We're going to create a new function that we're going to use when we fetch your movies. So comes fetch movies, and this one is going to be on a sink function, because when we fetched data from the FBI, we don't exactly know when we get that data on. If we mark this function as a sing, we can use a keyword called await inside of this function, and that will make sure that we don't continue our code until we have get something from RM point. So that's the way you can handle a sing calls to a P I. So we marked this with a sink. There were going to have a parameter for this one. We can call it and point us. We're going to send in Oran Point. We're going to re use this function every time we make a call to the A P I. That means that we have to give it different importance. Okay. All right. So we're going to call this function when we do on a P I call, the first thing we have to do is set the error, the force we also going to set loading. And this is going to be true because now we're loading, we grabbing something. And in JavaScript, we have something that's called try and catch. So we create the try, and this block is going to be executed First. It's going to try to run this code, and if it don't work, it's going to run the catch block where we also can catch the specific error. Like so. So first try to run this. If it works, it won't run the catch. If it doesn't work here for some reason, it's going to run the Caps block and it's going to give us the error. And when we have done all of this year, we can just set the loading two false again because then we're not loading anything. You also have something that's called finally you can use here. I won't use that in this case, but if you make a quick Googling on try and catch, you will probably see someone that using finally here instead and then you can just set the loading inside of that. So I think it's a matter of preference here, Okay, we're going to feel or try blocked with code now because it's here that we're going to grab our data and we're going to collect our data in a contest that I like to call result. Then we used the await keyword to tell this one that we want to wait for this data to return before we continue. And actually we're going to await two times here and that's because when we get our data from the A p I, we want to parse that data into Jason on that one is also a thing, so have to wait that one also. So we have a parenthesis here. We await again and then we fetch fetches also something that's built into Deva script that we can use to fetch data from an points. There's also popular library that's called access that many people use, and yeah, it's great. But I think in this case we don't have to have a complete library together data. It's a fairly easy call we make in house we can use to build. In fact, it works really great also. So we're going to fetch or in point, that's the one with sending in here. And when we have gotten all this data, we gonna ports this into Jason and we do that with Dr J. Some parenthesis, and this is also built in JavaScript, and it's going to make sure that it forces the data into Jason for us. That's why we waited two times we first away to fetch itself. And when we got that data we await when we pour, sit in to Jason because that is also a cent. Okay, may seem a little bit tricky, but it's not that tricky as it looks. Hopefully we got our data and we got it inside. Our result cost. Then we're going to set our state, and you can set the state with the center we created up here. And there's two ways that you can set your state. The 1st 1 is that you can just give it a value. But if you want, for example, base your value on your previous state value, you can use on update to function inside of it so we can send along a function inside of our set state, and that will give us or previous state in a parameter. And that is great in so many ways and especially with hooks, because when you start to use hooks a lot, you will see that it's quite common that you probably will have a use effect that will run into on Infinite Loop on def. Before example is going to use the old State value year. The old movies in our state. We could, of course, grab it like this, but that means that we're going to have a dependency in or fetch movies on a fetch. Movies were going to call that from a use effect. And then we have to specify the state as a dependency to a use effect and that will make it go into an infinite loop. Because every time we update our state or components will rear ender. And if we have the state as a dependency, that will trigger on infinite Loop because the state will update when we run the use effect and that will in turn create their Orender where we run the use effect again and it will update the state. So there you have it. That's an infinity loop. One way of kind of by passing this behavior is to use an update of function in our state because the update of function will provide us with the previous day and that will make sure that we don't need to have the state as a dependency in or use effect we call or sub states. And it's here that we're going to have the update to function. So we have our previous state in a parameter, and we create an in line are a function like this, and as we're going to give it an object, it don't work. If you just give it curly braces because it will think that these are the curly braces for the actual function itself. But we can use parenthesis here, and that will make sure that it will interpret this as an object. Instead, First, we're going to Cookie or Old State. We can do that by using spread. It's the six syntax Do that by typing three dots, and in this case, we have our previous state. So this will make sure that we spread out all the properties that we had in our previous state before we do anything else. So if we would just have stopped now, we would have a shallow copy off World State. But in this case, we want to modify our properties in the state. And we can do that by typing in or properties here and change what we want to do that will override the properties that we spread here. Let make sure that we can keep some properties that we want, and we can just overwrite the ones we want to change. In this case, we want to change the movies. We want to place the movies that we just grabbed inside over state. We have our movies on the colon. Are we going to place them in Honore? So we create an array and that we just spread the result Doctor results and the results here. That's just a property on the date I would get back from the movie database, a p I. The results property will contain all the movies that we get. So that's the ones we spread out into our own state and into our own property that we want to call movies. Okay, then we're going to have a property that's called here. It means we want the store or hero image in that property. And here we're going to do something that's called a short circuit, because first, we're going to shake if we already have a hero image in our state, and if we have that, we don't need to place another one there and we can check that with prep dot here image and then we make a short circuit. I just type this out and I'll explain it for you. We have a result doctor results, and we're going to grab the first movie in their rate because that's the most popular one. And that's the one we're going to show in the pyramids on this short circuit will work like this. If this one is true, it will keep this one. If it's false, it will run this one instead. So that's of this short circuit work. If we would have had these ones instead here, it would work the other way around. If this is true, it will run this one in step. But in this case, we want to check if it's false. We want to place a hero image if we don't have one in our state. Okay, then we're going to have something that's called current Page, and we can get that from result dot page. And we're also going to have our total pages and that while we can get from results dot total underscore pages, be very observant here because it's not Camel case. And that's also something from the movie database. AP I. This is a property that's received from there, so we have to live with that. So this is how our state is going to look on. We're going to come back to this one later. Okay? But if something goes wrong here, we have to do something when we get an error. And in our case, we just going to set our Aero State the truth. We could, of course, also, Consul, log out the error if we want to do that. All right? And this is it for this function. This will fetch everything we need for us. Then we need to trigger this function somehow on we'd react hooks. We have something that's called use effect and thats instead of life cycle methods that we have with class components. Because now, when using hooks, we're not thinking of life cycles were just thinking about how our next render we look that we can trigger different things with the use effect hooked. So just below here we call the use effect and we give it an in line are a function an inside of this use effect. We're going to call a fetch movies. We're going to give it or m point. So we have back takes its attempted literal cause. We want to grab or a PR You're all here. So we have dollar sign, color braces, ap I underscore you are well And then the end point looks something like this. We have a movie forward slash popular question more. We have our A p. I underscore key equals, and then we give it our key. We can do that with told, Hassan told her braces. And we have a few likey that we imported. So this is it for the young point to grab the most popular movies. And this is just how damn point. Look at the movie database. A. Prso. It's nothing I have come up with here. You have to structure it this way for it to work, OK, but how often will this affect run? Yeah, this would around every render now, and that's no good. We want to run this just when we start up the application and we have month of these components. We can do that by providing it a dependency array. You can also read all about these hooks at the React homepage. It's really great how they explain things there, so I think it's a really good idea to read more about hooks there. If you don't have a clue about this, it's a good start before you take this course by providing it with an empty right here that will make sure that it will just run once a month. And we can actually comes along out our assault here before we save it. So we save it and see what we've got. So this is our state that we Consul, look out here. And this is the data we get from the movie database, A p I. And as you can see here, I grabbed data, for example, from result talked results. And if we take a look here, we have the results here. So that's the one on spreading. It will contain the movies here, and we also have the page and the total pages that are used here. Result of page and result. The total pages. So this is just how the object to receive from the movie database structure. And you may also wonder why they're so many of them here because we have a few rear enders here. I don't think you should worry about that react. It's fast, and it doesn't matter if we have these Manny rear endless in this application, we have these money because we have three different states here that we're changing here. So if we for example, common D's out, you'll see that we get fewer relentless here. So every time we update one of these states, it will create the rear ender. You could optimize your application with different techniques like you, memorization and things like that. But I am not going to go Internet in this course because I want this course to be simple and at least almost a beginner course in react. Okay, so everything seems to be working. We get something from the movie database, a p I. And that means that we could create a custom hook. I just want to show you what I talked about before if we would have used the state in our function here. And it's enough for us to just consular gout, the state inside of here. And we go down to a use effect. You can see that it wants me here. I'm using the es lind plugging for rack took. So that's why it's giving me a warning here. It tells me that I have a missing dependency fetch movies, and that's because I'm using state now in my fetch movies function. So if we add that one here, then it will tell us another warning and That's because the fetch movies makes the dependencies of use effect. Took Shane's on every rendered, and that's what I talked about before. So we have to wrap it in a use callback function. Otherwise it will create an infinite loop. We can actually save this one and take a look at their council. You can see that it's just fetching data like crazy. No. So I remove this one and save it again, and they would have it. No, it works. So if we were going to use state inside of this directly, we have to wrap it in a use cold back and we won't go there. You have tow explore that yourself when you get more used to hooks. So that's why we use this in line function here where we can grab the previous state. The rule is that you should always specify your dependencies in your use effect. You shouldn't try to sheet that one. Okay, We're going to create a custom hook. No. So make sure you're Mark everything here. Everything we created here and just Coupet and inside our components folder create the new folder that called Books. And inside of that folder create a new file that's called use home fetch dot Yes. On the custom hooks should always be named use before the name you want to use. That way, react will know that this is a custom hooked on. I use lower case letters for use. And then I have a capital aged on a capital F. Okay, inside off this custom hook, we're going to import. You stayed and use effect because we're using them in this one now. So we're going to import them here. I regret them from react. Then we also going to import or a P I underscore your URL on or a P. I underscore key from not thought forward slash doctor, forward slash config. Okay, then we're going to create a custom hook and we're going to export this one because we want to import it in our home components. So we export const. Use home fits. We create a narrow function for this one. Like so on inside of here, we can just paste everything in. So everything that we grabbed here and cope it, we can just paste it in inside of our use home fetch custom hooked. Uh, we can remove at least this course along. I think it's enough that we cancel or gout or stayed. So we have everything of these inside over Custom Hook. Then we have to return something from this one just below here at the end, we are going to return, and in this case I'm returning Honore and the first element is going to be an object with or stayed for loading on or error on. The second element is going to be or fetch movies function. So this is just the states that I return here first. And then I returned this function so we can use them inside or home components. And this is it for the custom hooked custom. Hook is great for sharing logic. In this case, I mostly do it too. Abstract out code. We could create a custom hook that we could fetch data both in the home component on in the movie component that we're going to build later. But in our case, we're going to have different states in home and in movies, and it will make it a little bit more complicated to create the hooked like that and, for example, in the movie component. We are going to hit the end 0.2 times because first, we're going to grab the movie itself, and then we're going to grab the actors for that movie, and that will also complicate things. So in this case, I'm just moving all the code inside of this one here to make it look a bit more readable and clean. Okay, let's go back to our home components. And actually, we can delete everything of this now. And we're going to import our custom hook here instead so we can make a little comment here . Custom hooked, we import use home fetch from dot forward slash hooks, forward slash youth home fetch. And just that the talk over home component here, we're going to call this custom hooked on. We can just the structure out it just as we return it here. So you can just put this one and go back inside of your home. We create the const paste this in, we call or use home fetch. Okay, on this is actually all there is to it. If we go inside overuse home fits. We can remove this Consul, log off the state here, save it and we go inside over home and we can consular gout or stayed here instead. And you can see that we are successfully consul looking out our state, and that's from our home component. I don't know what you think, but I think this is much cleaner to have all this logic inside of its own custom hook instead. And this will make her home component very clean and nice looking. And this is it for this video we have successfully hit, Then point and grab some data from the movie database, a P I. In the next video, we're going to start styling or application with style components. 8. Styled Components 1 - Header: It's a beautiful morning here in Sweden, and I'm up early to show you how to use style components. In the last video, we grab some data from the movie database A P I and we Consul, log it out here. If you worried about the warnings here, you shouldn't be that this is just because we're not using these ones yet. So these warnings will disappear when we fill up the home component with more code and use these ones in this video, we're going to create the header. But first, before we get started, there's something we have to do. I'm using a Google form for this one, and we also have to import the front or some CSS file. We've already installed the Front Awesome and Pam Package, but we also have to import the CSS file for front Awesome separately, and in my case, I've just pasted in links in the index dot html file. So that's what we going to do now. So make sure that you navigate into your start of files folder and inside of that folder you have another folder that's marked with the three. It's called font and font. Awesome. CSS links, so make sure you navigate into that folder and there you have a file that's called Front in Front Awesome links. Open up that file. And as you can see, I provided you with two links here. The one is for the Google Fund on the other. One is for a style sheet for front. Awesome. So just cooked with these links, then you can open up your file that's called index dot html. This is a regular index dot html file position in the public folder in your product folder . Create Racked Up created this folder for us. Also, I think I went through them when I talked about installing Create Racked Up Anyways, open up your index dot html file and you can see there's a lot of stuff here, but below, maybe somewhere below this link that's called Manifest. Here you can just taste in the other links, and this will make sure that we have the front and also the CSS for front Awesome. So it's really important. Otherwise, we won't be able to use the Google Form or the front awesome items that were going to use in this course. If you choose to not install everything yourself from scratch, and you just use the start of files to start off from. Then you don't have to worry about this because, as I showed you before, you also have a folder that's called to react or indeed be start here and this one. I already pre installed everything for you. So you don't have to do that if you choose to go that way and don't install everything yourself from scratch. Okay, we're going to talk about style components, and the first thing we have to do is to go inside overhead a component, and we're going to finish this one first and then we're going to style it. First, we have to import our logos that we're going to use, because if we look at the application, we have this react Movie logo and rules have the movie D B logo. It's going to be white in our application cause I changed that color import or MDB logo from dot thought forward slash images React movie underscore logo dot PNG and this file is positioned in our images folder here. So by doing this weekend name or image that we import and we just do regular year six import here. So this will give our picture the name or MDB logo and make sure you have the upper case letters. Correct. And also lower case, of course. Okay, then we have our the movie database logos we can call the PMDB logo and we imported from the same folder. That's don't thought forward slash images tm db underscore logo dot s VD In this case, this is an SPD file. The other one was the P and the file. So don't forget the file extensions here. It's really important, Otherwise it won't find a file. OK, so that's our two logos. Then we go into creator header and we can make an implicit return for this one. So we make prevent assists and for now we can just have the De Vere that wraps everything. And inside of that deal, we're going to have another Dave with a last name. And here you can see that I'm using class name instead of only class, as we do in CSS in j six, you use class name, so that's a small difference there are we going to call this class header dash content and inside of here. We're going to have a logos. For now, we're just creating an image. So I m d and we have our source and we grab the file from here that we imported or MDB logo and we can have a old and call it or MDV dash logo on with self close. This one and we have the other logo image source PMDB logo. We have an old from that one also. And yeah, I actually think we should use double quotes here when we were in JSX. So change these ones to double quotes, and we have our tea MDB dash logo. And of course, this one's should be like this lower case. It's really important that you always check your spelling because this is case sensitive. It makes a big deal with upper and lower case letters. So this is our head of for now we know going to style this one. And in another video where we talk about roading, we're also going to link this low go to our homepage. If you look inside of your components folder, you have another folder that's called Styles. And this is the way I shoes to do things when I you start components. I like to separate them out from the file itself. This is only personal preferences. I know there's a lot of people that create their style components directly inside of here, and that's what we're also going to do. Know when I show you how start components work, we already have our style header here. I already created this file for you. This means that if we don't like CSS and styling and stuff like that, you can just skip this part. But you have to jump to the under the video where we change the names or gives to our style component names and where we also import the style component inside of the header. We actually not going to create all of these components in this course because it will take too much time. And I like to focus this course on react. So I'm going to show you how to create a couple of star components and different tricks. You can use their so let's go back into our head of component or handed off Js file. We have to import style components, so we import something that's called Styled from style components like so I'm always saying that this three basic stuff you have to know and I can type the mouth here for you. One learn how to create a style component? Yeah, or, ah, basic star components. That's number one and number two. Learn how to handle props, installed components. You can modify your CSS conditionally with props inside of your star components, and number three create a global start with start components. So these are the three things. I think it's most important which start components. I also wrote an article about this. That's for example, it's on free code camp. So if you do some Googling, you probably find that article also. If you want to read more about it, are we going to create our style header component now? And you do that by creating a CONST. You can call it whatever you want. I like to name them styled and then the component name. So in this case, it's styled Header. Then I like to use the same naming pattern all the time, so I don't get confused by myself. Okay, so this is a constant. We create an African see, I'm also using a capital letter here because this is a component. Then we imported styled, so we can use style. And we have a docked, and here you can select what component you want to style. In our case, it's going to be a div. But it could be on a Taegu. It could be an image. So you just choose what you want, the style here. So we have a deal, and then you have a template literal here. This is a tag function. So we have back ticks. We just right or CSS inside of these back takes. And if you don't know what attacked function is, I think you should also look that up, because that's something that's in year six, and you actually don't have to know in this case exactly how it works. But you can send him a string like this and by using back ticks as I showed you before, we can create JavaScript expressions that will evaluate and then create our stringing them . And this is so stark components work. We're going to set our background. We can set it to one C one C one c. And as you can see here This is just a string that we're sending in here. So it's not JavaScript object, as I showed you in this special video when I talked about props and stale so we can just ride it like regular CSS here. We don't use quotes or anything here because this is not a no object. We can just ride it like regular CSS here, and we consider parting to Syria and 20 pixels. We have a books sizing off border books, and I can say it again. This is just CSS we're using now. So if you don't understand CSS, I'm not going to explain it in detail because this is not a CSS course. It's always a good idea to learn and be very good at CSS because you'll use it a lot. Even if you work in react and create components, you have to do some styling some way. Okay, if you have used, for example, cess, you can nest things in star components also, and that's really great because inside of this style head a component. We also have a class that's called header content so we can just grab that class inside of here. Harry content and when we ride it inside of the style header, it will compile. So it's associated to that component and that's really great to be able to nest things like this. So we're going to have a max with 12 80 pixels for our head of content, and we have a mean height off 120 pixels. We have a pairing off 20 pixels and zero have a Morgan off zero and order of box icing border books on that one. Also on. We're also going test a responsive stars for this one, and we connect our media query here. And I really love this because it's so readable. We can easily see what media query belongs to what class? So we set meter screen on Maxwell off 500 pixels, and in this case, we're just going to set the mean heart off seer of pixels. So we just making sure that the header is a little smaller in height here. So this is a style header that we created. This is all there is to it to create a star component on holder. We use it Well, that's really easy. Also, we have this wrapping devier we can just relate this to style, Heather, and this will make sure that we are styling these components. It looks like your craft right now because we haven't styled images. But at least we're seeing something here on this local here. Should be white for such changed the sign. So I will make sure that the logo is white when I release this course instead. So you have to live with it. OK, so that's one component. Then we have to create something for images. We can create another component. We create another cost that's called Styled or MDV logo. And in this case we have style and wherever docked are we going to style and image. And then we have our back ticks, just us before inside of the back takes, we can write our CSS. We're going to have a wind off 250 pixels. Morgan took. That's 20 pixels. We're also going to have a media query for this one. So media screen. Andi Max, with 500 pixels, we set the with 250 pixels on the Margon top 25 pixels for this one. And this is it for this world and just us before. We can just change this to start or MDB logo and we save it. As you can see, it's looking better already. Okay, we have to create one more. So we create another Constand fall. It's styled PMDB logo, and this is also going to be an image the style dot I am G. We have our double back ticks on right or CSS inside of that one, we have a with off 122 pixels. We have a Morgan talk at 25 pixels. We have a float right and we will serve or media query media screen. Andi Max will 500 pixels. We display even learn. Look, we have a wind off 80 pixels. We have a Morgan top at Sierra Pixels J on just us before we change this image tag to style TMD be logo and we save it. I would take a look at the application, and it's looking great, and we can also try out or media queries. And as you can see, it's changed the sauce here, and that's good. That's just what we want. We also will get rid of this border here when we do the global styling. Okay, so we created three basic style components and I told you that I don't like to have this code inside of my component. I think it looks kind of message. So I like to have them in this folder that's called styles and just import them instead. So you can leave them here if you want that. But I will delete this once. Now, when I showed you how to create him and instead I'm going to import them from my style's so import style header style or MDB logo stalled PMDB logo and I can actually put them on their own road. And I'm going to import them from no thought forward slash styles. And I have something that's called Style Header like so. And I saved the file just checking that it looks the same. And it does. And I can also remove these one here cause we're not creating any star component inside of this file. So what am I doing here? Yeah, if we look inside of Styles folder and inside of the style headed off Js file, you can see that I'm just creating my components here. The only difference is that I have to export them so I can import them in my other component. So that's the only difference. And I just before I import style here so I can use it and just export the mouth. And then I can import them inside of my head of component. And to me, this looks a lot more cleaner. I don't know if you like it, but it's up to you to shoe. So you will do here. I'll stop here now and will create thee here. Image in the next video instead. 9. Styled Components 2 - Hero Image and props: Welcome back. We're going to create the hero image under styles for that one. Now, first, we're going to create the component itself because now we're just showing the text hero image here, and that's no good. So make sure you're inside a hero image. Dr. A s file. You're here image components, and we can also make an implicit return in this one. So create parenthesis. We're going to have a deal that wraps everything. Then we're going to have a lot of Dave with a class name or hero image content. And inside of this, we're going to have yet another day of with a class name off, hero image, dash text and the start of the text. We're going to have an H one tag. And when we're in JSX, we can go back inside of JavaScript land. And we do that by creating curly braces like so an inside a color basis. We can use javascript on. We're going to grab a proper that we're going to call title and I create these props in a minute. Just bear with me here and we have a p tag and we switch back to Dev Astri plan by creating curly braces. And inside of there, we're going to grab a prop that's called text up here. We're going to the structure out or proper object, and we're going to have three props for this one. We have an image title on the text, and the image is the one that we're going to send into our style component cause I'm going to show you how you can style your components by using props inside of the style components in this one. So this one is eventually going to be a star component, and then we can send in a prop that we called Image, and we just forward in the image inside of this one. So this is the structure or component, and we can create the styles for it. Now. It's just us before we import style from style components, and I'm going to create it in this component, just as I did before. Then I'm going to delete everything and important from my file instead from the Styles folder. And it's also worth to mention that start components is just one way off using CSS in your react application. If you, for example, just have Ah, CSS file that's called my style's don't CSS. You could just imported maybe something like this. If you have it in afforded, that's called CSS. My style's dot CSS. So this is a very basic way off importing you CSS first. But by using style components, you kind of isolated styles to just that component. You don't do that if you're important like this. If, for example, your application is getting really big, it's hard to know what classes used and stuff like that in your CSS so they can collide with each other and can be quite messy, to be honest, So that's a clear advantage. By using start components, they make sure that you isolate your style to just that component, and you can have the same class names in many different components. It doesn't matter if you use the same name in different components. Okay, so we create the cost that called styled your image on. We have our style that we imported, and in this case it's going to be a divide that we styling again. We create back ticks and we make sure we're inside off the back ticks and we can start creating or CSS. First we're going to set our background, and now we can use the prop that we send in here. We're sending a prop that we call image to our style component. We can actually rename this one now to style your image, and that will make it a little clearer here because this is our style component, and this is a product that we're sending him to. This one here. This is a tagged function with attempted literal that we're sending in so just us before we can create a dollar sile and curly braces and we can make a JavaScript expression here. And this way we can grab or props. So we have a parameter that's called props. You can call it whatever you want, but I think you should call it props. Oregon, of course. Destructor it out here also, if you want to do that on this is going to be a little bit long here. So I'm going to make it go down there or something. Yeah, So this is an in line ara function here, and yet again, we have back ticks because inside of this function we create another template literal. Here when we create our background First we're going to set a linear Grady int. This is just CSS again. So this is how it works. And you can see here if we look at the application that this small, small grade and here just so we can see the text, I pray that this one, because there waas Yeah, it will be difficult to read on some backgrounds. It's hard to see now in this image, but there's actually a little gray didn't there? So that's what we're creating here, and it's going to go to bottom coma. Rgb A. We're setting it to black. Yeah, 39%. It's not that important that it's exactly 39% RGB a zero coma, zero coma, zero coma and 41%. You can try different values here if you want another Grady Int. Whoever already be a zero coma, zero coma, zero coma and then we sent into Syria 00.8. And this is what creates the Grady int because this is the alpha value. So we're setting it to just syrup 0.8 for this one, and it would be a little transparent and then we have 100% there on these linear Grady EMS can be a little tricky. And CSS so that's also a topic off its own. And I won't go into detail about this, okay? We have a coma. After the parenthesis. We have our your URL. And in this case, we're going to grab our prop that we call image here. So I create regular quotes here. I actually don't know if we need these ones, but I'll have them here for safety. So we have dollar sign and color braces and from props, we grabbed our image and remember that were inside attempted literal Now, cause we're using back ticks here. So that means that we can create this kind of javascript expression here. So everything of this will just end up in a string when everything has evaluated. Okay, then we have another coma. We set the default color to one C one C one c, and we end with a back tick that will end this one that we created here. I know it looks messy, and it is so don't feel bad if you don't see how this works right away. And thankfully, we're out of this one now. we have a background size, we can set that the 100% and we have a backbone position. We set that one to center and center. We have a width of 100%. We have a heart off 600 pixels. We have a position or relative. We're going to animate this little because if you look at the finished application, if we for example go inside of here and then we go back, you can see that it's kind of fades up. So that's a little animation I created in the CSS. So we haven't animation that we go into cool, animate hero image one second. And if you feel that this is maybe too difficult and you feel like Oh, no, CSS is really boring. I don't want to do that. You know that you have the finish styles here, and I'm going to import them later so you don't have to do this. If you don't want to create, see, assess yourself. If you just want to focus on the react parts, just skip this if you think it's boring. But it's always good to know CSS on that one shouldn't be there, I think. Okay, then we go into nest or other class. Here. Hero image confirms we're going to set the max with 0 12 80 pixels. We have a parting off 20 pixels. We have a Morgan off, zero on order. And then we also have our hero image. Text class. We can give the stars for it here. Hero image, dash, text. And this is still nested in this component. Here. We set our city index 200. The max wins off 700 pixels. We have a position. Absolute or bottom is going to be 40 pixels. We have a Morgan dash right off 20 pixels. Men heart, 100 pixels. We have a color that we're going to set the white. Okay. And then we're going to nest something inside of this one here. And it's going to be an 81 tag we have are formed family. Oh, able we just set. It sounds serif as a back up front. So this is the front that we imported in our index dot html file. We said the phone size 2 48 pixels. You could, of course, use or am or PM units for this one instead. If you want to do that. We set the color. What? To be honest, I've not put that much effort into the CSS for this one, cause I want to focus on the react part. As I said so there may be some redundancy ss here also. I don't know. Okay, then, for this one, we have a media query. It So media screen. Andi Max, win. We can set it to 720 pixels. We have a fun size off thought. Eight pixels on the color off, white like so on. And there's a few more things to do here. We have to style or P tag that is going to have a fun family off able also and sounds Saref as a backup form. We set the form size to 22 pixels. I feel like I'm getting bored here myself, So hopefully this is over Soon. I want to create rack stuff and not this CSS. Now, Okay, We said it's well into 26 pixels on. We have a color off. Why? Like so and also we're going to have this media queer here also, So have media screen and max, with 720 pixels on with service one. We have a fun size off 16 pixels. We have a line heart off 20 pixels on the color. Oh, what? Okay. And then we want to go and have a media query for or hero image text so we can just create that one just below here, just below the p tag. It's a bit of nesting here, so you have to be careful where you put him so ever media screen on a max with off 720 pixels. And we set the max with 100% for that one. Okay, we just have to create our animation that we set up here. Also, that's called animate hero image. We can do that just below everything here. So we create key frames. Are we going to call it animates here image from with that the capacity to Cyril on to with your certain capacity to one. And this will make sure that we animate this stuff that I showed you before. Oh, so that's your CSS for this component. And as you can see, it's getting quite a lot here, and that's why I like to keep them in a separate file. So they don't mess up my components and how they looked. We can save this one. And as you can see, it will just show us black. No, but to see that the animation is working, we just have to feed this component with props with the image with the hero image. So it knows what the show here. We can do that by go inside or home component now. And if we go down here, we have our hero image components. We're going to give it the props that we set up for it. So we have the prop that we call an image, and in this case we create a template literal cause we're going to need or image based Ural and a backdrop size. So we create a dollar sign, color braces and capital letters, image based euro. Then, directly after that, we create a lot of dollar soil and curly braces, and we grab or backdrop size. Be really careful here with the naming and look twice, so you type it out correctly here. Then we're going to have 1/3 dollar sign and colder braces I'm from or state we're going to grab or hear a mids on or backdrop on the score path. And why are we grabbing this one? If we look in our application, where we consular gout or data that we get from the movie database, we have put that data in our state in a property that we call here image and inside of here we have something that's called Backdrop Path, and that is going to be the path to the image. Okay, then we have two more props here to selling through here Image. We have our title, and that one is going to be from the state dot Here image Dr Original on the score title. And then we have the text. We have a ST dot hero image overview, and these are also just properties in the data that we get back. We have one that's called overview, and we also have the title here. And if you want, you could, of course, cellular complete object here in just one proper, and you can handle this one inside of the hero image in step. It's up to you case. I say this one and we actually have some error here in the first rounders. We don't have any data so it won't recognize this property. So before we return this year, we can actually making if statement. And if we don't have anything in our state movies and we can just check the 1st 1 here, the hero image, it doesn't matter. Because if we have this 1st 1 we're also going to have the other movies here. We can just return a spinner because we know if we don't have anything here, we are just loading something. We can also check if we have an error if error. You know, when we created the state here, we returning this one. If we have an error so we can check if that one is true, and then we just return a Dave that we can just say something went wrong like so And it don't work. Okay? Yeah, And that's because I have a capital letter here. It should be a lower case Age. Make sure you don't have upper case there on. I made this mistake everywhere. Here. Okay. And there you have it. But the styles aren't working, at least on the text itself. So we have to check that one. Why? It isn't working. It's good. I will keep this things in because this is so coding is there will be bugs and you have tow Handle them as you code. So we are going to check why this isn't working here. So we go back inside of our hero image Doctor's file. Yeah, and I also have a type of here. It should, of course, be hero image, dash text. Unless you can see it works great. No. And also the responsive stars work nice. So as you can see, it's easy to just have some little typo and it will screw everything up for you. And that's what coding is all about. You can spend a day looking for something, and then it's just one small type of that you missed, and you have to live with it. But it's really important to be good at the search for this kind of bugs and arrows also and know where you should look and how you solve things like this. Okay, we know that it's working, so I'm going to remove these ones that we created here, and I'm going to import them instead. I also remove this one and then I import style hero image from dot out forward slash styles forward slash styled here image and I saved the file and it still works. And as you can see, it looks much more cleaner now in this component. So this is it for this video. In the next video, we're going to finish off the star components on. I'm going to show you how to create global style for our application. 10. Styled Components 3 - Global Styling: all right, We're going to finish off the star components, or at least where I show how to create start components in this video. And we're going to create global styling for application, and we're actually getting somewhere. Now it's starting to take shape here, but we have to do some global starting to get rid of this border here, for example. And if we go inside or after case file or up component start components has something that's called create global style. And that's great cause we can use that one when we want to create the style that is going to be used for a whole application. So up here we import, and this one is going to have Charlie braces. So you create global style. Make sure you get the spelling correct there, and we imported from style components. So instead of importing styled, we import create global style. And no, we can create or components. So we created CONST. We're going to call it Global Style capital, D capital s and we use create global style that we imported. This one is also tagged functions, so we create back ticks. We're going to set our body we're going to set them Morgan to syrup or padding to zero. And also we can set the box sizing the border books on. Of course, it should be a necks there, and it's complaining. Here. Now, of course, I should move this one down. Below are imports, and I don't know what this is removed. This one. Okay, this is how it should look, and then don't below where we render out are up. We can just use these components somewhere. It's important, of course, that we place it high in the hierarchy over up. And this is actually the diva that wraps or complete up on. We can actually create a fragment of this one instead. Know that we know what a fragment is. We don't have to have a deep there, and then we just place a global style below here and with self. Close it and save it. And as you can see, the style is kicking in here now, and we don't have this ugly border, and that's great. And just hours before, I have already traded this one in our phone here. So I remove this one and I will import it instead. Here in Port Charlie braces global style from Don't forward slash styles on Global Start, and we can remove this one here and save it. So that's it. That's everything there is to global Starling. You just create this global star component and you just place it high up in your Hiroki. All right, I think I can show you the spinner also here. As I said, it's going to be a CSS animation that makes or loading spinner to spin. First, make sure that you're inside over your spin it off Js file your spinner component. We have to modify it a little bit here. The first we import styled from style components and then recreate the cost. That's called style spinner, double capitalists on that one. And we have our style and this is going to be a deal. We have our tactics, and inside of here we can write our CSS and actually this one. I think I found this one on the Internet somewhere. I don't remember where now, so I can't take all the credit for this one. We set the border to five picks of solid and we have a color off F three F three f three. Yeah, that was hard for me to say. We set the border, talk to five pixels, solid on the calorie ISS 16 the four seven b. We have a border radius. Oh, 50%. We have a with off 50 pixels and a height off 50 pixels. This one is going to be a circle. And we have our animation. Are we going to call it spin? It's going to be active for syrah 0.8 seconds, and it's going to be linear on infinite. Um, the infinite will make sure that it keeps spinning and spinning, spinning and never stops. We have a Morgan off 20 pixels on order. Okay, then we're just going to create our animation here, so we create key frames. That's called spin. That's what we named it up here. And we start at 0% transform. We rotate Syria degrees first. Then when we were at 100% transform on gun, we have rotated it 360 degrees. Like so. Okay, so this is it to get this one to spin. We just have to use this star component in our spinning out. So we said it a style spinner on. We save it, see if it pops up. Yeah, have s you can see exactly Cesp Inner. Also, we have to remove that one. Of course, this one won't show all the time. Later we will set it up so it will just show when were fetching data. Okay, so that's the spinner. And just as before, I'm going to remove this one here. And I in Fort my style spinner from talk, talk forward slash styles and style spinner. Well, I can't remove this one here. Great. That is working great where it grates. So I think that will conclude the part with the star components. Of course, we're going to use to start components in the continuation of this force also, but I just going to import them from this Styles folder. If you get curious on how something is styled, you can just check out this photo and the stars will be here for you to look at in the next video. We're actually going to get their movies to show up here. When I create a grid and the movie thumb, so see them 11. Grid and MovieThumb: Welcome back. I hope you enjoyed working with start components and that you learn something. If you want to learn more about style components, I highly recommend that you visit their home pitch and read more about it. They have a lot of information here where you can learn more. And also, if you want to read my post about star components, you can look that up. It's on different platforms, but one is free code camp Don't or On here. I describe a little bit about star components on the three different steps that I think you should know to get started. Okay, we are going to create the movie thumbs in this video and make them to show up on our home page. If we look at the finished up yeah, you may wonder why we're not creating the search, Barner, because it would be more logic to go from top to down, but I think it's better to create the search bar when we actually have something to show. Then we can see when we start for movies and stuff like that that it's changed here. We'll create the search bar after we have created a movie thumps and also the load more function. So back to the code editor and in your home component, your home Js file. We're going to work in the green component, the movie thumb component on the home component, and we start in the home component first. We're going to do a new import up here, cause if there's no image for the movie with fetching, we want to show a default image that says No image. And I provided you with such an image in the Images folder. A funny, sad little balloon smiley there. Okay, up here somewhere, maybe below where? Import that custom hooked we can import and call it. No image from dot forward slash images. No underscore image. Dr. J. P. D. This will give us this image and it's called No image. Then we're going to work in the green here on if we look yet again at the finished application, you can see that we have a header here in the grid, and it says popular movies here. And if we search for something, Star Wars I love Star Wars, by the way its changes to search result and it would go back. We can see that it says popular movies. So we have to have some code, a check if we're in a search or not back to the code editor and we can actually create the state in this one that holds the search term for us. And that way we'll know if we're in a search or not so below here, where we call the use home fetch, we can create the state with a cost. We have an array with our search term and then our center that we're going to call Seth search terms, and then we just call that use state, and we can give it an empty string for now. So we're going to use this when we create the search function for the application, and here it will store the search term that the user has typed in. Are we already important? You state? Actually, we can remove use effect. We're not going to use that in this component. And more these ones we're going to need later so we won't touch them now. Okay. So far, no, this date is just going to be an empty string, and we can use it to check if we're in a search or not back to the greed down here in or return statement. This is where we render out our JSX. This world is not going to self close anymore. We're going to have a closing green tag. We're going to create some code inside of this one. First, we're going to give it to prop with Heather. So header equals. Then we have totally braces. And no, we can check if we have a search term or no. So we can do that by just simply typing search term. And we create something that's called the Turner operator here, and I'll explain it when we've talked it out here. So we have our search term than a question mark that we have a stream and we can just type search results. No, we have a colon, a new string and popular movies. When this is true, it will evaluate the thing that's on the right side of the question mark. And if it's false, it will evaluate the thing that's to the right of the colon. So in this case, it will return popular movies for us because this one will evaluate the falls right now. So this is the only proper we need to give the grid components okay, inside of the grid here, we're going to show all the movie thumbs. I guess you remember that we now have all the movies in our state, and we have them in a property that's called movies because in or use home fetch, we have our state here. So we have our movies. We have our hero image, Turin Page and Total pages and we grabbing them in our home components. And that means that we can map through these movies that we have in the movie array in the state. So first, we're going to go back into JavaScript plan Here we grab the movies from the ST dot movies , and we're going to map through them. And map is also an ear six method that we can use to loop through our array, and we can transform the elements in the array. That way it will return a new array for us. And that's good because in the react as I told you before, we depend heavily on immutable object. So it's always a good idea to return a new array on. We have a parenthesis. Then we have our movie. For each iteration, it will give us the movie. It's currently on the element in the array. Each element in the array is a movie. Okay, we have a new parenthesis, and then we're going to return or a movie thumb on the movie Thumb is going to have a few props. The 1st 1 is something that's called a key. We always have to specify a key in react. When we looked through things, React uses this key to keep track off the elements in the application. So it will warn us if we don't give it a prop that's called a key. And the key should be unique, of course. And in our case, we have a key in our movie dot i D. This will be unique for each movie we get the i. D from the movie database. AP I. So that's a property on the movie object, and in this case, we're going to give it a proper that's called clickable because we're going to reuse this component when we show each individual movie here. So this one is going to be the same component. It's the movie thumb, and this one is not going to be clickable. That's why we give it a prop that called clickable on. When this is going to be true, we can just type out clickable because the props in JSX will default the truth if we don't give it another value, and then we have to give it an image prop that's of course, going to be or image euro. So we have an image and equals, and we have new cola braces cause we're going toe cut or image. You're all together here, and we can yet again do that with a Turner operator because now we have to check if we have opposed to path for our movie on the poster path. Specify if there's an image for us from the movie database, a P I. And if not, we are just going to show or default no image. So we create this Turner operator here and from ST dot movie dot poster on the score path. We check if we have opposed to path, and then we have a question mark. If we have opposed to path, and we can actually put this on its own road making it a little bit more readable. Yeah, like so salty. Then we're going to create our string for the post of path because we have to contest innate in our image based Ural and or post the size, just as we did up here. And we could, of course, just copy and paste this one. But I think it's good to repeat stuff when you learn things. So we have a back tick and then we have a dollar sign. Curly braces. We grab our image. Underscore. Based on the score Europe that we have another dollar sign and curly braces. We have our poster on the score size. Everything is capital letters here. Then we have 1/3 dollar silent curly braces. This is not going to be from the state, so we can remove that, because now we're on each element in this loop. So we grab that from the element that's called Movie here and from the movie Don't poster path, we can get the path and we l it with a back tick. Then we have to show our no image if there's no poster path. So we create the colon and we simply show the no image, and there should only be one back. Think they're off course? So this is a Turner operator. We simply check if we have opposed to path. If we have, we can create our your l to the image. And we do that by concussed innate in our image based euro on or poster sized to to Europe . And this is defined by the movie database. This is the structure Ural must have to grab the poster image for the movie. If we don't have opposed the path we simply return or no image or the fourth fullback image , then we also can give this movie some a movie I D. And we grabbed out for a movie, don't I? D and we have a movie name on that. Well, we can get from the movie door for Regional underscored title, and we have to close this one also. So there you have it. This is what we're going to give or great components. And as you can see, we're just looping through the movies in our state array and re creating a movie thumb for each movie. And these words are going to be nested inside of the grid component and therefore, this is the Children off the grid component. And when we create Children like this, we're going to get a proper that's called Children in or Green. So that prop is created automatically for us. So we can just grab the Children inside of the grid by using the Children prop. And I'm going to show you that soon. But first, I just want to show you how you can destruct to the state more. If you don't want to write out state every time like here and here, here and here. We can just the structure the state even more because, no, we're destructing out the state, the loading and the error. And if you feel that the this is a little complicated, you don't have to do this. But I convey just show you how to do it. So you know how you can make a more advanced destructor because we can destructed the state also here so we can just put this one on its own. Roe we do it like this. I think I feel a little bit crippled here when I not have the order formatting and stuff that I'm used to, But it will just annoy us if it starts to order from our things. When I tried to teach you how to code stuff, Okay, we can also put these ones on their own road on. Yeah, maybe something like this on this could go off there instead. And I guess this one will go there. Yeah, something like that. And we have our stayed here. And if you want to continue to the structure, you can just create a colon and then create new curly braces. And then we destructor out or movies or current page or total paydays under hearing means. And this is it. Now we have the state loading an error, and we the structure off the properties from the state, this is kind of a multi leveled, the structuring we're doing here. And as you can see, it warns us, you know, that we don't have a state anymore. So we remove this one, and we changed all of these ones. We just delete them because, no, we don't have to type out state before we grab something here. And that's great. I think that's all of them. OK, so we're going to create the grid now, so go inside of your grid components. First, we're going to import our styles and we import style greed l style green conference. We grab them from Don't talk forward slash styles style grid And this is what I talked about before. You have all the styles inside of the Stars folder, so I'm just importing them now. I'm not going to show you how to create the CSS and a star component itself. Okay, We're going to make an implicit return and we have our style greed. That is the one that's going to wrap everything here and inside of the style grid. We're going to have an h one tag and there we grab or prop that's called a header. Of course, we have to do structure out this prop also like this, and we also need to destructor out or she'll grow. And this Children, this is what I talked about before. It is going to be order created for us so we can use the Children prop to grab the components that are nested inside of the component were in. So the shell drill is going to contain all the movie thumbs that we met out here. Okay, Back to the grim. And here we have our style grid contents that we simply just go into JavaScript, returned the Children here, we save it. Hopefully, yeah, we have removed thumbs here, but we're not showing an image is yet. And we're going to fix that now because this is it for this component for now. So we can go inside or a movie, some component or movie thumb doctor's file. And we're also going to import the styles. And they called Style, the movie thumb from Dr Forward Slash Styles styled movie thumb. And we can yet again making implicit returns. We just have parenthesis. We have our styled movie, some components, but first, we can destructor out all the props that we sent into this one. We have our image. We have our movie I d on we have or clickable the other was the key and stuff. You don't have to do anything without here. We're just using them in home to give it on I D and actually the movie name. I'm not using that either. So you can keep it if you want. It doesn't matter. Here. Okay, Back to the movie thumb we go inside Deva script land Here on we create a Turner operator We check if the clickable is true So we have a question mark on parenthesis because this one inside apprentices will get returned if applicable is true and for no, we're just showing the image Well, we have created the routes or stuff like that. We also going to have a link on these images so we can click on it and navigate to that specific movie. But for no were just returning the image we give it a class name over applicable Onda source. This is going to be the image that was selling as a prop. We can give it a new old call it movie some and with self close this one Okay. And here, if this one is forced, we're not going to have a clickable linked. And then we just returned an image with the source. We have an old movie thumb on that one also I was self close. It's okay, Andi, I think this is it for this one. So we save it. Hopefully we're going to have some movie thumbs and we have yes and it's starting to look like something. No, and that's really great. And as you can see, by the way, I'm using wreck dentals here right now, and it's up here in chrome. It's something that's called components now, and you can see that you have the different components here. And it's a bit of nested stuff here now. And it's just started components that create some context here. And it looks starting a bit messy. No. Yeah, but I think they have a new version out soon. That's diversion five. I think of style components that is going to remove all of these nested context stuff, so it will be easier to inspect your components. I think you can play around with Iraq dentals and see for yourself what information it gives you here. You can click on stuff like this, and you can also grab the components. Here on. It will show you in the tree here what components your own. So that's great. We haven't used direct debit pills yet in this course because, yeah, there hasn't been any need for it yet, but react dentals is really great when you have to inspect your and see the three of different components and stuff like that. So it's a great I need to learn how rack doctors work. And this is a completely new version. I haven't got time. You had to look at it, so I actually don't know exactly how everything works here. But it will show you the component tree for your application, and that's great to be able to inspect that it will also show you state and props and things like that. And that's also great to have kind of a better overview off the state and props in your application. As you can see here on the movie some, it's showing us the clickable. It's showing us the image on movie idea and moving name. That's a props that we send into these ones so we can just turn clickable on and off. It doesn't matter. I don't know, because we haven't created on the click functionality yet, but it's easy to just test stuff out indirect dentals this way. If you have, for example, in this case of Julian, then you can just switch on and off, so that's great. I think it's a good idea that you at least take a little bit of time to check out react dentals 12. Load More: way going to create the load more function in this video. And if we look at the finished up, we have this button down here and we click it and we load more movies here. And that's great because we don't have to load every movie from the beginning. We can just make the use or decide when it wants to check out more movies here. And we could also, of course, just implemented on Infinite Scroll or something like that if we wanted to do that. But I choose to have a button for this course. Okay, so let's go back inside over code editor and into the load. More beaten component. The load more button component up here we are going to import the stars. We have something that's called Started Load More VT. And hopefully you're seeing the pattern now are and the things we're going to grab that from. Don't thought forward slash styles forward slash styled load, More beaten like so then we're going to the structure of some props here. We're going to have a prop for the text. That's the text that shows in the button. We actually just going to have one button in this course, but it's very to show how you can create the components a little bit more dynamic. If you want to re use them, we're going to have a callback function. When we click on the bottom, we're going to make an implicit return for this one, and we have our start load more beat in an inside of there were just going to return the fixed. The text there is going to be provided by the prop that's called text. We have to have some Klay Candler on our bottom. So first with set the type the bottom and then we have on on Click. And here you can also see that we use camera case instead for the own click event. And this one is just going through used to callback function that we provide to this one. So that's it for the load. More button. Yeah, unless you can see you know it is stuff black now, and that's because we haven't provided it with texture. So let's go inside of the home component. The Home Doc Day. As far we can do a little bit of clean up here. Also, this movie thumb here, we can remove that one. We're not using it, because if you look here, it will give us this broken movie from here. No, we nesting them inside of the greed in step and also the spinner. We're not going to show that if we're not loading anything, so we go inside JavaScript, Victrola braces, we shake it for loading is true. And if it is, we just returned the spinner. And this is a short circuit together. So if this is true, it will simply return the spinner. If it's false, it will return nothing. JSX will not render out anything here if this is false, okay? And we're going to give our load more, but on some props. So we have the text weaken, just typing load more, and then we're going to give it to call back. We haven't created this yet, but we can give it to it now. We're going to call or callback function, load more movies, and this win through a narrow No. And that's because we haven't created a load more function yet. We'll do that now. So if we move up in our home component and somewhere below a thing we can put it here below the search term stayed. We create a new era function that's called Load More movies, and I can't stress enough the importance off the casing here on when you're naming things. Okay, so this is our load. More movies function, that we're going to give us a call back to the load more button. And we have to think about this because if we look at the finished application, if we load more movies on the start page, it's the most popular movies that we load more off. But we also have a search part that we're going to implement in the next video. So if we search for something here, we have to load more off the search results. And it's a different endpoint Ural to the movie database when we search for stuff. And when we grabbed the popular movies, so at first I had everything in one and point const. On, I think I had about three Turner operators to create an point Ural that works for both loading more when we search and when we have just the popular movies. But I changed my mind. I'm going to create to endpoint Urals here now because I think it will be more readable and this will get quite long. So I remove this sidebar for now. All right, so our first on point is going to be the search important, and we can call it such on point. We have a template, literal Zoback ticks and justice before we first have to grab or a PR girl. We do that with a dollar sign and curly braces and a p I on the score. You're all capital letters. And as you probably remember, we grab that up here. The a p r your Ah, Now I see now that I imported something that I haven't created, you can remove that one. There's nothing that name that I think I mix them up when I created the image based euro. So we're just going to need something that's called a P I on the score, you're out and this is the end point string for the search. And that's why we have toe have something that's called Search in the String and a forward slash, and then we have the movie and then we have some perms for this euro. So we have a question mark and we have the A P I on the score key equals and then we have to grab the key. So we have a dollar sign. Curly braces AP. I underscore key. Then, as this is a search, we also need to have a query to send along to the one point. So we have a number send on query and it equals dollar son Curly braces and we simply give it or search term that we're going to have later. So we haven't created this search function yet, but I create the in point now in this function. So we have it ready when we're going to create it in the next video. OK, then we're going to have a page problem. So we create another 1% and page equals and we have a dollar sign, curly braces, and we know our current page. That's the one we destruction out from the state. So we can just add one to that and that will make sure that we grab the movies on the next page and we're in it with a tactic. So this is the one point when we load more for the search. Then we create the popular endpoint, and this is obviously going to be the one when we load more off the popular movies on the home page. So we have a back kick yet again, we grab or a PR your l with a dollar sign and totally braces. And in this case, we're just going to skip the search that were added to the string. So we just have movie and forward slash, and then we have something that's called popular. And as you can see, the seven points are different to each other. So that's why I create two of them here. Then we have a question mark and or a P I on the score key, and it equals dollars starring color braces AP I underscore key on. Of course, we don't have a query here also, so we can just give it the page Parham directly. So we create an ampersand on page equals dollars are and curly braces, and we have our current page plus one I wanted with the back stick, and then somehow we have to decide which one point we're going to send in, and we can do that by creating Const. Called on point and we create the Turner operator. We check if we have a search term. If we have a search term off course, we're going to return the search on points. Otherwise, we returned the popular important. Okay, No, we can just fetch your movies and we have a fetch movies function, and we're sending the important like so this is the world we grabbing from the use home, Fetcher, and we can actually go inside at one now. So make sure you're navigate into the use home fetch. We have to modify some small things here. First we have to somehow Shecky for end point. Actually, it's for loading more movies. And as the endpoint is the string weaken, just make a simple search in a string for the world page. Because if we look in our important strings here, we can see that we have our parameter. That's called Page. And if we find something in the string that matches to page, then we know that this is for the load more. We can also make some different short choices here on how we set the state depending on that, so we create a new promised. Here, deplore Sepp loading we can call it is load more. And as our endpoint is a string, we have a string method that called search endpoint dot search parenthesis and inside of quotes with type of page. And this will return minus one for us if it doesn't find Paige in our endpoint string. And that's good because then we can decide how we will structure estate. Because if we load more movies, we want to upend the new movies and keep the old movies in the state. Otherwise, we want to wipe out the movies and just show the new ones. So if you go below here in a set state function, we can create the Turner operator for a movies property, and we shake it for its load. More not equals two minus one. Then, as this is a turning operator, we have to have this question mark. And if this isn't minus one, then we know that we load more and then we have to append the new result to the old movies . So we have to spread the old movies, and we can do that by spread prep dot movies and then a coma and we just append a new result and we have to remove this one here and create the colon as this is now a Turner operator. And in this case, if we're not loading anymore movies, we just spread out. The result results. We create the common era as this is an object. No, we are returning different states, depending on how we load stuff. If we load more, we are going to return a new array with the previous movies and also much in the new result that would get if it's not loading more. We just wipe out the old movies and we returned the new results. Okay, so this is everything we have to do here for this one to work. So we save this one and also make sure that just saved your home component. We go back into our application and hopefully it will work. And it doesn't That's great, because no, we can load more movies here, and I always love to see when things just work and it's starting to take shape. Now it's looking great. We just have to fix one more little thing before we're finished with this video. So let's go back into the code editor and inside of her home components. We have to restrain or load more button so it won't show when we're loading anything and that it doesn't show up when we actually on the last page when we have grabbed all the movies and we can do that by creating a little nice short circuit here. So make sure you're at the line just over the load more button component in your home component and create the cola braces. We have our current page and we shake that that is less than or total pages. And this will make sure that yeah, this one won't show up when we're at the last page. And we also want to shake that. We're not loading anything if we're not loading anything. As you can see, this is kind of a triple short circuit. It will show the bottom. So we make a parent assists, you can remove this one's there because we're going to wrap or button inside of this. So we have the closing parentheses under closing curly braces there, Um, yeah, something like that. And if we say this one now, I would load something you can see that our button disappears and it won't show up when we're at the last page. So that was the last touched on our load. More button in the next video. We're going to create the search bar so we can search for stuff. See you in that one. 13. SearchBar - Controlled components: I'm so excited for this video because this will conclude the home page for us. And then we can continue on creating our roads and also building the page for the individual movies. Because, as you can see, we just have the search bar left to do here on our home page. And that is what we're going to do. You know, we're going to be in the home component and also in the search for component and also do a little bit of modifying with our config and our custom hook use home fetch. But let's start in the search for component the search party s file for this one. We're going to need a front awesome icon. So we're going to import at long import phone from react, Dash font. Awesome. And that is the little magnifying glass you can see on the up here. We're not using that man in front awesome for this application. So you could also create an SPD or something so you don't have to import the front awesome library for this world. Then we're going to import the styles for a search for so we import call it braces styled. So it's more and we have something that's called style search bore content. And as you can see, I haven't uppercase be on bar here also, and we grab them from don't want forward slash styles forward slash styled search bar on. This is getting a little bit long here so we can put them on their own line. Something like that. This is not going to be on implicit return cause we're going to have some logic in this component. So we can't create curly braces here and we're going to have a return statement. And first, we're going to have our style source part that's going to wrap everything. And then we have a style search for content. Then we're going to have our front. Awesome are come. We give that a class name off F a dish search on the name off search and a size off two times. And this is props that we send into the front Awesome icon. And those props are defined by the library that we import up here. So it's nothing that we have done here. We're just using this component as by the instructions off this library. Okay, then we're going to have an input Where the use a gun type something on. It's a type of text. We have a placeholder that's going to be the text that shows up before we type in anything . Search movie. We're going to have an on change event. And yet again, you can see that I'm using camera casing here when we're in JSX. And for this one, we're going to have a function that we create that we can call do search. We're going to have a value, and we're going to grab that value from or state because we're going to create the local state in this component also. All right, so this is it for a search bar on DAP. Won't work now because we haven't created this one's yet, But we're going to do that soon. First we can destructor out of prop here is going to be a callback so we can call it a callback. We're also going to you state in this component, so we have to import that one from react. You state, are we going to use something that's called use ref and use drift is the hook that you can use to keep a mutable value between renders. And I'm going to explain this in a second When we use it down here first, we can create our state. So we have our state on the set state justice before I call the You State and we give it an empty string to start with J. Then we're going to create the cost. That's called Time out. We're going to set the time out for this one on that, also going to explain in a second and here we can call or use rift, and we just give it the value of no to start with. So no, we have everything and we just have to create or do search function. But I want to explain the concept off control components for you before we do that because this is going to be a controlled component instead of using the built in state for the input element. If you create an input in your HTML document that will have its own state, but we'd react. We can let this components take over the state and control it itself. And that's what we do in here, cause you can see that we have a value prop here and that value is the state value here. So every time to stay changes, this value in the input field changes, and we're going to set the state value in or do search function. So this is going to be kind of a cycle here where we type in the text in our input field that will trigger to do search function that will update the state. And in turn, the input field will get its value from the state. And that is a control component. The state value on the input value are always going to be in sync. This way we create our do search to search. There's probably a better name for that function. I know that. But it'll have to do for now. We're going to have our event as a parameter course. When we call Do search here, it's going to send along the event, and it's a narrow function. We can actually for no, just to a counselor here. So it comes to look out the event and save this one. And as you can see, we have our search bono and if you go into your console and we type something here test. You can see that we are council logging out. The event here and the event is an object. Were have different properties and we are interested in something that's called event target. We can go back into our application and we can console log event target type something here , and then you can see it is our input. Feel that it's targeting here. And as we have a value prop on this one, we can actually also grab the value. So we crossed a long event dot target docked value and save this one on with type something . And as you can see, it's consular gout, every letter, a type out here. And we can also the structure off this one. We can create the cost and from the object we have totally braces here. We grab the value and we grabbed it from event targets. Then we can set our state with the value and we saved this one. And if we go back here to our application and type something, you can see that this one is showing what we type. And it's also Consul logging it off. And this component is updated by the state So this test here is actually what in our state now And that's good because now or input field is sync with our state. And that's great. Of course, if we just common thought this and go back, you can see that it's not updating here. It just Consul logging out each letter. And that's because we're not setting and a value in the state, so this one won't have a value. So that is the full circle of this control components. Okay, enough said about that. We can make this appear ago. Can also remove this consul log. No, we're going to use these rift that I created here. If you have a value that you want to be able to mutate and that you want to keep between horrendous, you can use the ref. And in our case, we're going to have a time out. Just a slight half a second time out. Because when the user type something here, we don't want our search to kick off immediately. That will trigger a search too often. So we're going to set a time out instead. 30 use have got some time to type something before the actual search kicks in every time we call this do search with first going to clear our time out. We haven't set that one yet, but we're going to set it in a second. So we have our time out up here, and if you're going to grab the current value, you have a property that's called current. So we clear our time out here before we do anything else. And actually, we can move the state below that one. Okay, then we're going to set their time out. So time out, Dr Current, it's going to equal. And we're going to set the time out. A set time out is built in. And JavaScript it has nothing to do with direct. And we go to have an in line arrow function here. And we're going to call our callback function here and sandy in or value, and we're going to give it time off 500. That's half a second. When the use of type something, it will wait for half a second before invoking or callback function that will trigger of search that gives the use of sometimes the typing a complete word. So this is the search for component we just have to create the callback function and as we going to need the value in our home component, because when we treated search, we're going to do that from the home component. We have to create that callback function in the home component and sanity in as a prop to the sorts bar. So that's the way we get those values from the search bar up to our home component. If we had create the callback function here, there's no way for us to grab the values in our home component and make a search. Okay, so let's go inside of her home Doctor Yes file. And just over the load, more movies function. We can create the new function, a new era function called search movies, and we're going to have the search parameter for this one, because in our search bar we are sending along a value that this is going to be or parameter. That's called Search in our search movies function, and we're going to do a little bit of riff factoring now, actually, and that's because we're going to use almost exactly the same endpoints here for the search function. We're just going to leave out the page program and the current page, and it's kind of redundant to type out everything again when we have almost the same here. And it could, of course, also combined these functions into one cause they're going to be very similar. But I think it's a great idea to at least sometimes let your functions just do one thing. And that's a concept that's from functional programming. So I choose to have two separate functions for these, and it will make it a little bit more readable. These endpoints in our load more movies. We can just copy this one's straight away like this, so make sure you're marked them and copy them, and then we're going to go inside or conflict doctor's file. So make sure you're inside of that one, because we can create or endpoints here so we can import them and don't have to type them out every time we use them. So just paste them in here. Are we going to modify this a little bit? We can call this one search, underscore base, underscore Europe with capital letters, and then we have to remove some stuff here, so keep everything up until after the equal sign, just after the query parameter. Like so and then with the other one, we can call that one popular, underscore based Europe. And in this one we're going to keep everything besides this. So keep everything up until after the color braces off the A p I key and save it. Then we also have to export this one's or was We can't use them. So inside our export object, we also export our search on the school based on the school euro. This is going to be long. We can put them on their own row instead. We also have to export or popular on the score based on the school euro like so and we make sure that we save this file also and nothing broke, I hope. No. Okay, so this will make sure that we can import these ones and don't have to type them out every time we use them. The first thing we can do is to modify or custom hooked. That's called use home fetch. Because we are selling in this euro here, and that is our popular base euro. So we can just import that instead And that means that we don't need to import a PR Ural and a pikey course. We are setting them here. So we just need to import this one here to go back into our use home, fetch custom hook, and we're going to import off popular underscore base on the school euro. We just replaced this one here like so and we can say this one. We make sure that our applications still works and it does. That's great. So we have to clean up our code a little bit by doing this riff factoring and no, we can go back inside our home component or homed off Js file. We're first going to import are popular on the school based euro on our search on the score based on the score euro And just as in the custom hook, we won't be needing these. So just delete the AP Ireland a pikey and you can save it and it won't work now, But we'll fix that in a second. First, we can fix our load More movies function because that won't work now. So instead of this here, we grabbing our cert on the score base on the score euro and make sure you keep everything here. I give you a second here to look at it. And for this one, we're going to grab the popular under school based on the school euro, and we can delete everything here up until the page. Parham, just make sure you keep the ampersand also. And that, of course, is the same here. And we say this one and we make sure that our application works and it still does. And now we can finish our search movies function first. We're going to create a nun, points. We're simply going to shake if we have a search word or not, because if we don't have a search word, we're just going to show the most popular movies. And that means that we have to grab the popular base Ural instead. Otherwise, we're going to use the search under school based euro plus the search because we have to add the string that you use the searches for also, and we have a cologne. This is a Turner operator on. We have our popular base euro, and I used to plus there instead, you could, of course, use attempted literal if you want to do that, just as we did down here and actually can change this. If you want those who don't have to use a tempered literal, you didn't just do it the old way here with plus signs instead. If you think that that will make more sense for you because, as you can see, it will still work the same well, right back to a search movies function. We are going to set our search term, and that's the state we have up here. And we just give it the search keyword, and we have to store it in this component also because when they used to want to load more movies, we don't stand in a search term because we're not performing a search. But we can store the latest search term in our state here, and then we can decide if we're going to load, Maurin asserts, or we're going to load more popular movies. So that's why we have two states. We have one stayed that's local to the search bar, and we have one state that's local to the home. All right, so this state is always going to keep the latest search term, all right. And then we just have to call the fetch movies with Doran Point and we save it. And I think this is it. I think it should work now, But you're always a little afraid it won't work when you called something because it's rarely that it works the first time. So if I saw it for store Waas and it won't work, of course, Yeah, And that's because we haven't given the search component the callback, and we have our search bar down here and we have a proper that's called Colback, and we're going to give it the search. More movies function and we save it. And then we try again Star Wars and it seems to work. And also, I hope, the load more works. Yeah, if this that's great, and then you can see if we just delete something here, it will update on. If we delete everything, it will update and show the popular movies. And that's why with this little Turner operator here in the search movies, because it's completely different. 10 points to get the popular movies and to search for movies. And you can also notice the little delay here before it started searching, as you can see, and that is the little time out we set in our search board. If we didn't have that time out, it will start to search immediately, and that will be no good. That's not a good UX experience, and it's not good to make that many calls to the search function. And there's one last thing I want to do with this, because when we search for something here, I want this one to disappear. So we're just showing the search bar. Under result. It's released it to fix this, so just go back to your home component and down here where we render out or JSX in or return statement. We have our hero image here, and we can just create a little short circuit here to decide if we're going to show it or no. So go back inside. JavaScript land here with a curly braces. You can have the end curly braces down here. We're going to sick if not search term. If we don't have a search term and then we do a short circuit and put everything of these in parenthesis like so yeah, and that's it. If we don't have a search term, we won't render up this component. We can try it out now. I consult for Indiana Jones this time. As you can see, it works. It removes the hero image here, and that's great. If we do leave this one, it comes back. So that concludes our homepage. And it's working really good. No. And in the next video we're going to create the road in on the roading will make it possible for us to click on one off the movies here, and we can go to another page that show all the information about that specific movie. All right, so see you down. 14. Routing with Reach Router: it's time to start talking about roading for application, as this is a single page application and we not reloading and pages. We need something to do the roading for us and almost simulate like it looks like we're going to another route because if we look at the movie here, you can see that it's rolling us to this around here and this is the I D off the movie, and we're also going to use this idea as a parameter here to grab the data for the movie we're currently at. So that's what routing will do for us. We're also going to have a not found route that we fall back, too. If we're not finding any movie, it's not really that much routing in this application. It's a great practice. If you're a beginner. To start with something like this, we're going to use something that's called Reach Router in our application. In my first version of this course on application, I use something that's called React Router, and actually they are rebuilding stuff right now, so they take good parts off re Trotter and put it in react Roader. But it's not finished yet, so the recommendation right now is that you should use Reach router for small applications where you don't have a lot of roads and use react router if you have a more complex running system. In our case, as I said, it's quite simple. So we're going to use Reach router, and it's going to make it really easy for us to set up our roads. We've already installed the impound package for re trotters so we can just import it in our up component. So make sure that you're in the f dot Js file. You're a component and up here, just below where we import react. We're going to import Roeder from and we have an at sign reach forward slash Roeder and that's how you import that one. Okay. And as you can see here now, we just have our header and our home component and it's here. We're going to create a routing so it will change the component depending on what route we're just below the header. We are using our rotor components and we moved the home component inside of that one. We nested inside Roeder component. We have a path prop and we can specify on what path we want this component to show up, and in this case it's going to be just a forward slash because that's the home components. So we will show this component when we go to our main Europe. Then we're going to have our movie component we haven't created at one yet. We will do that soon, and for this path we're going to use a program. So we have a ford slash a colon. We're going to have a program that we called movie I D. On This could have whatever name you want because we use this to grab the I. D off the movie that was send along with a link that we're going to create soon. All right, then we're going to have a full back component that we can call, not phone, And we can just said it to default and it will fall back to that one if something goes wrong, we're going to create these components now, and we're not going to be in the elements full dinner. We're going to be in the components folder and we create a new file. We can call it movie Doctor. Yes, and we create another file inside of our components folder that we can call not found. The day s inside. I'm not found components we import react from react. We create the functional component called not found. And it's a narrow function and weaken Just implicitly Return de of that, Seth. Whoops. Nothing found here. Yeah, very creative. And then we export the fourth not found. And of course, we have to have an equal sign. There also say that one. Are we going to do it? Except same thing for now, for the movie components. So we import, react from react. We create our movie component, Const. Movie equals parenthesis for no, we just have a deal. That's that's movie. And we export default movies like, So we go back inside or up component. And here we import the components the import movie from dot forward slash movie. Every import not found from 0.4 slash not found. We saved this one. Unless you can see, it still works here. And if we, for example, type something in up here, just a random number it will show us the movie component instead. And this one is going to be called movie I D. Cause we named the parameter at, and we can grab that in our component so I can actually show you that one. Now go back inside your movie components, and the great thing would reach Schroeder is that you can just the structure of the movie I d. Here. It will sound at one in as a prop on We can't do like this. We do a colon and we just go inside. JavaScript. We have our movie idea, so make sure you put movie I D inside curly braces and save this one. You can see that we have the same idea here, and that's great. And that way we can grab The correct data for this movie is so if you see you can change something here and it will change here also, so it's super great. Okay, we also have to be able to link somewhere when we click on stuff. For example, when we click on the logo, we want to go back to the homepage on when we click on the movie. We want to go to that specific movie or logo is position in the header, so Insider Elements folder on the head a component we first have to import a component that's named Linked from the Reach wrote a library. So we import link from at reach, forward slash Roeder like so And then we just have to wrap our logo inside the link and we have or local here. So we create a link component. The link component has a prop that called to So we can just specify where we want this one to go when we click on it. And in this case, we wanted to go to the homepage. So that's why we just have affords last year. Then we just position or image inside of this one. We're also going to be able to click on our movie. Thumbs inside are moving thumb. We're going to do the exact same thing. First, we import link from at reach, forward slash Roeder, like so on. We already created his Turner operator here. So if this clickable is true, we're going to have the link components and be able to click to go somewhere. So we link two equals. So we have curly braces and attempted literal with a back tick. We have a full slash then we have our dollar sign calling braces on our movie I D on. We ended with a back kick there and we close the component and we just move the image inside of that one. And it's this prop movie idea that we send along to the road. We could say this one, and hopefully we can click on our movies. No. So if we click here, you can see it shows a movie component. We can go back by clicking on a logo. This is exactly what we need in the next video, we can therefore start building our movie component, so see them. 15. Scaffolding Movie Page: way have created our roading, and it's time to scaffold off the components we need for our movie page. And if we take a look here at the finished application, I'm, for example, grab a movie here. We can see that we need a couple of new components here. We are going to need some kind of a navigation component here because when you click here, you can go back to the start page. I'm also going to need a component that shows the information about the movie. We have a little plot here. We have the IMDB rating on the director and the title. This one, as I told you before, is going to be the same component as the movie thumb, so we don't have to recreate that one. Then we're going to have an info bar here with some statistics off the movie. So we have the running time, the budget on the revenue, and also we're going to have the actress. So this is what we have to do this for new components. We have to scuffle out. So let's get to it inside or Elements folder. We create the new component that's called actor Doctor Yes, we create another component with a file name off movie info dot Js capital M capital I on we create yet another one and we call that movie info Bardot A s capital M capital I Capital B And we have our navigation components. We create that well, navigation? Yes. Like so we can just start to scare ful. These warrants out for now. So just as before, we import react from react and we create a functional component with a narrow function. Const Actor equals a narrow function on for no, we just have a diva and we can just type out actor we export default actor look So then we go inside or movie info dot Js file and we import reacts from react. The Creator are a function called movie info equals a narrow function on a deal. We can just say movie in four for now, we export default movie in fort. We save it. Make sure you always save your files. Of course. All right, then we go inside our movie info barred off days file we import react from react. We create the cones that's called movie info bar and a narrow function on. We have a Deve with movie info bar, the Export Default Movie Info Bar and Save the File. And then the last one. We have our navigation so we import, react from react, create a narrow function called navigation. I guess you know what to do by now and we return a deep that says Navigation. We export default navigation. You have officially scaffold out all the components that we need for this application. So save the file and then we go back inside our movie component and we're going to import. This one's there. We can make a little comment here. Components reimport navigation from talked forward slash elements forward slash navigation and we import movie in foot from dot forward slash elements movie in full, and then we import movie in full bar from dot forward slash elements. Forward slash movie info bar on. We import our actor from not forward slash elements forward slash actor, and we're also going to need agreed on the spinner For these components, we can import the grid from dot forward slash elements grid on the last one. Import spinner from dot forward slash elements spinner All right, and for no We can just make an implicit return. So parentheses and then we can just scare filled it up. We create the fragment on a closing fragment, and inside were going to have our navigation self close it we're going to have or movie info or movie movie info bar. Then we're going to have or Greed and Weaken Nest are actor inside of that one on. We can also have our spinner like So I make sure to remove this one there on we save it. Okay, Let's check it out. Yeah, and they would have them. We know that they work so we can start creating all these components and make it look as nice as this. And that's what we'll start doing in the next video cereal. 16. Fetching data from TMDB API to Movie Component: way have successfully created our home page. And it's time to create the individual movie page, because if we click here now, we just have our sad little components here and on Loading Spinner that is spinning and spinning and never stops in. This video will create a custom fit shook that will use to fetch all the data that we need for each individual movie. So let's go back into the code editor and inside of our components folder inside of her Hooks folder, we create another hook that is called use movie fetch dot Js capital, M Capital F. And as I already showed you how you can create your logic inside of your component first and move it inside of a custom hooked, we are going to create this one directly in the custom hook and not created in the movie component first. Okay, for this world, we're going to need you stayed use effect. That's something that's called use cool back and that one we can use to stop or use effect to go into an infinity loop. And I'll show you that soon where we grabbed these from react, Of course, Then we're going to need or a PR You are out or a P. I keep that We grab those from dr forward slash Dr Ford slash convict. Okay, then we create their custom hook. Are we going to export it? Just us before export const use movie Fitch. And for this well, we're going to need a parameter that we can call the movie. I d like so And also justice before we're going to create three states here. So we have our stayed, are set, stayed and we call you stayed and we give it an empty state with Justin object. We have our loading state loading and cept loading call. You stayed again and we set up 12 fools and we have the last one. And that's our arrow and sit. You stay. We said it, the fools. Okay, then we create the function inside of here that's called fetch data and we have to wrap this one in a use core back. We are going to use this movie I d inside of here. And let me is that this first will change on every render because we are depending on on external value here. But we can wrap this one in the EU's callback hooked on. We just provide it with an inland function, and in this case it's going to be a sink justice before because we are going to await or data and the use cold. Back also has a dependency array. And that means if we give it this array and we also type out movie I D. That means that this function will only change when the movie I d changes and that will prevent us from going into a new infinity loop. So no, we're good to go. We can write their coat for 15 or data inside of this one, and we will call it in a use effect, just as we did before, first with Set or our two fools that was set the loading too true. This is very similar to the code we wrote before the difference is there going to be now in our tribe locked because we have a try just us before, and we're also going to have a catch that is going to provide us with the error. I will move a little bit faster here now because I have already gone through this so I won't explain it in detail inside of here with set the error the truth. So if you have forgot something, you can just go back to the video where we fetch the data for the home component and I'll explain. It's more there. Okay, I'm just below here we settle, loading two fools. Let's make sure that to go inside of the tribe. Look here, and you may also have noticed that I didn't send in an endpoint to this one as we did before. And that's because we're going to need to end points here because first, we're going to get yeah, the basic data for a movie. And then when we got that data, we can fits the movie credits and from the credits, we are going to separate out just the directors and the actors. So we create the cost that we call and point, and we have attempted literal. So inside of back ticks we have a dollar starring curly braces and we used or April Ural we thought movie forward slash dolla sign told her braces. And here we insert our movie I D. And that's the one with sending here. So this will make sure that we grab the day tough for this particular movie. Okay, then we have a question mark and we have our FBI on the school key equals. And then, of course, we insert or a P I on the school key. Yeah, and that's it. We can end it with a back tick. We get the result in a result, Coast. And just as before, we're going to double await. So await parenthesis. Onda weight again fits. We fetched one point. We parse it in today, son like this, we can just type out consular on the result for later. So this is it. We're grabbed the basic data for a movie. And when we got that data, we can also get the credits for the movie. So we create another cost and call. It credits M point. Like so. And yet again, we have a temperate literal. So we grab our FBI on the score euro. We have moving forward slash dollar sign, curly braces and we get again, have our movie I d. We have a forward slash We haven't one point where we can add credits and that will make sure that we get the credit for this movie. We have a question, Mort and or a P I underscore. Key equals dollars. Sarin, curly braces AP. I underscore key and that's it. We end it with another back tick. So this will get us to credit for the movie. You just have to call that one point and we can store that data that we get back in a constant that called credits result. We do the same here we await. We have a parenthesis weight again. We fetch the credits on point reports it in today. So and as you can see, it will be possible to reflect this and make it a little bit nicer looking here. But I think for the sake of this tutorial, I want to be extra clear. But if you feel that is something that you want to do, you can take that as a little challenge and reflected this for your own likings when you have finished the course. And I think we'll actually stop here now and create the use effect because I want to consul awesome stuff out here before we continue in several states. So again, council log or credits result also and then we have to create the use of FIC down here. That is going to be an easy one. We have the use effect we don't even line are a function. We're just going to call the Fifth Data. And of course, we have to return something in this custom hook also. And we're going to return Honore. It's going to return the state, the loading and error in this world. We're not going to return a function that grabbed data for us because we are just fetching this. When we mount this component, we not going to have something that load Mawr or something like that so we can save this one. And of course, we have to use it inside of our movie components. So make sure you navigate into moving or tears on. First, we have to import our custom hooked. So import use movie fetch from don't forward slash hooks forward slash use movie fetch. We have to make this explicit return instead. So we create Charlie braces. We create the return statement. We move this one inside of the return statement. Like so. Of course, I can remove this one on just here at the top. We can call our juice movie fetch. So comes with the structure off their movie loading on or error use movie fetch on. We call that with our movie I D. And this idea is the one with something that we grabbed from the girl up here. Of course, if we click on a movie here, you can see that we have the movie idea up here and we send it into that one in the movie thought here where we linked to the movie, we are also sending along to move ideas of Peron. So that's why we can grab it with a program name off movie I D in or movie components. And this is actually the prop that's called movie idea that will send along here. But if we look at our up component in our road, we named this Perm movie I d. We could unnamed it to whatever we want. We could have call it cool, but then we also have to grab it with cool like this in our component. But we're not going to do that now, obviously, so change everything back. If you change that one, it should say movie. I D and move back to your movie components. Okay, so this will call or hook. We can save this one. And as you can see who have a little error, you know, it will go into an infinity loop, you know, and that's no good. And we have to shake. Why? So let's go back into our use movie fetch. Yeah. And of course, I forgot to set the dependency array here. We are going to depend on the fetch data here, so change that and save this one. And as you can see, you know, it works. And I can also show you if we remove this use cool back here, I'll just remove this like so you don't have to do this yourself. I'm just going to show, you know, and you see that it warns me here now, but I can say this one and you see it will go into an infinity loop again. And that's because it will change on every render. But if we use cold back here, it will only sense when the movie I d change on the move, I d won't change no cause. We're already in this movie, so it's the same movie idea all the time. Hopefully, that makes sense for you. It can be a little much to grasp just when you start to use hooks and I have to be honest, I wasa little bit confused at the beginning also. But here we have the two consul Ox I created on this one is the movie itself. It's the basic data about the movie, and here are the credits. So here we're inside of credits. We have a proper tickle chest on a property called Crew, and that's great. An inside a movie here. You can see we have a lot of stuff here that we can use if we want to do that. Okay, so we know that we're getting data and that's good. We can move back inside of our use movie fetch Custom Hook, because now we can set off state depending on this. But first we have to do some filtering because we only want the directors from the crew property. We looked at the finished application here, and you just select one movie here. You can see that we are showing the director or if it's more than one director, we're showing them here and we were showing the actors. And if we take a look at the crew property here, we have a lot of different crew here. We want the ones that has a job that equals a string off director. So we can feel to this one and just grab those ones. So we create the new coast that's called directors. Every grab or credits result, we go into the crew property. Are we going to filter that one so parenthesis and inside of the filter, we're goingto provide it with an in line function. And we make an implicit return with a narrow function so we can call the parameter member, and we have a narrow function, and we check if the member dot job equals to quote Director, make sure that you have a capital D there on director, and this will only grab the ones that has a job description off director, and it will place them in or const. That is called directors. Okay, so that's everything we need. We can set our state now, So set stayed. This one, we don't have to provide within inland function, cause every time we go to a new movie. We're going to wipe out the old states weaken. Just provide it with an object. We spread out our result and this will give it everything that we got back. In a result, of course, you don't have to do that. But for the sake of the simplicity, I just spread it out even if we don't use every property inside of here. So we have a result. We set their actors to credits result dot cast and we set our directors. I want a proper. The name is the same as this one here. We can just type out directors. We don't have to type it out like this. That is redundant. So this is our state, and that's everything that is fully is hooked for now. Make sure you save it. We can remove these consulates also save it again. And inside a movie, we can actually council long movie and you can see here This one that I call movie here is the same as I call. Stayed here in this one on. Yeah, I don't know really. Why I named it move here. It made more sense, I think. But that's the thing. When you destructive this, you can name them to whatever you want. When it's an Array, you just have to have them in the same order. Gates. We cancelling out the movie and save this one. It seems to work wherever actress and we also have our directors here, and they're all the data here for the movie. We're not going to use all of that data, but it's there. So that's their data for the movie component. In the next video, we're going to use this data and start building up or movie page. 17. Navigation and MovieInfo: way going to push forward on creator navigation on our movie and for components in this video. On first, we're gonna take a look at the finished application, and here we have the navigation on. We also have the movie info that we're going to create here. The navigation is only going to have one link and that will link back to the home page. Okay, so these are the ones that we're going to create? No. And make sure that you start up your application, your development environment with NPM start and we'll start off in the navigation component . The navigation Dr A s file. And up here, we're going to do some more imports. The first we import link from at reach ford slash rotor. Right. Then we're going to important styles. So import styled navigation from dot dot forward slash styles styled navigation on. No, we're good to go. We can create the JSX for this component. We can make an implicit return here, and we have our started navigation, and I can tell you know that Yeah, we mostly going to do JSX in this video because, yeah, we have already grabbed our data. And now We just need to use their six to make the visual parts of our movie page okay inside of here. We're going to have a day of with a class name, off navigation dash content. Then we're going to have a link and it's going to link to, and this one is going to the homepage. So we just make a ford slash and inside a link with just nest API tag. With whom? Then if we look at the application here, you can see that we have a line here and we're going to create that one now. So that is just also Peter here. Onda Straight line. I actually don't know what this is called in English, but it's the same line as we use when we create a short circuit with double lines. And of course, you can make another line if you want to do that. All right, then we're going to have another p tag on this world is going to contain or movie, and that is going to be a props. We can destructor out that here. So that's our movie name that we're going to send into this component. We can save this one, and it will not look good. No, because we don't have the movie name here, so we have to send that one in as a prop. So move inside over your movie dot Js file your movie components. Okay, then we have a navigation here, and we can create a prop that's called Movie. And we send in the movie. Don't already know, Underscored, titled and be observant about the underscore here. I'm not camera casing. This will make sure that we get the movie title into our navigation component. We can actually do some other stuff here. So first, we're going to check if we have an error, just as we did in the home component. And if we have an error, we just return a div. Yeah, and we can just have something. Well, wrong like this. Okay, so if we got a narrow, we don't render out this one here. We just returned this text instead. And I actually think that we're going to move this spinner appear instead. We don't need it down here for this component. And we can check if we loading here. If loading, we just returned or spinner and we can remove it from there. Save this one. You can see if we press this a lot of time. You can see the spinner there and that's great. OK, so that's our spinner. And we also make sure that we do something if we get an error. So it started to build the movie in four components, so make sure you're inside a movie in food. Okay, as far for this world, we also going to show on no image default image if we don't have an image. So we're going to import that again. Important. No image from Don't thought forward slash images No underscore image. Dr. J. P. D. And don't forget the file extension there. Okay, We're also going to need our image based your l and or post a size so import image underscore. Based on the score. Europe On a poster on the score Seiss we grab them from dr forward slash doctor forward slash conflict and we're going to need our movie Some components import movie thumb from don't forward slash movie thumb. Okay, and then we have our styles. So import styled movie info from Dr Forward Slash Styles Styled movie in foot like so on for this world, we also can make an implicit return to create parenthesis. Are we going to have our style movie? And for component? This one is going to get a backdrop. Image. It's the one that we are showing here. So that one I set that were in the CSS in the style component. So we make sure that we give it a prop that's called Backdrop. Can we give it the movie dot Backdrop, underscore path. Okay. And this works the same way as I showed you before in the course where we set the background image. We can actually take a look inside of the styles for this one. So we have our styled movie and folks. And as you can see, I'm setting the backdrop image here with the props that we send him to this style component . So it works the exact same way as I showed you before. Okay, better a movie info. We're going to create a lot of gives here Now, First, we're going to have a deal with a class name off movie info Dash Compton. Okay, then we have a not a d of we're a class name off movie info. Dash some on inside of this place that's called Movie in four Dash some We're going to have a movie some. So we used that component inside of here. We're going to give it a prop with an image and the images also just us before going to be sent to him by a Turner operator because we want to check if we have opposed to path. Otherwise, we're going to show to the fourth fullback image. So we shake. If we have a movie dot poster underscore path, then we have a question mark on we're back ticks. If we have opposed to path, we have an image so we can show that one. So we're dollar sign, curly braces, the grab or image base Euro on directly. After that, we have our poster size on. We ended with the 3rd 1 here. Then we grab or a movie poster path and we end it with a back kick. Okay, then we have a colon every going to fall back to our fullback image. I don't know why it created to back takes there. Okay, on. We're also going to set the clickable Prop two falls for this one. We're not going to be able to click on this image. And we make sure that with self close this component I can see you know, that I misspelled this one. It should not be a capital M. It should be a lower case M. Okay. And we have to destructor out the prop here because we're going to need the movie prop like so we saved this one. And we also have to send in this prop to these components. So let's go inside. A movie component on Don't below. Here we have our A movie in full, so we create a movie prop. I would just simply give it the movie on. In this case, I'm also sending in the complete. You don't have to do that. You can just send him the properties that you need for these components. Okay, We can take a look at the application, and as you can see here, it is successfully showing here. But we can't find an image here on that. Strange because it should have an image here. Yeah, and that's because I misspelled this one also. It should be a lower case m there, so make sure that you have a lower case M on the movie and we save it. And there you have it. You get the image hero, So that's great. It's starting to take shape here. No. Okay, we have a few more things to do here, okay? And my code editor has added this one here cause I misspell this one, so I will just remove this. So that's our movie some. Then we have to create the text here also below the diva. Here. We're going to create another deal with a class name or movie info dash, text air. We're going to have an H one tag on. We create a color brace on. We grab our movie Dr Title on an amateur embrace. Then we have a H three tag. You can just type out plot. We have a P tag that we have curly brace on our movie Dr Overview. So this is the property on the object we get back from the movie database that are showing us the plot. Okay. We can save this one and shit. What we've got Yeah, Looking nice. Everything is working. Fine. So let's get back inside of the components just below the div with just created, we create a not a deal. We had a class name off rating Dash Director, Are we going to have another deep inside of that one we create on H three tag? That is really difficult for me to say. Age three. I hope you understand me. I know that I'm not natively speak English, so we have a header and with typing imdb rating, Then we have another deal with a class name off score on inside of that one. We create the color brace and we grab our movie dot vote underscore average. And this is, of course, also coming from the movie database ap I It's nothing that I've created. So we're just grabbing the right properties here that we need to use from the data we get packed from the movie database. Okay, so that's a raving. We save this one, Then we're going to create one wind are directors also. So we create another day of we had a class name or director, okay? And we want to check if we got multiple directors, then we want to type out directors wilderness, or if we just have one director than we want a type of just director. And we can do that with the Turner operators. The first we create an age free time here and we type out director. Okay. And here's the little trick. Then we created totally braces, and we grab the movie prop on. We check the directors don't live. If that is greater than one. We have a question mark in this Turner operator. Then we just returned on s so we'll add. That s to this one here. Otherwise, we just returned Nothing. That's a little trick you can use when you do something like this. Okay. Yeah. And we got some arrow here on Uh, yeah, I think I know why. That's because when we first runner, this one were just shaking. If it's loading here, so it's going to render this one. First loading is going to be forced when we first rounder, this one so other, we can go inside the use movie, Fitch, and we can change the loading to true here. And that will make everything fine for us. Or we could just inside a movie, we could create another conditional here. For example, we could check for, not movie dot regional title, and that will work just fine also, But in our case, as we didn't know, we just changed our custom hook here to set the loading to true. Initially. And this will make everything fine for us. So make sure you change that 12 truth and go back inside of your movie in four components. Of course, I can see that we have some other stuff that we need to change. This don't look right. So I made a mistake here. This Dave here, just remove this one. It should be done here instead. So this one is going to be like that? Um, something like this. Okay, that was saving. Yeah, And it looks nice. No, but I'm not showing the directors now on. We have to do that. Also, we have to map through our directors because the directors is in an array. And if you remember, as we did before, we can do that by using the map function built in javascript here. Six. So we create totally braces on. We grab our movie Dr Richter's dot map. We created inland function, and we're going to have our element and a narrow function and we can make an implicit return here. So we're going to create the Pitak. We need to have a key. As I told you before, React uses this key internally in the virtual dorm to keep track of all the elements. So every time when it looked through something when we met through something like here, you have to specify your unique key and you shouldn't use the index value. Yeah, there's a different reasons for that. But it can make trouble for you if you use the index value. In our case, if we look at the go back to get back here, we have our directors on, We have the raid and we have something that's called credit on the score I d. So it can use this one for our key. So we grabbed it from Element credit on the score i d. And inside of the Pitak, we just return or element dot name and make sure that they use curly braces here. We can say this one and it works. Whoa! And that's everything. There is produced component. So we successfully created the navigation on the movie and for component In the next video , we're going to create the movie Info bar and also show all the actors and after that, all the visual parts and all the functionality will be just fine. Inter application. But we're also going to learn how to type, check or props with prop types and hope to persist or stayed in local storage and session storage. 18. MovieInfoBar and Actor: way. Just have our movie info bar and our actors left to do on this application before we start learning about prop types and persist state in local storage and session stories. So let's get to it back into the code editor. Are we going to start to work in our actor components so interactive dot Js file for this one. We also going to import or no image fullback image So import we call it no image from no taught forward slash images. No underscore image Dr J P D like So then we're going to import our image. Underscore base underscore you're out on our poster Underscore size and we grab those from toe tot forward slash doctor out forward slash convict We also have our style. So import started actor from not thought forward slash styles stand actor. Okay, Always the same, the same pattern over and over again And it may seem a little bit repetitive now, but it's good to repeat stuff when you're learning. K and four are actor. We're going to have a proper that with the structure out that is called actor, are we going to make an implicit returns? We have parenthesis. We have our style actor and inside of the star Lecter. We're going to have an image. We have a probe that called SRC. Just as before. We create cola braces because again, we're going to use a Turner operator, so we shake it for actor dot Profile path exist If it exists, We have a question mark. Here we return or Euro. So we create a tempered literal with a back kick. We have a dollar siren, color braces we grab or image on the score based on the score. Euro. We have another dollar sign and total braces. We grab or poster on the school size and the last $1 sign. Curly braces. We grab our actor dot profile path profile on the score path. We ended with a back kick. Now we have a colon that we just return or no image. If we don't have a profile path, we can also have an old factor. Thumb with self close this one below the image we create a span with a class name off actor dash name and inside of that span we have cola braces. We return the actor dot name on em Curly brace. Now we have another span with a class name off factor Dash, character coated braces and inside we returned the actor dot character. Okay, so you say this one, this is everything we need for actor components. It won't show now cause it will throw an error. And that's because we haven't given it any props yet. We're going to nest this actor in the grid. But first, we are going to create the movie info bar. So make sure you're navigate into your movie info bar dot Js file and we're going to use front. Also, my comes for this one, so we import front awesome from React Dash front. Also, we're also going to import or help of functions. That's inside off the help US Doctor as far because we're going to calculate the time on the convert money so we make sure we import them in our movie info bar. So back inside of the movie info bar components, import call embrace. We have our character time on or convert money on an M curly brace. And we grabbed these from not thought forward slash dot thought forward, slash help us like so and then we just have to import our styles for this one also. So we import styled movie info bar be observant off the spelling. Here we grab it from Dr Forward slash Styles, forward slash styled movie info bar. All right. Okay. And for this component, we have three different props. We're going to the structure out. We've got our time or body on, or revenue. We're going to make an implicit returns to create parenthesis on first, we're going to return or styled movie info bar components. Inside of that, we create a not a deal with a class name off movie info board ash content on inside of that one, we're going to create our relatives, and it would take a look at the finished up here. It's these ones that we create now. So we're the running time, the budget and revenue. Okay, We create another deal with a class name off movie in full bore dash content. Dash cope inside of this one. We're going to have our phone tossem component. We give it the class name. Oh, if a dash time to give it the name off clock Dachau on the size of two times. I'm just created a class names. I didn't create the name here. That's the front awesome name. So it knows that it's going to show the clock for us. Then below, we create a spell with a class name off movie in full bore dash in food. There were just type out running time, colon, and then we're going to use or cat time. So we call or character time I was selling in our time. And this will make sure that we return the time in hours and minutes. Okay, so that's one. We're going to create two more columns here, and they are going to be almost exactly the same. So we can actually just cook to this one. And I'm going to make a space so we can see the means Here. Here, they're going to have the same class. Name the columns. We just have to change the icon here on the class name is going to be called f a dash body . It on the name for the icon is going to be money. And this class name is also going to be the same movie info bar dash info. We changed the text here. The budget And instead of calling character time, we call convert money and with sending or body it's And these are the props that we structure out up here. So we have to send them in also to this component. But we'll do that later. Okay? That's the 2nd 1 On the 3rd 1 we changed this class name to F A dash Revenue. We have a name off ticket on the size two times in this class name. Exactly the same. We changed the text here to revenue. And instead of calling card time, we call convert money, only sending our revenue corn vert Monnet. Whoa. Money like so on. This function will make sure that we get it in U. S. Dollars. We can say this one and it still won't work because we have to do some work in the movie component. The moving off jazz. Fine. So make sure you're never getting to move it off. Js And we have our movie info bar component here. We have to give it some props. Now we give it the proper time. And with Sandy in movie dot runtime, we gave it a prop of budget and we certainly in movie dot body it. We give it a revenue problem. Now we send in movie DOT revenue. OK, so that's our movie info bar. Then we have to create our actress inside of this grid components. We're going to map through our actors here and create an actor component for each actor. First, we're going to send in the head of props to this grid, and in this case we're going to have the header actors. We can remove this actor components inside of the grid component created calibrates Go inside JavaScript planned and we're going to map through our movie dot actress. Are we going to have an in line ara function? So we doctor actor on arrow function with Macon Implicit return. We create an actor component here with a key, and the key is going to be if we look inside or obey it somewhere. Here we have our actors. We have a credit. I d for example, we can use that one. So from actor, we get our credit on the score. I d okay on our actor is simply going to be or actor. That's the element here that we currently at in or loop Okay, so we save this one on. It looks like it's working. Yes, it's working. Woo hoo! There's our nice little balloon showing where we don't have an image also. Okay, so it's working. We have actually completed or application, and that's great. It works nicely. And the next thing we have to do is learn more about type shaking props and also how we can persist the state in our session on local stories because now it grabbed data from the A P I every time we click here and we don't have to do that when we already grabbed the data, we can store it in our local or session storage, and I'm going to talk about that in a special video. 19. PropTypes: All right, all right, all right. We're going to talk a little about prop types in this video. And as you can see, it has changed to start page here. Now, of course, we have another movie that's more popular now, and that's the it Chapter two. So it looks really creepy or no. Well, so Robert Red Ford has to go to the second place now, and that's sad for him. All right. Okay. We install the package that's called prop Types before it was integrated in react, but they have moved it to on external package. Now, instead, we've already installed this one, so we go to go with that one. Just wanted to show you this page yet again. Attract Js dot org's because here to talk about prototypes and they will tell you everything you need to know to get started here. And I'm not going to show you all of these here because you can do proper time shaking in a lot of ways here. So I'm going to show you the basic stuff and actually, we just need the basic stuff for this one. And as they say here also prop types is also just in development mode. And that's because when you create a production, build off your application, it will be optimized. So we don't need to do an a prototype checking there that will destroy or optimization and speed over application. Okay. And it works like this. We import prop types at the top of or component, and then we just assign a property, a special property that's called prop types to our function. In our case, this is a class component here, and then we have some different validators we can use for this one to shake or props highly recommend. You read this before you go through the video, we're going to start in the actor components. And the first thing we have to do here is in Fort Prop types, and I will say that this video will get a little bit repetitive. Course, we're going to do proper type checking in all of these components here. Okay, so we import prop types. We have a capital P on a capital T we imported from prop dash types. That's the one we installed earlier. Okay. And as we can see, we have one prop for this one. That's an object that we call actor. You can see that's an object because we grab different orbit cheese here. So we're sending in this object to this component, and we want to validate these props. We know that we get the correct data into our prop, and we can do that by assigning a special property that called prop types. So we have our actor of capital a dot prop types, okay, and that one will equal on object. And, as you can see here, be very observant here because this is a lower case p here and not on uppercase P as we have up here. So this property that we create here has a lower case peed, So it's really easy to get confused here and mix things up, and that's no good. Then we have these prop types object, and we have a prop that's named Actor so we can type. Check that one by creating another property here inside of this object that's called Actor . It has to have except name as or profess. Then we're going to grab or prototypes that we import up here and it's here. It can get a bit confusing because Now we have a capital P on a capital T. So that's the one that we import and we can type socket dot over yet because we know that we want an object for this one. So this is how we check that it's an object. And if we save this one and look into our council, we can see that nothing has happened. But if I go back inside on my component and I let's say I change this one to stream, then we are expecting that this prop should be a stream. So we say this one. So we're giving it the string and we go back to her application. Nothing is showing up here because we have to click on a movie because we have our actors here. And as you can see, we get a failed prop type now because it's expecting a string. But we're giving it on object. So this is what prop type checking will do for you. It will complain if you give it the wrong prop from the one you intended to give the component, and that's great on. This is the very basic usage off prop types, and this is all we're going to need for our application, actually, but if we go back too sick here, that direct Js doc Tor patient Come for example, See that you can't create the shape you can shape your object. Yeah, like here. So if you use prototypes dot shape, you can set every property off the object you, sandy and uncheck that they are as you expect them to be. So this is great. If you're, like, in our case now, have an object, and you want to shake every property, every key on that object. You can use a shape instead to do that. But I won't go into that in this one because this is a basic course, and I'm showing you the basics here with proper types. Andi, also, they tell you all about it here so you can read here and learn a lot on this page. So this is all we need to do some proper type checking in our actor components. We can continue onto the grid component and just us before we import prop types. Capital P capital T we import it from borough dash types. I'm just below here. We create the special property on or greed disagreed dot Pro types on this is lower case p here, and it equals to an object. And inside of this, we're going to prop types, check or props. Here we have a header and our Children, the sheerness. This this, Children, is this special prop, so we don't have to do proper type checking on that one. So just have to check our header. So we have our header colon prototypes with a Capital P and we expected to be a string. You can go back to her application and we loaded course were changed that one. Now that we have no error here and that's good, we can just test this one once more. So we change this to an array, for example. On it will show us a narrow here on the console because now it's expecting to get an array . But we giving it a stream, it gives you this warning and you can see what's wrong on that where you can be aware of that. You send in the correct props to your components. Okay, We changed his back to stream. That's our great component. Let's go inside or had a component. And actually, for that one, we don't have any props, so we don't have to do the proper type checking here. So let's move on to our hero image. Here we have three props, so we import trump types Capital P from prop dash types, and we create the special property that's called prototypes down here on or hero image dot prototypes, Lower case P. And it equals to an object. Then we have three props. Here we have our image, Colon. We shake it with prototypes Capital, P Capital T, and this one we expect to be a stream. We have our title colon from types docked string. And we also have our text cologne prop types. And we also expect that want to be a string. And of course, this one should be a coma. There course, this is some object. Okay, we saved this one. So that's our prop type. Checking for the hero image. Then we have the load more, but, um, just as before, we import prop types capital P from prop dash types on below. Here we create our object. We have a load more BT in dot prop types. Lower case P then we have our text probe. We have validated with prototypes dot string and capital P Don't know if I have to say this any more times. No, I think you get it. We have a cool back prop. So with type jacket with prototypes dot funk and funk, That's course. This is a function so we can check it with dot funk. Okay, we'll save it. We have our moving for components. We import prototypes from prop dash types. You should import this and do this stuff that we do know when you create your components. So you always have this as a routine when you create your components to shake your prop types. Okay, we go below here on we create our object movie him for dot crop types equals curly braces on we shake or movie prop with proper types. Dr Object. Because we're expecting this to be an object. We have our directors. We checked prototypes docked, and this one is an array course. We haven't array off directors with sending into this one. Okay, so say this. Then we move on to our movie info bar components. We can import prototypes appear from prop dash types on don't below. We create our object movie in full bore dot prototypes equals one object. We have our time prop. So we grab our prototypes dot and check for number because that's the number. Everyone of these is going to be a number. We have our budget prototypes docked number, and we have a revenue prop types dot number. Okay, that's it for that wants to save it and move on. We have our movie thumb. We import prop types from prop dash types. Every creator object movie thumb dot prototypes equals on object. We'll check or image prop prototypes. This one is going to be a string because that's the your l to the image. Unless you can see I used the wrong casing, you know, so it will complain. It should be a lower case. P It's released it to get tricked them confused on them. Used the wrong casing. Here we have our movie I d on the prop types docked. This one is going to be a number. We have our clickable pro. This one is going to be a bulan and we can check that with dot boule. Okay, so we saved this one. We have our navigation. Next, we import prop types from pro dash types just below. Here we create our orbit. Navigation dot prop types equals and object. And we have our movie pro shit for a strength. Okay, save it. And the last one is going to be or search bar. So we import prototypes from prop dash types. We have one prop for this one, and that's a callback. So we have a search bar docked prototypes equals an object on. We have a probe. That's cool. Call back from types dot funked because this one is going to be a function. All right, save this one. We go back to our application, and we can see that it all shakes out now. So we have successfully title and everything correctly here on I will say it again. You should do this process while you build your components. Not afterwards, as I did know. So the standard should be to always check the types off the props. Yeah, I think this is enough for this video. In the next video, we're going to persist or stayed in session and local storage. See you down 20. LocalStorage and SessionStorage: Welcome back. We are going to finish off for application now, and we're doing that by creating a functionality that will save the homepage in session storage and also will save each movie in local storage hand. Actually, I can see you know that. Yeah. I messed something up here in the last video where we checked the prop types. And I'll keep this in because you can see that. Yeah. It telling us that we messed something up. And that's good to shake your prop types. It says that the invalid prop actor, off type object supplied toe actor expecting string. I guess I messed it up here because we're sending in an object here. And, of course, I have to change this one into an object and save it. So this is great. You could actually see it in action. Know that it wants us when we send in the wrong proctor or components. Good, good, good. Okay, let's get back to session and local stories. So why can't we just save everything in local stories? Yeah, we could do that, but or home pitch is going to be updated constantly, depending on the most popular movies and these ones change. So if we store everything in the local storage and yeah, never erase it, it will have an outdated list of popular movies, and that's not good. So if we save it in session storage, it will wipe it out when you close down the tab or the browser and the next time it will fetch it again. So that will make sure that we always have an updated popular movies list here. But our movies are always going to be the same, so we can save each of these one in the local storage and just keep it there so we don't have to hit a prion point every time. If you click on the same movies that you already visitor and the difference between local storage and session storage is that session storage will wipe out everything when it closed down the tab or the window or or the browser. The local storage will persist until yourself decide to delete it from your application, or if the use of delete the browser history itself. Okay, so that's the difference. So we have to use both of them here, so let's move back into our code editor on Inside Over Hooks. We're going to start with a homepage, and that's the one that's called use whom fetch. And actually we could create custom hook for these ones also. But I won't do it in this course now, but you can try it out yourself. When we have created it here, you can try to reflector it and lift the code out into its own custom hooked. Yeah, I'm creating the session storage in this one, and I'm creating the local stories in this one for the movies. So you could, of course, create a custom hook that can save and read from both local and session stories. But that has to be a little bit more advanced coding, and you have to do some more controls in that one to shake if its session stories or local storage you want to grab data from or right data to. So that's also a little bit more advanced, and that's why I won't do it here. So we're just creating wrong for session stories here on one for local storage in the use movie fetch, But for now, make sure you're inside a use home. Fetch custom hooked and we need something that can write to the session storage as soon as the state changes. Also, I don't want to persist the state if we're in a search, because if we're searching for something here, it won't be going to say that state because when we reload, we want to go to the start page and not in a search. And how can we achieve this well inside of her hook, where're effects things? We're going to create the new use effect. And as you can see, you can have as many use effects as you want in this case, in our custom hooks. So we create the new use effect within in line are a function. And if we don't want to persist the state when we're searching for something, we need to have any statement here if and we can just check if we have a search term and inside of here, we're going to persist the state and now it complaining here cause we don't have something that's called search term. We can go back inside of her home component. And if we look at the state up here, we creating this search term stayed here so we can use this to decide it. We're in a search for because if this one has a search term, we know that we're in a search on. I will move this up above the use home fits because, no, I'm going to send in the search term to our use home. Fetch such term like that, and I say this one and go back inside of the use on fetch. I'm up here where we create the custom hooked. They could just grab the search term that we just sent him to this one. And this will make sure that we can check if we have a search term or not. And decided we should persist the state in the special storage. Okay, we're going to have a dependency array in this use effect, and it's going to depend on the search term state to make sure inside of the if statement No. Just type session storage dot Set item. This is so you set the item in the session stories with javascript, we have a parenthesis. And then the first argument to this one is going to be the name of our state that we're going to persist in decision stories. We can just call it Home State camel casing and then we send in our state and we have to strain if I it with Jason because you can't persist in object in the session, stories weaken. Just persist a stream. And we can do that with Jason Capital letters dot string. If I that was sending in our state and this will make sure that it's a string that we write to recession storage and I will also do a consul log here writing to special storage, we can save it and go back into our application. Yes, you can see it has already right to stay here. We can delete this, and if we would load the page, you can see that it persisted, stayed here and that's good. And also, if we load more, you can see that it's changing the state here in the session, storage on persistent. When we have load more on, that's great. But if we reload the page now, if you see that, yeah, we haven't loaded the persistent state because we grabbing it from the FBI every time now. So we also have to make sure that we grab the persistent stayed if we have some stayed persistent. So let's go back into our code editor and inside or use effect where we traveled data initially, we can just make an if statement if session storage docked home state, that's what we call it down here. So we're just checking if this existence session storage and if we have a special storage weaken just set the state with this one so set stayed for emphasis, and we have to parse it back from a string. So, Jason Dr Force our emphasis that we grab from session storage dot home state. So this will get us the state, every pore sit back into an object with Jason dot purse. Okay? Yeah. And we could also set loading two fools. And we have the else block here, and we can just move this one inside of that like this. Okay, we can make a little consul long here council dot Lord grabbing from session storage. And if I just copy this one grabbing from a p r. And we can save it, go back inside of our application and open up for council. I really loved this one As you can see, it's writing to decision storage, and it's also grabbing from the session storage because now, if we look at application on our session storage, we have our home state. I can delete this one. Now go back to my counsel and reload unless you can see it's grabbing from the A p I. But if are reloaded again, you can see that it's grabbing from the special storage. And also, if we load more movies here, you can see that it's writing to the station stories. And if I reloaded, you can see that we have all the movies here and that's good. We will also try out to make a search now, unless you can see it's not writing anything more to the session storage snow, and that's great. So if I reload this one now, you can see that it's robbing the most popular movies here and not the search we were currently in. And that's nice. Okay, I can just remove these consulates because now we know that it's working and we can move on with the use movie fetch. We're going to do almost the same here, but we're using the local storage instead. So just below this use effect here we create another use effect. We give it an in line ara function and we're going to set the item in our local storage this time local storage docked, set item parenthesis, and we're going to give it the movie. I d like so and then Jason dot string If I give it our state like this And as you can see, we're depending on the movie I d here and we also depending on our stayed. So we have to give it the dependency array with the movie idea under state. So say this one. And if we go inside a movie here, look at their application or local stories, you can see that we have our movie I d. And it has successfully saved every day about the movie. No, we just have to grab it somehow. So just as we did before we move up to our use effect that fetched the initial data inside of that one, we check if local stories stopped movie I d. And this will check if it exists. If it exists. We set the state from this one set, stayed parenthesis. Jason dot force and from a local storage dot movie, I d We will get our data. Okay, then we haven't else. And then we just fetch your data from the FBI. I will. Consul. Oh, this one's out also. So we know that it's working, rubbing from local storage and in this one consul log grabbing from the a P I OK, so I say this one now and we go into our council, you can see that we're grabbing from the A p I. And that's not good because it should grab it from the local storage. Yeah, and of course, because now it thinks that the property is named movie I d. So we have to do something like this instead, you consider it complaints. Know that we need to have another dependence of here. We also have to specify the movie I d here. Okay, Save it. It will not work. It's grabbing from the local storage. That's of course, I have to do the same here. Just cooked with this one like so and save it and we can just delete this ones I think on it still won't work. Okay, I have checked this out now and off course. We also have to set the loading to force here. That's why it won't show up otherwise, because in our movie component we are using this if statement here and check if loading is true, and then we just returned the spinner. So if we don't set loading to force, it will just return the spinner for us. So make sure that you add set loading to force here. Also in the use movie fetch custom hook, make sure that you save your use. Move if it's and we can see if it works. No, it's showing that it's grabbing from the local storage. And that's great. We have our movie here. If I go inside here and delete this one, go back to my console on reload. We grabbing from the A p I and know it has saved it to the local storage. And if I reload, I'm grabbing it from the local storage now and that's great. And I will also remove these consul logs. Very important. Make sure that this set loading two fools here. Okay, so this concludes everything in our application. It is finished and it is production ready? No. And in the following videos, I show you how to make a production build on published This one 21. Deploy to Netlify: way completed the application and it's time to deploy it for this course are used nettle ified to deploy our site. And that's because it's really, really, really easy to deploy aside to natl. If I it won't take long. There are some few steps we have to do before we can deploy it and also decide if you want to have a continuous deployment. That means that we have to put our code on get tub. So every time we changed the code and push to get up, Neville, if I will know this and start rebuilding our side automatically and publish it so that's continuous deployment. And also we can just build our side now and just uploaded to Netley file and that's fine. So we don't have to have this continuous deployment and use get tub to get our side up and running. The first thing we have to do is to build our side as we using create tracked up. Now we have a command that's called build so we can just go into a terminal, make sure you're inside your product folder. Mine is called the React R and D be deployed here, but of course, you should be in react, Dash or MDB. It's of course, the folder we've used in the course, so we have to build our side course. It's not optimized now on. We have to optimize it before we can deploy it so we can just type NPM run build, and this will start to build process over side. Okay, so that went smooth. It has created of build forward for us. If we look in our product folder, we know how one that's called build. And that's great, because that's the one we're going to deploy. So if we take a look at Net Cliff, I of course you have to create the free account of nullify. And it won't cost you anything to just post your side like this if they don't grow big and you have many uses and stuff like that. To be honest, I don't know the limits there, but you can't start a free account on just deploy of sites for free. As you can see, I have Ah yeah, five other sites here now. So if you just created your account, you will not have anything here. You will just have this little texture that say that you can drag and drop here to deploy aside. And that's what we going to do first. So we have our build folder here. You can just grab the build folder and just drag and drop it here on Netley five. And that's it. It's deployed. It's that he's actually it will create a random, your own four. Here. You can change that in your settings. And when you get to know nap, if I You have a lot of stuff you can do here to customize things. But if we click this one, you can see that's our site. It's already up and running, and I don't know. I don't think it took me 30 seconds to do it. So it's really sit and it's working great. So that's one way you can do it. And I'm also going to show you how to do continuous deployment. And for that one we have to use get hub. So you have to have ah, get have account. I guess you already have it. I think most of developers has to get have account. We have to create the new repository here. So we pushed the new but, um And we can name it. Ah, react or in db Deploy test. Right on description test for, um db Deplored. Right. We don't have to initialize this repository with you. Read me because we already have a read me file and we already have an existing repository. So we just prayed or repository. Okay, then we have to do a few steps here to get our local repository connected to this remote repository. You probably have done this a lot of times, but I will do it now anyways, so we have some instructions here. First we have to type. Get in it, that will initialize get for our application. Then we can shake it with your chek get status. You can see that we have a few files here. We can just type gift at on adopt net will Adam and then get commit. We have a message, and we can just first commit as they recommend. So get commit Dash M and quotes on first commit right. Then we have to hook this up to the remote repository so we can just copy this one and paste it in. And then we just get push. Does you Origin, master. And actually and nothing happens. And I don't know why. Yeah, there was some temporary error, I think. Yeah, that's the computer world. Sometimes things happen and you don't know why, but it worked. Now it should work with this command. And it would take a look at our repository here and get up. You can see that we have our files here. And of course, we shouldn't push our node models and stuff like that. But this get ignore file has been created automatically for us, so it will take care of that one. So we have a repository up and running. Let's go back into our terminal. We can install something that's called nettle. If I see a lie that will make it really easy for us to deploy our side. You could of course, deploy it in EPL If I also here just create a new site from git so you can use that one also when you want to deploy site. But I will show you how to use the neck Cliff I cli first we can install the sea allies so npm install net vilified Dash C alive and we will flag it with Global's. We install it globally. We have to wait now. Everything went smooth here and it installed correctly. Then we just typed Netley, Fight on deplored and we have to make a few choices here. We can link it to an existing site. We don't want to do that. So I'll select, create and configure a new site. You have to log in to notify here if you're not Lodin, so it will ask you to log in before you can continue here. I'm already logged in. So that's why that's not happening here for me. And I'll choose my team. You can choose a site name, otherwise it will generate one randomly for you. So in this case, I'll just use the random ones. I just press enter and then the most important part here, we have to select or deploy folder on. If you remember, if we take a look in the finder here we have this build folder, so that's the one we want to deploy. And we can do that with a dot forward slash build and we press enter and it will start uploading our files to identify on deploy it and actually It's not really live now because it created a previous link for us here so we can look at the live draft euro and actually it opened up in another Brosa for me. So I would just paste this in here so we can just check that everything is correct here. And it looks nice, I think. Yeah, it's working. Yeah, great. Go back inside of your terminal and as successor, we can just use this command to make it go live. So Netley Fire deploy and we flag it with product. Double dash on broad and press enter and we have to specify or deploy path again. And that's dot forward slash build and press enter. And now our site is live at this address here so you can check that one. Are we loaded? And as you can see, it has created this one here so I can just click it on the scientist line, and it's working great. So as you can see, it's really, really, really, really easy to deploy your react application to nettle if I. So that's why I shoes Netley five for this course. I use it myself, and I think it's awesome 22. Deploy to own server: okay? Yes. They're not a deploy video. I just want to show you also how to deploy a site. If you have just a regular old school server that you upload stuff too. Okay? First, of course, we have to npm run build that will create a build folder. And as you can see here also, it tells us if you, for example, want to have your side hosted in a sub folder on the server. You have to add this one to your package, Doc. Jason, file. And that means if we look at the code in the file Pakis Doc Jason, I can just copy this one. You have to add it somewhere here. And of course, this will be the path to your site. For example, if I have ah w w w they've been far dot com. And, uh, let's say I want to place it in react, dash or on TV. Then you have to specified here and then build it because that will make sure that this will be the root Ural for application. In my case, I can't do that. My domain name is born to that nettle. If I If I do like this, you can see that I get a narrow because it thinks it's a page on my course page here on level. If I So I created this folder that's called or mdb Dash deployed. I have to access it like a sub domain like this. And as you can see, there's nothing in there now, so I don't have to do this EC stressing here in the package Doc Jason file. The only thing you have to do when you deploy this way is that you just could be everything in your build folder. Then you have to have some FTP software where we upload your stuff. So just cooked these ones and go inside, pasted him and I uploaded the files by FTP. And if I reload this one, you can see that I deployed my application because react. It's just JavaScript. You just have to upload the files here, but I think this is the old school way. I think most of you will use something like Netley fight to deploy our site in step. But I just wanted to show you this because this will make it extra clear that it's just devastate that we have created here. Okay. In the next videos, I'll show you how to create state for class components instead of using hooks. So well, reflector this application to the old school way off doing things serum. 23. CLASSES - Refactor SearchBar: way have successfully created or application would react hooks and just using functional components. But I want to show you how to do it with class components. Also, even if I consider it to be the old way, there's a lot of code based out there that still use classes, and it will take a lot of time and years before it will disappear. So it's really good to know how to create classes which stayed in react also. So we're going to reflector three components. We have our search bar that has a local state, and we have our home page and or movie page. So these are the ones that we go into effect, er, and in this video, I'm going to reflect or the search bar component to be a state full class instead of a functional component with hooks. I actually will not talk a lot about classes and state and lifecycle method and stuff like that, because I truly think that react hooks will gain a lot of more ground on the classes eventually will disappear. But who knows? Let's reflect to this one into using testes to make sure that you're inside your search bore component. And I've also started up my application here. So you can also do that. So we have it up and running. First of all, we can get rid of you state and use rift. But we are going to use components for this one. The stars were going to keep these. And in this one, we don't have a custom hook or anything like that. We also don't have any life cycle methods. So I talk about that in the next video, we can remove the state here. And of course, nothing will work now. So we have to reflector the whole component before it will work. And this is a functional component. Now will modify this to be a class instead. So instead, of course, we have class. The name will be such for on. We can remove this here, and we have to extend it to components that we imported up here. If you don't do this up here, you have to type react dot component. But as we imported like this up here, we don't have to type out back there. Okay? And as we using air six syntax in this one on Babel will transpire it down two years. Five, we can use something that's called class fields, and that means that we don't have to create the constructor in the class. And we can also utilize the arrow functions as class fields. And that's great. So if you do it the old style here we have a constructor like this, and we also have to call the super class and then recreate our state with this state equals and an object. And then we have our input value. Then we can set it to Justin empty string. But we don't have to do all this stuff here. We can just get rid of this and just keep stayed on the input value. And of course we have to close it with a curly brace there. So that's everything you need to have when creating the state. If we using class fields, we have a time out. We have to remove comes. This is also class field, so we don't have to have this before that we don't have use rift. We can just set it to know because you thrift is a hook and we don't use hooks here. We can remove const from our functions like this. We just have one function here. So that's it. And as this is the class, we have to have a render method so we can create that one here and or return statement will go inside of the render method. I moved up up inside of there. So that's the class. And then we have to change a few more things to get this to work inside to do such method. This is called a method. Now, as it's a class, we have to the structure out or cool back prop, because we're going to use that one here. So Const, pull back. This is just regular dis structuring. And we can destructor this from this props so that will give us a call back or value. We can keep this. Well, we're grabbing that from event dot targets and we can set our state this set stayed that we have a no object that we have any input value. We just said I want to value. That's the one that we get here. Okay, on this clear time out, we can keep this one. I can remove this set stayed here and this should say this time out instead. Then we also have to set this time out and we don't have a current. So it's enough to have this time out. It's this one here with setting, with the time out and inside of here. We also have to destructor out or input value from the state from this dot state. And it's the input value that was sending into a callback. It should be It should be a t there also. Okay, so this is a do search. We have refectory to using this state instead. Onda Yeah, it should work, though. But we have to make a few more changes here because now you can see that our application is failing. And that's because we have to change this. This doctor do such as this is a class you have to use the this keyword on. We also have to destructor out or stay here. Const. Input value equals disrupt state and we're going to use that value here. Input value off course. You could also have just done like this this dot state dot input value. But you should always the structure things out when you can do that. I actually think this is it. This should work now. So we have successfully reflected this one to a class component with local state. We can save it. It seems to work. We can try out the search here. Indiana Jones? Yeah, and it's working. Great. So we have the same functionality. But we're using a class instead. And I don't know what you think, but I think this looks Yeah, a little bit more messy. I love hooks more than classes. To be honest, in the next video, we're going to reflector the home components. 24. CLASSES - Refactor Home Component: okay just to videos left to go. And then this course is finished. And you should feel proud of yourself that you have reached this four. We're going to convert the home component into class component in this video, Let's get back into the code editor. And just as before, we can remove you stayed appear, But we are going to need the components. So we changed that 12 component Capital C. Everything here can remain the same. Except we removed the custom hooks. We're not going to important one. And we convert this one into class. So plus whom extends components. Okay, then we can just remove these states and create them again. So we have our state and an object. We're going to have our movies. We set that turn array. Initially, we have our search terms. We set out to an empty string. We have our loading, and that one is going to be true. And we have our error. We set that one to force. Okay? And we can remove the const here because now we creating class fields of the functions instead and we remove This comes here. And this This is a class We also need Orender method. We moved everything year inside this render method. Yeah, I did some order formatting there just to make it look nicer. Okay, we're going to come back to this one. But first, we have to copy all the code that we have in our custom hooked. So inside your use home fetch custom hooked death grab everything from such movies don't to hear. And we're not going to use everything. Just a cities here. But we can just cope it. So we have it in other component for us to work with and go back inside of your home component and just paste this in just below the state. Okay, so we have our fetch movies, we remove the coast, we can remove these ones and we are going to set the state like this instead. This dot set stayed parenthesis. We have curly braces because this is an object. We start a loading the truth and we set the error of the fools like this. We don't have multiple states now. We just have this one. So we have to set the different keys here. We are going to use the search term in this ones we can the structure that one out, Const. Call your braces. Search term equals this. Stop stayed. This one can remain the same. And we have to add this to the set. Stayed. And also make sure you have a coma there and we have to set the loading to false loading colon. False. Right? Then we're going to make things a little bit different here because in the set state in the classes we have a callback function that will trigger when the state has been updated. We can use this and create a callback function where we can set the state in the session storage when the state has been updated. So just below Here, make a coma. We can do like this. We haven't in line arrow function and Colin braces. And inside of here, we're going to grab a code from the use effect where we write to session storage. We can grab this code here, just cooked it at one. And of course, then we can delete the use effect paste in the code here in the newly created arrow function, and we have destruction to search term up here so we can remove Stayed from this one and just have it like this. And also, we have to add this to this one here. It's kind of hard to say we have to add this to this one here. All right? Yeah. This not stayed. All right. So that will make sure that we write the session storage when we have updated the stayed. We have to change this one this dot set stayed parenthesis, actually braces without the error to true, we can still cause a look out there. And we can remove this one cause we're setting this 12 false up here instead. No. So just remove the set loading to false we're going to create the life cycle method and lifecycle methods is a big part of the class components in react. Instead of this use effect, we have something that's called lifecycle methods on lifecycle methods is away toe trigger different things in your component in the different life cycle stages off the component. So, for example, we're going to use a lifecycle method that's called component the amount and that one will trigger when the component has mounted. This is the only one that we have to use for this component, but you should know that there's a lot of different life cycle methods you have. For example, one that's called Component did update that you can use when you receive new props for your component, and you want to update the component regarding to the new props. And we can actually just make a little Googling hear react lifecycle methods. And this is the wrecked day as Dr Page that we have as the first hit here. You can go to that one, and if you read this one, they will tell you all about the component life cycle and the different lifecycle methods you've got on your component. We have. For example, one that's called Component will unknown that one is for when the component is being removed from the dorm. And here's the chapter where they destroyed the most commonly used life cycle methods, and there we have it. Component did mount. That's the one we're going to use on. Component did update as I mentioned, and component will amount. So that's the ones that you will use the most, and you can say in a way that use effect will replace these ones so we can use the use effect hook to get the same functionality as out of these lifecycle methods back into the code editor. We're going to create our lunch like a method up here just below the state, and we'll call components. Did mult like this And inside of this, we can just grab everything that we have in our use effect Don't below here. So just crop it up, and then we can delete the use effect and pasted inside of the component did month. And of course, we have to add this and we also have to have this here. And actually we can move this one down below the Fed's movies because your student cool functions before you have created them. So I just took this one out on our pasted in here and stuff. Okay, so this will trigger This will run when the component has mounted. And this will check if we have something in the session storage justice before else it will fetch the movies from the A. P. I Okay. And we have to change some things here in our search movies method. We can remove this one on. We call this set stayed parenthesis and curly braces with set our search term to search. And that's, of course, the parameter up here. So we setting this search term in a state, and then we have to add this to this one so that one is good to go. And we also have to change some things in our load. More movies method. And we can The structure a couple of things from a state here cost curly braces with the structure off a search term and or a parent page because we're going to use these ones in this method, we grab it from this stop state. Okay, now we have toe this. That's one also. Okay, so then we have Orender method. We have to fix some things here. Also, that we have to do a message of the structuring here at the top. So we have corns, Crowley braces, and I'm going to put them on their own role here. We're going to need a search term or hero image. Our movies for current page or total pages are loading and or Earl, we're going to grab them from this dot stayed, okay. And hopefully this will make a lot of warnings disappear here. The cool book is going to be this dot search movies, and still, and this one has to be this doctor load more movies. Okay, I actually think this is sit. We can save it and see what we've got. Go back inside of our application and it seems to work. No, the loading spinner doesn't work. And, of course, I think it is because it will grab this from session storage. No. So I remove this one. Yeah. And now it will work. So there was no error in this component. It worked. It just grabbed it from the session storage. And that one didn't have the loading, I guess, because that one was from the hook version. So make sure that you delete everything in your session and local storage. I can actually delete this one in local stories also, but as you can see, it works. No. All right. Great. So that's it. We have a class component with state now instead, and we can delete or use whom fetch who. We're not using that one anymore. Okay. In the next video, we're going to reflected a movie component the same way as we did know 25. CLASSES - Refactor Movie Component: way Reach the last video in this course. Yeah, it's really sad, actually, because I enjoyed creating this course and I hope you've learned a lot in this video. We're going to refractor the movie component into class instead. So let's get to it into our code editor and we go inside or move it up Js file or a movie component. And up here we have a coma, color, racist and component just as before. And we're also going to need a PR Ural and a pikey, because now we're not having this because now we're not going to have the custom hooked. We're doing everything in this component, so that's why we have to import him here also. So import Cola braces AP I on the score. Your ah coma ap I underscore Keith from Don't talk forward slash config. We can leave this as it is. We can remove this one were imported custom hook. Well, we convert this one into a class less movie extents component. Then we remove this one because that is the custom. Look, we're calling here. We're not going to do that. Instead, we create a stayed. I was start loading to truth initially, truth okay. And we're going to have a renda method. Render and make sure that you grab everything here and paste it inside of your render method. We go inside or use movie, fetch custom hook and grab everything from cost fetch data. Don't to don't to hear with. Copy this, just as we did before. Pasted in below the state. First, we have our fetch data function here. We removed cons and make it a class field instead. For this one, we also have to remove use call back because that's the hook on. We're not using that here. So remove that one here on also below Here. Then we go up here and just just before we remove these ones on, we have this set stayed parenthesis. Killer braces with set the loading to truth and error of the falls. Like so we can also destructor out or prop curly braces Movie I d. From this don't props and everything here can remain the same. We just have to change this one into this dot Set stayed. And the result can remain the same. The actors. But we have to add loading fools and then just us before. We're going to have a callback function here where we can set everything in local storage When we got the state updated. So coma we create a narrow function, Curly braces on in or use effect down below. Here, we can just grab this one on, delete the use effect and go up here and paste it inside of our era function. So this will save the movie to the local storage. And inside of here we have toe do like this. Instead, this dot set stayed parenthesis, curly braces. There are true that we can remove the step loading just us Before that, we're going to create the life cycle method again, and it's going to be the component Did Mount component did mounts and inside of here we can just grab this one from the use effect and paste it in in our component did mount and we can remove the use effect. I will have to make some changes. You we're using the movie idea so we can to structure down too long. Const. Cola braces movie I d equals this dot props. Then we have to have this doc set stayed on. We can remove this one here, and we're this dot Fetch data. Okay, that's it. Then we have around the method we have to do this massive the structuring here again, Khost colder basis. And we have the original underscore title. And we can actually rename this one because I don't like that it has an underscore. So, colon or read, you know, title were using camel casing there instead. This is the way you can rename stuff when you destructor it up. Where the directors the wrong time, the budget revenue, the actors there are on the loading, and this one equals this stop stayed. Then we can remove some stuff here from the return statement. We don't need the movie in front of these. And for this one with just sending in the state, this stops stayed. And of course, we have to have a camera case here as I renamed it. So we removed movie from the wrong time, and we remove movie from the body it on from the revenue, every rules to remove it from the actress. Don't here a little order for murdering on to our movie info? Didn't we send in the director's as a known prop to that one. I have to shake this. No. Okay, back to the movie component. And we can remove directors from there. And this is it. We can save it and see if it works. No, I have to change this one. Also up inside of your callback function where you set the state in the fetch data method. Of course, we have toe make this one this not state. Okay, we'll see. If it's works on, it seems to work. So that's it. That's the last video and the last thing we have to do in this course we have created this application with both classes and cooks. And of course, they will always be something that you can do different because of personal preferences. But this is the way I choose to do it. So you have to live with that one. And now you should have a good base that you can build more stuff from. If you want to do that, for example, you can add click on an accurate and get information often actor, and you can extend it as much as you want. If you like this, don't forget to subscribe to my YouTube channel or register your email to get information about new courses and stuff like that. I won't spam you with a lot of emails. Or you can hook me up on Twitter. See you another time.