React JS Course for Beginners

Key Takeaways

react is one of the most popular javascript frameworks in this comprehensive and well-made course thomas weibenfalk will teach you everything you need to know to start using react hello and welcome i'm thomas webenfart a developer from sweden and thank you for enrolling this course i'm actually a little bit of extra proud on this one because i created a lot of courses during the years now but this one is the first ever course i created because i love react and i wanted to create courses so this is the third iteration the third version meaning that i've improved it a lot and listened to you guys on what stuff you want in the course so i think it's actually really good there's always room for improvements of course but this one i really enjoyed this one and it was fun making it also so hopefully you'll find a lot of basic stuff and intermediate stuff and maybe some advanced stuff to learn in this course and i think we have to get started so let's do that let's take a look at the application that we're building in this course and it's a nice little move application that is based on the movie database api so you'll have to create an account at the movie database but we'll do that in the next video so i thought i could show you the application so that you have a little feeling about what we're going to build in this course and this one is always going to show the most popular movie here we have this hero image so we're going to create this one and we also have some text and we have a header up here also then we can search for movies for example star wars and we'll see all the movies here so that's how the basic functionality of this application is and if we click on the movie you can see that we get all data from that movie so that's nice we're going to show the actress and also some information about the movie itself we can see the revenue the budget and the running time for example and here you may think that you can also click on actress and yeah of course we could do that but i have to limit this tutorial somewhere so this course is not going to go there but it's a great foundation if you want to build up on this application so you can add in the functionality of showing information about the different actors and stuff like that we also have this little breadcrumb menu up here so we can go back to the home page and in this version of the course this is version three i'm going to show you how to create the styles also i'm going to be fairly quick when i show the styles because i still want to have the main focus on react itself so that's something that's new in this version 3 of this course and of course everything is going to be responsive we're going to create that one also as you can see here the grid for example with the movies it changes depending on the viewport size so that's nice so it's a fully working application and to be honest i'm quite proud of this design i created a design myself because i'm both a developer and a 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 the previous versions to look a little bit more modern but i think it's mostly yeah i changed some colors for example on the button and stuff like that all right so that's the application in the next video i'm going to talk about the movie database api and how you can register to get your own free api key that i'm going to use in this course okay so let's talk about the movie database api that's the api that we're going to use in this course and the movie database has a great api for fetching a lot of movies tv shows and stuff like that we are going to focus on the movies so that's what we're gonna do here and you can sign up for a free account at the movie database so just go to themoviedb.org and click join tmdb and then you can fill out your username and password and email and create an account and when you have created the account you probably get an email where you have to verify yourself before you can log in but when you have created your account make sure that you go back to the moviedb and click on login and then you enter your username and password just as a regular site that you log into all right and then you presented with this dashboard kind of thing i think it's a dashboard and the only thing you have to do is go up here to your profile and click on this round button up here and then you have the settings here so choose settings and then at the left menu here you can see that you have something that's called api so click on api i guess i probably have to blur this once out because i don't want to show you my own api key this is the one that we're using api key version 3 auth so this is the one that we're going to use so make sure to save this somewhere for now because we are going to add it to our application in a little while so you make sure that you have easy access to this one as we're going to paste this in into our application in a little while when we have bootstrapped our application with something that's called create react app and i'm going to talk more about that in a little while before we start creating our application i just want to talk a little bit about react and what it is so if you go to the react js.org you can read more about react and this is a great starting point if you just started out with react they have a different documentation they have tutorials and a blog and stuff like that and you can read everything that you need to know to get started with react so i tried to make this course kind of beginner friendly but react is kind of at least intermediate in its own nature so it's hard to make it really really beginner friendly it also depends a lot on how you learn stuff i love to learn stuff in this project oriented way where i just build some project and learn along the way so i only create courses on how i want to learn stuff myself but it's very individual so some may think that it's not beginner friendly at all and some may think that it is that's why i also recommend to check out react.js.org to read about the very very basic stuff at least in react so what is react yeah react is a javascript library for building user interfaces as they tell you here i think actually that this sentence is a little bit misleading because you're using react for so much more than to just build a user in the face for example i i build a lot of stuff i build small games i build a pac-man game for example and i build all the logic in react also so it's not only the view layer so it can be a little bit misleading here i think um just thinking about that you create the components for the view but that's not the case you can use react for so much more if you want to do that and in this application we're building everything in react so we have all the api calls and everything it's done from react so that's how we're going to use it in this course and react uses the declarative paradigm i don't even know if i pronounce that correctly but hopefully you know what i mean so react is declarative but for example jquery is imperative and when something is declarative you explain in this case the user interface how it will look you don't have to tell it exactly how you want to achieve that look you just tell it that we want our ui to look in a certain way and then react takes care of the rest for example in jquery we have to grab the dom elements and we have to modify the dom elements and we have to create them row by row and then attach the element to the dom itself so there can be a lot of code involved in doing something simple actually but in react for example we have as they say here it's component based so we create a component and then we just tell react to use that component and it will render out that to the dom for us and this will be more clear as we go along in the course and create our own components and create the application itself so don't worry if you don't understand everything right now so it's declarative it's component based and learn ones right then where yeah as they tell you here they don't care about the rest of the technology stack so that's great you can use a lot of stuff in combination with react so what is the react component yeah we can take a look here for example here they create this is a class and this is kind of i like to call it the old way the classes still exist i don't use them anymore and in this course we're going to focus on creating functional components and i'm going to tell you more about that later and in the end of the tutorial when we have finished the application i also going to show you how to convert some of the components the stateful components to class components just in case you need to know how to create class components also because the reality is if you start working for a company or a client there may probably be some components that are still class components because there's a lot of applications made in react that's made before we had state in functional components so that's why you had to had a class before to have stated in them and we're going to talk about that later also so this is a component they create with a class and they call it a hello message and as you can see here they're using something that's very much like a regular html they have this tag here with a hello message and this name is a so-called prop they're sending in and we're going to talk more about props also later so don't worry about that but this is actually not html it's something that's called jsx and that's something that we're also going to learn in this course so we create the component here so we tell it to use this component and react will take care of the rest and create this div with our text hello and in this case it's going to be the name that we send in with the prop so the name is going to be taylor it's going to type out hello taylor as you can see here so this is very very neat with react we can reuse these components in our application so that's short on what react is and as i told you we're going to learn a lot more stuff in the course itself when we create application and hopefully at the end of the course you'll have more understanding of react and how awesome it is because i really love react i'm really passionate about using react and actually this course is also something that i'm very passionate about because this is my first ever course i created and this is the third version meaning that i have listened to people that have enrolled this course before and changed stuff and added stuff to make it more optimal and more perfect and hopefully you'll enjoy this course for this course i provided you with a zip file that you should download before you start the course and this zip file contains a few folders here as you can see and it may look maybe a little bit different when i end the recording of this course because i haven't really recorded it yet but i think it will look this way but if it looks a little bit different it's okay hopefully you can read the folder names and understand what they for so i'm going to provide you with a folder that's called files to be copied to the project folder these are files that we're going to use for the course so i have created a file for us that set up the api so we don't have to write our own functions for fetching the data so i'm going to show you that when we fetch data from the api i have a config file and a helpers file and i'm going to talk more about those later also and then i have a few images that we also need for the course so that's why i have this folder that we're going to copy over to a project when we have created it and the public folder the index.html file i have this here because i'm using a google font for this one so i've already provided that one in the index.html 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 that time comes and you're also going to have two options if you don't want to create everything from scratch when i set up the application you can just ignore that and start from a project without the styles and this is if you want to create the styles also i structure this course so you should be able to fairly easy just skip the parts where i create the styling for the components some people of you don't want to create the css and the styling so that's why i made it in this way so this is the one you should use if you want to create the styles otherwise you use the one that's called with styles that one will provide you with all the styling so you don't have to type in the styles and you can skip those videos so if you want to start from one of those projects you navigate inside of that one and in your terminal you type npm install and that's going to install all the dependencies for you and then every time you start up the application you can type in npm start and that's also something that i'm going to show you so don't worry about that then you have a folder with a finished app if you want to check out the result but please be aware here you have to put your own api key in a file that's hidden here now it's called dot end inside of that one you have to paste in your own api key otherwise it won't work and that goes for the stepped solutions also i have provided you with step solutions that corresponds to each video and if you want to run an example from a particular step solution you also have to paste in your api key in the dot n file and i'm also going to talk more about the dot n file but this is the starter files so you have to think about if you want to create the styling in this course and you also have to think about now if you want to set everything up from scratch or if you don't want to do that you can just start from one of these folders here navigate inside of them type npm install or if you're using yarn you should be able to use that one also and then mpm start or yarn start to start up the application all right let's move on in the next video i'm just shortly going to talk about the tooling that i'm using for this course just a short short little video about what tooling i'm using for this course i think you already should know this tooling and have it installed to be able to fully 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 to install dependencies i suggest that you learn about that first because this is a beginner slash intermediate course in react it's not a beginner course in coding you should know some javascript and especially es6 syntax we're going to use a lot of es6 syntax in this course so it should be a good idea to to shape up your knowledge in javascript before starting to learn react but that's only my opinion but of course you should do it your own way if you want to learn react before vanilla javascript it's totally up to you i shouldn't tell anyone on how they want to take on their coding journey all right so i'm using mpm and that means that i have to have node installed we're not using node.js per se but node.js includes the mpm package manager so that's why we have to install that one so if you don't have that installed make sure to grab the latest version and install it then i use visual studio code as my id so that's what i'm using in this course and then i'm going to use create direct app and bootstrap our react application really fast and easy so that's what we're gonna do and i'm actually gonna do that in the next video so let's get started with our application [Music] i'm happy to see that you're going to create this project from scratch and we're going to use create direct app to bootstrap our application so let's get started if we look at the home page for create react app you can find it at crate dash rack react-app.dev and then they have something here in the menu that's called get started and the only thing that we have to do is remember this row here npx create dash react dash app and then you have the name of your application that you want to create and mpx is something that's provided with mpm in the latest versions so you don't have to globally install create react app to use it this will make sure that we grab the latest version so i always use npx instead of first globally installing create react app so this is really great because then i know that i'm using the latest version and you don't have to install it globally but if you want to do that you can of course install create react app globally first but this is the command that i'm going to use so make sure that you navigate inside of your terminal i'm using a terminal that's called hyper i get a lot of questions about that what terminal i'm using i actually don't remember the name of the theme but i styled it a little bit to my likings so that's sweet so hyper is a great terminal if you want to have a customized terminal you also have a built-in terminal in visual studio code of course so let's get started make sure that you navigate inside of a folder where you want to create your application and then we type in mpx and then create dash react dash app and then we have the name of our application and i'm going to name it react rmdb and rmdb stands for react movie database so that's the best i could come up with you can use whatever name you want and then we can hit enter and then wait for it it will install everything for us so it will take a little while all right hopefully they're installed correctly for you and create react app has now hopefully bootstrapped or application you could set up this yourself and not use create direct app but create react app is actually used in in many production applications and it's actually used right now for a client that i work with and it's a fairly large application so you can do a lot of stuff with create direct app and it's using babel and webpack in the background to set up the react environment for you so that's what you could do yourself if you don't want to use create direct app but i'm not going to show that in this course because i think it's a little bit advanced for a beginner course and actually we're going to be fine with create direct app that's all that we need so we're also going to make sure that it works so make sure that you navigate inside of the project folder i'm going to clear this and then type in cd react dash rmdb or whatever you named it and then we're inside of that folder and then we can type mpm start and it should start up our environment this is the finished one that's here now so it's going to be replaced by this application here so it's working and we have successfully bootstrapped our application and that's sweet in the next video we're going to install a few dependencies that we're going to use for this project we have bootstrapped our application and now we're going to install some dependencies that we're going to use for this project and the first one is going to be something that's called react router and react router is the standard in a react application for handling routes because this is a single page application and we need something to handle our routing because we are going to have different pages and the one that we're going to use is called react router there is another library that's called reach router and i'm actually using that one in version 2 of this course but the team that created reach router and react router is the same team so they're going to kind of merge them together into react router version six and this one is still in beta mode but i've talked to them and i think that i should have this one in this course because it will soon be out and the api won't likely change because we're not going to use the most advanced stuff in this router library so we will be fine and we have some instructions down here i'm at github.com forward slash react training forward slash react router forward slash releases and down below here we can see that we have some instructions on on how to install it so i'm going to bring up my terminal i'm going to do something like this and we could of course just copy this one and paste it in but in my courses i wanted to learn as much as possible and it's always a great idea to not copy paste too much and type stuff in because that will make you remember stuff much easier so that's what we're going to do now so i'm going to type in mpmi or if you're using yarn you can of course use that instead i'm going to use mpm for this whole course and i'm typing in i instead of typing out the complete word install that's a shorthand for install so mpmi and then we need to install something that's called history also that's another library that's used in combination with react router and we can install them in one go if i type history here then i have a blank space and then i can type in the other library that i want to install and in this case it's going to be react-router-dom and then we have an at sign and next and this will grab the beta version of react-router so press enter and wait for it hopefully that installed for you correctly so i'm going to clear my console again and we're going to move on to something that's called style components style components is a super great library to use in combination with react with style components we can create our css in isolated and scoped components so that's really really great and we have a lot of features that we have for example in sas we can do nesting and stuff like that and we can send in props and change our styling dynamically and i'm going to talk more about style components as we go along in this course because we are going to create the styling if you choose that path that i really think you should if you want to have some css practice but it's up to you i've provided you with different alternatives for this course so we're going to install style components and you can read more about it at styledashcomponents.com so go back to the terminal and we type in mpmi style dash components and we press enter all right that went smoothly so i clear the console yet again and we move on to the last dependency that we need and that is something that's called prop types prop types is a great tool in react where you can type check your props that you send into your components so as they say here it's runtime type checking for react props and similar objects so that's great today a lot of people use typescript instead then you don't need to use prop types and i actually use typescript a lot myself i started to like it actually but in our case we're not using typescript right now i'm going to show you that at the end of this course in a special module that i created where we refactor everything to use typescript instead but for now we're not using typescript so that's why we're going to use prop types and i'm going to talk more about this later in the course and i've placed it kind of at the end of the course because i don't want too much stuff going on when we learn react so that's why so i'm going to talk about it at the end of the course and when you create a component that has some props you should use prop types to to do type checking on your props but i'm not going to do that first i'm going to add it in later in the course so we don't get distracted of too much stuff going on all right so go back to the terminal type in mpmi prop dash types and press enter so that's it that's our dependencies and of course i didn't mention it at the start of this video you should of course be in the folder that we created the application that we bootstrapped with create react app it's very important you have to navigate inside of that folder otherwise it won't work because we are installing the dependencies in that project folder all right in the next video we're going to copy some files from the starter file zip file to this product that we're going to need to make this work if we look inside of our product folder react r db we can see that we have some different folders and files here and for example if we look in the public folder we can see that we have some image files on the index.html file and this is the folder that the dev environment is going to build for us so the public folder is the finished files that we're using for running the application so that's everything inside of there and the source folder the src folder is going to be the folder where we created all our stuff for the application so you can see we have some css file and we have an app file an index file and an index css file we also have a test file we're not going to do any tests in this course so this one we're not going to use and we have a service worker we're not going to use this one either and we have the setup test that we're not going to use if we take a look inside of our zip file the starter files that you should have downloaded for this course and we take a look inside of the first folder here one files to be copied to product folder alright so that's the files that are going to be copied to the project so make sure that you mark them here copy them move back to your folder your project folder and paste them in and then you're going to choose to replace the old folders this one is in swedish here so you probably don't understand it if you're not from sweden but what it says here is to replace it so i'm going to click that button and then it going to ask me if i want to merge the source folder or if i want to replace it so if it asks you to merge it or replace it always choose replace all right so we successfully copy the files and if we take a look inside of the public folder here we're going to have exactly the same files the only difference is that i've added in a google import of a font that's called able or able i don't really know if i pronounce it correctly it sounds better to pronounce it able so i think that's the correct one that's the only thing i've changed here and that's in the index.html file the other files remain the same so that's the public folder and if we look inside of the src folder you can see that it's lesser files now and that's because i removed all the files that has something to do with tests or the service worker and all the css files that we don't need because we're going to use style components and i also added in some files and a folder we have the images folder and this one of course contains the images that we're going to use for this course and then i have a file that's called api.js and inside of this file there's some functions that are going to handle the api calls to the movie database api and in the previous versions we actually created these ones ourselves in the course but i think that was just a distraction from react and react syntax because this is a course about learning react and the thing is that this is regular javascript inside of this one it has nothing to do with react per se so that's why i created this one for you instead and place them in a file and of course i'm going to talk more about these functions when we reach that point in the course and then i have a config file and this config file contains everything that has to be set up with the movie database api and i have a helpers file also and the helpers file contains a couple of functions that will help us to convert some numbers into to money and also to convert our time and i'm going to talk more about these two files also later in this course so these are the files hopefully this one will work so if we go back to our terminal and this one is running now so just to be sure i'm going to break it and run mpm start just to see that it works it's always a great idea to see that stuff works when you change something and then i go to my browser and reload the page and you can see i'm at localhost 3000 just as before but now this nice little rotating react logo is removed and it says start here and that is because i remove that one and i've modified this file so that we can start from here now in this application so if it says start here you know that you successfully copied all the files hopefully and it should work for you in the next video we're going to move on and actually use that api key that you got when you're registered for the movie database api okay we got one more thing to do and then we finished with the setup of our project and that is that we're going to create a dot and file and paste in our api key so in our application folder at the root we're going to create a new file i'm going to call it dot e n v dot m and create react app has built-in support for environmental variables the only thing that you have to do is to name them with react first so react underscore and that's important otherwise it won't recognize it and this one is going to be called app underscore api underscore key all capital letters and then we have an equal sign and then you can paste in your api key here and that's everything you have to do so just paste it in just after the equal sign and you're good to go and save the file this api key is then used in the source folder in my config.js file you can see that i get it here process process.n dot react app api key and this is all managed inside the create react app when it's startup or dev environment and creates all the files for us and stuff it will take care of this but it's really important to market with react underscore before the actual name of the environmental variable and all this stuff here is something that i created for you so you don't have to care about this so i create the different resources from the endpoint on the movie database here and we're going to use these resources in the course later and then i'm going to talk about them more so i have different endpoints for the search for example and to get the popular movies and these ones are for the bonus videos at the end where i create the login and voting that also provided with the movie database api you can log in with your account and cast a vote on a movie or on all movies if you want to do that then we have the image base url this one is also from the movie database so these ones are provided from the api so i just use them according to their instructions and we have a backdrop size we can set the size of the backdrop and the poster size on the images we can set different sizes here and i marked them here for you if you want to try to change them and see what it does so we don't have to think more about these as i set them up for you and there's also a file that's called api.js and inside of this one i created the actual code that is going to fetch the data we can call these 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 more about these functions later when we fetch the movies so this one is for fetching all the movies and this one is for fetching one movie and then we have this one here that will fetch the credits and below here these are all for the bonus material also so you don't have to care about those in the kind of main part of the course so we have three functions here that is going to fetch data for us so that's one thing i change 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 for a beginner course and i also think that it takes the focus on react itself because this is javascript it's not the 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 course and won't finish it so that's why i created these ones for us all right so that's the config and the api file and then i have one more file that's called helpers.js and this one contains two functions that's going to help us to calculate the time and also convert to money because the numbers that we get from the api has to be converted both the time and the money so i'm going to use these ones later in the course also all right so create the dot n file create a variable react underscore app underscore api underscore key capital letters equals and then you paste in your api key otherwise it won't work because you can't access the api one really important thing to notice here is that this environmental variable won't be safe because it will be visible in the client so don't think that this one won't show up in the browser of course you have to look for it but if you're good at looking through code you will be able to find this api key so this is not a safe way to provide an api key if you want to hide it from the browser in our case it's not that kind of a secret key so it doesn't matter and for the sake of the course it would be too advanced to create a system that will hide this for us completely so notice this one won't be safe in the client before we move on i want to talk about a really important aspect of react that i think a lot of people actually forget and that is when we create stuff with react we are also using something that's called jsx and it stands for javascript xml and if we look here i'm at the react.js.org page now and they show us here how to create the component and this is a class component and as i told you before we are going to create functional components so we're not going to create class components for this application but they are using jsx here and this is jsx you may think that this is html but it's actually not it's jsx and jsx is something that is really great to use in combination with react because we can render out our different components like this by using html ish syntax i think a lot of people actually forget it's because i don't know exactly the percentage but i think at least 99 of the applications use jsx in combination with react some people don't use it and that's what i'm going to talk about here because you can create components without jsx in react and that is if we scroll down here you use something that's called create element on the react object so react.createelement we specify if we want some props and then we specify the child elements for this element and you can see up here react.createelement we have the component that we want to create we have the props and also we have the children and this is the spread syntax in javascript es6 that's why they use three dots here to explain this so this one here is actually the same as this this one here will transpile down to react.createelement but it wouldn't be practical to use react.createelement for every component and everything you do in react you can see that it's not that readable and it will get kind of messy and i actually think that react wouldn't be that fun to use if you use it this way so i'm just going to show you how to create an element with react.create element also and in the next video i'm going to talk more about jsx but now i'm going to show you just a small example on how you can create an element with react.createelement so let's move back to our terminal and make sure that our dev environment is running so mpm start always use mpem start when you start up your dev server and you can see that we have it running here now then i go back to visual studio code 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 file for the application and you can see that that i import the app component here these imports are es6 syntax for import so we can import a model and in this case the model is a component and it's called app so i import that one here and then it's used here and this one is jsx so this is the heart of our application we have both the library that's called react and we have react dom because react can be used for other stuff than the dom for example you can create native apps with react but we are going to use the library react dom and this one is all set up with create react app for us so you can see that from the react dom that we import here we call the render method and we give it the component that we want to render and we tell it where we want to render it so from the document.getelement we get the root element so if we look inside of our public and the index.html you can see that we have a div here that's called root and it's inside of this div that we're going to render out our complete application we can close the public folder node and go back to the index.js file so we telling react to render application to a div that's called root and it's also in something that's called react strict mode it wasn't that before but this is a default now with create dragged app and strict mode is actually great it's gonna do a few more checks if you do some stuff that you shouldn't be doing when you code your application so it's always a good idea to using the strict mode in react all right so let's move back to the app.js file and as you can see here we have this element here we have the div that's called app and i render out start here and that's the one that we saw before when we started up the application you don't have to type this in if you don't want because i want to show you this this has nothing to do with the application that we're going to build so i'm going to create a little component now and then i'm going to remove it 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 do it here but you can change this one if you want 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 the component that's called star and i have an arrow function and then from react we import react here you always have to import react at the top and then i call create element i have a parenthesis i'm going to create a div and then we're not going to have any props because we haven't talked about props yet so i set that one to null and then i'm going to render out the string this is a little star like that and i'm going to remove the sidebar so we can see the component here so this is instead of using jsx and if we want to render this one out instead of returning this one here i'm going to return the store and as this is a function now i also have to call it like this save it and then i'm going to go back to the application and you can see this is a little star so it renders out perfectly and this is just a small example and i wanted just for you to notice that you don't need to use jsx and this is actually the react functionality at its core so you don't have to use jsx but we are gonna use jsx because it's sweet and it's fun to work with and i think actually that it would be a small hell creating applications without jsx at least i think so so i remove everything i created here and save the file again just make sure that it works start here and it works and that's great so that's a little bit about react dot create element and using react without jsx just a small small note on that one i'm not gonna go any deeper into it because i don't think it's actually relevant to use react without jsx so that's why okay i talked a little about using react without jsx but i actually don't think that's a great idea so that's why i also want to talk a little about jsx before we move on with this application so jsx stands for javascript xml and it's pretty similar to regular html so if we take a look here you can see that they create an h1 tag here that says hello world and this looks just like plain html but as they say here this fun attack syntax is neither a string nor html and i actually don't think if it's a fun attack as to say here but all right you get the id why jsx we can read here more about why we are using jsx and the main thing here thing is that they don't want to put markup in one file and logic in another file they want to have them combined in one file and that may sound scary for some because a couple of years ago you shouldn't ever mix them together but in react it works really great and as they say here react components contain both markup and logic so jsx is something that is created to look pretty similar to html there are a few differences and i wanted to talk about those here because in this case we create an h1 element and that looks exactly the same but there are some stuff that differ from regular html and for example here you can see you can embed javascript those expressions here for the source area in the image tag for example you can use curly brackets and then you embed a javascript expression and that's super great that you can combine them this way and also as you look here tab index it's camel cased that differs from html and they say it here also since jsx is closest to javascript then to html react dom user's camel case property naming convention instead of html attribute names so remember that that you have to use camel case in jsx and there are some few differences for example when you set a class on an element you don't use the class keyword you use class name camel case and they also mention it here and it took a little bit of time for me to get used to this one and now i actually type in class name when i type out regular html and also it's good to know that jsx is quite safe it prevents injection attacks and stuff like that so i think you learn a lot about jsx as we go along in this course because we are going to use practical examples in this course but the most important part is to remember that jsx is not html and it's also used camel casing when you create an attribute before we dive in and create our components with state and props and all these vital 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 listen to me in this video where i'm gonna talk a little about props and stayed in react the first thing you can do is to imagine that this is a room seen from above and the great circle here is a lamp that's not turned on and the orange one is a lamp that's turned on each of these lamps has a light switch that is off and on so if i click this one here i can turn this light on and the light switch is going to change to on and this one i can turn it off so both lamps are off and i turn this one on and i turn this one on and this is made possible because i can use staid in react so i have two states for the lamps i have one state for the first dump and one for the second lamp that is the boolean that is telling if the lamp is on and off but if we think about this we actually have a state of the room also because we need this state also for the light switch to change from off to on because these are kind of tied together so you can look at the state 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 lamps or in the light switches i have placed the states in the room itself because we have a room state and for the room it's going to be if the lamps and the light switches are on or off so we have a state for the room itself and this is what i talked about in the for example the react documentation they tell you that you can lift up the state to apparent component if you want to use that state in multiple shell components because if we place the state in the lamp itself for example we could only access that state in the lamp and to its child components of course we could place the light switches as a shield to the lamp but that wouldn't be the most effective way of doing it and it would complicate things if you want to reuse your code so what i've done here instead is that i have this room here and i've placed the components in the room and i'm also going to have the state in the room so we can use that state both for the lamps and the light switches and i'm going to show you how i did this now and also talk a little bit more about state and props so if we take a look inside of the code here this is the application that i created for you you can also open it up from the starter files in this course i provided it there so i have the index file the standard index file that shows the app component and f component is actually going to be the room so i could also name this room 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 you create a state with hooks you use something that's called use state hook before we had hooks we had to use classes to have state in them so you couldn't ever create a functional component that had state in them but now we have hooks and that means that we can have stateful functional components and that's sweet 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 because i want this lamp to be turned off initially then i do something that's called es6 destruction here i'm destruction of this array that i get back from the used state hook so we can name our state here to whatever we want in this case i name it islam one on and then we have the setter for the state set is lamp one on and there's a few things you should know about state in react and the first one is that you should look at the state as immutable you should never mutate the state then that means that you always should use the state setter that you get back to set the state in react if you're modifying the state directly for example try to change this one this means that your component won't re-render and that's no good and it can also cause a lot of trouble in the future for you in the application but if you use the setter and change the state and don't mutate the state your component will re-render and update the dom and this is how stuff works in react you update to dom when your components re-render and one more thing with functional components is that we can have as many states as we want with the used state hook in the class components you can only have one state so you have to kind of create an object with different properties to hold your state this is super sweet we can divide the states up now depending on how we want to structure the state so in this case i created two states i have one for the lamp one and i have one for the lamp two so they are doing the exact same thing the only difference here is when i initialize it i set this one to true and this will turn lamp two on all right now i have two functions and these ones are going to be called when we click the light switch so i have one for the light switch one and one for the light switch two you could have one function instead but i want to make it really really clear on how stuff works so that's why i created two of them so we have one function for the switch one and one for the switch two and this one will set its lamp one that's the setter for the state one for the lamp one and what i do here is that i provide it with an inline function and when you provide the state setter with a function it will get called with a previous state so in this case i'm going to flip that boolean value so when i click the button the first time this value is going to get be true instead because it's false initially and this one for the button 2 is going to be false because it's true all right so these are the functions for the light switches so if we look at the jsx here what we return to the dom this one is a room component and if i go up here you can see that this is the style component that we're also going to talk a lot about in this course i create a style component that's a div here so i set some styling on that one on the room itself i i make it 500 pixel width and 500 pixels in height and i set a border on it and the morgan zero in order is going to center it on the screen so everything is wrapped in this room component then i have a component that's a lamp i'm going to talk about that in a second and i also have the light switch so we have the state in this app component that's the room so this is where i kind of gather all the states for this little simple application and this way i can use this state in both the lamp component and the light switch because as you can see here for the lamp component i created something that's called props props is something that you can create and that will get sent along into your component that you create props is an object so you can create as many properties on that object as you want in this case i created a lamp on prop so this one will be sent into the lamp component in the prop object i also created a prop that's called position and this is how i can make the lamp appear on the left or on the right in the room and the lamp on is going to be the state for the lamps so this one is going to be a boolean and that way this component will know if the lamp is on and off and i'm going to show you that in a second and i do the same with the light switch and for this one i have the callback as i showed you up here i give this one a prop that i call callback it doesn't have to be called callback that's a name that i choose and the switch on i'm going to give it the lamp state for this one so you can see that i use the lamp states for both the lamp and the light switches and this is what i talked about before if we created the state for the lamp in the lamp itself we wouldn't be able to access this state for the light switch then we have to create the light switch as a child of the lamp and that's no good as you probably can see now because now we can place as many lamps and light switches we want in our room so it would be much harder to do it if we place the staid in the lamp itself and i also have a position prop for the light switch so let's go inside of the lamp component that i created here i also have a rapid div for this one that's a style component so i wrap everything in that div and the interesting thing with the style components is that i also can have props because they are also valid react components so we can use props in our style components to modify our css and that's one of the super strengths with style components i think because as you can see here this is a this is something that's called a template literal and in this template literal we can grab the props that are sent into this component so in this case i create dollar sign and curly brackets and i can use a javascript expression and i have this inline function here that gets the props so if we look at the wrapper component down here you can see that i also stand in a prop lamp on and the position so i'm just sending along these props that i initially sent into the lamp component so i get them in the lamp component and then i also send them along to the wrapper component that's a style component and by doing this i can for example check here if the props dot position equals to the left then i'm going to set the left value to 20 pixels otherwise i set it to 380 pixels and that will place it to the right in the room so this way i can modify my css and make it very very dynamic so that's really sweet that you also can use props in the style components all right that's how style component and props works so if we look at the lamp component here i'm sending in these props here and what i'm doing here is i'm using es6 destructuring so from the object that we get that you usually call props i'm just structuring out these values that i sent in if i didn't do the destructuring here and i just do it like this you can see that it warms me here now then i have to type in props dot and props dot because the props is an object so i have to grab those specific properties from that object but if i destructure it out as i do here i don't have to type that in every time so i just structure out the properties here instead and there's a few things you should know about props because they differ from state and the main difference is that the props are passed into the components and you should never ever change the props in the component that gets the props the props values are changed from the parent that is sending in the props to the component so if the props change in the parent it's also going to render this component here so never ever change the props values in this component you can change the state in a component with a state setter and that's how you for example can trigger a rerender when you change the state in a component so that's fine you should change the state in the component with the setters but a prop should never be changed in a component that receives the props when the prop value changes this component will render and it will have the new value in the props so that's how props works all right we can check out the light switch also i'm doing the same here i i'm the structuring out the props here and i have this button component that's the style component and i modify it with the props here also so i'm doing the exact same thing here and you can see here that i send in the callback that's the function that i have in the app component here so that's the one i'm sending in with a callback prop into the light switch and then i have my button and the button has an on click handler and onclick handler will trigger this callback function and this makes this component very dynamic because by using props you can make your component dynamic and you can use it in different situations in this case i can send in whatever callback function i want to be triggered when i click on the button so that means that i can use this button in different situations in this case i'm also showing the switch on and off because ascending in the prop switch on so it probably won't be useful too much less than this use case specifically but if you want you can use this button for something else than to trigger a lamp to be turned on or off you can turn something else on and off and have another callback function and that will work so that's what you use props for also you can make your components dynamic and reusable by giving them some props and by using these props inside of the component you can adapt your component and change the logic you can change the jsx and what it should render and stuff like that so that is really useful to use props for that all right so that's short on state and props i hope this one give you some insight before we start creating our own so let's move on in the next video i'm going to talk more about style components and what they are there's one last thing i want to talk about before we start creating some code for real and that is style components because in the next video we're going to create a global styles for our application and we're going to do that with style components so just a short talk about style components and why it's so great and i think the biggest benefit is one that you get scoped css and that means that you can have the same class names for different components it doesn't matter because it's scoped to that component and number two is that you can use syntax kind of like sass for example you can nest stuff and you don't need to have polyfills and stuff like that it will create all that automatically for you and number three is that you can have props inside of it and props is something that we're going to talk a lot about in this course because it's an essential part in react and that means that you can modify the css by sending in different props to your styles you don't need to know exactly now how props work because we're going to talk about that later in the course and also you can use just plain regular css and that's super great also so that is some benefits that style components will provide to you when using it in your application so we already installed this library and when you use it you have to import something that's called style i think they have an example down here yeah here import style from styled components and style is an object that holds different properties for example in this case they want to style a button so these properties corresponds to what they are called in the html so if you want to style a button if you want to create the style component that is a button you use style dot button and then you have a template literal so this is something that's called a tagged template literal and that is a function that you call with the template literal so this is es6 syntax in javascript and it's super great because if we move up here again you can see we have this template literal here you have the starting backtick and you have the end backtick here and inside of here we can write our css in this case they're using style.a because they want to style an a tag and then they do some stuff here plain regular css but here is something that's happening that's not plain css and this is because we're using a template literal here we can use javascript expressions inside of this template literal and when you want to use an expression inside of a template literal you do that with a dollar sign and you wrap it inside of curly brackets and then you can have any javascript expression that you want inside of here and it will interpolate it into the string and in this case you can see that they have their props and they have an inline arrow function and from the props they grab a prop that's called primary and they can set this css conditionally depending on this primary prop and we're going to talk more about this later as i told you so don't get intimidated if you don't understand this syntax right now hopefully you will understand it fully when this course is over this is just a short introduction before we create the global styling and we're gonna do that in the next video it's time to start coding and we're gonna start by creating some global styles the first thing you have to do is to start up your dev environment and you do that by navigating inside of the folder of your application and then you type npm start and that will start everything up for you and hopefully it looks something like this it should say start here and it's always a good idea to have your console open i'm on chrome now so it looks something like this and also i can recommend an extension that's called react developer tools and then you will have access to something that's called components here and if we open that up we can see our application here but in this case we don't have any components yet so it will just show the app component here but this is a great tool when you develop stuff in react so highly recommended install react developer tools okay so let's move back to our application inside of visual studio code or whatever id you're using and inside src folder we're going to create a new file that i'm going to call that i'm going to call global style capital g and capital s dot js so this is going to hold all the global styles for our application and we're going to create a global styles with style components so that's why we have to import a special thing from the star components that's called create global style so we start by doing that import curly brackets create global style camel case that means that there's a capital d and a capital s and we import it from style dash components and this is how you import the module with es6 syntax in this case it's not what's called a default export from this library so that's why we're grabbing it inside of the curly brackets we are going to create default exports from our different components and then we don't need to use the curly brackets but i'm going to show you that later when we create our first component okay so we have this create global style method that we imported here we are going to use our global styles inside of our app component later meaning that we want to import it here and use it down here in the jsx so that also means that we have to export this style component from this file so export and this is a const also es6 syntax it stands for constant so that's what we have in javascript now we have let's we have const and we have verse i'm always using cons before i know if this one is going to change and then i change it to a let if it's going to change in the application but usually const will do at least when you do functional programming as we're mostly going to do in this course so const means that this one is not going to change as with everything there are special cases when it can change for example if you create an object with a const you can change the properties in that object but you can't change the object itself all right enough about that this one is going to be called global style and this is a component and every component that you create in react is going to have a capital letter to begin with so capital g and capital s in this case and it's going to equal and then we call this method that we imported up here create global style and in this case we're not going to have a dot on something here because this is the global style so we're gonna have double back ticks creating our template literal and then i do like this and then we can write our css inside of this template literal and the rest here is going to be regular plain css so first i want to set up some css variables so colon root we do that on the root and when you create a css variable you do that with double dash and then you have your variable name so max width this is camel cased as you can see here i'm going to set the max width to 1280 pixels and then i have another variable double dash white and then i set my white color another variable double dash light gray this one is going to be ee double dash matte gray or medium gray and this one is going to be three three five three five three five double dash dark gray and this one is one c 1 c 1 c double dash font super big that's a funny name i had forgot that i called it that all right you can call it whatever you want this one is going to be 2.5 rem and the next one is double dash and font big 1.5 rem double dash font med or medium 1.2 rem and the last one is going to be double dash font small 1 rem and that's our css variables that we're going to use for this application then i'm going to set the font for the whole application and also do some resetting here so i have an asterisk like that i set the box sizing to border dash box and then i set the font family to able and that's the google font that is imported from the index.html file and then i have the backup font of sans serif all right that's the resetting then on the body i'm gonna set a few things also so i'm gonna set the margin to zero the padding is gonna be zero like that and then as i told you with style components you can nest stuff so inside of the body we can nest the h1 tag like this and set the font size to 2rm font weight is going to be 600 and the color and i'm going to grab this from my variables that i created up here and when you grab a variable in css you do that by typing out var parenthesis and then the variable name in this case it's going to be double dash white so that's the h1 then i'm going to set the h3 the font size is going to be 1.1 rm and the font weight is going to be 600 on that one also and then one more thing to do here and that's the p tag so font size one rem for the p tag and the color is also going to be white so there double dash white and then i also do some oral formatting and sometimes when i do this create global styling the order formatting 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 very easy to forget to save the file and then it doesn't work so this is everything that we need for our global styles now we're going to move inside of the app.js file and up here where we import react we can mark it with styles and then we import global style from dot forward slash global style so this means that we're importing this one that we created here this cons that's called global style we can import it because we export it inside of this file we don't do a default export as i'm gonna show you when we create components that's why we use curly brackets and import this as a named import and we're importing it from the file that's called global style you don't have to type out dot js it's enough with just typing out global style it will figure the file extension out itself all right so there we have our global style component but how do we use it in our application we should place this at the top level of our application and as we're going to have a component that wraps or complete the application in this case it's the div that's called app it has a class name of app we're going to change this out later when we have the routing setup but for now that's a wrapping div so inside of that one we can use a global style and we self-close it like this we don't have any props to send into this one and we're not setting any class name or stuff like that so when you use a plain component without class name and props in react you do it like this and this is very similar to an html tag so we save the file go back to our browser the only thing we can see now is that the morgan some padding have changed here it's just right at the edges here now and it wasn't that before so we know that our global styles are working and we can actually just comment this one out save the file go back to our browser and you can see that the margin is there now that way we know that it's working and hopefully we didn't do any mistake in the css itself so it should work otherwise we have to adjust that later all right in the next video we're going to start creating the header component for the application so we're going to create our first real component in this application and it's going to be the header component so the first thing we do when we create a new component is to create a file for that component and you can see that we have our src folder here and we have an images folder but we don't have a folder that's going to hold our components i usually create a folder that's called components that's what i'm going to do now components all lowercase letters and inside of this folder we're going to create all of our components and the thing is that the structuring of an application is something that's highly subjective so you can have your own opinions on how you want to structure it and if you want to structure it in a different way you can of course do that but please be aware that this course will have this full structure and you have to think about it if you change stuff yourself if you just want to focus on learning react i highly recommend that you use this folder structure that i created for the course i also gonna have a folder for each component because i want to separate out my styles and have the styles in a separate file and have the component itself in a separate file i've created this course so you don't have to create the styles if you want so that's easier for me to handle it that way by separating the mouth so therefore i also think it's nice to have everything related to component in its own folder so we're going to create a new folder inside of the components folder that's called header capital h so we inside a header folder and this is something in visual studio code it won't show a complete tree structure here when you just have one folder but this will change later but we're inside a header folder and inside a header folder i'm going to create a new file that's called index.js and this is also something that's highly subjective actually because i'm going to create my component in the index.js file so we're going to have one folder for each component and each folder is going to have an index.js file and this is great when you import stuff as i'm going to show you later but it's not that great if you for example have 10 components open up here they all going to be named index.js so that's a downside by doing it like this but this is a fairly small application so i don't think it matters i can actually show this if we have a component that's named test component we import it like this and from dot forward slash we have our folder that's called test component like this of course we don't have this one now this is just an example it's exported as a default export so we import like test component without the curly brackets we can name it to whatever we want but i like to name them just exactly as they are in the files and we import it from the test component folder and then if we have a file that's called index.js we don't have to type out anything more here it will automatically grab that index.js file but if we name this file for example test component also we have to specify it like this have to type it out two times and i don't like to have to type it in two times so that's why i'm using an index.js file instead as this is a fairly small application so we don't get confused up here when we have a lot of components open so that's my explanation to why i'm using this structure and that's also why i name my files like this all right so delete this one here we're also going to create placeholder components for the styles because we're going to use these style components inside of this component itself so that's what we're going to do and we do that by creating another file that's called header.styles.js and this is how i like to name my style component files so i have the component name and then i have a dot and then i mark it with styles and then i have a dot on the file extension all right so from the style components we import styled like this import style from style components components it should be an s then i'm just going to create placeholder components because i am going to create the styles in the next video so if you have shoes to skip the styles you don't have to do them just as before you always have to export these ones because they are in a separate file and we are going to import them in the index.js file soon export const i have a component that i like to name wrapper and it's going to be a style dot div so this is a div that i'm going to style and i just have the double ticks and i end it there because this is just a placeholder now so we could just copy this one but as i told you i want to repeat stuff and type it in many times when you learn things so we export const i have another component that is going to be called content and it equals from the start we have another div double back ticks and end it then we export const logo imd and it equals a style and this is an image it's the logo that we're gonna style double back ticks and end it and then we export const tmdb logo imd be careful with the capital letters here this is the movie database logo so capital tmdb capital l and capital i and from the style we're gonna style another image like this so this is the four style components that we're going to use for this react component so save the file and i'm going to show you in the next video how to create the styles the actual css but move inside of the index.js we're going to create our header component now the first thing you do when you create a react component is to import react capital r from react and that will make sure that we are using react in this component then i have some images for the logo so if we look inside of the image folder i have the tmdb logo this is an svd so we just see some code here and then we also have the react movie logo and that's also an svg so move back to the index.js we're going to import this once now so import rmdb logo you can name it to whatever you want here but i choose to name it rmdb logo you could just name it logo of course if you want to do that but i want to separate them out because we're going to have the tmdb logo also and we're going to import it from dot dot forward slash that's in the header folder then we want to go up one more folder so dot dot forward slash again and then we have our images folder and then we grab the react dash movie dash logo dot svg in this case it's really important that you also type out the svg extension otherwise it won't work when it's an image so that's the rmdb logo then we import the tmdb logo from dot dot forward slash dot dot forward slash images forward slash tmdb underscore logo 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 import instead but i choose to not do this in this course as i want this to be kind of beginner friendly and to be honest we're not going to have that long file path so that's why okay so that's our logos that's our images for the logos then we're going to import the styles that we created in header.styles.js because we export them here as i told you so we're going to import them in this component so import curly brackets we have a wrapper we have our content we have our logo imd we have our tmdb logo no logo img tmdb logo imd and we're going to import these once from dot forward slash header dot styles and we end it with a c my colon i'm going to remove the sidebar here so we can see what we're doing that's it we have everything we need to assemble this component for now so we're going to create a component that's named header and we're going to use just functional components in our application because now you can have state in your functional components a couple of years ago you had to create a class if you want to have some state but now we have hooks and we can use just functional components so i like to create my components with an arrow function so const header equals parenthesis and a fat arrow and that's an arrow function you can have a regular function if you want to have that also and then of course you just do it like this instead function header and you have your curly brackets but i like to have the error function and that's because you can make an implicit return like this if we're just returning jsx we can have parentheses and you don't need to type out return and in our case we're going to have the wrapper that's the style component that we created and inside of the wrapper we're gonna have the content that's also a style component that we created and then i'm gonna have the logo imd and we can set the source on this one because this is an image tag that we styled so we can use the same attribute the src is going to equal and we have imported our rmdb logo rmdb logo like this we set an alt and we can name it rmdb-logo and then we can self-close it like this so that's a logo for this application then we have the movie database logo tmdb logo img we have the src it's going to be the tmdb logo img and we set the alt to tmdb dash logo and we self close it do some auto formatting and now you can see yeah okay i just named it tmdb logo of course that's style component we shouldn't use that so tmdb logo of course and now you can see that it complains here because we're not exporting this one it says it's never used and that's because we don't export it you should always export it and i like to do the export here at the bottom so export default header and this is also es6 syntax for exporting something so in this case we don't have a named export we export it as a default some people like to have their export here instead i don't like that so that's why i have it at the bottom here but you can do however you want and this is our header component for now but we're not actually using it if we go back to our application here you can see that nothing has happened because we have created a component but we're not actually using it yet so we have to do something about that so let's go back to our app.js file and inside of this div here the wrapping div this is also something that you have to know because in react you can always just return one component you have to wrap the components if you have multiple of them in another component or in something that's called a fragment that i'm going to talk about later in this course so inside of 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 with components like this and then i import header from dot forward slash components forward slash header like this when you want to use a component in react you have to import it first like this this is a module that we import our component is a model that we import with es6 syntax like this right and then we can use the component here for now we don't have any props for this one so just as we did with the global style we can insert the component here down in the jsx and we have our header so do some order formatting and save it and if we go back to our browser you can see that we can't really see the images now and that's because we haven't set the styling for the images now so that's what we're going to do in the next video or if you choose to not create the styles you probably will see the header up here now if you're using the styles that you copied over to your project folder but in the next video we're going to create the styles and that will make the header show up with the logos we have created our header component but we can't really see anything so we have to create the styles for it all so you can see it yeah it looks like crap here so we have to give this some styling also so we see the nice little logos and our header so inside our file that's called header.styles.js we're going to start by creating the wrapper style component we're going to set a background on that one background and from our variables we're going to grab the one that's called dark gray like this and then i'm gonna give it some padding 0 and 20 pixels and that will give it some padding on the sides save it go back to our browser and now you can see that we see our gigantic logos here and our gigantic header so we have to do something about this one also so we have our content div this one is going to be displayed as a flex because i want to place the logos on the left and the right and we can do that with flex so first we align items to center and this will align them vertically and then we justify the content and we set it to space between and this will create space between them and push them to the side one is going to be pushed to the right and one is going to be pushed to the left and i'm also going to set the max width of this one and that's why i also have a container that's called content because the wrapper is going to have this background of dark gray but i don't want the content itself to have the full width the max width is going to be from our variable dash dash max width like this and i'm going to set some padding at the top and bottom of 20 pixels and zero on the sides and i set the margin to zero auro and this will center the content div itself save it go back and see what we've got so far you can see that they are pushed to the size and that's great flexbox is really neat to do stuff like this but the size isn't correct on the logo so we have to modify this so we have our logo imd that's the main logo and that's a style image we set the width to 200 pixels on this one save it go back to the application you can see that we have the correct size here but we also want to change this size on the logo when we are on smaller devices so we create a media query at media screen and max dash with i don't really know if you need to actually use screen today i think it's not necessary but i'm used to that so i will do that i set the max width to 500 pixels this means that when the screen size is lesser than 500 pixels this one will kick in so we set the width to 150 pixels on that one save it go back to our application and see what we got so i can make this smaller and you can see that there the logo gets smaller also so we know that the media query is working and this is also something that's super great with start components because you can nest the media queries as i did inside of this component i think this is very readable to do it like this because you know that this specific media query belongs to this component all right so that's the main logo then we just have to style the tmdb logo also so i'm going to set the width to 100 pixels on this one and then i set the media query on this one also at media screen and max with 500 pixels so it may seem redundant to have two of them here but actually as i told you i think this is very readable if you want to change the media query for just that component you can do that inside of the nested media query here and i like that a lot so for this one i'm going to set the width to 80 pixels and save it go back to the application and there you have it this is our header and you can see that it's working on both of the logos when we make the viewport smaller sweet that's the styles for the header in the next video we're going to scaffold out our homepage all right we're going to start building the home page for our nice little application and we're going to have all this stuff here on our homepage the homepage is going to be what's called a container component and then we're going to create different components for example for the hero image for the search bar for the thumbnails for the grid and for the load more button let's go back to our code editor and inside the components folder we create a new file that we call home dot js capital h and this one i don't have a folder for this one because this is kind of more a container component so we don't have any styling in this one we're going to apply the styling on the individual components instead all right so the first thing we always do when we create a component in react is to import react import react from react then i'm going to create a little comment here and call it config because i'm going to import some stuff from the file that's called config.js and inside of this file i've set everything up for you that's needed for the movie database api and i export them here in an object so we're going to import a few things from this file in the home component so go back to the home.js and we import curly brackets we're going to import the poster underscore size all capital letters we're going to import the backdrop underscore size and the image underscore base underscore url i'll remove this sidebar here we're going to import them from dot forward slash config like this and be very careful here with the spelling all capital letters and underscore all right then later we're going to import a lot of components here so for now i just mark it like this we're also going to import a hook so i mark that one also and we're also going to import an image so if we go back and look here in the images folder i have this image that's called no underscore image and this one is a fallback image if we don't get an image back from the movie database api so we have this funny little smiley balloon here that we'll fall back to if we don't have an image so go back to the home.js and we import i'm going to call it no image and when you do an import like this you can call it whatever you want so it doesn't need to be named like this i'm going to import from dot dot forward slash images and i grab the no underscore image dot jpg very important to have the file extension when you're importing images like this all right then i'm going to create the component itself and as i told you i like to create it with an arrow function you can have a regular function if you want to do that i have a const home i have a capital h all react components always have a capital first letter very important always name your components with a capital first letter so home capital h and then we don't have any props for this one so i just leave it empty here the parenthesis and then i have an arrow function and i have curly brackets because this one is going to have some logic inside of it so we have to have a return statement and make an explicit return so return and for now we can just return a div that says home page like this all right then we can also actually scaffold out our states that we're going to have in this component and for that one we're going to need a hook that's called use state so make sure to import that one up here you type in a coma and then you have curly brackets and we import use state from the react library and the use state hook is the hook that you use in functional components in react to create a state so when we call the use state hook we'll get an array back the first value is going to be the state value itself and the second value is going to be the setter for the state and the standard for grabbing and using these values is to use the es6 syntax for the structuring so i create a const add the structure out the state and the setter for the state set state and you can call it whatever you want here but i want to call this state you could call it cool like this but i don't actually think it's that cool so i'm going to stick with state like this and then we have an equal sign and we call the use statehook for now we leave it empty but you could provide it with an initial state in here but we don't do that for now so as you can see here i'm calling you state and this one will give us an array back so from that array i the structure out the state and the center for the state otherwise we could do it like this but you shouldn't do that we have a const state you stayed like this and this state would be an array with the first value date value here and then we have the the setter for the state as the second value and then as we didn't destructure this one out here we just put it in this const that's called state if we want to grab the state we have to type it in like this to use the index 0 because that's the first value in the array and if we want to set the state we have to grab the setter like this with the second value in the array that is the index one so that's no good actually it's much better to do it like this instead we just structure it out and we can also name them individually by doing it like this all right so this is the way to go this is the way you should do it so that's the state wheel that will hold all the movies then we're going to have a state for the loading so loading and set loading equals use state and this one i'm going to give an initial state i'm going to set it to false and this is also great with the use state hook you can have as many of these ones as you want so you can split the state up into multiple ones and you couldn't do that in the class components in react because before we had to use state hook we needed to create a class to have state in react and then we just had one state and you have to have a state object with all the stuff in it but now we can separate them out into different states and that's super great so i'm going to create the third one that i call error and set error and this one is going to be used if we receive an error from the api 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 more thing 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 order formatting now it looks great anyways all right save the file but if we go back to our application you can see that we don't see anything yet it just says start here that's because we have created a component but we're not actually using it so in the app.js file up here where we import the header we're going to import home from dot forward slash components and home like that and then we can use that component down here so we remove start here and use our component and we self-close it because we're not sending in any props so we 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 home page and that's great we know that it's working and you may wonder why we have all these warnings here but they are just warnings because we're not using these values now so they will disappear later when we use them in the component so nothing to worry about there in the next video i'm just going to do a short talk on the standard hooks that's indirect library and then we'll move on and actually fetch some data from the movie database api okay before we move on i just want to make a brief talk about the built-in hooks that's in the react library we can also create our custom hooks and we're going to do that in this course also but we have some hooks that's built in that you're probably going to use most of the time when you create react applications so i'm on there js.org and i'm in this chapter here that's called hooks this is great if you want to know more about hooks because honestly hooks can be a little bit hard to grasp in the beginning so i highly recommend that you actually read this chapter here if you're completely new to hooks and if you're new to react this is a great way to start doing some reading before you do any course or create anything with react it's always a good idea to have some basic theoretical knowledge before you start with something but of course it depends on how you like to learn stuff so i shouldn't tell you how to do it all right so they have an introduction to hooks they have different chapters here we're actually going to look at this one number seven hooks api reference and i'm going to talk about the hooks that's built in the library so they separated in basic hooks and additional hooks and the basic hooks are probably the ones that you're going to use not maybe 99 but perhaps 95 of the time and then you're going to create some own custom hooks and use some special hooks sometimes so we already talked a little about the used state hook that's the one that you use for creating state in a functional component in react so that one we imported in the last video and we initialized it and set it up in the home component we're also going to use a hook that's called use effect and use effect is a hook that you can use for side effects so in our case we're going to grab data from an api and that's a side effect so we're going to use the use effect hook for grabbing that data and we're going to use the state to keep that data in our application then you have a hook that's called use context we're not going to use that hook in the main part of this course but i am going to use the use context hook in the extra chapter at the end where i create a movie database login in the application and make it possible for you to cast a vote on the movies then i'm going to set up a global state that holds the login information of the user by using the use context so that's the basic hooks and then you have some additional hooks use reducer that's something that's very similar to if you for example have used redux the use reducer is very similar to that one and it can be used instead of the use state hook if you want a more i don't know if it's a more complex state but yeah yeah maybe a more complex state than the use date we won't use it in this course and you use callback and use memo hooks or hooks that you can use to memorize stuff if you don't want to recreate for example a function on each render they very handy if you for example run into something that's called an infinity loop with the use effect that's very common actually in react that you can do that because if you set the state in a use effect that will trigger a re-render and if you have a dependency in the use effect for example a function that recreates on each render that will trigger that effect again and that will set the state again and it will trigger the effect again and yeah you get the point here it will create an infinity loop then you can use the use callback to wrap that function inside the use callback hook and that won't recreate the function on each render because by default if you create just a regular function react will recreate that function on each render and the use effect if you specify that one in what in something that's called a dependency array that we're going to talk about then that use effect will trigger again because it will think it's a new function because that function has been recreated on the next render so use callback and use memo or hooks you can use to memorize stuff in react but i think there are a little bit more advanced so i won't use them in this course the use ref hooked we're actually going to use that one because i'm going to show you a little trick in this application and a neat little use case to use this one use ref is basically a hook you can use to create a mutable value that won't trigger a re-render you can see it just maybe like a kind of a regular variable that won't trigger or re-render so we can use this one to create a mutable value because if we have it in a state it will always trigger a re-render when we change that value but if we change the value with the use ref hook it won't trigger a re-render use imperative handle i've never used this one so i actually don't know what is for use layout effect it's very similar to use effect they only differ in when they trigger so there's no use case for the use layout effect in this course so i won't go into detail and use debug value i haven't used this one either these are the built-in hooks in react but i think the strength about hook is that you actually can create custom hooks and we're going to do that in this course also that was a brief introduction to hooks in react so in the next video we're going to fetch some data from the movie database api we're going to use the use effect hook and the use state hook for that all right let the fun begin because now we're actually gonna fetch some data from the movie database api and that's super exciting because it's always great when you see the magic happens when you have that nice little json object with all the data that we fetched from an external source i like that i love it all right so we're going to be in the home.js file for this one now then later we're going to kind of break this one out and place it in its own custom hook but for now we're going to be in the home component and create it inside of here so we're already importing use state but we're also going to import use effect because we're going to use this one for fetching the data then i have this file here that's called api.js and inside of this file i created all the functions for fetching data from the api and i will also say that this will probably one of the most advanced videos in this course and also one of the longest so you can care a little extra about this video because it's a kind of advanced stuff in this one all right in this file api.js i have this object here where i export a couple of functions the three first ones are the ones that we actually need to care about the other ones is for the bonus material for this course so you don't have to care about that now so this one is the one that we're going to use now fetch movies and this will fetch a lot of movies multiple movies then i have this fetch movie without the s and this one will fetch an individual movie and then i have fetch credits and that's the credits for the movie itself so these ones are going to be used for the individual movie page and if we take a quick look at these fetch movies here you can see that this one has the parameters of search term and page so we're going to give it the search term and the page that we want fetch and i have a ternary operator here that's es6 syntax for kind of a shortcut for if and else so i do a check here i check if i have a search term and then i have a question mark and if this one is true if i have a search term it will run this one to the right of the question mark and if this one is false i have a colon here it will run this one to the right of the colon it's a shorthand for if and else and i have to do this because we have different resources from the endpoint depending on if we're doing a search or if we're grabbing the most popular movies so that's why i have this turner operator here so if we're in the search we're going to use this resource from the endpoint here and also attach the search term and then we also grab the correct page so we add this as a parameter to the url and then i return on the wait and i actually weight this two times and that's because i first await the fetch from the endpoint and then i await when i actually convert it with json because this one is also async so that's why i have two awaits and as i have an await i have marked this one with an async so i'm using the async await syntax for this one you could also use the good old then but i think that's not as readable i actually like this a lot more so that's why i'm using the async await syntax for this one all right and i think that's it for this file we don't have to care about this because we're going to import this function so go back to home.js and just below here i'm also going to remove the sidebar i mark it with api and then i import api from dot forward slash api and this will give us this object where we can access those functions i talked about all right so that's the api then down in the actual component here just above the return statement we can create the new function that we're going to call the fetch movies and as we're fetching from the api and we're going to use a weight we have to mark this with async and then it's going to have two parameters it's going to have the page and the search term and we can set the default value on the search term to an empty string like this then i have an arrow and i have curly brackets so we create this function here it's an async function because we're going to fetch from the api and await that data this one is going to get the page we 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 state when we create the search bar so we're going to add in more states here later and also have a state for a search term and if we don't send in a search term we're going to fall back to an empty string so we set this one as default so that's the fetch movies function we're going to wrap this in a try and catch block try and catch and we can get the error in this case i'm not actually going to set the error i'm just going to have a flag that's setting if it's true or false but of course you can have a state where you can store the message from there or also if you want to do that so in the catch we're just going to have set error and we set it to true and here you can see how i use this setter for this state so we destructure it out here and to set a new state for that one we call this one and we give it the value so i call set error and i give it the value true and this will change that state to true inside our try block we're first going to set the error to false because now we're grabbing new data so we have to make sure that this one isn't set to true because we don't have an error before we have fetched anything and we're going to set the loading to true because now we're fetching so we set this flag to true and this is how we can keep track on when we're actually fetching and we can show the loading spinner and stuff like that all right then i create a cons that i call movies and this const is going to hold all the movies so i'm going to wait and from the api that we imported up here we have that function that i showed you that's called fetch movies with an s really important and then we're going to give it the search term and the page so this will hopefully grab the movies for us and we can try this out with console.log movies but if we go back to our application you can see that we don't actually get anything here because we haven't triggered this function and we have to do that in a use effect so we have the function now but we haven't triggered it do some order formatting and go below the function here and we call the use effect and the use effect is called with an inline function like this and then we can do what we want inside of this use effect so what we want now is to trigger this only on mount only when we mount this home component on the initial run of this one so we can do this by specifying a coma here and an empty array this is what's called a dependency array for the use effect and we can specify different dependencies on when we want this use effect to trigger in our case we just want it for now to trigger when we start up the application and when the home component mounts so i specify this as an empty array for now and when we specify it as an empty array it will just run once so that's really neat in this case we can just call fetch movies we're going to send in one because we want to fetch the first page we can also mark this one actually with initial render so we have specified an empty dependency array meaning that it will only run once on the initial render and inside the use effect we call our fetch movies function and hopefully we will get the console log of all the movies if we save this one and go back to our browser and yes you can see here we have the movie object here so in this object we have the page one and this is all from the movie database api so it's nothing that we have set up here we have a total pages of 500 total results of 10 000 and we have the actual movies in a property that's called results and this is an array and we get 20 movies at a time from the api so that's sweet we know that we're grabbing data and we know that it just triggers once and that's super great so now when we have the data here we can actually set our state because we have our state up here and we want to put our movies in the state so i'm going to call set state and for this one i'm going to provide it with an inline function it's a callback function that's going to be called with the previous state by the state setter if you provide a state setter with a function it's going to be called with the previous state and that's great because we need a previous state when we set the state and i'm going to show you why in a second so we have a parameter that i call prev you can call it whatever you want in the state we want to set an object so we want to return an object so i have a parenthesis and curly brackets if we didn't have the parenthesis it would think that these curly brackets marks the scope of the function itself and that's no good we want to return an object and an object also is marked with the curly brackets so we have this parenthesis before and this parenthesis after and this will make sure that we return an object and this parenthesis here is for the setter of course so we have two parentheses here at the end so i have this little neat little plugin also in visual studio code where you can see i get these different colors of the parenthesis so it's really easy to see the parenthesis i think it's called rainbow brackets that plug-in so we're going to set the state we have the movies inside of this const so i'm going to use the es6 syntax that's called spread i use three dots and spread the movies and this is because i'm going to take this object here and spread it out here that means that we're creating a new object it's going to take all the properties from these movies and spread them out inside of this object here when you set the state in react you should always provide it with a new value you should never mutate the state in react because if you mutate the state directly it won't trigger a re-render and there can be a lot of trouble you should always use a cell like this to modify the state and you should always provide it with a new value and not mutate the state really really important never mutate the state in react okay so we 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 in our case we need to decide on how this new stage should look because if we load more movies we want to append the new movies to the old state to the old movies and not wipe them out so we have to do some check here for that on the results so we have the results property colon and then i'm gonna put it on a new row i'm gonna check if the page is greater than one then i have a question mark this is a turner operator here again i'm gonna return a new array i spread out from the previous state prev that's the one here as i told you this one is getting called with the previous state so from the previous state i spread out the old results three dots prev dot results with an s at the end all right so that's the old movies that we already have in the state then i have a coma and i'm going to attach the new movies so from the new movies dot dot dot movies dot results and this one is going to append the new movies to this array so we get an array with the old movies and the new movies and that's great then we have a colon because if we're not loading more we can wipe out the old movies and just give it the new movies that we got in this const called movies so dot dot dot movies dot results like this do some order formatting and this will hopefully work we don't know if it works because we haven't created a load more button yet so we'll see that later in the course and there's one more thing we have to do because we're setting the loading to true here and we have to set it to false when we have grabbed all the movies so just below the try and catch block here at the end of this function we're going to set loading the false like this save the file go back to see that it works reload it and yes it works and that's super great but we're console logging it out here we don't know if it works with the state so we remove this console.log and go down here somewhere just above the return statement and we can console.log out the state instead save the file and we hope for the best go back to the browser and yes you can see we have the state here and you may wonder why is it showing this many times and that's because if we look in the home component we have three different states here so it will re-render each time we change one of these states and some may say and go crazy oh we have a lot of rerenders that's crazy it will make this application so slow but yeah you shouldn't worry about that actually because react will diff those things and only update things in the dom that has changed so it doesn't matter if it re-rendered this many times and to be honest react is fast so even if you had a lot of rear enders you won't have any performance issue in an application of this scale don't worry it's completely okay that it re-renders all these times because it won't re-render the complete page it will only re-render the stuff that has changed all right that's how you fetch data from the movie database api with a use effect hooked and then you put it in the state with the used state hook in the next video we're going to take all this logic here and create our own custom hook and place that data inside of there and then we can get rid of this one in the home component so it will look a lot cleaner okay we're grabbing data from the movie database api with a use effect hook and we place it in the state with the use state hook we're going to move all this logic inside of a custom hook instead because that will make this component a lot cleaner and it's always great to separate out this logic if we want to reuse it somewhere else in the application in our case we don't need to do that so we do it just because we want to clean up this component and to separate out this logic so that's why you create custom hooks either you do it because you want to reuse some logic somewhere in your application or you want to clean it out and have that separated out so inside of the src folder not in the components folder this time inside of the src folder create a new folder that's called hooks and inside of that folder create a new file that's called use home fetch camel casing dot js capital h capital f and why do i name it like this well react wants you to name all your custom hooks with use and then your name that way react knows that this is a custom hook you could skip to use use but you shouldn't do that you should always name them with use before the name always do it like that otherwise it can give you trouble in the future so inside of this file i'm going to create a new function i'm going to export it also because we're going to import this one in our home component and use this custom hook export const use home fetch and i create a regular arrow function like this all right so that's our function then we go back to our home component inside of the components folder and we're going to grab all this logic here all the states the fetch movies function and the use effect we can keep the console log for now it's going to give us an error but that's okay we're going to fix that soon go back to the use home fetch custom hook paste the logic in here and it complains now because we haven't imported these ones here so we could actually just copy them from the home component but just as before i want us to type in stuff a lot here because we're learning stuff so we're going to import from the react library we're going to need the use state so import curly brackets use state coma use effect and we're also going to use a hook that's called use ref later so we can import that one also and we import it from react and you can see that i don't import react in this one because we not need the actual react library we just need this stuff from that library so that's why we don't have any jsx or anything here so that's why 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 the home so go back to the home cut this one out here the import api like this go back to the use home fetch hooked and paste it in here and this one should be it all right do some order formatting and we only have this function now we're not actually returning something so we have to return something in our custom hook also so go down to the bottom of the function and there we're going to return our states for now we're going to return more stuff in this one later when we create more stuff but now we return an object and we have the state we have the loading and the error like this and this is also es6 syntax as we return this object this one is automatically going to get the property stayed because it has the same name and all of these ones has the same name so we don't have to specify them explicitly it will figure this out itself all right there's one more thing i want to do inside of this one before we finished for this video and that is i want to create an initial state so up here i create a const initial state it's always a great idea to have an initial state if you want to reset stuff and we want to do that later so i'm going to structure this state just as the one that we got back from the movie database api so we have the page it's gonna be zero initially then we have the results that's the property that holds all the movies are gonna provide it with an empty array initially we have the total underscore pages is going to be zero and the total underscore results it's going to be zero also so this is the initial state and now we can give this initial state to the used state here where we create a state so i provide it with initial state and this will make sure that it gets this state all right so that's our custom hook for now we go back to the home component and now we have to use this custom hook i already created this comment here where we're going to import it so we import curly brackets use movie fetch like this from dot dot forward slash hooks and use home fetch then inside our sad little empty home component we're going to use this one and yet again i'm going to use es6 the structure syntax to get those properties from the object that we exported here we export an object with all these values here so i'm going to structure them out here curly brackets stayed loading and error equal sign and i call my custom hook use moviefetch so this will hopefully work we're console logging out the state so we save this file make sure that you also save the hook itself and go back to the browser reload it yeah i have some error here use movie fetch is not exported didn't i export it export const yeah it should be used home fetch of course not use movie fetch so i change this one to use home fetch use home fetch like this save the file go back to the browser and you can see that we have or stayed here and that's great you can see there's a lot of rerenders and a lot of people will say oh crazy there's too many rirenders this is a performance issue but it's actually not so this is totally fine but you can see that we have our initial state here first and it's zero everything is zeroed out and then we get the data here and we have all the movies inside here so that's sweet and i promise you it won't be any performance issue in this application because of these rerenders so this is how you create a custom hook in react always name your custom hooks with use before you have your name that's really important you should always name them like this in the next video we're going to start creating the components for the home page and we're going to start with a hero image in this video we're going to create this hero image here in the application so we're going to grab a background image and all the text here from the movie database api or actually we have already grabbed them so we're going to use that data inside of the hero image component let's go back to our code editor and inside the components folder create a new folder that we call hero image capital h capital i and inside a hero image folder create a new file that we call index.js and also file that we call hero image dot styles dot js just as before i'm just going to scale out the styles so we can use them in the component but i'm going to create the actual styles in the next video instead so if you already have this file here and choose to not create the styling for this course you already have this file here and don't need to do this so in the hero image.styles.js import styled from style components like this then i'm going to export a const that i call wrapper and it's going to equal from style.div i'm going to create a div i have backticks like this then i'm going to export const content equals styled.div exactly the same and double backticks and i'm going to have one that's called export construct text equals styled dot div double back ticks and that's it that's three of them save this file and go inside the index.js file we import react from react then we're going to import the styles so i mark it with styles import wrapper content and text from dot forward slash hero image styles right then i create the component itself const hero image capital letters h and i equals and this one is actually going to receive some props and a prop is something that you can send into component so that component can change dynamically depending on the props a prop should never be changed inside a component that receives the props so they can only change if something re-renders and they get a new prop so that's how that works and the props is sent into component on a prop object like this so we have the prop i have an arrow function and for this one i'm just going to return jsx so i can make an implicit return so i have parenthesis so i can skip the return statement and then i have my wrapper and this is a style component we scaffold it out just recently this one can also receive a prop so when you're sending a prop to component you do it by naming the prop and then you give it the value in this case it's going to be from the prop that this component get prop there's going to be a prop that's called image so we send it 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 background image in this component by sending in the image url to the style component that's named wrapper so that's what i'm doing here so i'm sending this url along to the style component on a prop that's called image inside this wrapper we're gonna have the content and inside the content we're gonna have the text like this and inside the text we're gonna have a regular h1 tag and in jsx when you want to use a javascript expression you create curly brackets and then you type in your expression in our case we want to show the title and this hero image is going to receive the title from the prop that's called title like this and you end it with a curly bracket you can have any javascript expression inside of here that you want so you can do some calculations and map through stuff and things like that that we're going to do later also i'm going to show you that then we have a p tag and yet again i have curly brackets i have the text and and curly brackets and that one is from the prop dot text do some order formatting and then i export default hero image and this looks fine actually but i want to show you a little trick here now that you should use when you create your components because now we have to type out prop dot image prop dot title prop dot text so instead you can use es6 syntax up here and the structure out these props from the prop object so we have parentheses and then we have curly brackets so we are destruction out this object and then we have the image title and the text and then we can remove prop here on all of these so i think you should get used to always doing it like this because it will look a lot more cleaner with the structural mode up here so we don't have to type in prop every time all right save the component and just as usual we can't see anything now if we go back to our application because we haven't used the component yet save it go back to home and up here where i marked it with components we import hero image from dot forward slash hero image and now we can use this component so below here instead of home page and this div we can just return the hero image like this but we want to send along some props to this one also because this one needs the title and stuff like that and we also need to check that we actually have any movies in the state so we can't actually do it like this because it will throw an error if we don't have any movies in that array so what we can do here instead it we return something here inside of the parenthesis because we're going to need multiple rows so we move this one inside of here instead and as i told you before we can only return one parent element in jsx so we have to wrap this once because we're gonna have more components here later so we can create something that's called 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 create a div we just want to return this without creating a div and you can do that by creating a fragment and this is the shorthand for fragments you just create these angle brackets and an end angle bracket and this will work so inside of here we also want to check if we actually have some result in the state so just as before as i did in the hero image itself in the you can see here in the jsx where i have a javascript expression i can do the same in the home so go back to the home i have a curly bracket and now i can use any javascript expression that i want so i want to check if state results the hero image is going to be the first movie it's going to be the most popular movie so i grab the first element in the array i check if that one exists and then i do something that's called a short circuit so i have double ampersands and i'm going to move this curly bracket to the end or here because i want this one to be nested inside of this one so this means that if this one is true it will run this code here if it's false it will just fall back and sometimes some argue that you shouldn't do it like this because it will return the actual value false here but jsx won't show it but if you want you could instead do a ternary operator like this so if this one is true we return the hero image and then we have colon otherwise we return null we can put it on its own row and this will also work and we want to give this hero image some props so we have a prop of image and that one is going to equal and this one i have to construct because the image url is constructed by the image base url that we we that we get here and also the backdrop size so i have backticks dollar sign curly brackets i'm going to grab the image base url like this and this one is going to be long so i'm going to remove the sidebar so this is a template literal and you can interpolate expressions like this in a string literal all right then i'm going to add the backdrop size like this and then i'm going to add you can see i have dollar sign and curly brackets for all of them here dollar sign and curly brackets again from the state dot results i grab the first element again and then we have something that's called backdrop underscore path be very careful about 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 the image url and these ones are all set up in this file here that's called config they are set up as per instructions from the movie database api you can see the image base url is this url here so that's the one and then i set the backdrop size you can change this size if you want and try it here you can make them smaller and you can set them to the original size i set them to width 1280 in this case so that's what i'm grabbing here and i'm generating this string here by merging them together in this template literal here all right then we have the title and we get that one from state.results the first element and we have a property that's called original underscore title like this and then we have the text yet again from state results from the first element you could also break this out in its own variable if you don't want to type this in every time so there's probably a lot of things you can optimize in this application but as this is a beginner slash intermediate course i don't want to do a lot of stuff like this because it will only take time and it will be confusing with all the other stuff going on so we have a property here that's called overview and these are of course all from the movie database api it's nothing that i have created these are named like this from the movie database api all right do some order formatting so you can see here i send in three props image title and text and these are the ones that i destruction out in this component itself so when you want to give a prop to a component you do it like this you name the prop and then you give it the value and then you can grab those props inside of this component so save the file go back to the browser and you can see that we can't see anything yet but if i mark it here you can see that we have the text but we don't actually have set any styling for this one yet so that's what we're going to do in the next video and then we'll hopefully see this nice little hero image in our application it's time to create the styles for the hero component so move back inside of the code editor and the file that's called heroimage.styles.js that we created in the last video so we have all these components here and just give it some space here and we're going to start with a wrapper and to the wrapper we send in a prop if you remember this one here you can see we have this image prop here so just as we do with regular component we can send in props to a style component and this is something that is super great with style components because this way we can do some stuff with a css and in our case we're going to set a background image the usual way you did that back in the days was that you had to create some inline css when you had a dynamic image and you didn't know from the beginning where it came from or what what its name was you had to set it with an inline styling on the element itself in the html but in this case we can do it much much cleaner and send in a prop to this component and we set the image here and also we're going to create if you look here at the finished application i don't know if you see it now but there's a slight little gradient down here also because i want this text to be able to be seen on any different background that's why i have a dark little gradient below this text here so that's what we're also going to create so in the wrap component we have this div that we're styling here with style components so we have the background and we're going to set a linear gradient first linear gradient parenthesis and it's going to go to bottom rgba and i use this because i want to set the alpha value 0 0 0 0 and these values are order generated from somewhere on the internet i i usually do that when i create gradients it's so easy to just go there and type in your gradient and it will give you the code so that's why all these values may seem a little bit odd this one is 39 and the rgba is going to be 0 0 0 0 again and 41 rgba 0 0 0 and 0.65 that's the alpha value and i see now that this one shouldn't even need to have two of these ones here i think actually i can remove this one here we don't need that one and then we set hundred percent and just after the parenthesis the end parenthesis we have a comma and then we specify the url and now we can grab that prop that we send in here and you do that as this is a template literal just as before we use dollar sign encoded brackets and we can grab those props you create an inline function and this one will get called with the props and from the props we grab the image and if you wanted to structure them out you can do that also here then you have a parenthesis and then you hold the object and then we just structure out the image and we do it like this right and then we have a coma and from the variable we grab dark gray and hopefully this will work do some order formatting and save it go back to the browser and you can see that we actually have the image here but we haven't set any other properties so that's why it will look like this so let's go back here and we're going to set the background size 100 and cover we're going to set the background position the center the height is going to be 6 600 pixels position is going to be relative because we're going to absolute position our text so that's why we have to set this to relative and i'm also going to have a slight animation on this one so i set an animation that i'm going to call animate hero image and it's going to be for one second if we look at the finished here you can see that it kind of fades up so that's the animation that i'm going to create and i do that below here i nest it inside of here so at keyframes and the name is animate hero image and i go from opacity it's going to be zero to opacity is gonna be one save it go back and see what we've got and there you have it there's some little border up here i don't know why let's see if we sort itself out when i create the other styles but you can see that it it animates in here quite smoothly so that's great all right let's fix the other components so we have the content padding is going to be 20 pixels on that one we set a max width and we grab from our variable the max width and morgan it's going to be zero and auto save it let's check it out you can see that it's in the center now that's great and that one remove that nasty little border up there also that's sweet then we have the text let's create that one also i set the set index to 100 just to place it on top i set the max width to 700 pixels on this text position is going to be absolute from bottom i'm going to set it to 40 pixels and morgan right is going to be 20 pixels the min height is going to be 100 pixels and the color is going to be from the variables we have the white all right so that's our text and inside we have the h1 tag so for that one i set the font size and from our variables we have fonts big camel casing and then i'm going to have a media query on this one media screen and max of course i have to end this with a c my colon max width 720 pixels and i set the font size to variable dash dash font big so i'm making it slightly smaller right that's the h1 then we have the p tag it's gonna have a font size from the variables we grab font med that's the medium size and then we have a media query media screen and we set the max width 720 pixels and for that one the font size is going to be variable font small so this means of course that up until 720 pixels we will use the font small otherwise it will use the font medium and the same goes here we use the font big up until 720 pixels otherwise we use the font super big all right then we're going to have a media query on the text itself so media screen and max with 720 pixels and we set the max width to 100 percent and there may be room for optimization in the css because i haven't put the most focus in the css for this course as this is a course in react but i wanted to show you how to create the css also so that's why i included it but there are room for optimization i'm sure of that go back and see what we've got and it seems to be working let's see what happens yeah you can see it gets smaller and that's great and now it's actually starting to get fun because now we see different stuff happening here things are displaying on the screen and that's what i like with front-end development to actually see it put together like this all right in the next video we're going to create the logic for the grid component so we have our hero component and the next component would be the actual search bar but i'm going to say that one for later so we're going to create this grid now instead in this video so let's start by creating a logic just as usual and in the next video we create the styles go back to the code editor and inside the components create a new folder that's called grid and inside the grid create a new file that's called index.js and another file that's called grid.styles.js and capital g on the grid of course and just as before we're going to be in the grid.styles.js first to create the placeholders for the start components so import styled from style components then we export the const that we call wrapper and as you can see here this is great with star components because i named them the same but it doesn't matter they will be scoped to that component so we can have this exact same name that's super sweet so the styles won't interfere with each other so star dot div double back ticks and then we export const content and that equals the styled.div also and double backticks save it and go inside of the index.js file so we import react from react hopefully you're starting to learn is now so this will be in your muscle memory later then we have the styles we import the wrapper and the content from dot forward slash grid styles then we create a component itself const grid equals and i'm gonna destructure our two props that we're gonna send into this one so header and children i have an arrow function and i'm gonna do an implicit return and you may wonder what children is and that is a default prop that we can use in react when we nest stuff inside a component they will be accessible in the children prop so that's great i'm going to show you how that works in a second we're going to have a wrapper then we have an h1 tag and then i have curly brackets because i'm going to grab the header prop and display that here then we have the content and for that one i create another curly bracket and i grab the children so that means that whatever i wrap inside of this component when i use it i can display it here by displaying the children then we need to export default grid like this and save it so this is pretty much it for the grid component if we go back to the home.js file we can import it up here import grid from dot forward slash grid and then just below here below the hero image i'm going to use the grid here and this one is going to get one prop it's the header equals popular movies so inside the grid i'm going to map through all of the movies in the state so i have curly brackets and state dot results i map that's also es6 syntax we have a movie in this inline function i can make an implicit return so i have parenthesis and i use a lot of es6 syntax here as you can see and hopefully you know a bit about it before you start this course because it will be too long of a course if i explain every little syntax in detail but i try to explain some stuff for you and hopefully you'll learn a lot also from it but the map method is something you can use instead of a for loop so you use the map on the array the results array and it will map through each item in the array we haven't created a thumbnail yet so i'm going to create a div and i think we have a property that's called title so i map through every movie and now i'm just going to show a div in the grid that shows us the movie title auto format it save it go back to the application and you can see that we have all the movies here so it's displaying the title and you can see that it also warns us now each child in a list should have a unique key prop and that's when we map through things we have to mark it with a key also otherwise react will complain react is using this internally to diff stuff and to optimize itself so we can set a key on this one and we're going to give it the movie dot id so this is a unique id that we get from the movie database api it sometimes return two of the same movie and this one will actually give a warning done so it's some bug in the api i think because it should only return one of each movie so if it gives you a warning it's it's probably that because it has probably returned more than one of the same movie so you could actually add something else here you could add a random number also to the movie id if you have that problem so let's go back to the application and you can see that it doesn't complain now so now it's happy we have provided a unique key and that's super great and we have the titles but it looks like crap now because we haven't styled it and we haven't created the thumbnails yet in the next video we're going to style the grid itself and then we're going to create the thumbnails so we have our grid but we have to style it also and that's what we're going to do in this video move back to the code editor and in the file that's called grid.styles.js in the grid folder we have already created this once here so we're just going to fill them up with css and also i can tell you if you don't have that plugin installed in visual studio code i have a plugin that's called vs code dash style dash components so that's the one that creates this nice syntax highlighting inside of these style components so that's a little tip if you haven't installed that one all right so let's create the styles for the wrapper first we're going to set the max width from our variable that's called max width then we set the margin to zero auto that will center the div and we give it some padding 0 and 20 pixels that's padding on the sides and then we have the h1 tag i'm going to set the color from the variable mid gray on that one and then also i'm going to have a media query so at media screen and max dash with 768 pixels and this one is going to change the font size from the variable font big all right save it go back to the browser and you can see that we have these nice margins here but we haven't actually created a grid yet so that's what we're going to do next inside the content component we're going to display as a grid then we set something that's called grid template columns grid dash template dash columns we're going to set this one to repeat and this is a little trick you can use if you want to create a responsive grid so we repeat these columns we set it to autofill a coma and then we use the min max 200 pixels that's the minimum width that those little thumbnails can have and then we set it to one fragment so we don't specify an exact pixel width on the max value and this is css grid syntax and the css grid would probably require a complete course on its own so i'm not going to go there grid gap we're going to set that one to 2 rm so that will give it some spacing between the rows and the columns save it go back to the browser and you can see that we have our grid so now it's showing us five items on each row if we do like this you can see that it it is responsive and that's super great that's a neat trick you can use if you have a grid like this just with one row 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 repeat the columns and we set it to order fill and then we set the min and max value so we're telling it when it's 200 pixels wide it can't go lower so then it removes one column instead and it's going to do that all the way down to the mobile devices all right that's the styling for the grid it was pretty fast i think in the next video we're going to start creating the thumbnails we have the grid now but we haven't created the thumbnails for the movies so that's what we're going to do next move back inside of the code editor and inside the components folder create a new folder that you call thumb capital t and inside of that folder you create a new file that's called index.js and then you create another file that's called thumb.styles.js i hope you're beginning to see the pattern here on how i structure the components so first we're going to start in the thumb.styles.js just as before so we import style from styled components and for this one we're only going to have one component so export const image capital i and this one is going to be styled.imd because we're styling the image here all right save it and go back to the index.js file for the thumb so first we import react from react then we mark it with styles and import image from dot forward slash thumb styles we're gonna import some more stuff here later because these thumbnails are gonna be clickable we're gonna create that later when we have set up the routing and also started to create our movie page so for now we create our thumb component const thumb equals i'm going to structure out an image prop a movie id and clickable i make an implicit return on this one because i'm only going to return jsx for this one i'm going to have a wrapping div like this and then we're going to use this prop to tell if it's clickable or not and then we're going to have a turner operator here but for now we're just going to return an image so that's the image that we created here the source is going to be from the image prop and we can set an alt movie thump on that one we self close it and then down below here we export default thumb save the file then we're going to go back to the home component and also import this one so up here import thumb from dot forward slash thumb all right and below here where we map through all of the movies we're gonna use our thumb instead of this div so remove this one here and we use the thumb then we're going to have a key for this one also because we always need to have a key when we are mapping through components like this and display them so the key is going to be just as before the movie dot id we're going to set it to clickable that's going to be true it's always defaulted true so you don't have to do this if you want to set it to true for now that one isn't working because we didn't utilize it in the component itself but we're going to fix that later then we have the image prop and we're going to give it the url to the image and for this one we're also going to use that fallback image if we don't have an image for the movie so we're going to have a turner operator here movie dot poster underscore path so we're checking if we have a poster path if we don't have that we're going to display the fallback image but if we have this path we know that we can grab that image so we have a question mark i'm typing it on another row here but it's a regular toner operator then we have the image base url and i'm actually going to show you the other way now and not do it like this here you can do it the old way with plus instead we have the poster size and then we have the movie dot poster path movie dot poster underscore path be very careful with the spelling it's very easy to make a little typo here and that will break everything all right so that is when we have a poster path then we have the colon and we're going to display the no image if we don't have a poster path so that's the image then we're going to send in the movie id and that is because when we click on a thumbnail we need to have the movie id for that thumbnail so we know what movie to grab and display on the individual movie page so movie dot id and then we're gonna close the thumb component so be very careful here it's a little bit nested and and it's very easy to type something wrong here but this should be right i think i really hope so so i save it go back to the browser and as you can see we have the thumbnail but it doesn't look right and that's because i haven't styled them yet but at least we're displaying something so in the next video we're going to style the thumbnails so to make it look something like this instead really pretty and modern i hope okay we soon have a grid with nice little thumbnails we just have to style the thumb component itself so inside the thumbnail.styles.js we already created this one we're going to style it inside of the image style component so we're going to set the width to 100 percent the max width is going to be 720 pixels transition all 0.3 seconds and that is because i want some nice transition on hover object dash fit is going to be cover border dash radius it's going to be 20 pixels and the cover here will center the image and make it fit nicely into the thumbnail so that's a really handy little row you can use in css for stuff like that i also gonna have an animation on this one because i want it to fade up we can actually look at that in the finished application you know you can see here that these thumbnails are also fading up just as the hero image that's what i want that animation for so i call it animate thumb 0.5 seconds so i'm going to create that animation so add keyframes and animate thumb right from i set the opacity to zero to it's gonna be opacity one that's the animation and then i also want to set the hover effect so colon hover like this and i set the opacity to 0.8 do some order formatting and save it go back to the application and as you can see it's looking great so that's nice it's working it's starting to look like something we can compare it to this one here and it looks exactly the same without the search bar so we have a few things left to do we have to create the spinner also when we're loading and the search bar and the button for loading more in the next video we're actually going to create the spinner component so we have that ready when we want to show it when we're fetching more okay we have our hero image and our grid so we're going to create the spinner in this video back inside of the code editor and the components folder and inside a components folder create a new folder that we call spinner and then we create a file that's called index.js and another file that's called spinner.styles.js it's beginning to be a little bit repetitive here but as i said so many times before now it's always great to repeat stuff when you learn it so even if it's boring it's better to repeat it because then it will be in your muscle memory later so that's why i repeat a lot of stuff also in this course and this one is a little bit special actually because we have the component itself in the index.js file but the component is really just going to be a style component so in this index.js file we're just going to import the style component in this file so we can create this actually in this video and then we import it and then it will be finished so in the spinner.styles.js file we import styled from style components we export a const that we named spinner and it equals styled.div double backticks and inside the backticks we write our css we set the border to five pixels solid and we have the variable of light gray we set the border dash top to five pixels solid with a variable dash dash matte gray we set the border dash radius to 50 because this one is going to be a circle so that's why the width is going to be 50 pixels and the height is also going to be 50 pixels we have an animation on this one also we call it spin 0.8 seconds it's going to be a linear animation and it's going to be infinite now we set the morgan to 20 pixels auto right then we create an animation add keyframes spin we go from zero percent transform we rotate it zero degree here i'm using percent instead so you can use whatever you want we didn't do that in the thumb styles i'm using from two in that one instead so i like to change stuff a little bit when i create courses like this so that you see that you can create it in many different ways so here i'm using percent instead and you should say transform not transfor transform and rotate zero degrees end it with a c my colon and then we go to 100 and the transform is going to be rotate 360 degrees do some order formatting and save it then we go back to the index.js file in the spinner folder and for this one we just import the spinner that we created as a style component so from dot forward slash spinner dot styles and then we export it export default spinner so that's it for this component we can actually see if it works also so go back to the home page home.js we import it first here import spinner from dot forward slash spinner all right and then here just below the grid we can place the spinner and also here we don't actually need to use state and the use effect here more so we can delete those ones also save the file go back to the browser and as you can see just below here it's spinning like crazy and of course it's only going to be shown when we fetch data from the api but for now we're showing it all the time but we're going to fix that later so that's how you create a really simple spinner with some css and style components in react in the next video we're going to start creating the search bar so we created a grid with our thumbs and we have our hero image and we want to create our search bar next if we look at the search bar in the finished application we can see that we have this nice little icon here i created this myself first i had an icon from font awesome but then i thought maybe shouldn't import the whole font awesome library just to have one icon so that's why i created an svg image instead and then it says search movie and then we can type in something to search for in here so this is how it works so let's go back to our code and inside the components folder create a new folder that's called search bar capital s capital b and inside of that folder you probably guessed it we create a file that's called index.js and a file that's called searchbar.styles.js and we do as we always do we're going to be in the searchbar.styles.js and we're going to scaffold out the star components import styled from style components then we export the const called wrapper and it's going to equal a styled.div and we have double back ticks and we export not triple back ticks double back ticks and i see my colon then we export the cons that's called content it's gonna equal styled dot div double back ticks and i see my colon save it go back to the index.js in the search bar folder we import react coma we're also going to import a few other stuff here we're going to need a used state we're going to need a use effect and we're also going to need to use ref for this one now we import it from react so why do i need these things well the state we're going to use to create what's called a control component and that means that we're going to have our input field but it's going to be controlled by react the input field is going to be based on the value in the state we're going to use the use effect to trigger when this local state changes and then we're going to update the search term so that it will fetch new movies from the api and the use riff is going to be used to show you a little trick that we can use if we don't want to do something in the use effect on the initial render so then we're going to import the image that's going to be that little icon i showed you so import search icon camel casing from dot dot forward slash dot dot forward slash again images and we have something that's called search dash icon dot svg don't miss the file extension here and then we have the styles the import curly brackets wrapper and content from dot forward slash search bar dot styles all right so that's our imports and then we create a component const search bar capital s capital b equals and we're gonna destructure out the prop that's going to be set search term camel cased like an error and then for this one we're going to make an explicit return because we want to have some logic in it so we have a return statement parenthesis then we have a wrapper and inside the wrapper we're going to have our content like this so the first thing we need is the icon and it's going to be an image so image src is going to be the search icon we can set an alt on that one also search dash icon we self-close it like this just a regular img tag then we're going to have an input field and it's going to be of type text we're going to have a placeholder it's going to be search movie and then we're going to have an unchanged handler and a value but for now i'm just gonna self-close this i'm gonna do some order formatting and export this component export default search bar and then we're gonna import it in the home component just to see that we got something here so go back to the home i can close all this go back to the home and just below the hero image we're going to place that component but first we need to import it so import search bar from dot forward slash search bar right go down below the hero image just above the grid we can place our search bar save it go back to the browser and you can see that we have our input field here but we haven't styled it yet of course so hopefully it's going to look something like this when we're finished so go back to the code and the search bar in the index.js file we're going to make this what's called a controlled component a control component in react is a component that react control so the input value is going to be based on a state that we create and when that state changes it also changes the value in the input box and this is great because then we know that our state is in sync with the actual value in the input field we create a state up here const we can call it state and set state equals use date and it's going to be an empty string for starters on our input field ah it order formatted them like this i want to have them like this instead we're gonna have an on change handler equals and for this one i'm going to create an inline function you could also create a function up here for that one if you want to do that instead but i want to show you how to do things differently so in this case i create an inline function we have the event or you can just type in e for example you can name it whatever you want then we set the state with the event dot current target dot value and this will give us the value in the input field and we need to have this inline function as we are actually invoking this function here with that value otherwise it won't work so by having this inline function we can provide this one with the value so that's why we have this inline function otherwise it will run this function instantly and that's no good so if we for example had a function that we didn't want to send in some arguments to that we just want to trigger on change we can have it like this instead and that will work but in this case we want to send in the argument of the current value so that's why we have this inline function all right so that's the unchanged and then we set the value to the state and there we have successfully created a control component we can see if it works go back to the browser type something in and you can see the value here now is controlled by react as soon as we set this value to some state value here we are making this a control component and every time it changes it's going to trigger the set state and it gets the value here and we place the value from the text input in the state and then the value is displayed in the text box itself so it's kind of a closed circle here on how things work it goes around in this way now we have our input field but we want something to happen also we want to set the search term that we're going to create in our hook that we created before so we're actually going to create a new state inside or use home fetch so up here in the use home fetch hook we're going to create a const call it search term capital t and set search term then it's going to equal use state and we set it as an empty string initially then we also need to export this one to export it down here and we only need a setter for this one so we can export the set search term like this save the file go back to the home dot js and up here where we where we use our use home fetch hooked we can destructure out the set search search term the set search term all right and this one is going to be the prop for our search bar so i'm going to call this prop set search term also you can call it whatever you want and then i give it a set search term so this way we pass this along down to our component the search bar so that we can use it in the search bar so when this one triggers when we set the search term it's going to trigger here so it's actually changing the state in our hook here that's exactly what we want because then we can use it in our hook when we fetch stuff but in this case we want to have a slight delay when the user types something in before it tries to fetch the data we can look here in the finished application you can see when i type something in here that i have a slight delay otherwise it wouldn't be a good user experience if it just instantly started to fetch data so that's why i do it this way instead otherwise we could have used this state to actually fetch the data but in our case we want a slight delay and then we set the search term that we're going to use for fetching so that's why i have dual states for this one so let's create a 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're going to fill that out in a second and i'm going to show you how to create a timeout in react now and you can how you can use it in a use effect so first we create a timer we use the set timeout that's built in javascript we have an inline function for that one and then we're going to call the set search term that's the one that we created and we're going to give it the state like this and i'm going to set it to half a second that's 500 milliseconds so this one will trigger after 500 milliseconds if you want some other value you can of course type that in instead and you can see here now that it instantly complains because we haven't specified this as a dependency so we specified search term as a dependency and it also complains because it needs the state that's also dependency to this use effect so these linting rules are actually really good it tells us stuff so that it is so that we actually do this correctly and we should always specify the dependencies and handle it inside of the use effect if we need to all right but there's one more important thing we have to do with the timer and that is to clear that timer on each render because otherwise it will just create a lot of timers and that's no good and there's a handy little thing with the use effect that we can use for this because if we return a function in the use effect so every time before a new render it will trigger this function so we can clear our timeout inside of that function and this will take care of that we clean up this timer so we don't have a lot of timers that just ticks in the background and you can imagine you have a lot of stuff that you want to do maybe to clean up stuff so you can always do that in a return function with the use effect this one doesn't trigger until this render has finished and it's going to render again so that is sweet we can save this one and we can actually go back to the use home fetch and up here we can console.log the search term 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 save the home save go back to the browser yeah and now it works you can see it's really important to save your files because it will break otherwise be sure to save all the files so if i type in test and you can see here after 500 millisecond it will trigger so that's sweet we know that that is working and we can use this to fetch data from the api but there are one more thing i want to do and i promised you to show you a little trick with the use ref and that is because the use effect always trigger on the initial render and we don't want to trigger a fetch when this component mounts we only want it to trigger when the user has typed something in so that's why i'm going to create a const that's called initial up here and i'm going to use ref and i set it to true so when we call the use ref hook this one will create a mutable value for us that you can compare to something similar as a mutable variable so we have this initial const and the actual value is going to be in the initial dot current that property will hold the value true right now so i set this to true and inside the use effect i'm going to check if initial dot current that's going to be the true value right now if it is true in it it should say initial like this right then i instantly going to set the initial dot current the false and you can see here i can mutate this variable directly i don't have to have a seller for this one because this one won't trigger a re-render that's the biggest difference from a state that when you use ref it won't trigger a re-render and then if this one is true we know that this is the initial render and then i just return we don't do anything more inside of the use effect and we set this to false so next time this one triggers this one is going to be false and it's going to run our logic so this is how you can create a neat little code snippet here to to skip the initial render in the use effect save the file just make sure that it works yeah and it seems to be working we've learned how to create a control component in react and the component controls the input field with the state so the input field always has the same value as the state and that's a control component our state is synced with the input field and then we created a timer that will trigger each half a second and call this set search term to set the stay there and the state is going to be the value from the input field and we also pass this one along from the use home fetch so that's how you pass data down to your components that's what props are for you can pass data down to your component and we can use it in that component and that means that we also have this value in our use home fetch hook to use the fetch data later so i can remove this console.log for now save the file and this will be it actually for the search bar in the next video we're going to style the search bar and then we're going to create the logic for fetching the data we have created our search input field but it doesn't look good so we have to style it also and that's what we're going to do now so in our search bar dot styles file we're going to create the wrapper first and i'm going to display it as a flex i'm going to align the items to sender not aligned a line i set the height to 100 pixels the background is going to be from the variables we have the dark gray and i'm going to give it some padding on the sides 0 and 20 pixels do some more formatting save it go back to the browser and you can see that we have the search bar here and now we have to style kind of the inner part of the search bar and we do that in the content inside the content i'm going to set the position to relative because we want to place the icon with an absolute position the max width is going to be from the variables we have our max width the width is going to be 100 the height is going to be 55 pixels the background is going to be from the variables mad gray the margin is gonna be zero and auto and the border dash radius is gonna be 40 pixels and the color from the variables we have our white save it go back and see what we've got so far so we have this inner part now of the of the search bar so we have the style icon and the search bar input field itself so inside the content we're going to nest some stuff here we have our icon that's the imd i set the position to absolute and this is why i used relative up here otherwise it won't work so it needs to be relative to the actual content div it's going to be left 15 pixels top 14 pixels and with it's going to be 30 pixels save it go back and now it seems to align correctly and it also has the correct size great then we have the input field itself so down below the imd type in input we set the font size to 28 pixels in this one position [Music] is going to be absolute left is zero margin is eight pixels and zero padding is gonna be zero zero zero and sixty pixels the border is zero the width is going to be ninety five percent the background is going to be transparent the height is going to be 40 pixels and the color is from the variables and it's going to be white so go back to the browser and you can see that it works now but we have this nasty little outline you shouldn't remove the outlines actually but in this case i think it's fair to do it because it doesn't look good so i'm going to remove them so inside the input i'm going to nest focus and i'm going to remove the outline i set it to none and hopefully that will remove it yeah you can see that it's removed now one thing you can do also if you want is to style this for mobile devices maybe make it a little bit less insane font size and stuff like that 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 the styles for the search bar in the next video we're actually going to hook this up to the api and fetch some data we have created our search functionality and our search bar but we can't really search for anything yet so if we type something in we just get this console log here so we're going to implement the actual functionality where we fetch the search data from the api let's go back inside of the code editor and we're going to be in the use home fetch hook and down here where we say initial render we're going to change this one to initial and search like this because we're going to use this use effect both for the initial render and the search and it's actually pretty easy because now we just have this empty dependency array meaning that we only trigger this use effect once on mount but we also want to trigger this one each time the user search for something and up here we have our search term and in this one we're going to store what the user typed in in the search bar and that means that we want to trigger the use effect when the search term changes down here in the dependency array we specify search term meaning that this use effect will trigger each time the search term changes and it will also trigger one time on mount so we can actually use this one for the initial fetching also because when we search for something we always want to fetch the first page just as we do on the initial mount so that's fine we're fetching the page one but we also want to provide the search term and that's also fine for the initial fetching because the search term is going to be an empty string so we know that we're fetching the most popular movies because we're not specifying any search term there's one more thing though that we have to do and that is to wipe out the old state before we make a new search because we want to wipe it out and then make a search show the loading spinner and then show the new movies that we grabbed from the search so we can set state to the initial state here and that will wipe out the state and that's really all there is to it so we save this file go back to our application we try to search for something and you can see that it works now this one changes because this one will always grab the first element in the array of movies and that's fine actually you can have it like this if you want but i want to remove this hero image when we're in a search so we can do that also so go back to our code and then inside of the home tortillas down below here where we show the hero image we can also specify that we don't want to show this one if we have a search term so not search term double ampersand so now we're checking that we don't have a search term and also that we actually have a first element in the array of movies but you can see that it runs here now and that's because we 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 like this save the hook go back to the dot js and up here where we just structure out everything from the hooked we can also just structure out the search term like this save the file go back to our application we tried to search again and now you can see that it disappears this is exactly what i want if you want to keep the hero image you don't have to do this and then it reappears when we don't have anything in the search bar all right there's one small thing that i also want to do and that is in the home.js and if we look down below here where we have the grid i'm going to create a turner operator now because now it says popular movies even when we're in a search so this one i'm going to create a curly bracket and also curly bracket here at the end and then i check if i have a search term i have a question mark and if we have a search term i create a string i want it to say search result and if we're not in a search it's going to say popular movies so if we have a search term it's going to return what's to the right of the question mark and that search result otherwise it's going to return popular movies save the file go back to the application this time i'm going to search for indiana jones and now you can see that the header on the grid changes so that's great it says search results and i remove this and it says popular movies so that's our search we have implemented all the logic for the search bar and in the next video we're going to start creating the load more button okay let's start creating our button that will go at the bottom here and this spinner will not show all the time it will only show when we're loading stuff back in the code and inside the components create a new folder that's called button capital b and you guessed it we create a new file that's called index.js and we create another file that's called baron.styles.js and we're going to be in that file an import styled bomb style components and for this one we're only going to have one star component so we export const and it's going to be a wrapper equals a style dot button in this case and double back takes auto format it and save it and then we go back to the index.js file and we're going to create our button so we import react from react then we have our styles so we import the wrapper that we created wrapper from dot forward slash button dot styles all right then we have our component const button then i just structure out two props one is called text and one is called callback and i create an error and i make an implicit return on this one so i'm gonna have the wrapper it's gonna be type baron and it's gonna have an on click handler and it's going to be the callback that we send in as a prop and then i'm going to display the text inside of the button so this is a button that we created as a style component and call it wrapper and it's going to trigger a callback function when the user clicks on the button and then we show the text we can send in what text we want to this button if we want to reuse it then we export default button save it then we go back inside of the home component and at the top we're going to import button from dot forward slash button and then at the end of our jsx we're going to show the bottom and we have to think about this because we don't want to show the bottom if we reach the last page of movies so we have to take that one into consideration so just below the spinner here i'm going to use a curly bracket and create a javascript expression we're going to check from the state dot page if that one is less than state dot total underscore pages we know that we're still not on the last page and i have a double ampersand and make a short circuit here i also gonna check so that with not loading anything so if not loading and then i have another pair of ampersands and i have a parenthesis i put it on a new road just to make it a little bit more readable and then i'm gonna show my bottom so the text is gonna be load more and for now i'm not giving it the callback so this is it for now so this statement will check if the page we're currently on is less than the total pages and then we know that we still want to show the load more button and it will also check that we're not loading anything because when we're loading something we want to show the spinner instead and we have the spinner here we can actually create another statement here to create a curly bracket and type in loading and double ampersand and we end it with another curly bracket like this so this will show the spinner if the loading is set to true and if it's set 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 see the button down below here in the corner but it doesn't look right we have to start it also to look like this here and that's what we're going to do in the next video we have our ugly little button here down at the corner so it's time to style it go back to the code and inside the button.styles.js file and we have the wrapper here we're going to give it some nice little style here we start by displaying it as a blocked display block we set the background from our variables we have the dark gray we set the width to 25 the min width is going to be 200 pixels the height is going to be 60 pixels the border dash radius is going to be 30 pixels and the color is from the variables the dash dash white the border is going to be set to zero the font size is going to be from the variables font big margin is going to be 20 pixels and auto the transition it's going to be all 0.3 seconds i'm lazy here i can set it just on that property that i want to have a transition but i set it to all outline is going to be none and the cursor is going to be pointer then i want a little hover effect also so hover i set the opacity to 0.8 that's why i had this transition here also i just want to check also the font sizes here want big maybe we can use this one instead on the styles for the search bar because i think i have yeah i have the font size of 28 pixels we can use the variable instead variable font big and see how it looks yeah i think that looks nice actually we can use that one instead but let's check out the button yeah you can see it works it looks great now we only have to create the logic for the button now so we so that we actually can load more movies so that's what we're going to do in the next video this is actually the last video for the home page so we're going to create the fetching logic for loading more movies and we're going to start in the use home fetch hook that we have in our hooks folder and we're going to start by creating a new state so this is going to work in a way that we have a state with a kind of a flag that we set the true or false and we set that one to true when we click on the button and then we're going to trigger a use effect because as i said before i think this is great practice with the use effect hook and also the state hooks so you could do this in other ways also but this is a quite neat way of doing it we have this state that we set the true or false and when it changes we trigger that use effect and then we can trigger to load more movies we first create a state const is loading more camel casing as always and then we have the setter set is loading more it's going to equal and we call the use state hooked we set it to false initially and this one is going to be triggered from the button itself so we have to export it down here also so after the set search term we can export set is loading more so there you have it i removed the sidebar so we can see the complete row here now we're exporting six of those so that's our state so we can go back to the home.js file and here we have our button but we first need to destructure out the set is loading more set is loading more there's some order formatting and it will clean it up for us a little bit so we just structure out that one also and that means that we can use it in this component and one thing that we also didn't do is to actually check if we have an error so we can do that before the return statement here if error we can return a div that says something went wrong like that and that will make sure that if we get an arrow we won't display everything here we will display this error message instead so you can create a more sophisticated stuff here if you want to do that in our case i think it's enough for this course all right so let's move on to this set is loading more so we have our button down below here and we already created a callback prop so we give it the callback prop curly brackets and this one is going to have an inline arrow function because i want to call this one with an argument the set is loading more yeah i'm going to remove the sidebar set is slowing more and we're going to set it to true like this so this will change this state when we click the button and if we check out the application we won't actually be able to see anything now you can see that it re-renders when we click the button because it console logs this out so we know that it's working and one great thing to know that is that if i click a few more times here you can see that it don't re-render anymore and that is because we're giving it the same value so react won't update the state if it gets the same value so it's good to know that with react if you give it the same state value it won't re-render it so react is kind of smart it already knows that it has the same value so it won't do anything a quick little pro tip in react all right so we know that the button is working so we move back to the use home fetch hook and we're going to create another use effect down here below the search use effect i'm going to mark it with load more so just as before i create another use effect an inline arrow function and we have the dependency array and we want this to trigger when the is load more is changing so it's load loading more like this and the thing is that we only want this use effector trigger when we actually is loading more so if not is loading more if this one is false we're just going to return we don't want to do anything else in this use effect this one should only do something when we load more movies and what we want to do now is to call our fetch movies function again in this time we want to give it the state dot page plus one because we want to load the next page and we also give it a search term if we're in a search and now you can see that it warns us here because it wants a few other dependencies it tells us that we need to specify the search term and the state dot page that's what we're going to do the search term and the state dot page and now it will be happy at us and that is because these ones are outside of the use effect so we should always specify dependencies in the dependency array and we should handle them inside of the use effect hook if there's something we don't want to do when something change we should account for that inside of this use effect so we're fetching movies and then we set is loading more to false do some auto formatting and save it and hopefully this should work so we have the use effect that triggers when we change the is loading more boolean if we're not loading more we will just return we don't do anything else in this effect otherwise we call the fetch movies function and we give it the next page that we want to fetch and we also give it a search term and then we set its loading more to force again so that we go back to what it was before and then we can do it all over again if we want to click the load more button again save it and go back to the browser and see if this works we click the load more and as you can see it works and i love when stuff just works and you can see that our loading spinner is show showing up also it's fast so we can't hardly see it but it's there so it's working and we can also see in the console here we are at page 11 and we have 220 results now so that's great we know that loadmore is working we can also try it out so that it works when we search for something and it does so that's sweet i'm happy with this hope you like it too you can see also that those images some of them has some strange proportions so if you want you can tweak the css to take that into account also in the next video we're going to start creating our routes for the application we're going to start creating the routing for our application and before we do that i just want to talk shortly about react router and especially the version 6 that we're using it's not officially released when i record this tutorial so hopefully it's released now when you watch this tutorial because it is as they say here it's around the corner and i actually talked to this guy michael jackson here on twitter and he said that i should use this version in my course because it's that stable now and it's not going to change that much and we're not going to use all the advanced functionality in the router itself so that's why we installed the next version of react router when we install the dependencies for this application and there are a few changes in it if you compare it to version 5 and i actually don't want to talk about version 5 because that will soon be deprecated so i just wanted to mention why i choose to use the version 6 of the react router because this is the future version and it has the api that is going to be used for 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 uses the latest stuff so that you know that you're up to date on the things that you learn so that's why so just a few words here you can compare for example they brag here with a react router version 5 that the bundle size is 28.4 kilobytes minified and the version 6 is only going to be 8.5 kilobytes minified so if you care a lot about size on your packages this one is drastically smaller than the version 5. and then they also show you some stuff here on how you use the router but that's what i'm going to show you in the next video but if you want to read more about this one here you can go to reacttraining.com forward slash blog forward slash react dash router version 6 dash pre forward slash and then you can read more about it or just google react router version 6 and you will probably find a lot of information about it if you want to read more about it so let's get started we're going to create the routing in the next video we have finished the home page and we have our application here and we have this nice little grid with all the movies but we can't actually click on them to view a movie and we can't click on the logo up here so we have to fix that and we're going to do that by creating some routes for our application so the first thing we're going to do is if we go back to the code we're going to create two more components so inside the components folder we're going to create a new file that's called not found.js and also another file that's called movie.js capital m on movie and capital n and capital f are not found so we're just going to scaffold these ones out so we have something to route to if we're in the movie.js file we import react from react then i create a component that i call movie and it's going to be an arrow function and i'm just going to return a div that says movie and then i export default movie do some order formatting and save it always save your files all right then i copy this one and i go inside of the not found file that we just created i paste it in and i change this one i'm gonna change them in one go not found like this and save it and there you have it we have two components to play with and this one the movie.js is going to be the individual movie component for showing the movie so we're going to be working a lot in this component later this one is going to be as it is i'm not going to create a fancy not found component so you can do some stuff on your own in this one if you want to do that so we scaffold our two components and then we can move inside the app.js file that you find in the src folder not in the components folder so app.js and the first thing we have to do is to actually import all the components we need from the router library from react router we can mark it here with routing if we want to do that then we import we have curly brackets we're going to import something that's called browser router capital b capital r and this name is a little bit long so if you want to rename this module you can do that by typing s and router so we import it as router i think i'm going to remove this sidebar also all right so that's the first one we import browser router but we import it as router so we can use it with the name router instead then we import another component that's called routes and then we import another component that's called route very similar names here so be careful when you import these ones and we import them from something that's called react dash router so be very careful here we're not importing it from just react dash router we're importing it from react router dom so this one is using react router in the background but this one is specifically created for using in the dom all right so that's all the imports that we're going to do so let's create our components down below here and i'm actually going to change this one to an implicit return so i delete the return and the curly bracket and i want to create an arrow function instead const app equals because it's only with arrow functions you can do an implicit return and i remove the curly bracket there do some water formatting to me it looks a little bit cleaner and this div is going to be replaced this repetitive that has a class name of app gonna be replaced with the router so we wrap our complete application with the router so it's really important where you want to put your routes you should wrap it with the router and that is the browser router that we imported here but we renamed it to router so that's why i use it as router here then the header is going to be shown on both the home page and the individual movie page so the header is going to be left out of the route so i leave that one here and then i use the routes component and inside of the routes component we can create our routes and the first route we're gonna use the component that's called route so we have three different components here from the router library router gonna wrap or complete the application in this case and then we have routes that's gonna wrap our routes because you can have routes in different components if you want to do that so let's say that you have a component deep down in your app tree and then you want to create some routes for just that component you can wrap them in this route component and then you create your routes so you don't need to have them here in the top of your application and then you use the route component to actually create your route and this route component has a prop that's called path so we can specify the path where we want to show a specific component and in this case it's a forward slash because it's the home page and then we have another prop that's called element it's going to equal and here we can give it our component and we want to give it the home component like this and then we also have to self-close the route component that means that we can remove this home component here so that's the first road if we want we can save this to see that it still works go back to the application reload it and you can see that it works so that's nice then we're going to create another route so we use the route component again we set the path and this one is going to be forward slash and then we're going to do something special here because when we're going to fetch an individual movie we need the movie id and we can send along route params for that and we create a route param for the route by specifying a colon and then we name it so movie id so this means when we create a link on the thumbnails that we're going to do soon we can send along the id for the movie and that id we can grab that in our movie component and grab data from the api and you can name this to whatever you want because this is a route param that you decide what you want it to be named so i want it to be named movie id and then we specify the element on this one and we give it the movie component and we also close the route component we haven't actually import the movie components we can do that import movie from dot forward slash components movie and then we can also import not found from dot forward slash components and not found there you have it so that's the route for the individual movie we save it and we can't actually click on the thumbnails now because we haven't created that one but what we can do is go up here create a forward slash and then we type in some id and you can see that it types out movie here now and that is because it's showing the movie component so we know that it's working so that's sweet and then if we remove this one we'll show the homepage instead all right we're going to create one last route and that is for our not found component so we create a route with a path of forward slash and an asterisk and this will make sure that we show the not found component on any other route that don't exist and we set the element to the not found component and we also self-close this route save it go back to the application we know that it works if we specify an id like this it shows the movie component but what happens if we create another route here like this yeah then it shows that not found and that's super sweet because then we have a fallback component if the user tries to go somewhere else in our application so that's the route setup in our app.js file then if we move inside of our header component and the index.js file we're going to create a link on the logo up here we have to import curly brackets and the component is called link from react-router-dom and this is actually quite simple it works the similar way as the a-tag does in html so we have a link component we specified two and in this case it's gonna lead to the home page so we have a forward slash and inside the link component 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 to the home page so go back to the browser for now we specify an id so we're in the movie component and then we click on this logo and we go back to the home page so really easy to make links with react router you can also make them programmatically but we're not going to do that in this course because it's kind of a little bit more advanced and we don't really need it in this application but we have to add a link to the thumbnail also so that we know that we can click on a thumbnail and that will lead to a specific movie so inside the thumb component the index.js file we'll do the same thing up here we import curly brackets link from react-router-dom and we have this prop here that's called clickable because we are going to use this thumbnail for the movie poster on each individual page also and that means that we won't be able to click that one so we have to have this boolean to check if we should be able to click the thumbnail or not and the way i solve this is to create a ternary operators so here just below the div we check if clickable is true it's enough to type in clickable then we have the question mark and i have parentheses and i'm going to use my link component and it's going to link to and in this case we want to use the movie id because as i talked about before we are going to send along this id in the route and we can grab it later in the movie id param that we create here so we have backticks i create a template literal here so i have forward slash then i have dollar sign curly brackets and i'm going to give it the movie id and this will give it a link with a forward slash 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 turner operator be very careful here it should be after this parenthesis i create a colon and then i create a new pair of parentheses and i move this image inside of that one and i also have to end the turning operator with a curly bracket and then i do some order formatting so what did i do here well i create a turner operator checking if the clickable is true and then i show the link component with the image wrapped inside it and that means that we'll be able to click on this thumbnail otherwise that's what's right of the colon here i just show the image as it is i don't wrap it in a link component so the user won't be able to click it save the file go back to the application and hopefully we should be able to click our thumbnails you can see that we have this nice little hand here that means that we created a link so if we click this one you can also see that we have the movie id up here and that's the one that we're going to grab in the param in our movie component so it's working great and this is actually it for the routing there's no more routing we need to do in this application and in the next video we're gonna start creating the movie page okay we're just gonna do a little bit of scaffolding in our movie component before we move on so up here we're already importing react we're gonna import some stuff from the config also so import we're going to need the image underscore base underscore url capital letters and the poster underscore size and we're going to import it from dot dot forward slash config then we're gonna have our components we're gonna create new ones for this one but two of them we already created we're gonna import the grid from dot forward slash grid then we're also going to need a spinner so import spinner from dot forward slash spinner and then we're going to create the other ones later we're going to create a hook for this one and we also need an image and that's the fallback image just as before so import no image from dot dot forward slash images and no underscore image dot jpg and as always be very careful to actually add the extension here when it's an image all right and then we have our movie component this one is actually not going to have an implicit return we create curly brackets because we're going to have some logic in this one so we create a return statement parenthesis and then i'm going to create a react fragment like this and inside for now we can just have a div that says movie do some order formatting and save it and i think this should be it go back to the browser try something out here or we could actually just have clicked on one of these yeah and it shows the movie so that's great we know that it works and then we can move on and we're going to start by fetching the data from the api so that we have something to work with all right we're going to create our second custom hook now i'm not going to create it first in the movie component and then move it to a custom hook because now we know how we can create a custom hook so that's why i'm doing it instantly in that one instead so in the hooks folder let's create a new file that's called use movie fetch capital m capital f and dot j s and as i told you before it's important to name your hooks with use before the name this is the actual file name so it doesn't matter here but it's important that you name your actual hooked with use before so for this hook we're going to import curly brackets we're going to need use state and use effect from react just as before we don't really need a main react library for this one because we're not doing any jsx and stuff like that so that's why we're not importing it we're going to import the api object from dot dot forward slash api and that will give us access to all these nice functions that are created for us then we create the actual hooked so export const use movie fetch equals and this one is actually going to have a parameter because it's going to be the movie id and i'm going to talk more about that in a second so that's the arrow function and up here i create three states the state and setter for that state i call the use state hooked and i'm going to give it an empty object as default value then i create a loading state and set loading use state i'm going to set this one to true initially because this component is going to start by fetching the data for the movie so we can set that one to true and then we're going to have the error and the set error just as before and this one we set the false so use state and give it an initial value of false right so that's the state we're going to need for this one and then we're just going to need one use effect for this one because we're only fetching data one time and that is when the component mounts and then we're not going to fetch anything more because then we have all the data from the movie that we need so we have the inline arrow function and we have the dependency array and this one is going to change if the movie id changes it actually not going to change now because we just do it initially as i told you but as i also told you we need to specify all the dependencies for our use effect so that's fine in this case to have it there it only going to fetch it one time and then as the use effect can't have an async function here we create another function that's async fetch data equals async and in this case i place it inside of the use effect and i'm going to show you why in a second also so we have an async error function and then we can do our fetching logic inside of this one and it's going to be quite similar to the other one that we did so we have a try block and we're going to catch the error if there is one and if there is an error we set error to true like this and in our try block the first thing we do is to set the loading to true and we also set error to false yes that's we did before and then we can fetch our data but i have a typo here you just say error yeah i guess i misspelled it up here yeah there you have it all right yeah this one too ah something like that right so first we're going to grab the movie data from one resource from the endpoint and then we also have to grab the credits that we get from another resource from the endpoint so we have const movie equals a weight and from the api i created a function that's called fetch movie without an s at the end now we're going to give it the movie id all right so that's the movie then we also want to fetch the credits so we create a const with that we that we name credits we await again from the api dot fetch credits and we also give it a movie id so hopefully we got all the data that we need here in those const but we want to do some stuff here and that is we only want to show the directors only because if we look at the finished application and we go back and we click whoa yeah there you have it encountered two children with the same key and this is what happens sometimes with this api and i really don't know why so if you get this warning you can create your own unique key somehow by maybe have a random number and the movie id i don't know you can do it in many different ways but for now it doesn't really matter so we have the movie here and as you can see here we are showing the director so we need to get the directors somehow from the api because from the api and the credits we get something back that's called crew and the crew contains more than the directors so we have to filter out the directors to just get the director's name so i mark it with get directors only and then i create the new const i call it directors equals and from the credits that's the one up here we have the crew property and i'm going to filter this one filter is a built-in method in javascript we have a member a crew member so i'm going to check if the member dot job this is also a property that we get back from the movie database api i'm going to check if that one is equal to director with a capital d and that will filter out all the directors and put them in this const or format it and then we have all the data that we need so that we can set our state so we call set state that's the setter for our state in this case we don't need to use a previous value so i'm just returning an object here i spread out the movie that's the data that we got back here so we spread out everything from that one and then we have a property that's called actors and i'm going to give it the credits dot cast so from the credits we have the cast and we also got the the directors from the crew so that the actress is a property that i create myself that i want to have in my state and i'm going to have all the cast inside of the actors property and the last one is going to be the directors there can be more than one director so that's why it's called directors with an s and as this is es6 syntax we just need to type out this it will create it like this automatically all right then we're going to set loading the false like this auto format it and this should be it for this use effect actually i think for now we need to return something from our hook also i return an object with a state loading and error save it go back to th