React Movie App Tutorial

if you've ever wanted to build a movie app for your portfolio or just for fun that's exactly what we're going to be doing in this video we'll use a real api to get movie results as we type we'll add a netflix style horizontal scroll and zoom as we hover over we'll be able to add movies to our favorites when we refresh the app the favorites will still be there okay let's get into it okay so our movie search app wouldn't be any good if we didn't have any movies to search for so we are going to use the omdb api to search for some movies and display these in our app if we go to api.com and click on api key fill out this form hit submit and then we should get an email to your inbox that has your api key and some other stuff so the next thing you want to do is activate the key just by clicking this link and it should say your key has been activated mines has been activated already and so if we go back to our email the next thing we want to do is copy this link and we're going to paste it into postmanages to make sure that everything's working fire postman paste the url in you can see the postman has picked up the query parameters that are in this request so i is an id of a film an api key is our api key that we were just sent so if we click send and we should get a list of json back and we do which has some details about a film in this case it's guardians of the galaxy okay good so this is working so instead of i what we want to do is use the s parameter so it just stands for search which you can see in the documentation so check the descriptions for details on that and as a value we're just going to type star wars as an example if we hit send again this time we get an array back and each item in the array has a movie with a title a year um an id a type and a poster so the poster is what we're going to display in our app okay so now that that's all working the next thing we're going to do is create a react project so i'm just going to use create react app for this but you can use whatever you want and i'm going to call it movie app after that's done it's thing we're going to change our directory to movie app and then we're just going to install bitstrap bitstrap is the css framework that we're going to use to save us having to write our own css okay so now our project is set up the next thing we're going to do is we're going to add a state object which is going to hold the movie results to come back from the search so we'll create a new state object and we'll call this movies and it's going to be an empty array just for now so we have to import these they took from react so if we jump back into postman you'll remember that the api gives us back a array of films and each one contains some details about that film so what we want to do is we're going to copy some of these and then we're going to paste it just inside our state array just like this and then if we format and save this everything just looks a bit neater so for now all we're doing is we're going to hard code some of these films and we're going to display them down in our jsx here just to get the ui working and eventually we will go to the api which we just signed up for and we will get these films from the api now that we have some movies in state we're going to jump down to our jsx and we're going to delete this and we're going to create a new component which is going to render the list of movies so if we look over here this will be this list of films and eventually we're going to use the same component to display our list of favorites so we'll jump into our code we will open up the search folder and we're going to create a folder called components so this just keeps everything organized inside components we're going to create a new file this will be called movie list dot js in our movie list component we're just going to create a component in usual way so say import react from react we'll create a function component which is just an arrow function and this is going to return a list of movies for us so inside this react fragment we're going to open our braces and say props.movies.map and inside the map function we're going to get the current movie that the map function is currently on and an index and for each of for each of those movies we want to render a div and inside the div it's just going to be an image tag which displays the movie poster so if we look at the finished example each thing is going to just display a poster so then we'll say the source is going to equal movie dot poster which comes from the movie object so if we look back at our postman collection again each item has oops what have i done oh no go back okay h film has a poster which gives us a link to an image so all we have to do is just display this in an image tag if we jump back to our code since we've copied a bunch of films from the response we're going to have some test data here to play with so we're taking it from this poster let's just jump back to movie list and we have an error image element which must have an alt prop okay so say alt alt equals movie just for now c of this and don't forget to export your component so export default movie list so if we jump back to our version there's nothing displaying yet now we just have to call the new component that we created and pass this list of movies to it so inside our div we're going to say movie list and movies is going to be equal to movies and we'll close this format so it looks nice and let's see if and here we go so we have our three movies displaying on the screen just a quick recap on what we're doing so we've created a state variable called movies that holds some movies which we get from the api eventually uh we have a movie list components which we pass these movies to inside the movie list we're just using the map function to display each movie from the array each movie has some div and an image of in it that displays the poster okay so let's add some styles to make this look a bit nicer if we go back into app.js at the very top we're going to import bitstrap so we'll open our quotes and type bootstrap slash dist slash css bitstrap dot min dot css so that's a bit of a mouthful but all this is doing is taking the css from bitstrap and we also want to import some of our own styles so we'll just do import app.css which comes from here so if you go to sourceapp.css we're just going to delete everything in here because we don't need it and then we're going to type body and then we'll say background it's going to be this to give us not quite a black background but a nice one similar to netflix i'll say the color of the text is just going to be white so we'll do all f's for that okay so now we have a nice background if we go back into app.js we've already imported bootstrap so now all we have to do is apply some of the styles that bitstrap gives us to our jsx on the div we're going to add a class name of whoops class name equals container fluid so this is just a bit strap container what we want to do within this is we want to have all these movies on the same row and we want to make the row scrollable so that we get this nice horizontal scroll effect for each of the rows that we have we'll create a div just outside the movie list and this is going to be class name of bro so this comes from bitstrap and then we're just going to paste the movie list component within this div so take a few spaces within it and paste it just like this this is trying to put things on the same row but because we're on a smaller screen here you can see it drops down to the next line so all we have to do here is add our own class just to say don't drop things to the next line just continually display them so we're going to add a class to our top level div here the container called movie app and then in our app.css we're going to say movie app dot row so let's say in all the rows inside the movie app class we want an overflow of x to be auto and we want the flex wrap to be this prevents the wrapping on the next line and then if we look at our example now we have three films one of them is off screen but if we scroll over and back it works okay so the next thing we want to do is jump into the movie list and we're just going to add some styles to this div just to space some of these things out a bit nicer so we're going to say class name i know we want this to be a flexbox container so we'll just say d flex which is a bit strap class and then we're going to say justify content start then we're going to say m so these classes all come from bitstrap so if you save this it spaces things out a bit nicer for us okay so things are looking good so far we have some movies being displayed that we can scroll through now it's time for us to add in a call to the api to actually go and get some films from the api so if we take a new line just below all the stitch stuff and then type const get movie request equals and then this is going to be an arrow function and inside this we're going to make the request to the api so we're going to do const url it's going to be equal to if we jump back to postman remember this url that you got from your email this is what we're going to want to take so we're just going to copy this and we're going to paste it in as the url so we're going to hard code a search which is the s parameter just until we get things working and eventually we will take the search parameter from whatever user type so if we look at our finished example there's a we're gonna have a text box up here that actually does stuff whenever they type into it and we'll get to that eventually okay so back in our code we have our url and now all we want to do is say const response is equal to a with fetch we're just going to use the fetch api here to make a request inside the fetch we'll just say url like this and it's saying cannot use keyword a width outside an async function so to make this function async all we have to do is type async just before the braces and now it's just saying things aren't defined which is fine so when the fetch request happens it stores the response and response object that we just created now we have to convert this to json so we're going to say response json equals a width response dot json so this is just a built-in thing that converts our http response into json so it's going to look like this so if we do console.log just to show this in action whether it's response json uh response oh spell response wrong up here okay okay so now we have a request that happens that goes to your api and it converts some stuff to json and the json gets logged to the console the last bit that we need to do to get everything to work is to actually call let's get movie request so to call to get maybe request function we're going to use a use effect hook in here all we're going to have is get movie request this is saying it's not defined so we will define it up here and down in here our use effect took just before the closing brace we want to take a comma and add an empty array so what this means is that the get movie request function is going to get called when the page loads only whenever we add a search bar we want the get movie request to be called whenever the user types but we'll get to that later for now we just want the request to fire when the page loads just to show things working so now if we save this and open our dev tools to see the console so in our console we have an object if we expand the object you can see we have a search array within it each item fitness array has a film with star wars in the title and that's because we searched for star wars up here so this response is the same as what we've seen in our postman collection it has a search array and it's got a bunch of films this is what we've been using to display our film so far so now all we have to do is replace this this hard-coded stuff with whatever comes back in the response so to do that all we have to do is call the setter function for the movies state object so we'll just type set movies and it's going to be response json dot and then we only want to take the array so it's called search so we do response json.search so now if we save this you can see that we've got a whole bunch of films so this is coming from the response so just to see this work a bit better we're going to delete our state object and it's going to initialize to an empty array this just shows that we're no longer using the hard-coded data and when he uploads and makes this movie request it searches for star wars bungs everything into state and it gets rendered by the movie list so if we change some things in star wars to let's say avengers hit save this time it goes and looks for avengers and gives us back a bunch of avengers films so this parameter is what is going to be dynamic which we'll look at next to make the search more dynamic we need to add an input store the value and state that the user types and call the api every time that input changes so if we start by creating a state object we're just going to call this one search actually we'll call it search value that's a bit of a better name set search value equals used it and we'll just initialize this to be an empty string now down in our jsx we're going to create a new row just above the movie list this is just a new bit strap row to help us keep things organized and in this we're going to create we're going to create two components we're going to have a component for the heading and then we're going to have a component for search box so if we look at our finished example you can see we have the movies title and then we have a search box over here so if we create the title first by going into the source folder into components new file movie this heading dot js and we're going to create a component in the normal way and say const movie list heading equals a functional component it's going to return us a just a div with a class name of a call so within our div we're going to have a h1 and then we're going to say props dot heading and then don't forget to export this just like that and then back in our app we can render this so take a new line just inside the div and we will do movie list heading and hopefully it gets imported oops hopefully it gets imported for us and it does is taken from the components folder and we want to pass in a prop for heading which we called heading so we'll say heading equals movies now if we check our app on chrome you can see that this is up here the reason why we created this as a separate component is because we can reuse it later or the favorites the next component we need is a search component so if we go into our components folder create new component this time it's going to be called search box and again we're going to do the normal stuff import react from react and then we're going to do const search box it's going to take some props and we're going to return a div which is going to have a class name of column and we're going to add a bit strap class which makes it a bit smaller so we're going to say call sm4 so this just means it's going to take up forward 12 of the screen within this div we're going to have an input like so and we'll just export this whoops export default and we're going to give our input a class name of form control so this is just a bit strap class that gives us some nice form styles and we're just going to have a placeholder it says type to search now in app.js we just want to render this so we'll do search box and it didn't import it this time so we'll have to import it ourselves the import search box from and then it's in the components folder and search box just like this so now if we see this hopefully it works and there it is okay so while we're here we're just going to tidy up some of these styles and make these more in line with each other thankfully bitstrap has given us some classes to help with this so we'll do let's see in the div that holds our heading and our search box we just want to add a new class i'm just going to say d flex to say this is a flexbox container i'm going to align items center and we're just going to add some spacing so let's add a margin top of four and a margin bottom of four as well okay so that's looking a bit better okay so now we have a title and a search box the search box accepts a value but it doesn't actually do anything so what we have to do is store this value in our search value state anytime this changes we want to call the get movie request the first thing is to pass the search value and the set search value to our search box and hook them up to the input so we'll say search value is equal to search value and say set search value is equal to set search value so we're just passing these things into our component now in our component we just have to add them to the input for the input value we want to say crop start value and whenever the input changes we want to update the state value we'll say unchange is equal to as it's going to be an arrow function and it's going to say props dot set search value which is the function we just passed in and then we want to get the value of the input which is just event dot target start value and the event comes from the unchanged event and it gets passed in by react so we have it like this so now anytime this changes we're storing the value that they typed in the search value so just to double check that this is working we'll go into our dev tools and we'll go to uh where is it components so if you look at the app you can see that we have a bunch of state so the second one is our search value so now if i so if i type in here you can see that the state updates every time i type okay good so this is working so we'll close that down okay so now we have the values stored in state and it gets update every time user types we want to trigger this get movie request the best way to do that is to say and the use of hector anytime the search value changes i want to call the get movie request so remember if the use effect took any value that we add to this array causes the use effect hook to run when the search value changes get movie request will be called now you know get movie requests instead of searching for avengers all the time we want to take the value that user typed and send it along with the request to do this we'll use a template string we will change our speech marks to backticks to tell us okay this is going to be a template string as opposed to just a normal string and then we're going to delete avengers here so now we're going to say s which is our search term is equal to is equal to dollar sign and see how this turns blue this means that whatever's inside this is going to be executed as javascript we can add search value in here whoops and it's going to get dynamically applied to this string and we're just going to pass in search value to our function and accept it in our function as well okay so now that we're passing in our search value we get this error which says cannot read properly mapped of undefined so that's because we're sending an empty search value when the app loads our search value gets set to an empty string when the uploads and this gets passed to the request and then the request doesn't give us back a search array because we didn't ask it for anything and it gives us this error what we want to do is say only set the movies if we get any search values back so what we can do is just above the set movies here we're going to get rid of this console.log and we're going to say if response json.search and if this is true as in if the response json.search has anything in it then we're going to just set movies like this now if we save and reload the app nothing appears but if we type hopefully things start to chew up so as we type star wars you can see it does a search every time you use your types and then we'll try out avengers okay so this is working and it looks quite cool as you scroll over we can see all our search results and if we delete and search again again for star wars you can see the request gets called and we update the state with the new results every time just to recap what happens when the app loads the use effect gets called because these effect hooks always get called on the first render it calls the get movie request passing in our search value which is an empty string this gets movie request takes the search value and sends it to the request we then take the response and convert to json and if we have any search results then we're going to stick that instead when the user types the set search value gets called but whatever they typed and gets stored in state because the search value has changed the use effect hook gets triggered the get movie request function gets called with the new search value and the new search value gets passed to the api and the same thing happens again we get a response we convert everything to json and if we have any search results we stick everything instead when the movies when the movie state updates it passes the new list to the movie list and it gets rendered onto the screen okay so now we have a working search and we have films coming back from our api the next thing we want to do is add a favorites bar that appears at the bottom here so if we look at the finished app if we hover over we get this nice enlarged effect and this add to favors button appears at the bottom so we'll go into our movie list component and we're going to add a new class to this div and it's going to be called image container so this is going to help us show and hide the overlay now to add the actual overlay we just create a div just below the image and then we'll say class name it's going to be able to overlay so this is going to be some of our own custom styles and then we'll add some bit strap styles just to help us center things so we'll say d flex align items center and justif whoops justify content center now we have our overlay div in place we just need to add some styles to 2d overlay on hover so if we go into your app.css and then we'll say image container it's going to be position relative and transition we're just going to say transform now point to s make sure to spell transition right okay next we're going to say image container hover we're going to add a cursor it's going to be a pointer and then transform we want to scale by 1.1 okay so now if we try this every time we hover over one of these posters we get the enlarged effect next we just have to add some style to the overlay so we'll say overlay and this is going to be position absolute the background is going to be rgb 0 0 0 and 0.8 width it's going to be 100 transition we want it to ease in so we'll just say 9.5 s and e's opacity is going to be zero initially and whenever we hover over we're gonna change it to one which we'll do in a second and we'll just say bottom zero for positioning font size we'll make it 20 pixels padding we'll also make 20 pixels and text align we'll just add everything in the center okay so now if we save nothing shows up yet because our opacity is zero but if we add a hover effect so anytime we hover over the image container we want the overlay to show so we'll just do this above here image container hover dot overlay and opacity will be one so now if we see him and try this it works we haven't added anything to the actual overlay yet but it's appearing on hover which is what we want okay so next what we're going to do is we're going to create the component that gets displayed and our overlay so if we go to file source components new file and this will be called add favorites dot js so in here we'll create our component and that's going to be an arrow function as usual and then we're just going to return a react fragment because we're going to have two elements at the same level so we'll say spam and then this was just say add to favorites and we'll give this a class of mr2 which is margin right 2 because we want a small gap between our text and our heart okay so to get the heart symbol what you're going to do is go to icons.getbitstrap.com and down in the search here we're going to search for heart and i'm just going to select the heart fill and then we're going to scroll down here and we're going to we're going to copy this html just as it is and back in our code just blew the span we created we're just going to paste this in like that and if you see it in format all this is is a bit strap heart and it gives us all the styles for us and then we will export this so the export favorite export default add favorite okay that looks good we now have our add favorite component and now we just need to pass this to our movie list so if we go back to app.js we're going to import add favorite from components that add favorites just like this and now what we're going to do is we're going to pass this add favors component to our movie list down here the movie list will then render the component in the overlay so we're going to add a new prop called favorite component and it's going to be equal to what we just imported which was add favorites so down in here we'll just paste this like this so remember that components are just functions so we can pass them around as a function so if we go into movie list we can say up here const favorite component it's going to be equal to props just like this so now what we're saying is we're going to assign our props.favorite component to a variable and then down in our overlay just inside the div we want to render the favorite component as we would any other react component by saying favorite component inside some triangle braces just like this now if we jump back to our code it says count resolve add favorites so let's see what's happened if you jump back to app.js and scroll up uh add favorites from oh i've spelt components wrong okay now if we save this and let's do a search again for star wars now if we hover over the add to favorites appears why do we need to pass in our ad favorites like this why can't we just render within the movie list in here by passing it in it means that we can pass in different components for different situations so if we look at our final app you can see if we hover over the movie search we get the favorites components but when we eventually add this to our favorites list and we hover over it we get removed from favorites component okay so now we have a fancy new add to favorites on hover thing up here in here before we continue we're just going to make this heart red so to do this all we have to do is jump into our add favorites component and just change the fill color to red just like that and now if we try it it should be red okay cool so it looks nice but it doesn't do anything yet so if we click on it nothing happens that's because we haven't added any javascript to tell it what to do when things are clicked so to save things as favorites we're going to jump into app.js i'm going to scroll to the top and we're going to add a new state variable which is going to be called favorites it's going to be equal to use state and what we're going to do is whenever we click on a film we're going to add that film to the favorites and then we're just going to display this in its own component now we have a state variable that's going to hold our favorites what we have to do is pass a function to the movie list that's going to get called any time the film poster is clicked so we'll do that now in the movie list add a new prop it's going to be called handle favorites click this is going to be equal to a function called add favorite movie that we haven't created yet we'll create this now we're going to take a new line just under the use effect we're going to create a function called add favorite movie and this is going to accept a movie so now to add it to our state we're going to make a copy of the current state array as it's going to be equal to favorites which is our current state variable and we're going to pass in the movie so this is just creating an array a copy of the current array of favorites and it's going to add our new movie too and then we call the set favorite function and pass our new favorite list to it so this will update the state with our new array of films including the favorite movie we just clicked okay so now we have a function to update our state and we're passing this function to our movie list we just have to add it to the actual film poster itself so in movie list we're going to add a on click to the overlay div so we say on click and it's going to go to props dot handle favorites click which is the function we just passed in okay so now everything is nice and joined up we're going to open our dev tools and we're going to go to components and then we're going to go to app which will show us all our different states let me make this a bit bigger so now if we search for star wars again you can see we have a bunch of state things now it's a shame that the hooks don't actually tell you the name of the statehook but you can kind of guess what it is so this they took is the search results this they took is the search term which we have up here for our input and this one is going to be the favorites i think so it's empty at the minute because we haven't actually added any favorites so if we hover over and click on this you can see that stuff gets added but it's not what we want oh it's added the wrong thing it's added a bunch of stuff okay so let's jump back into our code and see what happened ah okay so we've got a props.handle favorite click which calls a function back in app.js but the add favorite movie function accepts a movie and we haven't passed in that movie we've just passed it a reference to the function which is no good so if we fix this by going into movie list and the on click we're going to convert this to a function so we'll just make it into an arrow function and whenever the click happens it's going to call this function and it's going to pass in the movie so we get the current movie from the map function up here so we're just going to type in here movie so now if we try this again where's my dab tools uh we're just going to refresh this and hopefully this works so let's search for star wars again whoops star wars and our state's updating let's try add to favorites let's see what appears this time and there we go so we've got our movie that got passed in after we clicked the add to favorites button and if we look at our search results we can see that this is the same as what we get back in the search results we're just making we're just making a copy of it and we save it into state okay so now that we have our favorites stored in state the next step is to render them onto our app so we jump back into app.js take a new space at the bottom of our jsx here and we're going to copy this div and we're just going to remove the search box and for the heading we're just going to say this is our favorites and if we save you can see this appears so this is why we made the heading its own component at the start so that we can reuse it based on whatever different type of films that we want to display we can also copy the movie list row and just paste it just below just like this instead of passing in the movies to this movie list component we want to pass in our favorites so if we paste favorites in here and hit save you can see that the film that we added to favorites has appeared and if we add a bunch of these it gets added to our list and because these are separate components but they act the same we can scroll across each and they work independently of each other so this is why we made the movie list at zoom component because we can pass movies to it and display different movies depending on the situation that we're in so now if we search for different films say toy story the favorite list stays the same because it has its own state and its own component but the movies list search results display in this top one and again we can add things to your favorites and if we scroll where we can see them so this is pretty cool the next thing that we're going to do is that we're going to remove a favorite from the favorite list so currently if we hover over a favorite it shows the add to favorites icon and if we click it it gets added to the end this is because we're passing in a function that adds it to the favorite and we're passing in a component that looks or that says add to favorites so what we want to do is create a different function that removes it from our favorites and pass in a different component that says remove from favorites so we'll start by adding the component we're going to go to our search folder we're going to go to components and we're going to add a new one this time it's going to be called remove favorites dot jas and we're going to close this and create a component and if you haven't guessed this is going to be an arrow function and we're just going to return similar to what we did with the add favorites and we're going to return a span which says remove from favorites and we're going to give this a class name of mr2 so that it's going to leave a bit of a gap between our icon and now if we go back to icons.getbitstrap again and down in the search we're going to search for let's search for delete and see what comes up let's use this x square so if we click on it and scroll to the bottom and then we're just going to copy all the html and in our remove favorites we're just going to paste it in like this and this is saying jsx expressions must have one parent element which means we need to put it inside a react fragment just like this now if we see this and okay that looks good we're just going to export the component at the bottom here remove favorites like so and we're going to go back to app.js we're going to import it at the top like so and now we're going to pass it to our favorites movie list as a favorite component so instead of passing the ads favorite this time we're going to pass in remove favorites so now if we save this and have a look at chrome if we hover over the favorites you can see it's rendering the remove from favorites next we're going to create a function that removes the favorites from the array instead so call const remove favorites movie equals an arrow function which is going to accept a movie just like we did before so this time we're going to create a variable and this is going to be equal to and then we're going to do favorites dot filter it's going to take a favorite movie and then we're going to say favorite dot i am db dbid is not equal to movie dot i am dbid and then we're going to format this and then we're just going to set favorites as the new favorite list okay so what this does is it takes in a movie all of these movies that we've searched for and added to our favorites has an imdb id that comes from the api what we're going to do is whenever we click remove on this one for example we're going to filter the favored lists and filter out that movie from our current favorite lists whenever we use the filter function on an array it gives us back a new array and then we just set this new array into state now all we have to do is pass in our remove favorite movie function to our movie list and if we click save we'll try this out so we have some favorites here if we click remove it gets removed okay so our app is looking quite well we can add things to favorites and we can search for stuff and we can remove things from our favorites and everything seems to be working good but if we refresh the page we lose everything so what we want to do is save our favorites in local storage so that whenever we refresh the page or come back or include a browser or whatever then our favorites are still going to be saved so this mix that's an app that you can actually use so if we so if we go back to app.js and we're going to create a function just below to use effect hook called save to local storage and this is going to take a list of items and it's going to be an arrow function and then within this function we're going to save local storage dot set item and then we're going to open our braces and then we have to give it a key so a key is what we use to save and retrieve these items from local storage so we're going to call this react movie app favorites and then we have to take a comma and the second argument here is the things that we want to save so so it's best to save strings and two local stories what we have to do is say json.stringify open our braces and then we're going to pass in our items this is going to save whatever items we pass into local storage now in our add favorite movie function we're going to take a new line just after set favorites and we're going to say save to local storage and we're going to pass in the new favorite list so now anytime a we add a film to our favorites the add favorite movie function gets called as usual it does its thing to save it to state but then we're adding this extra step at the end to say okay take my favorite movies and save them into local storage tonight we can try this by opening okay so now we can see this working by going into chrome going to your dev tools and clicking on application and to the left here you'll see storage local storage and then you just want to expand this out and under localhost 3000 we should eventually see our stuff being saved to local storage so with this window open let's use our app to search for stuff if you click add to favorites you can see it's appeared here so our react movie app favorites which is our key has the json that we saved into state so this is what's in our favorites state variable currently so if we add some more things this gets updated every time as you can see at the bottom here this is getting updated and each time we do this it gets updated so it's just an array that gets stored into local stories that is the same as our favorites stitch variable so now we want to retrieve the items from local storage whenever the uploads a good place to do this is a use effect hook has the use effect hook always runs when the uploads for the first time so we'll just create a new one use effect it's going to be an arrow function in inside it as well and then we're going to say cons movie favorites it's going to be going through json.parse because remember we save our state to book of stories as a json string so we need to convert it to an object as we retrieve it so we'll do json.parse local storage dot get item open our braces and then we want to use the key that we saved the items to to retrieve the items so it was react movie app dot dash favorites just like this and then we'll put semicolon at the end let's see if this so now we have our favorites stored as an object in this variable all we have to do is do set favorites and pass in movie favorites and this is saying contains a call to react favorites without a list of dependencies okay so we have to add a dependency array here and since we only want this to happen on the page load we'll just pass in an empty all right so this these effect hook will only run the first time that the app runs so now if we save this and you can see that that the favorites that we added to local stories have started to appear so if we add some new ones just to show things working we'll say toy story again and we'll add toy story one three and two three favorites and let's see if they've appeared they have appeared so now if we refresh the app and scroll over they will have appeared so the last thing we want to do is remove the favor from book of stories anytime we click the button or to remove from favorites button to do this we just scroll down into remove favorite movie and then we're just going to do the same thing as what we did with our favorite movie and say save to local storage and then pass in our new favorite list which was created up here so now if we save this we can see our favorites have persisted if we refresh the page they're still here if we remove star wars remove remove remove and refresh you can see this is still still appearing so anytime you go to the app now it's going to book in local storage and pull out your favorites okay so that about wraps it up for this video i hope you had fun with this one if you did don't forget to share it with your friends and hit the subscribe button for more projects in the future thanks for watching

Channel: Chris Blakely

Views: 42,069

Rating: 4.9749999 out of 5

Keywords: react movie app tutorial, react movie app, react movie tutorial, react project tutorial, react tutorial, react api tutorial, react localstorage, react beginner project, React project, reactjs tutorial, react js, react hooks, movie app, react tutorial for beginners

Id: jc9_Bqzy2YQ

Length: 42min 49sec (2569 seconds)

Published: Thu Nov 05 2020