The Importance of Auto-Formatting and User Feedback in Building a Successful Application

As we continue to build our application, it's essential to consider the importance of auto-formatting and user feedback. In our previous lessons, we've discussed the need for formatting and go back up if it's in space. Now, let's dive deeper into this topic.

In order to provide the best possible experience for our users, we must ensure that our application is well-structured and easy to navigate. This means incorporating auto-formatting techniques, such as indentation and spacing, to make our code more readable. Additionally, we should also incorporate go back up functionality in case of errors or unexpected behavior.

To achieve this, we need to have a robust and efficient system for formatting and error handling. One way to accomplish this is by using a combination of auto-formatting tools and user feedback mechanisms. For example, we can use a library like ESLint to automatically format our code and catch any errors that may occur.

Another crucial aspect of building a successful application is user feedback. In order to provide the best possible experience for our users, we must ensure that they are able to provide us with valuable insights into their behavior and preferences. This can be achieved through various means, such as surveys, focus groups, or even just by observing user behavior.

In our current application, we're using a context object to store information about the user's session. We've also created a global state to store this information, which allows us to easily access and update it as needed. However, in order to provide more accurate user feedback, we need to enhance this system by adding more features, such as user logging and rating functionality.

To achieve this, we can create a new component that handles user ratings and updates the global state accordingly. We'll also need to add an API endpoint to store and retrieve user ratings data. This will allow us to easily integrate the rating feature into our application and provide users with the ability to rate movies and update their scores.

In addition to enhancing the user feedback system, we should also consider implementing a logout button for users. By adding this feature, we can provide users with the ability to log out of the application and remove themselves from the global state.

To implement the rating feature, we'll need to create an API endpoint that accepts user ratings data. We'll use the API ID imported at the top of our code to make API calls. The `rateMovie` function will take in three arguments: the user's session ID, the movie ID, and the rating value.

We'll then call this function from a callback function passed to the `RateComponent`. This function will be an async function because it makes an API call. We'll use the `value` variable to store the rating value from the range slider component.

Once we've created the `rateMovie` function, we can pass it as a prop to the `RateComponent` and call it when the user submits their rating. This will update the global state with the new rating data and send a success message to the console.

To display the rating slider only when the user is logged in, we'll create a ternary operator that checks if the user exists. If they do, we'll render the rating slider; otherwise, we won't show anything.

In conclusion, building a successful application requires careful consideration of auto-formatting and user feedback mechanisms. By incorporating these features into our codebase, we can provide users with a more engaging and informative experience. Additionally, implementing a logout button and enhancing the user feedback system will further enhance our application's functionality and user satisfaction.

Here is an article based on provided transcription:

Creating a Function to Update Movie Ratings

To update movie ratings, we need to create a function that makes an API call to store or retrieve the rating data. We'll use the `rateMovie` function imported from the API.js file.

The `rateMovie` function takes three arguments: the user's session ID, the movie ID, and the rating value. It will be used to update the global state with the new rating data.

Here is an example of how we can implement this function:

```javascript

import API from './api';

const rateMovie = async (sessionId, movieId, rating) => {

try {

const response = await API.rateMovie(sessionId, movieId, rating);

console.log(response.data);

return response.status;

} catch (error) {

console.error(error);

}

};

```

This function makes a POST request to the `rateMovie` endpoint with the user's session ID, movie ID, and rating value. If the API call is successful, it logs the response data to the console and returns the status code.

We can then use this function in our application by calling it from a callback function passed to the `RateComponent`. This will update the global state with the new rating data and send a success message to the console.

Here's an example of how we can call this function:

```javascript

const handleRating = async (rating) => {

try {

const response = await rateMovie(sessionId, movieId, rating);

if (response.status === 200) {

console.log('Rating updated successfully!');

} else {

console.error(`Error updating rating: ${response.statusText}`);

}

} catch (error) {

console.error(error);

}

};

```

In this example, we're calling the `rateMovie` function from a callback function named `handleRating`. This function takes the user's session ID, movie ID, and rating value as arguments.

We can then use this function to update the global state with the new rating data. If the API call is successful, it logs a success message to the console; otherwise, it logs an error message.

User Feedback and Rating Features

To provide users with valuable insights into their behavior and preferences, we need to enhance our user feedback system by adding more features.

One way to achieve this is by creating a new component that handles user ratings and updates the global state accordingly. We'll also need to add an API endpoint to store and retrieve user ratings data.

Here's an example of how we can implement this:

```javascript

import React, { useState } from 'react';

const RateComponent = () => {

const [rating, setRating] = useState(0);

const handleRatingChange = async (event) => {

try {

const response = await API.rateMovie(sessionId, movieId, event.target.value);

if (response.status === 200) {

console.log('Rating updated successfully!');

} else {

console.error(`Error updating rating: ${response.statusText}`);

}

} catch (error) {

console.error(error);

}

};

return (

);

};

```

In this example, we're creating a new component named `RateComponent`. This component uses the `useState` hook to store the user's rating value.

We've also created a function named `handleRatingChange` that updates the global state with the new rating data when the user submits their rating.

To display the rating slider only when the user is logged in, we can create a ternary operator that checks if the user exists. If they do, we'll render the rating slider; otherwise, we won't show anything.

Here's an example of how we can implement this:

```javascript

const RatingComponent = () => {

const [isLoggedIn, setIsLoggedIn] = useState(false);

return (

);

};

```

In this example, we're creating a new component named `RatingComponent`. This component uses the `useState` hook to store whether the user is logged in.

We've also created a ternary operator that checks if the user exists. If they do, it renders the rating slider; otherwise, it doesn't render anything.

In conclusion, building a successful application requires careful consideration of auto-formatting and user feedback mechanisms. By incorporating these features into our codebase, we can provide users with a more engaging and informative experience.

