1
00:00:00,450 --> 00:00:02,160
In this, we will continue with the project.

2
00:00:02,910 --> 00:00:06,750
So now I'll be in the react my project directly.

3
00:00:07,050 --> 00:00:12,000
And then you have to install Bootstrap, so we'll be using the bootstrap styling art project.

4
00:00:13,220 --> 00:00:14,600
And BMI bootstrap.

5
00:00:18,720 --> 00:00:19,650
So this will insult.

6
00:00:19,800 --> 00:00:27,240
In the meantime, we'll see how to of the movies, like all the movie with the images on the on our

7
00:00:27,360 --> 00:00:32,700
website, the first basically in the Dodgers, I'll be putting the React models.

8
00:00:35,720 --> 00:00:36,350
In both.

9
00:00:40,140 --> 00:00:45,900
Now I'll be putting the state books and amazing you didn't use affect up in this Aparajith survey,

10
00:00:45,930 --> 00:00:46,650
importing them.

11
00:00:50,460 --> 00:00:54,780
And then once the bootstrap is installed, we get me, for example, bootstrap.

12
00:00:55,690 --> 00:00:58,080
This is the line to import bootstrap.

13
00:01:00,400 --> 00:01:02,230
Bootstraps slash missed.

14
00:01:03,580 --> 00:01:09,940
Slash census slash bootstrap, not many proxy.

15
00:01:12,000 --> 00:01:14,310
So another good step is important successfully.

16
00:01:17,230 --> 00:01:23,230
So now inside the tent, like inside a function app, I'll be using, the state took.

17
00:01:27,920 --> 00:01:31,220
Concert movies said movies.

18
00:01:33,820 --> 00:01:34,990
It was realistic.

19
00:01:39,050 --> 00:01:45,380
So what this line of code does is that basically you lose, you skip it, and I could change the data

20
00:01:45,380 --> 00:01:48,650
dynamically instead of page rather than loading up one page.

21
00:01:48,980 --> 00:01:53,330
So when we use used state, the whole page does not render the component which uses this.

22
00:01:53,330 --> 00:02:00,110
You state that the component which uses the movie's constant will be updating everything when this changes.

23
00:02:00,500 --> 00:02:06,020
So basically, we had defining of constraint on movies, and we can change this for movies using the

24
00:02:06,020 --> 00:02:07,280
function concept movies.

25
00:02:07,700 --> 00:02:12,770
So this is the function to change this constant and then use it like we had it here.

26
00:02:12,920 --> 00:02:14,200
Defining that embedding.

27
00:02:14,360 --> 00:02:20,150
So basically the initial the initial value of movies will be embedded and then we can change that using

28
00:02:20,150 --> 00:02:21,140
this at this function.

29
00:02:21,530 --> 00:02:23,600
So now I'll put the array.

30
00:02:24,990 --> 00:02:28,230
I'll give the impression as the movies list president of India.

31
00:02:30,750 --> 00:02:34,350
Oh, let me select three movies, celebration, I guess so you.

32
00:02:36,970 --> 00:02:37,870
And select them.

33
00:02:38,860 --> 00:02:40,150
And then I thought.

34
00:02:50,410 --> 00:02:54,430
So let me let's do the.

35
00:02:55,670 --> 00:03:01,270
A concatenation, but because it looks a bit not that much of.

36
00:03:04,400 --> 00:03:07,440
So everything is fine, it looks different.

37
00:03:08,180 --> 00:03:13,130
So we have a given that we find value like we are basically hard putting it.

38
00:03:14,530 --> 00:03:15,190
That is one.

39
00:03:17,100 --> 00:03:22,890
You need to indentation and giving it a proper indentation so that it looks good enough to see.

40
00:03:23,910 --> 00:03:29,400
So now they use the movies, contends that basically default for mortgage finished, and then we can

41
00:03:29,400 --> 00:03:32,310
use this movies list to bring them on the screen.

42
00:03:32,860 --> 00:03:35,980
So that instead of allowable, we want to get movies to be banking.

43
00:03:36,600 --> 00:03:37,260
So hard to do that.

44
00:03:38,480 --> 00:03:40,700
The as yet last name will be.

45
00:03:44,580 --> 00:03:49,740
Since we are using Bootstrap, I'll be using we'll start classes for the styling containers.

46
00:03:49,830 --> 00:03:56,200
It is a bootstrap class and then we have it'll be my custom style that will be giving inside approach

47
00:03:56,220 --> 00:03:56,310
to.

48
00:03:58,800 --> 00:03:59,100
Here.

49
00:04:01,340 --> 00:04:03,200
Now I'll be having a little.

50
00:04:06,290 --> 00:04:10,640
But always also a class name that comes from bootstrap, you can check the books documentation if you

