Okay, we have our layout ready or prepared for our for the things that we'll need to do.
But let's see in this video I'll focus on the movie list.
So we need to create a movie list and we'll need to prepare our application for it.
So what I can do is I could start doing that here, but we can also create a new component and load
it here.
So I will inside the source I will create a new folder and I will name it component.
And inside the components I will create a new file and I will call it movie dash list.
And then js x.
So basically that's the JSX file.
And what I can do is I can for now I can copy all of what I have in app.js and I can put it here.
So basically we don't need this one.
We will have a function that will be our functional component.
And I will name it movie list like this.
And we don't need that classes name.
We'll just leave whatever we have there.
I could write it on my own, but it will be faster to copy like this.
So basically we have our movie list component here and we need to also return it.
So export export default movie list.
We can also do it that here it doesn't matter.
So it will be one kind of liner.
So we have our component movie list and that will display only the headings here.
So movie list.
Once we have that component what we can do is instead of having that movie list here, what I can do
is I can display that component there.
So what I can say is I can import that component.
So import movie list and it will help me finish this.
But basically import movie list from component folder movie list.
And once I have that what I can do is I can replace that with movie list.
And I need to do slash.
So that means I will finish this.
So if I will save it here, if I will go here.
You see, I still have that movie list there, but it's coming from the component.
That means I can go here and inside the components in that component I can do something here.
So it's a good way to distribute our code in between.
Different logic in the application will have its different things.
So at the moment we have movie list there.
So what we need to do is we need to have a list of movies.
So I can do list movies.
And basically that will be array of something.
Right.
So this is how we hold the data in JavaScript.
So we have a variable and we can refer to that variable somewhere in our component.
But we want to use more reactive way.
So that means we'll use a hooks.
We will use usestate which is react hood.
And we need to import that first.
So import will import react.
And also we will import use state and that will be from react.
So once we have that use state instead of having movies like this as a array, what we can do is we
can use that hook use state.
So basically use state will give us two things.
So I will put it in a square brackets here.
First one will be my variable as it was before.
But the second thing in is set movies.
So basically one the first one is to accessing the data.
And this one is for setting the data.
And that will be the use date.
Also what we can do is we can specify the default value.
At the moment movies are there's nothing there.
So I can put an empty array there.
So this will give me a way to set the movies and access that movie.
So let's access that movie here.
If I will do now a curly braces, that means I can inject some JavaScript error and I will do movies.
I can use a map function on it.
So map function will basically go through all the elements and do something with that.
So what do we want to do.
We want to have and this map we need to provide a function callback function on there.
And then we will have movie.
And that movie will need to return something and I will return.
Let's say we will return H2 and I will return.
Movie here.
So this is another curly braces here.
So that means if we have some movies at the moment it's empty.
We'll go through all of that.
And for each time we do a loop in a map, we will have that local variable here, and we'll return H2
for each movie we have there.
So if I save it now, if I will go there and refresh it, not actually change because we don't have
any movies.
So if I will go here and put here movie one and let's say movie two, if I will go here, you see movie
one and movie two has been added.
So what we have done is we set up few things.
First, we import a state.
We have that use state here.
We provide a default value here.
And then we have our own way to access that.
And we what we do in our HTML, we actually loop through that and we display the movie at the moment
we have fixed a list like this, but what we really want to do is to fetch that movie list from our
API and display it in here, and we will do that in the next video.