‫It's time to set up our next project.
‫So we're building a lot of projects, here,
‫which is exactly what you need
‫to become the React developer that you want to be.
‫And, by now, you already know the drill,
‫so just fire up your terminal,
‫or your command prompt if you are on Windows,
‫and then simply navigate to the folder
‫that you want to build your next project in.
‫Then type npx create-react-app
‫at version number five please.
‫And then the name of the app, which is usepopcorn.
‫So what might that be?
‫That's a bit of a strange name.
‫So let's, actually, check it out right now.
‫So this is the usePopcorn app,
‫and if you want, you can go explore it right now
‫on your own at usepopcorn.netlify.app.
‫So it's called usePopcorn
‫because this application is all about movies
‫and maybe you see that this prefix, here, of the name
‫is this keyword of use
‫and that reminds you maybe of the useState name.
‫So the name of the useState hook.
‫And so that's because we will build this project
‫over this section and even to other sections,
‫and it is going to be all about hooks, basically.
‫And so that's a hint to that, here, right in the name.
‫But anyway, here in the search bar,
‫we can now search for movies.
‫So let's say one of my all-time favorite movies
‫called Inception,
‫and this is now loading these movies here from a real API.
‫So we're doing some real data fetching here.
‫Then we can click on any of these movies,
‫which will then take us to this display overview here.
‫Then we can rate the movie.
‫So you see that we have this nice rating component,
‫and this one is definitely a 10.
‫Then it asks us
‫if we want to add the movie to our watchlist.
‫And as we say yes, then you see that the movie
‫has, indeed, been added to our watchlist here.
‫Let's say we also saw this one here, maybe it was a seven.
‫Then let's also add it to our list.
‫And you see now we have both of them.
‫And up here we have some statistics about our watchlist.
‫We can also delete movies from here.
‫So, maybe later,
‫I remembered that I didn't actually watch this one,
‫so let's get rid of it.
‫And, yeah, so another thing is that, when we click here,
‫on a movie that we already rated before,
‫then you see that here it no longer displays
‫that rating component but our actual rating,
‫then we can always go back by clicking here
‫or we can also just hit the Escape key.
‫So that also works.
‫So that's another small feature right there.
‫And, yeah, that's actually it.
‫So a very small application,
‫but, again, with real data fetching.
‫So that's going to be something really nice
‫that we're going to do for the first time.
‫So this app, here,
‫might feel already a little bit more real because of that.
‫Now, as I said,
‫we will build this throughout three sections.
‫And so, in this first section,
‫we'll only work with static data yet.
‫So this list of movies here is not yet coming from an API.
‫It's just an array of objects
‫as we have been working with before.
‫The only thing that works here already is at the state here,
‫so we can like collapse these two lists here
‫and we can also already write something here
‫into this search bar.
‫But, besides that, in this section,
‫we are more concerned about the component part.
‫So, basically, creating this layout that we see here
‫and also talking a bit about component reusability
‫and component composition.
‫And, with that being said,
‫let's actually move on to the next lecture
‫where we will learn a bit more
‫about how to think about components.