51
00:04:10,640 --> 00:04:11,330
have any doubts.

52
00:04:17,030 --> 00:04:18,460
Last name is a cultural.

53
00:04:21,980 --> 00:04:25,750
And then here I can get rid of the movies.

54
00:04:31,570 --> 00:04:33,710
I like life, are you concerned?

55
00:04:34,260 --> 00:04:36,330
You can create a new function for the movie list.

56
00:04:39,390 --> 00:04:43,590
Like, there'll be a new component for relations in the movie, which has up from.

57
00:04:51,430 --> 00:04:53,740
And they'll be sending them over as a prop for movies.

58
00:05:04,030 --> 00:05:07,900
So now we are done with the code, we have to create this movie list bump, but it's a lot easier.

59
00:05:08,000 --> 00:05:13,390
What we are doing is that we are sending this, this constant the date of the movies as a prop for the

60
00:05:13,390 --> 00:05:14,260
movie list component.

61
00:05:14,270 --> 00:05:15,190
So what are props?

62
00:05:15,430 --> 00:05:19,750
Props are similar to attributes after before pitch female elements.

63
00:05:19,990 --> 00:05:25,620
So basically, we know like if we use image element of and many will be adding source alternative or

64
00:05:25,690 --> 00:05:28,180
a height like source attribute everything.

65
00:05:28,580 --> 00:05:34,870
So similarly, since this is a custom component that we are creating, we call those actively just props.

66
00:05:34,900 --> 00:05:38,680
So we have to be careful with the naming will be what name we use here.

67
00:05:38,680 --> 00:05:42,970
We have to use the same name to catch the props when we create the movie list component.

68
00:05:43,390 --> 00:05:45,820
So now I'll be creating a new folder components.

69
00:05:50,000 --> 00:05:51,200
And in fact, component.

70
00:05:51,860 --> 00:05:54,140
Oh, sorry, I created a file instead of pumping.

71
00:05:55,430 --> 00:05:56,240
Certainly related.

72
00:06:00,130 --> 00:06:01,240
We have to create a folder.

73
00:06:04,190 --> 00:06:09,920
Complex inside this components for creating a new component movie list for display the movies.

74
00:06:11,520 --> 00:06:12,030
Roger.

75
00:06:13,080 --> 00:06:16,920
You can use data subjects, nothing matter, but if you enjoy jazz, you have to be there yet.

76
00:06:17,370 --> 00:06:22,480
If you're a jazz sexy, it automatically decides like no need to import reactors, reactor and everything.

77
00:06:26,150 --> 00:06:28,780
So once you're done with it, you have to let go.

78
00:06:31,260 --> 00:06:33,810
Create a constant movie list function.

79
00:06:37,180 --> 00:06:43,790
I'm using the arrow function in the props that we'll get from the approaches that we send us the movie's

80
00:06:43,810 --> 00:06:44,350
constant.

81
00:06:53,110 --> 00:06:54,400
And then what we have to render.

82
00:06:54,670 --> 00:07:00,520
So there's going to be after an image of the image of the movie, right, so that the user can see what

83
00:07:00,520 --> 00:07:01,180
movie it is.

84
00:07:01,630 --> 00:07:02,590
So to render that?

85
00:07:04,550 --> 00:07:05,870
So what we will be doing is.

86
00:07:13,330 --> 00:07:18,910
We will be applying a map function on the movies that we got.

87
00:07:19,300 --> 00:07:22,860
So what this will do is it will run through the array like a far look.

88
00:07:22,900 --> 00:07:24,800
The map function is like us in the fall.

89
00:07:25,090 --> 00:07:30,490
It will run through the movies at it and then we can search the date of each movie and then we can print

90
00:07:30,490 --> 00:07:32,470
them so that I'll be doing it.

91
00:07:32,470 --> 00:07:32,860
All it.

92
00:07:33,920 --> 00:07:38,450
Props, dark movies instead of boxing to be having movies, not map.

93
00:07:40,130 --> 00:07:40,550
And then.

94
00:07:42,290 --> 00:07:42,920
It'll be getting.

95
00:07:44,100 --> 00:07:49,230
Who attributes on average to that I'm a consolidator movies, movie and index.

96
00:07:50,450 --> 00:07:51,830
Index of each item.

97
00:07:56,800 --> 00:07:59,380
The note we can read at the.

98
00:08:01,700 --> 00:08:04,910
Written or we can do the negative for the image.

99
00:08:07,230 --> 00:08:13,410
So classmen will be like, let me give you customer like, I'll be using wood chips, I'll be giving

100
00:08:13,410 --> 00:08:14,190
the class names.

101
00:08:18,230 --> 00:08:19,250
Image container.

102
00:08:19,370 --> 00:08:20,780
This is also good glass.

