Learn React With This ONE Project

Estimated read time: 1:20

Learn to use AI like a Pro

Get the latest AI workflows to boost your productivity and business performance, delivered weekly by expert consultants. Enjoy step-by-step guides, weekly Q&A sessions, and full access to our AI workflow archive.

Summary

In this informative and engaging video, Tech With Tim takes viewers through a practical React project aimed at teaching the core features and components of React. This tutorial is not for complete beginners but rather for those familiar with JavaScript, looking to expedite their journey into React. The project involves building a dynamic movie search application using a real-world API to fetch and display movie data. The tutorial covers React's essential concepts including components, state management, JSX, hooks, API calls, and user interface construction. By the end, viewers gain a solid understanding of React and feel confident to start working with it on day-to-day projects.

Highlights

Build a movie search app from scratch using React 🎥
Utilize a real-world API for dynamic data fetching 🔎
Cover key React elements like components and state 💻
Learn conditional rendering and JSX syntax 🚀
Navigate between pages using React Router 🚦

Key Takeaways

Learn React through hands-on project building 🎬
Leverage real-world APIs to enhance your apps 🌍
Understand React components and JSX essentials 🤓
Master state management and hooks in React 🔄
Get introduced to Context API for global state sharing 🔗

Overview

The tutorial kicks off with an introduction to the project: creating a movie search engine using React. Tim emphasizes skipping unnecessary details and diving straight into meaningful code. He explains the importance of using real-world APIs and existing templates to build robust applications quickly. The video also praises the resources provided by the sponsor, HubSpot, for styling assistance.

Moving into the project, Tim explains how to set up the React environment using Vite and Node.js. He details the creation of components, stressing the pivotal role they play in React applications. Using a step-by-step approach, Tim walks viewers through creating dynamic components, managing state with hooks, and styling elements to make the app aesthetically pleasing.

Crucially, the tutorial delves into more nuanced React concepts, such as the Context API for managing global state and the use of hooks like useEffect for side effects. By using these tools, viewers learn how to connect to and display data from a movie database API, organize the app using React Router for navigation, and utilize local storage to persist user favorites, rounding off a practical and comprehensive React learning experience.

Chapters

00:00 - 01:00: Introduction to the Project This chapter introduces the project, which involves learning React through a real-world, practical project. Unlike simplistic examples like a to-do list, this project will use a real-world API to fetch and display data, covering all important React components and features. It is aimed at those with some experience in JavaScript and focuses on teaching React quickly by omitting unnecessary topics.
01:00 - 05:00: Setting Up the Project This chapter emphasizes the importance of diving directly into practical applications when learning to set up a new project. While the entire framework won't be covered, the content focuses on the most frequently used features, ensuring that learners will have a strong foundation to begin building React applications. The chapter also includes a brief demo of the application being discussed, and highlights a valuable resource for further learning.
05:00 - 14:00: Understanding JSX and Components The chapter addresses the design and styling of web components, particularly in the context of using CSS. It highlights how modern developers can leverage pre-built CSS templates and snippets, such as those provided by HubSpot, to simplify their workflow. These resources offer valuable solutions for common design elements like navigation bars, CSS effects, progress bars, and button transitions, enabling developers to focus less on writing extensive CSS themselves while maintaining professional and effective web designs.
14:00 - 22:00: Creating a Homepage and Movie Cards The chapter focuses on creating a homepage and movie cards efficiently by utilizing CSS effects and templates. The narrator expresses a dislike for working in CSS and appreciates resources that simplify the process. The favorite aspect of the highlighted resource is its extensive collection of CSS effects and templates, which help in developing a functional and visually appealing website quickly. The chapter acknowledges HubSpot as a sponsor providing these valuable resources for free and encourages checking them out.
22:00 - 27:00: Adding CSS and Styling the App In the chapter titled 'Adding CSS and Styling the App', the demonstration begins with a preview of the project - a movie search engine built by the instructor. The app connects to a public API containing extensive movie data, enabling functionality like displaying popular movies and searching for them. The chapter focuses on enhancing the app's user interface and interaction by adding CSS styling. As showcased, users can hover over movies, mark them as favorites by clicking a heart icon, and utilize the search function effectively.
27:00 - 35:00: Fetching Movies from an API The chapter titled "Fetching Movies from an API" covers various features in React, focusing on using publicly available data. It goes beyond basic concepts to explore API integration in building a React frontend. The demonstration includes managing a list of favorite movies, such as adding to and removing from the favorites list, and the practical coding begins with opening the code editor. This chapter promises to be an informative session aimed at enhancing the reader's React skills.
35:00 - 40:00: Implementing the Search Feature The chapter introduces important concepts of React, a popular JavaScript library. It begins by exploring main pages in the React documentation followed by a project setup demonstration.
40:00 - 54:00: Handling State and Context for Favorites This section introduces the concept of components in React, which are essential for building modular applications. The speaker notes that although native frameworks for mobile application development (like iOS and Android) won't be covered, understanding components is crucial. Components are explained as modular parts of the application, exemplified by a card with a thumbnail and descriptive text.
54:00 - 60:00: Conclusion The chapter discusses the concept of modular components in React, emphasizing the benefits of designing them to be reusable across applications. By breaking down the application into smaller, logical pieces, developers can compartmentalize their code, making it more navigable and maintainable. The chapter encourages adapting a mindset of thinking in terms of components to effectively utilize React for web development.

Learn React With This ONE Project Transcription

