React Hooks Tutorial - A Crash Course on Styled Components, JSX, React Router, and HOC

Key Takeaways

hello i'm excited to show you this course where we're going to use the react hooks to create a video player i'm thomas webenfalk and i will be your guide in this course so what are we going to build here we're going to build this video player it's fully responsive and we're going to create this list of videos where we can select the video and also i made this kind of night mode here if you want to shift the color for a light theme to a dark theme and we're going to use style components for all the css styling here and i'm going to show you how you can use different theming and stuff like that so i'm really excited for you to see this because i love these new hooks and i also think style components is great if we go to the react site we can read a little bit of hooks here at the time of the recording of this course they're fairly new so they're not in the official release yet so we have to use this alpha build of react to have access to the hooks but that's okay we'll go through that in a bit we're going to install this so don't worry about it so we're going to use the state hook and the effect hook there's a lot more hooks and you can read about them here at the site you can also create your own hooks i think the effect hook and the state hook are the ones you're going to use in 95 of the cases when you code so they're the most important and they will kind of replace the state in the class component and the life cycle methods so with this ones we can have state and kind of life cycle methods in our functional components there's no need to use class components and that's great they also say that it's great because if you're kind of new to react you don't have to learn all about classes and things like that you can do your stuff with just functional components so it should have a less learning curve as you don't have to go that deep into javascript classes well with that said let's go through what we're going to need to create this application we are going to use a library called react player it will give us some nice functionality like callbacks when playing the video and callbacks when the video has played and things like that we could do everything ourselves in an iframe but there's a lot more coding so it's better to use this library and we have all this for free so why create it from scratch when you don't need to we're also going to use as i said the style components and the style components is really great because it's almost like creating regular components in react but you create like css components we'll get to that when we get there i'll show you that in a later video and we're also going to use the react router for routing our videos because if you look up here you can see we have a unique id for each video so if we click another one we have another id and we use routing for that in that way we can just copy this link and paste it somewhere and we'll get directly to that video so it's great if you want to share a link or something like that that's why we're using react router you could do this player without the router and just change the video here and it will still be at the main domain here and not change the route and of course you can style this whatever you want later maybe there is some few things that could be better here with the styling and yeah you decide what taste you have and what you want to do with that later let's get on with the installing of our dependencies we need for this if we go back to our terminal we do a cd and we have to go into our starter files directory so make sure you download the starter files and it's the folder that's called react hooks video player start at the end so cd into that folder it's really important that you're in this folder you can rename it if you want it doesn't matter but do it now before you start doing anything and make sure you're in that folder and then we just do an npm install as this is an intermediate course i assume you know how to use the terminal and mpm and all this stuff so if you don't you probably should take a starter course before taking this course i actually have a starter course where we create a movie application so you can enroll that course if you want to learn the react stuff the basic stuff before you do this one well my fan just went crazy here on the computer i hope it doesn't bother you too much so you can hear what i'm saying well let's get on with it we have to install our react player so we write npm install minus s react oops player then we need to install our react router and we do that by mpm install minus s react router dom and lastly we need our stun components so npm install minus s style components like so and press enter and that should be it we should be good to go we just take a quick look at the package.json file in the folder as i told you before we're using the 16.7 alpha version so that's what i want to show you know it's really important to use this version of react otherwise the hooks won't be there and as you can see our dependencies has been installed here also so we should be able to just write npm start and this should fire up our application here at localhost 3000 it should open up automatically but if you don't so go to this address here and it says start here as we see this here we know that our app is working so we can start building things so we can also just take a quick look at the folder structure for our project so we have as usual we have a public folder where our index.html file is i've only imported a frontier from google that we're going to use for this one and i've also created this kind of input hidden input field where this is a little trick you're going to use to get access to the videos in the player we will get back to this when we'll get there i'll show you this trick later on and we also have the source folder there we have our index.js file and we have our components folder i've created these ones for you so they are empty now and we're going to fill these ones up with code we also have a folder called hook we're going to create a high order component i'm going to show you how to use that and we have a containers folder with our app and this one is just the start here that we see i created this one so it just started up something here and the playlist stamp is empty the playlist items is empty and this one is the main component for the app where most of our logic will go and i also supplied the styles for you here because i think this is a react course and not the css course it's kind of boring seeing me creating i'm writing css a long time here so we're going to create maybe one or two of these when we go through the style components and the other ones i'll give you for free so you don't have to do that by yourself so i think this is it we're good to go we have our local host up and running here and we can start scaffolding out our application in the next video all right we're going to start scaffolding out our components and the the structure of this application so we're going to create a lot of functional components here and we just create some basic stuff in there now so we're going to come back to all of them and finish them later on so we can start with the wbn player.js wbn is short for weben they call me vegan because my name is bayman falk so this is my player i'm doing so i selected to call it wbn player you can change the name if you don't like it i don't care so do whatever you want so we're just going to create regular components regular functional components so we import react from react and in this one we're also going to need a video and a playlist because the video is the kind of window where we play the video and the playlist is the playlist to the right in the application if we look at it here where do i have it no i have it there yeah so this is the playlist and here we're going to have a night mode component we're going to have a header component and this one is also container it's the playlist items container and this is each a playlist component of these ones here and this is the video component we are using here let's go back to our application so we import video from dot dot forward slash video and of course we haven't created these ones yet so it will give us an error if we save and try to run our application right now so bear with me we'll fix this in a second and we import the playlist from and this one is going to be dot dot forward slash containers and playlist because this one is a container and the other ones are just presentational components and they go outside the containers folder then we create the const wb and player props on our function like this and also make sure you have the casing right on everything we do in this course because i know there's a lot of people having trouble sometimes and it's in ninety percent of the case it's uh some type error or it's the casing here that's different and it will throw an error if you don't have a casing exactly like i write it here in the video so make sure you have everything correct and check it twice if you got some error when you try it later on and this one we have to have a return statement and parenthesis and we're going to return the video component and the playlist we're going to change this a lot in the future videos because this is the main component most of our logic will go here so it will grow and have a lot more code and we export default wb and player like so and we can save it also whoops we have some error here and that's because you can't return two components we can create a react fragment here and you can just use this this is shorthand for react fragment so you can just write it like this like so we can copy all of this code we can move into our playlist component we paste it we import react these ones we don't need but we are going to need the playlist header and we import that one from dot dot forward slash playlist header like so we're also going to need a playlist items and we grab that from dot dot forward slash containers play list items and we're going to need our knight mode also and that one we grab from dot dot forward slash night mode like so and this one is only going to return jsx so we can omit these ones and remove the return and make it nice like that first we have our night mode component then we have our play list header and then we have our play list items and there's a typing arrow here it should say playlist items and of course we have to rename this one also so we call it playlist and that's it we save that one and we can copy this one and go to playlist items paste the code in we can remove this one we are going to import our playlist item from dot dot forward slash playlist item we can remove the night mode and we also going to import the high order component in this one later on but we'll save that one for a special video about this we rename this one to play list items and export it as playlist items of course and in this one we're just going to return a playlist item for now like so and we can make a little nicer then we save it so this is our container components we have our app we have our playlist our playlist items we have our main component to wb and player.js so let's move on or high order component we save this one for later as i said so we go to our presentational components we can paste our code we can remove all of this and remove these ones here for now and rename it to night mode like so and we can just create a div for now here and we write night mode save this one and actually we can copy this one we go to our playlist header rename this one to play list header and that's enough for this one also for now so save that one and move on to our playlist items paste the code and rename it to play list items playlist item not with an s save it and we go to our last one the video.js paste it and you probably know it by now we should rename it to video like so and for this one we can also import our react player so import react player from react player like this and this should be it we have all our components scaffold out now and if we go into our app.js and import wbn player from and this one is just going to be one dot and forward slash wb and player and we can return that component here like so and we save it go back to our application and as you can see it's working because it's showing the text we wrote in the different components so we know that our structure are working in the application in the next video we're going to finish our app.js and talk a little about routing and react router it's time to start coding our application for real and we're going to start by creating our routes we're going to need for this one so we're going to be working in the app.js file for this video we need a browser router and the routes because we want every individual video to have a unique link so we can go directly to it in our video player so that's why we're using routes for this one let's start off by importing everything we need from the browser router so import browser router and we need the road and we need a switch and we grab them from react router dom we can delete this one we won't need it instead we create a new component called browser router and we wrap everything in that component and inside we create a switch and we can start creating our first route and it's going to be an exact match with a path to the route our component are going to be the wbn player and what this will do is when we go to the root here in my case it's vapenfuck.com react underscore video player it will start the application from scratch so in this case now you see it's going to another route here that's because i played a bunch of videos here and it remembers that i was on the video 7. i'm going to show you this in a later video so don't worry how we do this routing and how it remembers where we left off the last time so this is kind of the first time when you go to the video player and haven't played anything then it's going to stay in the root and not forward you to another video okay let's create another route it's also going to be an exact one and the path is going to be forward slash colon active video so you probably know this as this is an intermediate course and not a starter course so what this will do is create kind of a variable for us we call it whatever we want in this case it's active video and it's this id up here by calling this one in our application we can grab this id up here so the component will be guess what it's going to be the exact same component for this one and why is that yeah of course we don't want to change the view here we just want to go to different videos but have the same view so we're just using this so we can get this id and use it in our application make sense i hope so one thing you also could do here is to create kind of a not found component i haven't done this now so if we for example go into another directory here it won't show us anything or if you write the wrong id it won't show us anything either so that's kind of an exercise you can do if you want just create another route that will fall back to a not found component when the rods don't match okay this is actually it for this video it's a short one and in the next video we're going to talk about style components and how we can use them to style our applications ok we're going to talk a little about style components in this video and also start coding with style components if we first go to the stylecomponents.com we can check out what star components are and yeah it's visual primitives for the component age yeah use the best bits of es6 and css to style your apps without stress that sounds wonderful you should also know that there's different opinions about style components and what you should use creating react application or you maybe should use css modules or regular css i happen to like star components and i wanted to try using it in this course i hope you like it if you don't like it you can of course implement another styling for your application you can read everything about it here and i suggest you do it if you're interested in your style components in the future the basic idea here is that you create components with your styles so you can use the styles just as regular react components if we look at the basic instructions here we have to import style from style components we've already installed style components we did that in the first video with the mpm install command and then you create this cons and call it whatever you like it will be a component to use for you later on and then you create your style as regular css so the only thing you may be wondering about here that these backticks and it's called a tagged template literal you can basically invoke function with backticks instead of parentheses and they write all about it here and this is not a star component specific it's in es6 javascript so you have to look this up if you don't know what this is so i suggest you do that also if you're interested in learning more about es6 and javascript and as you see we write a style inside of these backticks and it will create a component for us to use in our code and that's the basics of style components and we're going to go to our code editor and start coding our first style component if we take a look at our starter files you have a directory called styles i chose to separate this out from the main components and have them in their own file and there's also different opinions about this some like to have them in their component directly but i think it's nice to do like this to kind of separate them in their own files but if it's a large application it may be good to have it in their own components so you know exactly where you have the styles for your component as always do as you want i choose to do it this way because i like it and i think it's fitting for this application and this course all right we're going to work in the app.js file this time also and we're also going to work with a globalstyle.js in the styles folder because now we're first going to create the global styles for the whole application if we look at the globalstyle.js i already provided these for you we're going to delete it now if you don't want to do this if you don't want to create css and if you don't want to do all these things with star components you can just keep this because this way you can just import these in the components later as we're going to do and you don't have to write your css at all so delete these ones and we start writing some code here again so we import something called create global styles from styled components and this is something as it says we can use to create a global styles it's in the star components library so we use these ones when we want to create global styles then we create the const we can call it whatever we want and i want to call it global style for this one then we use create global style it shouldn't be an s there it should just say create global style then we create backticks and inside these backticks we write our css first we want to set our box sizing to border box in the whole application then we have our body and we set our font size to 10 pixels and we set our font family to hindsense serif and this is the one i imported in the index from the google fonts and this is it for a global styling we just have to export this one export default global style like this we save it and as i said this is the exact code as we just deleted i just wanted to provide you with these if you don't want to do all this so we go back to our app.js we have to import our global style that we just created globalstar from we grab that from dot dot forward slash tiles global style and now we can use it in this component and how do we apply the global style to our application well it's fairly easy actually in this case we just create the component called global style like so and this will apply the global style to our application and as you can see we have an error now and that's because as it says the rotor may only have one shell element so we'll wrap this once in a fragment like so you see that the font size is less now so we know that the global styles are kicking in and this is it this is how we apply global styling with style components in the next video i'm going to show you how to do the styling for the individual components we've finished our global styling and we're going to continue to do some regular component styling in this video so if we go into the styles folder and into the styled playlist we're going to create the style component for the playlist so as before delete this one and we're going to write it from scratch first we import style just as before from styled components then we create a const called styled playlist and an equal sign and style.div and if this for example should be an input box we just write input like this or if you can have what element you want here so in this case it's going to be a div so we use the div here and now it's just regular css here so not that funny but we have to do it so we set a flex to one don't know if we need to have these vendor prefixes here but to be sure i put them in so we're creating a flex box here just for centering things in a nice way if you're not familiar with flexbox i recommend looking it up it's really nice and you it's much easier to center things and vertical center and horizontal center and aligning your items and we have a color of white for that one and also if you're going to have some other classes and things maybe for example you want to have some styling for different viewports and some responsive styling you just write it below here and you can have what classes you want it's just regular css so you can name some class and you just do like this and write your css in here it just have to be inside these backticks so for example you don't want to create a component for every little class you have in this case we don't have other classes we have one media query that we're using for the responsive functionality so we write media screen and max width of 1400 pixels and we have a width of 100 percent and display block and finally we just export this one also export default style playlist like so and this is it this is the style for the playlist we save this one and we go back into our playlist.js file first we import our newly created styled playlist from dot dot forward slash styles style the playlist like so and then instead of this fragment here we can just wrap it in the styled playlist like so and if we take a look here we can see that it's not showing the other ones here and that's because they're white now we're using a white color in the playlist but they dear so don't worry it will look a lot better soon right now it's looking tragically sad but we're going to fix this and we're going to do one more just to make some exercise in this one so if we go into our styled playlist items in the styles folder just as before delete this one i think it's good to repeat things because that way you learn a lot faster and maybe it's boring and you already have this code as i told you you can just save it and let it be but i highly recommend that you do like this and repeat it and just write it because your brain will learn a lot more if you write it down yourself so import style from style components again we create the const called styled play list items and we write styled dot div this is a div also and we do two backticks and we're going to write a css between these backticks and we have a padding 0 20 pixels 0 and 20 pixels actually we can do like this like so that's the short term for that one we have an overflow y of order we have a height of 28 vw a max height of 500 pixels right then we're going to do some tricks here to style our scroll bar and we have to do some webkit stuff here so colon colon webkit scroll bar we want a width of 5 pixels colon colon webkit scroll bar track and we set the background to transparent and we have a webkit scroll bar thumb where we want our background to be 888 and or border radius 2 pixels and the last one colon colon webkit scroll bar thumb and hover and we want a background to be a little darker so we set that one to five five five that's it then we export default styled playlist items and we save this one so i hope you got the flow here now we just import styled and we create the const we name it whatever you want this is not something specific to style components or react or anything you can call it whatever you want and we create our css inside these backticks here as i said before this is the element you want to create the style component for it can be whatever html element you want so in this case it's a div we go into our playlist items.js we import styled play list items from dot dot forward slash styles and styled playlist items like so and then we can wrap this component in our styled playlist items and we save it and we have some error here module not found okay there must be some misspelling here from my side of course this one shouldn't be there it should be right there instead bad mistake by me but all right that's coding you know trial and error all the time and now it should work again still not showing anything exciting here but it will soon get more exciting i promise okay we can do one more thing here before we finish off this video we're going to go into our playlist item.js not items with an s playlist item.js and for this one we're not going to create the whole css for this one we're just going to import it here import style play list item from dot forward slash styles styled playlist item like so and as you can see here if we just check the css file playlist item you see it's a lot of css code here and we don't have to write all these now it's kind of a boring the one thing you can notice here is this special where we use props here to change different values on the properties of the css and we're going to talk this in the next video when we go through the theming with style components so don't worry so go back into our playlist item and instead of a div we just wrap this with styled playlist item like so and save it still not showing up anything here but it will soon alright so far so good this is the last video in setting up the styled components to be used in our application we're going to talk a little about theming and how we can use it to have different themes in our app so let's get started here we're going to be mostly in our wbn player.js file so make sure you navigate in to that component style components have something called a theme provider and we can use that to switch different themes in our application and also we can use it to sort of set up different properties that we're going to reuse somewhere in our styles it's really convenient if you for example have some predefined colors then you can just use those colors by fetching the props for your component because the theme provider will make sure that the theme get passed down by props to your component so first of all make sure we import our theme provider so import theme provider from style components we're going to create our themes now first of all we have a regular theme we call that theme it's just a regular object here you can see we create a const named theme and it's a regular javascript object so we have a bd color of three five three five three five we have a bd color item that one will be four one four one four one like so we have a bd color item active and that one is going to be 45 c63 whoops there's something wrong here of course there should be comas here as it's an object bd color played and that one is going to be 5 2 6 d 4e and we have a border it's going to be none and we have a border played and it's going to be none also and we have a color that is going to be white so set that to fff all right that's our theme object and then we're going to create another theme object it's the object for the light theme so we can just copy this one and right below it we paste it and we call that theme light and we're going to change some values here so we set the bd color to fff white we also set the bd color item to white we set to be the color item active to 80a 7b1 we set our video color played to 7d 9979 really innovative numbers here and you can of course style it like whatever you like for this one we're going to have a border of one pixel solid and a color of three five three five and three five and border played it should say border plate there so make sure you change this in both of the themes border plate and that should be none there and the color for this one should be three five three five three five like so so this is our objects with all the different theming styles and we have this theme provided that we imported from style components so we can use this one let's go down here to our return statement and first of all we're going to wrap everything in our theme provider so make sure you move it inside the theme provider like so then we're going to send in our themes so we have the theme and we're going to set the theme based on our button if you look here we have this night mode button here so our theme is going to be based on how we have set this button state so we grab that one from state night mode and this is a ternary operator here so if the state night mode is true we're going to grab the theme because that's the night mode otherwise we're going to show the theme light like so and of course this won't work now because we have no state yet and we haven't fixed all other things so it will throw an error now and we're going to replace this fragment here with our wb and player styles first of course we have to import them so we grab them from import style wbn player from dot dot forward slash styles styled wb and player like so and now we can use it so we replace the fragment with styled wb and player alright we have wrapped everything we return in our theme provider and we have provided the theme based on the state on our night mode button we also have created a style for the player component here so if we go into our styles folder and style wb and player and this is how we can access the values in the two themes we created in the component so we can yet again delete all of this and we're going to create it from scratch and we import styled from style components just as before and we create a const of style wbn player and we use style that we imported and it's a div this time also create two backticks and we write our css inside of these backticks just as before so our background are going to be based on if we have the light or dark theme and how do we access this well in our wbnplayer.js we use this theme provider and supply the theme that means we now have a prop that's named theme and we can access all of these values in this prop so we go back to our style styled wbnplayer.js and for our background we grab our prop we do that by a dollar sign and curly brackets we grab our props and we grab it from props dot theme bd color just as we named it in this component here so this is the one we're grabbing based on what theme we are using light or dark we do the same with our border or props arrow function we grab it from props theme and border and other ones are just regular css so we have a max width of 1800 pixels we have a margin of 0 and auto we display it as a flexbox webkit box ms flexbox and display flex we have a flex direction of row a max height of 863 pixels we have a transition all 0.5 seconds and an ease like so then we have a media query here for our responsiveness so we have media screen and max of 1400 pixels we display block and max height of 10 000 pixels well this is css so you have to you can try it yourself and see what all these values does to the app and we also have to export this one so export default styled wbn player like so and save it and that's it that's how you use themes with style components one more thing we're going to do in this video is we're going to connect our different style sheets here with our components so we go through all of our components here in our app we've already all the style sheets we need here we have the global style and the styles for the individual component in our playlist we also have all our styles in our playlist items we also have our styles in our wbn player we have all our styles in the night mode dot js we're going to import a style sheet for that one so we import styled night mode from dot forward slash styles tiled night mode here and we wrap this one with the styled night mode instead like so and actually we can just finish this one as we hear we have a span and we write night mode and a colon then we have a label with a class name of switch then we have an input with a type of checkbox we set the checked to night mode we've set the unchange to a callback function that we call knight mode callback and as before these are not going to work now because we haven't created these ones yet we have another span with a class name of slider round we can just destructure the props here also we have a night mode callback and we have a nice mode and that's it for this component and we're going to create these ones in a later video so don't worry say this one okay we have a few more components left that we're going to import our styles for so we go into our playlist header.js and we import our styled playlist header from dot forward slash styles style playlist header like so and then we import our styled journey from dot forward slash styles styled journey and this is also quite a small component so i think we can finish this off right now we have our styled playlist header we wrap it in that one then we have a p tag and we grab that from a prop called active.title then we have our styled journey and also from the active prop we grab the num and we have a forward slash and we have a total like so and this is it for this one and these ones here it is what you see here this is the journey we have the active video and the total video and this is the title of the active video that's the ones who goes here we can distract you the props for this one also the active and the total like so so it's nice and clean then we go to our playlist item.js we already have imported our styles for that one but we can finish this component off also and for this one you can see we're sending in some props so we're sending the active and we send in the plate like so and we distracted the props we have the video we have the active and we have the played so if we go and check our style sheet for this one style playlist item you can see that the props we send in we're using them here also just as we did before with the theming so we have these props accessible for us and we can change the css based on the props it works the same way as i showed you before here we have the theme and here we also have the props that's called active and also the props that's called played we're changing the visual of our player based on the active video and if it's played or not that's this one here is the green dot here that's going to show up you can check those css files out as i said before this is not a css course it's a react course so i'm not going to go through all of this css the most important thing here is that you can use props like this with the style components so i suggest you can go through them and see how i've done it here we go back to our playlist item dot yes and finish this one off also first we have a div with the class name of wb and player underscore underscore video minus number and we have the video and num for that one you can actually copy this one here and this one is going to have class name of video name and this one is going to have a video time and here we grab the video title and here we grab the duration like so and this is of course these ones here in each item that we are setting up here so say that one and we have the last one to go and that's our video we import styled video wrapper from dot forward slash styles style video wrapper and we import styled video from dot forward slash styles style video like so i actually think we're going to finish this one off also and we're going to talk more about these components later on when we are assembling the video player with these components so we have a proper active we have an autoplay we have an end callback and we have a progress callback we change this one to styled video and inside of this one we have a styled video wrapper like so and our react player goes inside these ones orac player are the one that we imported here and also installed with an pm earlier so this one will take a few props we have a width of 100 percent we have a height of 100 percent we do some in-line styling here with this one it's just a small small adjustment here we have a position of absolute and top of zero then we have playing we're going to grab that from the prop auto play we have the controls set to true we want to show the controllers in the video you can change these ones if you want we have an url of active dot video on ended we're going to create an end callback and we have an on progress callback also and these ones are defined in the react player so we're just using them as they say you should use them we have to close this one also and this is it for a video as i said we're going to talk more about this later on but i thought we could finish them as we're already here now first of all we're going to correct some little type error i did in the last video maybe you saw it already done so you have corrected it but in the playlist header.js and where with the structure the props it should say total not totaled totaled is the swedish word for total so maybe it was that who made me misspell it so all right with that said i thought we were going to create some hooks by now but i think it's better if we in this video just finish off our components so when we start creating the hooks in the next videos it's better to have a working app and not this kind of failed to compile thing here and a broken application so if we fix these ones in this video we are going to at least have something showing here when we create the state hook in the next few videos so let's get on with it we can start we have the playlist and the playlist items left so in the playlist go into the playlist.js and first we can the structure the props we're going to need and we have some videos we have the active we have the night mode callback and we had a night mode like so and for our night mode component we're going to send in the night mode callback like so and we also have the night mode prop like so our playlist header are going to get the active prop and the total prop and we grab that from video's length and our playlist items are going to get the videos and active also like so and we're going to come back to these props and what they are so say this one and we continue on to our playlist items.js first we destructed the props and we have the videos and we have the active for this one and we can delete this one because in this styled playlist items we have this list of different videos so we have to loop through this list and create all the items and we do that by grab our videos and map through them we have a video and an arrow function and inside here we are going to return our playlist item and it's going to have some props it's going to be the key we always have to have the key when we map through something we had a video we have the active and here we're going to check if the active id is the same as the video id and then we set the active to true otherwise we set them to false that way we know which video that is active so we have the video id and we check if that's equal to the active id and then we set it to true otherwise we set it to false we set played to video dot played and we close it like so and this is it for this one and the last thing we have to do here is to kind of assemble everything in the wb and player.js and we're also going to create empty callback functions just so we don't get an arrow because they don't exist and then we're going to fill them out and create them in a later video if we go into our component we can create a const night mode callback and this is just an empty error function we're doing here now then we create another one that's called end callback like so and the last one is going to be progress callback and for now they at least exist so we don't get an error thrown at us and in our return statement here we are going to do some coding also so first what we want to do is to check if we have videos in our state the state we haven't created that yet we're going to do that in the next videos so we're just preparing it here so it will work for us later on so we check that the videos array isn't null and if not we're going to return all this right under here we create the closing parenthesis and then no if we have videos we're going to return the player otherwise we return nothing we return null and we have a closing curly bracket there also and we can do like this and then we have to send in the props to the video and the playlist so in our video we're going to send in an active prop we're going to grab that from our state that we're going to create later so we have a state of active video we have the order play prop and we grab that from state auto play we have the end callback and that's the one we've created up here like so and we have our progress callback and that's of course is this one like so and of course this shouldn't be there so remove this one we have it down here and our playlists are going to receive some props as well and for this one we have the videos we grab them from state.videos we have the active we grab that from state active video we have the night mode callback and that one we're grabbing from of course night mode callback and i spell that wrong also this shouldn't be two c's so remove the c's and just have one in that one and we have the night mode and it's going to be from state night mode like so and this should be it we should be good to go what's happening here well we're going to create a state with hooks in this functional component and we have our video that's this one and we have a playlist components so in our video we grab from our state the active video we grab if it's auto playing and we grab our end callback and our progress callback these ones are going to be sent into the video component so we have the active autoplay and callback and progress callback here in our video and we're using them to control the video then we have our playlist and for our playlist we have to have some videos and we want to show if it's the active video and we also have a night mode callback and a night mode if it's true or false and this one as i showed you is the button for night mode and here is our items in the list so in our playlist we have our props that we sent in from wb and player and we use them in our playlist component we send in our callback for the night mode and the night mode if it's true or false and the playlist header are receiving the active video because it's the active video we're showing here it also receives the total amount of videos in our list because we're going to need it here as we're displaying the total and what video we're on in the journey section here and we have a playlist items that's going to of course need a video so we send in all the videos all the videos from the array and we also send in the active one because we want to highlight the active video somehow here the playlist items are going to loop through the list of videos in this array and create the playlist item for each video in the array so i hope this is clear for you if you want to get the feeling you can click through the components and start with this one as this is the kind of main component for application and from there we send out props to different components down the tree this is it for this video we should be good to go when we create the state hook and in the next video i'm going to show you another example of react hooks and how they work before we start actually coding our hooks take a deep breath and lean back in your chair because now you can relax you won't have to code anything in this video we're going to step away from the original application we're building and i'm going to show you some basic concepts of the react hooks in this video so i created this special little application here or it's really an input field where you can write some text in that i'm going to use to show you how you can use the hooks instead of class components and keeping state in a controlled component so if we look at the code here it's just a regular input field that i've styled with the style components and this one is the new ones here it's the the hooks here that i'm going to explain a little short before we create our own hooks so as you can see here it's just a functional component and i'm creating the state here with the use state hook so the benefit here is that you don't need to have a class component to have state in your component and we import them from a use state and use effect from react and as i said before you have to have the alpha build of react that's called 16.7 alpha for the hooks to work when you create a state you do it like this and for now i'm just going to show you we're not going to write anything in the next video we're going to create our own state and then i explain it more in detail so hold on we'll get there soon enough the basic concept is that you create whatever name you want for your state and you also have a second one that sets the state here and this value here is the default value so it can for example be testing we save that one and you see it says testing here in the input box and for now we just want it to be nothing this is the placeholder text in the input field that i specified here well so how do we use these well if you look at this style input we have a name of test we have a value of state the state is this one so we set the value to state just as we do in a regular controlled component in a regular class and we have an unchanged function here that's called update value so in this update value i just set the state to e dot target dot value it's the value that you write in the input field and then in turn the use effect will trigger when the state updates and for this one i just got an console log now that console log out the state so if we for example are going to write star wars here i love star wars so i have to use that as an example so we write the star wars you can see here it's console logging out the state so there's nothing special about that it works like a regular state here you just have to initialize it a bit different with this i also created the effect state because in this use effect we are now going to set another state so you can have how many hooks you want here you can have how many states you want and your state can of course also be an object just like your regular state in a class component but in this case it's just this string and we'll talk more about this later when we create the state in the next video but for now we have these kind of two different states here so in the use effect we are going to set the effect state with the state we use the set effect state to set the value that we have in this state and we do it here you just call this as a regular function and send in the value you want to set the state with and then we console log the effect state just to show what's happening here so we save this one and we try to write star wars as you can see here now what's happening here whoa it's going crazy and why is that i have to break this let's do it like this now and save it why did it go and set the state that many times like in an infinite loop well there's nothing strange going on actually because when we set the effect here in the use effect it's going to trigger the use effect again and of course it will set the effect state again and it will trigger it again so it goes into an infinity loop here and that's not good so how can we control this if we do like this i have comment out but we'll make this active in this array here you can specify what this use effect should be dependent on if we write state inside this array it will check if state has changed so that means in other words if we have the state here it won't do anything if we haven't changed the state with a set state because in the next loop here it will see that the state haven't changed and it will skip this use effect so we say this one now and as you see it's working just as before if we look at the state here it says star but it only says sta in the effects it's always one character behind and that's because it's a sync when we set the effect state here it hasn't update this state when we console log it out instead we can have another use effect here if we copy this one like so you can have as many as you want and we want this to be dependent on the effect state instead and in this one we console log out the effects state so we remove this one here and if we save and try this now we write star and as you see it's always the same now and it's not like behind with one character all the time and that's because this one will trigger when the state has been set so we make sure that this is finished before we console log it and we also make sure to not go into this infinity loop by using this one here and actually this won't go into an infinity loop because we're not setting any new state in this one it will trigger when we update this state also so it will run kind of double yeah as you see it runs it two times and that's no good so we wanted to just show the console log when we update the effect state like so and this is kind of neat because you don't need that class component many people find the class components more complicated than the regular functional components and we use this use effect instead of the life cycle methods that's on the class component i think it's great because you just have to think of this one and you can control it by specifying what should affect this one it's kind of new when filming this video so it would be fun to see what people will do with the hooks in the future here i hope this gave you some little idea before we go through and creating our own hooks we're going to do that in the next video and we're going to start with a used tail hook for our application all right it's time to start creating some hooks finally that you've been waiting for this as my motivation for this whole course was to show you the newly announced hooks in react as of recording this video so in this video we're going to be in the wbnplayer.js file and we're going to create the state hook and if we go to the homepage for react.js.org and read about the hook i just wanted to show you some small things here before we start you noticed in the previous video that i was using this syntax when we created the state maybe you know about this already because this is es6 syntax how we destructure an array you can read about it here also they're showing a great example here of why we can do like this when we create the state and u state returns an array with two elements and when we do like this we can name these elements so this is the same as these three rows here you first create one variable with the use state and you send in your initial value and this one will return a pair and this is just a regular array so we can access the values by the zero and one to get the first and the second value respectively yeah they're using the fruit example here so they're assigning to variables called fruit and set fruit and you can call these ones whatever you want i don't think i explained that in the previous video with the set thing here it don't have to be named set but it's very practical to have it like this naming convention so you know that this is the one that you set the state with but you can call them whatever you want so enough said about that go back to our coding editor and we're going to start this on coding here and i just want to show you i promised you in an early video that i was going to show you a neat trick on how we can get the videos into our react player if we look at our index.html file in the public folder and inside here you can see i've created a hidden input field here and the nice about this is that we can create a value on this hidden input field and this is like a json syntax here we can write all our videos here and we can grab them in our react player so we don't have to hard code them in as we don't have a backend to upload we don't have a database to grab our videos from for our react player so we can just create this hidden input field and you can do this in whatever html file you are going to apply this player to just be careful here because you can't just create space and things and quotes you have to use these special characters here otherwise it won't work so this is simply the videos here i wanted to have an id of each playlist because when we save it to local storage it's good to know what the playlist we have saved there then i have the actual playlist that's an array with objects in it we have the video number we have the title we have the video id after the title we have the duration and lastly we have the video link so you can add whatever you want here and this is kind of neat trick to get the videos for a player kind of a hackish maybe but it works and as i said before if the things work and this easy to do it they're sometimes not bad doing things like this you don't have to build a complete backend a complete admin system for this just to get some videos into your player so let's go back into our wbnplayer.js file and we're going to add these videos to our state first we have to import our state hook so we do that up here we write the coma and curly brackets and we have use state and we can also import use effect right now because we're going to use that later on all right let's go into our component here and create the const that's called videos like so and we grab our videos with the json and we want to parse it we have a parenthesis we grab it from document query selector and we have a new parenthesis and a tick we have a bracket name equals videos like so and we have an n bracket and then dot value at the end and this one will give us all the videos in this const here so we just had to create our state now we do that with the new const brackets we call it state and set state like so and as i said many times now they don't have to be called this that's cause i choose to call them this you can call them whatever you want and we call the use state function and we're going to set our initial state with an object inside here so we have our videos we grab them from videos.playlist we have an active video and that one we're grabbing from videos.playlist and it's an array so we're using the first video if you haven't watched any video we're going to set it to the first one we have a night mode i'll set that to true because i want the dark theme you can set it to false and it'll show you the light theme so it's up to you what you want there we have a playlist id and we grab that one from videos playlist id and we have an autoplay that we're going to set to false to start with and this is really all there is to it it's just these two here one that we save the stadium and one that we can set the state with we will do that in the next video when we use the use effect hook also if we say this one it should work now and of course we have an error here playlist items we go back here and check that one okay nothing wrong here so we're going to our playlist.js and yeah of course i forgot an s here so make sure in your playlist.js file in your playlist items the prop there should be called videos not video it should be plural so put an s on that one and save it and it should hopefully work now yeah we see it here now the first time we see our player it's actually not working now you can of course play the video if you want but we can't change the videos for now because we're going to create these links here when we do the high order component and also the night mode won't work now because we haven't created our callback functions but the player is there and as you can see it's fully responsive and it's working and looking great here now and that's good in the next video we're going to check the use effect hooks okay welcome back you can see that i have a little bit of different colors here in my editor and that's because i'm re-recording this video because the rules of hooks have changed a little bit since i recorded this course i recorded it when the hooks wasn't officially released so now they have some special rules here we have to take into consideration and that is in the use effect we have to define all the dependencies and that's what we're going to do also now in this video if you see something in the videos after this one that's yeah maybe not look the same as this one i created here that's because i have re-recorded this one and this is the one that it should look like so this is the correct video here all right first of all we can go to react home page and check out the hooks api and there you can see that they've got some basic hooks and additional hooks there's actually a lot of hooks here and you can create your own hooks also we are only going to use the use state and the use effect in this course because that's the only ones we need but i highly suggest that you read more about the hooks api here and also if you like the hooks i'm going to work with them in your future work i suggest that you also read about creating your own custom hooks because it's very useful i use them a lot in my projects so that's the key i think with hooks that you can compose your own hooks and it's very composable if you use hook throughout your whole application okay that said we're going to create our use effect in this video so let's go back into our code editor and into our wbn player.js file it's in your containers folder so we create the use effect we've already imported it up here and as you can see i also done some destruction here now in this component that's also one thing i didn't do in the previous video so we have the match and the history and the location prop so you can just structure them out like this all right then we create our use effect parenthesis and we create an inline arrow function here we're going to have our dependency array so we can create that right now all right and the first thing we have to do is to get our video id and if you remember in our app.js file in our route we created this param and that means that we can grab this id with this param so if we look at the finished app here you can see that we have this id here and this is the one that we're going to grab and that's the one we call active video so first we create the const we can call it video id and we grab that from match dot params dot active video like so and that's because we destructure it here otherwise we have to put props in front of it but we don't have to do that now so here we grab the video id from the url and then we have to do some if statement here because if this value is undefined we know that we're not on a video and we're going to rock back to the first video in the video list when you open the video player for the first time then we don't have any saved state in local storage so we're just going to wrap back to the first video and we're setting that as a default here in the active video it's the 0 that's our first video so we create an if video id not equals to undefined then we're going to do something and we're going to have an else and inside of this if it's not undefined we have to find the current video in our videos array and we can do that by creating a new const first that's called new active video we have our state or videos and we can find index we have a parenthesis and inside here it will iterate through every element in our array so we can do some comparing here and find the index of that video so we have an inline function the video we compare the video the current video we're on in the loop the id of that one if that equals to our video id like so and that will give us the index for this video that we get from our params all right and then we have our video we know what video it is so we can set our state and we're going to use an update the function inside of the state for this one and that's because we don't want to specify this state as a dependency in our use effect because that will create an infinite loop in our use effect every time our state updates it will run the use effect and as we set the state in the use effect it will create this infinite loop but if we grab the previous value in an updated function inside of set state it will just live inside of here and we don't have to specify it in the use effect and we get the previous state by this parameter here so we spread the previous state that's really important when we're using hooks the set state will not merge the old state so you always have if we want to keep it should be three dots there if you want to keep the state as it was before you always have to spread it out otherwise it will wipe out the state and just to create the new values for you but if we spread it here we keep the state and we can set our new properties here so we have our active video and of course we also want to have parentheses here like so and we have our active video we grab that from prev videos and we set a new active video so we change the video to the one we got here and the auto play we grab that from location because we're sending this order play with our route so we can grab that from props dot location auto play like so and that's it if the video id isn't undefined we change the video to the value we have up here so we grab this value and set it in the state and this will trigger an update so we change the video in our list all right but if the video id is undefined we know that we're going to route back to the first video and we can do that by push to our history prop that we get from the router so history push paranthesis and we have an object we have a path name we have backtick forward slash and a dollar sign and from our state active video we grab the id and we end with another backtick and we're also going to set the order play to false because we don't want the first video to start playing by itself all right and as you can see here now the linting rule are complaining that we're not specifying any dependencies so i guess we can just order format it like so this one depends on what linting rules you set up for yourself so maybe this one won't work for you maybe you have to specify this yourself depending on your linkedin rules so it tells us that we need a history we're using that inside of here we have a location auto play we're also using that inside of here we have our match params active video we're using it inside of the use effect and we have the state active video dot id that we use here and we have the state videos so they are now specified in our dependencies for the use effect and this was the new thing when they released the hooks officially so if we save this one and go back to our application and if we go to the localhost 3000 and not using a video id it should route us to the first video and it does so that's great and we can't click these once now because that one we're going to do in the next video where we create the high order component and attach this kind of linked functionality to our list items i hope this made sense for you well it may seem a little much but i think if you take a look at this one or two or three more times it will come clear to you i think it's not that difficult what we're doing here okay we're getting somewhere here now and we're going to create our high order component so we can get these links to work so we can change the videos in the video list so let's go into our hoc folder or hook folder and or with link.js file and to be honest we actually don't need this high order component for this to work we could just go into our playlist item and we could create the link here on the name but i thought that i wanted to show you how to create the high order component as this is an intermediate course and high order components are useful when you want to reuse your logic for different components so my thought was maybe you build another application where you just want to show your video titles or something and don't want them to be clickable then you can create a high order component where you can apply the link instead and then you can use your playlist item component for another course without the link so this is the truth you don't have to have this i thought it would be great to show you how high order component works a high order component is a component that either takes in a component as a parameter or returns a component or both of them in this case we're going to send in our playlist item component and we're going to create a new component with the link function applied to it so it kind of boosts the other component with new functionality but we never modify the original component we're sending in as a parameter we're just returning a new one because you shouldn't do that in a high order component you should always return a new one all right enough said in our with link.js let's start with import react from react then we import a link from react router dom then we create const with link wrapped component that's the component we're sending in here we have our props and curly brackets and how this is going to work is we're going to take in the props and we're going to modify these props and apply the link to the name so we create the const with new props like so we clone our props and we modify our video so this is not an array in this one this is only one single video so we have the video and all the data about the video in the video object this is not an array it's an object this time so we yet again clone the video object and we modify the title inside the title we create a link we link it to and for this one we have curly brackets and another curly brackets because it's an object inside here so we change the path name to backticks forward slash dollar curly brackets props video id and an ending backtick there then we set our auto play to true because we wanted to play when we clicked the video and we closed that one and we have a link an inside or link we grab our props dot video dot title so we have wrapped our title inside this link now then we just need to return or wrap component with our new props so we spread them out like that with es6 syntax and of course we export default or with link like so then we need to use this component and if we go into our playlist items.js for now we're just returning the playlist item but we want to return the modified playlist item so first of all we import our newly created high order component from dot dot forward slash hawk with link we create a const playlist item with link make sure that i don't have an s too much or something it should be playlist item with link yeah and we use a weed link and send in our playlist item so this one will give us the modify the booster component to use for us inside here and now we can just change this one to playlist item with link and it should work if we save this so we go back into our application but they won't work and why is that yeah and that's because we should of course return our new props here not the old props go back to your weedlink.js and change this one to new props otherwise we're just passing by the props and we're doing nothing with them so it should say new props and save that one and now we can click the links as you can see here nice it's working great actually and as you can see the id is changing up here because we're rolling it and we're changing this id with our router so this is how you do it with a high order component if you don't want to use this you can just apply the link in your playlist item instead in a much simpler way but in this way you can reduce this component and we have just added functionality with this with link.js file with this high order component in the next video we're going to create the callback functions that we set up here so we get our full functionality of the player okay there's not much left to do here now with our player but we have some few things left in this video we're going to create the callback functions that we need for the player we have one when we switch the night mode on and off and we have also one when the video has ended when it's here and going to change to another video and we're also going to have a callback that sets the status to watched on the video that means it's going to indicate here with a little green dot that we have watched this video and we want to do this when we have played a video 10 seconds so you just don't click it and then it will say that you have played it we want to know that the user actually have watched at some of the video at least so let's go back into our wbn.js file and first we create the callback for the night mode and that's fairly easy actually we have already created these kind of empty functions here so in this one we just have to check a boolean if the night mode is on or off and we have our night mode in our state here for now it's true and we should change it to false or true when we click the button in our player so in this one we actually just have to set the state first we clone the state and then we set the night mode to the opposite of state night mode like so and that's all we have to do with that one based on that boolean we are setting our theme here and selecting the light or the dark theme so we save that one and we should be able to try it now yeah as you can see we're changing the theme here now when our callback function working and that's really nice so now you can select if you want a light theme or a dark theme and of course as usual you can style them as whatever you want you can have a orange team or a green theme or whatever you want all right and then if you just look in our video.js file we have two callbacks on our video and these callbacks are integrated in the react player so we just use them as they are intended to do in the instructions from the rex player we have one prop that is called on ended and one prop that is called on progress on handed is when the video has stopped playing and what we should do then so every time a video has reached the end we get the callback from this component react player also we have this on progress it's given us a callback call every second i think so we can do some stuff on progress callback here and we're going to use that to check when we have played the video for at least 10 seconds go back into our wbnplayer.js and we can start with the end callback here and there's a few things we have to do here first of all we have to know the index in the video arrays of the video we're currently playing because we have this array here in a state with videos and we're going to go to the next video or if we're at the last video down here we're going to jump to the first video and how do we do this well if we go to our public index.html file we have this num here so we num we give each video a number so that would be fairly easy to just grab this number and take minus one on the numbers because the array starts at zero and this one starts at one then we know what position in the array we're at but we can't be sure that the user always are going to have these numbers in this file it can actually say whatever you want here so that's not a safe way for us to decide where in the array the current video are what we do also have is this kind of unique ideas they should be unique you could of course have the same here but then it won't work so the thought here is that we have unique ids for every video and we can use this to find the index in the array so let's go back to wbmplayer.js and in our end callback first just as before we grab the video id from props match params active video and that'll give us this id up here then we have a method that we can use that's called find index on the array so if we use find index in our state dot videos array we can find the index of the current video so we create the const current video index and we have the array in state dot videos and then we use the find index method so parenthesis and now we have to do some comparing here because we have our video id and we're going to look for that one in the array so we have the video we have an arrow function we have a video dot id and we just check if it's equal to our video id that we grabbed up here so this one will iterate through every element in our array and compare the video id for each item with this item here because we know this one is the active video so when it find this one when this is equal it will return the index for us in the array all right i hope that was clear for you then we have to do some more checking here and see what our next video will be so we have this const called next video if our current video index equals to state dot video's length minus 1 we are going to jump to the video 0 the first element in our array and we're doing this minus one here because as i said the array starts at zero and our videos starts at one otherwise we just set our current video index to plus one we jump to the next video and this is a ternary operator here as you can see maybe we can just do like this so it's a bit nicer so we know now what the next video will be so we can push that into our url with the index of our next video and we push programmatically by props history push we have on parentheses and we have curly brackets we have a path name backticks we have a dollar sign curly brackets again state dot videos and we use our next video that we got here and our id for that video and we end with another backtick so this one will go into our state array with the videos and use the index we got here in the next video for the array and grab the id and we push that to the url so we change video and this one should of course be a coma and we set the order play to false we don't want it to autoplay when it's changed the video we just want to order play when we actively click a video ourselves and this should be it we could save this one so if we try it we can take one video here whatever and we go to the end so we're at video 2 now oh it's kind of slow here we play it and as you can see it jumped to the video 3 and it stopped there because we didn't set it to order play so we know that that one is working and now we have our progress callback left to do and as i said before what this will do is we'll set our video to played after 10 seconds so first of all we have to check if we played it 10 seconds so we create an if statement if and of course here we have our event and it's only one parameter here so we can omit the parenthesis so we do like this and we write if e dot played seconds we get this one from the video from the react player so we can check how many seconds we played so we're just grabbing that one from the event we get to this callback function if it's greater than 10 and we also want to check that it's actually not greater than 11 because we don't want this to fire off all the time when we play the video so yet again we grab e dot played seconds and set it to less than 11 and there we have our if statement and now yet again we have to find the correct video to apply this played value to so you can do this in a couple of different ways one way of doing it is set the state and then we can just loop over the videos and when we find the correct id we just set that to true so i'm going to show you this one now so we set state parenthesis curly brackets we clone our state we have our videos array we want to update this whole array here so what we can do here is we can map through all the videos and we can update the element that we want to apply the plate value to so we just write state dot videos dot map we have an element an arrow function curly brackets and inside this map we want to return something and we create a ternary operator here we check if our element dot id equals to state active video dot id if it does we know that this is the video we want to change because we're playing this active video now and we want to change our videos array and set that this video has been played all right and if this is true we update this element so we clone the element first we always have to clone it and then we set the plate property to true for that element otherwise we just return the element because we don't want to modify that one and this should work now so we go back to our video you can see here this it's this green little dot here that will get applied when we have played a video more than 10 seconds so if we for example grab the second video here and we let it play for over 10 seconds then it will apply this green little dot here and as you see if we change before the 10 seconds nothing will happen it kind of tells us that we have been visiting this video before and played it and of course you can have more than 10 seconds you can have less than 10 seconds it's up to you what you want there stop this one and i can also just show you another way of doing this if you want if you don't want to do this map thing here take this one comment it out you can just create a const with videos equals dot state videos we clone our state here with the videos we have a const played video that equals videos find and here we can now find the correct video so we have a video on our function video dot id equals state active video dot id so here we grabbing the video in our array that's equal to the video that we're actively playing now then we can just apply the played value to this one so we have the played video dot played and set that to true and then we can just set the state dot dot state and videos so we created this copy we cloned the videos here and we looked for the video that we want to set the play to true we apply that one and then we set the state with the complete new videos array and it will replace the other one so save this one and it should work just as good so if we take this video for example and let it play for about 10 seconds yeah we're getting there all right and 10 11 12 just to be safe and you see it applies the green dot so it's really up to you there's probably even more ways to doing this but now you have two ways you can do it here and um i hope this was helpful for you and this is actually our complete player we just have to create our local storage so we can persist this data of what we have played and our list with videos okay we're almost finished with this one and in this video we're going to learn how to persist or state in local storage the first thing we have to do is to have a function that will trigger when we have updated our state in the player and for that one we can use the use effect hook as we did before so we need a use effect hook that triggers every time the state updates so if we go into our file wbnplayer.js yet again and below our state we create a new use effect hook use effect parenthesis then we have this arrow function inside like so and we will access the local storage and write to it here so we write local storage dot set item parenthesis then we need a backtick dollar sign curly brackets and we want to grab state play list id we want to save different states in the local storage if we have more than one player with different playlists so we identify it with a playlist id another backtick coma and then we do a json stringify of course you can only write a string to the local storage so we have to convert this one to a string before we write it parenthesis and we have our state object so we clone that one like so as we learned before we also have to make this use effect dependent on something and in this case we want it to only update when the state changes so we go down here write the comma create our state like so and this will make it only fire when the state changes so we say this one we go back to our player and into our console we can check our application and inside there we have a local storage oops just going to delete my old ones here so i reload it and as you can see we have this playlist called wbn rdx and we have our state here as you see so every time we change something here it will also update the state as you can see now it's the active video it's number three here and now it's number four so it's working it's updating the local storage and sync it with the state what we have left to do is when we initialize the player we want to check if we have something saved in local storage and use that state instead so we create a new const up here called saved state and we get to undo a json we parse it back to json format local storage get item parenthesis backticks dollar sign curly brackets and we use the videos this one here we just playlist id we grab the playlist id from this one here in our json object in the index.html file so we have another backtick to end this one like so whoops we have an error here yeah i misspell this one it should say parse like so so hopefully we'll have our local storage saved in the saved state const here so what we have to do now is to modify our state or initial state here we have to check if we actually have this one or if not we're going to use the videos so we use a ternary operator here on every property in the state so we check if we have a saved state if we have a save state we grab the values from the save state instead otherwise we grab it from the videos const say state save state active video like so a bit repetitive here but we have to do it save state say state dot night mode otherwise we can set it to true as before and we have a save state say it's the dot playlist id like so just making sure that i spelled everything correctly here it looked like so so save this one and if we remove this one we clear out the local storage we make a reload and we change to video yeah 3 and we can also wait for 10 seconds here to see if it will save this one for us so we change to video 5 we can change the night mode and if we look here it should be saved now number five not more false and or video so if we reload this one yeah it's working so we've learned how to persist a state it was fairly easy in this application it's not that much code to persist the state in local storage in the next video we're just going to learn how to deploy this one we only have to learn where to deploy this sucker so in this video we'll do that if we start in our app.js file you have to think about the url where you want to host your application and for example where i host it i have it at the react underscore video player like so so i have it in a sub folder here and that's very important because we have to tell the router in react that we have our application in a subfolder so if we go into our app.js file and inside your browser router component tag here you create the base name equals and then forward slash and your subfolder and the forward slash again and this is only important if you're going to use a subfolder if you have it hosted at the root you don't need to do this it's only if you have a subfolder but it's likely that you're going to have that i think so say this one then we have to go into our package.json file you have a property called homepage and inside here you can just write the whole complete url to your application so in my case it will be webenfalc.com react video player so put in your own url there and also be sure that you don't have a typing arrow here you have to have a coma because this is a new property in this object here save this one and this is really all there is to it now we have to go into our console we have to break our application here with control and c and then we just run npm run build and press enter and create direct app will create this build folder for us as you can see here it has built some files for us here we go into our finder and you see we have this new build folder so these are the files that you just copied to your server so grab this file and upload them to your hosting server and it should work and there's also one more thing you have to think of and that's the dot ht access file and this is really where it can look very different depending on the hosting company your server and where you're going to host this one but i can just show you what works in my case so i create a new file here and i copy and paste this one this one here goes in the dot htaccess file in the folder where you host your application what this will do is it will always route back to the index.html on the server because we want our react application to do the routing and this is really important course if you don't have this i've i've had a lot of headache with these things a lot of times and if you don't have this one it will not work it will probably show you the start page but if you click another video here it will throw you an error because it won't find this one here as it's in a subfolder and we also have this id here and it won't work because it's trying to route this on the server and we want to do this routing in the application that's why we fall back to the index.html file so this is the end of this course i hope you learned something and i have had a blast creating this one and showing this for you hopefully i see you in my future courses i intend to do a lot more of them and i wish you all a great time and happy coding thanks hi guys hope you're enjoying the react hooks course i thought i could show you how to use the use callback hook in this little bonus video today so what i've done here i set up a really simple react app here it's just this button that generates a random number here and as you can see in my code here i just have the app component and the button component and of course the index so what's going on here yeah in our app we're using the hooks in a functional component just as in the course and i created a callback for the button so when the button is clicked this callback is invoked the button that receives the callback and i also console log what's happening here so if we start looking at the application and press the button here you can see i console log out when i click and i also cancel log if the button is rendered so first of all we can just google use callback and go to the react home page and we have it down here and as you can see it returns a memorized callback and this is because in the functional components when you render the component it renders everything again and if we look in our code for example or app.js or app component when this one re-renders it will go through all of this code again and create the callback over and over again and there's also many that's using inline functions here for the callback like so and you do something here inside this and this anonymous function will get recreated every time you click so there will be a lot of these ones and that's no good if you have a really large application to be honest react is a pretty good and optimized library so you don't have to worry about this really but there's a lot of people out there worrying about recreating functions and callback functions so what we do in a regular class component we can remove this one and just go back to what it was before here and we just call the function up here instead and then it will not get recreated every time but that's in the class components and they work different from the functional components so we have to do something else here for this one to not get recreated every time and if we read a little about the use callback hook here pass an inline callback and an array of inputs use callback will return a memoized version of the callback that only changes if one of the inputs has changed so you can kind of send in this array here just like we did with the use effect hook and this one will control when the callback function will renew itself and if you don't want to renew it just like with usefx you can just send in an empty array so this is useful when passing callback to optimize child components that rely on reference equality to prevent unnecessary renders eg should component update so when this one creates a new callback on every render even if the callback haven't changed the shell components will think that it's a new prop that's being sent in and will re-render and of course you have to do something to control also what props are being sent to your component but i'll show you that in a second so what can we do here because this one is being recreated every time we click on this one it creates a new one so we can firstly import the use callback hook like so use callback and then it is as simple as just wrapping this one like so and we also want to pass in an empty array for this one because we're not going to need to recreate this one we just have this new state here that's creating a random number when we click this one so it should look the same all the time we don't have to recreate it so we just create this callback function once and we do that by sending in an empty array so if we save this one and we click and we can see that nothing has really changed here the callback function itself is just created once but we can't really see it now so we can test this one by go into our button.js file there's also one new thing in react they call react.memo and this one if you use the react memo it will make this functional component to check the props and if the props aren't changed it won't re-render itself and this one you don't have to import anything special you just write react dot memo and you wrap your component in that one like so so if we click this one you can see that we're not re-rendering the component now and that's good because before we had this react memo say this one again you can see i have this console log here every time the app is re-rendered the button component also gets re-rendered but by using the memo here like so we are making sure that this component will check the props before it decides if it should re-render or not and because we use the use callback hook here we are not recreating this one in each render so this will work now and as i said there's not a lot of performance issues here so you don't really have to do it and that's why i didn't show this one also in the course where we create the video player because you're not need to do this in this kind of small applications but it could be good to know what the use callback is and now you know what it is and what you can use it for so hope this little bonus video was worth something to you and you learned something i also hope you enjoy my react hooked course and that it's going great you can also hook me up on twitter at web and funk if you want to i started to share small code tips there especially in react but also other things so this is it i hope you enjoyed it see you