103
00:08:22,980 --> 00:08:23,730
The Flex.

104
00:08:25,070 --> 00:08:26,000
This content.

105
00:08:32,620 --> 00:08:33,160
Stock.

106
00:08:34,800 --> 00:08:36,000
So these are all going to be fought.

107
00:08:36,360 --> 00:08:39,420
These are all the bootstrap classes that I'll be using for the styling purpose.

108
00:08:40,110 --> 00:08:42,540
And inside this old building, getting the image.

109
00:08:45,810 --> 00:08:50,010
So it will be, as you know, it will be movie poster that will get.

110
00:08:53,000 --> 00:08:55,070
Well, we don't posted.

111
00:08:57,360 --> 00:09:02,460
We will have to give some tax so that if they had oil loading the poster, then we can see this text

112
00:09:02,470 --> 00:09:03,700
what the image depicts.

113
00:09:05,990 --> 00:09:06,920
So if the damage.

114
00:09:08,020 --> 00:09:14,480
So, yeah, so with this, we can render all the movies the simple, it's not the simple thing that

115
00:09:14,480 --> 00:09:18,410
we need is that we have created a default like hot, put it back for movies.

116
00:09:18,570 --> 00:09:21,830
We send the information to a component through the form of props.

117
00:09:22,130 --> 00:09:25,910
And then we got hold of the props and then the props.

118
00:09:26,120 --> 00:09:26,450
We had.

119
00:09:27,510 --> 00:09:30,860
Like a lot, this is not movies like they should be warnings.

120
00:09:32,180 --> 00:09:36,290
Instead, the props were accessing movies and mapping through all the movies, we'll be getting each

121
00:09:36,290 --> 00:09:41,630
movie item and then movie poster gives the source for that image and then it will display that image.

122
00:09:41,720 --> 00:09:45,080
So if you check whether the bootstrap is installed or not.

123
00:09:46,070 --> 00:09:51,110
So I bootstrap it successfully in Australia and chicken packages and rather bootstrap it and Charlotte

124
00:09:51,110 --> 00:09:51,410
not.

125
00:09:52,470 --> 00:09:52,930
Oh.

126
00:09:55,640 --> 00:10:01,810
It be having back Edward James sound like I was going to switch it already.

127
00:10:04,500 --> 00:10:05,130
You can do that.

128
00:10:08,560 --> 00:10:10,630
So they have done with the movie industry, have exploded.

129
00:10:11,830 --> 00:10:14,770
Export default when we list.

130
00:10:16,140 --> 00:10:18,330
And in our broadcast, we have to import the movie list.

131
00:10:25,450 --> 00:10:28,060
And both were released.

132
00:10:29,460 --> 00:10:29,790
From.

133
00:10:31,250 --> 00:10:32,180
Components.

134
00:10:47,560 --> 00:10:53,350
So now, as you can see, this is a problem like we are able to get the alternate like, as you can

135
00:10:53,350 --> 00:10:57,880
see inside the more military pressure than the alternatives, but we are not able to get done.

136
00:10:58,040 --> 00:11:00,700
We don't put to in check why that is happening.

137
00:11:04,010 --> 00:11:11,150
This is happening because, like we are getting there or do you say we are giving the data already yet,

138
00:11:11,480 --> 00:11:13,340
but not actually calling?

139
00:11:13,700 --> 00:11:19,490
You are too like we are not fitting that you are in fight, so that will be doing the get movie request.

140
00:11:25,140 --> 00:11:29,070
So they did a small error in the code that they wrote that Israeli are not able to.

141
00:11:30,410 --> 00:11:37,610
And that the movie images, so that is basically here, if you can see how gorgeous the key name of

142
00:11:37,610 --> 00:11:41,430
the poster is starting with Captain, so is and still be after being struck.

143
00:11:41,520 --> 00:11:46,010
We're not supposed to have this gap that we already know in your refrigerator.

144
00:11:46,010 --> 00:11:46,510
You can see it.

145
00:11:47,330 --> 00:11:52,310
What would it be for the image that we are giving as a hot credit PA we can render them interpret?

146
00:11:52,850 --> 00:11:57,920
So now we have successfully saw how to render of the movie posters from the.

147
00:11:58,930 --> 00:12:03,340
Albeit or IMDb red tape that we saw in the previous video.

148
00:12:03,760 --> 00:12:09,490
So in the next reader, we see how to get these movies by the search, by implementing the search feature,

149
00:12:09,490 --> 00:12:15,040
the heading out as movies and the state of light as you saw in the interruption meter, how it will

150
00:12:15,040 --> 00:12:17,480
be the stating everything in a single room.

151
00:12:17,710 --> 00:12:21,520
We can search over here and then get the movies in a single room that will see from the next film.