00:00 - 00:30 in this video you'll learn react by walking through a real world practical project we're not just going to build something like a to-do list we're actually going to make something that uses a real world API fetches data displays data and covers all of the important react components and features so that by the end of this video you feel comfortable working in the framework now this is not designed for complete beginners you should have some experience with JavaScript but this is designed to teach you react as quickly as possible by skipping over all of the stuff you really don't need to know and
00:30 - 01:00 getting right into the important stuff and immediately applying it into a project now that said we're not going to cover the entire framework because there is a lot of stuff here but what you'll learn in this video will cover about 90% of what you use in a day-to-day basis give you a really solid foundation to start building react apps anyways with that said let's get into a quick demo of this application after I tell you about a great resource that you'll want to be aware of so if you're anything like me you probably like writing code and building apps but you don't like
01:00 - 01:30 designing them especially when you're using CSS now fortunately in today's age we don't need to write that much CSS ourself and that's because we can take advantage of great free resources like this one from HubSpot which contains tons of coding templates and Snippets I put a link to it in the description where you can check it out completely for free I was skimming through all of the free coding templates and found a ton of useful Snippets for things like navbars CSS effects progress bars and button transitions it's always helpful for me to utilize pre-built templates to
01:30 - 02:00 learn how to properly create something and to really quickly get a functional and decent looking website running especially because I hate working in CSS and I know I'm not alone here now personally my favorite part of this resource really is all of the CSS effects and templates that they have because it just saves me so much time and gives me something that looks great immediately now this resource and tons of others are provided for free by our video sponsor HubSpot so a massive thank you to them for making all of this free and make sure to check out this resource
02:00 - 02:30 from the link in the description so I'm on the computer now and I just want to give you a quick demo of exactly what it is that we'll be building now you can see we've kind of got a movie search engine here and what we'll be doing is connecting to a publicly available API that contains all kinds of movie data this way we can display the most popular movies that's what it's doing right now we can favor the movies by hovering over them and pressing this heart and then we can search for movies so if I search for something like the Terminator for example you can see that all of these
02:30 - 03:00 results pop up so yes it is fairly simple but this is going to show you a lot of different features within react and we're going to go beyond the basics and look at things like using publicly available data which are almost always doing connecting some kind of API when you're building a react front end now if I go to the favorites page here you can see that all of my favorite movies are here and then I can unfavorite them and remove them from this list if I want to do that so there you go that's what we're going to be building I think this is pretty cool I know you're going to learn a lot so now let's hop over to our code editor and start writing this code
03:00 - 03:30 so let's get started and learn about react now I'm going to start with some important Concepts just going through some of the main pages in The react docs then we'll get right into the project and I'll show you how to set everything up now as you probably know react uses JavaScript and when you write react code you're writing kind of a hybrid of HTML and JavaScript you actually write in a file extension called jsx which is a special syntax you'll see in just a minute now react is typically used on the web but you can use the Rea back
03:30 - 04:00 native framework if you want to build applications for mobile so like iOS Android Etc we're not going to cover that in this video okay so the important thing that you need to understand about react is that everything revolves around something called a component now a component is really just a part of your application like a modular component aspect of the app here it's giving us a great example of a component where we have kind of this little card we have a thumbnail that might represent like a thumbnail for a video or something and then we have some information so like my video might description and then we have
04:00 - 04:30 this like button now you can see here this shows us the code for this video component and the idea is is that we can design these modular components and we can use them multiple times within our application and really separate all of the logic into smaller pieces of code so that we can kind of compartmentalize our application and make it easier to navigate and just write this code so you'll see that what you need to get used to doing in react is kind of converting the way you think into different components so even if we look at this web page right here we can
04:30 - 05:00 probably identify like this Navar up here for example might be a component this search button with this kind of pop up here is probably a component these different buttons these could be different components I know it doesn't make a ton of sense right now but you're able to design these different kind of small components that you can plug into your application that make things just a lot easier to build so here you have like the thumbnail component which we're using you have this kind of Link tag that we've put here and then you have this like button component and all of that gets combined into this video
05:00 - 05:30 component which is just a JavaScript function that returns what's known as jsx code don't worry I'm going to go into a deep dive I'm going to explain all of that but I'm just trying to show you a few examples now notice that we have that video component that we made right here right and then what we can do is we can use that video component multiple times to have multiple videos showing up on our page where all of the logic for each video is handled within that component and here we've made a video list component that displays different videos inside of it so that's what you kind of need to understand is
05:30 - 06:00 that we think in components and everything we build is a component and these components can have other components inside of them and by combining these together you create your web application don't worry we'll break it all down I'm just showing you a little bit about how this works so you get some context now these components can also manage state for example so if this button is pressed or unpressed and they can do all kinds of dynamic and advanced behavior that we're going to look at in just a minute okay so enough of the brief and the theoretical stuff we want to actually get get into the
06:00 - 06:30 code the first thing we need to do to start working with react is download node.js now nodejs is going to allow us to actually create a react project uh so go ahead download node.js and make sure this gets added to your system path so if you're downloading and it says something like add to path just check that box so you're able to use the node command so now that we have node.js installed what we're going to do is go into some kind of code editor in my case I'm going to work in vs code but truthfully you can use anything that you want now from here what we want to do is
06:30 - 07:00 open up a new folder so you can go to file open folder just go to your desktop or any place that you want to put this and we're going to go react you know movie tutorial or something you can call it whatever you want just make some kind of folder which is where our project is going to live okay so now that we've made this folder I'm just going to close this welcome page here what we're going to do is run a command that will initialize the react project for us this is going to use something called vit vit is a lightweight web server that allows us to kind of run our react applications
07:00 - 07:30 so what we're going to do is go to our terminal we're going to make sure we're in the same directory where we want the project to be started so here we're going to type npm standing for node package manager and then create V at latest okay we got to spell latest correctly now once we do this it's going to give us a few options here and we need to First specify the project name so for the project name we can just call this front end you can call it anything that you want this will just be the kind of name of the folder that gets created and then we need to select SE our framework now we want to use react so
07:30 - 08:00 we're going to go with react you can see there's a lot of options here and then for the variant that we want to use we're just going to use JavaScript now there's a bunch of options here for example you can use typescript as well but we're going to keep it nice and simple just with normal JavaScript okay so now once we do that it's going to create a new folder for us called front end this is where our react project will live so we want to go inside of this directory and start running the setup commands so we're going to go CD and we're going to CD into front end and then from the front end Dory we're going
08:00 - 08:30 to install the various packages that we need now you'll see here that what happens is when we run this command it creates a bunch of different files for us and one of the files it creates is this package.json file now this package.json file contains all of the dependencies for our application including the react framework so you see here it says things like react react Dom eslint you don't need to understand what all of these are and really you don't even need to look inside of this file but what will happen when we run the next command which is npm install is we will read the encies from our
08:30 - 09:00 package.json and we'll simply install them to our local machine okay so we're going to type npm install uh I noticed that's happening at the bottom of my terminal but npm install is the command that you need to run once you're inside of the front end directory it's going to take a second it will download and kind of bring all the dependencies in here and then once we have those dependencies you'll see that they'll show up in a new folder and you don't need to look at them from there but they're just required obviously for the project to run okay so that just finished let me just clear my terminal and you'll see that now we have this node mod modes folder now you don't need to go in this
09:00 - 09:30 folder or look at it I'm just kind of quickly showing it to you this is where all of the code or all of the dependencies for our project live and anytime we add a new package it will get added inside of here okay it will get added in package.json as well as inside of the node modules now from here we've got a bunch of files so let's start going through it and then we can um kind of walk through creating our simple react app and starting to build our project so we have things like this eslint configuration you don't need to worry about that so just ignore it we have this
09:30 - 10:00 index.html this is where we'll actually inject our react code so the way this kind of works is we have this div with the ID root and all of the code that we're about to write we're pretty much just going to throw that inside of this div so react will kind of manage the Dom it will handle all of the HTML being rendered to the page and the way it does that is we inject the code inside of this div and then react kind of takes control of that so you can still write things like metat tags and links and you can change for example the icon and the
10:00 - 10:30 the title of the web page here in this title page so I could change this to for example movie list or something and then when we run our react app it will get updated now we also have this readme file this is just kind of explaining how to set up the project so you don't need to worry about that and then all of the code that we're really going to be concerned with will be inside of this SRC folder which we'll get to in one second okay we also have this public folder which has things like the icon or the logo that we potentially would be displaying okay so don't worry too much about this really source is what we need need to focus on and we'll get there in
10:30 - 11:00 1 second but I want to run the react application just to make sure this is working so once we've installed all of the packages we can run the command npm run Dev now this is going to run a development server on our own computer and spin up the react application so we can view it on a specific Port so we're going to hit enter here on npm runev and you'll see that it'll show you right here where the react server is running so you can just copy this into your browser or you can hit contrl C or sorry control and just click on the link which is what I'm doing here and you'll see
11:00 - 11:30 that it opens up this kind of V plus react template app here and you can kind of count up if you press on this button now we can just leave this running on our screen I'm not going to show it the entire time but this actually has something called hot reload which means any time I make a change to one of these files so for example I say movie list 2 if I save this the server will automatically refresh and if I go back to my page I don't need to reload the page to see the change so here you see it's now updated to movie list 2 for the
11:30 - 12:00 title of the web page so that's a really nice feature you don't need to keep manually refreshing this it will automatically update anytime you save a change to your react code all right so that's all great but I'm just going to close the terminal for now I'm going to leave the server running so I don't need to rerun this again but I'm just closing it down okay so now I'm going to close this index.html and we're going to start looking at some of the files that it's given us here inside of this template now notice right away that they end in this jsx extension so whenever you you're writing react code something like
12:00 - 12:30 a react component which again we'll look at in a minute you want to make sure that it ends in jsx not JS because if you just do normal JavaScript you're going to get an issue uh if you write kind of specific code again you're going to see it in a minute I'm sorry for uh putting everything for it in the future anyways you can see here that we have this main. jsx file now this is where your react application begins and you can see that what we're doing inside of this file is we're importing a few dependencies we're looking for the root div inside of our HTML file and we're
12:30 - 13:00 simply rendering our react application inside of there so we have this component called app this is where all of our kind of react code lives where we're going to start the application from and render everything that we need and we just take that and we just throw it inside of the rout so that's kind of how this begins and and how the code actually gets injected in the web page now if we go to app.jsx this is where we can actually start writing code so if you look here you might see some code that looks familiar you have kind of some Javas RT looking code up here we have a
13:00 - 13:30 JavaScript function which is actually what a component is in react and we have this jsx code jsx simply means kind of a combination of JavaScript and HTML and you'll see that we have some things that look like HTML right we have a link we have some images we have this header V plus react we've got this you know edit file to you know make updates Etc okay so what I'm going to do is I'm just going to begin by clearing this file out and I'm just going to render a single div from this component okay we're going
13:30 - 14:00 to dive into components in one second but I just want to kind of start from a fresh slate here and just remove everything from this file so it looks really simple and we're not getting confused okay so all we're doing is we're importing this app. CSS file and we're just rendering an empty div which just means that's what we're going to put on the web page this is our entire react application as of now okay so now that we've got a clear slate here I want to talk to you about jsx so the syntax that's being returned from these components show you a few things that we can do here and how it differs from
14:00 - 14:30 normal HTML we're going to get into components we're going to start building stuff out but kind of baby steps at least for right now okay so right here we have what's known as a component a component is really just any function in JavaScript that returns some kind of jsx code so really just returns something that looks like HTML that's the way that you can think of it so components will always start with a capital letter so in this case we have function app this is the name of our component and from the component we're returning this div okay very simple we can return really
14:30 - 15:00 anything that we want so long as it's jsx code now the criteria for something being jsx is that it needs to have some kind of parent element so in this case we're just returning some div this is the only thing that we have but I couldn't for example go here and try to return another div that's at the same level notice that even though we have the uh braces here we're getting an error and the reason for that is whenever we return something it needs to have just one parent element one kind of root El element being returned and then
15:00 - 15:30 it can have anything that we want inside of there okay so we have a div and for now we're just going to return a very simple paragraph and we can just say something like hello world and if we save this you'll see that in the middle of our screen we now get Hello World okay so that's the first thing to understand with jsx when you're returning it from a component and there needs to be just one root element that you're returning you can't return multiple kind of at the same level however what if we wanted to have maybe another div maybe we're going to set up some kind of flexbox container or something and we don't necessarily want
15:30 - 16:00 to have some kind of parent element well if that's the case what we can do is return something called a fragment okay now a fragment is really just kind of a placeholder for that parent element this is what a fragment looks like right here it's simply just an empty HTML tag that's the way that you can look at it now this solves that problem where maybe we wanted two divs like this but we didn't necessarily want a div parent in this case we can just return what's called a fragment and it's just kind of this empty tag okay that wraps these different components so that can return them okay so hopefully that's making
16:00 - 16:30 sense so far now what I want to do is rather than writing this two times I probably just want to wrap this in a reusable component and then just render that component twice now I know this example doesn't make a ton of real world sense it's just cuz I need to go through the basics before we can get into the actual project so what I'm going to do here is I'm just going to make a new kind of dummy component to show you how it works so if we want to make a component we just give a function a name with a capital letter so in this case function text then we can do our set of
16:30 - 17:00 braces and from here all we have to do is just return something so I'm simply just going to return a div that has hello world inside of it okay let me just format this so that's a little bit easier to see okay great so we've just defined a component and now if we want to use the component we use it just like we use any normal kind of HTML element so what I can do is I can simply write the name of the component and then I can just end the tag like this so I can say text and then slash like this I can save and when I reload notice that my text is
17:00 - 17:30 still appearing so what I can actually do is I can put this component two times and now I'm just showing two text components inside of my app okay so you can see how this can get really useful really fast because we can make different components for all the different parts of our user interface and then we can combine them together and it makes it really easy for us to understand what's going on because I can just read the names of the components in this root component for example and I can kind of drill into the exact area that I'm looking for rather than having
17:30 - 18:00 just a ton of HTML all in a single file okay so this is the basics very Basics on a component we Define something with a capital letter we return some jsx code and then we're displaying that two times now sometimes with our components we want to actually display something unique so maybe we want to have some kind of parameter some property that we pass to the component that customize Its Behavior in this case we have a text component and for the text component maybe we want to change the color or we want to change the text that's actually
18:00 - 18:30 being displayed so what we can do is we can add what's known as a prop okay now prop stands for property and the way this works is I can put a set of curly braces here inside of my component and I can Define different props that I want to accept so I can say something like text now when I do this this indicates that I'm able to pass this text keyword to my component and I can dynamically kind of use the value that's passed in just like we do in a normal function so now rather than rendering hello world I
18:30 - 19:00 can simply render some text and just to make it not super confusing let's just change this to something like I don't know uh display or something just so that it's not the same word when I'm explaining okay so now what I can do is I can go here and I can say display is equal to something like hello and I can say display is equal to you know what's up and now when I save this notice that the first text component shows what's up and the second text component shows hello because we're dynamically
19:00 - 19:30 displaying what we're passing as the display prop now we can pass as many props as we want these props can have different values they don't just need to be text and that's really the basics on components now another thing to understand with components is that you don't necessarily need to end them in line like this I can technically do this okay so I can just end text like this when I refresh you can see everything is totally fine and it just works the same as before uh there is actually a more advanced proper property where you can put things inside of the component but
19:30 - 20:00 we're not going to look at that right now I just wanted to mention that this is another way to kind of close the components and you'll see that frequently especially if you're using components from a component library for example because the great thing about react is that you can use other people's components that they've built anyways we probably want to go beyond this we don't just want to display text this is kind of a silly component to write I was just doing it as an example we want to start working on our project now for our project we want to display a bunch of movies as you saw in the demo so the first thing I thinking about when I want to build a project like this is okay
20:00 - 20:30 what type of components do I need now right away a component that we're going to want to have in our application is one that displays different information about movies for example it shows the image it shows the name of the movie the release date and also we need to display if that movie is one of our favorites or not like with the heart icon in kind of the top right hand corner if you remember that from the demo so what I'm going to do is I'm going to make a new component but this time I'm going to make it in a new file so the best practice for react is that you separate out things like your Styles you can see
20:30 - 21:00 we have CSS files here your components your different Services things that are calling apis into different folders so I'm going to make a folder here called components okay and inside of components I'm going to make a new file and this new file is going to be called movie card. jsx okay now this is where I'm going to display or I'm going to write the component specifically for displaying a movie and you'll see immediately how this makes our code a lot more readable and maintainable okay
21:00 - 21:30 so if I want to make a new component inside of here what I need to do is I need to define a function okay so I'm going to say function movie card and for my movie card I need to think right away okay I want this movie card to work for any possible movie and I want it to display information about that movie so what I'm going to do is I'm going to accept a prop here in my movie card which is information about the movie now we'll assume that this is going to be an object and this object
21:30 - 22:00 might contain Fields like the release date or the title or the image we don't quite yet uh yet know because we haven't gone that far in the project but we want to think okay what information do I need to accept dynamically in this component and in this case we need to know information about the movie so we'll just assume that's going to come in in an object okay now right away what we can do inside of this component is we can start returning some jsx we're going to start always with some kind of root component in this case I'm going to make this a div and I'm going to start adding some CS classes here because I'm going
22:00 - 22:30 to give you access to a bunch of stylesheets that you can just copy into your code that are going to make this look a lot better later so you'll notice right away that what I'm going to Define is actually a class name notice I didn't just put class which you might be used to an HTML that's because in jsx rather than having class which is a reserved keyword in JavaScript we use class name so we don't get any conflicts okay so whenever you want to define the CSS class you just use class name rather than class now for this div I'm going to call this a movie card now
22:30 - 23:00 what I'm doing is I'm designing the component that represents a movie here okay and we can imagine we would display this multiple times on our website which we'll look at in just a minute okay so we've got this div and then we're going to want another div inside of here which is going to display maybe the image so I'm going to say class name for this one is equal to movie- poster okay then inside of this div I'm going to put an image okay for the image we'll have some kind of source and whenever you want to
23:00 - 23:30 put something that's uh Dynamic like a variable you can put a set of braces and now I can directly embed a variable inside of here so I can say image source and then maybe I wanted this to be movie dot URL okay we don't know exactly what this will be yet but if that's what we wanted we could say movie. URL and now we're treating like treating this story like a variable uh which will be kind of accessible to the source okay then I'm going to say the alt will the movie. tile okay so that's our image
23:30 - 24:00 inside of that part of the div and what we're going to do below this is we're going to make another div okay now for this div we're going to have class name equal to and this is going to be the movie- overlay and inside of this div we're going to have a button now this is going to be the button that allows us to like the movie so it'll be like that kind of heart button and for the button we can say the class name is equal to and then this is going to be
24:00 - 24:30 the favorite D BTN and what we can do is add an onclick event so just like we would in normal JavaScript or normal HTML when we click the button we want to be able to respond to that event so we can actually add a JavaScript function here which will be triggered when we click this button so to do that we can just make a function inside of our function here so I can say something like function on you know like or on favorite click or something call it
24:30 - 25:00 whatever you want doesn't really matter and now I can simply pass this function name to my onclick and now this function will get called anytime this button gets pressed okay and then anything inside of this function will run so for now we can just do an alert and say clicked just so that we know it's working okay now inside of the button we probably want to have some text so I'm just going to copy in this kind of heart text right here you can put anything you want uh you can find this by just looking up like you know heart icon online or you can just
25:00 - 25:30 copy the code I'm going to leave a get uh link sorry to the GitHub in the description but anyways we're just going to put a little bit of a white heart okay so now we've got part of our poster or part of our movie but I want to go outside of my movie poster inside of my movie card and I want to write a little bit more just we're almost done but I want to write a bit more for my component so I'm going to say div class name is equal to and this is going to be the movie info and inside of here I'm just going to add some information about my movie so I'm going to have an H3 and I'm going to embed inside here my movie.
25:30 - 26:00 tile now notice because I want to use a variable here coming from my prop I actually use the brace okay so when I do the brace it means I'm treating whatever is inside of the braces as a variable if I didn't have the braces then we would just render the string movie title which is not what we want we want to actually get the movie title from our property okay and then lastly we're going to have a paragraph tag and we're going to say movie. relase underscore date uh and then for now uh
26:00 - 26:30 we'll just leave it at that okay so this is our movie card we have just def find it and now if we want to start using it we need to export it from this file so whenever we want to access something from another file in JavaScript here we're going to export this so to do that at the bottom of our code we can type export default and then the name of our component which is the movie card okay so now this will be available as a default import I'll show you how that works in just one second we also could just denote the function as exported up
26:30 - 27:00 here but if we do that we need to import specifically this function name because it's not a default export it's a named export we're going to look at that in a second okay anyways we've got this component we've defined it we want to see it on the screen we want to start messing with it so to do that we're going to go into app.jsx and we're going to import the code that we just wrote and we're going to start rendering some movies as components so to do that we're going to go up to the top of our program and we're going to say import movie card you can call this anything
27:00 - 27:30 that you want from slash components slash and then the name of our file which is movie card okay now because we added this export default we can simply write the import like this if we didn't have the default export and I specified an export like this so I had you know export the function I would need to actually surround this in braces okay so this is called a named export and then this is the default export um so sorry
27:30 - 28:00 let's go back to what we had here where we had the export default down here okay so it's just common to use the default export for your function all right so now we've imported this and what we want to do is display our movie so to display our movie we can say okay we want to display a movie card but in order for this to work we need to pass the prop which is movie okay so we're going to say movie is equal to and I'm going to put an object here now to put an object I can put put another set of braces cuz
28:00 - 28:30 the first set of braces defines that we're denoting a variable and then the second set of braces will be the object that we're going to pass now for our movie we can have some title so we can say this is going to be you know Tim's film or something and then we can have the release date I forget what we called it so we can go check it out okay so it's release uncore date okay so let's fix that and then this can be equal to you know 2024 and then what else did we have here we had the URL uh and for now the URL we're just not going to put anything
28:30 - 29:00 okay so notice when I do this now we get our movie looks a little bit weird but we've got this kind of button here and when we click on it it says clicked and we've got Tim's film and 2024 now the beautiful thing about these components is that I can now display them multiple times so I can now have this and I can say this is you know Joe's film in 2020 and now I get the exact same component showing up except with these new Dynamic values awesome so that's kind of the first part here uh you know with our components we
29:00 - 29:30 Define a component we can dynamically render some information and I want to show you some more kind of cool things that we can do here in terms of rendering and displaying stuff to the screen before we get into anything too complicated so a very common thing you're going to see when you're working in react is something known as conditional rendering now this is some code that you can write where you can essentially render one component or the other based on some kind of condition so let's say I have some variable here and I have like you know movie number okay and maybe this is equal to movie number one now first of all this is perfectly
29:30 - 30:00 valid you can just write any JavaScript code you normally would before the return statement and you can have as much logic as you want happening inside of the component before you eventually get to this return anyways it's possible that we might only want to display one of these movies and we want to display maybe this first one if the movie number is one and the second one if the movie number is two now in order to do that we could just write you know if statements up here we can say if you know movie number so let's type this is equal to one then we're going to
30:00 - 30:30 return you know the movie card but the issue with that is that if we have a more complex user interface we probably want this condition to apply just inside of here like so we can return other parts of our user interface as well so what I can do is I can write something like this I can say movie number is equal to one question mark okay and then I'm going to copy this and then I can put a in I can put my other component I can close the bracket let me
30:30 - 31:00 just format this so you guys can read it and what we've just done is set up a conditional render now what I'm doing is I'm checking some conditions so I'm saying okay movie number is equal to one so if movie number is equal to one then whatever I put after the question mark which is this component will get rendered on the screen otherwise which comes after the colon will display this component okay so we're just conditionally rendering it based on this now if I change this to say movie number equal to two you see now that it changes to Joe's film okay and if I change it to one you can see it changes back to Tim's
31:00 - 31:30 film so that's one way that we can conditionally render now another way let me just get rid of this here is to do something like this so I can say movie number is equal to one and and and then I can put some component now when I do this it works a little bit differently I don't have an if else I just have okay if this thing here is true on the left side then go ahead and display this okay it has to do with short circuiting in JavaScript script if you know what that is but this is something that's
31:30 - 32:00 perfectly valid so we can say Okay movie num is equal to one if that's the case go ahead and display this that's pretty much it okay so that's what you need to know about conditional rendering you're going to see that quite a bit inside of your jsx code where certain things will be displayed only if some condition is true all right so all of that is great but we're going to get into a slightly more complex example here so I'm just going to remove whatever we did inside of app and I'm actually going to make a new folder here inside of SRC called Pages now the reason for this is that these components are typically things that will be displayed on the page and
32:00 - 32:30 make up parts of our user interface but we also can have unique pages that we can navigate between using some kind of page router which we're going to look at in one second so what I want to do for now is I want to make a homepage for our site so I'm going to say home. jsx as a new file and inside of here this is where I'm going to display kind of a list of all of the movies and then I'm going to have another page we'll just make it while we're here and this is going to be favorites okay do jsx now the favorites will display all of our favorites and
32:30 - 33:00 the home will just display kind of the ability to search for movies and to well favorite them okay we've still got our movie card which we can use later on and we will customize this a bit in a second but for now I want to work on this homepage okay so let's work on a homepage and on the homepage I'm going to display multiple different movies and I'm going to have kind of a search form setup so that users can search for movies all right so to start here we're going to make a component again and we're going to call this home and this component is just going to contain the pretty much the entire user interface
33:00 - 33:30 for the homepage okay so inside of home we're just going to return some jsx and then we're going to add some logic to this later on so inside of here we're just going to return a div okay the div is going to have a class name and this is just going to be equal to home now at the top I'm going to make a variable inside of my function called movies and the idea is I'm going to have an array here that contains some different movies and rather than rendering all the movies individually I want to render them kind of dynamically so whether I have 10 movies or 100 movies or 200 movies
33:30 - 34:00 doesn't matter I will just display a movie card for every single one of those okay so in order to do that we're just going to Define some movies here so we can have maybe an ID for the movie and say this is ID 1 we can have the title and we're just going to go this is you know John Wick or something uh we'll have the release undor dat now I don't know when this was released 2020 or something okay and let's just copy this and change some of these fields and let's add a few different movies just so that we have some unique values that we can look at okay so let's go
34:00 - 34:30 with something like Terminator Okay I don't know when that was released okay let's go with the Matrix okay same thing it's probably before I was born uh you know what three movies for now is fine okay so we've got three movies and the idea is what I probably want to do here is display all of these movies maybe in some kind of row or something so how can I do that well I can use something in JavaScript or in jsx here called do map to dynamically render typically an array of
34:30 - 35:00 values so the way it works is something like this I'm just going to make a div to put these inside of I'm going to say the class name is equal to we're going to go with the movies Das grid because we're going to have a grid of movies and I'm going to start by kind of writing these braces because I'm about to Define an expression in JavaScript so I'm going to say movies. map okay now what I can do is I can write movie so this is the uh parameter that I'm accepting and then I can put an arrow function and what comes after The Arrow function is the component that I want to return for
35:00 - 35:30 every single instance of my movie so let me just write it out and then I'll kind of walk you through it so we're going to say that we want to return a movie card now if we want to use the movie card component which is the one that we defined here we need to import it so we're going to say import movie card okay from and we're going to say dot dot slash and then this is going to be components slash and then movie card now we use the dot do slash because we need to go back one level because we're currently in the Pages directory to the
35:30 - 36:00 source directory then we need to look inside of components and then look inside of our movie card okay so now we've imported that so now I can use my movie card and what I'm going to do is just pass to the movie card my movie so I'm going to say that my movie is equal to the movie that I have right here and also what I need to do is add something called a key which I will discuss in one second okay so we're going to say key is equal to movie.id and let me just format this this so that we can read it a little bit easier okay so what we're doing here is
36:00 - 36:30 we're using the map function which is going to iterate over all of the values inside of our array for every single value it's going to take it and pass it to this function this function then needs to return some jsx code in this case we're returning a component and this now means we're going to display this component for every single movie so it's just going to kind of put them on the screen we don't have any styling right now but it will just make them appear okay now whenever you do this you need to add a key property to the
36:30 - 37:00 component you're returning the reason for that is that react needs to know which component to update based on the interactions that happen with the web page so we need to Mark every single one of these components with a unique identifier so that react can um kind of handle all of the State updates that it typically does I don't want to get into all the complexity right now but what you need to remember is that if you're dynamically rendering kind of multiple things like we're doing with map you need to add this key property even if I haven't added it here so I haven't added
37:00 - 37:30 as a prop it's just something that I add to the component so that react can identify this component compared to the other ones that we're rendering okay now we want to see this so what I'm going to do is say export default the homepage I'm going to show you how we route between the pages in just a minute but for now to keep things simple I'm going to go to app.jsx which remember is the main component that we're rendering on our web page we're going to import the home component so we're going to say import home from and then this is going to be Pages
37:30 - 38:00 or do/ pages slome okay and then we're just going to display the home component here okay now the home component doesn't take any props and notice that as soon as I display the home component we now get all of our movies popping up on the screen because we dynamically rendered them using map all right so this is fine but I want to add some more functionality to this homepage I don't just want to display the movies I also want to display some kind of form or some kind of input uh in order for us to
38:00 - 38:30 actually be able to search for movies so what I'm going to do is I'm going to create a form and I'm going to put that above our movies grid now for the form I'm going to have an onsubmit okay and this is going to call a function so that uh we can handle kind of the form submission which we'll look at in a second we're then going to have class name is equal to the search- form and inside of the form we're going to Define an input okay now the input is going to be type is equal to text okay
38:30 - 39:00 we're going to have a placeholder and this is going to be equal to search for movies dot dot dot and we're going to have a class name and this is going to be equal to the search- input okay we're going to add a few other things here in one second but let me just format this why it's getting mad at us oh it's because we need a function for onsubmit okay so let's just Define a function here I'm going to do it in another way which you'll see quite commonly so I'm going to say const handle search and this is going to be
39:00 - 39:30 equal to a JavaScript Arrow function okay normal function Arrow function doesn't matter and here I'm going to say handle search okay so we'll just call that function all right so now I know this doesn't look very nice but you can see we get this kind of text input popping up here and I can type inside of there that's great but I do want to format this and make this a bit smaller and I want to add a button so that we can submit the form so I'm going to say button okay we're going to end the button we're going to say type is equal
39:30 - 40:00 to submit we're going to give this a name so we'll say class name is equal to the search button okay and we'll just have the button say search we're going to add some CSS styling later so don't worry about that for now uh but I just am adding the classes so that when we bring in the stylesheets everything will work okay so now we have this you know kind of search for movies and we have this search button that I can press on that submits the form however what I want to do is I want to talk to you now about state so how do we handle
40:00 - 40:30 Dynamic parts of our components and how do we maintain things like State like maybe a count of something or in this case the text that the user is typing in now state is something where once it's updated the component will change and render itself to show the new state so you're going to see what I mean in one second but I'm going to kind of just show you a quick example of State we're just going to get right into it so I'm going to go up to the top of my program and I'm going to say import and inside of braces I'm going to say use state
40:30 - 41:00 from react okay now this is something referred to as a hook you don't need to understand what that means but what we can do here is we can define a piece of state which can handle kind of logic or well State that's happening in our component so what I can do is I can say con and I'm going to do a array here and for the array I'm going to have a search query and I'm going to have a set search query now this is pretty much always the convention you have what you want the name of the state to be and then this is actually going to be a function which
41:00 - 41:30 will allow you to update the state you then are going to write use State and inside of used State you're going to Define what you want the default value of this state to be just to give you a sense of what we're doing we're going to Define some state which will store what the user types in this input field so that we can use it later on within our um jsx here or within any logic that we have and we can actually for example call an API with that search string or we can clear the string later but we want to be able to actually track it so whenever you're writing something like a form you're always going to have all of
41:30 - 42:00 the form elements kind of connected to a piece of state and then that piece of State you can utilize within your component however you want so again you'll see what I mean in one second so this defines the state and this is the function that we can use to update the state and anytime we update the state this component is going to render itself and update based on this kind of state change okay so when you change the state you can render the component and update it on screen now what I'm going to do is I'm going to go to my input and I'm
42:00 - 42:30 going to say that my value is equal to and then this is going to be the search query because I want to connect this component to this search query State now this is fine but you'll notice that if I save and refresh here I actually can't type anything into my input box the reason for that is the value is locked on this state but I'm not updating the state when something changes in my input box so what I need to do is I need to Define this function called on change and this on change function is going to
42:30 - 43:00 take the variable e just going to be an inline Arrow function and we're going to say set query string or set search query this is going to be e. target. value which is whatever the updated version of this search box is this might seem weird but this is how you update the state from an input element okay so we say onchange we take in whatever the change is we get the target. value and we set our state equal to that so what's going to happen now is when I start typing it will update
43:00 - 43:30 what's actually happening in the background is anytime we make a change to this input box this function is called we update this state and then the state automatically updates the page which will then display whatever we've typed inside of this input box okay so now that we've defined that what we can do if we want is when we press on handle search we could actually use that string because we've stored it in the state so I can go here and I can say something like alert and I'll just alert whatever the search query is just so we see it on
43:30 - 44:00 screen okay so now if I type something I say hello and I press this search button it it says hello because that's what I typed right if I say you know what's up and then I press this it says what's up because that's what I typed okay now you notice that actually what's being typed is getting cleared when I press this submit button and that's because the submit button by default will refresh the page so if we want to stop that behavior we can write this e sorry we can take in this variable e and we can say e.
44:00 - 44:30 prevent default uh prevent default just means prevent the default Behavior so that it doesn't actually update the page okay so if I refresh this now and I type something like hello world and search notice it stays here afterwards because we prevented the default Behavior if we wanted to inside of this function we could change the state ourself so we could say you know set search query and we can set this back to an empty string or if we just want to see it working we can make get like a bunch of dashes for example and now if I refresh and I type
44:30 - 45:00 you know hello and then search notice that now it gets changed to a bunch of dashes because we called this function and we updated the state when we updated the state the UI or at least this component got rendered so it showed us that new value now appearing inside of the input okay hopefully this is making a little bit of sense but this is kind of a basic introduction to state in react okay so now that we've learned about the basics of State I want to go a step further and show you how the state can be used to kind of display different values inside of the component so for
45:00 - 45:30 example we might want to only display movies now if their title actually matches with what we've searched for so what we can do here is we can go to our movies. map and we can adjust this now so I'm actually going to change this so that rather than actually we'll leave it like this so that I have a conditional render sorry so what I'm going to do is I'm going to say movie. 2 lowercase I believe that's the function or sorry movie. tile. two
45:30 - 46:00 lowercase do starts with and we're going to take in whatever the search text is so what is this this is the search query and then I'm going to say and and this component right here I just saved this so we can see it a little bit better but what I'm doing now is I'm going to use this state to conditionally render this movie card only if the beginning of the movie title begins with the search text now when we don't have any text then it
46:00 - 46:30 just this will work it'll display all of the movies but if I start typing something like John you can see now it shows John Wick if I type t for Terminator it shows the Terminator if I do you know Matrix well that's not going to work cuz it's not starts with but if I do th it shows the Matrix and you see that my UI is being updated every time my state changes so it's very important to understand that when the state gets changed by calling this function the entire part of this component or this component itself and anything inside of this component will be automatically
46:30 - 47:00 updated and rendered to the screen okay so each time I type since the state changed we're going to rerun all the code that's inside of this component here the state will stay the same it will maintain what the state was before but everything else will be reran right and then we are going to return the new version of the UI so this is an important thing that a lot of people get mixed up with in react when a state change occurs the entire component is ran or rendered so if we just Define something as a normal variable and we
47:00 - 47:30 don't put it in the state then whatever its value was changed to will be lost as soon as the component is rendered because it's going to be redefined again completely from scratch so if you want to have state that persists across reruns or across renders you need to make sure that you define it in state like this if we change the search query and we didn't have it in this type of state and we were just using a normal variable definition then this would never be actually updated because every time we render the component it would
47:30 - 48:00 get reset back to the original value so we need to use this state to persist whatever it is we want to store within this component now this is only persisted when the web page hasn't been refreshed so if I refresh the page then the state will get reset uh and that's why we're going to talk about how you load in the state properly and all kinds of other things you can do but hopefully that's a decent example of kind of how the state works and why we put it here so now we can use it down here for example and conditionally render different movies now that's not how we're actually going to do the movie search so I'm going to remove this for
48:00 - 48:30 now because we're going to use an API to do that but I just want to show it to you because I want to go kind of Step by Step understand react is confusing I don't want to rush through anything yet so now that we've looked at this I want to talk to you about page routing I promise we're going to really get into the meat of the project in a minute but there is a lot of stuff to cover so notice that we have two pages this favorite page and this homepage so let's go into our favorite page and let's just write some very basic code so we're going to say uh what is it favorite okay con's favorite and inside of here we're just going to return a very simple
48:30 - 49:00 div okay we can say the class name is equal to and this is going to be favorites Das empty okay let's spell favorites the American way not the Canadian way let's add an H2 and we're going to say no favorite movies yet okay and then we can just add some text and we can say start adding movies to your favorites and they
49:00 - 49:30 will appear here okay so very very simple component we're going to export this so we're going to say export default favorite now as you've probably seen with web pages before you can go to like you know slome or slash favorit right and you can navigate the website using the SL Roots so how do you do that in react well the way to do that in react is to set up something known as the react router now this is another package that you need to install so what we're going to do is shut down our
49:30 - 50:00 server by hitting contrl C if you hit control C that will close the web server and then you're going to type npm install react-router-dom okay if you install react router Dom then you're going to be good to go to follow along with the rest of what I'm going to show you okay so we're going to say npm install react router Dom that will get installed now it'll get added into our package.json and in our node modules folder now what we want to do to set up our react router is the following so we want to go into
50:00 - 50:30 our main. jsx file and we just need to wrap this app component with something that provides the ability to Route okay it's something known as a context but we don't need to get into that too much so we're going to say import and we're going to import the browser router from and this is the react router Dom okay this is another component one that's not built by us and we can say browser and then we can just take our app and we can put it inside of here now when we
50:30 - 51:00 put the app inside of this what it does is it gives us the ability to change components that we're rendering on screen based on the slash route that we're going to for our web page okay so you just need to wrap the app component in order for what we're about to do next to work okay so now that we've wrapped it in main. jsx we're going to go to app.jsx now inside of app.jsx we can create a router and this router can allow us to Define where we should go go and what component we should display based on the slash root that we go to
51:00 - 51:30 okay so what we're going to do is we're going to just Define a main here okay and for the main we're just going to say class name is equal to main Das content and we're going to Define this Roots okay now we need to import Roots so we're going to say import and we're going to import roots and root from and then this is going to be dot slash or sorry not slash just react router do
51:30 - 52:00 okay now inside of these roots we can Define each individual path or rout and then we can have like you know slash favorites or slome or whatever mapping to a component that we want to display on screen so it's really quite simple we can define a root like this okay we can just end it in line for the root you're going to define a path so in this case we can just Define the default path and we can say that this maps to the element and that element is the home component
52:00 - 52:30 okay that's it so we're just saying hey we want to go to the SL path the element we want to display when we go to slash is home so all that means is we're just going to display that component on screen okay and then we can do the same thing here for favorites so we have SL favorites and then rather than the element being home this will be favorite or yeah did I call it favorite or favorites okay so this should be favorites so let's just fix that name and then we can display the favorites component and notice this automatically
52:30 - 53:00 got imported for me from Pages SL favorites okay so now if I refresh this uh we need to make sure we rerun our server story because I shut it down so we're going to type npm runev again reload refresh okay and if I change the rout up top here it' be slash favorites like that notice that it brings me to the favorites page and then if I change this to just be a normal slash it brings me back to home okay so this is how you set up a basic router you can add as many paths as you want here you can also have nested paths but
53:00 - 53:30 we're not going to get into that complexity Here and Now what we're going to do that we've done this is we're going to create a simple nav bar we're going to render it inside of this component so we have a way to switch between the homepage and the favorites page okay so let's make the navbar component we're going to start going a little bit faster here guys I know it's been slow but I just want to make sure I cover everything okay so I'm going to make a new file inside of my components and we're going to call this navb bar. jsx now inside of Navar this is just going to act as a nav bar it's going to be
53:30 - 54:00 very simple so let's close some of this so it's easier to see we're going to start by making our component so we're going to say function Navar all right for the Navar we're going to return a nav element okay this is going to be class name equal to navbar and then we're going to have a div okay now we're going to say class name is equal to and this is going to be the navbar dbrand brand okay and we're going to put a link now
54:00 - 54:30 this link comes from react router Dom so you can see the import got added me added for me it says import link from react router Dom this acts like a normal hyperlink except to something on your own web page so we can say link to is equal to slash and then inside of the link we can just put any text we want so we can say something like you know movie app okay this will be on kind of the left side of our Navar then we can have another div we can say the class name here is equal to kind of uh navbar D
54:30 - 55:00 links okay we can then specify link uh this needs to be in capital story so let's fix that for the link we're going to say two equals slash and this is going to be class name if we spell this correctly equal to and this is going to be nav dlink and then this one is going to be home and then we can copy this paste it and change this so we're going to favorites and then this will say favorites like
55:00 - 55:30 that okay so now we've created nav bar we're going to export the nav bar so we're going to say export default navbar and we're going to throw it on our web page to do that we're going to go to the home component we're going to import it so we're going to say import or sorry not the home component my apologies guys we're going to go to the app component because we want this display uh to display Sur for the entire web page not just our homepage and we're going to say import navbar from do/ components SL
55:30 - 56:00 navbar okay now we're just going to make another div okay we're going to wrap this whole thing in the div and we are going to render our Navar okay so now if we save you can see that we have a MAV nav bar up here doesn't look great it says movie app home and favorites if I click on home brings me here click on favorites brings here home goes here the movie app goes to home and you can see that we can navigate by kind of clicking on these
56:00 - 56:30 links okay so if you want to navigate uh from some kind of link you can use this link there's other ways to programmatically uh navigate when you press on a button or something like that again you can look that up we don't need that right now but I just wanted to make a simple Navar and you can see how we've kind of separated things out now and when we look at our main app component it's quite simple and it's very easy for us to figure out where code lives inside of Home inside of favorites inside of navbar you can see it's very clear to kind of figure out what's going on so now that we've looked at some simple
56:30 - 57:00 page navigation I want to get into doing a little bit of styling just so the web page looks kind of decent and then we're going to add all of the logic in terms of actually displaying the movies again I know it's slow I promise we're going to get there we've just kind of setting up the the base here and I'm teaching you step by step the important Concepts okay so what we're going to do is we obviously want to make this look nice now if we go to our files you can see that we have kind of app.jsx main. jsx Etc and we have these stylesheets inside of here this is just some default styling that came with the template and
57:00 - 57:30 you'll notice that if we go to main. jsx for example we've imported index.css and that just means that we're actually going to load this stylesheet and if we've gone to app.jsx we've imported app.css so it's common to have a different stylesheet for each one of your components named the same thing as that component but what we're going to do for now is we're just going to make a new folder called CSS and what I'm going to do is I'm just going to provide you all of the styling for this web page so we don't need to write it from scratch
57:30 - 58:00 because it just takes a really long time and it's really not the purpose of this tutorial so I have it all in a file on my local computer but all of these files that you see are going to be available to download from the link in the description so you can go to the GitHub page and within GitHub you can look at the same directory structure all the code in this video will be here and you can just go to the CSS folder and you can simply copy all of these files you can just download them as a zip folder or you can kind of copy them one by one and paste them into your computer uh however you want to do it but what you want to do is just take all these files
58:00 - 58:30 they're going to look exactly like this and you just want to put them inside of this CSS folder so I'm going to do that just so we get app favorite home index movie card and navbar all inside of CSS so bear with me while I do that okay so you can see that I've added all of these files and I'm just going to remove the index.css and the app.css from my project because now I have new ones inside of this CSS folder now when I do that if we refresh here we're going to get an error saying that it can't load the app. CSS because well this doesn't exist anymore so we just need to change
58:30 - 59:00 these Imports to import from docss app.css and then same thing in our main. jsx we're going to change this to be docss index.css okay so now you can see it kind of gets fixed a little bit now there are some more Styles sheets we need to import so from our components we're just going to import them so from navbar we're going to say import and this is going to be/ CSS navb bar. CSS okay uh why is it saying
59:00 - 59:30 that doesn't exist it's because navbar has a lowercase b okay let's fix that and sorry this should be do docss slnb bar. CSS okay now you can see the Navar kind of looks a little bit better we're going to go into home and we're going to import this so we're going to say import and this going to be dot docss slome docss okay we're going to go to favorites same thing we're going to say import and then dot do/ CSS slash favorites or what did I call it yeah favorites. CSS okay now you can see it
59:30 - 60:00 kind of looks a little bit better and do we have anything else yes we have the movie card so let's go to our movie card and let's import this and to say import do docss movie card. CSS okay so now things look a little bit better if we go back to home you can see the movie cards are kind of appearing here uh I know they don't look ideal because we don't have the images but they are showing up and if I make this larger you can see that it kind of scales and we get like this nice row grid system you can read the CSS if you want but I just wrote it all
60:00 - 60:30 for us so that we don't need to kind of go into all of that okay perfect so that's that for the styling now that we've got the styling done we want to get into some of the complex stuff where we actually start fetching these movies from an API this is going to allow us to show a lot more complex behavior and for me to talk about something known as use effect which is something that we can kind of run right when the component loads so basically what we want to do is from our homepage here we want to display a list of movies but we don't
60:30 - 61:00 want to just have to write the movies like this we want to actually get them from a real source so we're going to use a publicly available API that contains a bunch of movies and we're going to grab the most popular movies and simply display them then we're going to use the search feature from that API to search for movies and to display those search results okay so let's go ahead and do that um you're going to learn a lot here and this goes really Beyond a lot of the beginner tutorials that you'll see on YouTube commonly that cover this stuff so as I mentioned what we're going to do now is use an API to fetch all of our
61:00 - 61:30 movie data so that we don't have to manually display our own movies now the way that we can do that is we can go to this website right here called the movie database. org I'm going to leave a link to this in the description now this has a free API that we're able to use but in order to use the API we need to get something known as an API key so what you're going to do is go to this page you're going to create a new account should be up from the top right hand corner here you can see I'm signed in as techim 123 it's free just make sure you confirm your email address and then what
61:30 - 62:00 we're going to do is go to the settings okay so make a new account go to settings from settings we're going to be looking for our API key so to find this we can go to API okay and then notice my API key is just showing here I'm going to delete this account after so don't worry about that anyways what you're going to need to do in order to get access to the API key is fill out a form so there a very uh short form it doesn't really matter what you put there you can just put any information that you want and just accept the terms uh and conditions once you do that it should give you access to
62:00 - 62:30 this API key it might take a minute for it to be approved and then you can just copy the key okay so we're just going to copy this key from this page again you go to API fill out the form just wait a second and it should give you this key okay now what we're going to do is we're going to go and we're going to create a new folder so rather than just having all these we're going to go in source and we're going to create a folder called Services now inside of here we're going to make a new file called api.js now notice that I didn't use jsx I'm
62:30 - 63:00 just using JS because I'm just going to put some normal JavaScript functions in here which are going to be responsible for calling our API it's usually good practice to create a separate file that contains all of your API calls so that you can keep kind of all the networking operations or stuff related to the API in a separate file and find it easily okay so we're going to create that file and inside of here we're going to Define two variables now we're going to do these in all cap Capital I'm going to say const API key is equal to and I'm going to paste the API key I just got
63:00 - 63:30 and then I'm going to say const and then basore URL is equal to and I'm just going to specify the URL here now I'm not going to walk through all of the details of the API and kind of how it works and how you find all these endpoints but pretty much with this movie database API you're able to do things like search for movies get details on movies list all of the popular movies and we're just going to be using two op operations specifically the first operation is going to be searching for movies and the second is just going to be displaying today's
63:30 - 64:00 popular movies now this is the base endpoint or the base URL for this API so if we want to send a request we send a request to this URL and then slash and then whatever the operation is that we want so SL search or slash poopular or something like that okay so we specify these two in variables and now we're going to create some functions which will perform those two operations so the first thing I want to be able to do is I want to get the most popular movies so I'm going to export this function so we can use it somewhere else and I'm going
64:00 - 64:30 to say export const and then this is going to be get popular movies and this is going to be equal to async and then I'm going to have a function and inside of here I'm going to write a request okay now the async function just means that this is asynchronous and it's going to take a second before we get the result so we need to put this keyword here so that we can await this function in our components which you'll see in a minute the basic idea is we're going to write the code here but then inside of our components we're going to call these functions wait until we get some result
64:30 - 65:00 and then we'll display that result as the movie is on screen okay so here we're going to say const response is equal to and we're going to say wait fetch okay now fetch is a function that you can use to send a network request in this case we're going to be sending a request and we're going to use the back tick actually and we're going to embed inside of here the base URL okay so we're using back ticks we're saying that we want to have the base URL slash movie okay slash and then this is going to be
65:00 - 65:30 popular and then we're going to have question mark API unor key is equal to and we're going to embed inside of a variable our API key okay let me just format this and make it smaller so you guys can see it okay so this is how you send a request to this particular API you specify the base URL which is this and then we said okay we want to send to slov SL poopular just gives us the popular movies and then we need to give API key um to confirm that we're authorized to send this request okay so
65:30 - 66:00 now what we're going to do is say const data is equal to response uh. Json and we actually need to await this because this is an asynchronous operation and then we're going to return the data do results okay so inside of data it's going to contain a key that says results the results is going to contain a bunch of movies and those movies will have things like a title a release date and an image which we'll look at in 1 second so if if we were to actually call this function you would see that it would take you know half a second a second depends on how long we're not exactly
66:00 - 66:30 sure it's going to fetch the result we're going to wait until we get the results we're going to grab the Json from that and then we're going to take the results and return that from this function okay now we're going to do pretty much the same thing here but now we're going to do search so rather than get popular movies we're going to say search movies this time we need to take in a parameter which is what we're searching for which will be our query and we're going to change the end points rather than movies SL poopular this is going to be/ search slov and then as
66:30 - 67:00 well as our API key we also need to add at and then we're going to say query or sorry and query is equal to and then we need to specify a variable here and this is going to be the encode URI component and then query okay let me just format this so it's a little bit easier to read okay so what we're doing is the exact same thing as before except now we're specifying a query this query is what we actually want to search for I'm not going to explain exactly why we need this but we need to take the query we need to encode it as a URI component so
67:00 - 67:30 it just removes any uh anything from this string that we can't pass in this URL and then we will be able to get the results and it will tell us you know all of the movies that match that title okay perfect so that is our search movies and our get popular movies and that's it for our API file now we can simply use the functions that we defined inside of here okay so let's go into home and let's learn about a new thing called use effect which is going to allow us to actually use these functions okay so we're going to start by going to the
67:30 - 68:00 Imports here and we're just going to import the two functions that we need so we're going to say import and this is uh what did we call it search movie let's just go back to the file because I forgot what I called it uh we called it search movies and get popular movies okay so we're going to say search movies and get popular movies and this is going to be from do doservices API okay now if we just want to grab all of the movies if you're new to react you might think that what we can do is just
68:00 - 68:30 set our function so con or sorry set our variable const movies equal to something like get popular movies you might think okay that'll work right I can just call this function then it will give me all of the movies now while this will actually work what will happen is this function will be called every single time that anything in this component changes now that's not ideal because we don't want to constantly be fetching movies every single time one really the movies haven't changed and there's no reason to fetch them again there's a lot of times where we want to do something
68:30 - 69:00 maybe once right when this component is rendered on the screen but if any updates happen to the component and we render it we don't want to actually be doing this operation again so this is where I'm going to show you about something called use effect now use effect allows you to add side effects to your functions or to your components and Define when they should run in our case we just want this to run the first time that this component is rendered so as soon as it appears on the screen we'll fetch all of the movies and display them
69:00 - 69:30 okay so let me show you how we do that so I'm going to bring in this use effect Hook from react okay and what we're going to do now is rather than just having this movies variable we're actually going to store our movies in state so that it persists okay so we're going to say const and this is going to be movies and then set movies and this is going to be equal to use State for the state this is just simply going to be a list okay so let's just format this okay so now we have movies set movies
69:30 - 70:00 we're storing this in state so that any time we update the movie's list it will automatically render the component for us now what we want to do though is we want to write a use effect so the way that use effect works is you write use effect as a function and then you put a function inside of here that you want to call when this array changes okay I know this seems a bit weird but pretty much we pass a function and then we pass what's known as a dependency array now whatever we put inside of the dependency
70:00 - 70:30 array we're going to check it after every single render and if it's changed since the last time that we rendered we'll run this use effect now if there's nothing here that simply means we're just going to run this one time initially when this component is rendered on screen okay so dependency array anything inside of here if any of those values change we will run the effect again if you don't have anything inside of here it will just run one time right when this component is rendered on screen then when any state changes occur
70:30 - 71:00 this use effect will not run because nothing's changed in the dependency array okay so this is useful because sometimes if some State changes for example you want to run the use effect again if that's the case you can put the state change inside of this um dependency array or put the state inside of the dependency array and if it's updated then it'll run the use effect there's a lot of complex stuff you can do here but for now if you just want to run something once you write it like this now this is very common when you want to for example call an API right when the component renders you want to
71:00 - 71:30 call an API fetch some data that's exactly what we're doing and why we're using the use effect okay so what we're going to do is we're actually just going to write a function here called load popular movies okay and this is going to be equal to an Asing function and inside of the Asing function we're going to try to get our movies so we're going to say try and we're going to say const popular movies is equal to await and then get popular
71:30 - 72:00 movies okay get popular movies is the function that we wrote here now we need to await this because this is an async function so we're just waiting uh until we get the result then we're going to say set movies and we're going to set popular movies okay so we're going to take the popular movies and we're going to put them in the state now what we also want to do here is we need to have a catch okay and a finally block so we're going to catch some error and and we're going to say finally because I want to set up some other state as well so it's very common practice when you're
72:00 - 72:30 loading something from an API that what you do is you set up two variables or two pieces of State one to store the L the loading State sorry so if we're currently loading data and one to store any error that potentially occurred when you were calling this API so what we're going to do is set up some more State we're going to say const error and then set error is equal to use State and then for now this is going to be n we're then going to say const loading and set loading and same thing
72:30 - 73:00 this is going to be US state but this time we're going to set it as true now we set it to true because right when we load in this component we're going to be running this use effect so we're going to be loading data and then inside of the use effect we're going to set loading equal to false when we're no longer loading so inside of the finally I'm going to say set loading false because whether we had an error or not well we are no longer loading so we'll just say hey we're no longer loading and then inside of the error here we're going to say set error and we're just
73:00 - 73:30 going to set this equal to failed to load movies dot dot dot and we're just going to console.log the error so that we can debug this if something is going wrong okay so console. log ER perfect so that's going to load our popular movies but we need to call this function so inside of the use effect we're going to say load popular movies like that and now what should happen is when this component is render it it calls the API and it loads our movies now you can see that that's actually happening if we
73:30 - 74:00 scroll through here we're not seeing the image but notice that there's a bunch of movies now that are popping up on our screen so before we go any further what I want to do is just display the image of the movie so obviously it looks a little bit better so to do that we're going to go into our movie card now in the movie card we're just going to change this a little bit so that we display the uh correct image so for our image rather than displaying movie. URL we're going to display the following okay inside of back TI this is going to be https
74:00 - 74:30 colon image. tmdb okay let's spell this correctly. orgt pw500 and then we're going to have the dollar sign and then movie. poster uncore path okay now I know this is kind of random but this is just how you get the image Okay so this is the URL that you need to put for the source and when we do the movie poster path then it will give us obviously a different image for
74:30 - 75:00 all of the movies so please just specify this again you can find the code Linked In the description okay another thing that we're going to do is notice that we have this like 2024 d10 d222 I just want to make this look a little bit nicer so for my movie release date I'm just going to add a question mark then do split at The Hyphen and then I'm just going to take zero okay okay now when I do that it's just going to display the year for me uh which is what I want now if you just if you want the month as well and
75:00 - 75:30 the day then you can do that but I just want to display the year uh for the movies right now okay so let's go back to home and notice now that we're loading our movies using the use effect this use effect only runs when this component is rendered so if I change something like I like one of these images or even if I start searching for something we don't call this again so now what I want to do is I want to actually display the error state if we do have any error and I want to display the loading State as well so that we can see if this is currently loading so what
75:30 - 76:00 we can do is we can go here to our movies grid and we can start doing some conditional rendering so what we're going to do is the following we're going to say okay if we are loading question mark then we're just going to display a paragraph tag or actually we can display a class name or yeah sorry this is going to be a div with a class name equal to loading okay and then inside the div we can just say loading dot dot dot
76:00 - 76:30 okay and then otherwise we can display the movies grid okay so let me just put the movies grid here and let me format this and this is what I want so if we're loading we want to display loading otherwise we display the movie grid now I also going to have some text here and I'm going to say error and and and then this is going to be div class name is equal to error-message message okay we will end the div then inside of here we can just display what the error message
76:30 - 77:00 is so if there is an error it will appear uh and yeah that's how it works now notice if I refresh here that it kind of takes a second and then these movies fade in the API is actually very very fast you don't really see the fact that it is loading but it is loading for like a split second and then the movies appear on screen okay perfect so that's looking good to me so far but now we want to make the search field actually work so so how are we going to do that um let's figure that out okay so inside of handle search what we need to do now
77:00 - 77:30 is rather than just displaying what the user typed we want to actually go and use our search API feature so we're going to get rid of this alert and we're going to go down to after e. prevent default and the first thing I'm going to do is just make sure that the user's searching for something that's not an empty string because technically they can just use a bunch of spaces here in the search field and we don't really want them to be able to search if it's a bunch of spaces so to do that I can say if not search query so let's fix this do
77:30 - 78:00 trim then return now trim just removes all of the spaces from the string uh sorry like all the leading and trailing spaces not ones in between the words so it removes all those for us um so we can make sure that they actually have some characters in The String now if that's the case and we're actually good we do have some characters and we're able to search we're going to say set loading equal to true just so that we can indicate on screen okay we're currently loading the results now we're also going to make sure that we aren't doing this if we are loading so we're going to say
78:00 - 78:30 if loading then return so this way it won't allow us to search when we're already searching for something else perfect now after set loading we're going to do the same thing that we did before with this try catch and finally block okay so in the finally we're always just going to say set loading equal to false because whether it failed or was successful we're no longer loading in the C same thing we're just going to say set error and we're going to say failed to search
78:30 - 79:00 movies dot dot dot and then we can just console. log RR okay now in the try we are going to search for our movie so we're going to say const search results is equal to and then this is going to be await search movies and then we are going to pass inside of here our search query now we're getting an error with a waight that's because we need to have an async function here in order to use this keyword so we can just change this function to be async and now it should
79:00 - 79:30 work okay now after we get our search results we'll just say set movies and then this is going to be the search results and then we're also just going to say set error and then null so that if we did have an error before then we clear that error when we load it this time okay so hopefully that makes sense but that should actually be all that we need for this search if we want want we can then set the search string to empty after we press the search button but we don't need to do that it's up to us if
79:30 - 80:00 we want to set it to empty or not so I'm not I'm just going to leave it the same okay so let's go here and let's search for a movie like Terminator Okay and when I press search you can see it takes a second it's loading and then it shows me the Terminator movies on screen and notice if we make this bigger we can see them kind of all in a row here for some reason some of them don't have images but most of them do okay perfect so that is that we're now loading data from the API let me try to get this back here on my screen okay and what is next well I
80:00 - 80:30 believe what we need to do next is we need to make this favorite button work and in order to make the favorite button work I actually want this to persist across runs of my application so right now for example if I refresh like the whole state of my application just resets back to what it was at originally but what I want to do is I want to actually store the movies that we favor that we select as one of our fav permanently now in order to do that I'm going to show you how we can store the movies that we favored it in something
80:30 - 81:00 known as local storage this is storage kind of contained within your browser and I'm going to show you how we can use something known as a react context so in our current example here we have some state right now this state really only matters when we're on the homepage if I change over to the favorites page it doesn't really matter and we don't use it right it's just relevant to the current page that we're on however some sometimes and in this example we have state that we want to have on both the favorites page and the homepage or in
81:00 - 81:30 multiple places in our app now if that's the case there's different techniques for kind of sharing this state between different pages or different components but a way to do this that's a lot friendlier than something known as prop drilling which means kind of taking the state and just constantly passing it through props of different components you're rendering is to use something known as a context now a context will allow state to be globally available to anything that's within the provided context I know this doesn't make a ton of sense right now cuz I'm not showing you an example but in this situation we
81:30 - 82:00 want to know what movies are our favorite when we're on the homepage as well as when we're on the favorites page the reason for that is that each movie is going to have like this little heart icon right and we want it to be red if it's favored and we want it to be white if it's not favored so on the homepage or in the movie component we need to know if this movie is a favorite and then on the favorites page in a different component we also need to know if the movie is a favorite we need to know what all of the favorites are so how do we do that
82:00 - 82:30 because we have the same state and we need that on two different pages so that's what I'm going to show you kind of how we fix here okay so what we're going to do is we're going to make a new folder called context okay now inside of here we're going to specify the favorite context I think that's what I called it or no let's actually go with movie context okay jsx now what we're about to write here is not necessarily a component even though it kind of looks like one what it's
82:30 - 83:00 really meant to do is provide some Global State and some helper functions that we can use from multiple places within our application so this is kind of the state manager for our favorite movies that's the way that we can think about it okay so we're going to start by importing create context okay use State use context and use effect for from react okay then we're going to create a context so we're going to say const
83:00 - 83:30 movie context is equal to create context now we're going to say export const and then this is going to be use movie context okay and this is going to be equal to a function and this is going to have the use context hook and it's going to use the function that we're about to Define so we're going to say export const movie provider is equal to a function and then
83:30 - 84:00 we're going to put the movie context here okay so I know I went fast here but what's going to happen in a second is we're going to write this movie provider now this provider is going to provide state to any of the components that are wrapped inside of it so what it does is it just kind of sits on top of them or around them really and it allows them to hook into or get access to specific functions or specific State when they need to use it so what we're going to do is we're going to wrap our entire app in this movie provider
84:00 - 84:30 context which you're going to see in one second and that's going to allow the entire app to have access to some state that we Define now before we go any further I can show you an example of this already working so if we look in main. jsx here notice that we have this browser router now this browser router acts like a context that will then take the entire application and give the whole app access to the ability to use the slash Roots right to go to different pages to navigate in the application now
84:30 - 85:00 that's not exactly how it works but you can think of it like that so what we're going to do is we're going to write our own feature just like that our own movie context we're then going to wrap the app in that movie provider or that movie context so now any of the components in our app can access this state and they can see for example what uh movies are our favorite so what we're going to do is we're going to take in what's known as children now children is a reserved prop when you write a component and children is anything that's inside of
85:00 - 85:30 the component that you rendered now for example the browser router has children equal to app because we put this app component inside of the browser router so even though we didn't uh manually Define hey like you know children is equal to this because the app is inside of the component it becomes a child and gets added to this children prop so what we're doing is we're defining this children property and then we can use that and anything that's put inside of
85:30 - 86:00 this provider will be treated as children so what we're going to do here is we're going to say return and then this is going to be movie context. provider okay and inside of here we're just going to render our children okay so now what we can do is we can start defining all of the logic and the state related to our favorite movies so we're going to create some State and we're going to say const favorites and then set favorites if we can write this
86:00 - 86:30 correctly is equal to use State and inside of here we can just write a component like we normally would the only difference is what's going to happen is anything that's inside of here so any of the children will just have access to all of the state that we provide inside of this component okay this is really referred to as a context but you'll see how it works as we keep going I understand it's very confusing right now because it does require a more advanced example now what we're going to do is we're going to use something known as local storage local storage just
86:30 - 87:00 allows us to store values directly within our browser uh and we can just store strings okay so what we're going to do is we're going to have a use effect and the first thing we're going to do is we're going to look inside of our local storage and see if we already have any favorite movies so we're going to say cons stored and then this will just be faves is equal to to local storage. getet item and we can store items based on different string Keys
87:00 - 87:30 okay so we're going to use the key favorites in our local storage and uh that's what we're going to look at so we're going to say hey we want to get the item favorites and we want to see if there are any um favorite movies currently in there so we're going to say if stored faves so if there is actually anything inside of there we're going to say set favorites and we're going to set this equal to json.parse and then the stored faves now what we're doing is we're actually going to store our information or all of our favorite movies in a list and that
87:30 - 88:00 list uh is going to be converted first into a Json string so we're going to store it as a Json string in local storage because local storage can only store strings so then when we want to actually read it in we're going to convert it from the Json string which is simply a list or an array back into a real JavaScript object which is what json.parse does and then set that as our favorites I know that's a little bit confusing but pretty much we'll take the string so it's going to be like this like a string with a list of IDs of our favorite movies and we just want to
88:00 - 88:30 convert it into a normal S I keep saying list but I mean array so that's what json. parse will do okay so that's the use effect now we also are going to have another use effect and for this use effect we're going to use this dependency array and we're going to say favorites and we're going to say local storage okay do set item and we're going to set item favorites equal to Json but this time it's going to be stringify the
88:30 - 89:00 favorites okay so what we're saying here is anytime this favorite state changes we want to update what we're storing in local storage so that's how this use effect works it only runs when the favorites changes so anytime we add a favorite or remove a favorite this use effect Hook is going to run and then we're going to set in local storage the favorites key and we're going to be storing the um new kind of version of our favorites all right now we take the favorites which is an array and we
89:00 - 89:30 convert it into a string so that's why here we need to do the reverse operation where we take the string and we convert it back to an array okay so those are our two use effects but there's three main operations that we need to have inside of here one operation to add to the favorites obviously one to remove from the favorites and one to check if something is a favorite so we're going to say const add to favorites is equal to we're going to take in a movie and we're going to say set
89:30 - 90:00 favorites now if we're dealing with State here and we have something like an array like a mutable type and we want to actually add a new value into the array it's not as simple as me just doing what I would normally do in JavaScript and doing something you know like favorites. push if I do this it's not actually going to update the state because we need to use this function to update the state so the react knows that the state was changed so what we can do if we want to get access to the previous value of the state so what it's currently equal
90:00 - 90:30 to and then adjust that is we can do something like this I can say prev okay this is going to give me the previous value and then I can use the previous value so I can say dot dot dot previous and I can simply add inside of here my movie okay so we say all right take the previous value this is all of our favorites currently so either an empty array or any of the favorites we have we're going to get all of those put them inside of here and we're going to add the new movie this is how you update State when you're doing it with an array for example and you want to add a value
90:30 - 91:00 to the array okay so that's all you need to do to add favorites but now we want to remove Favorite so we're going to say remove from favorites okay same thing we're going to take in this time a movie ID and what we're going to do is say set favorites same thing we need to take in our previous okay and then we're going to say previous do filter and we're going to say movie and then movie.id does not equal movie
91:00 - 91:30 ID so all this is doing is generating a new array for us where we only contain all of the movies that are not equal to the one that we want to remove so we're going to say const is favorite okay we're going to take in a movie ID and then we're going to say return favorites. sum this just just tells us if one of these conditions is true and we're going to say movie and then this is going to be movie. ID is equal to
91:30 - 92:00 movie ID okay so this just checks all of the movie IDs in our favorites sees if one of them are equal to the movie ID that we're looking at if it is we return true otherwise we will return false okay now we wrote these three different functions and we also wrote this state but if we want this to be accessible to any of the children that are wrapped inside of this provider then we need to provide a value in the provider so what we can do is we can say const value is equal to and we
92:00 - 92:30 can specify in a JavaScript object all of the values that we want to provide to the children so we can say favorites add to favorites remove from favorites and is favorite now I can say value is equal to Value okay this is a keyword that you can provide in your provider and now anything that's inside here can access all of the values inside of this object okay so we just created this react
92:30 - 93:00 context again I appreciate that this is not the clearest example in the world hopefully it's making a little bit of sense though we're defining all of the state that we want to be globally available to anything inside of these children and now all we need to do is use this context and when we use the context we're able to kind of hook into it and grab all of this Global State okay so how do we do that first of all let me just save main. jsx and let me go here to app.jsx because I'm going to wrap this in my context okay so for app.jsx we're going to import the movie
93:00 - 93:30 provider so I'm going to say import and then this is going to be movie Provider from the movie context okay and then rather than having a div I'm just going to specify the movie provider and then slash movie provider now that's it so now that I've wrapped this I can access that state from any of the components in here so first we're going to go to our movie card okay so in our movie card we're going to start using some of that state in order to
93:30 - 94:00 update our movies and favorite them because right now we're just saying hey we clicked on them we don't want to do that we actually want to update and say yes we are um you know favored it okay so what we're going to do is we're going to say import and this is going to be use movie context from the movie context then we can say const is favorite add to favorites and remove from
94:00 - 94:30 favorites from the use movie context sorry is equal to the use movie context okay so again if we just go to this here you can see that we have this use movie context we're using this context and now what I'm able to do is when I go here and I call this function it pretty much just gives me access to all of these different values now if I wanted the favorites as well I could get the favorites I don't need to get get all of them but I can just take any of the values that are provided here in this provider okay that's how it works so we
94:30 - 95:00 made this provider we wrapped all of our content with it and now from any component as long as it's inside of there and it is because we wrapped the entire app in it we're able to grab values by using this hook so you say hey I need some State okay so I'm going to grab all the piece of state that I need from use movie context now these are functions that will then update the state in the context so anywhere else globally in our app we have access to those changes now first thing we're going to do is just say const favorite is equal to is favorite and then we're
95:00 - 95:30 just going to pass the movie.id now this is simply going to tell us if we are currently favored or not and if we are favored we want to actually change one of the classes on our button to make it red okay so we're going to have favor button and then we're actually going to change this to be back ticks and when we do that we just need to specify the brace here because this is going to be an expression and then we're going to do a space and we're going to write an expression inside of a variable we're going to say favorite if that's true
95:30 - 96:00 then we want to put the class active otherwise we want to put an empty string okay so we're just saying hey if we are favored it add this active class to the class name so then this will become red okay now inside of our on favorite click we just need to make it so that if we're currently favored we unfavored this but if we're not favored then we favored it so we're going to start by saying e we're going to take an e here we're going to say e do prevent default just prevent the default behavior of the
96:00 - 96:30 button we're going to say if favorite then we're going to remove from favorites the movie.id otherwise we're going to say add to favorites the movie okay so we're going to save that and refresh and now we should see if we press on this button that it gets highlighted in red and notice it's stays red same with this one if I press it again it goes from red to White okay now that's great but we don't
96:30 - 97:00 actually know if the favorite state is being updated properly until we start displaying it on the favorites page because right now we're not displaying that so what we're going to do is we're going to go to favorites okay and inside of favorites we're going to render a grid of all of our favorite movies but only if we have any okay so let's go into the favorites page and we're going to start by grabbing our favorites so same thing as before we're going to say import and then this is going to be the use movie context okay we are then
97:00 - 97:30 also going to say import the movie card from our components and we're going to go up here and we're going to say const favorites is equal to the use movie context like this okay now what we're going to do is we're going to say if favorites then we want to return and
97:30 - 98:00 we're going to return a movie's grid and in fact what we can do is we can go to our homepage and we can just copy what we're displaying here so you can see we have this movies grid so let's copy that let's bring it to favorites paste it here but rather than movies. map we're just going to say favorites. map okay because we're going to map all of our favorites not all of the movies otherwise we can display this and I think that should actually be good but I'm just going to wrap this in one more div actually just so that we can have like a nice header so I'm going to add
98:00 - 98:30 another div and I'm going to say H2 and we will just say your favorites okay like that and then we'll just add a class name here I'm going to say class name is equal to favorites and that's fine okay and let me just format this so it looks a little bit nicer sweet so now let's go to our favorites and you can see that it shows us our favorite movies and if I unfavorite one of them gets removed unfavorite gets removed and you see that
98:30 - 99:00 it's showing up here now this is quite large this is larger than I was expecting it to be uh but that's fine I probably just messed up some CSS somewhere so if I add a few more favorites and we go back here you can see now the favorites are appearing in our grid sweet so that is pretty much it I mean that's going to wrap up our application I taught you guys a lot of stuff about reacts here we went through use stay use a fact calling apis we went through context we went through jsx conditional rendering setting up the react application error handling loading
99:00 - 99:30 States a lot of stuff in this video and I recognize that not all of this is going to be 100% clear but I wanted to try to teach you as much as I possibly could as fast as I possibly could so all of this code will be available from the link in the description if you appreciate this video make sure to leave a like And subscribe and I will see you all in the next one [Music]