"WEBVTTKind: captionsLanguage: enreact is one of the most popular JavaScriptframeworks in this comprehensive and wellmade course. Thomas Weidman falck will teachyou everything you need to know to start usingreact. Hello, and welcome. I'm Tomas vevoto developer from Sweden. And thank you forenrolling this course. I'm actually a littlebit of extra proud on this one, because Icreated a lot of courses during the yearsnow, but this one is the first ever courseI created because I love react. And I wantedto create courses. So this is the third iterationthe third version, meaning that I've improvedit a lot and listened to you guys on whatstuff you want in the course. So I think it'sactually really good. There's always roomfor improvement, of course, but this one,I really enjoyed this one. And it was funmaking it also. So hopefully, you'll finda lot of basic stuff and intermediate stuff,and maybe some advanced stuff to learn inthis course. And I think we have to get started.So let's do that. Let's take a look at theapplication that we're building in this course.And it's a nice little move application thatis based on the Movie Database API. So you'llhave to create an account at the Movie Database.But we'll do that in the next video. So Ithought I could show you the application sothat you have a little feeling about whatwe're going to build in this course. And thisone is always going to show the most popularmovie here we have this hero image. So we'regoing to create this one. And we also havesome text, and we have a header up here also,then we can search for movies, or examples,Star Wars. And we'll see all the movies here.So that's how the basic functionality of thisapplication is. And if we click on the movie,you can see that we get all data from thatmovie. So that's nice. We're going to showthe actress and also some information aboutthe movie itself, we can see the revenue,the budget, and the running time, for example.And here, you may think that you can alsoclick on actors. And yeah, of course, we coulddo that. But I have to limit this tutorialsomewhere. So this course is not going togo there. But it's a great foundation, ifyou want to build upon this application. Soyou can add in the functionality of showinginformation about the different actors andstuff like that. We also have this littlebreadcrumb menu appears, we can go back tothe homepage. And in this version of the course,this is version three, I'm going to show youhow to create the styles also are going tobe fairly quick when I show the stars becauseI still want to have the main focus on reactitself. So that's something that's new inthis version three of this course. And ofcourse everything is going to be responsive,we're going to create that one also, as youcan see here, the grid, for example, withthe movies, it changes depending on the viewportsize. So that's nice. So it's a fully workingapplication. And to be honest, I'm quite proudof this design, I created the design myselfcourse I'm both a developer and the designer.So that's why I love doing design stuff also.And I think it looks pretty neat. Actually,I've updated it slightly, since two previousversions to look a little bit more modern.But I think it's mostly Yeah, I changed somecolors, for example, on the bottom and stufflike that. Alright, so that's the application.In the next video, I'm going to talk aboutthe Movie Database API, and how you can registerto get your own free API key that I'm goingto use in this course. Okay, so let's talkabout the Movie Database API. That's the APIthat we're going to use in this course. Andthe Movie Database has a great API for fetchinga lot of movies, TV shows and stuff like that,we are going to focus on the movies. So that'swhat we're going to do here. And you can signup for a free account at the Movie Database.So just go to the movie db.org. And clickJoin TMDB. And then you can fill out a usernameand password an email and create an account.And when you have created an account, youprobably get an email where you have to verifyyourself before you can log in. But when youhave created your account, make sure thatyou go back to the movie DB and click on login.And then you enter your username and passwordjust as a regular site that you log into.All right, and then you're presented withthis dashboard kind of thing. I think it'sa dashboard. And the only thing you have todo is go up here to your profile and clickon this round button up here. And then youhave the settings here so she'll settings.And then at the left menu here, you can seethat you have something that's called API.So click on API, I guess I probably have toblur this ones out because I don't want toshow you my own API key. This is the one thatwe using API key version three auth. So thisis the one that we're going to use. So makesure to save this somewhere for now becausewe are going to add it to our applicationin a little while. So make sure that you haveeasy access to this one as we're going topaste this in into our application in a littlewhile when we have bootstrapped our applicationwith something that's called create reactapp. And I'm going to talk more about thatin a little while. Before we start creatingour application, I just want to talk a littlebit about react and what it is. So if yougo to the React js.org, you can read moreabout react. And this is a great startingpoint, if you just started out with react,they have different documentation, they havetutorials, and a blog and stuff like that.And you can read everything that you needto know to get started with react. So I triedto make this course kind of beginner friendly.But react is kind of at least intermediatein its own nature. So it's hard to make itreally, really beginner friendly. It alsodepends a lot on how you learn stuff, I loveto learn stuff in this product oriented way,where I just build some product and learnalong the way. So I only create courses onhow I want to learn stuff myself, but it'svery individual. So some may think that it'snot beginner friendly at all, and so manythings that it is. That's why I also recommendto check out react js.org to read about thevery, very basic stuff, at least in react.So what is react? Yeah, React is a JavaScriptlibrary for building user interfaces, as theytell you here, I think, actually that thissentence is a little bit misleading, becauseyou're using react for so much more than tojust build a user interface. For example,I build a lot of stuff, I build small games,I build a Pac Man game, for example. And Ibuild all the logic in react also. So it'snot only the view layer, so it can be a littlebit misleading here, I think. Just thinkingabout that you create the components for theview. But that's not the case, you can usereact for so much more if you want to do that.And in this application, we're building everythingin react. So we have all the API calls andeverything it's done from react. So that'show we're going to use it in this course.And react uses declarative peridinium. I don'teven know if I pronounced that correctly.But hopefully, you know what I mean. So reactis declarative. But for example, jQuery isimperative. And when something is declarative,you explain, in this case, the user interface,how it will look, you don't have to tell itexactly how you want to achieve that look,you just tell it that we want our UI to lookin a certain way. And then react takes careof the rest. For example, in jQuery, we haveto grab the DOM elements. And we have to modifythe DOM elements. And we have to create themrow by row, and then attach the element tothe DOM itself. So there can be a lot of codeinvolved in doing something simple, actually.But in react, for example, we have as theSavior, it's component based. So we createa component, and then we just tell react touse that component. And it will render outthat to the dome for us. And this will bemore clear as we go along in the course andcreate our own components and create the applicationitself. So don't worry if you don't understandeverything right now. So it's declarative,its component base and learn once write anywhereyet as to tell you here, they don't care aboutthe rest of the technology stack. So that'sgreat, you can use a lot of stuff in combinationwith react. So what is a react component?Yeah, we can take a look here, for example,here they create, this is a class and thisis kind of, I like to call it the old way,the classes still exist, I don't use themanymore. And in this course, we're going tofocus on creating functional components. AndI'm going to tell you more about that later.And in the end of the tutorial, when we'refinished application, I also going to showyou how to convert some of the components,the stateful components to class components,just in case, you need to know how to createclass components also, because the realityis, if you start working for a company ora client, there may probably be some componentsthat are still class components. Because there'sa lot of applications made in react that'smade before we had state in functional components.That's why you had to had a class before tohave stayed in them. And we're going to talkabout that later also. So this is a componentthey created with a class and they call itHello message. And as you can see here, theyusing something that's very much like regularHTML, they have this tag here with a Hellomessage. And this name is a so called propthe sending in, and we're going to talk moreabout props also later, so don't worry aboutthat. But this is actually not HTML. It'ssomething that called JSX. And that's somethingthat we're also going to learn in this course.So we create the component here, we tell itto use this component and react will takecare of the rest and create this div withour text Hello. And in this case, it's goingto be the name that we send in with a prop.So the name is going to be Taylor. It's goingto type out Hello Taylor. As you can see here.So this is very, very neat with react, wecan reuse these components in our application.So that's short on what react is. And as Itold you, we're going to learn a lot morestuff in the course itself when we createapplication. And hopefully, at the end ofthe course, you'll have more understandingof react and how awesome it is. Because Ireally love react, I'm really passionate aboutusing react. And actually, this course isalso something that I'm very passionate about.Because this is my first ever course I created.And this is the third version, meaning thatI have listened to people that have enrolledthis course before and changed stuff and addedstuff to make it more optimal and more perfect.And hopefully, you will enjoy this course.For this course, I provided you with a sipfile that you should download before you startthe course. And this zip file contains a fewfolders here, as you can see, and it may lookmaybe a little bit different when I am therecording of this course, because I haven'treally recorded it yet, but I think it willlook this way. But if it looks a little bitdifferent, it's okay. Hopefully you can readthe folder names and understand what theyfor. So I'm going to provide you with a folderthat's called files to be copied to the projectfolder. These are files that we're going touse for the course. So I have created a filefor us the setups API, so we don't have towrite our own functions for fetching the data.So I'm going to show you that when we fetchdata from the API, I have a config file anda helpers file. And I'm going to talk moreabout those later also. And then I have afew images that we also need for the course.So that's why I have this folder that we'regoing to copy over to a project when we havecreated it, and the public folder, the indexdot HTML file, I have this here, because I'musing a Google Font for this one. So I'vealready provided that one in the index dotHTML, so we don't have to do that ourselves.So that's the one that we have to copy later.And I'm going to show you that when the timecomes. And you're also going to have two options.If you don't want to create everything fromscratch, when I set up the application, youcan just ignore that and start from a projectwithout the styles. And this is if you wantto create the styles also, I structured thiscourse. So you should be able to fairly easilyjust skip the parts where I create the stylingfor the components. Some people have, youdon't want to create the CSS and the styling.So that's why I made it in this way. So thisis the one you should use if you want to createthe styles. Otherwise, you use the one that'scalled with styles, that one will provideyou with all the styling, so you don't haveto type in the styles. And you can skip thosevideos. So if you want to start from one ofthose projects, you navigate inside of thatone, and in your terminal, you type npm install,and that's going to install all the dependenciesfor you. And then every time you start upthe application, you can type in NPM start.And that's also something that I'm going toshow you, so don't worry about that. Thenyou have a folder with the finished app ifyou want to check out the result. But pleasebe aware here, you have to put your own APIkey in a file that's hidden here now is calleddot end. inside of that one, you have to pastein your own API key, otherwise, it won't work.And that goes for the step solutions. Also,I have provided you with step solutions thatcorresponds to each video. And if you wantto run an example, from a particular stepsolution, you also have to paste in your APIkey in the dot m file. And I also got to talkmore about the dot m file. But this is thestart of files. So you have to think aboutif you want to create the styling in thiscourse, and you also have to think about nowif you want to set everything up from scratch.Or if you don't want to do that, you can juststart from one of these folders here, navigateinside Odin type npm install, or if you'reusing yarn, you should be able to use thatone also. And then NPM start or yarn startto start up the application. Alright, let'smove on in the next video. I'm just shortlygoing to talk about the tooling that I'm usingfor this course. Just a short, short littlevideo about what tooling I'm using for thiscourse, I think you already should know thistooling and have it installed to be able tofully take advantage of this course. Otherwise,it can be a little bit hard. if you for example,haven't used NPM that I'm going to use toinstall dependencies. I suggest that you learnabout that first, because this is a beginnerslash intermediate course in react. It's nota beginner course in coding, you should knowsome JavaScript and especially iOS six syntax,we're going to use a lot of iOS six syntaxin this course. So it should be a good ideato shape up your knowledge in JavaScript beforestarting to learn. react. But that's onlymy opinion. But of course, you should do ityour own way. If you want to learn react beforevanilla JavaScript, it's totally up to you,I shouldn't tell anyone on how they want totake on their coding journey. All right, soI'm using NPM. And that means that I haveto have node installed, we're not using node s, per se. But no, Deus includes the NPMpackage manager. So that's why we have toinstall that one. So if you don't have thatinstalled, make sure to grab the latest versionand install it. Then I use Visual Studio codeas my ID. So that's what I'm using in thiscourse. And then I'm going to use create reactapp and bootstrap our react application reallyfast and easy. So that's what we're goingto do. And I'm actually going to do that inthe next video. So let's get started withour application. I'm happy to see that you'regoing to create this project from scratch.And we're going to use create react app tobootstrap our application. So let's get started.If we look at the homepage for create reactapp, you can find it at create dash reactdash app dot Dev. And then they have somethinghere in the menu that's called get started.And the only thing that we have to do is rememberthis row here mpex, create dash react dashapp. And then you have the name of your applicationthat you want to create an empty x is somethingthat's provided with NPM in the latest versions,so you don't have to globally install createreact app to use it, this will make sure thatwe grab the latest version. So I always usempex, instead of first globally installingcreate react app. So this is really great,because then I know that I'm using the latestversion, and you don't have to install itglobally. But if you want to do that, youcan of course install create react app globallyfirst, but this is the command that I'm goingto use. So make sure that you navigate insideof your terminal. I'm using a terminal that'scalled hyper, I get a lot of questions aboutthat what terminal I'm using, I actually don'tremember the name of the theme, but I styleit a little bit to my likings. So that's sweet.So hyper is a great terminal. If you wantto have a customized terminal. You also havea built in Terminal in Visual Studio code,of course. So let's get started, make surethat you navigate inside of a folder whereyou want to create the reputation. And thenwe type in MP x and then create dash, Reactdash app. And then we have the name of ourapplication. And I'm going to name it reactdash or dB. And RM DB stands for react MovieDatabase. So that's the best I could comeup with. You can use whatever name you want.And then we can hit Enter, and then wait forit. It will install everything for us. Soit will take a little while. All right. Hopefullythat installed correctly for you. And createreact app has now hopefully bootstrap or application,you could set up this yourself and not usecreate react app. But create react app isactually used in in many production applications.And it's actually used right now for a clientthat I work with. And it's a fairly largeapplication. So you can do a lot of stuffwith create react app. And it's using Babeland Webpack in the background to set up directenvironment for you. So that's what you cando yourself if you don't want to use cratereact app. But I'm not going to show thatin this course, because I think it's a littlebit advanced for a beginner course. And actually,we're going to be fine with create react app,that's all that we need. So we also want tomake sure that it works. So make sure thatyou navigate inside of the product folder,I'm going to clear this and then type in aCD, React dash or MDB, or whatever you namedit. And then we're inside of that folder.And then we can type NPM start. And it shouldstart up our environment. This is the finishedone that's here now. So it's going to be replacedby this application here. So it's working.And we have successfully bootstrap our application.And that's sweet. In the next video, we'regoing to install a few dependencies that we'regoing to use for this project. We are bootstrapthe application. And now we're going to installsome dependencies that we're going to usefor this project. And the first one is goingto be something that's called react router.And react router is the standard in reactapplication for handling routes, because thisis a single page application. And we needsomething to handle or rolling because weare going to have different pages. And theone that we're going to use is called reactrouter. There is another library that's calledreach router. And I'm actually using thatone in version two of this course. But theteam that created reach router and react routeris the same team. So they're going to kindof merge them together into react router,version six. And this one is still in betamode, but I've talked to them and I thinkthat I should have this one in this course,because it will soon be out. And the API won'tlikely change because we're not going to usethe most advanced stuff in this router library.So we will be fine. And we have some instructionsdown here. I'm at github.com, forward slashreact training forward slash react dash router,forward slash releases. And down below here,we can see that we have some instructionson how to install it. So I'm going to bringup my terminal, do something like this. Andwe could of course, just copy this one andpaste it in. But in my courses, I wanted tolearn as much as possible. And it's alwaysa great idea to not copy paste too much andtype stuff in because that will make you rememberstuff much easier. So that's what we're goingto do now. So I'm going to type in MPM II,or if you're using yarn, you can, of courseuse that instead, I'm going to use NPM forthis whole course. And I'm typing in I insteadof typing out the complete word install, that'sa short term for install. So NPM I, and thenwe need to install something that's calledhistory. Also, that's another library that'sused in combination with react router, andwe can install them in one go. If I type historyhere, then I have a blank space. And thenI can type in the other library that I wantinstall. And in this case, it's going to bereact dash, router, dash dome. And then wehave an add sign. And next, and this willgrab the better version of react router. Sopress enter, and wait for it. Hopefully, thatinstalled for you correctly. So I'm goingto clear my console again. And we're goingto move on to something that's called styledcomponents, styled components is a super greatlibrary to use in combination with react withstyled components, we can create our CSS inisolated and scoped components. So that'sreally, really great. And we have a lot offeatures that we have, for example, in SAS,we can do nesting and stuff like that. Andwe can send him props and change our stylingdynamically. And we're going to talk moreabout styled components as we go along inthis course, because we are going to createthe styling. If you choose that path there,I really think you should if you want to havesome CSS practice, but it's up to you, I providedyou with different alternatives for this course.So we're going to install style components.And you can read more about it at style dashcomponents.com. So go back to the terminal,and we type in MPM is styled dash components.And we press enter. Alright, that went smoothly.So clear the console yet again, and we moveon to the last dependency that we need. Andthat is something that's called prop types.Prop types is a great tool in react, whereyou can type check your props that you sendinto your components. So as they say, hereis runtime type checking for react props andsimilar objects. So that's great. Today, alot of people use TypeScript instead, thenyou don't need to use prop types. And I actuallyuse TypeScript a lot myself, I'm startingto like it actually. But in our case, we'renot using TypeScript. Right. Now, I'm goingto show you that at the end of this coursein a special module that I created, wherewe refactor everything to use TypeScript instead.But for now, we're not using TypeScript. Sothat's why we're going to use prop types.And I'm going to talk more about this laterin the course. And I've placed it title atthe end of the course, because I don't wanttoo much stuff going on when we learn react.So that's why, so I'm going to talk aboutit at the end of the course. And when youcreate a component that has some props, youshould use prop types to do type checkingon your props. But I'm not going to do thatfirst, I'm going to add it in later in thecourse. So we don't get distracted or havetoo much stuff going on. All right, to goback to the terminal, type in NPM. I droppeddash types, and press enter. So that's it.That's our dependencies. And of course, Ididn't mention it at the start of this video,you should of course be in the folder thatwe created the application that we bootstrappedwith create react app, it's very important,you have to navigate inside of that folder.Otherwise, it won't work because we're installingthe dependencies in that project folder. Alright,in the next video, we're going to copy somefiles from the store to file c file to thisproject that we're going to need to make thiswork. If we look inside of our project folder,React dash orientdb, we can see that we havesome different folders and files here. Andfor example, if we look in the public folder,we can see that we have some image files andthe index dot HTML file. And this is the folderthat the dev environment is going to buildfor us. So the public folder is the finishedfiles that we're using for running the application.So that's everything inside of there. Andthe source folder. The src folder is goingto be the folder where we create all our stufffor application. So you can see we have someCSS file, we have an app file, an index fileand an index CSS file. We also have a testfile. We're not going to do any tests in thiscourse. So this one, we're not going to use.And we have a service worker, we're not goingto use this one either. And we have the setof tests that we're not going to use. If wetake a look inside of a zip file, the starterfiles that you should have downloaded forthis course. And we take a look inside ofthe first folder here, one files to be copiedto product folder. Alright, so that's thefiles that gonna be copied to the project.So make sure that you mark them here, copythem, move back to your folder, your projectfolder, and paste them in. And then you'regoing to choose to replace the old folders.This one is in Swedish here. So you probablydon't understand it if you're not from Sweden.But what it says here is to replace it, soI'm going to click that button. And then it'sgoing to ask me if I want to merge the sourcefolder or if I want to replace it. So if itasks you to merge it or replace it, alwayschoose replace. All right, so we successfullycopied the files. And if we take a look insideof the public folder, here, we're going tohave exactly the same files. The only differenceis that I've added in a Google import of afont that's called Abel or Apple, I don'treally know, if I pronounce it correctly,it sounds better to pronounce it, Abel. SoI think that's the correct one. That's theonly thing I've changed here. And that's thein the index dot HTML file, the other filesremain the same. So that's the public folder.And if we look inside of the src folder, youcan see that it's lesser files now. And that'sbecause I removed all the files that has somethingto do with tests, or the service worker andall the CSS files that we don't need, becausewe're going to use styled components. AndI also added in some files and a folder, wehave the images folder. And this one, of coursecontains the images that we're going to usefor this course. And then I have a file thatcalled API dot j s. And inside of this file,there are some functions that are going tohandle the API calls to the Movie DatabaseAPI. And in the previous versions, we actuallycreated this ones ourselves in the course.But I think that was just a distraction fromreact and react syntax. Because this is acourse about learning react. And the thingis that this is regular JavaScript insideof this one, it has nothing to do with reactper se. So that's why I created this one foryou instead, and placed them in a file. Andof course, I'm going to talk more about thesefunctions when we reach that point in thecourse. And then I have a config file. Andthis config file contains everything thathas to be set up with a Movie Database API.And I have a helpers file also, and help usfile contains a couple of functions that willhelp us to convert some numbers into money,and also to convert our time. And I'm gonnatalk more about these two files also, laterin this course. So these are the files, hopefullythis one will work. So if we go back to ourterminal, and this one is running now, sojust to be sure, I'm going to break it andrun NPM start just to see that it works. It'salways a great idea to see that stuff workswhen you're sharing something. And then Igo to my browser and reload the page. Andyou can see I'm at localhost 3000, just asbefore. But now this nice little rotatingreact logo is removed, and it says start here.And that is because I removed that one. AndI've modified this file so that we can startfrom here now in this application. So if itsays start here, you know that you successfullycopied all the files, hopefully, and it shouldwork for you. In the next video, we're goingto move on and actually use that API key thatyou got when you registered for the MovieDatabase API. Okay, we got one more thingto do. And then we finished with the setupof our project. And that is that we're goingto create a dot m file and paste in our APIkey. So in our application folder at the root,we're going to create a new file, I'm goingto call it dot E and V dot m, and create reactapp has built in support for environmentalvariables, the only thing that you have todo is to name them with react first. So react,underscore, and that's important, otherwise,it won't recognize it. And this one is goingto be called AP underscore API underscorekey, all capital letters. And then we havean equal sign. And then you can paste in yourAPI key here. And that's everything you haveto do. So just paste it in just after theequal sign, and you're good to go. And savethe file. This API key is then used in thesource folder in my config.js file. You cansee that our get it to here, process dot ndot react app API key. And this is all managedinside of the Create react app. When it startsup or dev environment and creates all thefiles for us and stuff. It will take careof these various really important to marketwith react underscore before the actual nameof the environmental variable and all thisHere is something that I created for you.So you don't have to care about this. So Icreate the different resources from the endpointon the Movie Database here. And we're goingto use these resources in the course later.And then I'm going to talk about more. SoI have different endpoints for the search,for example, and to get the popular movies.And this was our for the bonus videos at theend, where I create the login, and votingthat also provided with the Movie DatabaseAPI, you can log in with your account, andcast a vote on a movie, or on old movies.If you want to do that. Then we have the imagebase URL. This one is also from the moviedatabase. So these ones are provided fromthe API. So just use them according to theirinstructions. And we have a backdrop size,we can set the size of the backdrop and theposter size on the images, we can set differentsizes here and I mark them here for you ifyou want to try to change them and see whatit does. So we don't have to think more aboutthese as I set them up for you. And there'salso a file, it's called API dot j s. Andinside of this one, I created the actual codethat is going to fetch the data, we can callthese functions later when we fetch the data.And we don't have to type in all of this ourselves.And of course, I'm also going to talk moreabout these functions later when we fetchthe movies. So this one is for fetching allthe movies, and this one is for fetching onemovie. And then we have this one here thatwill fetch the credits. And below here, theseare all for the bonus material also. So youdon't have to care about those in the kindof main part of the course. So we have threefunctions here that is going to fetch datafor us. So that's one thing I changed actually,in this version of the course before this,we created these ones ourselves in the course,but I think it's a little bit advanced fora beginner course. And I also think that ittakes the focus on react itself, because thisis JavaScript, it's not react specific code.So that's why and I want this experience,I want this course to be a fun course also.So you don't get tired and stop the courseand won't finish it. So that's why I createdthese ones for us. Alright, so that's theconfig and a py file. And then I have onemore file that's called helpers dot j s. Andthis one contains two functions, that's goingto help us to calculate the time and alsoconvert to money, because the numbers thatwe get from the API has to be converted boththe time and the money. So I'm going to usethese ones later in the course also. Alright,so create the dot m file, create a variable,React underscore app, underscore API underscorekey capital letters equals and then you pastein your API key. Otherwise, it won't workbecause you can't access the API. one reallyimportant thing to notice here is that thisenvironmental variable won't be safe, becauseit will be visible in the client. So don'tthink that this one won't show up in the browser,of course, you have to look for it. But ifyou're good at looking through code, you willbe able to find this API key. So this is nota safe way to provide an API key if you wantto hide it from the browser. In our case,it's not that kind of a secret key, that doesn'tmatter. And for the sake of the course, itwould be too advanced to create a system thatwill hide this for us completely. So notice,this one won't be safe in the client. Beforewe move on, I want to talk about a reallyimportant aspect of react that I think a lotof people actually forget. And that is whenwe create stuff with react, we are also usingsomething that's called JSX. And it standsfor JavaScript, XML. And if we look here,I'm at the React js.org page now, and theyshow us here how to create the component.And this is a class component. And as I toldyou, before, we are going to create functionalcomponents. So we're not going to create classcomponents for this application. But theyare using JSX. Here, and this is JSX. Youmay think that this is HTML, but it's actuallynot it's JSX. And JSX is something that isreally great to use in combination with react,because we can render out our different componentslike this by using HTML ish syntax. I thinka lot of people actually forget it. BecauseI don't know exactly the percentage, but Ithink at least 99% of the applications useJSX. In combination with react, some peopledon't use it. And that's what I'm going totalk about here. Because you can create componentswithout JSX in react. And that is if we scrolldown here, you use something that's calledcreate element on the React objects reactdot create element, we specify if we wantsome props. And then we specify the ChildElements for this element. And you can seeup here, React dot create element, we havethe component that we want to create, we havethe props, and also we have the children andthis is the spread syntax in JavaScript, hehas six. That's why they use three dots hereto explain this though. This one Here is actuallythe same as this, this one here, will transpiledown to react dot create element. But it wouldn'tbe practical to use react dot create elementfor every component and everything you doin react, you can see that it's not that readable,and it will get kind of messy. And I actuallythink that react wouldn't be that fun to useif you use it this way. So I'm just goingto show you how to create an element withreact dot create element also. And in thenext video, I'm going to talk more about JSX.But now I'm going to show you just a smallexample on how you can create an element withreact dot create element. So let's move backto our terminal and make sure that our devenvironment is running. So NPM start, alwaysuse NPM. Start, when you start up your devserver, you can see that we have it runninghere now. Then I go back to Visual Studiocode. And I'm going to be in the app.js file.For this one, it's inside the src folder.And this is kind of the heart of our application,we have the index.js. That is the start filefor the application. And you can see the thereare import the app component here, these importsare e6 syntax for import. So we can importa model. And in this case, the model is acomponent. And it's called app. So I importthat one here. And then it's used here andthis one is JSX. So this is the heart of ourapplication, we have both a library that'scalled react. And we have react Dom becausereact can be used for other stuff than theDOM, for example, you can create native appswith react. But we are going to use the libraryreact DOM. And this one is all set up withcreate react app for us. So you can see thatfrom the React Dom that we import here, wecall the render method. And we give it thecomponent that we want to render. And we'lltell it where we want to render it. So fromthe document dot get element by ID, we getthe root element. So if we look inside a republicand the index dot HTML, you can see that wehave a div here, that's called root. And it'sinside of this div, that we're going to renderout our complete application within closeto public folder node, and go back to theindex.js file. So we're telling react to renderour application to a div that's called route.And it's also in something that's called reactstrict mode. It wasn't that before. But thisis a default. Now with great drag that instrict mode is actually great. It's goingto do a few more checks if you do some stuffthat it shouldn't be doing when you code yourapplication. So it's always a good idea tousing the strict mode in react. Alright, solet's move back to the app.js file. And asyou can see, here, we have this element here,we have the div that's called AP. And I renderout start here. And that's the one that wesaw before, when we started up the application.You don't have to type this in if you don'twant, because I want to show you this, thishas nothing to do with application that we'regoing to build. So I'm going to create a littlecomponent now. And then I'm going to removeit and we can continue on creating our application.I'm going to do it with an arrow function,I like to use arrow function, they don't doit here. But you can change this one if youwant to an arrow function const app equals,and then we create an arrow here instead,like that, I'm used to using arrow functions.So I use them for components also. So const,I'm going to create a component that's calledstore, and I have an arrow function. And thenfrom react, we import react here, you alwayshave to import react at the top, and anothercall create element, I have a parenthesis,I'm going to create a div. And then we'renot going to have any props because we haven'ttalked about props yet. So I set that oneto now, and then I'm going to render out thescreen. This is a little store like that,and I'm going to remove the sidebar, we cansee the component here. So this is insteadof using JSX. And if we want to render thisone out, instead of returning this one here,I'm going to return the store. And as thisis the function now, I also have to call itlike this, save it. And then I'm going togo back to the application. And you can seethis is a little star, so it renders out perfectly.And this is just a small example. And I wantto just for you to notice that you don't needto use JSX. And this is actually the Reactfunctionality at its core. So you don't haveto use JSX. But we are going to use JSX becauseit's sweet, and it's fun to work with. AndI think actually that it would be a smalll creating applications without JSX at leastI think so. So, I remove everything I createdhere and save the file. Again, just make surethat it works stored here. And it works andthat's great. So that's a little bit aboutreact dot create element and using react WithoutJSX, just a small, small note on that one,I'm not going to go any deeper into it, becauseI don't think it's actually relevant to usereact without JSX. So that's why. Okay, Italked a little about using react withoutJSX. But I actually don't think that's a greatidea. So that's why I also want to talk alittle about JSX before we move on with thisapplication. So JSX stands for JavaScript,XML, and it's pretty similar to regular HTML.So if we take a look here, you can see thatthey create an h1 tag here that says helloword. And this looks just like plain HTML.But as they say, here, this fun attack syntaxis neither a string nor HTML, I actually don'tthink it's a fun attack as to say here, butalright, you get the ID, why JSX. We can readhere more about why we are using JSX. Andthe main thing here thing is that they don'twant to put markup in one file and logic inanother file, they want to have them combinedin one file. And that may sound scary forsome, because a couple of years ago, you shouldn'tever mix them together. But in react, it worksreally great. And as they say, here, rackcomponents contain both markup and logic.So JSX is something that is created to lookpretty similar to HTML, there are a few differences.And I wanted to talk about those here. Becausein this case, we create an h1 element. Andthat looks exactly the same. But there aresome stuff that differ from regular HTML.And for example, you can see you can embedJavaScript as expressions here. For the sourcearea in the image tag, for example, you canuse curly brackets, and then you embed yourJavaScript expression. And that's super greatthat you can combine them this way. And also,as you look at tab index, it's camel casedthat differs from HTML. And they say it herealso seems JSX is closer to the JavaScript,then to HTML, react, Dom uses camel case propertynaming convention instead of HTML attributenames. So remember that, that you have touse camel case in JSX. And there are somefew differences. For example, when you seta class on an element, you don't use the classkeyword, you use class name, camel cased.And they also mentioned it here. And it tooka little bit of time for me to get used tothis one. And no, I actually typing classname when I type out regular HTML. And also,it's good to know that JSX is quite safe,it prevents injection attacks and stuff likethat. So I think you'll learn a lot aboutJSX. As we go along in this course, becausewe are going to use practical examples inthis course, not the most important part isto remember that JSX is not HTML. And it'salso used camel casing when you create anattribute. Before we dive in and create ourcomponents with state and props, and all thesevital things in react, you can sit down, relax,have a drink, have a beer, have a cup of tea,or whatever you're drinking. And just listento me in this video, where I'm going to talka little about props and state in react, thefirst thing you can do is to imagine thatthis is a room seen from above. And the graycircle here is a lamp that's not turned on.And the orange one is a lamp that's turnedon, each of these lamps has a light switchthat is often on. So if I click this one here,I can turn this light on and the light switchis going to change to on. And this one I canturn it off. So both lamps are off, and Iturn this one on, and I turn this one on.And this is made possible because I can usestate in react. So I have two states for thelamps. I have one state for the first timeand one for the second lamp that is a Booleanthat is telling if the lamp is on and off.But if we think about this, we actually havea state of the room also, because we needa state also for the light switch to changefrom off to on. Because these are kind oftied together so that you can look at thestate in different perspectives. In this case,I will look at the state from the room perspective.So I haven't placed the states in the lampsor in the light switches, I have placed thestates in the room itself because we havea room stage and for the room is going tobe if the lamps and the light switches areon or off. So we have a state for the roomitself. And this is what I talked about inthe for example the React documentation, theytell you that you can lift up the state toa parent component if you want to use thatstayed in multiple child components. Becauseif we placed the state in the lamp itself,for example, we could only access that statein the lamp unto its child components. Ofcourse, we could place the light switchesas a child to the lamp, but that wouldn'tbe the most effective way of doing it. Andit would complicate things if you want toreuse your code. So what I've done here isstudy is that I had this room here and I placedthe components in the room and I'm also goingto have the state in the room so we can usethat state both for the lamps and the lightswitches and I'm going to show you how Dothis now, and also talk a little bit moreabout state and props. So if we take a lookinside of the code here, this is the applicationthat I created for you. You can also openit up from the source files in this course,I provided it there. So I have the index file,the standard index file that shows the appcomponent, and app component is actually goingto be the room. So I could also name thisroom because this is actually the room component.And as you can see here, in the room component,I'm creating two states. In react when youcreate a state with hooks, you use somethingthat's called the use state hook. Before wehad hooks, we had to use classes to have statein them. So you couldn't ever create a functionalcomponent that has stayed in them. But nowwe have hooks, and that means that we canhave stateful functional components. And that'ssweet. So when we call this use state hook,we can initialize it with an initial value.So in this case, I'm giving it false, becauseI want this lamp to be turned off initially.Then I do something that's called ear sixdestruction here on destruction of this arraythat I get back from the use state hook. Sowe can name our state here to whatever wewant. In this case, I name it is lamp oneon and then we have the Center for the statecenter is lamp one on. And there's a few thingsyou should know about state in react. Andthe first one is that you should look at thestate as immutable, you should never mutatethe state, then that means that you alwaysshould use the state setter that you get backto set the state in react. If you're modifyingthe state directly, for example, try to changethis one. This means that your component won'trerender. And that's no good. And it can alsocause a lot of trouble in the future for youin the application. But if you use the setterand change the state and don't mutate thestate, your component will rerender and updatethe DOM. And this is how stuff works in react,you update the DOM when your components rerender.And one more thing with functional componentsis that we can add as many states as we wantwith the use state hook in the class components,you can only have one state, so you have toturn to create an object with different propertiesto hold your state. So this is super sweet,we can divide the states up now dependingon how we want to structure the state. Soin this case, I created two states, I haveone for the lamp one, and I have one for lamptwo. So they are doing the exact same thing.The only difference here is when I initializeit, I set this one to true and this will turnlamp two on. Alright, now I have two functions.And these ones are going to be called whenwe click the light switch. So I have one forthe light switch one and one for the lightswitch two, you could have one function instead.But I want to make it really, really clearon how stuff works. So that's why I createdtwo of them. So we have one function for theswitch one and one for the switch two. Andthis one will set is lamp one, that's thesetter for the state one for the lamp one.And what I do here is that I provide it withan inline function. And when you provide thestate setter with a function, it will getcalled with the previous state. So in thiscase, I'm going to flip that boolean value.So when I click the button, the first timethis value is going to get be true insteadbecause it's false initially. And this onefor a button two is going to be false becauseit's true. All right, these are functionsfor a light switches. So if we looked at theJSX, here, what we return to the dome, thisone is a room component. And if I go up here,you can see that this is the style componentthat we're also going to talk a lot aboutin this course, I create a style component,that's a div here. So I set some styling onthat one on the room itself, I make it 500pixels width and 500 pixels in height, thenI set a border on it, and the margin zeroin order is going to center it on the screen.So everything is wrapped in this room component,then I have a component, that's the lamp,I'm going to talk about that in a second.And I also have the light switch. So we havethe state in this app component. That's theroom. So this is where I kind of gather allthe states for this little simple application.And this way, I can use this state in boththe lamp component and the light switch. Becauseas you can see here for the lamp componenti created something that's called props, propsis something that you can create and thatwill get sent along into your component thatyou create props is an object. So you cancreate as many properties on that object asyou want. In this case, I created a lamp onProp. So this one will be sent into the lampcomponent in the prop object. I also createda prop that's called position. And this ishow I can make the lamp appear on the leftor on the right in the room. And lamp on isgoing to be the state for the lamps. So thisone is going to be a Boolean. And that waythis component will know if the lamp is onand off. And I'm going to show you that ina second. And I do the same with a light switch.And for this one I have the callback as Ishowed up here. I give this one a prop thatI call callback. It doesn't have to be Callcallback, that's the name that I chose. Andthe switch on, I'm going to give it a lampstate for this one. So you can see that Iuse the lamp states for both the lamp andthe light switches. And this is what I talkedabout before, if we created the state forthe lamp in the lamp itself, we wouldn't beable to access this state for the light switch,then we have to create the light switch asa child of the lamp. And that's no good, asyou probably can see now, because now we canplace as many lamps and light switches wewant in our room. So it would be much harderto do it if we place the stain in the lampitself. And I also have a position prop forthe light switch. So let's go inside of thelamp component that I created here. I alsohave a wrapper div for this one that's a styledcomponent. So I wrap everything in that div.And the interesting thing with style componentsis that they also can have props because theyare also valid react components. So we canuse props in our style components to modifyour CSS. And that's one of the super strengthswith style components, I think, because asyou can see here, this is this is somethingthat's called a template literal. And in thistemplate literal, we can grab the props thatare sent into this component. So in this case,I create dollar sign and curly brackets, andI can use a JavaScript expression. And I havethis inline function here that gets the props.So if we look at the wrapper component downhere, you can see that I also send in a proplamp on and the position. So I'm just sendingalong these props that are initially sentinto the lamp component. So I get them inthe lab component, and then I also send themalong to the wrapper component. That's thestyle component. And by doing this, I can,for example, check here, if the props dotposition equals to the left, then I'm goingto set the left value to 20 pixels. Otherwise,I set it to three or underneath two pixels,and that will place it to the right in theroom. So this way, I can modify my CSS andmake it very, very dynamic. So that's reallysweet that you also can use props in the stylecomponents. Alright, that's how style componentand props works. So if we look at the labcomponent here, I'm sending in these propshere. And what I'm doing here is I'm usingiOS six destructuring. So from the objectsthat we get that you usually call it props,I'm destructuring out these values that aresending, if I didn't do the destructuringhere, and I just do it like this, you cansee that it wants me here now, then I haveto type in props, dot and props, not becausethe props is an object, so I have to grabthose specific properties from the toggle.But if I destructor it out as I do, here,I don't have to type that in every time. SoI just structure out the properties here instead.And there's a few things you should know aboutprops because they differ from state. Andthe main difference is that the props arepassed into the components. And you shouldnever ever change the props in the componentthat gets the props, the props, values arechanged from the parent that is sending inthe props to the component. So if the propschange in the parent, it's also going to rerender,this component here. So never ever changethe props values in this component, you canchange the state in the component with a statesetter. And that's how you, for example, cantrigger a rerender. When you change the statein a component. So that's fine, you shouldchange the state in the component with thesetters. But a prompt should never be ashamedin a component that receives the props. Whenthe prop value changes, this component willrerender and it will have the new value inthe props. So that's how props works. Allright, we can check out the light switch.Also, I'm doing the same here I am destructuringout the props here. And I have this bottomcomponent. That's the star component. AndI modify it with props here also. So I'm doingthe exact same thing here. And you can seehere that are sending the callback, that'sthe function that I have in the app componenthere. So that's the one I'm sending in witha callback prop into the light switch. Andthen I have my button, and the button hasan onClick handler an onClick handler willtrigger this callback function. And this makesthis component very dynamic because by usingprops, you can make your component dynamic.And you can use it in different situations.In this case, I can send in whatever callbackfunction I want to be triggered when I clickon the button. So that means that I can usethis button in different situations. In thiscase, I also showing the switch on and offbecause I was sending in the prop switch on.So it probably won't be useful, too much lessthan this use case specifically. But if youwant you can use this button for somethingelse done to trigger a lamp to be turned onor off, you can turn something else on andoff and have another callback function andthat will work. So that's what you use propsfor. Also, you can make your components dynamicand reusable by giving them some props. Andby using these props inside of the component.You can adapt your component and change thelogic you can change the JSX and what it shouldrender and stuff like that. So that is reallyuseful to us. props for that. Alright, sothat's short on state and props. I hope thisone gave you some insight before we startcreating our own. So let's move on in thenext video, I'm going to talk more about stylecomponents and what they are. There's oneless thing I want to talk about before westart creating some code for real. And thatis styled components. Because in the nextvideo, we're going to create a global stylesfor our application. And we're going to dothat with styled components. So just a shorttalk about style components and why it's sogreat. And I think the biggest benefit isone that you get scoped CSS. And that meansthat you can have the same class names fordifferent components, it doesn't matter becauseit's scoped to that component. And numbertwo is that you can use syntax, kind of likesass, for example, you can nest stuff, andyou don't need to have polyfills, and stufflike that, it will create all that automaticallyfor you. And number three, is that you canhave props inside of it. And props is somethingthat we're going to talk a lot about in thiscourse, because it's an essential part inreact. And that means that you can modifythe CSS by sending in different props to yourstyles, you don't need to know exactly nowhow props work, because we're going to talkabout that later in the course. And also,you can use just plain regular CSS, and that'ssuper great also. So that is some benefitsthat style components will provide to youwhen using it in your application. So we alreadyinstall this library. And when you use it,you have to import something that's calledstyle, I think they have an example down here,here, input styled from styled components.And style is an object that holds differentproperties. For example, in this case, theywant to style a bottom. So these propertiescorresponds to what they are called in HTML.So if you want to style a button, if you wantto create a style component, that is a button,you use style dot button, and then you havea template literal. So this is something that'scalled a tag template literal. And that isa function that you call with a template literal.So this is e6 syntax in JavaScript. And it'ssuper great, because if we move up here, again,you can see, we have this template literal.Here, you have the starting backtick. Andyou have the end back to here. And insideof here, we can write our CSS. In this case,they're using style dot A, because they wantto style an a tag. And then they do some stuffhere, plain regular CSS. But here is somethingthat's happening. That's not plain CSS. Andthis is because we using a template literalhere, we can use JavaScript expressions insideof this template literal. And when you wantto use an expression inside of a templateliteral, you do that with $1 sign, and youwrap it inside of curly brackets. And thenyou can have any JavaScript expression thatyou want inside of here, and it will interpolateit into the string. And in this case, youcan see that they have their props, and theyhave an inline arrow function. And from theprops, they grab a prop. That's called primary.And you can set this CSS conditionally, dependingon this primary prop. And we're going to talkmore about this later, as I told you, so don'tget intimidated. If you don't understand thissyntax right now, hopefully, you will understandit fully when this course is over. This isjust a short introduction, before we createthe global styling. And we're going to dothat in the next video. It's time to startcoding. And we're going to start by creatingsome global styles. The first thing you haveto do is to start up your dev environment.And you do that by navigating inside of thefolder of your application. And then you typeNPM start, and that will start everythingup for you. And hopefully it looks somethinglike this, it should say start here. And it'salways a good idea to have your console open.I'm on Chrome now. So it looks something likethis. And also I can recommend an extension.That's called react developer tools. And thenyou will have access to something that's calledcomponents here. And if we open that up, wecan see our application here. But in thiscase, we don't have any components yet. Soit will just show the app component here.But this is a great tool when you developstuff in react. So highly recommended installreact developer tools. Okay, so let's moveback to our application inside of Visual Studiocode, or whatever ID or using an inside srcfolder, we're going to create a new file thatI'm going to call that I'm going to call globalstyle, capital G and capital s.js. So thisis going to hold all the global styles forour application. And we're going to createa global styles with style components. Sothat's why we have to import a special thingfrom the style components. That's called createglobal style. So we start by doing that importcurly brackets. Create Lobel style camel case,that means that there's a capital D and acapital S. And we ported from style dash components.And this is how we import the module withe6 syntax. In this case, it's not what's calledthe default export from this library. So that'swhy we grabbing it inside of the curly brackets,we are going to create default exports fromour different components. And then we don'tneed to use the curly brackets. But I'm goingto show you that later when we create ourfirst component. Okay, so we have this createglobal style method that we imported. Here,we are going to use a global styles insideof our app component later, meaning that wewant to import it here and use it down herein the JSX. So that also means that we haveto export this styled component from thisfile, so export. And this is a const. Alsoe6 syntax, it stands for constant. So that'swhat we have in JavaScript. Now we have let'swe have const. And we have various, I'm alwaysusing const. Before I know if this one isgoing to change, and then I change it to aleft, it's going to change in the application.But usually const will do, at least when youdo functional programming, as we mostly goingto do in this course. So const means thatthis one is not going to change. As with everything,there are special cases when it can change.For example, if you create an object witha const, you can change the properties inthat object, but you can't change the objectitself. Alright, enough about that. This oneis going to be called Global style. And thisis a component, and every component that youcreate in react is going to have a capitalletter to begin with. So capital G and capitalS in this case, and it's going to equal andthen we call this method that we importedup here, create global style. And in thiscase, we're not going to have a dot and somethinghere because this is the global style. Sowe're going to have double backticks, creatingour template literal. And then I do like this.And then we can write our CSS inside of thistemplate literal. And the rest of your isgoing to be regular plain CSS. So first, Iwant to set up some CSS variables. To callon Route, we do that on the route. And whenyou create a CSS variable, you do that withdouble dash. And then you have your variablename. So max width, this is camel cased, asyou can see here, are going to set the maxwidth to 1280 pixels. And then I have anothervariable double dash white. And then I setmy white color, another variable double dashlight gray. This one is going to be E doubledash med grade, or medium grade. And thisone is going to be 335 re 535 double dash,dark gray. And this one is one c one c oneC double dash font super big. That's a funnyname, I forgot that I call it that. All right,you can call it whatever you want. This oneis going to be 2.5 REM. And the next one isdouble dash and font big 1.5 REM double dashfont med or medium 1.2. REM. And the lastone is going to be double dash font small,one REM. And that's our CSS variables thatwe're going to use for this application. ThenI'm going to set the font for the whole applicationand also do some resetting here. So I havean asterisk. Like that, I set the box sizingto border dash box. And then I set the fontfamily to able and that's the Google Fontthat is important from the index dot HTMLfile. And then a how to backup font or sansserif. Alright, that's the resetting thenon the body. I'm going to set a few thingsalso. So we're going to set the margin zero,the padding is going to be zero, like that.And then as I told you with start components,you can nest stuff inside of the body, wecan nest the h1 tag like this, and set thefont size to two REM font weight is goingto be 600 and the color and I'm going to grabthis from my variables that I created up here.And when you grab a variable in CSS, you dothat by typing out various parenthesis andthen the variable name in this case it's goingto be double dash white. So that's the h1then I'm going to set the age three The fontsize is going to be 1.1 or M. And the fontweight is going to be 600 on that one also.And then one more thing to do here, and that'sthe p tag. So font size, one REM for the ptag, and the color is also going to be white.So var, double dash white. And then I alsodo some auto formatting. And sometimes whenI do this, create global styling, the autoformatting doesn't work. I don't know why.So I do it manually instead and save the file.Always remember to save your files, it's veryeasy to forget to save the file, and thenit doesn't work. So this is everything thatwe need for our global styles. Now we're goingto move inside of the app.js file. And uphere where we import react, we can mark itwith styles. And then we import global stylefrom dot forward slash global style. So thismeans that we import in this one that we createdhere, this constants called Global style,we can import it because we export it insideof this file. We don't do a default export,as I'm going to show you when we create components.That's why we use curly brackets and importthis as a named import. And we're importingit from the file that's called Global style.You don't have to type out.js. It's enoughwe just typing out global style, it will figurethe file extension out itself. Right therewe have our global stock component. But howdo we use it in our application, we shouldplace this at the top level of our application.And as we're going to have a component thatwraps are complete application. In this case,it's the div that's called app, it has a classname of app, we're going to change this outlater when we have the routing setup. Butfor now, that's a wrapping div. So insideof that one, we can use a global style. Andwe self close it like this, we don't haveany props to send into this one. And we'renot setting a class name or stuff like that.So when you use the playing component withoutclass name, and props in react, you do itlike this. And this is very similar to anHTML tag. So we save the file, go back toa browser. And the only thing we can see nowis that the margins and padding have changedhere, it's just right at the edges here now.And it wasn't that before. So we know thatour global styles are working. And we canactually just comment this one out, save thefile, go back to a browser. And you can seethat the margin is there now. That way, weknow that it's working. And hopefully we didn'tdo any mistake in the CSS itself. So it shouldwork. Otherwise, we have to adjust that later.All right, in the next video, we're goingto start creating the header component forthe application. So we're going to createour first real component in this application.And it's going to be the header component.So the first thing we do when we create anew component is to create a file for thatcomponent. And you can see that we have oursrc folder here and we have an images folder.But we don't have a folder, that's going tohold our components by usually create a folder,that's called components. That's what I'mgoing to do now. components, all lowercaseletters, and inside of this folder, we'regoing to create all of our components. Andthe thing is that the structuring of an applicationis something that's highly subjective. Soyou can have your own opinions on how youwant to structure it. And if you want to structureit in a different way, you can of course dothat. But please be aware that this coursewill have this folder structure. And you haveto think about it. If you change stuff yourself.If you just want to focus on learning react,I highly recommend that you use this folderstructure that I created for the course, Ialso going to have a folder for each componentbecause I want to separate out my styles andhave the styles in separate file and havethe component itself in a separate file, I'vecreated this course you don't have to createthe styles if you want. So that's easier forme to handle it that way by separating themouth. So therefore, I also think it's niceto have everything related to component inits own folder. So we're going to create anew folder inside of the components folder.That's called header. capital H. So we insidethe header folder, and this is something inVisual Studio code. It won't show a completetree structure here when you just have onefolder. But this will change later. But we'reinside a header folder. And inside a headerfolder, I got to create a new file that'scalled index.js. And this is also somethingthat's highly subjective actually, becauseI'm going to create my component in the index.jsfile. So we're going to have one folder foreach component, and each folder is going tohave an index dot j s file. And this is greatwhen you import stuff as I'm going to showyou later. But it's not that great if you,for example, have 10 components open up here,they all are going to be named index dot js. So that's the downside by doing it likethis. But this is a fairly small application.So I don't think it matters. But I can actuallyshow this if we have a component that's namedtest component, we import it like this. Andfrom dot forward slash, we have our folder,that's called test component. Like this, ofcourse, we don't have this one Oh, this isjust an example. It's exported as a defaultexport. So we import it like test componentwithout the curly brackets, we can name itto whatever we want. But I like to name themjust exactly as they are in the files. Andwe import it from the test component folder.And then if we have a file, that's calledindex.js, we don't have to type out anythingmore here, it will automatically grab thatindex.js file. But if we named this file,for example, test component, also, we haveto specify it like this. We have to type itout two times. And I don't like to have totype it in two times. So that's why I'm usingan index.js file instead, as this is a fairlysmall application. So we don't get confusedup here when we have a lot of components open.So that's my explanation to why I'm usingthis structure. And that's also why are namedmy files like this. Alright, so delete thisone here, we're also going to create placeholdercomponents for the styles, because we're goingto use the style components inside of thiscomponent itself. So that's what we're goingto do. And we do that by creating anotherfile. That's called heather.styles.js. Andthis is how I like to name my style componentfiles. So I have the component name, and thenI have a dot, and then I mark it with styles.And then I have a.on, the file extension.Alright, so from the style components, weimport styled, like this import style fromstyle components, components, it should bean S. Now, I'm just going to create placeholdercomponents because I am going to create thestyles in the next video. So if you have chooseto skip the styles, you don't have to do them.Justice before, you always have to exportthese ones, because they are in a separatefile, and we are going to import them in theindex.js file soon. Export const I have acomponent that I like to name wrapper, andit's going to be a style dot div. So thisis a div that I'm going to start. And I justhave the double takes. And I ended there becausethis is just a placeholder now, so we couldjust copy this one. But as I told you, I wantto repeat stuff and type it in many timeswhen you learn things. So we export const,I have another component that is going tobe called content. And it equals from thestart, we have another div double backticksand then we export const logo, IMD and itequals a style. And this is an image, it'sthe logo that we're going to style, doublebackticks and and it and then we export constTMDB logo. img, be careful with the capitalletters here. This is the Movie Database logo.So capital TMDB, capital L and capital II.From the styled, we're going to style anotherimage like this. So this is the four stylecomponents that we're going to use for thisreact component. So save the file, and I'mgoing to show you in the next video, how tocreate the styles the actual CSS, but moveinside of the index.js, we're going to createour header component. Now, the first thingyou do when you create a react component isto import react capital or from react. Andthat will make sure that we are using reactin this component. Then I have some imagesfor the logo. So if we look inside of theimage folder, I have the TMDB logo. This isan SVD. So we just see some code here. Andthen we also have the React movie logo. Andthat's also an SVG. So move back to the indexdot j s, we're going to import this ones now.So import our IMDb logo, you can name it towhatever you want here, but I chose to nameit RMD v logo, you could just name it logo,of course if you want to do that, but I wantto separate them out because we're going tohave the TMDB logo also. And we're going toimport it from dot dot forward slash that'sin the header folder that we want to go upone more folder so dot dot forward slash again.And then we have our images folder. And thenwe grab the React dash movie dash logo dotSVG. In this case, it's really important thatyou also type out the SVG extension, otherwiseit won't work when it's an image. So that'sthe rmvb logo. Then we import the TMDB logofrom doc dot forward slash dot dot forwardslash images, forward slash TMDB, underscorelogo dot SVG, like this. And as you can see,this can be a really long file path here.And that's no good. In some cases, of course,you could set up this with create react app,so you use absolute important step. But Ichoose to not do this in this course, as Iwant this to be kind of beginner friendly.And to be honest, we're not going to havethat long file path. So that's why Okay, sothat's our logos. That's our images for thelogos down, we're going to import the stylesthat we created inherit old styles dot j,s, because we export them here, as I toldyou, so we want to import them in this component.So import curly brackets, we have our wrapper,we have our content. We have our logo, IMD,we have our TMDB logo, no logo, IMG TMDB logoIMG. And we're going to import this once fromdot forward slash header dot styles endedwith a semi colon. I'm going to remove thissidebar here so we can see what we're doing.That's it, we have everything we need to assemblethis component for now. So we're going tocreate a component that's named header. Andwe're going to use just functional componentsin our application, because now you can havestayed in your functional components. A coupleof years ago, you had to create a class ifyou want to have some state, but now we havehooked and we can use just functional components.So I like to create my components with anarrow function. So cost header equals parenthesis,and a fat arrow. And that's an arrow function,you can have regular function if you wantto have that also. And then of course, youjust do it like this instead function header.You have curly brackets, but I like to havethe arrow function. And that's because youcan make an implicit return like this, ifwe just returning JSX, we can add parentheses,and you don't need to type out return. Andin our case, we're going to have the wrapper.That's the style component that we created.And inside of the wrapper, we're going tohave the content. That's also a style componentthat we created. And then I'm going to havethe logo IMG. And we can set the source onthis one because this is an image tag thatwe styled. So we can use the same attributethe SRC is going to equal and we have importedour our IMDb logo, or IMDb logo, like thiswas set on OLT. Now we can name it or IMDbdash logo. And then we can self close it likethis. So that's a logo for this application.And we have the Movie Database logo TMDB logo,IMG we have the SRC, it's going to be theTMDB logo IMG and we set the old TMDB dashlogo, and we self close it, do some auto formatting.And now you can see. Okay, I just named itTMDB logo, of course, that style component,we shouldn't use that. So TMDB logo course.Now you can see that it complains here, becausewe're not exporting this one, it says it'snever used. And that's because we don't exportit. You should always export it. And I liketo do the export here at the bottom. So exportdefault header. And this is also a sixth syntaxfor exporting something. So in this case,we don't have a named export, we export itas a default. Some people like to have theirexport here, instead, I don't like that. Sothat's why I have it at the bottom here. Butyou can do however you want. And this is ourheader component for now. But we're not actuallyusing it. If we go back to our applicationhere, you can see that nothing has happenedbecause we have created a component, but we'renot actually using it yet. So we have to dosomething about that. So let's go back toour app.js file. And inside of this div herethe wrapping div. This is also something thatyou have to know because in react you canalways just return one component, you haveto wrap the components if you have multipleof them in another component or in somethingthat's called a fragment that I'm going totalk about later in this course. So insideof here, we're going to have Our header component,but first, we have to import it, of course.So what I like to do, I like to mark it withcomponents, like this. And then I import Heatherfrom dot forward slash components forwardslash Heather. Like this, when you want touse a component in react, you have to importit first like this, this is a module thatwe import, our component is a module thatwe import with EF six syntax like this, right,and then we can use the component here fornow we don't have any props for this one.So just as we did with the global style, wecan insert the component here down in theJSX. And we have our header. So do some autoformatting and save it. And if we go backto our browser, you can see that we can'treally see the images now. And that's becausewe haven't set the styling for the imagesnow. So that's what we're going to do in thenext video. Or if you choose to not createthe styles, you probably will see the headerup here. Now if you're using the styles thatyou copied over to your product folder, butin the next video, we're going to create thestyles and that will make the header showup with the logos we have created or had acomponent, but we can't really see anything.So we have to create the styles for it. Also,you can see it. Yeah, it looks like crap here.So we have to give this some styling also.So we see it have nice little logos and orheader. So inside our file, that's calledheader.styles.js. We're going to start bycreating the reference style component, we'regoing to set the background on that one background.And from our variables, we're going to grabthe one that called dark gray, like this.And then I'm going to give it some paddingzero and 20 pixels. And that will give itsome padding on the sides. We'll save it,go back to our browser. And now you can seethat we see all gigantic logos here on ourgigantic header. So we have to do somethingabout this one also. So we have our contentdiv. This one is going to be displayed asa flex, because I want to place the logoson the left and the right. And we can do thatwith flex. So first we align items to center.And this will align them vertically. And thenwe justify the content. And we set it to spacebetween and this will create space betweenthem and push them to the side one is goingto be pushed to the right and one is goingto be pushed to the left. And I'm also goingto set the max width of this one. And that'swhy I also have a container that called contentbecause the rapper is going to have this backgroundof dark gray. But I don't want the contentitself to have the full width, the max widthis going to be from our variable dash dashmax with like this. And I'm going to set somepadding at the top and bottom are 20 pixelsand zero on the sides. And I set the marginto zero, all and this will center the contentdiv itself, save it go back and see what we'vegot so far, you can see that they are pushedto the size. And that's great. Flexbox isreally neat to do stuff like this, but thesize isn't correct on the logo. So we haveto modify this. So we have our logo IMG. That'sthe main logo, and that's the style image,we set the width to 200 pixels on this one,save it, go back to the application, you cansee that we have the correct size here. Butwe also want to change this size on the logowhen we are on smaller devices. So we createa media query at media screen and Max dashwith I don't really know if you need to actuallyuse screen today. I think it's not necessary,but I'm used to that. So I will do that. Iset the max width to 400 pixels. This meansthat when the screen size is lesser than 500pixels, this one will kick in. So we set thewidth 150 pixels on that one, save it go backto our application and see what we got. SoI can make this smaller. And you can see thatthere. The logo gets smaller also. So we knowthat the media query is working. And thisis also something that's super great withstyled components, because you can nest themedia queries as I did inside of this component.I think this is very readable to do it likethis because you know that this specific mediaquery belongs to this component. All right,so that's the main logo. Then we just havethe style, the TMDB logo also. I'm going toset the width 200 pixels on this one. Andthen I set a media query on this one alsoat media screen and Max with 500 pixels. Soit may see seem redundant to have two of themhere. But actually, as I told you, I thinkthis is very readable. If you want to changea media query for just that component, youcan do that inside of the nested media queryhere. And I like that a lot. So for this one,I'm going to set the width to 80 pixels, andsave it, go back to the application. And thereyou have it, this is our header. And you cansee that it's working on both of the logoswhen we make the viewport smaller. Sweet,that's the stars for the header. In the nextvideo, we're going to scaffold out our homepage.Alright, we're going to start building thehomepage for our nice little application.And we're going to have all this stuff here,on our homepage, the homepage is going tobe what's called a container component. Andthen we're going to create different components.For example, for the hero image for the searchbar for the thumbnails for the grid, and forthe Load More button. Let's go back to ourcode editor. And inside a components folder,we create a new file that we call home. dotj s capital H. And this one, I don't havea folder for this one, because this is kindof more container component. So we don't haveany styling in this one, we're going to applythe styling on the individual components instead.Alright, so the first thing we always do whenwe create a component in react is to importreact, import react from react, then I'm goingto create a little comment here and call itconfig because we're going to import somestuff from the file, let's call config.js.And inside of this file, I've set everythingup for you that's needed for the Movie DatabaseAPI, and I export them here in an object.So we're going to import a few things fromthis file in the home component. So go backto the home dot j s, and we import curly brackets,we're going to import the poster underscoresize, all capital letters, we're going toimport the backdrop, underscore size. Andthe image underscore base underscore URL.Remove this sidebar here. We're going to importthem from dotnet, forward slash config, likethis, and be very careful here with the spellingall capital letters and underscore. Alright,then later, we're going to import a lot ofcomponents here. So for now, I just mark itlike this, we're also going to import to hook.So I marked that one also. And we're alsogoing to import an image. So if we go backand look here in the images folder, I havethis image that's called no underscore image.And this one is a fallback image if we don'tget an image back from the Movie DatabaseAPI. So we have this funny little smiley balloonhere that will fall back to if we don't havean image to go back to the home.js. And weimport are going to call it no image. Andwhen you do an import like this, you can callit whatever you want. So doesn't need to benamed like this. I'm going to import fromdoc dot forward slash images. And I grabbedthe no underscore image dot jpg, very importantto have the file extension when importingimages like this. Alright, then I'm goingto create the component itself. And as I toldyou, I like to create it with an arrow function,you can have a regular function, if you wantto do that. I have a const home, I have acapital H. All react components always havea capital first letter. Very important alwaysname your components with a capital firstletter. So home capital H. And then we don'thave any props for this one. So I just leaveit empty here the parenthesis and then I havean arrow function. And I have curly bracketsbecause this one is going to have some logicinside of it, we have to have a return statementand make an explicit return. So return fornow we can just return a div that says homepagelike this. Alright, then we can also actuallyscaffold out our states that we're going tohave in this component. And for that one,we're going to need a hook that's called usestate. So make sure to import that one uphere. You type in a coma and then you havecurly brackets. And we import use state fromthe React library. And the use state hookis the hook that you use in functional componentsin react to create a state. So when we callthe use state hook, we'll get an array back.The first value is going to be the state valueitself and the second value is going to bethe setter for the state. And the standardfor grabbing and using these values is touse the Six syntax for destructuring. So Icreate a const, or the structure of the stateand the setter for the state set state. Andyou can call it whatever you want here, butI want to call this state, you could callit cool like this, but I don't actually thinkit's that cool. So I'm gonna stick with statelike this. And then we have an equal sign,and we call the use state hook. For now, we'llleave it empty, but it could provide it withan initial state in here. But we don't dothat for now. So as you can see, here, I'mcalling use state and this one will give usan array back. So from that array, I destructorout the state and the setter for the state.Otherwise, we could do it like this. But youshouldn't do that. We have a const stayed,you stayed like this, and this state willbe an array with the first value date valuehere. And then we have the setter, or thestate as the second value. And then as wedidn't destructor, this one out here, we justput it in this constant called state. If wewant to grab the state, we have to type itin like this, to use the index zero becausethat's the first value in the array. And ifwe want to set the state, we have to grabthe setter like this with the second valuein the array, that is the index one. So that'sno good. Actually, it's much better to doit like this, instead, we destructed out andwe can also name them individually by doingit like this. Alright, so this is the wayto go, this is the way you should do it. Sothat's the state we'll that will hold allthe movies, then we're going to have the statefor the loading, the loading and set loadingequals use state and this one, I'm going togive an initial state, I'm going to set itto false. And this is also great with theuse state hook, you can have as many of theseones as you want, you can split the stateup into multiple ones. And you couldn't dothat in the class components in react, becausebefore we had the use state hook, we neededto create a class to have state in react.And then we just had one state and you haveto have a state object with all the stuffin it. But now we can separate them out intodifferent states. And that's super great.So I'm going to create the third one thatare called error and set error. And this oneis going to be used if we receive an errorfrom the API. So we can have this as a flag,and we set this one to false also. Right.So that's the states, we have to do one morething, because we have created this component.And we also have to export it. So export default,home like this. See if we can get some moreformatting. Now it looks great. Anyways, alright,save the file. But if we go back to our application,you can see that we don't see anything yetit just start here. That's because we havecreated a component, but we're not actuallyusing it. So in the app.js file, up here,where we import the header, we're going toimport home from dot forward slash components,and home like that. And then we can use thatcomponent down here. So we remove start hereand use a component and we self close it,because we're not sending in any props. Sowe just type out the name in a tag like this,save the file, go back to the application.And you can see that it says homepage. Andthat's great. We know that it's working. Andyou may wonder why we have all these warningshere. But they are just warnings because we'renot using these values. Now, they will disappearlater when we use them in the component. Sonothing to worry about there. In the nextvideo, I'm just going to do a short talk onthe standard hooks, that's indirect library,and then we move on and actually fetch somedata from the Movie Database API. Okay, beforewe move on, I just want to make a brief talkabout the built in hooks that's in the Reactlibrary, we can also create our custom hooks.And we're going to do that in this coursealso, but we have some hooks that's builtin that you probably going to use most ofthe time when you create react applications.So I'm on the React js.org. And I'm in thischapter here that's called hooks. This isgreat if you want to know more about hooks,because honestly hooks can be a little bithard to grasp in the beginning. So I highlyrecommend that you actually read this chapterhere if you're completely new to hooks. Andif you're new to react, this is a great wayto start doing some reading before you doany course or create anything with react.It's always a good idea to have some basictheoretical knowledge before you start withsomething. But of course, it depends on howyou like to learn stuff, so I shouldn't tellyou how to do it. Alright, so they have anintroduction to hooks, they have differentchapters here, we actually going to look atthis one number seven hooks API reference,and I'm going to talk about the hooks that'sbuilt in the library, sort of separated inbasic hooks and additional hooks. And thebasic hooks are probably the ones that you'regoing to use not maybe 99% but perhaps 95%of the time, and then you're going to createsome own custom hooks and use some specialhooks sometimes. So we already talked a littleabout the use state hook. That's the one thatyou use for creating state in a functionalcomponent in react. So that one we importedin the last video, and we initialized it andset it up in the home component, we're alsogoing to use the hook that's called use effect.And use effect is a hook that you can usefor side effects. So in our case, we're goingto grab data from an API, and that's a sideeffect. So we're going to use the use effecthook for grabbing that data. And we're goingto use the state to keep that data in ourapplication, then you have a hook that's calleduse context, we're not going to use that hookin the main part of this course. But I amgoing to use the use context hook in the extrachapter at the end, where I create a MovieDatabase, login in the application and makeit possible for you to cast a vote on themovies, then I'm going to set up a globalstate that holds the login information ofthe user by using the use context. So that'sthe basic hooks. And then you have some additionalhooks use reducer, that's something that'svery similar to if you, for example, haveused Redux. The use reducer is very similarto that one. And it can be used instead ofthe use state hook if you want more. I don'tknow if it's a more complex state. But yeah,yeah, maybe a more complex state than theuse state, we want to use it in this course.And the use callback and use memo hooks arehooks that you can use to memorize stuff.If you don't want to recreate for example,a function on each render, they are very handyif you for example, run into something that'scalled an infinity loop with the use effect.That's very common actually, in react thatyou can do that. Because if you set the statein a use effect that will trigger a rerender.And if you have a dependency in the use effect,for example, a function that recreates oneach render, that will trigger that effectagain, and that will set the state again,and it will trigger the effect again. Andyeah, you get the point here, it will createan infinity loop, then you can use the usecallback to wrap that function inside theuse callback hook. And that won't recreatethe function on each render. Because by default,if you create just a regular function, Reactwill recreate that function on each render.And use effect. If you specify that one inone in something that's called a dependencyarray that we're going to talk about, thenthat use effect will trigger again, becauseit will think it's a new function becausethat function has been recreated on the nextrender. So use callback and use memo or hooksyou can use to memorize stuff in react, butI think there are a little bit more advanced,so I won't use them in this course, they useref hooked, we actually going to use thatone because I'm going to show you a littletrick in this application. And a neat littleuse case to use this one use ref is basicallya hook you can use to create a mutable valuethat won't trigger a rerender, you can seejust maybe like you're kind of a regular variablethat won't trigger a rerender. So we can usethis one to create a mutable value. Becauseif we have it in a state, it will always triggera rerender when we change that value. Butif we change the value with the use ref hook,it won't trigger a rerender. Use imperativehandle, I've never used this one. So I'd actuallydon't know what is for use layout effect,it's very similar to use effect. They onlydiffer in when they trigger. So there's nouse case for the use layout effect in thiscourse. So I won't go into detail. And usedebug value. I haven't used this one either.These are the built in hooks in react. ButI think the strength about hook is that youactually can create custom hooks. And we'regoing to do that in this course also, thatwas a brief introduction to hooks in react.So in the next video, we're going to fetchsome data from the Movie Database API, we'regoing to use the use effect hook and the usestate hook for that. Alright, let the funbegin, because now we're actually going tofetch some data from the Movie Database API.And that's super exciting, because it's alwaysgreat when you see the magic happens whenyou have that nice little JSON object withall the data that we fetch from an externalsource. I like that I love it. Alright, sowe're going to be in the home.js file forthis one. Now, the later we're going to kindof break this one out and place it in itsown custom hooked. But for now, we're goingto be in the home component and created insideof here. So we're already importing US state.But we're also going to import use effect,because we're going to use this one for fetchingthe data. Then I have this file here, that'scalled api.js. And inside of this file, Icreated all the functions for fetching datafrom the API. And I will also say that thiswill probably one of the most advanced videosin this course and also one of the longestso you can care a little extra about thisvideo because it's kind of advanced stuffin this one. Alright, in this file. api.js,I have this omit here where I export a coupleof functions. The three first ones are theones that we actually need to care about theother ones is for the bonus material for thiscourse. So you don't have to care about thatnow. So this one is the one that we're goingto use now fetch movies, and this will fetcha lot of movies, multiple movies, then I havethis fetch movie without the s and this onewill fetch an individual movie. And then Ihave fetch credits. And that's the creditsfor the movie itself. So these ones are goingto be used for the individual movie page.And if we take a quick look at this fetchmovies, here, you can see that this one hastwo parameters of search term and page. Sowe're going to give it the search term andthe page that we want to fetch. And I havea ternary operator here. And that's ies sixsyntax for kind of a shortcut for if an elseso I do a check here, I check if I have asearch term, and then I have a question mark.And if this one is true, if I have a searchterm, it will run this one to the right tothe question mark. And if this one is false,I have a colon here, it will run this oneto the right of the colon. It's a shorthandfor if and else, then I have to do this becausewe have different resources from them pointdepending on if we're doing a search, or ifwe're grabbing the most popular movies. Sothat's why I have this ternary operator here.If we in the search, we're going to use thisresource from the endpoint here and also attachthe search term. And then we also grab thecorrect page. So we add this as a parameterto the URL. And then I return on the wait.And I actually waited two times. And that'sbecause I first await the fetch from endpoint.And then I await when I actually convertedwith JSON, because this one is also async.So that's why I have to await. And as I havean await, I have marked this one with an async.So I'm using the async await syntax for thisone, you could also use the good old them.But I think that's not as readable. I actuallylike this a lot more. So that's why I'm usingthe async await syntax for this one. Alright,and I think that's it for this file. We don'thave to care about this, because we're goingto import this function. So go back to home.js.And just below here, I'm also going to removethe sidebar on market with API. And then Iimport API from dot dot forward slash API.And this will give us this object where wecan access those functions are talked about.Alright, so that's the API, then down in theactual component here, just above the returnstatement, we can create a new function thatwe're going to call fetch movies. And as wefetching from the API, and we're going touse a wait, we have to mark this with async.And then it's going to have two parametersis going to have the page and the search term.And we can set the default value on the searchterm to an empty string like this. And I havean arrow, and I call the brackets. So we createthis function here is an async function, becausewe're going to fetch from the API and awaitthe data. This one is going to get the pagewe can send in what page we want to grab.And then we can also send in the search term,we haven't actually created this one yet,because this one is going to be another statewhen we create the search bar. So we're goingto add in more states here later, and alsohave a state for the search term. And if wedon't send in a search term, we're going tofall back to an empty string. So we set thisone as default. So that's the fetch moviesfunction. We're going to read this in a tryand catch block, try and catch. And we canget the error in this case, I'm not actuallygoing to set the error, I'm just going tohave a flag that setting if it's true or false.But of course, you can have a state whereyou can store the message from error Also,if you want to do that. So in the catch, we'rejust going to have set error, and we set itto true. And here to see how I use this setterfor the state. So we destructor it out here.And to set a new state for that one, we callthis one and we give it the value. So I callset error, and I give it the value true andthis will change that state to true insideof try block will first going to set the errorto false. Because now we grab a new data.So we have to make sure that this one isn'tset to true because we don't have an errorbefore we have fetched anything. And we'regoing to set the loading to true because nowwe're fetching so we set this flag to true.And this is how we can keep track on whenwe actually fetching and we can show the loadingspinner and stuff like that. All right. ThenI create a course that I call movies. Andthis course is going to hold all the movies.So I'm going to wait. And from the API thatwe imported up here. We have that functionthat I showed you. That's called fetch movieswith an s really important, and then we'regoing to give it the search term and the pageSo this will hopefully grab the movies forus. And we can try yourself with console logmovies. But if we go back to our application,you can see that we don't actually get anythinghere because we haven't triggered this function.And we have to do that in a use effect. Sowe have the function now, but we haven't triggeredit, do some more formatting, and go belowthe function here. And we call the use effect.And the use effect is called with an inlinefunction like this. And then we can do whatwe want inside of this use effect. So whatwe want now is to trigger this only on Mountonly when we mount this home component onthe initial run of this one. So we can dothis by specifying a comma here, and an emptyarray. This is what's called a dependencyarray. For the use effect, we can specifydifferent dependencies on when we want thisuse effect to trigger. In our case, we justwanted for now, the trigger when we startup the application, and when the home componentmounts, so I specify this as an empty arrayfor now. And when we specify it as an emptyarray, it will just run once. So that's reallyneat. In this case, we can just call fetchmovies, we're going to send in one, becausewe want to fetch the first page, we can alsomark this one actually with initial render.So we are specified an empty dependency array,meaning that it will only run once on theinitial render. And inside the use effect,we call our fetch movies function. And hopefully,we will get the console log of all the moviesif we save this one and go back to our browser.And yes, you can see here we have the movieobject here. So in this object, we have thepage one. And this is all from the Movie DatabaseAPI. So it's nothing that we have set up here,we have a total pages of 500, total resultsof 10,000. And we have the actual movies ina property that's called result. And thisis an array, and we get 20 movies at a timefrom the API. So that's sweet, we know thatwe grabbing data, and we know that it doestriggers once. And that's super great. Sonow when we have the data here, we can actuallyset our state because we have our state uphere and we want to put our movies in thestate. So I'm going to call set state. Andfor this one, I'm going to provide it withan inline function is a callback function,that's going to be called with the previousstate by the state setter, if you providea state setter with a function, it's goingto be called with the previous state. Andthat's great, because we need a previous statewhen we set the state. And I'm going to showyou why in a second. So we have a parameterthat are called prayer, you can call it whateveryou want. In the state, we want to set anobject, so we want to return an object, soI have a parenthesis and curly brackets. Ifwe didn't have the parenthesis, it would thinkthat these curly brackets marks the scopeof the function itself. And that's no good.We want to return an object and an objectalso is marked with the curly brackets. Sowe have this parenthesis before and this parenthesisafter, this will make sure that we returnan object. And this parenthesis here is forthe setter, of course, so we have two parentheseshere at the end. So I have this little neatlittle plugin. Also in Visual Studio codewhere you can see I get these different colorsof the parentheses. So it's really easy tosee the parenthesis, I think it's called rainbowbrackets that plugin. So we're going to setthe state we have the movies inside of thiscost. So I'm going to use the e6 syntax that'scalled spread, I use three dots and spreadthe movies. And this is because I'm goingto take this object here and spread it outhere. That means that we creating a new object,it's going to take all the properties fromthis movies and spread them out inside ofthis object here. When you set the state inreact, you should always provide it with anew value, you should never mutate the statein react because if you mutate the state directly,it won't trigger a rerender. And there canbe a lot of trouble. You should always usea satellite this to modify the state. Andyou should always provide it with a new valueand not mutate the state. Really, really important.Never mutate the state in react. Okay, sowe have the movies. And then if you remember,we have this property here that's called results.So this is holding all the movies. But inour case, we need to decide on how this newstate should look because if we load moremovies, we want to append the new movies tothe old state to the old movies and not wipethem out. So we have to do some check herefor that on the results. So we have the resultsproperty, colon, and then I'm going to putit on a new row. I'm going to check if thepage is greater than one. Then I have a questionmark. This is a ternary operator here again,are going to return a new array are spreadout from the previous state prep. That's theone here as I told you, this one is gettingcalled with the previous state So from theprevious state, I spread out the old result,three dot prevot dot results with an S atthe end. All right, so that's the old moviesthat we already have in the state, then Ihave a coma. And I'm going to attach the newmovies from the new movies, dot dot dot movies,dot results. And this one is going to appendthe new movies to this array. So we get anarray with the old movies and the new movies.And that's great. Then we have a colon becauseif we're not loading more, we can wipe outthe old movies and just give it the new moviesthat we got in this concept called movies.So dot dot, dot, movies, dot results, likethis is some auto formatting. And this willhopefully work. We don't know if it works,because we haven't created a load more buttonyet. So we'll see that later in the course.And there's one more thing we have to do,because we setting the loading to true here.And we have to set it to false when we havegrabbed all the movies. So just below thetry and catch block here at the end of thisfunction, we're going to set loading to falselike this, save the file, go back to see thatit works. reload it, and yes, it works. Andthat's super great. But we call slogging itout here, we don't know if it works with thestate. So we remove this console log, andgo down here somewhere just above the returnstatement, and we can console log out thestate instead, save the file. And we hopefor the best. Go back to the browser. Andyes, you can see we have the state here. Andyou may wonder why is it showing this manytimes. And that's because if we look in thehome component, we have three different stateshere. So it will rerender each time we changeone of these states. And some may say andgo crazy, oh, we have a lot who renders thatcrazy, it will make this application so slow.But yeah, you shouldn't worry about that,actually, because react will diff those thingsand only update things in the DOM that haschanged. So it doesn't matter if it rerenderthis many times. And to be honest, React isfast. So even if you had a lot of rear Enders,you won't have any performance issue in anapplication of this scale, don't worry, it'scompletely okay that it renders all thesetimes because it won't rerender the completepage, it will only run the stuff that haschanged. All right, that's how you fetch datafrom the Movie Database API with a use effecthook and then you put it in the state withthe use state hook. In the next video, we'regoing to take all this logic here and createour own custom hook and place that data insideof there. And then we can get rid of thisone in the home component. So it will looka lot cleaner. Okay, we're grabbing data fromthe Movie Database API with the use effecthook and we place it in the state with theuse state hook, we're going to move all thislogic inside of a custom hook instead, becausethat will make this component A lot cleaner.And it's always great to separate out thislogic, if we want to reuse it somewhere elsein the application. In our case, we don'tneed to do that. So we do it just becausewe want to clean up this component and toseparate out this logic. So that's why youcreate custom hooks. Either you do it becauseyou want to reuse some logic somewhere inyour application, or you want to clean itout and have that separated out. So insideof the src folder, not in the components folder,this time inside of the src folder, createa new folder, that's called hooks. And insideof that folder, create a new file that's calleduse home fetch camel casing, dot j s, capitalH, capital F. And why do I name it like this?Well, React wants you to name all your customhooks with use and then your name. That wayreact knows that this is a custom hook, youcould skip to use use. But you shouldn't dothat you should always name them with usebefore the name, always do it like that. Otherwise,it can give you trouble in the future. Soinside of this file, I'm going to create anew function. I'm going to export it alsobecause we're going to import this one inour home component and use this custom hooked,export const use home sets. And I create aregular arrow function like this. Alright,so that's our function, then we go back toour home component inside of the componentsfolder. And we're going to grab all this logichere, all the states, the first move is functionand the use effect. We can keep the consolelog for now is going to give us an error butthat's okay, we're going to fix that soon.Go back to the use home fetch custom hookedpaste the logic in here and it complains nowbecause we haven't imported this ones here.So we could actually just copy them from thehome component but just as before, I wantus to type in stuff a lot here because welearning stuff. So we're going to import fromthe rack. library, we're going to need theuse state. So import curly brackets, you statecoma use effect. And we're also going to usethe hook that's called use ref laters, wecan import that one also. And we import itfrom react. And you can see the red, don'timport react in this one, because we not needthe actual react library, we just need thisstuff from that library. So that's why wedon't have any JSX or anything here. So that'swhy we don't need to import react itself,we also need to import the API. And that one,we can actually just copy this one from thehome. So go back to the home, cut this oneout here, the import API like this, go backto the US home fetch hooked and paste it inhere. And this one should be it. All right,is more of mining. And we only have this functionor we're not actually returning something,we have to return something in our customhook also. So go down to the bottom of thefunction. And here we're going to return ourstate's for now, we're going to return morestuff in this one later, when we create morestuff. But now we return on object. And wehave the state, we have the loading and errorlike this. And this is also a sixth syntax,as we return this object, this one is automaticallygoing to get the property state because ithas the same name. And all of these ones hasthe same name. So we don't have to specifythem explicitly, it will figure this out itself.All right, there's one more thing I want todo inside of this one before we finished forthis video. And that is I want to create aninitial state. So up here, I create a constinitial state, it's always a great idea tohave an initial state if you want to resetstuff. And we want to do that later. So I'mgoing to structure the state just as the onethat we got back from the Movie Database API.So we have the page, it's going to be zeroinitially, then we have the results. That'sthe property that holds all the movies aregoing to provide it with an empty array initially,where the total underscore pages is goingto be zero. And the total underscore results,it's going to be zero also. So this is theinitial state. And now we can give this initialstate to the use state here where we createa state. So provided with the initial state,and this will make sure that it gets the state.All right. So that's our custom hook. Fornow, we go back to the home component. Andnow we have to use this custom hook. I alreadycreated this comment here where we're goingto import it. So we import curly brackets,use movie fetch, like this, from dot dot forwardslash hooks, and use home fetch. Then insideour sad little empty home component, we'regoing to use this one. And yet again, I'mgoing to use ESX destructure syntax to getthose properties from the object that we exportedhere. We export an object with all these valueshere. So I'm going to destructure them outhere. curly brackets stayed loading an error,equal sign and our call my custom hook usemovie fit. So this will hopefully work. Weconsole log in out to state so save this file,make sure that you also save the hook itself.And go back to the browser. reload it. Yeah,I have some arrow here. Use movie fetch isnot exported, didn't I export it? export const?Yeah, it should be used home fetch, of course,not use movie fetch. A change this one touse home fetch. us home fetch homefacts likethis, save the file, go back to the browser.And you can see that we have our state here.And that's great. You can see there's a lotof renders. And a lot of people will say,oh, crazy. There's too many renders, thisis a performance issue. But it's actuallynot. So this is totally fine. But you cansee that it we have our initial state herefirst, and it's zero, everything is zeroedout. And then we get the data here. And wehave all the movies inside here. So that'ssweet. And I promise you it won't be any performanceissue in this application because of theserenders. So this is how you create a customhook in react. Always name your custom hookswith use before you have your name. That'sreally important, you should always name themlike this. In the next video, we're goingto start creating the components for the homepageand we're going to start with the hero image.In this video, we're going to create thishero image here in the application. So we'regoing to grab a background image and all thetext here from the Movie Database API. Actually,we have already grabbed them. So we're goingto use that data inside of the hero imagecomponent. So let's go back to our code editor.And inside the components folder, create anew folder that we call hero image, capitalH capital I, and inside the hero image folderand create a new file that we call index dotj, s, and also file that we call hero imagedot styles. dot j s, just as before, are justgoing to scaffold out the style so we canuse them in the component, but I'm going tocreate the actual styles in the next videoinstead. So if you already have this filehere and choose to not create the stylingfor this course, you already have this filehere and don't need to do this. So in thehero image.styles.js import style from stylecomponents like this, then I'm going to exporta cost that are called rapper is going toequal from style dot div, I'm going to createa div I have backticks like this, then I'mgoing to export const content equals styled.do,exactly the same and double backticks. AndI'm going to have one that's called exportconst text equals styled dot div double backticks.And that's it. That's three Olam, save thisfile and go inside the index.js file, we importreact from react, then we're going to importthe styles. So I marked it with styles, import,wrapper, calm content, and text from dot forwardslash hero image styles. Right? Then I createthe component itself const hero image capitalletters h n i equals and this one is actuallygoing to receive some props. And a probe issomething that you can send into component.So that component can change dynamically,depending on the props, a prop should neverbe changed inside a component that receivesthe props. So they can only change if somethingrerun this and they get a new prop. So that'show that works. And the props is sent intocomponent on a prop object like this. So wehave the Prop, I have an arrow function. Andfor this one, I'm just going to return JSX.So I can make an implicit return. So I haveparenthesis so I can skip the return statement.And then I have my wrapper. And this is astyle component, we scaffold it out just recently,this one can also receive a prop. So whenyou send in a prop to a component, you doit by naming the prop and then you give itthe value. In this case, it's going to befrom the prop that this component get prop.There's going to be a prop that called image.So we send out along to this style component,that's named wrapper. And in the next video,I'm going to show you how we can set the backgroundimage in this component by sending in theimage URL to the style component that's namedwrapper. So that's what I'm doing here. SoI'm sending this URL along to the style componenton a prop that's called image inside thiswrapper, we're going to have the content.And inside the content, we're going to havethe text like this. And inside the text, we'regonna have a regular h1 tag. And in JSX, whenyou want to use a JavaScript expression, youcreate curly brackets, and then you type inyour expression. In our case, we want to showthe title. And this hero image is going toreceive the title from the prop that's calledtitle like this, and you end it with a curlybracket. You can have any JavaScript expressioninside of here that you want. So you can dosome calculations and map through stuff andthings like that, that we're going to do lateralso are going to show you that now we havea p tag. Yet again, I have curly brackets,I have the text and curly brackets. And thatone is from the prop dot txt. There's moreformatting. And then I export default heroimage. This looks fine, actually. But I wantto show you a little trick here now that youshould use when you create your components,because now we have to type out prop dot imageprop dot title prop dot text. So instead youcan use e6 syntax up here and destructureout these props from the prop object. So wehave parenthesis, number of curly brackets,so we have destruction of this object. Andthen we have the image, title and the textAnd then we can remove prop here on all ofthese. So I think you should get used to alwaysdoing it like this because it will look alot more cleaner with the structure mountup here. So we don't have to type in propevery time. Alright, save the component. Andjust as usual, we can't see anything. Nowif we go back to our application, becausewe haven't used the component yet, save it,go back to home. And up here, where I markedit with components, we import hero image fromdot forward slash, hero image. And now wecan use this component. So below here, insteadof homepage and this div, we can just returnthe hero image like this. But we want to sendalong some props to this one also, becausethis one needs the title and stuff like that.And we also need to check that we actuallyhave any movies in the state. So we can'tactually do it like this, because it willthrow an error if we don't have any moviesin that array. So what we can do here, insteadit we return something here inside of theparenthesis, because we're going to need multiplerows to move this one inside of here, instead.And as I told you before, we can only returnone parent element in JSX. So we have to wrapthis one because we'll have more componentshere later. So we can create something that'scalled a fragment in react, we could of course,create a div like this and move this one inside.But sometimes we don't actually want to createa div, we just want to return this withoutcreating a div. And you can do that by creatinga fragment. And this is the shorthand forfragments, you just create this angle bracketsand an end angle bracket. And this will work.So inside of here, we also want to check ifwe actually have some results in the state.So just as before, as I did in the hero imageitself, if you can see are in the JSX, whereI have a JavaScript expression, I can do thesame in the home. To go back to the home,I have a curly bracket, and now I can useany JavaScript expression that I want. SoI want to check if state results. And thehero image is going to be the first movie,it's going to be the most popular movie. SoI grabbed the first element in the array,I check if that one exists. And then I dosomething that's called a short circuit. SoI have double ampersands. And I'm going tomove this column bracket to the end of here,because I want this one to be nested insideof this one. So this means that if this oneis true, it will run this code here. If it'sfalse, it will just fall back. And sometimessome argue that you shouldn't do it like this,because it will return the actual value falsehere, but JSX won't show it. But if you want,you could instead do a ternary operator likethis. So if this one is true, we return thehero image. And then we have colon otherwisewe return null, we can put it on its own roll.And this will also work. And we want to givethis theory some props. So we have a propof image. And that one is going to equal.And this one I have to construct because theimage URL is constructed by the image baseURL that we that we get here, and also thebackdrop size. So I have backticks in dollarsign curly brackets, I'm going to grab theimage base URL like this. And this one isgoing to be long, so I'm going to remove thesidebar. So this is a template literal. Andyou can interpolate expressions like thisin a string literal. Alright, then I'm goingto add the backdrop size, like this. And thenI'm going to add, you can see I have dollarsign and curly brackets for all of them here,dollar sign and curly brackets again, fromthe State DOT results, I grab the first elementagain. And then we have something that's calledbackdrop, underscore path. Be very carefulabout the spelling here. So you get that correctly.It's really, really easy to make a typo here.And then it won't work. This will get us theimage URL. And these ones are all set up inthis file here. Let's call config. They areset up as per instructions from the MovieDatabase API. You can see the image base URLis this URL here. So that's the one and thenI set the backdrop size. You can change thissize if you want and try it here. You canmake them smaller, and you can set them tothe original size. I set them to width 1280in this case. So that's what I'm grabbinghere. And I'm generating the string here bymerging them together in this template literalhere. Right now we have the title. And weget that one from state auth results. Thefirst element and we have a property that'scalled original underscore title like this.And then we have the text yet again from stateresults. From the first element, you couldalso break this out in its own variable ifyou don't want to type this in every time.So there's probably been a lot of things youcan optimize in this application. But as thisis a beginner slash intermediate course, Idon't want to do a lot of stuff like this,because it will only take time. And it willbe confusing with all the other stuff goingon. So we have a property here, that's calledoverview. And these are, of course, all fromthe Movie Database API is nothing that I havecreated. These are named like this from theMovie Database API. All right, do some autoformatting. So you can see here I send inthree props, image, title, and text. And theseare the ones that I destructed out in thiscomponent itself. So when you want to givea prop two a component, you do it like this,you named the Prop, and then you give it thevalue. And then you can grab those props insideof this component. So save the file, go backto the browser, and you can see that we can'tsee anything yet. But if I mark it here, youcan see that we have the text. But we don'tactually have set any styling for this oneyet. So that's what we're going to do in thenext video. And then we'll hopefully see thisnice little hero image in our application.It's time to create the styles for the herocomponent. So move back inside of the codeeditor, and the file that's called hero imagedot style dot j s that we created in the lastvideo. So we have all these components here,and just give it some space here. And we'regoing to start with a wrapper, and to thewrapper, we send in a prop. If you rememberthis one here, you can see we have this imageprop here. So just as we do with regular component,we can send him props to style component.And this is something that is super greatwith style components. Because this way, wecan do some stuff with a CSS. And in our case,we want to set a background image, the usualway you did that back in the days was thatyou had to create some inline CSS when youhad a dynamic image. And you didn't know fromthe beginning where it came from, or whatdidn't what his name was, you had to set itwith an inline styling on the element itselfin the HTML. But in this case, we can do itmuch, much cleaner and sending a prop to thiscomponent. And we set the image here. Andalso we're going to create if you look hereat the finished application. I don't knowif you see it now. But there's a slight littlegradient down here also, because I want thistext to be able to be seen on any differentbackground. That's why I have a dark littlegradient below this text here. So that's whatwe're also going to create. So in the repplecomponent, we have this div that we stylinghere with style components. So we have thebackground. And we're going to set a lineargradient first linear gradient, parenthesis,and is going to go to bottom RGB a and I usethis because I want to set the alpha value0000. And these values are auto generatedfrom somewhere on the internet, I usuallydo that when I create gradients, it's so easyto just go there and type in your gradientand it will give you the code. So that's whyall these values may seem a little bit odd.This one is 39%. And the RGBA is going tobe 0000 again, and 41%, rgba, 000 and 0.65.That's the alpha value. And I see you knowthat this one shouldn't even need to haveto have these ones here. I think actually,I can remove this one here. We don't needthat one. And then we said 100%. And justafter the parenthesis, the end parenthesis,we have a comma. And then we specify the URL.And now we can grab that prop that was sentin here. And you do that as this is a templateliteral, just as before we use dollar signin curly brackets, and we can grab those props,you create an inline function and this onewill get called with the props. And from theprops, we grab the image and if you want todestructure amount, you can do that also here,then you have a parenthesis and then holdthe object. Then we restructure the image.And we do it like this. Right. Now we havea coma from the variable, regret dot Ray.And hopefully this will work. Do some autoformatting and save it go back to the browser.And you can see that we actually had the imagehere but we haven't set any other properties.So that's why it will look like this. So let'sgo back here and we're going to set the backgroundOn size 100% and cover, we're going to setthe background position to center the heightis going to be six 600 pixels. position isgoing to be relative, because we're goingto absolute position or text. So that's whywe have to set this to relative. And we'realso going to have a slight animation on thisone. So I set an animation that are goingto call animate hero image, and is going tobe for one second. If we look at the finishedhere, you can see that it kind of fades up.So that's the animation that I'm going tocreate. And I do that below here. And nestedinside of here. So act keyframes, and thename is animate hero image. I go from Opacityis going to be zero to Opacity is going tobe one, save it, go back and see what we'vegot. There you have it, there's some littleborder up here. I don't know why. Let's seeif it's sort itself out when I create otherstyles. But you can see that it it animatesin here quite smoothly. So that's great. Alright,let's fix the other components. So we havethe content, padding is going to be 20 pixelson that one, we set a max width, and we grabbedfrom our variable max width. And Morgan isgoing to be zero in order to save it, let'scheck it out, you can see that it's in thecenter now. That's great. And that one removedthat nasty little border up there also, that'ssweet. Then we have the text. Let's createthat one also, I set the cell index 200. Justto place it on top, I set the max with the700 pixels on this text position is goingto be absolute. from bottom we're going toset it to 40 pixels and margin right is goingto be 20 pixels. The min height is going tobe 100 pixels. And the color is going to befrom the variables we have the white. Allright, so that's our text. And inside we havethe h1 tag. So for that one, I set the fontsize. And for more variables, we have font,super big camel casing. And then I'm goingto have a media query on this one media screen.And Max course I have to end this way to seemy colon max with 720 pixels. And I set thefont size to variable dash dash formed big,so I'm making it slightly smaller. Right,that's the h1. Then we have the p tag, it'sgonna have a font size. From the variables,we grab font med. That's the medium size.And then we have a media query media screenand you set the max with the 720 pixels. Forthat one, the font size is going to be a variablefont small. So this means of course, thatup until 720 pixels, we will use the formsmall otherwise it will use the font medium.And the same goes here, we use the font bigup until 720 pixels otherwise was used thefont super big. All right, then we're goingto have a media query on the text itself.So media screen and max width 720 pixels.And we set the max with 200%. And there maybe room for optimization in the CSS becauseI haven't put the most focus in the CSS forthis course, as this is a course in react.But I wanted to show you how to create theCSS also. So that's why I included it. Butthere are room for optimization I'm sure ofthat. Go back and see what we got in it. seemsto be working. Let's see what happens. Yeah,you can see it gets smaller. And that's great.Now, it's actually starting to get fun becausenow we see different stuff happening here,things are displaying on the screen. And that'swhat I like with front end development toactually see it's put together like this.Alright, in the next video, we're going tocreate the logic for the grid component. Sowe have our hero component, and the next componentwould be the actual search bar. But I'm goingto save that one for later. So we're goingto create this grid now instead, in this video.So let's start by creating a logic just asusual. And in the next video, we create thestyles, go back to the code editor. And insidethe components create a new folder, that'scalled grid. And inside the grid, create anew file that's called index dot j s. Andanother file is called grid dot styles dotj, s and capital G on the grid, of course,and just as before, we're going to be in thegrid dot styles dot j s first to create theplaceholders for the style components. Soimport styled from styled components, thenwe export the columns that we call wrapper.And as you can see here, this is great withstarter components, because I named them thesame, but it doesn't matter, they will bescoped to that component. So we can have thisexact same name. That's super sweet. So thestyles won't interfere with each other. Sostyle dot div, double backticks. And thenwe export const content, and that equals Astyled dot Dave, also n double backticks,save it and go inside of the index.js file.So we import react from react, hopefully you'restarting to learn is now so this will be inyour muscle memory later. Then we have thestyles, we import the wrapper, and the contentfrom dot forward slash grid styles. Then wecreate a component itself const grid equals,and I'm going to destructure or two propsthat we're going to send into this one. Soheader and children. I have an arrow function,and I'm going to do an implicit return. Andyou may wonder what children is. And thatis a default prop that we can use in react.When we nest stuff inside a component, theywill be accessible in the children prop. Sothat's great, I'm going to show you how thatworks in a second, we're going to have a wrapper.Then we have an h1 tag. And then I have curlybrackets because I'm going to grab the headerprop and display that here. Then we have thecontent. And for that one, I create anothercurly bracket, and I grab the children. Sothat means that whatever I wrap inside ofthis component, when I use it, I can displayit here by displaying the children, then weneed to export default grid like this andsave it. So this is pretty much it for thegrid component. If we go back to the home.jsfile, we can import it up here. Import gridfrom dot forward slash grid. And then justbelow here below the hero image, I'm goingto use the grid here. And this one is goingto get one prop is the header equals popularmovies. So inside the grid, I'm going to mapthrough all of the movies in the state. SoI have curly brackets and State DOT results.I map that's also a sixth syntax, we havea movie. In this inline function, I can makean implicit return. So I have parenthesis.And I use a lot of e6 syntax here as you cansee, and hopefully you know a bit about itbefore you start this course because it willbe too long of a course if I explain everylittle syntax in detail, but I try to explainsome stuff for you. And hopefully, you'lllearn a lot also from it. But the map methodis something you can use instead of a forloop. So use the map on the array, the resultsarray, and it will map to each item in thearray. We haven't created a thumbnail yet.So we're going to create a div. And I thinkwe have a property that's called title. SoI map through every movie and now I'm justgoing to show a div in the grid that showsus the movie title. Or format it save it goback to the application. And you can see thatwe have all the movies here so displayingthe title, and you can see that it also warnsus now each child in a list should have aunique key prop That's when we map throughthings, we have to market with a key alsootherwise, React will complain. React is usingthis internally to diff stuff and to optimizeitself. So we can set a key on this one. Andwe're going to give it the movie.id. So thisis a unique ID that we get from the MovieDatabase API, it's sometimes return two ofthe same movie, and this one will actuallygive a warning done. So it's some bug in theAPI, I think, because it should only returnone of each movie. So if it gives you a warning,it's probably that because it has probablyreturned more than one of the same movie.So you could actually add something else,you could add a random number, also to themovie ID if you have that problem. So let'sgo back to the application. And you can seethat it doesn't complain now. So now it'shappy, we have provided a unique key. Andthat's super great. And we have the titles,but it looks like crap. Now because we haven'tstyled it and we haven't created the thumbnailsyet. In the next video, we're going to stylethe grid itself, and then we're going to createthe thumbnails. So we have our grid, but wehave to style it also. And that's what we'regoing to do in this video. Move back to thecode editor and in the file that's calledgrid doc stars dot j s in the grid folder,we have already created this one here. Sowe're just going to fill them up with CSS.And also I can tell you, if you don't havethat plugin installed in Visual Studio code,I have a plugin that's called VS code dashstyle dash components. So that's the one that'screate this nice syntax highlighting insideof this style components. So that's a littletip if you haven't installed that one. Alright,so let's create the stars for the wrapper.First, we're going to set the max width fromour variable that's called max width. Thenwe set the margin to zero auto, that willcenter the div, and we give it some paddingzero and 20 pixels that's padding on the sides.And then we have the h1 tag, I'm going toset the color from the variable mid gray onthat one. And then also, I'm going to havea media query. So at media screen, and Maxdash with 768 pixels. And this one is goingto change the font size from the variablefont big. Alright, save it go back to thebrowser. And you can see that we have thisnice Morgan's here, but we haven't actuallycreated a grid yet. So that's what we're goingto do next. Inside the content component,we're going to display a grid. Then we setsomething that's called grid template columns,grid dash template dash columns, we're goingto set this one to repeat. And this is a littletrick you can use if you want to create aresponsive grid, so we repeat these columns,we set it to auto fill a coma, and then weuse the min max 200 pixels, that's the minimumwidth that those little thumbnails can have.And then we set it to one fragment, so wedon't specify an exact pixel width on themax value. And this is CSS Grid syntax. Andthe CSS Grid will probably require a completecourse on its own. So I'm not going to gothere. Grid gap, we're going to set that oneto two REM so that will give it some spacingbetween the rows and the columns, save it,go back to the browser, and you can see thatwe have our grid. So now it's showing us fiveitems on each row. If we do like this, youcan see that it is responsive. And that'ssuper great. That's a neat trick you can useif you have a grid like this, just with onerow in CSS Grid, you can make it fully responsive.So that is really, really cool, actually.And it works because we set this one to repeatthe columns, and we set it to autofill. Andthen we set a min and max value. So we'retelling it when it's 200 pixels wide, it can'tgo lower. So then it removes one column instead.And it's going to do that all the way downto the mobile devices. All right, that's thestyling for the grid. It was pretty fast.I think. In the next video, we're going tostart creating the thumbnails. We have thegrid now, but we haven't created the thumbnailsfor the movies. So that's what we're goingto do next. Move back inside of the code editorand inside the components folder, create anew folder that you call thumb, capital Tinside of that folder, you create a new filethat's called index dot j s. And then youcreate another file that's called thumb dotstyles, dot j s, I hope you're beginning tosee the pattern here on how I structure thecomponents. So first, we're going to startin the thumb dot style dot j s, just as before.So we import styled from styled components.And for this one, we're only gonna have onecomponent. So export const. Image capitalized.And this one is going to be styled dot IMGbecause we styling the image here. Right,save it and go back to the index.js file orthe thumb. So first, we import react fromreact. Then we mark it with styles an importimage from dot forward slash thumb styles.We're going to import some more stuff herelater, because these thumbnails are goingto be clickable, we're going to create thatlater when we have set up the routing, andalso started to create our movie page. Sofor now, we create our thumb component, costthumb equals, I'm going to destructure outan image prop movie ID and clickable, I makean implicit return on this one, because I'monly going to return JSX. For this one, I'mgoing to have a wrapping div, like this. Andthen we're going to use this prop to tellif it's clickable or not. And then we're goingto have a ternary operator here. But for now,we're just going to return an image. That'sthe image that we created here. The sourceis going to be wrong the image prop. Ericis that an old of movie thumb on that one.With self, close it. And then down below here,we export default, some save the file, thenwe're going to go back to the home componentand also import this one. So up here, importsome from dot forward slash thumb. Alright,and below here, where we map through all ofthe movies, we're going to use a thumb insteadof this div, remove this one here, and weuse the sum, then we're gonna have a key forthis one also, because we always need to havea key when we are mapping through componentslike this and display them. So the key isgoing to be just as before the movie.id we'regoing to set it to clickable, that's goingto be true, it's always default to true. Soyou don't have to do this, if you want toset it to true. For now that one isn't working,because we didn't utilize it in the componentitself. But we're going to fix that later.Then we have the image prop and we're goingto give it the URL to the image. And for thisone, we're also going to use that fallbackimage if we don't have any image for the movie.So we're gonna have a taller operator here,movie dot poster underscore path. So we'rechecking if we have imposed a path if we don'thave that we're going to display the fallbackimage. But if we have this path, we know thatwe can grab that image. So we have a questionmark. I'm typing it on another row here, butit's the regular ternary operator. Then wehave the image base URL. And I'm actuallygoing to show you the other way now not doit like this here. But you can do it the oldway with plus, instead, where the poster size,and then we have the movie dot poster path,movie dot poster underscore path. Be verycareful with the spelling, it's very easyto make a little typo here. And that willbreak everything. Alright, so that is whenwe have a poster path, then we have the colon.And we're going to display the no image ifwe don't have a poster path. So that's theimage, then we're going to send in the movieID. And that is because when we click on athumbnail, we need to have the movie ID forthat thumbnail. So we know what movie to graband display on the individual movie page.So movie.id and then we're going to closethe thumb component. So be very careful here.It's a little bit nested. And it's very easyto type something wrong here. But this shouldbe right i think i really hope so. I saveit back to the browser. And as you can seewe have the thumbnails but it doesn't lookright. And that's because I haven't styledthem yet. But at least we display something.So in the next video, we're going to startthe thumbnails some to make it look somethinglike this instead. Really pretty modern. Ihope Okay, we soon have a grid with nice littlethumbnails, we just have to style the thumbcomponent itself. Inside the thumbnail stylesdot j s, we already created this one, we'regoing to style it inside of the image stylecomponent. So we're going to set the widthto 100%. The max width is going to be 720pixels, transition, all 0.3 seconds. And thatis because I want some nice transition onhover. Objects object dash fit is going tobe cover border dash radius is going to be20 pixels. And the cover here will centerthe image and make it fit nicely into thethumbnail. So that's a really handy littlerule you can use in CSS for stuff like that.I also got to have an animation on this onebecause I want it to fade up, we can actuallylook at that in the finished application.You know, you can see here that these thumbnailsare also fading up just as the hero image.That's what I wanted animation for. So I callit animate thumb. 0.5 seconds. So we're goingto create that animation. So add keyframesand animate them. Right from a set the opacityto 02. It's going to be opacity one, that'sthe animation. And then I also want to setthe hover effect. So colon hover like this.And I said to pacity to 0.8, there's an autoformatting and save it back to the application.And as you can see, it's looking great. Sothat's nice, it's working, it's starting tolook like something, we can compare it tothis one here, and it looks exactly the samewithout the search bar. So we have a few thingsleft to do, we have to create the spinneralso when we loading and the search bar andthe bottom for loading more. In the next video,we're actually going to create the spinnercomponent. So we have that ready when we wantto show it when we're fetching more. Okay,we have our hero image on our grid. So we'regoing to create the spinner in this video.Back inside of the code editor and the componentsfolder, and inside a components folder, createa new folder that we call spinner. And thenwe create a file, let's call index dot j sand another file. Let's call spinner dot styles,dot j s, it's been beginning to be a littlebit repetitive here. But as I said so manytimes before now is always great to repeatstuff when you learn it. So even if it's boring,it's better to repeat it, because then itwill be in your muscle memory later. So that'swhy I repeat a lot of stuff also in this course.And this one is a little bit special actuallybecause we have the component itself in theindex.js file, but the component is reallyjust going to be a styled component. So inthis index.js file, we're just going to importthe start component in this file. So we cancreate this actually in this video and thenwe import it and then it will be finished.So in the spinner.styles.js file, we importstyled from styled components. We export aconst that we named spinner, and it equalsA styled dot div double backticks and insidethe backticks we write our CSS, we set theborder to five pixels solid. And we have thevariable of light gray. We set the borderdash top to five pixels solid with a variabledash dash med gray. We set the border dashradius to 50% because this one is going tobe a circle so that's why the width is goingto be 50 pixels and the height is also goingto be 50 pixels. We have an animation on thisone also. We call it spin 0.8 seconds is goingto be a linear animation and is going to beinfinite. That was at the Morgan 220 pixels.All right, then we create an animation atkeyframes. Spin we go from 0% Transform. werotated Cyril degree, here, I'm using PreSonusdata. So you can use whatever you want. Wedidn't do that in the thumb styles I'm usingfrom two in that one instead. So I like tochange stuff a little bit when I create courseslike this so that you see that you can createit in many different ways. So here, I'm usingpercent instead. And it should say, transform,not Transform, transform, and rotate zerodegrees, and it will see my colon. And thenwe go to 100%. And the transform is goingto be rotate 360 degrees, some auto formatting,and save it. Then we go back to the index.jsfile in the spinner folder. And for this one,we just import the spinner that we createda style component. So from dot forward slashspinner dot styles. And then we export it,export default spinner. So that's it for thiscomponent, we can actually see if it worksalso. So go back to the home page home.js,we import it first here. Imports spinner fromdot forward slash spinner. Alright, and thenhere just below the grid, we can place thespinner and also a soy, we don't actuallyneed the use state and use effect here moreso we can delete those ones also save thefile, go back to the browser. And as you cansee, just below here, it's spinning like crazy.And of course, it's only going to be shownwhen we fetch data from the API. But for now,we're showing it all the time, but we're goingto fix that later. So that's how you createa really simple spinner with some CSS andstyle components in react. In the next video,we're going to start creating the search bar.So we created a grid with a thumbs and wehave our hero image and we want to createour search bar. Next, if we look at the searchbar in the finished application, we can seethat we have this nice little icon here andI created this myself, first I had an iconfrom Font Awesome. But then I thought maybewe shouldn't import the whole Font Awesomelibrary just to have one outcome. So that'swhy I created an SVG image instead. And thenit says search movie, and then we can typein something to search for in here. So thisis how it works. So let's go back to our code.And inside a component folder, create a newfolder, that's called search bar, capitalS, capital B. And inside of that folder, youprobably guessed it, we create a file, let'scall it index dot j s, and a file that's calledsearch bar dot styles. dot j s. And we doas we always do, we're going to be in thesearch bar dot styles dot j s, and we're goingto scaffold out the style components importstyle, from style components, then we exporta const, called wrapper. And he's going toequal a style of theme. And we have doublebackticks. And we export, not triple backticksdouble backticks and a semi colon, then weexport the course that called content. It'sgoing to equal style dot div, double backticksand a semi colon, save it go back to the index.jsin the search bar folder, we import reactcoma, we're also going to import a few otherstuff here, we're going to need to use statewe're going to need to use effect. And we'realso going to need to use ref this one. Andwe import it from react. So why do I needthese things? Well, the state we're goingto use to create what's called a control component.And that means that we're going to have ourinput field but it's going to be controlledby react, the input field is going to be basedon the value in the state. We're going touse the use effect to trigger when this localstate changes. And then we're going to updatethe search term so that it will fetch newmovies from the API. And use ref is goingto be used to show you a little trick thatwe can use if we don't want to do somethingin the use effect on the initial render. Sothen we're going to import the image that'sgoing to be that little icon I showed you.So import search icon, camel casing from dotdot forward slash dot forward slash again,images and we have something that's calledsearch dash icon dot SVG. Don't miss the fileextension there. Then we have the styles,the import, curly brackets, wrapper and contentfrom dot forward slash sport dot styles. Allright, so that's our imports. And then wecreate a component const search bar, capitalS capital V equals, and we're going to destructureout the prop that's going to be set searchterm camel cased by a narrow. Now for thisone, we're going to make an explicit returnbecause we want to have some logic in it.So we have a return statement, parenthesis.Now we have our wrapper. And inside a wrapper,we're going to have our content like this.So the first thing we need is the icon andit's going to be an image. So image SRC isgoing to be the search icon. We can set anauthor on that one, also search dash iconwith self, close it like this, just a regularimg tag, then we're going to have an inputfield. And it's going to be a type text. We'regoing to have a placeholder. Let's go goingto be searched movie. And then we're goingto have an on change handler and value. Butfor now, I'm just going to surf close this.And to do some auto formatting and exportthis component, export default search bar.And then we're going to import it in the homecomponent just to see that we got somethinghere. So go back to the home, and close allthis, go back to the home. And just belowthe hero image, we're going to place thatcomponent But first, we need to import it.So import search bar from dot forward slashsearch bar right down below the hero imagejust above the grid, we can place a searchbar, save it go back to the browser. And youcan see that we have our input field here.But we haven't started yet, of course. Sohopefully it's gonna look something like this,when we're finished, go back to the code andthe search bar in index.js file, we're goingto make this what's called a controlled component,a controlled component in react is a componentthat react control. So the input value isgoing to be based on a state that we create.And when that state changes, it also changesthe value in the input box. And this is greatbecause then we know that our state is insync with the actual value in the input field.We create a state of here const, we can callit state and set state equals use state. Andit's going to be an empty string for stores.On our input field, it's all formatted themlike this, I want to have them like this,instead, we're gonna have an on change handlerequals, and for this one, I want to createan inline function, you could also createa function up here for that one if you wantto do that instead. But I want to show youhow to do things differently. So in this case,I created an inline function, we have theevent, or you can just type in E, for example,you can name it whatever you want, then weset the state with the event dot turn targetdot value, and this will give us the valuein the input field. And we need to have thisinline function as we are actually invokingthis function here with that value, otherwise,it won't work. So by having this inline function,we can provide this one with value. So that'swhy you have this inline function. Otherwise,it will run this function instantly. And that'sno good. So if we, for example, had a functionthat we didn't want to send in some argumentsto that we just want to trigger on change,we can have it like this instead. And thatwill work but in this case, we want to sendin the argument or the current value. So that'swhy we have this inline function. Alright,so that's the unchanged and then we set thevalue to the state. And there we have successfullycreated a control component. We can see ifit works, go back to the browser, type somethingin and you can see the value here now is controlledby react. As soon as we set this value tosome state value here, we are making thisa control component. And every time it changes,it's going to trigger reset state and it getsthe value here and replace the value fromthe text input. In the state, and then thevalue is displayed in the textbox itself.So it's kind of a closed circle here on howthings work. It goes around in this way. Nowwe have our input field, but we want somethingto happen. Also, we want to set the searchterm that we're going to create in our hookthat we created before. So we actually goingto create a new state inside of use home fetch.So up here in the US home fetch hook, we'regoing to create a cost, call it search termcapital T, and set search term, then it'sgoing to equal use state. And we'll set itas an empty string initially, then we alsoneed to export this one. So export it downhere. And we only need a setter for this one.So we can export the set search term likethis, save the file, go back to the home.js.And up here, where we where we use or usehome fetch hooked, we can destructure outthe set search search term, the set searchterm arrived. And this one is going to bethe prop for our search bar. So I'm goingto call this prop set search term also. Youcan call it whatever you want. And then Igive it to set search term. So this way, wepass this along down to our component to thesearch bar, so that we can use it in the searchbar. So when this one triggers when we setthe search term is going to trigger here.So actually changing the state in our hookhere. That's exactly what we want, becausethen we can use it in our hook when we fetchstuff. But in this case, we want to have aslight delay when the user types somethingin before it tries to fetch the data, we canlook here in the finished application, youcan see when I type something in here, thatI have a slight delay, otherwise, it wouldn'tbe a good user experience if it just instantlystarted to fetch data. So that's why I doit this way instead, otherwise, we could haveused this state to actually fetch the data.But in our case, we want a slight delay. Andthen we set the search term that we're goingto use for fetching. So that's why I havedual states for this one. So let's createa use effect in the search bar use effect.We have an inline arrow function just as before.And we have the dependency array. And we'regoing to fill it out in a second. I'm goingto show you how to create a timeout in reactnow and how we can use it in a use effect.So first we create a timer. We use the settimeout that's built in JavaScript, we havean inline function for that one. And thenwe're going to call the set search term. That'sthe one that we created. And we're going togive it the state like this. And I'm goingto set it to half a second, that's 400 milliseconds.So this one will trigger after 500 milliseconds.If you want some other value, you can of coursetype that in instead. And you can see herenow that it instantly complains, because wehaven't specified this as a dependency. Sowe specify and set search term as a dependency.And it also complains, because it needs thestate, that's also dependency to this useeffect. So this linting rules are actuallyreally good. It tells us stuff so that itis so that we actually do this correctly.And we should always specify the dependenciesand handle it inside of the use effect ifwe need to. Alright, but there's one moreimportant thing we have to do with the timer.And that is declared a timer on each render,because otherwise, it will just create a lotof timers. And that's no good. And there'sa handy little thing with the use effect thatwe can use for this. Because if we returna function in the use effect, so every timebefore a new render, it will trigger thisfunction. So we can clear our timeout insideof that function. And this will take careof that we clean up this timer. So we don'thave a lot of timers that just ticks in thebackground. And you can imagine you have alot of stuff that you want to do maybe toclean up stuff. So you can always do thatin a return function with the use effect.This one doesn't trigger until this renderhas finished and is going to render again.So that is sweet. We can say this one. Andwe can actually go back to the use on fetch.And up here. We can console log the searchterm, so we can see that something is happening.So go back to the application again. Yeah,I have a typo somewhere. Maybe I didn't savethe home. Save go back to the browser. Yeah,no, it's worse. You can see it's really importantto save your files because it will break otherwise,be sure to save all the files. So if I typein test, and you can see here after 500 millisecondit will trigger. So that's sweet. We knowthat that is working and we Use this to fetchdata from the API. But there are one morething I want to do. And I promised you toshow you a little trick with the use ref.And that is because the use effect alwaystrigger on the initial render, and we don'twant to trigger a fetch. When this componentmounts, we only want it to trigger when theuser has typed something in. So that's whyI'm going to create a cost that's called initialup here. And I'm going to use ref. And I setit to true. So when we call the use ref hook,this one will create a mutable value for usthat you can compare to something similaras a mutable variable. So we have this initialconst, and the actual value is going to bein the initial dot current, that propertywill hold the value true right now. So I setis the true and inside the use effect, I'mgoing to check if initial dot current, that'sgoing to be the true value right now, if itis true, in it, it should say initial, likethis, right? Then I instantly going to setthe initial dot current to false. And youcan see here, I can mutate this variable directly,I don't have to have a setter for this one,because this one won't trigger a rerender.That's the biggest difference from a statethat when you use ref, it won't trigger arerender. And then if this one is true, weknow that this is the initial render, andthen I'll just return, we don't do anythingmore inside of the use effect. And we setit to false. So next time, this one triggers,this one is going to be false. And it's goingto run our logic. So this is how you can createa neat little code snippet here, to skip theinitial render in the use effect, save thefile, just make sure that it works. Yeah,and it seems to be working. We've learnedhow to create a control component in react,and the component controls the input fieldwith the state. So the input field alwayshas the same value as the state and that'sthe control component or state is synced withthe input field. And then we created a timerthat will trigger each half a second and callthis set search term to set the stay there.And the state is going to be the value fromthe input field. And we also pass this onealong from the US home fetch. So that's howyou pass data down to your components. That'swhat props are for, you can pass data downto your component, and we can use it in thatcomponent. And that means that we also havethis value in our use home fetch hook to usethe fetch data later, that can remove thisconsole log for now, save the file, and thiswill be it actually for the search bar. Inthe next video, we're going to style the searchbar. And then we're going to create the logicfor fetching the data. were created our searchinput field, but it doesn't look good. Sowe have to style it also. And that's whatwe're going to do now. So in our search bardot styles file, we're going to create thewrapper first. And I'm going to display itas a flex. I'm going to align items center.Now not aligned a line I set the height 200pixels. The background is going to be fromthe variables, we have the dark gray. AndI'm going to give it some padding on the sides,zero and 20 pixels, do some more formatting,save it go back to the browser. And you cansee that we have the search bar here. Andnow we have to style kind of the inner partof the search bar. And we do that in the content.Inside the content, I'm going to set the positionto relative because we want to place the iconwith an absolute position. The max width isgoing to be from the variables we have ourmax width, the width is going to be 100%.The height is going to be 55 pixels, the backgroundis going to be from the variables met gray.And Morgan is going to be zero in order. Andthe border dash radius is going to be fourpixels and the color from the variables wehave our white. Save it go back and see whatwe've got so far. So we have this inner partnow of the of the search bar to add the styleicon and the search bar input field itself.So inside the content, we're going to nestsome stuff here we have our icon that's theIMG I set the position to absolute. And thisis why I use relative appear, otherwise itwon't work. So it needs to be relative tothe actual content div is going to be left15 pixels. So 14 pixels, and will is goingto be 30 pixels, save it go back. And nowit seems to align correctly and it also hasthe correct size. Great. Then we have theinput field itself. So down below the IMGtype in input, we set the font size to 20pixels in this one position is going to beabsolute left is zero, margin is eight pixels.And zero padding is going to be 000 and 60pixels. border is zero, the width is goingto be 95%. The background is going to be transparent.The height is going to be 40 pixels. And thecolor is from the variables and is going tobe white. So go back to the browser. And youcan see that it works now but we have thisnasty little outline, you shouldn't removethe outlines, actually, but in this case,I think it's fair to do it because it doesn'tlook good. So I'm going to remove them. Soinside the input, I'm going to nest focus.And I'm going to remove the outline, I setit to none. And hopefully that will removeit. Yeah, you can see it removed. Now. Onething you can do also, if you want is to stylethis for mobile devices, maybe make it a littlebit less insight in font size, and stuff likethat, if you want to really fine tune it here,but it seems to be working now. All right,and that's it for the search bar. That's thestyle for the search bar. In the next video,we're actually going to hook this up to theAPI and fetch some data. We've created oursearch functionality on our search bar, butwe can't really search for anything. Yep.So if we type something in, we just get thisconsole log here. So we're going to implementthe actual functionality where we fetch thesearch data from the API. Let's go back insideof the code editor. And we're going to bein the use home fetch hooked. And down here,where we say initial render, we're going tochange this one to initial and search likethis, because we're going to use this useeffect both for the initial render and thesearch. And it's actually pretty easy, becausenow we just have this empty dependency array,meaning that we only trigger this use effectonce on Mount. But we also want to triggerthis one each time to use the search for something.And up here we have our search term. And inthis one, we're going to store what the usertyped in in the search bar. And that meansthat we want to trigger the use effect whenthe search term changes down here in the dependencyarray, we specify a search term, meaning thatthis use effect will trigger each time thesearch term changes, and it will also triggerone time on Mount. So we can actually usethis one for the initial setting also. Becausewhen we search for something, we always wantto fetch the first page just as we do on theinitial amount. So that's fine, we're fetchingthe page one. But we also want to providethe search term. And that's also fine forthe initial fetching, because the search termis going to be an empty string. So we knowthat we're fetching the most popular movies,because we're not specifying any search term.There's one more thing though, that we haveto do, and that is to wipe out the old statebefore we make a new search, because we wantto wipe it out and then make a search, showthe loading spinner and then show the newmovies that we grabbed from the search. Sowe can set state to the initial state here,and that will wipe out the state. And that'sreally all there is to it. So we say thisfile, go back to our application, we try tosearch for something. And you can see thatit works. Now this one changes because thisone will always grab the first element inthe array of movies. And that's fine. Actually,you can have it like this if you want, butI want to remove this hero image when we'rein a search. We can do that also to go backto our code. And then inside of the home.js.Down below here where we show the hero image.We can also specify that we don't want toshow this one if we have a search term, sonot search term, double ampersand so now we'rechecking that we don't have a search termand also that we actually have a first elementin the array. or movies. But you can see thatyou won't see her now. And that's becausewe haven't exported this one from our hooked.So go back to the hooked. And down below here,we can export this one also search term likethis, save the hook, go back to the home notice,and up here where we destructure out everythingfrom the hood, we can also destructure outthe search term like this, save the file,go back to our application, we tried to searchagain. And now you can see that it disappears.This is exactly what I want. If you want tokeep the hero image, you don't have to dothis. And then it reappears when we don'thave anything in the search bar. All right,there's one small thing that I also want todo, and that is in the home.js. And if welook down below here, where we have the grid,I'm going to create a ternary operator nowbecause now it says popular movies, even whenwe're in a search. So this one, I'm goingto create a curly bracket and also curly brackethere at the end, and then I check if I havea search term, I have a question mark. Andif we have a search term, I create a stringI wanted to say, search result. And if we'renot in a search, it's gonna say popular movies.So if we have a search term, it's gonna returnwhat's the right to the question mark, andthat search result. Otherwise, it's goingto return popular movies, save the file, goback to the application. This time, I'm goingto search for Indiana Jones. And now you cansee that the header on the grid changes. Sothat's great. It says search results. AndI remove this and it says popular movies.So that's our search, we have implementedall the logic for the search bar. And in thenext video, we're going to start trading theLoad More button. Okay, let's start creatinga button that will go at the bottom here.And the spinner will not show all the time,it will only show when we loading stuff backin the code. And inside the components createa new folder that's called baronne capitalV. And you guessed it, we create a new file,let's call index dot j s. And we create anotherfile that's called Baran dot styles dot js. And we're going to be in that file andimport styled bomb style components. And forthis one, we only going to have one stylecomponent. So we export const. And it's goingto be a wrapper equals a style dot buttonin this case, and double backticks Auto formatit and save it and then we go back to theindex.js file. And we're going to create abottom. So we import react from react. Thenwe have our styles, we import the wrapperthat we created wrapper from dot forward slashbuttons and dot styles. Right, now we haveour component const bottom. Then I just structuretwo props. One is called text and one is calledcallback. And I create an error and I makean implicit return on this one. I'm goingto add the rapper is going to be type button.And it's going to have an onClick handler.And it's going to be the callback that wassent in as a prop. And then I'm going to displaythe text inside of the bottom. So this isa button that we created as a start componentand call it wrapper. And it's going to triggera callback function when the user clicks onthe button, and then we show the text we cansend in what text we want to this button.If we want to reuse it, then we export default,bottom, save it, then we go back inside ofthe home component. And at the top, we'regoing to import bottom from dot forward slashbottom. And then at the end over JSX, we'regoing to show the bottom. And we have to thinkabout this because we don't want to show thebottom if we read the last page of movies.So we have to take that one into consideration.So just below the spinner here, I'm goingto use the curly bracket and create a JavaScriptexpression, we're going to check from theState DOT page. If that one is less than StateDOT total underscore pages, we know that we'restill not on the last page. And I have a doubleampersand make a short circuit here. I alsowant to check so that we're not loading anything.So if not loading, and then I have anotherpair of ampersands. And I have a parenthesis,put it on a new road just to make it a littlebit more readable. And then I'm going to showmy bottom. So the text is going to be loadmore. And for now I'm not giving it the callback.This is it for now. So this statement willcheck if the page we're currently on is lessthan the total pages. And then we know thatwe still want to show the Load More button.And it will also check that we're not loadinganything because when we loading something,we want to show the spinner instead. And wehave the spinner here. So we can actuallycreate another statement here, the creatorcurly bracket, and type in loading and doubleampersand, and we end it with another curlybracket like this. So this will show the spinnerif the loading is set to true. And if it'sset to false, it will not display the spinner,but then it will display the button instead.If we go back to the application, we can seethe button down below here in the corner.But it doesn't look right, we have decidedalso to look like this here. And that's whatwe're going to do in the next video. We haveour ugly little button here down at the corner,so it's time to style it, go back to the code,and inside of button dot styles dot j s fileand we have the wrapper here, we're goingto give it some nice little style here, westart by displaying it as blocked displayblock, we set the background. For more variables,we have the dark gray, we set the width to25%. The min width is going to be 200 pixels,the height is going to be 60 pixels. The borderdash radius is going to be 30 pixels. Andthe color is from the variables dash dashwhite, the border is going to reset to zero,the font size is going to be from the variablesfont big Morgan is going to be 20 pixels andauto transition is going to be all 0.3 seconds.I'm lazy here I can set it just the propertydata wants to have a transition, but I saidit all outline is going to be none. And thecursor is going to be pointer, then I wanta little hover effect all sorts of over aset of pacity to 0.8. That's why I had thistransition here. Also, I just want to checkalso, the font sizes here. Font big. Maybewe can use this one instead on the stylesfor the search bar because I think I have.Yeah, I have the font size, or 20 pixels,we can use the variable instead variable onbig and see how it looks. Yeah, I think thatlooks nice. Actually, we can use that oneinstead. But let's check out the button. Yeah,you can see that it works. It looks great.Now, we only have to create a logic footerbutton now when so that we actually can loadmore movies. So that's what we're going todo in the next video. This is actually thelast video for the homepage. So we're goingto create the fetching logic for loading moremovies. And we're going to start in the UShome fetch hook that we have in our hooksfolder. And we're going to start by creatinga new state. So this is going to work in away that we have a state with a kind of aflag that was set to true or false. And weset that one to true when we click on a button.And then we're going to trigger reuse effect.Because as I said before, I think this isgreat practice with the use effect hook andalso the state hooks. So you could do thisin other ways also. But this is a quite neatway of doing it we have this state that wasset to true or false. And when it changes,we trigger that use effect. And then we cantrigger to load more movies, we first createthe state const is loading more camel casingas always. And then we have the setters setis loading more, it's going to equal and wecall the use state hook we set it to falseinitially. And this one is going to be triggeredfrom the button itself. So we have to exportit down here also. So after the set searchterm, we can export set is loading more. Sothere you have it, I removed the sidebar,so we can see the complete row here. Now we'reexporting six of those. So that's our state.So we can go back to the home.js file. Andhere we have our button but we first needto destructure out the set is loading moreset is loading more. There's some auto formatting,and it will clean it up for us a little bit.So we just structure that one also. And thatmeans that we can use it in this component.And one thing that we also didn't do is toactually check if we have an error so we cando that before the return statement here.If error We can return a div that says somethingwent wrong. Like that. And that will makesure that if we get too narrow, we won't displayeverything here, we will display this errormessage instead of. So you can create a moresophisticated stuff here, if you want to dothat. In our case, I think it's enough forthis course. Alright, so let's move on tothis set is loading more. So we have our buttondown below here. And we already created acallback prop. So we give it the callbackprop curly brackets, and this one is goingto have an inline arrow function. BecauseI want to call this one with an argument setis loading more. Yeah, I'm going to removethe sidebar set is loading more, and we'regoing to set it to true like this. So thiswill change this state when we click the bottom.And if we check out the application, we won'tactually be able to see anything. Now, youcan see that it renders when we click thebottom because it costs logs this out, sowe know that it's working. And one great thingto know that is that if I click a few moretimes here, you can see that it don't rerenderanymore. And that is because we're givingit the same value. So react won't update thestate if it gets the same value. So it's goodto know that with react, if you give it thesame state value, it won't rerender it. Soreact is kind of smart, it already knows thatit has the same value. So it won't do anything,a quick little pro tip in react. Alright,so we know that the button is working. Sowe move back to the use home fetch hook. Andwe're going to create another use effect downhere. below the search use effect, I'm goingto mark it with load more. So just as beforeI create another use effect, an inline arrowfunction, and we have the dependency array.And we want this to trigger when the is loadmore is changing. So it's load loading morelike this. And the thing is that we only wantthis use effect to trigger when we actuallyis loading more. So if not, is loading moreif this one is false, we're just going toreturn we don't want to do anything else inthis use effect. This one should only do somethingwhen we load more movies. And what we wantto do now is to call or fetch movies functionagain. In this time, we want to give it aState DOT page, plus one because we want toload the next page. And we also give it asearch term if we're in a search. And nowyou can see that it was associated becauseit wants a few other dependencies, it tellsus that we need to specify the search termand the State DOT page. That's what we'regoing to do the search term and the StateDOT page. And now it will be happy at us.And that is because these ones are outsideof the use effect. So we should always specifydependencies in the dependency array. Andwe should handle them inside of the use effecthook. If there's something we don't want todo when something change, we should accountfor that inside of this use effect. So wefetching movies, and then we set is loadingmore to false. Do some more formatting andsave it. And hopefully this should work. Sowe have the use effect of triggers. When wechange the is loading more Boolean. If we'renot loading more, we will just return we don'tdo anything else in this effect. Otherwise,we call the fetch movies function. And wegive it the next page that we want to fetch.And we also give it a search term. And thenwe set it slowly more to force again so thatwe go back to what it was before. And thenwe can do it all over again, if we want toclick the Load More button again, save itand go back to the browser and see if thisworks. We click the load more. And as youcan see, it works. And I love when stuff justworks. And you can see that our loading spinneris showing showing up also. It's fast, sowe can't hardly see it, but it's there. Soit's working. And we can also see in the console,here we are at page 11. And we have 220 resultsnow. So that's great. We know that load moreis working. We can also try it out so thatit works when we search for something. Andit does. So that's sweet. I'm happy with this.Hope you like it too. You can see also thosethose images, some of them has some strangeproportions. So if you want you can tweakthe CSS to take that into account also. Inthe next video, we're going to start creatingour routes for application. We're going tostart creating the routing for our application.And before we do that, I just want to talkshortly about react router. Especially theversion six that we're using. It's not officiallyreleased when I record this tutorial. So hopefullyit released now, when you watch this tutorial,because it is, as they say, here, it's aroundthe corner. And I actually talked to thisguy, Michael Jackson here on Twitter. Andhe said that I should use this version inmy course, because it's that stable now, andit's not going to change that much. And we'renot going to use all the advanced functionalityin the router itself. So that's why we installedthe next version of react router when we installthe dependencies for this application. Andthere are a few changes in it if you compareit to version five. And I actually don't wantto talk about version five, because that willsoon be deprecated. So just wanted to mentionwhy I chose to use the version six of theReact router, because this is the future version.And it has the API that is going to be usedfor a long time, hopefully, in the future.So that's why I use it. In this tutorial,I want to make sure that this tutorial usesthe latest stuff, so that you know that you'reup to date on the things that you learn. Sothat's why so just a few words, words hereyou can compare, for example, they brag herewith a react router, version five, that thebundle size is 20.4 kilobytes minified. Andthe version six is only going to be 8.5 kilobytesminified. So if you care a lot about sizeon your packages, this one is drasticallysmaller than the version five. And then theyalso show you some stuff here on how you usethe router. But that's what I'm going to showyou in the next video. But if you want toread more about this one here, you can goto react training.com forward slash blog forwardslash react dash router dash version six dashpri, forward slash. And then you can readmore about it or just google react routerversion six, and you will probably find alot of information about it if you want toread more about it. So let's get started.We're going to create the routing in the nextvideo. We're finished the home page and wehave our application here. And we have thisnice little grid with all the movies, butwe can't actually click on them to view amovie. And we can't click on the logo up here.So we have to fix that. And we're going todo that by creating some routes for our application.So the first thing we're going to do is ifwe go back to the code, we're going to createtwo more components inside a components folder,we're going to create a new file that callednot found dot j s, and also not a file that'scalled movie dot j s, capital M on movie andcapital and capital F are not found. So we'rejust going to scaffold This one's out. Sowe have something to route to. If we're inthe movie.js file, we import react from react,then I create a component are called moviethat is going to be an arrow function. AndI'm just going to return a div that says movie.And now export default movie, do some moreformatting and save it always save your files.Alright, then I copy this one. And I go insideof the notfound file that we just created.I paste it in and I change this one, I'm goingto share them in one go not found like thisand save it. And there you have it we havetwo components to play with. And this one,the movie dot j s is going to be the individualmovie component for showing the movie. Sowe're going to be working a lot in this componentlater. This one is going to be a series I'mnot going to create a fancy and not foundcomponent. So you can do some stuff on yourown in this one if you want to do that. Sowe scaffold out two components. And then wecan move inside the app.js file that you findin the src folder not in the components folder.So app.js. And the first thing we have todo is to actually import all the componentswe need from the router library from reactrouter. We can mark it here with routing.If we want to do that. Then we import we havecurly brackets, we're going to import somethingthat's called browser router, capital D capitalR. And this name is a little bit long. Soif you want to rename this module, you cando that by typing s and router. So we importit as router. I think I'm going to removethis sidebar also. Alright, so that's thefirst one we import browser router, but weimport it as router so we can use it withthe name router instead. Then we import anothercomponent that's called routes. And then weimport another component that's called routevery similar names here. So be careful whenyou import these ones. And we import themfrom something that's called react dash router.So be very careful here. We're not importingit from just react dash router. We Pullingit from react router DOM. So this one is usingreact router in the background. But this oneis specifically created for using in the dome.Alright, so that's all the inputs that we'regoing to do. So let's create our componentsdown below here. And I'm actually going tochange this one to an implicit return. SoI delete the return and the curly bracket.And I want to create an arrow function insteadconst f equals because it's only with arrowfunctions, you can do an implicit return andI remove the curly bracket there, do someauto formatting, to me, it looks a littlebit cleaner. And this div is going to be replacedthis wrapper div that has a class name ofapp going to be replaced with a router toso we wrap our complete application with therouter. So it's really important where youwant to put the routes, you should wrap itwith the router. And that is the browser routerthat we imported here, but we renamed it torouter. So that's why I use it as router here.Then the header is going to be shown on boththe home page and the individual movie page.So the header is going to be left out of theroutes. So I'll leave that one here. And thenI use the route component. And inside of theroutes component, we can create our routes.And the first route, we're going to use thecomponent that's called route. So we havethree different components here from the routerlibrary router, we're going to wrap our completeapplication in this case, and then we haveroutes, that's going to wrap a route becauseyou can route in different components if youwant to do that. So let's say that you havea component deep down in your app tree, andthen you want to create some routes for justthat component, you can wrap them in thisroute component, and then you create the routes.So you don't need to have them here in thetop of your application. And then you usethe route component to actually create yourroute. And this route component has a propthat's called path. So we can specify thepath where we want to show a specific component.And in this case, it's a forward slash becauseit's the homepage. And then we have anotherprop that's called element is going to equaland here we can give it a component. And wewant to give it the home component like this.And then we also have to self close the routecomponent. That means that we can remove thishome component here. So that's the first wrote,if we want, we can save this to see that itstill works, go back to the application, reloadit, and you can see that it works. So that'snice, then we're going to create another route.So we use the route component again, we setthe path, and this one is going to be forwardslash. And then we're going to do somethingspecial here because when we're going to fetchan individual movie, we need the movie IDand we can send a long route params for that.And we create a route params for the routeby specifying a colon, and then we name it.So movie ID. So this means when we createa link on the thumbnails that we're goingto do soon, we can send along the ID for themovie. And that ID, we can grab that in ourmovie component and grab data from the API.And you can name this to whatever you want.Because this is a rod puram that you decidewhat you want it to be named. So I want itto be named movie ID. And then we specifythe element on this one. And we give it themovie component. And we also close the routecomponent. We haven't actually import themovie components, we can do that. Import moviefrom dot forward slash, components. Movie.And then we can also import not found fromdot forward slash components and not found.There you have it. So that's the route forthe individual movie, we save it. And we can'tactually click on the thumbnail now becausewe haven't created that one. But what we cando is go up here, create a forward slash,and then we type in some ID. And you can seethat it types out movie here now. And thatis because it's showing the movie componentso we know that it's working. That's sweet.And then if we remove this one, we'll showthe homepage instead. Alright, we're goingto create one last route. And that is forour not found component. So we create a routewith a path of forward slash and an asterisk.And this will make sure that we show the notfound component on any other route that don'texist. And we set the element to the not foundcomponent. And we also surf close this route,save it go back to the application. We knowthat it works if we specify an id like this,it shows the movie component But what happensif we create Another route here like this,yeah, then I chose to not found. And that'ssuper sweet because then we have a fallbackcomponent if the user tries to go somewhereelse in our application. So that's the routeset up in our app.js file. Then if we moveinside of our header component, and the index.jsfile, we're going to create a link on thelogo. Up here, we have to import curly brackets,and the component is called link from reactdash router dash DOM. And this is actuallyquite simple. It works the similar way asthe a tag does in HTML. So we have a linkcomponent we specified to and in this case,it's going to lead to the home page, so wehave a forward slash. And inside the linkcomponent, we just put our logo like this.So we wrap it inside of the link component.And this will make sure that we can link tothe homepage, so go back to the browser. Fornow, we specify an ID. So we're in the moviecomponent, and then we click on this logo.And we go back to the home page. So reallyeasy to make links with react router. Youcan also make them programmatically. But we'renot going to do that in this course, becauseit's kind of a little bit more advanced. Andwe don't really need it in this application.But we have to add a link to the thumbnailalso. So that we know that we can click ona thumbnail, and that will lead to a specificmovie. So inside the thumb component, theindex.js file will do the same thing up herewe import curly brackets link from react dashrouter dash dome. And we have this prop herethat's called clickable because we are goingto use this thumbnail for the movie posteron each individual page also. And that meansthat we won't be able to click that one. Sowe have to have this Boolean to check if weshould be able to click the thumbnail or not.And the way I solve this is to create a ternaryoperators. So here just below the div we checkif clickable is true. It's enough to typein clickable, then we have the question mark.And I have parenthesis. And I'm going to usemy link component and it's going to link toand in this case, we want to use the movieID because as I talked about before, we aregoing to send along this ID in the route.And we can grab it later in the movie ID paramsthat we create here. So we have backticks.I create a template literal here. So I haveforward slash, then I have dollar sign curlybrackets, and I'm going to give it the movieID and this will give it a link with a forwardslash and the movie ID close the link component.And then we have our image. And in this case,I'm going to copy this one and paste it in.So this is if the thumbnail should be clickable,then in the ternary operator Be very carefulhere it should be after this parenthesis,I create a colon and then I create a new pairof parenthesis. And I move this image insideof that one. And I also have to end the ternaryoperator with a curly bracket. And then Ido some auto formatting. So what did I dohere? Well, I create a ternary operator checkingif the clickable is true or not, I show thelink component with the image wrapped insideit. And that means that we'll be able to clickon this thumbnail. Otherwise, that's what'sright to the colon here, I just show the imageas it is or don't wrap it in a link component.So the user won't be able to click it. Savethe file, go back to the application. Andhopefully we should be able to click our thumbnails,you can see that we have this nice littlehand here. That means that we've created alink. So if we click this one, you can alsosee that we have the movie ID up here. Andthat's the one that we're going to grab inthe puram in our movie component. So it'sworking great. And this is actually it forthe routing, there's no more routing we needto do in this application. And in the nextvideo, we're going to start creating the moviepage. Okay, we're just going to do a littlebit of scaffolding in our movie componentbefore we move on. So up here we're alreadyimporting react, we're going to import somestuff from the config also. So import, we'regoing to need the image, underscore base,underscore URL capital letters and the posterunderscore size. And we're going to importit from dot dot forward slash config. Thenwe're going to have our components we're goingto create new ones for this one. But two ofthem we already created. We're going to importthe grid from dot forward slash win. Thenwe're also going to need a spinner so importspinner Apart from dot forward slash spinner,and then we're going to create the other oneslater, we're going to create a hook for thisone. And we also need an image. And that'sthe fallback image just as before. So import,no image, from dot dot forward slash images,and no underscore image dot jpg. And as alwaysbe very careful to actually add the extensionhere, when it's an image. All right, and thenwe have our movie component, this one is actuallynot going to have an implicit return, we createcurly brackets, because we're going to havesome logic in this one. So we create a returnstatement, parenthesis. And then we're goingto create a react fragment, like this. Andinside for now, we can just have a div thatsays, movie, do some auto formatting, andsave it. And I think this should be it, goback to the browser. Try something else here.Or we could actually just have clicked onone of these. Yeah, and it shows movies. That'sgreat. We know that it works. And then wecan move on. And we're going to start by fetchingthe data from the API so that we have somethingto work with. All right, we're going to createour second custom hook. Now, I'm not goingto create it first in the movie component,and then move it to a custom hook. Becausenow we know how we can create a custom hook.So that's why I'm doing it instantly in thatone instead. So in the hooks folder, let'screate a new file that's called use movie,fetch capital M, capital F, and dot j s. Andas I told you before, it's important to nameyour hooks with use before the name. Thisis the actual finance. So it doesn't matterhere. But it's important that you name youractual hook with use before. So for this hook,we're going to import curly brackets, we'regoing to need use state and use effect fromreact. Just as before, we don't really needa main react library for this one, becausewe're not doing any JSX and stuff like that.So that's why we're not importing it, we'regoing to import the API object from dot dotforward slash API. And that will give us accessto all these nice functions that are createdfor us. Then we create the actual hooked,so export const, use movie fetch, equals andthis one is actually going to have a parameter,because it's going to be the movie ID. AndI'll talk more about that in a second. Sothat's the arrow function. And up here, Icreate three states, the state and setterfor that state. I call the use state hooked.And I'm going to give it an empty object asdefault value. Now I create a loading stateand set loading. You state I'm going to setthis one to true initially, because this componentis going to start by fetching the data fora movie, so we can set that one to true. Andthen we're going to have the error and a seterror just as before, and this one was setto false. So you state and give it an initialvalue of false, right. So that's the statewe're going to need for this one. And thenwe're just going to need one use effect. Forthis one, because we only fetching data onetime, and that is when the component mounts,and then we're not going to fetch anythingmore, because then we have all the data fromthe movie that we need to have the inlinearrow function. And we have the dependencyrate. And this one is going to change if themovie ID changes, it actually not going tochange now, because we just do it initially,as I told you, but as I also told you, weneed to specify all the dependencies for ouruse effect. So that's fine, in this case,to have it there, it only going to fetch itone time. And then as a use effect can't havean async function here, we create anotherfunction that async fetch data equals async.And in this case, I placed it inside of theuse effect, and I'm going to show you whyin a second also. So we have an async arrowfunction. And then we can do our fetchinglogic inside of this one, and it's going tobe quite similar to the other one that wedid. So we have a try block. And we're goingto catch the error if there is one. And ifthere is an error with set error to true likethis. Then in our try block, the first thingwe do is this That loading to true. And wealso set error to false. Yes, that's we didbefore. And then we can fetch our data. ButI have a typo here. It just say, error. Yeah,I guess I misspelled it up here. Yeah. Thereyou have it, right. Yeah, this one too. Ah,something like that. Right. So first, we'regoing to grab the movie data from one resourcefrom them point. And then we also have tograb the credits that we get from anotherresource from them point. So we have const,movie equals a weight. And from the API, Icreated a function that called fetch moviewithout an S at the end. There we go, goingto give it the movie ID. Right. So that'sthe movie, then we also want to fetch thecredits. So we create a cost to that whenthat we named credits, we await again fromthe API dot fetch credits. And we also giveit a movie ID. So hopefully, we got all thedata that we need here in those costs. Butwe want to do some stuff here. And that is,we only want to show the director solely becauseif we look at the finished application, andwe go back, and we click Whoa, yeah, thereyou have it encountered two children withthe same Keith. And this is what happens sometimeswith this API. And I really don't know why.So if you get this warning, you can createyour own unique key somehow, by maybe havea random number and the movie ID, I don'tknow, you can do it in many different ways.But for now, it doesn't really matter. Sowe have the movie here. And as you can see,here, we are showing the directors, we needto get the directors somehow from the API.Because from the API and the credits, we getsomething back, that's called crew. And thecrew contains more than the directors. Sowe have to filter out the directors to justget the directors name. So I mark it withget directors only. And then I create thenew cast, I call it directors equals and fromthe credits, that's the one up here, we havethe crew properties. And I'm going to filterthis one filter is a built in method in JavaScript,we have a member a crew member. So I'm goingto check if the member dot job, this is alsoa property that we get back from the MovieDatabase API, are going to check if that oneis equal to director with a capital D. Andthat will filter out all the directors andput them in this const. Or format it. Andthen we have all the data that we need, sothat we can set our state, so we call substate, that's the setter for our state. Inthis case, we don't need to use a previousvalue. So I'm just returning an object here,I spread out the movie. That's the data thatwe got back here. So we spread out everythingfrom that one. And then we have a propertythat's called actors. And I'm going to giveit the credits dot cast. So from the credits,we have the cast, and we also got the directorsfrom the crew. So the actors is a propertythat I create myself that I want to have inmy state. And I'm going to have all the castinside of the actors property. And the lastone is going to be the directors, there canbe more than one director. So that's why it'scalled directors with an S. And as this isiOS six syntax, we just need to type out thisit will create it like this automatically.Alright. Then we're going to set loading thefalse like this. Auto format it and this shouldbe for this use effect. Actually, I thinkfor now, we need to return something fromour hook also. return an object with the stateloading and error. Save it go back to themovie.js file. We can see if it works. Sodown here I marked it with hook. I'm goingto import use movie fetch Rome dot dot forwardslash hooks and use movie fetch. And thenwe can try out our hooked and see if we getsome data back. So at the top of our component,we can destructure out the properties thatwe exported from the hooked I also want toshow you how you can rename something whenyou're distracted. So we have the state thatwe destructed, and we have a colon, and Iwant to call it movie instead. So that's howyou rename it. And then we destructor outloading and error. Then we call or use moviefetch choked. And we also want to give itthe movie ID. But we haven't really got themovie ID. So how do we get it? Yeah, and thisis from the route that we have up here, asI told you about before, we have the ID uphere in the routes, we can get that one fromthe router. So we have to import somethingup here. So we import curly brackets, it'sa hook that's called use params. From reactdash router, dash dome. So with this hook,we can grab that params that we have in theURL. So we'll do that before we destructureout the state and everything here from ouruse movie fetch hook to make sure that wehave the ID to send into that hook, the const,and then we destructure out the movie ID equalsand we call the use params. That's everythingyou have to do. And this one is named movieID because we named it that in the app.jsfile. We call it movie ID. If we call it somethingelse here, we have to distract it with thatname. But this will give us that ID that wehave up in the road here in our application.So hopefully this will work when we triedto console log out the movie, and this isactually the state but I renamed it to movie.So that's why I can console log it out asmovie. Save it. So we try it out, click amovie and nothing shows up. And I think Iknow why we go inside the use movie fetchhook, we also need to actually invoke thisfunction here. So we do that at the bottomof our use effect hook. Fetch movie. Did Iname it fetch data, we can rename it to fetchmovie instead, like this. And make sure toinvoke it at the bottom of the hook. Saveit go back to the application. And now youcan see that we have the data here. So wehave all the actors. And we also have thedirectors that were filtered out here. Sothat's great. All the data that we need ishere. I want to show you one more thing here.And that is if we were to remove this, thatmovie function outside of the use effect likethis, it tells us here that we need to specifythe fetch movie, and that's okay, becauseit's outside the use effect. Now, we do that.And then it gives us another warning here.And this is because this function two willget recreated on each render. And this useeffect will think that it's a new functionthat gets on each render, and it will createan infinity loop. So that's no good. So ifwe want to have it placed outside of the useeffect, we need to wrap it in something that'scalled a use fallback hook, we can importthat one up here. And then we wrap this onein the use callback hook like this. And thenat the end of it, we need to have a dependencyarray. In this case, it's empty. And thenit gives us another warning. And then it saysthat it needs to specify the movie ID becausethe movie ID is something that's outside ofthis one here. We also need to specify thisone, we specified a movie Id like this. Andnow it won't complain. And this one will notget recreated unless the movie ID changes.So this will stop the Infinity loop. And wecan see that it won't go into an infinityloop here. If you want to do it like this,instead, you can do that. In this case, wedon't need to call this function from anywhereoutside of the use effect. So I'm just goingto revert it back and not use the use callbackhook. So I'm going to have it inside of myuse effect instead. Like we had it before.Save it make sure that it works again, andit does. So that's how you use the use callbackhook to stop infinity loops in react. Butin this case, we won't need it. So it's betterto have this function directly in the useeffect hook instead. Alright, let's move onand create some nice components for our moviepage. Alright, we're going to create thisnice little breadcrumb navigation up hereon each individual movie. So go back insideof the code editor inside the components folder,create a new folder that's called Brad Trump.capital B, capital C and you create anotherfile inside of that one. Let's call index.js.And you create a file, let's call the breadcrumbeddot styles, dot j s a bit repetitive now,but it's good because that means that we probablybe learning something here. So inside thebreadcrumb dot styles file, we're going toscaffold out to style components. But firstwe import styled from styled components, thenwe export the class, that's called wrapper.And is equals a style.do, double backticks.And then we export const, that's called content.It equals A styled dot div, all formattedand save it. Go back inside of the index.jsfile in the breadcrumb folder, first, we importreact from react, we're going to import thelink from react dash router dash DOM. Becausewe want to be able to link back to the homepage, then we have our styles, import wrapper,and content from dot forward slash breadcrumbdot styles, then we create our component costbreadcrumbed. equals, then we're going todestructure to prop is called movie title.And we create an arrow function and we canmake an implicit returns we have parenthesiswe're going to have the rapper num, we havethe content. Now we're going to use the linkfrom the React router DOM is going to linkto and where do we think it's going to link?probably guessed it, it's going to be forwardslash because we want to link to the homepage. This is the first element in the breadcrumbmenu. So we're going to have a regular spanhere. And it's going to say home. So that'sthe first one, then after the link, we createanother span. And we're going to have a pipelike this, I think it's option seven on Mac.Yeah, option seven. Or you can have whateveryou want inside of there. But I'd like tohave that as a divider. And then we have thelast span and that's it's going to be themovie title. Do some more formatting. Andthen we need to export default this one also.Next export default breadcrumb, right. Sothis is going to be a two level breadcrumb,we only have the home button to click on togo back to the home page. And then we showthe movie title, save the file and then goback to the movie.js file. Up here where wehave the component imports, we import breadcrumbedfrom dot forward slash breadcrumb. Right.Now we can use it down here in our JSX. Onething we can do first is that we can returnsomething here, if we loading. So if loadingreturn, we're going to return the spinnerif we're loading something, which we are goingto do initially. And if we have an error,return a div that says something went wrong,or something else if you want that. So thiswill make sure that we show the loading spinnerinitially when we load in all the data forthe movie. And if we have an error, we wantto show that JSX down here, I don't know whyit's a spinner, you know, and deleted. Alright,so instead of the movie here, I'm going toremove this one, and I'm going to use my breadcrumband it has a prop that's called movie title.For that one, I'm going to give it a moviedot original underscore title. And I closethe component like that, save it and go backto the browser and click a movie and you cansee that we have our bread crumb here. Itlooks like crap but we're going to style itin the next video so don't worry. And it seemsto be working here with a title and everythingand we can click the home button to get backto the home page. That's not so in the nextvideo. We're going to give it some styling.Alright time to give this little breadcrumbs,some styles and we do that inside of the breadcrumbdot styles file. We have components insideof that one, we have the wrapper and the content.So let's start by styling the wrapper, I'mgoing to display it as a flex align itemsis going to be center and justify contentis also going to be center. I set the width100% The height is going to be 70 pixels.And the background is going to be from thevariable that's called matte gray. And thecolor is going to be also from a variablebut that's the white one. Save it go backand see what we've got so far. You can seethat we have it here but it looks not goodnow, so we have to fix this also. And that'sthe one here does the content. So the contentwas set at one also to flex display flex.The width is going to be 100%. The max widthon this one is going to be from the variablemax width and the padding is going to be zeroand 20 pixels. Then we have the span elementinside our breadcrumbs, we're going to styleup one also span we set the font size. Whatdo we have in the global style here in theroot? For me, I think it's the font medium.So variable dash dash, font medAnd the color is going to be for the variableis going to be white. The padding dash, rightis going to be 10 pixels. And then we're alsogoing to have a media query for this one.So add media screen and Max dash with is goingto be 762 pixels. And I'm just going to changethe font size here font size. And I thinkyeah, I forgot all of them now. Yeah, fontsmall. That will do, I think. So from thevariable, font small. Alright, save it andgo back to our application. And there youhave it, and it should change in font size.Yeah. So it's working, and the link is working.Great. There's some padding there. I haveit there also, okay. Yeah, it doesn't matter,you can adjust that one if you want to dothat. Alright, so that's the styles for thebreadcrumbs. So let's move on and create ourmovie info component. We're going to createthe movie info component. So we looked atan individual movie, or we can look at anyone.It's this component here, it's kind of a herocomponent. So I think this will be the largestindividual component in this application.So we're going to do a little bit of JSX.And also, it's going to be a little bit ofstyling for this one. So we better get startedwith this move back to your code editor. Andinside a components folder, create a new folderthat we call movie info, capital M capitalI. And then we'll create a new file indexdot j, s, and then another file inside ofthat folder, that's called movie info, dotstyles dot j s. And we scaffold out the style.So import, styled from styled components.And for this one, we're actually also goingto import some other stuff here, because weneed the image base URL and the backdrop sizefrom the config. And I'm going to talk aboutthat when we style this component, but weimport them now. So import, capital letters,image, underscore, base, underscore URL, andalso the back drop underscore size. And wegrab them from dot dot forward slash dot dotforward slash config, right. And we scaffoldout three components here. So export const,rapper, equals style, Dave, double backticks,export const. content, hopefully beginningto see my pattern on styling. In this one,I usually have a wrapper and the content.This one is also going to be styled div. Andthen we're going to have a third one. That'sgoing to be called export const text. Andit's also going to equal the style of divthat will backticks. Like so save the file,go back to the index.js file in the movieinfo folder. Now we can start building thismassive component. Now it's not really thatmassive, I think it's about 50 rows or something.All right, import react from react, and thenwe're going to have a component, so we'reactually going to use the thumb componentfor this one. So import thumb from dot dotforward slash, thumb. Alright, so that's thecomponent that we need. We also need somethingfrom the config. So import the image underscorebase underscore URL, and also the poster.underscore size. From dot dot forward slashdot dot forward slash double dot dot forwardslash config. Then we have an image. And it'sgoing to be the fallback image as we alwaysuse, so import no image from dot dot forwardslash dot dot forward slash, again, images.No underscore image dot jpg. All right. Andthen we have our styles. The import curlybrackets, wrapper, content, and text fromdot forward slash, move info dot styles. Right,that's our imports. Then we're going to createthe component itself. So we have a const.Movie. info equals anger is a structure ofa prop. That's called movie we're going togive it the movie data as a prop, an arrowfunction and we can make an implicit returnon this one. First, I actually going to exportdefault its export default movie info, likeso, then inside of here, we're first gonnahave a wrapper. And this one is actually goingto take in a prop. That's going to be thebackdrop image. So we have a prop that calledbackdrop. And from the movie, we have a propertythat's called backdropped. underscore path.And we close the component and inside thewrapper, we have our content, like so thenwe're going to use a thumb component again.And this is actually great, because you cansee here how you can reuse components in react.And this is kind of the fundamentals of workingwith components, you can reuse them in yourapplication. So you should always code withthat in mind, if you want to reuse it somewhere,you should make the components flexible. Soyou don't need to create similar components,it's better to use one component that youcan modify with props instead. So we haveour thumb. And on that one, if you remember,we have an image prop. So we're going to giveit the image. And this one, just as before,I'm going to check if it's as a movie posterpath, I use a ternary operator for this one,I have a question mark. And also note, I createdcurly brackets here, because this is a JavaScriptexpression. And as I like to do it with templateliterals, I'm going to have double backticks.And I have $1 sign and then I'm going to grabthe image base URL, then I have another dollarsign and curly brackets, I'm going to grabthe poster size. And then lastly, I'm goingto have a new dollar sign and curly brackets.And I'm going to grab the movie dot posterunderscore path. So that is if we have a posterpass. Otherwise, we have a colon and we showthe no image that we imported. That's theimage prop. Then we have the clickable prop.And in this case, we're going to give it falsebecause we don't want this one to be clickable,we set an OLT of movies thumb. And then wecan close this component, do some more formatting,save it and we can actually go back to ourmove it up JS component and import this onehere where we import the components, importmovie info, from dot forward slash, movieinfo. And then below here below the breadcrumbor we can use a move in for component likethis, we give it a drop of movie. And it'sgoing to be the complete movie stayed. Ifyou want, you can specify it even more indetail if you don't want to give it the completestate but I think for simplicity's sake, Igive it the complete state here to work with,say the file go back to our browser. And youcan see that we have our image here. And wecan click it and that's great. So yes, yes,it works with some other stuff here. Yeah,it does. That's great. Move back inside ofthe index.js file in the movie info folder.So we created our thumb and just below thethumb, we're going to have our text. So weuse the text style component. And inside ofthat one, we're going to have an h1 tag. AndI'm going to grab the movie dot title forthat one. Then we have an age three tag. Andit's going to say plot or something else ifyou want that. Next we have a p tag. And we'regoing to grab the movie dot overview. Andthat's the short text about the movie. Andinside of here, I actually going to createsome regular classes with class name, becauseI want to show you that also, you could createstock components. Also, if you want to dothat for these that I'm going to create now.But I'm going to create a regular div witha class name or rating dash directors, I'mgoing to have both the rating and the directorsin this one. And inside of this one, I'm goingto nest another div. And inside that div,I'm going to nest an H three tag that's goingto say rating, like that. And then I haveanother div with a class name. That's goingto be that's going to be score. And then I'mgoing to grab from the movie dot vote underscoreaverage. And that will give us the score fromthe API. Let's do rating. Then below thiswrapping div are going to create another wrappingdiv and this one going to have a class nameof director and inside of that one are goingto have another age retag and it's going tosay director and I'm going to do a littletrickier because if there's more than onedirector, we won't To say directors, so Icreate curly brackets. And inside here I oops,don't know why did like that, okay. And insidethe curly brackets, I can have a JavaScriptexpression. And I can check if movie dot directorsdot length. If that one is greater than one,I'm going to add in an S, like this. Otherwise,I just return an empty string. If there'sonly one, it will say director, otherwiseit will say directors. then below that header,we create another pair of curly brackets,because now we have to loop through the directorsand display them in our dome. So from ourmovie, we have this property that's calleddirectors, we're going to map over that one.And we have a director, we can make an implicitreturn in this arrow function. So we havea p tag with a key, it's always importantto include a key as you know, otherwise, Reactwill complain react uses the key internallyto diff stuff, so it knows what to changein the DOM. Okay, so the key is going to befrom from the director, we're going to grabsomething that's called credit underscoreID. And this will be unique, right, and insidethe p tag, we have another pair of curly brackets,and I'm going to grab the director, dot name,auto formatted. So that's the directors andthis should hopefully be it. So we can saveit, go back to the application and see whatwe got, we probably won't see anything becausethis text is white, I guess. Or if we checkhere below, we can see that we are the lastit is in white now. So you can see it, therating is 5.1. And we have a directory also.So we know that it's working, we just haveto give it some styling to make it look nice.And that's exactly what we're going to doin the next video. We have finished a logicfor a movie and four components. So it's timeto style this one. Go back inside of the codeeditor. And inside the movie info dot stylesdot j s, we start off with a wrapper. Forthis one, we set the background and this oneis going to be based on a prop that we'reselling. That is called backdrop. So I'm goingto create a ternary operator here becauseif we don't have a backdrop, then we're goingto set the background to be just black. Andif you remember when we grab a prop in a stylecomponent, we can do that with $1 sign andcurly brackets. Because this is a templateliteral. So that's how you create a JavaScriptexpression. And then I'm going to destructureout from the props. So I have a parenthesisand curly brackets again. So I'm going todestructor out the backdrop like this. Andthen I create an inline arrow function. Andthen I'm going to create a ternary operatorhere to check if the backdrop exists. So backdrop,then I have a question mark. And then I doanother template literal. Inside of here,we have the URL. And I have a regular singlequote, I don't actually know if we need thisone. But I'm gonna leave it in just to besure. And then dollar sign curly brackets.And I grabbed the image base URL. And thenI have again, dollar sign and curly brackets,and I grabbed the backdrop size, and I havea third dollar sign and curly brackets. AndI'm going to grab the backdrop, that's theone that we send into this component. So thatis if we have a backdrop otherwise, to theright of the colon. I'm going to show a blackcolor. And then we have a semi colon to MDSwith just after the last curly bracket. Thiscan be a little bit nested here and hard toread actually see if it does something ifI yeah, it's all formatted on one row. Okay,yeah, that's fine. I'm going to remove thissidebar. So you can see this is maybe easierto read. So I check if the backdrop is true.And then to the right to the question markare going to parse in the image base URL andthe backdrop size, and then we'll have thebackdrop that we're sending to this star component.If this exists, we're going to show that oneas a background. Otherwise, we set the backgroundto be black. Right, then we're going to setthe background dash size. It's going to becover and then we have the background dashposition. That one is going to be center.And I'm going to set a little bit of paddingon this one. So 40 pixels and 20 pixels. AndI have an animation also because I want thisone to fade off just as the other ones. animatemovie info, camel casing, and one second andthen I create The keyframes so add keyframeslike this, and then we go from. Or if youwant to use 0%, instead, we set the opacityto zero, and then two, or 100%. If you usethat instead, Opacity is going to be one,save it and see what we got. Okay? I musthave some typos somewhere because we we don'tsee the background. Yeah, and that's becauseI need to have this single quote here also,at the end, save it and go back. And thereyou have the backdrop. That's sweet, I canactually try also to remove those and seeif it works without them. Yeah, and it seemsto be working. So we don't actually need tohave those single quotes. Alright, sweet.Okay, that's the wrapper move down. And thenwe're going to style the content itself, weset the display to flex, the max dash withis going to be from a variable max with. Thenwe set the margin to zero and all the background,I'm going to set a transparent black on thisone. So RGB or RGBA, I don't think you needa actually 000 and 0.7. That will make ita little bit transparent. Then we have a borderradius of 20 pixels. And we have a media queryon this one also. So at media screen, andmax width is going to be 768 pixels on thisone. And then we're going to display it asa block and set the max height to none. Andthat's it for the content, save it, go backto the application. And you can see that wehave the content here. But we need to do somemore styling here on the text to get it tolook exactly as we want. So we have our textstyle component here. And for this one, weset the width to 100%. I set the padding to20 pixels, and 40 pixels. Set the color fromthe variables white. And overflow is goingto be hidden on this one. Then I'm going tograb a class. That's called rating dash director.So that's the one that I created inside ofhere. rating dash directors, you can grabthem just as a regular class in the star component.So that's why you don't need to create a separatestar component for each and every element.If you don't want to do that some elementsare really small. And maybe it's not justifiedto have its own style component. So we'regoing to display it as a flex and justifycontent is going to be flex dash start. Thenwe have the sport class. This one is alsogoing to display it as a flex align dash itemsis going to be center and justify contentis going to be center so these three willcenter stuff for us. And you could also createa separate class if you don't want to typethem in all the time. The width is going tobe 35 pixels. The height is also going tobe 35 pixels background is going to be white.So FFF and the color is going to be black.And you could also of course create variablesfor these ones. If you want to do that andplace them in the global style where we havethe other CSS variables. The font dash widthis going to be 800 border dash radius is goingto be 25 pixels. Or you can actually set itto 50% if you want that is instead becausethis is a circle and the Morgan is going tobe zero. That's the score. And then we haveour director. So dot director the Morgan isgoing to be 0004 pixels on that one. And insideof that one we have a p tag and we set themargin to zero on that. And below we havethe last one that's the h1 tag. And that oneis going to media screen and Max dash with760 pixels. And we set the font dash size,the variable, dash dash font big. Right? Saveit go back to the application. Yeah. So there'ssomething here that doesn't look right. AndI think I know what it is. Yeah, this oneis called directors. And probably, I misspelledthis one yet rating directors, we should havean S zeroes on that class, make sure thatyou add an s and save it. Go back to the application.And now it should look right. Yeah, it does,we can see if it looks great on another movie,also, and it does. Sweet. So that's the movieinfo component. In the next video, we're goingto check out this little movie info bar that'sbelow here we can see the running time tobudget and the revenue. Let's create the movieinfobar. And that's the one here with runningtime, budget and revenue. We're going to startas always by creating the component firstand then we create the styles in the nextvideo. So we start off in the components folderby creating a new folder that we call movieinfobar, capital M, capital I capital D. Andinside of that folder, we're going to createa new file that's called index dot j s. Andthen we're going to create another file that'scalled boring stuff. No, I'm just kidding.Of course not. But it's getting a little bitrepetitive here, it's going to be called moviein full bore.styles.js. Of course, we startoff by scaffolding out those components, importstyled, ROM styled components. And we exportconstant, we have our wrapper, style dot div,double backticks. And then we're going tohave our content export cones content equalsstand, dot div, and double backticks. Savethe file and go back to the index.js file,we import react from react. And then we'regoing to use some helper functions that areprovided for us, they will take a look inthe helpers.js file, you can see that I haveone function for calculating time, and onefor converting the money. So this one forexample, the Convert money, JavaScript hassomething built in that we can use for convertinginto a currency. And this one I said is onefor converting it into US dollars, you canchange this one if you want to have anothercurrency. And this one is going to give usthe time in hours and minutes. So these arethe ones that we're going to import in thecomponent. So move back to the index.js file.And I mark it with helpers. Import calc, time,camel casing and convert money also camelcasing wrong. dot dot forward slash and dotdot forward slash again, help us right, thenwe have our styles. So we import curly bracketsand wrapper and content. From dot forwardslash movie and FUBAR stars, all right. Andthen we can create our component. So we haveour concept of movie info bar equals, thisone is going to get some props. So I destructurethe time, the budget and the revenue. AndI have an arrow function and I make an implicitreturn. And I think I'm also going to exportdefault, before we start creating our JSX.So export default movie info bar. All right,we start off with our wrapper. Now we haveour content. And the first div we're goingto have is a deal if we have a class nameor column on that one. So we have a p tag,a running time colon, then I have a curlybracket, and we invoke the function that'scalled calc time that we import it. And wegive it the value of time, and we end it witha curly bracket. So that would give us thecorrect time. And actually, the other twodays are going to look almost exactly thesame. So I'm going to copy this one and pastethem in two more times. The class name isgoing to be column also on this ones, butthis one we can change it to budget. And insteadof chart time, we're going to invoke convertmoney instead and we're going to give it budget.Now the last one is going to be revenue. Andwe also invoke convert money and give it therevenue. Right? Save it. And this is our moviein football, we just need to make sure thatwe use it in the movie component. So moveback to the movie.js imported up here, importmovie info bar from dot forward slash, movieinfo bar. And then below just below the movieinfo. We use that component movie info bar.And we also have to give it some props timeis going to equal movie dot runtime budgetis going to equal movie budget. And the revenueis going to be the movie dot revenue. Andthen we close the component like this, dosome more formatting, and we get him on eachrow. So that's much nicer. We can see it herenow. So we have these props here. Now. Thisshould be it for a movie and FUBAR. If wesave this one, go back to the browser. Andnothing shows. And that's because we haven'tstyled it yet. I thought we should see somethingat least. But I guess it's because the Yeah,the text is white now. So that's why so youcan see down here that we have the runningtime we had the budget. But the budget isactually Ciro that's no good. Or is it zeroedout on that particular movie? Yeah, it was,it didn't have any budget. Right. So in thenext video, we're going to start it. Alright,we're going to create the styles for the movie.And for Boris, make sure that you insert amovie in FUBAR dot stars file. And we startas always with wrapper, we display it as flex,align the items. To center, I'm going to seta min height on this one 200 pixels. And thebackground is going to be from the variablesand I'm going to grab the dark gray. I setthe padding to zero and 20 pixels. Save itgo back and see what we got so far. Yeah,we can see it down here. So go back to thecode, then we're going to start the content,we display it as a flex. I set the max winover variable from the variable max width.I set the width to 100%. And the Morgan isgoing to be CRN auto. Then, we have that classthat's called column. So dot column. That'sthe one if you remember that we have herethe class name column. And I also got to displaythat one as a flex flex box is a really handytool in CSS a line items is going to be Sunderand justify content is going to be Sunderassess the background, from our variable aregoing to grab med grade, a set of border dashradius to 20 pixels, the margin is going tobe zero 20 pixels, and the flex is going tobe set to one. Then I'm going to style thefirst child we have we have three of them.So I want to start the first shot a littlebit differently. I want to set the Morgandash left to zero. And I also want to startthe last child with colon last dash childI set the Morgan dash right to zero. Right.Now we just have a media query left at thebottom here at media screen and Max dash withseveral 168 pixels are displayed as a blockbelow that pixel size. And the column dotcolumn is going to have a margin of 20 pixelsand zero, right? This should be it, save itback to the application. If it works, yeah,there you have it. It works on mobile devicesalso. That's super great. That's the movieinfobar. And now we just have the grid withthe actors left to do and then we've finishedthe basic stuff with this application. Alright,let's create the last component for our application.And that's going to be the actor. Inside acomponents folder, create a new folder thatthe name actor. And then you create a newfile inside of that folder that we're goingto call index dot j s. And we created anotherfile that's called actor dot styles, dot js. And inside the actor dot styles dot j s,we import styled Rome style components. Andthen we export the cost that we call wrapperequals style dot div, double backticks. Andthen we're going to have another one, exportconst is going to be called image capitalI, of course, equals style dot IMG, we'regoing to style this image tag, save it, goback to the index.js file, and we can createour actual component. So import react fromreact. Then we have our styles. And we importthe wrapper and the image, ROM dot forwardslash actor styles. Then we create the componentconst actor equals parenthesis and anothera destructor. Out inside of the curly brackets,the name, the character and the image URL.We have an arrow function, we make an implicitreturn we have the wrapper, then we're goingto display our image, we have the source orimage URL ot is going to equal actor dashthumb. And then we close it. Now we have anH three tag, that's going to display the namesof curly brackets and name that's the propname. And then we have a p tag and we havecurly brackets and we're going to grab thecharacter that's going to be the name of thecharacter. Right, then we just need to exportdefault actor and or component is good togo. So go back to the movie.js file importedup here, import actor from dot forward slashactor, right, and then move down to our JSX.I'm just below the movie info bar. We're goingto show these actors and we're going to showthem inside of our grid. So we first displaya grid. The header for this one is going tobe actors. If you remember, we have this propthat's called header where we can set thetitle of our grid. And inside a grid, we'regoing to map through all the actors. So wehave curly brackets, and from the movie dotactors, we're going to map through each actor.So we have an actor and an inline arrow function,parenthesis, we make an implicit return. Thenwe display an actor, it needs to have a key,as always, when we met through stuff in ourJSX in react, so the key is going to be fromthe actor dot credit underscore ID. That'sthe key. Then we have a prop that's calledname. So we're going to give it the actordot name. And a scroll up a little bit here.And then we have a prop that's called character.And for that one, we give it the actor dotcharacter. Like so now we have an image URL.And it's going to equal and this one is alsogoing to be that ternary operator that weuse before because we want to display a fallbackimage if we don't have that one. So we checkif we have an actor dot profile underscorepath. And then we have a question mark andwe're going to return our nice little URL.So I have double backticks dollar sign andI have curly brackets and I grab the imagebase URL and then directly after that I haveanother dollar sign curly brackets and I grabbedmy poster size. And then I have a third dollarsign and curly brackets. And I'm gonna grabactor dot profile underscore path. Be verycareful with the spelling here. It's veryeasy to get a typo when you do stuff likethis. Now we have our colon and if we don'thave a profile path, we give it a no image.And then below here we need to close thatcomponent also do some auto formatting. Sothis should be my friend We have hopefullyfinished the base of the application. Andthen I'm going to teach you some other stuffthat's useful in react. So this should beit, I hope, save it and go back to the browser,you can see that we have the accuracy, butit doesn't look good, because we haven't styledthem yet. But at least it's working. And theseare in white, there, you can see the characterthey play in the movie. So we're going tostyle them in the next video. And then wehave this nice actors grid. Alright, let'sgive those actors some styling. So insideour code in the actor.styles.js file, we havetwo style components. So let's start withwrapper as usual. I'm going to set the colorfrom our variables, we have white, I set thebackground. And also from our variables, wehave the dark gray, I set the border dashradius to 20 pixels, padding is going to befive pixels, and the text align is going tobe Sunder then I'm going to have an age threetag nested here, I set the Morgan to 10 pixels000. on that one, and then we have the p tagis going to have a margin of five pixels andzero. All right, so that's everything forthe wrapper, then we have the image, justa few lines of code left, we display it asa block, the width is going to be 100%. Theheight is going to be 200 pixels. And albeitdash fifth is going to be cover and the borderradius is going to be 15 pixels. And thisshould be it, save it go back to the application.And hopefully you have a nice grid. Yeah,almost. There's something wrong here witha background. Yeah, and that's because I havea typo, it should say border radius, likethat Not radius. Save it go back. And thereyou have it. Let's make sure that it workson all devices. And it does. Sweet, sweet,sweet. And that concludes the basic stufffor this application. In the next video, we'regoing to talk about prop types and how youcan type check the props that you send into your components. I'm going to talk aboutsomething that's called prop types. And proptypes is something you can use on your componentsin react to type check the props that yousend into your component. So you have thisspecial property on your components you create.That's called prop types. I'm on the officialreact page. Now, reg deus.org. And just asto say here, React has some built in typechecking abilities. I'm going to show youhow to convert this application into TypeScriptlater in the chapter. So if you don't useTypeScript, you should use prop types instead.That way, you can at least type check yourprops that you send in it. So they tell youhere to run type checking on the props fora component, you can assign a special proptypes property. And I'll give you an examplehere. So they import the prop types that'sfrom the library that we installed earlierprop types up here. Then they have the componentname, and then assign and then assigned tothis property that's called prop types. Sothis one has a lowercase letter to start with.And this one has an uppercase letter. So thisone is the actual property on the componentitself. And this one is the one that you importfrom the library that's called prop types.So it can be a little bit confusing, but we'regoing to practice this in our components.So hopefully, you'll get a grasp of it quitequickly, you have this special property onyour component that's called prop types. Andthat is an object. And here you can specifyyour props. And from the prop types that weimport up here, you have different types youcan check against. So this one will get awarning if the prop isn't a string that thiscomponent receives. And if we scroll downhere, they show you everything you can dohere. And we are actually just going to dothose simple checks if it's a string, a numberor a Boolean. But you can also check againstan object, for example, you can set all theproperties in an object, and then you usesomething that's called shape. And then youspecify your orbit shape inside of that one.So you can do some more advanced prototypevalidation here, instead of just check thatit's an object. You can check all the propertieson the object by using the dot shape. So Ihighly suggest that you read this one on rxjs.org.If you want to know more about prop types.I think a lot of people now are starting touse TypeScript with react. And with TypeScript.We don't have to do this. We have it for freein TypeScript. So prop types is only If youdon't use TypeScript, and that's why I won'tgo into super detail about it either, becauseI think TypeScript is actually great to usein combination with react. But you shouldknow at least that you can do some deeperprop type validation by using some of thesesyntaxes. Here, you can also check an objectwith with warnings on extra properties. Andyou can do an exact check here, if you wantto do that. And you can also check if yousend in an array that should have only numbers,you can check that also. So that you makesure that the array doesn't contain strings,for example. Or then you can do the same withan object here. So there's some really usefulstuff inside of here that you can learn ifyou want to get more advanced into prop types.But we are going to use the most simple usecases. And we're going to check for strings,numbers, and Boolean and also for functions,I think. So in the next video, we're goingto learn about the most simple forms on howwe can use prop types on your components.Okay, let's start doing some prop type validation.So we're going to do that with the prop typeslibrary that we installed in the beginningof this course. So let's begin at the tophere with the actor in the components folder,and then we're going to move away down andgo through all our components. So in the actor,make sure that the import prop types, capitalP, capital T, from Prop, dash types, right.And then just below the component at the bottomhere, just above the export default, we haveour actor component, so we're going to usethe special property that's called prop typeson that one. So actor dot prop types, andthis one is lowercase p, not capital T, asit is up here. Be very careful here is canbe quite confusing, actually. So prop types,is going to equal and we have an object. Andthen we can specify our different props thatwe have here. So we have the name, Prop, andthe name prop. We know that this one is astring. So from the prop types that we importthat capital P prop types with capital P proptypes, we have something that's called string,so we're going to check against if it's astring. All right, then we have the character.And from prop types with capital P, we'realso going to check if that one is a string,and we have the third one, image URL, Robtypes, dot string, all of these are goingto be strings. So we say this one, go backto our application. And we can see here, we'regoing to need to be on an individual moviehere. So we have this movie here, nothingshows up here. But if we go inside, or I'mjust going to close this here. So if we goinside our move it up JS component, we haveour actor here. And we know that this name,for example, is a string. So if we changethis one to a number, for example, 10, saveit, go back to our application, you can seethat we instantly get a warning here failprop type, invalid prop name of type numbersupplied to actor expected string. So thisis a very handy way when you develop yourapplication to know that you're sending thecorrect props to your components. And thisis only available in development mode, itwill not be in production. So it's kind ofa tool when you develop this application toactually validate your props that you're sendingto your components. So we're going to changethis back now, and hopefully get an idea onhow it works. Now, that was our actor. Thenwe have our bread crumb. So just as beforewe import prop types, capital P capital Tfrom prop dash types. And below the componentwe have the component name, breadcrumb dotprop types. With a lowercase p, it's goingto equal an object. And for this one, we havea prop. That's called movie title. And fromthe prop types with a capital P, we're goingto check if it's a string, right. So that'sthe bread crumb. Then we have the button.For that one, we have two props. So we importprop types, capital P, from prop dash types.And below the component. We have the bottomdot prop types. lowercase p equals an object.We have our text prop that one We're goingto check prop types, capital P here and alittle bit repetitive here that we check ifit's a string. And then we have a coma, andwe have a callback. And from the prop types,capital P, this one is going to be a function.So we have that one also on the prop typesobject. funk, we can check if it's a function,save it, go back to our application and checkYeah, it seems to be right. Let's have baronne.Then we have our grid, import prop types capitalP from prop dash types, below the component,grid dot prop types lowercase p, then we havetwo props for this one, header, prop typesdot string, we check if it's a string. Andwe actually don't need to check the childrenbecause that is a built in Prop, so we don'tneed to verify that one. That's the gradethat we have the header and the header don'thave any props, we can skip that one, we havethe hero image. And this one has reom to importprop types capital P from prop dash types.Below the component, type in hero image, dotprop types lowercase p, we have our object.And we have the image we check against theprop types with capital P dot string. Allof these are going to be strings. Also, wehave the title, prop types dot string. Andwe have the text prop types. dot string, right?image, title and text. Save the componentwe move inside of movie info component. Andfor that one, we have one prop import proptypes from prop data types. And below thecomponent movie, info dot prop types equalsan object. And we call it movie I think, yeah,movie. And this one is an object. So proptypes dot object. And this is what I talkedabout before in the last video. If we go backhere, you can see if you want we can savethis object with dot shape. But I think there'stoo many properties in this object. Now toactually do this. I don't think it's worthit. So just check if it's an object. But ifyou use dot shape, you can shape the completeobject here and check every property on theobject. All right, let's move on we have themovie info bar. And for that one, we havethree of them. So import prop types from propdash types. The loader component, movie infobarequals an object. And we have the time andprop types. dot this is going to be a numberso we have the number property check against.That's the time then we have the budget, proptypes. DOT number is also going to be a number.We have the revenue, prop types DOT numberall three of them are numbers. movie in forboreYeah, of course, I also have to have dot proptypes like this. Right? Just check the application.Everything seems to be working. Movie infoisn't the fun is it because I typed in Yeah,this one is auto generated when I typed inmovie info below. Okay, just remove it, saveit. Then we have the search bar. Import proptypes from prop data types. Right below thecomponent. We have the search bar dot proptypes equal an object. So we have the callbackfunction. So prop types dot func, we checkif it's a function. Save it. The Spinner willnot have any props for that one. We have thethumb and we have three of them there. Soimport prop types from prop Types below thecomponent, we have thumb dot prop types, lowercasep equals an object. And we have the image.I think image movie ID and clickable image,prop types capital P, dot string, that's theURL for the image. So it's a string. Thenwe have the movie ID, prop types, DOT number,the ID is a number, and then clickable. Proptypes, dot, and this is a Boolean. So we havesomething that's called bool. And this willcheck against a Boolean. Right? Now, it'sactually our last component, I think we don'thave anything in home and movie and not found.That's the last one. And I saved this forlast, actually, because we built the wholeapplication. Sure, you should do this fromstart when you build a component, I didn'twant to confuse you too much before we havelearned more about react. So that's why Isaid it last. But you should have as a habitto always do this when you create a componentthat receives some props. So that's why Isaved it for last. I think that sums it upabout prop types, I'm not going to go allcrazy about prop types. Hopefully you learnsomething here to get you started with proptypes. And actually, I don't think in thisapplication, we don't need to do any deeperchecks here, actually. Okay, in the next section,we're going to see how we can persist ourstate in the session storage. We have almostfinished replication, there are some thingswe can do to optimize it. Because now Yeah,it works. But for example, here, those movieshere, we always reload those movies when wevisit each site here. And also, when we goback to the start page, we always fetch fromthe API. And that's what we're going to talkabout here. Because in your browser, you havesomething that's called local storage andsession storage. And we're going to utilizethe session storage to store the data thatwe already retrieved. If you open up the panel,and you have something that called application,and inside application, you have the storage.And there you can see the local storage andthe session storage. And these here are allthe movies that are stored from the application.So you can see it's the movie ID here, andhere we have the data for the movie that'sstored here. Then we also have the homestead.This is from the other application that isfinished, not ours. I just wanted to keepthem here to show you how it's going to lookwhen we store this stuff in the session storage,local storage and session storage are quitesimilar. The big difference is that the localstorage persist until you decide to removeit, the session storage only persist overa session. So every time you create a newsession, the session storage will get wipedout. And you may wonder, wouldn't it be betterto have the local storage for application?Yeah, it would probably, but this page hereis based on all the popular movies. So itchanges a lot. So that means if we store itin the local storage and never remove it,we always get the same list of movies here.And that's no good. So that's why it's betterto store it in the session storage. And also,each individual movie here. Also sharing justbecause we have a rating, that one has zerorating. Okay. Let's select another one, thatone has 7.6. So the rating will change dependingon the voting. So there is stuff that canchange in each movie also. So that's why Ichose the session storage for both of them.But if you want, you can use the local storageinstead, the code is going to be the sameexcept that you swap out session storage forlocal storage when we write the code. In thenext video, we're going to learn how to persistthe state in the session storage for the homepage.Okay, we're going to learn how to persistthe state in the session storage. And we'regoing to start by creating a little functionthat we can use to read from the session storage.So go back inside of the code editor, andin the file, let's call helpers dot j s that'sthe one are provided for you in the storedefies we're going to add in a little functionat the bottom here in this file. So we exportthe const is persisted, stayed like this equals,then we have a parameter that's called statename or name, you can name it whatever youwant, then I have an arrow function. And thenwe create a cost that we call session stateequals and from the session storage, sessionstorage. We have a method that's called getitem. And this is what I talked about beforeif you want to use the local storage instead,you can just change this one to local storageand it will work you just swap this one outto local storage. Alright, so we invoke Themethod is called get item, we give it thestate name. And this will return the statefrom the session storage if there's a state,otherwise it will return No. So it will getthe item from the session storage with thename that we provide, there would need toreturn something from this function that wecreated. So return, and I'm going to do ashort circuit here, I checked, if sessionstate. If we have something in this one here,now I have double ampersand and it will returnwhat's the right of the ampersands. Otherwise,it will return this one. And this will benow if it couldn't find this one in the sessionstorage. Let's say that we have somethingin the session state, it will run what's tothe right of the double ampersand so we canreturn that state. But we can just returnit as it is because you can only write tothe session storage and to the local storageas a string. So we have to parse it back froma string into JSON. So that's also what we'regoing to do when we write to the session storage,we're going to first convert it to stringbut now we have to parse it back and forth,we can do that with JSON capital letters,parse, and then we give it the session stayedlike this. And this will parse it back toJSON object and we return it save the file.And this is it for this little function. Solet's move inside of the use home fetch hookdown below here. Our search an initial useeffect hook. In this one, we can check ifwe have a session state before we retrieveanything from the API. So there are a coupleof things we have to consider here. Becausewe want to check the session storage on theinitial render, before we fetch anything fromthe API. If we have something in the sessionstorage, we retrieve that one instead. Andlater, we're going to create a hook that alsowrites to the session storage. And we're notgoing to write to the session storage if we'rein a search. And that means that we also don'twant to retrieve anything if we are in a search.So that's why we're going to create an ifstatement here. Just at the top in this useeffect if and we'll have an exclamation mark,and search term. So this means if not searchterm, then we're going to check the sessionstorage. So we create a new cost, call itsession stale equals, and then we also haveto import a function that we created in thehelpers file, it's up here at the top withthe market with helpers, and import is persistedstate from dot dot forward slash helpers.So that's our function that we're going touse here. To the right of the equal sign,we call that function is persistent state.And for our homepage, we're going to createa state that is called the home state. Sowe are hard coding in the string here forthis one, you can make it a little bit moreelegant if you want to do that. But I havea string here that I call home state. So that'sthe property that we're going to write tothe session storage. And this one should actuallybe called stayed like this. Then I'm goingto nest in another if statement here. Youcould do this in multiple ways. But I thinkthis one is more readable for this course.So that's why I have a nested if statementhere also. So if session state, we check ifwe have something here, then we're going toset the state and give it the session state.And it's also important that we return becausewe don't want to do anything else here, becauseotherwise it will fetch it from API also.And this is all that we need to retrieve somethingfrom the session state, we make sure thatwe don't check the session storage if we'rein a search. But if we're not in a search,we check if we have something here. And ifwe have something in the session storage,we set the state with the form that we retrievedhere. And then we return, we return earlyfrom this use effect. Otherwise, it will workas before here. We set the state first withthe initial state to wipe it out. And thenwe fetch the movies from the API. All right,save it, just make sure that everything works.And it does. So that's great. I'm also goingto wipe out the old session storage here.This one is from react dev tools. So whenyou delete it, it will create a new one. Right.But we don't actually have something to retrieveyet, we also need to write something to thesession storage. So if we go down here belowour load more use effect, we're going to createanother use effect. And I mark it with rightto session storage. And then I have my useeffect like this. This one is going to havea dependency rate. And it's going to writeto the session storage when the search termseniors and also when the state changes andyet Again, I checked if not search term. Becauseif we're in a search, we don't want to writethat one to the session storage. And thisis of course, optional. Also, if you wantto, to save the search, you can do that also.But I don't think that's a great way of doingit to have your last active search on thehomepage. So that's why. So if not, in a searchterm, we can set on the session storage. Andthis is the same as before, if you want tostore it in local storage, you change thisone to local storage instead.we have a methodthat's called set item, just as we had theone that's called get item. In this case,we're going to set it the first argument isgoing to be the name that we wanted to havein the sessions to session storage. And forthis one, I chose the name homestead, justas the one as I grabbed up here, really importantto have the same name. It's a hard coded stringthere, then the second argument is going tobe what we want to write to the state. Andif you remember, I mentioned that we can onlywrite a string to decision storage and tothe local storage. So we have to stringifyit. And we can do that with JSON, capitalletters, dot stringify. And we give it thestate like this. And even if we didn't specifythese ones first, you can see that it complainsthat it wants to search term and the statenow so this is the linting rules for hooksthat is included in create react app. So it'sreally great to have that one. All right.So that's how we write to the session storage,save the file, go back to the browser. Andyou can already see when I say the file itthat it wrote the whole state here for us.So we have the results here. And we can actuallygo back to the code and do some console logging.So up here in the search and initial insidethe if statement where we grabbed from thesession storage, we can console log, grabbingfrom session storage, like this. And downbelow here, we can console log grabbing fromAPI and save the file. And then if we go backto the console, you can see grabbing fromsession storage. And if we reload the page,it works, it grabs from the session storageall the time. And then go back to the applicationhere. And we delete the homestate in the sessionstorage, go back to the console, reload it.And now you can see that we grabbed from theAPI. So if we load some more movies here,a few of them. And then we reload the page,you can see that we have them here, instantly.And that's because we save it to the sessionstorage. In the next video, we're going topersist the state in the session storage foreach individual movie. Okay, one more thingto do with the session storage. And that isto store each individual movie in the sessionstorage. That's what we're going to do backin the code editor. So we're going to be inthe use movie fetch. And we only have oneuse effect in this one. So down at the bottomof that one, we run that fetch movie function.And before we do that, we're going to checkif we have something in the session storagejust above that one. Just as before, we createa const that we call session state equals.But of course, first we also have to importthat function up here. To mark market withhelpers, an import is persisted state fromdot dot forward slash help us. Yeah, I don'tknow why I did like this. Okay, to the rightof the equal sign here, we got to run is persistentstate. And we're going to check for the movieID. Because each movie is going to be storedin the session state with its own ID. So thatwill give us null or the actual state. Soif session state, if we have a session state,we're going to set the state and give youthe session state. And then we're also goingto set the loading to false. This one becausewe setting it to true up here, when we start.That's why we have to set it to false alsoOtherwise, it will keep on showing the spinner.Okay, and then we make an early return, justas we did before. Otherwise, it will run thisfunction here that fetches the movies fromthe API, right auto format it and save it.But we're going to create the use effect alsofor writing to the session storage. Rightthis session storage then we create our useeffect. With an inline IRA function, it'sgoing to have a dependency array. And it'sgoing to change on the movie IDs change andthe state change. And these actually won'tchange because we're just grabbing data onetime for each movie. But as I told you manytimes before, you should specify all the dependenciesfor each use effect. If there's somethingthat won't work, because you specify themhere, you should handle it inside of the useeffect. And that will make sure that you haveless errors in your application. For thisone, we don't need an if statements, we canwrite to the session storage dot set item,and we're going to give it the name of themovie ID, each movie is going to be storedin the session story with its own ID, that'show we separate them out. Then we have a commaand we give it the state. But just as before,we have to run JSON stringify. State, becausewe can only write the string to the sessionstorage. All right, save this one and go backto the application. And here, you can seethat it already saved the movie here. So here'sthe movie for that one. So if we check thisone out, I think it's down below here, youcan see that it will instantly grab that movie.And if we choose not one, here it is zerorights to decision storage. And next time,it will instantly grab it because this onehere you can see where the loading spinneron this once, but next time, we don't haveto reload it. That's how you utilize the sessionstorage to persist the state in your application.In the next section, I'm going to show youhow to deploy this application, it's timeto deploy the application. And for this course,I'm going to show you how to deploy it tonetlify. I think netlify is a great and veryeasy way to deploy your react application.So that's why I'm not sponsored in any wayby netlify. I just like it. And I know thatthere's a lot of people that likes it also.So I think netlify is a good choice for this.So the first thing you have to do is to createan account at netlify, it's free. So makesure that you create an account. And thatwill show you kind of a dashboard here, Ihave a lot of sites here now. So yours willbe empty if you don't have an account already.So make sure to create an account at netlify.We will need it in the next video. So in thisvideo, I'm going to show you how to createa production build of the application thatwe're going to deploy to netlify. So backinto the terminal and create react app isreally simple to use. It has a built in commandthat we can use to build our site. So makesure that you're inside your application folder.And then you run NPM, run build like this.And this will build the application for us.As it says here, it will create an optimizedproduction build for us. So that's great.And it will place it in a folder that's calledbuild. If we move inside our code editor again,we can see that we now have this folder that'scalled build. And this is a complete sitein here. It's the it's the production buildof our site, we have to do one small thinghere when we're deploying to netlify if wewant our routing to work correctly, becausefor example, I can show you here, this isthe site here. If I go to this site and choosea movie, grab this URL, that's the directURL to the movie, and then paste it in here,you can see that it works now. And that isbecause I created that little file that we'regoing to do now. Otherwise it won't work,it will show an error here. And that's becausewe using in with react router. So that's whywe have to have that little file. So backinside of the code editor. And inside a buildfolder at the root create a new file, thename is going to be underscore redirects likethis, it's very important that you name itexactly like this underscore redirects. Andthen inside of that one, we're going to typein forward slash asterisk, forward slash indexdot HTML, space and 200. And this will makesure that the routing will work in our application.So save the file. And now we ready to deployit on natla phi. So that's what we're goingto do in the next video. I'm going to showyou two ways in this video how to deploy yoursite to nullify, and the first one is goingto be really easy actually. Because if youlog into your account at nullify, and you'reat this dashboard side, down below at thebottom, you will have this little sewn herewhere you can drop your site want to deploya new site without connecting to get dragand drop your site folder here. And this isreally sweet with netlify actually. So ifwe grab our folder, that's the folder herewhere the complete application is your workingfolder with application, you have the folderinside of that one that's called build. Somake sure that To grab the build folder thatwe build in the last video, and just dragand drop it here, you can see that netlifystarts to build your site. And I actuallydidn't have time to finish that sentence beforeit's published my site. So you have the linkhere, it will create a randomly generatedname, you can change that if you want to dothat, click this link. And you can see thatyour application is up and running. So that'show easy it is to deploy, who would nullify,that's one way of doing it. Another way isto use something that's called the netlifyCOI. And that's what we're going to do next.So make sure to be inside of your terminal.So of course, you're going to be in the folderwhere your application is, we've already builtour application, otherwise, you have to buildit. So NPM, run build, and also add in thatlittle file that I showed you in the lastvideo for the routing to work in nullify,then we're going to install the natla phiCOI, I have already installed it, but I canshow you again, of course NPM, install netlifydash c ally dash D. So that means that I installit globally. Alright, that installed correctly,I'm going to clear my console. And then wecan run nullify deployed like this. And thenyou're faced with different questions here.So in this case, we're we're going to createand configure a new side. So make sure thatyou navigate down to that one. And it's wabanFox team, in this case, you will probablyalso just have one team to choose from. Soselect that one. And then you can create asite name, if you want to do that. I won'tdo that now. But you can also change it later.So we'll use the default and just press enterhere. And then it asks for the public directorydown here. And if you remember, the Publishdirectory is the build folder. So we typein dot forward slash build and press Enter.And there you have it, but the site isn'tactually live yet, because we now have theopportunity to see if our site works. So youhave a website draft URL, we can click thatone. and here we can try our application tosee that it works before we actually go livewith it. Right, it seems to be working backto the terminal. And if we read here, we canadd the dash dash prod flag if we want togo live with it. So we run nullify deploydash dash prod and this will make it go live.Yeah, of course, I shouldn't have space, itshould be dash dash prod like this. And thepublic directory is just as before dot forwardslash build. And you are provided with a coupleof URLs here. So this is the unique deployURL for this deploy. This isn't actually thelive site. So this is the live site here onthis link, you can click that one and openit up. But I want to go inside of natla phiand check that is actually here, you can seethat is here. So you can click this one andsee if it works. And it works. And that'ssweet. So that that is actually also quitesimple to do it in the terminal like this.So if you change something in your application,you can deploy it very easily without logginginto netlify from the browser. So you justtype in netlify deploy. And if you know thatit works, you can flag it with prod like this.And you can do this every time you changesomething on your site. Alright, in the nextvideo, I'm going to show you how to deploywith continuous deployment. That means whenyou change something and push it to GitHub,I'm going to use GitHub for that one is goingto deploy it automatically. Okay, we're goingto talk about continuous deployment on netlify.Now, and that means that you can have, forexample, in this case, I have a repositoryon GitHub that I'm going to use for this one,I published my site here to get up and I'mgoing to use this one for continuous deployment.And that means that when I push somethingto this repository here, netlify will automaticallybuild my site and publish it. So that's really,really neat. Actually, just make sure thatyou add to Git ignore file to not upload thedot m file. And also just one other thingyou have to do, and that is the file thatwe created in the build folder, you have tomove that one inside of the public folderinstead, you can see that I have the underscoreredirects in the public folder. And this willmake sure that this one is included when netlifybuilds the side. So that's all you have todo and push it to your repository. I'm usingGitHub, you could use Bitbucket or some otherservice if you want to do that. So this isthe complete side. Then I'm going to moveinside of nullified and I'm at my dashboard.You have something that's called new sidefrom get I'm choosing Get up because that'swhat I'm using. So it's authorized me here.So you have to log in, then I can search formy name is RM DB version three. So I selectthat repository. And we're going to buildfrom the master. That's correct. The commandis going to be MPM run build. And we the Publishdirector is the build folder. So that is correct.But we have one more thing to do, becausewe have an environmental variable for oursite. So we have to set that one up also ShowAdvanced. and here we can create a variablenew variable. So you can set the name hereand the name is going to be react underscoreapp underscore API underscore key, just asthe one that we had in our application inthe dot env. file. Alright, there, we needto give it some value. And here, we can giveit the API key to the Movie Database API.So I'm obviously not going to show that foryou. So I'm going to paste that one in. Andthen I'm going to click Deploy site. So makesure that you also paste in your key here,and then click Deploy site. And now we justwait for it, it's going to build the site.So it will take a little bit longer now. Andhopefully this will work. And if we want tosee the build log, we can also do that byclicking here deploying your site, and itwill show us the log. And there you have it,the site is live, it says here, so we're goingto try that out. Go back to our dashboard.And here's the side. Click the link, we makesure that it works. And it does. And thatis great. Just going to make sure also, thatthese unique links work if we paste that onein. Yeah, and it works. Sweet, sweet, sweet.This is how you publish on netlify. And thisalso concludes the main part of this course,I hope you enjoyed it, there are some bonusparts. In the next part, I'm going to showyou how to use class components instead ofhooks. And then I'm going to show you howto convert this application into TypeScript.And lastly, I'm going to show you how to usethe login and vote system for the Movie DatabaseAPI. We're going to reflect our applicationinto using class components instead of reacthooks. I actually don't use class componentsanymore. And I think a lot of people don'tdo it. But the chances are that if you geta job as a react developer, you will workwith a code base that at least has some classcomponents. So there's a lot of applicationsout there that still has class componentsin it. And it's actually not even deprecatedfrom the React libraries. So it's a legitway of creating components in react. So insome sense, it's a matter of preference. Idon't think I ever will use them again, actually,because I love hooks. And I always use functionalcomponents with hooks. But I want to showyou how to do it with class components also.And there's three components that we haveto refactor because we have three componentswith stadium. And that's the search bar tohome and the movie. And we're going to startwith the search bar. So make sure that you'reinside index.js file in the search bar folder.And there will be a lot of errors and warningshere when we remove stuff here now, but we'llfix that as we go along in this video. Sofirst of all, this one is a functional component,we want it to be a class component. And thenup here, instead of importing use state usethe fact that you use ref, we can import somethingthat's called component like this. And insteadof the const here, we delete all of this here.And we create a class that we call searchbar just as before the same name, and it extendscomponent. So if we did an important one uphere, we had to specify extend react dot component,this is a little shortcut you can do here.So we can remove these ones here. In a classcomponent, you have one class property, that'scalled state. And that is the only state holderyou have. So that's one. So that's one downsidewith classes. If you use you state and reacthooks, you can have as many states as youwant to separate them out. Here we only haveone. So we have the class property. That'scalled state. And now you can see that I'mnot using the constructor like this. Becausewe don't need to do that Babel and Webpackwill make sure that it will be transpileddown correctly. So we have this class propertyhere. That's called state and it equals anobject. We're going to have a property that'scalled value, and it's an empty string. Sothat's the value for our input field in thesearch bar. And then we also got to have aclass property that's called timeout. Andwe set that one to know right, the use effectwe can use That one anymore. But we can reusethis logic here for the timer. So I'll removethese ones for now. And in a class componentin react, you have something that's calledlifecycle methods. And there's three of themthat you should know, that's probably themost used once you have one that's calledcomponent did mount. And that's the one that'sgoing to trigger initially in the component.And then you have another one that's calledcomponent did update, and that's the one thatwe're going to use now. And then you havethe last one that's called component willunmount. And that one is triggered just beforethe component will unmount. And in that one,you can do some cleanups and stuff like that.But we're going to use to underscore componentdid update. And you could do this in severalways, you don't actually have to use thislifecycle method to get this to work. ButI want to use it here to show you how thislifecycle method works. So component did updatelike this, this one is going to give us theprevious props and the previous state. SoI make an underscore prep props, we're notgoing to use the props, because we don't needto check against the previous props. So marketwith an underscore just to tell that we won'tuse that one. And then we have the prep state,the prep state we will use. Alright, so that'sthe component did update lifecycle method.And this one will trigger on each update onthe component. So what do we want to do here,now the state here with value is going tobe the text that the user typed in, in theinput field, because this is a control componentto keep it in the state. So we want to checkif this dot State DOT value, it's the valuehere. And as this is a class, we have to usethis. So this dot State DOT value, if thatone isn't equal to the prep State DOT value,we want to do something otherwise, we willgo into an infinity loop here, and that'sno good, we check here, if the value in thestate isn't the same as the previous one,then we know that we should do something.All right. And then we have one prop thatsent in to this component, and we can destructurethat one out. So const, it's called set searchterm equals this dot props. So we destructurethis one out from the props. Because we sendin this function here, that's going to triggerwhen we do a search, then we have a timeout.It's the one here to copy this one, move itinside of there. Instead of const timer, we'regoing to set this one to this timeout thatwe created up here. So this doc timeout, isgoing to equal this one here. And the firstthing we also have to do is to clear thistimer, so clear timeout, this stop timeout,and this is why I have this appears so thatwe can access it here and clear it beforewe do something else. Alright. And insideof this timeout here, we're going to grabour state value. And we can also destructurethat one out. So cost value equals this dotstate. So we grabbed that property from ourstate. And instead of the state here, we giveit the value like this. So every time we typesomething in, we're going to set the stateand that will update the component, and itwill trigger this one, we cleared the currenttimeout and then we set a new one. And atevery 500 milliseconds, we will trigger thissearch function just as we did before. Then,in the class component, we have a render method.And inside the render method, we can returnthis logic here, we can grab this one, turnit out and paste it inside a render methodlike this. And this one, we have to changethis one, this dot state value. And also whenwe set the stage this one is incorrect here,we should specify this dot set state. Andour state will look like this we have an objectlike this URL, we have appropriately thiscalled value. And the value here is goingto be the same. And now you can see we don'thave any errors in this component. And that'sgreat. If you want you can also destructurethis value out up here just before the returnstatement, cost value equals this dot statelike this, and then we can use the value likethis instead. Save the component, go backto our application, make sure that you'rerunning the application, then we can try ifit works, and it's working. So it works exactlyas before, we're just using a class insteadnow. So this is how we refactor the searchbar to a class component instead. In the nextvideo, we're going to refactor the homepage.We refactor the search bar into a class component.And now we're going to refactor the home component.So make sure that you're inside the home.jsfile. And first, we can remove this hook here,like this, and up here, we're going to importthe component and the home function, we createa class called home that extends componentlike this. And the use on fetch, we're notgoing to use that one, we're going to copythat logic and use it inside of this componentinstead. So we have our state equals an object.And I'm going to have a property for thisone, that's called movies, that's going tohold the array with all the movies. And I'mgoing to give it the initial state. And thisone, we have that one inside of our hooked,that's called use home fetch. So copy thisone. And we can paste it in maybe here, heneed she stayed, he need to stayed. Yeah,it shouldn't be a see my column, because thisis no big. So we have a comma. And then we'regoing to have the search term, because nowwe have everything in the same state. We can'tseparate them out, then we have is loadingmore is going to be set to false initially.And we have loading is also going to be setto false. And we'll have the error false.So this is how the structure of a state isgoing to be. Yeah, I said I did this one isgoing to be an array, but it's going to bean object. And then we'll have the results,that's going to be an array that holds allthe movies. So you can structure it howeveryou want. This is the way I choose to structureit the movies is the data that we get backfrom the API, and the other ones are the onesthat we create ourselves. All right. Thenwe're going to make some room here and goback to the use home fetch hooked. We haveour fetch movies function here, to grab thatfunction. Everything, copy it, go back tothe home.js file and paste it in here. Belowthe state, we have to remove const. That'smovies, it's the same here. Here, we haveto do something else, because we don't havethe state as separate states. Now, to removethese ones. And this doc set stayed, we haveour object, we set the error to false. Andwe set loading to true like this. And hereyou can see we only changing the propertiesthat we want to change, React will merge theother ones automatically. And this is actuallydifferent from how the state works in a functionalcomponent with use state. With the use statehook it won't merge the old Stadium, theyalso have to make sure that you also providedone if you want to keep it. But in this case,we changing the error and the loading hereand other ones will stay the same. So thisis how it works in class components. All right,we have our movies, this one is going to bethe same. The set state is going to be quitedifferent now. First, I'm going to spreadout the previous state. And then I gotta havemy movies properties. Because inside of thismovies property that we created up here, we'regoing to place everything that's returnedfrom the Movie Database API. And that's thestuff that we have here, I'm actually goingto remove the sidebar also. So move this oneup inside of the movies object here. So wespread out the previous movies and never havethe results. And then we check if the pageis greater than one just as before. But herewe have to change this one because from theprevious state, we also have to go insidethe movies property, like this. So prep dotmovies dot results. The movies dot resultsis going to be the same here because thisis the new data that we grabbed from the API,so we merge that one. This one is also goingto be the same. So this is our set state forthe movies and then below we have a coma andthen we set loading False. And then insideof the catch, we don't have a set error. Sothis set stayed. We set the error to true.And we also set the loading to false. Likethis, we can remove this set loading here.This is our fetch movies method. That's calleda method. Now because we're in a class, thenwe don't have the use effect here to trigger.So we're going to have a few functions here,we're going to have one that's called handlesearch. equals, we have the search term, orcreate an arrow function for this one. Andwhen we search for something, we're goingto call this set state parenthesis and wehave our state object movies, we're goingto set the movies to the initial state justto reset it just as before. And then we alsogive the state the search term. And as thisis a sixth syntax, we don't have to specifyit like this, it's enough to just specifysearch term when the name is the same. Okay,so we set this state and when we have setthe search term, and also reset the moviesto the initial state, we want to do somethingwhen that state has updated. And in a reactclass on the set state, we have a callbackfunction that we can use that will triggerwhen the new state is set. So we have a coma,and I create an inline arrow function hereand go on another row here. So then we wantto fetch the movies, this dot, that's movies.And we give it the one because we're fetchingfrom page one, this dot stayed. And we giveit a search term, like that. And we can actuallyremove those curly brackets, I don't thinkwe need them. If we don't want to have them,it's up to you to decide. All right, so that'sthe search, then we have the handle handleload more function. And it's only going tobe an arrow function like this. And I'm goingto type it in on another row, this dot fetchmovies. And from this dot State DOT movies,we have the page. And we're going to add oneto the page, because now we're grabbing thenext page. And then we give it the start statethe search term. So we also provide a searchterm if we're in a search, right? We can actuallyauto format it yet, because there's some arrowsdown below here. So we're going to createa random method. And then we're going to movethis one this logic here, inside of the randommethod, like this. And then we have a fewthings to correct here. So first, I want todestructure out some stuff from the state.So up here, as the first line in the rendermethod, I have a const. I destructuring. outthe search term movies, loading and errorequals this dot state. All right, so thatwill fix a few things. Here, we have to changestayed, because it's going to be from themovies dot results. And I do that on all threeof these movies. And instead of set searchterm on the search bar here for that Prop,we're going to give it this dot handle search.And here instead of state, we're also goingto map through the movies dot results. Downbelow here, we change state. The movies onthis callback here is going to be this dothandle load more instead. And now we can autoformat it. And hopefully we won't have anerror. But there's one more thing that wehave to do. Because it won't fetch anythingyet. Yeah, of course, I have to have thisdot set state. And I haven't imported APIeither. So go back to the US home fetch. Grabthis one up here, copy and go to the home.We can paste it in here. And this will getrid of all the errors, but we're not actuallyfetching anything. Now, if we save this one,go back to the application. You You can seethat it's, it's empty here, because we won'twe don't trigger on the thing, we need tohave a lifecycle method to trigger when thiscomponent mount. And we have a lifecycle methodbuilt in for that. It's called component didmount. So we call that one and inside, we'resimply going to invoke this dot fetch movies.And we give it a one, because we want to grabthe first page or format it and save it, goback to the application. And now you can seewe have our data and our movies here. Andhopefully, everything works as it should.Yeah, it works. So that's how you do it. Andyet again, the app will look exactly the samehere, we have the same functionality in theapplication itself. But we have refactoredthe homepage, to use the class component instead.And as you can see, I think there's a lotmore code here. And I think it's actuallynot that easy to separate out things. So that'swhy I prefer to use functional component andthe use state hook can use effect instead.I don't really like this way of doing it anymore,especially with the state because you haveto nest a lot of stuff here. As you only haveone state, it's much easier when you can separatethem out into different states as you canwith the use state hook. Alright, just onemore thing to do in this section. And thatis to refactor the move a component to usea class component instead. And that's exactlywhat we're going to do in the next video.We're almost finished with a refactoring intoclass components, we only have the movie pageleft to do. And we're going to do that rightnow. So go back inside of the code editorand the inside a movie.js file. And for thisone, we're actually going to do a little specialthing here. And that's because we are usingthis hook here, use params. That's from reactrouter, version six. And there's actuallyno good way of grabbing the params in a classcomponent with react router, they have completelyremoved that functionality. And they do notsupport that for class components. That'swhy I'm going to do a little trick down belowhere at the bottom, just above where we exportthis one here, we're going to create the functionalcomponent for this one const. movie with params,like this, and then it's gonna take in someprops, we have an arrow function, actuallygoing to remove the sidebar again. And thenwe have our movie component that we have uphere. So this one is going to spread all theprops that this component receives that way,we can have more props, if we want to do that.So we just pass them along to the movie component.Then I'm going to create a prop that's calledparams. And inside here, I invoke use params,like this. And then instead of exporting themovie itself, I'm going to export movie withparams. So what I'm doing here is creatinga wrapper component that will show the movieclass component and also provide it with theparams for us. So that's the best way I foundof doing this actually, there may be someother solutions also. But I think this isactually kind of neat, because you can doit on one roll like this, before you havesomething that's called with router that youcan wrap your component with. But that's actuallynot provided in the React router Dom or inthe React router library anymore. So that'swhy I have to do it like this. Alright. Solet's reflect to this one, we're going toremove this hook here. And we can also grabfrom the use movie fetch hooked, we can grabthe API import. And I'm going to paste thatin the movie up here somewhere, maybe there.And we're not going to use that hook anymore.And of course, we have to rename this onealso. And up here, we're going to import componentjust as before, and we rename this one wecreate a class class movie extends component.This one, we can remove that one also. Andwe can actually create a render method rightnow and move this logic inside ofthat one. Something like this. All right,now we have some serious refactoring to dohere. So first, we're going to create ourstate. Whoever class property state it's anobject movie. I'm going to set that one toan empty object to start with. Then we'llset Loading to true and error to false, likethis. All right, that is the modal formattingthere also, then from the use movie fetchhook, I'm going to copy this fetch movie functionlike this. For this one, I'm not going toimplement the session storage. So I'm justcopying this one here. And I didn't do thatin the home component either. Right pastedin here in the mover component, we removethe const from fetch movie. Let's just beforewe have to refactor this one, this one becomesthis set stayed parenthesis and we have ourobject error is going to be false. And loadingis going to be true like this. And then wecan also destructure out or or Prop, becausewe're sending that in with that special littlecomponent that are created down here. So nowwe have access to a prop, that's called params.So destructor that one out, because we'regoing to need the movie Id like this equalsthis dot props, dot params. And that willgrab that one for us. All right, these onesare going to be the same. This one also setstate we have to change this one, this onealso this dot set state, and the state isgoing to be movie, we have that property,it's an object. So we move these ones up insideof that object. And then we have a coma. Andwe set the loading property to false likethat. That should be if we're not one, we'regoing to remove the set loading. And here,change the set error to this dot set state.parenthesis and object error. True and loadingthe false. All right. And I think that's itfor that function. And then we're going tohave a lifecycle method also, for this one,the component did mount we're going to dosomething when the component mount, and theonly thing we're going to do is to invokethis dot fetch movie. And then down belowin the render function. We can destructureout from our state const. We have our movie.We have the loading, we have the error. Andthat's it. Then we grab them from this stuffstayed. And hopefully, it will work here now.Yeah, I think that's fine. There's a moreformatting. And let's see if it works. Wesave the file, go back to the application.is grabbing from the session storage? No,I think. Yeah, it works. So that's sweet.We have successfully refactored this applicationinto something that what I think is a worseapplication because we use in classes. Now,I wouldn't do it like this, I would keep thefunctional components and the state with hooks,and the use effect and the use state stuffthat we use in the application. But it's upto you to decide that. But hopefully thisgave you an idea on how class components worksin react, and to keep state in class components.And the lifecycle methods. There's more lifecyclemethods, but I won't go into them here becauseI'm not using them in this application. Sothat's why all right, in the next bonus section,I'm going to talk about TypeScript. And we'regoing to refactor our application into TypeScript.Welcome to this bonus section, where we'regoing to reflect your application into usingTypeScript. And TypeScript itself is quitea large topic. So we will only scratched thesurface actually. But hopefully, that's goingto be enough to give you a basic understandingof how TypeScript work and especially withreact. So TypeScript is an extension of JavaScript.And it adds types to JavaScript. So that'sgreat, because JavaScript is actually quitea loose language where you can do whateveryou want, and it still works. So it can bea little bit messy if you're in a large application.So TypeScript will transpile down to JavaScriptin there. And so that's why, as they say here,all valid JavaScript code is also TypeScriptcode. So you can decide how much you wantto type stuff and how strict you want to bewith TypeScript. And TypeScript is gaininga lot more ground. And it's almost a standardtoday, when you create something from scratch.A lot of applications, of course, don't useTypeScript, as they are And there's a lotof code base out there that hasn't been refactored.And you probably shouldn't do it for all ofthe applications either. But TypeScript isgreat if you have quite a large application,and you want to keep track on types. And it'sreally great also, because it's kind of liketo have a second coder beside you, that tellsyou what you do wrong. Meanwhile, your code.So it's a great way to write a lot more error,less code. I think that's one of the greatthings with TypeScript because you have areally powerful IntelliSense with TypeScript,and it will tell you if you do something wrong.All right, that was a really short introductionto TypeScript. In the next video, we're goingto set up a project and start refactoringour application into using TypeScript. Alright,let's start refactoring our application intousing TypeScript. And I'm actually going tocreate a complete new application with createreact app. And that's because you can alsocreate an application with TypeScript support,and it gives you some defaults and setup thatwe can use. So we don't have to do that ourselves.If we look here, with create react app, wecan flag it with template and TypeScript.And that will create our application withTypeScript support. So that's what we're goingto do first. So make sure that you're insidea folder where you can create a new project,and then go inside a terminal. And that'sgoing to show you this also. And then we typein MP x, create dash react dash app. And thenwe name our application, React dash or IMDbdash, Ts. And I think you also must have onlylowercase letters in the naming. Then we flagit with template type scripts, like this.And we press enter, and we wait for it. Alright,that's the bootstrapping of the applicationitself. So let's navigate inside of that folder,CD, React dash or IMDb dash Ts. And you cansee that we have some different files here.So that's great. Well, one more thing thatwe need to do before we can start coding,and that is to install our dependencies inthis TypeScript application, also, to havethe style components. And we also have theReact router. So let's start with the stylecomponents, MPM, I style dash components.And as this is a TypeScript project, we alsoneed the types for style components. And ifa library won't provide you with types, bydefault, you can usually find the types inAD types forward slash, and then you can typein the name of the library that you're installing.So in this case, it's going to be ad types,forward slash styled dash components. Andwe'll press enter. Alright, so that installedcorrectly. And then we also need to installthe React router, the next version, the versionsix and the types for that one. So MPM I,if you remember, we also install a librarythat's called history, that one is used forreact router, history, space, and then wehave the React dash router dash dome at next,just as before we grab in your next version,and that is the version six, then we havea space. And we're going to grab the typesfor this one also. So add types, or a slash,React dash router, dash dome, and we pressenter. Alright, so that's the dependencieswe need for this product. But there's onemore thing we have to do, because now we havebootstrap this new TypeScript application.But we want our old files inside of that one.So if we look here, here's the file for thisproject. I'm also showing the hidden fileshere. So we have the Git and Git ignore. Sonow inside of this src folder, here, we haveall the TypeScript files. But we want ourfiles instead. And therefore, we can actuallyremove some of those files here, we don'tneed to set up tests, we don't need a serviceworker, we don't need a logo index CSS app,we can still keep the index actually, becausethat one is already set up for us. The otherones we can delete. So just keep the indexTSX and the React app and the.ts. And removethe files. Like this. And then from our finishedapplication, I'm using the hooked versionnow. So not the class based one, use the hookbased one. And we're going to grab from thesrc folder, the API app components, config,global style helpers, hooks, images, everythingexcept the index.js file, copy these ones,and go inside the src folder of the newlybootstrapped TypeScript project and pastethem in. And the application won't work nowbecause we have to do a lot of stuff hereto get it to work, but that's fine. There'sone more thing we have to do also analysisto copy your dot m filelike this or if it says that you can't copyit because it's hidden, you can create a newdot m file and set up your environmental variablefor the Movie Database API there again, sojust copy. So just copy that code from yourother m file and create a new one and pasteit in. Because it's really important, becausewe need that one to be able to fetch datafrom the Movie Database API, we have copiedall the files that we need for our TypeScriptproject. And that means that we can closethe other project and we're going to be inthe new project from here on. In the nextvideo, we're going to convert this base fileshere, the API, app config, global style helpers,and stuff like that into TypeScript. And thenwe'll move on with the components and thehome and the movie page. Okay, before we doanything, I have to correct the mistake Idid in the last video. And that is the dotm file, it shouldn't be in the src folder,it should be in the root folder. So move thisone out to the root folder of your project.And make sure that it's outside the src folder,otherwise it won't work, we can go insideof our terminal and try to start a projectup, we will get an error or probably a lotof them. As you can see, because we haven'tactually converted anything into TypeScriptyet. So that's why. So first in the indexdot TSX file, we have to do some cleanup,we're going to remove the index dot CSS, we'regoing to remove the ServiceWorker like this,and save the file. And then we have somethingthat's called react dash app, dash m.ts. Andthis is the references for the types for reactscripts. So we'll leave this alone. And alsowe have something here that you can see that'scalled Ts config dot JSON. And this is thethe config you can set up for TypeScript.So this is why I wanted to bootstrap the applicationwith create react app, because they alreadyset this one up for us. So they have a lotof great defaults here, that set up for us.And if there's something special you wantto configure for TypeScript, you can do itin this file. So you can add them here, it'sactually a lot you can do to set it up justas you like it. But we're not going to dothat we're going to use the defaults thatcreate react app provides for us. So we cleanedup the index dot TSX file. And we're goingto refactor all of the other files here inthis video. So we can start with the api.jsfile, we have to rename it, we're actuallygoing to rename all of these files. Becausethey they should be called.ts. So that itindicates that it's a TypeScript file, sowe renamed them to.ts. Instead, all of thesefiles is going to be.ts. The app is actuallygoing to be dot TSX. And that's because weusing JSX, inside of that one, otherwise,it won't work. So every time you use JSX,make sure that you have the file extensiondot TSX. Otherwise, type TypeScript will fail.Alright. So that's the renaming of the files.And then we can start in the api.ts file.And for this one, we're actually going tocreate some types because we returning datafrom the API, and we need to type that data.But first, we can start to actually type thefunctions themself. So here, you can see thatit complains, no parameter search term implicitlyhas an any type. And that's because we haven'tset any type. This one, if we want to specifya type on this parameter, we use a colon.And then we specify it as a string. And youcan see that it stops complaining now. Andthat's great. And the page, this one is actuallygoing to be a number. So we specify it asa number. So that's how you specify parameters,you have a lot of types you can specify forthem. And then if you want to specify thereturn type on the function, you can see thatTypeScript actually won't complain out becausethe default setup don't force us to specifya return type. But I want to show you howwe can do that. And in this case, it's a promisethat we return because we're fetching fromthe API and we get back a promise. So if wewant to type the return type to be a promise,we have a colon here. And then we specifyit as a promise. But the promise needs somethingelse you can see here represents the completionof another, blah, blah, blah, generic typepromise requires one type argument. And whenyou send in a type argument type like this,you do it inside of angle brackets, and we'regoing to specify that this is going to bethe type of a new type that we're going tocreate. That's called movies. We haven't createdthis one yet. So of course, it complains.So we're going to do that in a second. We'reonly going to specify this const here also,the endpoint that we create here. We havea colon and then I type it as a string. Sothat's how we typed this function. And nowwe're going to create a type. That's calledmovies. And the actual data that we get backfrom the API is, it has a lot of properties.So I'm only going to type the properties thatI'm actually using inside of the application.So we can mark it with types here. And thenI got to export this type, because I'm goingto use it in another file. So that's great.You can also export the types, you don't haveto specify them all over the place, you canspecify them in one file, and you can exportthem and import them wherever you need them.So export type movies like this. And fromthe API, we get the page. And that one isgoing to be a number, you could also createsomething that's called an interface. Andthen you do it like this. They are almostthe same today, in the new versions of TypeScriptbefore there was some major differences. Actually,the recommendation is to use type in a reactapplication. So we're going to do that. Soexport type movies and then equals and theobject, then we have the results. And theresults is actually going to be all the movies,we're going to specify another type, that'scalled a movie, that's a singular movie. Andthis one is going to be an array. So it'sgoing to be an array of the movie type. Sothis is how we specified our array. So ifyou had an array, for example, with only numbers,you can specify it like this. But we are goingto create another type object, that's calledmovie. And we're going to do that in a second.But first, we're also going to type the totalpages, it's going to be number. And then wehave the total results, that one is also goingto be a number. Do some more formatting. Andyou can see in the type of bacteria that ituses see my colon and not coma as in a regularJavaScript object. I actually think it willwork with coma also. But the formatting isset up, so that it uses see my column, butyou can see that it, it seems to be working.But when I want to format it, yeah, it willreturn to the semi colons. Okay. All right.So we need to specify each specific moviehere. So we create another type that I export,export type movie equals an object. And herewe have a few more of the different properties.So we have the backdrop underscore path isgoing to be a string, the ID is going to bea number, the original underscore title isgoing to be a string, the over view is goingto be a string, it's easy to have a typo here.So be careful. popularity is going to be anumber, poster underscore path is going tobe a string, the title is going to be a string,the vote underscore average is going to bea number. And the vote underscore count isgoing to be a number, the budget is also goingto be a number. And then we have the run time,it's the number also and and the last oneis the revenue. And it's also going to bea number. So that's the type of object fora singular movie. And now you can see thatit won't complain here, because we using thatone and telling the results is an array ofthe type movie. So each element in the arrayis going to be an object of this type. Sothat's how we specified it now. All right,and you can see that it won't complain herenow, because we using this type here, themovies, so that's fine. Then we move on tothe fetch movie, the singular fetch. For eachmovie, we have this parameter here. So wehave to use parentheses. When we type this,the movie ID is going to be a number. Andthe return type is going to be a promise again.And this time, it's the movie, we alreadycreated this one because it's a single movie.So we have this object here. So that's great.And we can also specify the endpoint, youcan see that it won't complain because thedefault setup won't force us to specify everything.But it's always a great ID to specify whattype you return in the context. All right.So that's the fetch movie. And you can seealso bonus material for login. We're not goingto type this one. So I'm going to stop herefor the basic fetch functions here. So fetchcredits We have the movie ID, that one isgoing to be a number, like so. And it willalso return a promise that we create a typethat called credits. But before we do that,we can also specify the credits endpoint asa string. All right, then we go up here, again,just below the type movies, we're going toexport the type that's called credits, it'salways a great idea to export the types becauseyou never know when you need them. That way,you make sure that you can access them fromanywhere in your application, the ID is goingto be a number, the cast, we're actually goingto create a new cast object for that one.So it's going to be an array with an objectthat we specify as a cast. And we're goingto do that in a second, we have the crew,and it's also going to be a new type object.So an array of crew like this. So up here,we export the type to cast equals, we havethe character is going to be a string, thecredit underscore ID is going to be a string,the name is going to be a string. And a profileunderscore path is also going to be a string.If you want to type these in one row, insteadof typing them out, when all of them goingto be a string, you can do it like this. Youhave a square bracket, and then you have theproperty, the property is going to be a string.And then the type is going to be a stringlike this. And this will also work. But Ithink it's better to be more explicit andtype all of them like this, then we have thecrew. So export type, crew equals object jobis going to be a string name is also goingto be a string, and the credit underscoreID is going to be a number or to format itand save it. And hopefully this will work,you can see that it will, it will give ussome arrows here now because I won't typethis one here. Or is it only Yeah, I can actuallyjust type this one. So we don't have an error,the request token is going to be a string.The username is also going to be a string.And the password is also going to be a stringsome more formatting, and then we have themon the wrong row. So that will get rid ofthe arrows. But we won't focus on these belowthe bonus material, all of these ones here.So that's what we're doing. Alright, savethe file. So that's the api.ts, then we'llhave our app dot TSX file. You can see herenow that it complains, because we don't havethe types for this one. And that's becausewe're using the next version. So in this case,I'm just gonna ignore it, because I know itwill work. So when you ignore something withTypeScript, you can do that by command andn at Ts dash ignore. And that will get ridof that error. So we have to do this for now,before it is officially released, then theywill provide the types for it. And then wedon't have to do it like this. And the onlything we have to do more is to specify ourreact component. So this is a functional component.And if we do a colon, and react.fc, we havethat built into react. So we have that typefor a functional component. So this is everythingwe have to do to specify this as a react functionalcomponent. Alright, save the file. Then wehave the config.ts file. And the only thingwe have to do here, if we want is to specifythose strings, because all of them is strings.This one can be undefined also. So yeah, well,we can do it, API URL colon string, this onecolon string. And if it can have more thanone value, we can have this pipe. And we specifyit as undefined also, because you can seeif I remove this one here, it complains becauseit tells us that type string, undefined isnot assignable to type string, because wesaying that it can only be a string, but itcan actually also be undefined. So TypeScripttells us that Yeah, you're doing somethingwrong here. So this one could also be undefined,so you should do something about it. So that'swhat we're doing here. Pipe undefined, likethis, and it will be happy and all of theother ones will be strings here. So I'm justgoing to do it quite fast. string, stringstring Spring lists one here, a string andthis string and the last one a string. Right,save the file. That's the config. And thenwe have the global style, we don't need todo anything inside of here, this is a startcomponent. So it's fine like it is now, thehelpers.ts here, we're going to start thisones up also. So here we have this time puram.So we create parenthesis. And this one isgoing to be a number. But the return typeof the function itself is going to be a string.So we type it like this, and ours is goingto be a number. And the means is also goingto be a number. So that's it for that function,then we have to convert money, parenthesis,it's going to be a number, and it's also goingto return a string. And this one is a specialone. So you can see that this format here.The type is actually this one here into intoDOT number format, international number format.So copy this one. And we can actually specifythis as a type also for it. Like so. Thenthe last one inside of this file, is the statename. This one is going to be a string. Jason,of course, has an Annie type as a return type,we can specify Annie, it shouldn't actuallycomplain here. Yeah, and that's because thisis named the wrong way. Here it should besession state. So that's why. So JSON dotparse, has an any type. So that's why we haveto specify it as Annie, you should avoid specifyanything as Annie, because you remove allthe type checking here when you specify itas any, because you're saying that it canbe of any type. So always make it a habitto not use any if you can do only use it inspecific case like this one, because thisone will return. And that's why we have tospecify it as an ID. And that's it for thesefiles. Here, we can start up our applicationto see that it works NPM start. And it seemsto be working. So that's sweet. In the nextvideo, we're going to refactor the homepageto use TypeScript and also the componentsthat we use on the home page itself. Alright,let's continue to refactor the applicationinto TypeScript and move inside of the componenthome dot j s, we're going to rename this fileto Ts. And also I can tell you that if welook here in the terminal, I don't run mydev environment, because when you change thefile names, it will break. So you'll haveto restore it again. So that's why I'm goingto start it up later. But if some stuff don'twork, because I've changed some file name,or things like that, try to break it and startup your dev environment again. rights arerenamed the home Ts like this. And then insideof that file, the only thing we have to dohere is to specify this as a react dot functionalcomponent react.fc. And you can see thereactually made a mistake here, this one shouldn'tbe Ts, then it won't work because we havegay sex here. So this one should be dot TSX.So change that one to home dot TSX. And thenit will work hopefully, here we have somestuff that it complains about. And that isbecause we haven't typed anything yet in ourhooks that fetches that data. So if we moveinside of the hooks, and use home fetch, firstwe rename this file to.ts. Here, we're notusing any Deus Ex, so we can name it to.ts.Okay, the first thing we have to do here isto import the type movie. And we do this insideof curly brackets, because this is not thedefault export. And then it complains hereon the page, this one is going to be a numberand a search term, it actually interpretsthis one as a string, because we set it asa default string here. So we don't have tospecify anything more here. But it complainsabout the state. And that is because if wehover over this use state, you can see thatresults is set to never it doesn't know whattype this will be. That's why we can specifyit as movie and an array. So we're tellingit that we're setting this to an empty array,but it should interpret it as a movie array.So that's why we imported it up here. Andthat's why we also get the types on the statecorrectly here. So in the home, you can seethat the warnings has disappeared becausenow it knows all these types because it interpretedfrom this hook here as we telling it thatthis state is Gonna be of this type. And thenit follows along inside of this file, that'ssuper great. Say the home also, then we'regoing to refactor the components that we'reusing for the home component. So we have thebottom. So in the index.js file, that oneis going to be renamed to index dot TSX. Andthe style file is going to be renamed to.ts.Because we're not using any JSX inside ofthat one. And for a style file, we don't needto do anything there. But in the index dotTSX file, we have to do some stuff, becausenow we have some props here. And we're alsogoing to remove prop types. We don't needthat one when we're in TypeScript. So removeeverything that has to do with the prop types,then here are going to specify types. AndI created a type that are called props. Youcan call it whatever you want, it doesn'tneed to be called props. So we have the textprop here, text, that's going to be a string.And then we have the callback, then I'm goingto type this very loosely, it's going to bea function that returns nothing. So when wespecify to void because void means that itwon't return anything. So this is a clickcallback. All right, but it still complains,we have created a prop object. So we haveto specify the button as a react dot functionalcomponent react.fc. And if we want to specifyour props, we can do that inside of anglebrackets. And then we use our props object.And then you can see that it works. It knowsthe types now of these props, you can seeif we hover over them, you can see the types.Right, so that's it for the bottom. Now wehave the grid, the grid styles, we're goingto rename that one to grid styles.ts. Andthe index is going to be renamed to dot TSX.Yet again, for the stars, we don't have todo anything here because we're not sendingin any props to the style components. In theindex dot TSX file, we have to do some stuff,though. So we remove the prop types. And alsomake sure to remove them at the bottom here,like this. Then I specified types. And I createa type props an object and we have the header.We set up one as a string, the children, wedon't need to type that one because that'sbuilt in to react. So we specify the gridto react.fc. We have angle brackets, and wegive it the props object. This is it for agrid. Move on to the header header dots headerstyles is going to be.ts like this, and theindex is going to be dot TSX. Nothing to doin the stars file. But in the index dot TSX.We can do some stuff. We only have to specifythis as a react.fc. That's everything forthe header. All right, then we have the heroimage here we image dot Stiles is going tobe renamed to.ts. And this index.js is goingto be renamed to dot TSX. Instead, in thisstar component, we actually have to do somethingbecause we have this prop here and we haven'tthought that one up here. I mark it as types.I create a type props equals, we have theimage and this is going to be the URL so it'sa string. And when you type a style component,you do it here just after the components youchoose to create. We have the angle bracketsagain, and we send in the props like this.There you have it, that's the styles. Thenwe have the index dot TSX remove the proptypes. Just as before we specify our types,type props equals an object image is goingto be a string title is going to be a stringand the text is also going to be a stringwe specify it as a react.fc. We have the anglebrackets and send in the props. And this shouldbe it for this component save it move on.Moving for moving football These are for themovie page we have the search for the index.jsis going to be renamed to index dot TSX. Thesearch for styles is going to be.ts we don'thave to do anything In this style file, butin the index dot TSX, we remove the prop types.everything that has to do with prop types.Then we have the types. I create a type propsequals an object. And then we have the setsearch term and this one is going to be acallback. And how do we type this one? Well,this has implicitly an Annie type. But ifwe go back to the home, and see where we havethe search bar, you can see here, and here,we actually get that type. So when you hoverover stuff, we get the type. And that's reallygood, because we can actually just copy thisone, copy and move back to the index dot TSXfile in the search bar. And then we pasteit in here. So this is the React dot dispatch.And inside here where the React dot set stateactions, so this is the type for the setterfor the use state. And it's a string in thiscase, if it was a Boolean, it would have saidBoolean here instead of something. First,we have a react dot dispatch. And we specifythe type that is, is that it is a state action.And we specify that one that it's a stringthat we're going to set this state with. Sothe search bar is going to be a react.fc component,we have the angle brackets, and we give itthe props. And that's it for the search bar,move on to the spinner, spinner Stiles isgoing to be renamed.ts. And the index is goingto be renamed to dot TSX. The Spinner we don'thave any props for that one. And this oneis actually nothing to do because it justexports the star component. And the last oneis going to be the thumb. So we renamed theindex to dot TSX. And the thumb styles isgoing to be.ts. So nothing to do with thestyles but in the index dot TSX remove theprop types like this. And then we specifytypes, type props, equals, the image is goingto be a string because it's the URL to theimage, then we have the movie ID, that oneis going to be a number and the clickableis going to be a Boolean. And then specifythis as react.fc. And we give it the props.And this should be it save the component.And I think we should be able to start upour application. So we run NPM start. Let'ssee if we have any errors. It actually seemsto be working. Alright, that's great. I didn'thave any typos or stuff like that. That alwaysmakes me happy when it works the first time.Okay, so that's the home component. In thenext video, we're going to convert the moviepage and all the components for that pageinto TypeScript. So we're going to refactorto move a component and also actually thenot found component. So we're going to startwith a not found this one is a small component,so we just specify this as a react of FC.And that will be that one. And we also haveto rename it to dot TSX. And save the file.And now if we look in the console, you cansee that it gives an error, that's becausewe renamed that one. And that's what I meantbefore break it, and you have to restore it,otherwise, it won't work usually. Okay, solet's move inside of the movie.js file, renameit to move it off TSX. And then we're goingto refactor some stuff here. So we specifyit as react.fc. We don't have any props forthis one. And you can see that it complainsnow because it can't interpret the types here.So we're going to fix that in the hook. Sogo inside the hooks and use movie fetch, werenamed this one to.ts. And we also need toimport some stuff here, we need the movietype object, we need a cast and crew. That'sthe one that we created all errors, we importa mural. So now I'm going to specify sometypes. Export type, movie state, and the moviestate is going to be the movie. But as I'malso creating these properties, myself, theactors and the directors, I have to add theseones, so we can actually merge them togetherto one type. So we use the ampersand and thenwe have the object The actors is going tobe an array of cast, this and the directorsis going to be an array of crew. And thatwill create a type object with the movie.And then we merge in the actress and typedomestic an array of cast. And then we havethe directors and we type them as an arrayof crew. Right? The movie ID, it complains,here, we have to specify the types. It wasspecified as a number. And the use state here,it doesn't know what state is this actually.So we're going to specify the state, we havethe angle brackets, and then we can give itthe movie state. And then it will know thatthis state will have this type. But it complainsnow, and that is because we're setting itto an empty object. And it doesn't like that,because we say that it can only be a moviestate. So we could do it like this, if wewant to tell it that it can also be an emptyobject. Or we can do as we did before, wesay as movie stayed, like so. And it won'tcomplain anymore. So that's everything wehave to do, I think the movie ID okay. Yeah,we also have to make this a string becausethis persistent state function is taking ina string. And this is actually a number enough.So you can see how great it is with TypeScript,because it's telling us when we're doing somethingwrong, so we convert this one to a stringwith a built in function like this. And thenI bet it's the same here yeah.to string, likeso. And this will hopefully be it. Back insidea movie dot TSX file. Yeah, and this is becausewe get a string back from the API. And nowit wants a number. So we can convert thisto a number. And there are smoother ways ofdoing this. So you don't have to convert itlike this. But I think it's a great practicein TypeScript. So that's why I did it thisway. So we can convert it because TypeScriptwill complain if we send in the wrong type.But of course, we could be more consistentand refactor some stuff in the use movie setand also in the API file, to specify the correcttype from the beginning. With course in theAPI here, you can see that the movie ID isa number, we could specify this as a string,instead, we can actually do that. So we makethis a string. Or we specify this as a number,this one should be a string. And we save itgo back to the movie. And now it should work.Yeah. So that's probably the way to do itinstead. So you don't have to do all thisconverting. And now we have to refactor thecomponents that we use for the movie pagealso. So let's begin with actors, right, thedot styles is going to be active.stars.ts.And index is going to be dot TSX. We don'thave any props in the styles. So we're onlygoing to be in the index dot TSX. Remove theprop types just as before. And then we havethe types. types, I created type props equalsan object, we have the name is going to bea string, the character is going to be a string,the image URL is going to be a string also,we specify this so react.fc. And I give itto props. Just as before, save the file, thenwe're going to be in the breadcrumbs. So renamethis one also.ts. And the index is going tobe dot TSX. Same goes with the stars. We don'thave to do anything but in the index dot TSX.Remove the prop types. A lot of repetitivestuff here, but that's great when you learnthings. As I told you before, I specifieda types type of props equals an object. Wehave the movie, that's the URL, so it's astring. And then this one is going to be arec.fc and where the angle brackets and giveit to props. Yeah, I actually named it movietitle. That's what it should say. Right, that'sthe breadcrumb. Then we have the movie inforenamed the index.js to index dot TSX andthe movie info tiles is going to be renamedto.ts. And the story in the stars becausethis one was sending in some props to up here,a market with types created type props, equals,we have the backdrop, and is going to be astring. Just as before, we have the anglebrackets here on the component that we crave,and we send in the props. Don't know why it'sstill red. Yeah, that's because this one shouldbe named animated movie info like this. Soyet again, you see TypeScript is great, becauseit will warn us, if we don't do stuff theright way, it will warn us save it. BecauseI didn't see this actually, when I createdit before in the course, I forgot to namethis one. And I didn't see a warning. Butnow TypeScript warns me about this, save thefile, and go inside the index dot TSX filelike this, we remove the prop types. And we'regoing to have some types for this one. Forthis one, I'm going to import the movie statefrom dot dot forward slash dot dot forwardslash hooks, and use movie fetch. Like so.And then I also going to specify a type propsequal an object, and we have the movie, andthe movie is going to be the movie state type.So you can see here I import the types, Idon't have to specify them again. I mean,if you really love structure, you can createspecific files for your types and have theminside of those files. All right, movie info,it's going to be a react.fc are going to giveit to props, like so. Alright, then it complainshere, this one shouldn't be here. And compliance.Again, I did a mistake here. And you see TypeScriptis great. It tells me that this mistake Yeah.And that's because I'm not providing a movieID for this one, because we shouldn't be ableto click it. So go back inside of the thumb.And this one, movie ID should be set to optional,you can set an optional prop with a questionmark like this, save the file, go back. Andyou can see that the warning disappeared fromthe movie info. Alright, save that file. Andwe'll have one more component to go. That'sthe movie info bar, rename this to dot TSX.And the styles.ts, we don't have to do anythingwith the styles. And inside the index, weremove the prop types like this. And thenwe specify the types. So I have a type props.An obit time is going to be a number, thebudget is also going to be a number and therevenue is going to be a number. And thenwe specify this as the rec FC, we have theangle brackets and give it to props, we autoformat it. And it should hopefully work, savethe file. And this my friend should be itactually we have successfully, hopefully,refactor this one into TypeScript. So let'smake sure that it works. Go inside the terminaland run NPM start. And it works. super great.There you have it, you have a TypeScript applicationnow. And everything works as it should. Noarrows anywhere. Sweet. There is the TypeScriptpart. And in the next part, I'm going to showyou some extra stuff that the Movie Databasecan do. And that is a neat little login system.And then you can vote on the movies. We'vereached the last section of this course. Sofirst, congrats to you because we've comea long way in this course. And I hope you'velearned something about react. In this partof the course, I'm going to show you how tocreate a login for the Movie Database APIfrom our application, and you will be ableto vote on the different movies. So first,I just want to show you on developers dotthe movie db.org what we're going to use tomake the login work. So down here where itsays movies, I clicked on this one, you cansee the complete API for the movies. And theyhave one here, that's a post that's calledrate movies. So this is the one that I clickedon here. And by posting to this URL here,we can rate the movies and we have to provideour API key and we Also to provide a sessionID. So that's where we do the login. And thelogin is, I think, somewhere. People search,where do they have a authentication, theyhave a lot of stuff here. And first you haveto create a request token. And then we createa session. So we get a session IDs. So there'stwo steps you have to do to be able to login. And they also recommend you to actuallyreroute to the Movie Database for making thelogin. But it also provided with a solutionhere that we don't actually recommend whereyou can log in from your own site withoutleaving that application or the site. So that'sthe one I'm going to use here. And the reasonfor this bonus chapter in the course is actuallythat I want to show you how to create a globalcontext and store the user the logged in userin that global context. That's the main partthat I want to show you. And also, I got alot of requests to show how to make a loginform and be able to vote on the movies. Thereis one thing though, that's not going to workwith this solution. Because it's not a fullysolution. Really, in this case, you have touse your login from the movie database tobe able to log in. So we won't be able tocreate a new users and stuff like that. Andthe best thing would probably be to buildyour own API, your own back end somehow tohave your users log in there and save dataso that you can save all the stuff about theuser. So there's a lot of different approaches.And this is absolutely not a fully login systemand voting system. I just want to show yousome small tips and tricks here to get youstarted if you want to create your own fullyfunctional logging system, and stuff likethat, Okay, so let's get to it. I'm just goingto show you the code shortly here, beforewe move on in the api.js file. I have createdthese functions for us here down below thiscomment to your bonus material below for login,I have a function that called GET requesttoken so that that will obviously get therequest token from the API. And then I havethis one that's called authenticate. And Idid some comments here also. So first, wehave to authenticate the request token thatwe get from this one. And then we have toget the session ID with a request token. Sothere's actually three steps and not to orderthem because we have to get the request tokenfirst. And then we authenticate that requesttoken. And then we get the session ID andthen we are logged in. And then I have thisfunction down below here. That's called ratemovie. And this one will send a rating scoreto the Movie Database API, and hopefully returnan object that says that we were successful.So that's what we're going to be using inthis part of the tutorial. So let's get started.In the next video, we're going to create aglobal context and a global state that wecan use to store the user in. Alright, let'sstart by creating a context for our application.And we are touching on China have advancedstuff now in react. So don't feel bad if youdon't understand all of this stuff the firsttime. All right inside the src folder, we'regoing to create a new file that we call context,dot j s. all lowercase letters seem to bein the root of the SRC, not in the componentsor anything like that, in the root of thisare See, I can close this one here. So wehave the context.js file, and inside of thatone, we're going to import react, comma andthe use state that we imported from react,then I'm going to create something that'scalled a context in react. And when we createa context, we are creating something thatwill make it possible for us to provide ourapplication with something in this contextthat we want to use down in the componenttree in the application. In this case, it'sgoing to be estate value and a setter thatwe're going to use. So the context can beany value that you want to provide down toyour application. But it's really, reallyhandy if we want to have a state and a setterthat we want to be able to access from anywherein the application. So I'm going to exportthis one because we have to import the contextin the component where we want to use it.So export const, I call it context. With capitalC, you can call it whatever you want. It doesn'tneed to be named context. And from react.wehave something that's called create context.And I call this one. You could also of course,imported up here, like this. We can do thatinstead. If you feel that that is better.I don't know really. All right. Then I'm goingto create something that's called a provider.The provider is going to wrap our applicationand make sure that we provide this value toour application so we can decide where wewant to wrap this provider in our application.In our case, we're going to wrap it in theapp component later so that we can The valueto our complete application. So we wrap ithigh up in the hierarchy, so that the completeapplication and all the components will haveaccess to this value. So I created a const,I call this component use a provider, I destructureout the children's, because we're going touse this component to wrap our application.So that means that the children is going tobe the app. In this case, I have a fat arrow.And then I'm going to create a state const.State Set state just as we did before, I callthe use state hook. And I can give it thevalue of undefined as initial value. Right,that's our state's we creating this one inthe use of provider, then we want to providethis one to our application. So I'm goingto return from the context we created up here.context, that's a component, we have somethingthat's called a provider. So context dot provider,capital C, capital P, and then we have a propis called value and inside the value prop,we can provide this value that we want ourapplication to have access to. So a curlybrackets, and I want to provide an array withthe state and the set state, that will makesure that we get the exact same structureas we do here with the state, we have thestate itself, and then we have the setterin an array. So that's what I'm doing here,I'm giving it the exact same structured array.Alright, so inside this one, we're going toreturn the children. And this makes sure thatwe can use this provider to wrap any componentin our react application, and it will provideit with these values. Now we have to exportdefault use of provider like this, save thisfile, we finished here. This is how you setup a global context and a state that you wantyour application to be able to access globally.Now, we're going to move inside of the app.jsfile, and inside this file up here somewhere,we can mark it with context. And we import,use the provider. That's the one we createdfrom dot forward slash context. All right,so that's our provider component. And we wantto place it high up in the hierarchy. So wecan just place it here inside of the router.Use a provider like this. And we're gonnatake this one here and move it down and dosome auto formatting. So we're wrapping orcomplete application inside of the use ofprovider. And this makes sure that our completeapplication will have access to the statethat we created. So we're going to use thisone later. But first, we're going to createa login page. So that's what we're going tostart doing in the next video. We're goingto start creating our login component. AndI didn't say that I'm using the version ofthe application without TypeScript. So youshouldn't use the one with TypeScript usethe original one that we finished before wedid anything with TypeScript. And also beforewe refactor it to classes, because I'm usingthe functional component version, just tobe super clear, so that you know what productyou're using for this one. Alright, let'smove on inside of the components folder, we'regoing to create a new component componentthat called login dot j, s, capital L. Andwe import react. And we're also going to needyou stayed and use context, that's the newhook that we're going to use to grab our context.I'm going to show you that in a second. Andwe import this one's from react. Then we'regoing to import something that's called usenavigate from react dash, router dash DOM.And this one is used if you want to navigateprogrammatically in your application, thenwe're going to need a functions that I showedyou in the API file, so import API from dotdot forward slash API. For this one, we'regoing to reduce the button component. So Imarked it with components import button fromdot forward slash bottom. Right. And thenwe're also going to create some styles forthis one. So we can actually do that now andscaffold them out first. So we create a newfile in the components folder that's calledlogin dot styles dot j s. We're going to createthe actual styles in the next video. But fornow, we import styled from styled components.And we export const wrapper and it equalsA styled dot div and double backticks savethe file Go back to the long end note as wemarked it with styles and import refer fromdot forward slash login styles, login logindot stars like this, and then we need ourcontext. So I marked it with context. Andwe import context from dot dot forward slashcontext. And that's, of course, the one thatwe created before. All right, then we cancreate our component cost login equals, wedon't have any props for this one, to makean explicit return, and we have a return statement.And we can create the JSX. First, I'm justgoing to export default first also. So don'tforget that one export default login. In thereturn statement, we're first going to returna wrapper. And inside a rapper, I'm goingto create the label. I'm going to type inusername colon, number load at one, I createdan input field input, the type is going tobe text, the value we're going to grab thevalue later from the state. So I'm gonna justmark it with state value for now. And thename is going to be username. The onchangeis going to be handled input. And that's thefunction that we're going to create, we canscaffold this one out here, first const handleinput equals on our function, we're goingto take in the event, I can skip the parenthesesas it's the only one parameter. And we justcreate an empty function from now like this.Then we're also going to have a function that'scalled handle Submit. And we'll leave it emptyfor now also. Right, so let's continue herewith the input. So we can close this one here,then we create another input field. type forthis one is going to be password. We don'twant to show the characters that the usertype in this one, because it's the passwordinput box value is also going to be a statevalue that we're going to add. The name forthis one is password. And onchange is alsogoing to be handled input. So we have thesame function to both of these input fields,and we close it here, then we're going tohave a submit button and we use a component,the bottom component, the text is going tobe login. And also we don't have to provideus with a prop that's called text and we sendin the text, we could also wrap the text withthis component if we want to do that instead.And then we grab the text with the childrenprop. We have a callback. And that's goingto be the handle Smith for this one. Do someauto formatting, save it. So that's the basicstructure of our component, we want to beable to use this component so we have to createa new route for it. And we can do that inthe app.js file. First up here with wherewe have the components, we're going to importlogin from dot forward slash components forwardslash login, they will have the componentand then we can create it somewhere here wecreate a new route with a path. This one isgoing to be shown when we go to the path login,the forward slash login and the element isgoing to be our component. Login. And thenwe close the route component and some moreformatting, save it, go back to our application,make sure that it's running. I'm actuallynot running mine. So I'm going to type inNPM start. Whoa, I heard it really sumed inhere. And I'm going to bring up the consolefor later. So if we go up here in the route,and type in forward slash login, you can seethat we show our component here. So that isworking. Great. Go back to the applicationand the login component. We're going to createa few states for this one. So at the top ofthe login component, we create a state thatwe call user name and set the username, equalsuse state are going to create an empty stringas initial state for this one, we create anotherstate, that's called password. And the setteris called Set password equals use state withan empty string as initial value also forthis one, something like that. And then Ialso want to notice state, that's called errorand set error. And we have a use state call.And we set it to false initially. So theseare the three states that we have, you couldalso have won combined states for input fields,if you want to have that is used to createthem separately like this, then we're goingto grab our context, we're importing it uphere. And we can grab the context with a hookthat's called use context. And our contextis going to be the state that we created.So we create a new cost. And we can just structureit out just as before, we have the state,the state is actually going to be the user.So we can be more specific, we call it theuser and the set user. And it equals, we callthe use context hook. And this works as simpleas we just give it the context. And this oneis going to bring in the context for us. Andthe user, we're not going to use this one,we're only going to use the set user, we canmark it with an underscore. If we want todo that. This is also very subjective on howyou like to do stuff like this, then we havea hook that we will see imported for our navigation.So we create a course that we call navigate.And we call that hook use navigate. And thiswill make it possible for us to use this navigateconst to navigate programmatically in ourapplication. Alright, so first, we're goingto make these input fields controlled by thiscomponent. So we have to hook them up withstate just as we did with the search bar.And we have this handle input here, wherewe get the event from the input field, sothe input fields, the value for this one,we can change this one now. It's going tobe the state that's called username. No, nota capital N, all lowercase letters, and thisone is going to have the value from the passwordstate. All right. So this will make sure thatit is connected to the state. So now whenthese input fields change, we can make thatchange in the handle input because we havean on change handler on them. And we can setthe different states in the handle input.And you can see here that I give them a name.So first, we want to grab the name. So I createa const name equals e dot current target dotname, and this one is going to grab the namethat are set here on the name prop. Then wehave another cost with the value. And we getthat one from e dot current target dot value.So we need the name and the value. And actually,you could do this in a one liner. If we usejust one state for our input fields, we couldset the name of the properties in an objectdynamically with the name that we get fromthe input field. And then we set the valueso that will create new values in the object.Depending on how many input fields we addto our application. But in this case, I havea separate state for each input field. SoI do it like this instead, in a small applicationlike this, I think this is more readable,actually. But this means that we have to checknow what input box that we type in. So wehave an if statement. If named equals username,then we're going to set the username stayedwith the set username, stay setter, and wehave the value. So we set the name of theinput box, and then we get the value. If thename is username, we know that we should setthe state for the username. So that's whatwe do in here. And if the name equals password,we're going to set the password state. Andwe give this one the value also. This onemaybe should have a lowercase m instead notan uppercase, so we change this one just tobe consistent. Or format it save it and wecan see if it works, go back to the application.And we can type something in here. And yeah,it works. So we know that we have our controlcomponents. So that's great. So our inputfields are working, then we'll have to submitsomething and actually grab something fromthe API to make the login. And we do thatin the handle submit function. The first thingwe're going to do is to set the error to falsejust when we did when we finished our movies,and then I have a try block and then a catchblock and we have the error. For this catch.We can set that or True. That's the only thingwe're going to do inside of the catch block.So we're going to be in the try block now.And first, we need to get the request token.So I create a new const. I actually noticednow also that I forgot to bump up the fontsize. So I'm going to do that now, from nowon is going to be bigger. Okay, so I havea cost with a request token. We're going towait from the API, I have this function GETrequest token. And of course, this one hasto be an async function, because we are waitinghere. So Mark this one with a sync. So thatwill hopefully get us the request token, ifsomething goes wrong here, the catch blockwill set the error to true and we're goingto handle that just in a second down in theJSX. The cost, we're going to grab the sessionID We await again, from the API, I have afunction that's called authenticate. And forthis one, we're going to give it the requesttoken first. And then we give it the username,and then the password. All right, that willhopefully get us our session ID. And thenwe can set the user. And this one, the setuser is actually the context that we created,because we're grabbing the context here andthe setter for the user. So we're settingthis one in the context, I'm going to setit with an object First, I want to set thesession ID. So I gave it from the sessionID that's the one that we'll get back fromthe API. We have a property that's calledsession underscore ID, all lowercase letters,and then I'm going to set the username. Andas this is also e6 syntax, I don't have totype out this twice, because it will interpretthis automatically. Alright, and then we justhave one more thing to do. And that is wehave to navigate somewhere when we successfullylogged in. So we can navigate programmaticallywith react router, we use the navigate thatwe got here from that hook us navigate, weplaced that one, we placed what we get backhere in the navigate cost. So navigate parenthesisand we just specify the URL. And in this case,we want to go to the homepage. So we specifyit like this. And I want to do some console,log in here, console log, the session ID justto see that we get something here, save thefile, go back to our application. And nowwe haven't styled this one. We're going todo that in the next video. But we can usethe input fields here anyways. So my loginis vevo and then I have my password that I'mnot going to tell you something like this,and I tried to log in. And you can see thatwe get this object back from API, we get thesession ID and the success is telling us true.So that's really, really neat. We know thatour login system is working, and it redirectedus to the homepage. To go back to the loginpage. I want to do one more thing here beforewe finished with the logic for this component.Down below here just above the first label,I have a curly bracket and I'm going to createa short circuit, I'm going to check if theerror is true. Double ampersand If the erroris true, we're going to have a div with aclass name of error. And then I'm just goingto say there was an error, something likethis. And then I want to format it. And thenI'm going to say this file. So you can ofcourse type in whatever you want to save thefile, go back to the application. So justtry to type something in here and click Login.And you can see that we show this one here.Instead, there was an error. And we also getan error in our console. So we know that thetry and catch block is working. So this isour login component and the logic and in thenext video, we're going to create the stylesfor this component. We have our login componentand the functionality for that one. And nowwe're going to create the stars for it. Sogo back inside of the code editor and thelogin dot styles dot j s file. We have ourwrapper that's the only style component thatwe use him for this one. First, we're goingto display it as a flex. we align dash itemsto center and we justify the content Centeralso just the center stuff. Then we set theflex direction on this one is going to becolumn and we can save it to see what we'vegot so far. You can see that we're centeringit here in the middle of the screen. So that'sgreat. Go back to the code, I'm going to seta max width to 320 pixels, the padding isgoing to be 20 pixels. And the color is goingto be from the variables, we have a colorthat's named dark gray. So double dash darkgrey. Save it go back just to see what we'vegot, right? When I set the max width to 320pixels, it's showing it to the left. But ifwe set the margin to zero and auto, and saveit, that will place it in the center again,so that's great. All right. So that's everythingfor the wrapper. Now we have the input, wenest, this one inside of the wrapper component,we set the width to 100%. On the input fields,the height is going to be 30 pixels. borderis going to be one pixel solid. We have avariable for color. And we also use dark grayfor that one. Then we set the border dashradius to 20 pixels, the margin is going tobe 10 pixels and zero. And the padding isgoing to be 10 pixels, save the file, go backto the application. And you can see that wecreated this nice little input fields heresweet with rounded corners, and it matchedthe overall the overall look of the application.Then we just want to style our error classalso dot error. And for that one, I'm justgoing to set the color to red. You can stylethis a little bit better if you want to dothat. So if we type something in here andclick login, you can see that this is theerror. All right. And that's actually it forthis login component, I'm not going to doany heavy styling, as this is the bonus sectionof this course. So if you want to do it nicer,you can do that yourself. In the next video,we're going to be in the header and showeda logged in user and also have a log in bottom.Okay, let's create the login system from theheader, we're going to show a bottom to login. And I'm just going to place it in themiddle actually here. It may be should beto the right. But yeah, as I told you, I'mnot doing any heavy styling for this section.So you can style it to your own liking later.So let's go back inside of the applicationand inside the header component, so the headerfolder and the index.js file. The one thingwe need to add to the imports here is to actuallyimport the context. So we import context.From dot dot forward slash and dot dot forwardslash, again, we have the context file likethis. And this one is making an implicit return.Now we need to have some functionality insideof it, we have to change this one into anexplicit return. Like this, we add the returnstatement here or reformat it just to makeit a little bit nicer. Some people also havethe formatting to activate when you save thefile, I'll actually I actually don't likethat, because sometimes when I save it, andI'm not finished, it starts to format stuff.And I don't like that. That's why I do itmanually, instead. Alright, const user, we'regoing to grab the user from the context, wedon't need to set anything here, we just needthe user. And recall the use context hooked,we actually need to import that one also appear.So import react comma, curly brackets usecontext. So we give this use context, hookthe context. And this will bring us the user.So we don't need to destructure out the setterfor the state, we just need to use so so that'swhy we're not destructuring out that one.And we can do a console log user like this.Save the file, go back to our application,I'm going to try to login again. I click Login.And you can see that we get this console loghere. So we have the session ID and the usernameof vaman. And that's of course for vaman fault.All right, so we know that our context isworking great. And that's sweet. So go backto the index.js file in the header folder.And now we can use this one here. So justbetween the two logos here. I'm going to createcurly brackets. And the first thing I'm goingto do is to check if we have a user and thenI create a ternary operator. So I have a questionmark, parenthesis and the first thing I'mgoing to do if we have User are going to showa span with a class name of logged in, likethis. And I'm going to type out logged inas colon. And then I have new quarter brackets,and I grabbed the use of dot username. Andthat's from the object that we get back fromthe context, of course. So when we are loggedin, we're going to show the text logged inas and we also show in the username. Otherwise,if we're not logged in, we have a colon, here,we have a new pair of parenthesis, are goingto use the link component. And it's goingto link to if you remember this one, the linkcomponent is the one that we use from reactrouter to navigate inside of our application.This one is going to link to the login pagelike this. And inside the link, I'm goingto have a spam that has a class name of login.And it says login and then do some nice autoformatting. I'm going to move this one offand save the file and see if it works. Goback to the application, we can't hardly seeit here. We're going to style this in a second.But we have a login button. So it takes usto the login page. So here again, I'm goingto log in. And this is something that youalso can do if you want you can store theuser information in the session storage orin the local stories, there's a lot of discussiongoing on, on what is the best practices touse. In this case, we have a session ID, sowe have to request a new session ID on eachsession from the Movie Database API. So I'mjust storing it in the application itself.So that means that it will get wiped out everytime you reload application, I had to login. Again, if this was in the real world,we probably would have a login system thatwill also save this token somewhere. So youdon't have to log in every time. And I actuallyhave a YouTube video, where I show how tocreate a back end and set up JSON Web tokensand how to create a login system in a reactapplication. So this is a very simple usecase on how you can create a login systemhere. All right, that was a side note, I'mgoing to click the Login button. And hopefullyup here Yeah, you can see that we showinglogged in as beiben. So it's working, we haveto give it some styling also. And this isjust going to be a couple of rows. So I'lldo it in this video. So inside the header.styles.jsinside here, we actually don't need the classnames that are set, we can just set the colorto a variable of white, like this, and thenwe have the a tag, I set the color to thesame variable there, double dash white. Andthe text dashed declaration is going to beset to none. Auto format. Let's save it. Andalso if we want, we can remove these classes,we don't need them, we can just have a spanon this one's awesome thing like this, savethe file, go back to the application, youcan see that now we see it. And yeah, thisis probably not the most beautiful way, itdoesn't look that good, because I'm just placingit in the middle. Now, we would have somededicated space for a login button and stufflike that. But this is just to show the functionality.So I'm not going to style it any better thanthis. So I clicked the login. And I log inagain. click the Login button, whoops, something,I guess I typed the password wrong here. Ilog in again. And that works. And now we cansee that we have this white text instead.And it tells us that I'm logged in. So that'sgreat. In the next video, we're going to createthe rate component that we're going to showsomewhere here, I think we're almost finishedwith the voting system. But we need a ratingcomponent that we can place here in the movieinfo component. So we're going to create thatwill now move back inside of the code editorand inside of components create a new folderthat we call Wraith, capital R. And insideof that folder, we create a new file that'scalled index dot j s and I actually not goingto have any styling for this one. I'm goingto use the components as they are. So firstI'm going to import react. And I'm also goingto need the use state for this one. Becauseit is going to be a control component I importedfrom react. Then I create my component rateequals, and I'm going to destructure out thecallback for this one. Because when we vote,we need to have a callback function that willdo something. And in this case, it's goingto send a request to the API. That's a componentI'm also going to export default rate likethis. And the first thing we do in this componentis to create a state with a value and setvalue equals use state And we're going tostart with the value five, the rating is goingto be between one and 10. And then we havethe return statement and we return our JSX.So I'm going to make it simple here, I createa wrapping div, and then I create an input.And the type is going to be range. So we createa range slider, the min value is going tobe one, the max is going to be turn, and thevalue is going to be our state value. Andthen on change, we have to change this statevalue. So I want to show you also that youcan create an inline function instead of creatinga function up here to where the event E, Icreate an inline arrow function. And thenwe set the value e dot turn target dot value,and this is enough. And we will close thiscomponent. Alright, so that's a range sliderafter the range slider, we want to show ofour value like this. And then I create a ptag just to get it on a new row. And I createa button. I have an onClick handler on thisbutton. And in this case, we have an inlinearrow function because we are going to callour callback with a value. And we give itthe value if we don't have this inline arrowfunction here, and we just type it out likethis, then it's going to instantly run thisand it won't work. So we have to have an inlinefunction here as we providing an argumentto this callback function. Right, close itand inside of the button with type out rate,do some more formatting, save it, we're gonnamove inside of movie info component in theindex.js file. And up here where we importthe thumb, we also got to import our ratecomponent, dot dot forward slash rate. Andthen we're going to show the rate componentsomewhere below. theme, we're going to placeit Yeah, maybe here, just above the M tagfor the text. So I create a new div and insidethat div, I have a p tag rate movie. And belowthat one, we use a rate component. And fornow, we don't have a function that we're goingto send into this one the callback function.So just showing the component just to seethat it works and shows up, save the file.Go back to the application. And you can seethat we have the rate slider here. And wehave a rate bottom, it doesn't work. Now,as you can see, because we're not sendingin the callback function to it. But this onewill work in the next video, because we'regoing to tie all this together and make itwork so that when we press this red button,we will send along this rating number to theAPI, and we will rate this movie. Alright,we're almost finished. And this is actuallythe last video in this course. So hope youenjoy the course, we're going to tie thistogether. So let's move inside of the codeand inside the movie info component in theindex.js file, the first thing we have todo is to grab the context, the context orimport context, from dot dot forward slashand dot dot forward slash again, and context.So we're going to use the context. And thatmeans that we also need to import from uphere, the use context hooked. Right. And nowyou hopefully can see how handy it is to havethis global state because we can access itfrom any component in the application. Andin this case, we're going to grab the userand the session ID. So you can send alongthe session ID to the API when the user ratethe movie. And now we're making this implicitreturn, we're going to change this one toan explicit return, so return and I createdcurly bracket, and then we need to have onebelow also. There is some auto formatting,and go back up if it's in space. And first,we're going to grab the user from our context,just as we did before the cost user use context.And we've given you the context. So this willgive us the user here. And then we are goingto send in a callback function to our ratecomponent here. So we're creating this functionhere in this component and send it along tothe rate component. We're going to call thisfunction calls handle rating. This is goingto be an async function because we're makinga an API call. We have the value And thenwe can do some stuff inside of here. So thisvalue is going to be the value from the rangeslider. So create a new cost rate equals,then I wait. And from the api.id and I importedup here. No, I also need to import the API.We do that up here, import API from dot dotforward slash dot dot forward slash API, likethis, then I go back down here and changethis one. API dot, I'm going to grab the functionthat's called rate movie. And if you wantto know more about these functions, you canalways check them out in the api.js file.Because I told you probably too many timesnow that I pre made these functions for you.So you don't have to do that in this course.Alright, move back to the movie and for anindex.js file. So the rate movie functionis going to take in three arguments. So wehave the user dot session ID. And we havethe movie ID, because we need to know themovie ID of the movie that we want to rate.And we also want to give it the value, that'sthe rating value. Right. And that's actuallyeverything we need to do. In this case, Ijust want to console log out to rate to seethat we get something back and that the ratingwas working. So we can use this handle rating.Now down below here, we can give it to therate component, we have a prop. That's calledcallback. And we give it to hand reading andsave the file. And hopefully this should beit. Go back to the application. Yeah, we haveone more thing to do, because I don't wantto show this rate slider when we're not loggedin. So we can do that also. So just here,when we have the rating, outside of the wrappingdem are going to create a ternary operator,I'm going to check if you sir. Then I'll doubleampersand, and I move my M curly bracket downhere or to format it. And it will also autogenerate this parenthesis. So if the userexists, if we're logged in, we're going toshow the rating. Otherwise, we don't showanything. Save the file go back to our application,you can see that we're not showing the rateslider now we have to log in. So we clickthe Login button, and I log in. And now we'relogged in, we're going to go to movie here.Now you can see that we see the rating slider.So I don't actually know if this movie isany good, but I'm going to give it a ratingor eight. And I click the red button. Andhere you can see in the console that we gota success of true and status code one, a statusmessage success. And if we click rate again,you can see that we get another message becauseit says that the item record was updated successfully.So you can update your rating score. If youwant to do that. There's also a resource inthe endpoint if you want to remove the scorealso. So there are some neat stuff that youcan do with the Movie Database API. And Ihope this inspired you to actually build morestuff into this application, because now youhave a good foundation. And for example, thenext step you can do is to create a logoutbutton for the user. And the way I would doit in this case is that I can just wipe outthe global context the state here and removethe user from the global state. And that willlog out the user we don't have to do anythingelse with the Movie Database API or somethinglike that. Alright, that's it for this course.I hope you enjoy this. I sure enjoy this.This is the third iteration of the course.So this is the third time that I actuallyupdate it and re recorded from scratch. Andif you want free tutorials, you can alwaysvisit my YouTube channel, search for vamanFox, or you can go to vevo in fact.com ifyou want more courses from me\n"