WEBVTT 00:01.400 --> 00:07.700 Okay, we have our layout ready or prepared for our for the things that we'll need to do. 00:07.700 --> 00:11.330 But let's see in this video I'll focus on the movie list. 00:11.330 --> 00:15.830 So we need to create a movie list and we'll need to prepare our application for it. 00:15.830 --> 00:22.370 So what I can do is I could start doing that here, but we can also create a new component and load 00:22.370 --> 00:22.790 it here. 00:22.790 --> 00:29.270 So I will inside the source I will create a new folder and I will name it component. 00:29.870 --> 00:36.410 And inside the components I will create a new file and I will call it movie dash list. 00:36.410 --> 00:38.990 And then js x. 00:40.850 --> 00:44.300 So basically that's the JSX file. 00:44.300 --> 00:50.780 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. 00:50.780 --> 00:54.170 So basically we don't need this one. 00:54.170 --> 00:58.280 We will have a function that will be our functional component. 00:58.280 --> 01:02.570 And I will name it movie list like this. 01:02.570 --> 01:05.330 And we don't need that classes name. 01:05.330 --> 01:08.570 We'll just leave whatever we have there. 01:08.600 --> 01:12.710 I could write it on my own, but it will be faster to copy like this. 01:12.710 --> 01:18.350 So basically we have our movie list component here and we need to also return it. 01:18.350 --> 01:20.480 So export export default movie list. 01:20.480 --> 01:24.440 We can also do it that here it doesn't matter. 01:24.440 --> 01:26.690 So it will be one kind of liner. 01:26.690 --> 01:33.110 So we have our component movie list and that will display only the headings here. 01:33.110 --> 01:33.950 So movie list. 01:33.950 --> 01:39.410 Once we have that component what we can do is instead of having that movie list here, what I can do 01:39.410 --> 01:41.390 is I can display that component there. 01:41.390 --> 01:46.160 So what I can say is I can import that component. 01:46.190 --> 01:51.470 So import movie list and it will help me finish this. 01:51.470 --> 01:55.760 But basically import movie list from component folder movie list. 01:55.760 --> 02:00.650 And once I have that what I can do is I can replace that with movie list. 02:00.650 --> 02:02.030 And I need to do slash. 02:02.030 --> 02:03.740 So that means I will finish this. 02:03.740 --> 02:06.740 So if I will save it here, if I will go here. 02:06.740 --> 02:11.090 You see, I still have that movie list there, but it's coming from the component. 02:11.090 --> 02:18.080 That means I can go here and inside the components in that component I can do something here. 02:18.110 --> 02:20.960 So it's a good way to distribute our code in between. 02:20.960 --> 02:24.980 Different logic in the application will have its different things. 02:24.980 --> 02:27.470 So at the moment we have movie list there. 02:27.740 --> 02:30.980 So what we need to do is we need to have a list of movies. 02:30.980 --> 02:33.470 So I can do list movies. 02:35.330 --> 02:38.210 And basically that will be array of something. 02:38.210 --> 02:38.510 Right. 02:38.510 --> 02:42.080 So this is how we hold the data in JavaScript. 02:42.080 --> 02:48.050 So we have a variable and we can refer to that variable somewhere in our component. 02:48.290 --> 02:51.050 But we want to use more reactive way. 02:51.080 --> 02:52.850 So that means we'll use a hooks. 02:52.850 --> 02:56.450 We will use usestate which is react hood. 02:56.450 --> 02:58.790 And we need to import that first. 02:58.790 --> 03:01.880 So import will import react. 03:01.880 --> 03:11.660 And also we will import use state and that will be from react. 03:12.230 --> 03:18.020 So once we have that use state instead of having movies like this as a array, what we can do is we 03:18.020 --> 03:20.030 can use that hook use state. 03:20.030 --> 03:22.940 So basically use state will give us two things. 03:22.940 --> 03:25.820 So I will put it in a square brackets here. 03:25.820 --> 03:29.250 First one will be my variable as it was before. 03:29.250 --> 03:32.970 But the second thing in is set movies. 03:32.970 --> 03:37.530 So basically one the first one is to accessing the data. 03:37.530 --> 03:39.540 And this one is for setting the data. 03:39.540 --> 03:41.520 And that will be the use date. 03:41.520 --> 03:45.060 Also what we can do is we can specify the default value. 03:45.090 --> 03:47.760 At the moment movies are there's nothing there. 03:47.760 --> 03:49.740 So I can put an empty array there. 03:49.770 --> 03:55.500 So this will give me a way to set the movies and access that movie. 03:55.500 --> 03:57.270 So let's access that movie here. 03:57.630 --> 04:04.860 If I will do now a curly braces, that means I can inject some JavaScript error and I will do movies. 04:04.860 --> 04:07.590 I can use a map function on it. 04:07.620 --> 04:12.150 So map function will basically go through all the elements and do something with that. 04:12.150 --> 04:13.530 So what do we want to do. 04:13.560 --> 04:19.350 We want to have and this map we need to provide a function callback function on there. 04:19.350 --> 04:21.690 And then we will have movie. 04:21.690 --> 04:27.840 And that movie will need to return something and I will return. 04:28.680 --> 04:34.080 Let's say we will return H2 and I will return. 04:36.450 --> 04:37.440 Movie here. 04:37.440 --> 04:40.860 So this is another curly braces here. 04:40.860 --> 04:44.430 So that means if we have some movies at the moment it's empty. 04:44.460 --> 04:45.990 We'll go through all of that. 04:45.990 --> 04:53.130 And for each time we do a loop in a map, we will have that local variable here, and we'll return H2 04:53.160 --> 04:54.540 for each movie we have there. 04:54.540 --> 05:00.120 So if I save it now, if I will go there and refresh it, not actually change because we don't have 05:00.120 --> 05:00.750 any movies. 05:00.750 --> 05:12.090 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 05:12.120 --> 05:14.190 one and movie two has been added. 05:14.190 --> 05:18.300 So what we have done is we set up few things. 05:18.300 --> 05:20.460 First, we import a state. 05:20.460 --> 05:22.710 We have that use state here. 05:22.710 --> 05:24.720 We provide a default value here. 05:24.720 --> 05:28.440 And then we have our own way to access that. 05:28.440 --> 05:34.530 And we what we do in our HTML, we actually loop through that and we display the movie at the moment 05:34.530 --> 05:40.890 we have fixed a list like this, but what we really want to do is to fetch that movie list from our 05:40.890 --> 05:44.490 API and display it in here, and we will do that in the next video.