1
00:00:00,360 --> 00:00:01,590
Hello, everyone, and welcome.

2
00:00:02,040 --> 00:00:08,880
And the previous part we completed with the navar landing page and a photo containing icons to our social

3
00:00:08,880 --> 00:00:09,690
media handles.

4
00:00:10,660 --> 00:00:14,680
So now we're going to move forward and create our list of the things.

5
00:00:15,670 --> 00:00:19,210
First of all, let me just start this hour and start.

6
00:00:20,630 --> 00:00:28,430
And Bill's always starting, let me just create another page, which will be my new dawgs.

7
00:00:32,250 --> 00:00:33,610
Gorgeous and.

8
00:00:35,850 --> 00:00:45,020
Now will use a cool trick to import snippets of boilerplate code that is the odyssey that we have to.

9
00:00:45,960 --> 00:00:46,390
Boilerplate.

10
00:00:48,090 --> 00:00:50,490
Now we're going to create some lives.

11
00:00:50,850 --> 00:00:53,550
The first one will be my new.

12
00:00:55,110 --> 00:00:56,820
The second one would be.

13
00:00:58,280 --> 00:00:59,120
When you tighten.

14
00:01:04,500 --> 00:01:07,320
And the third one would be when you list.

15
00:01:11,060 --> 00:01:11,300
OK.

16
00:01:11,640 --> 00:01:15,160
They will start menu just for their testing purpose, and we'll head soup.

17
00:01:15,860 --> 00:01:16,130
OK.

18
00:01:17,270 --> 00:01:17,870
And.

19
00:01:22,500 --> 00:01:23,940
And then we'll go to.

20
00:01:25,740 --> 00:01:26,960
After just where?

21
00:01:29,480 --> 00:01:40,820
And we will create another path for on the road, basically for the menu page, but its part will be.

22
00:01:43,460 --> 00:01:47,000
And new and exact.

23
00:01:48,300 --> 00:01:50,040
Component will be.

24
00:01:54,140 --> 00:01:54,470
OK.

25
00:01:55,660 --> 00:02:00,860
So by doing this important, it's important the wrong one.

26
00:02:00,880 --> 00:02:03,330
You see, this is from my my anyway.

27
00:02:03,680 --> 00:02:04,720
We don't want this, OK?

28
00:02:05,560 --> 00:02:06,400
I'm the wrong.

29
00:02:07,480 --> 00:02:09,550
But we'll just try.

30
00:02:11,970 --> 00:02:14,190
And you from from.

31
00:02:17,130 --> 00:02:20,310
On Pages Clash.

32
00:02:21,900 --> 00:02:22,230
Many.

33
00:02:23,420 --> 00:02:25,040
That's right, and we need to step.

34
00:02:27,200 --> 00:02:27,830
And.

35
00:02:30,090 --> 00:02:30,850
We're just compiling.

36
00:02:34,550 --> 00:02:36,950
And when we go to a new.

37
00:02:40,780 --> 00:02:46,120
Now, let me take you to the browser and let me just show you how that looks.

38
00:02:52,920 --> 00:02:55,050
Let me just go to the menu.

39
00:02:57,380 --> 00:03:00,290
It's not working right now because we have not configured than I have.

40
00:03:00,710 --> 00:03:02,090
Let me just take you from that.

41
00:03:02,600 --> 00:03:03,080
You want to.

42
00:03:06,460 --> 00:03:06,790
OK.

43
00:03:06,880 --> 00:03:09,610
You can see menu is rendered menus under.

44
00:03:09,850 --> 00:03:12,730
That means a component is being rendered now.

45
00:03:13,180 --> 00:03:17,590
Next, we will do it how and what to display, but it's been rendered.

46
00:03:17,590 --> 00:03:18,390
That is the good part.

47
00:03:18,400 --> 00:03:22,540
Tim will configure it from here, so don't worry from the never.

48
00:03:23,050 --> 00:03:26,890
But right now, most important thing is that it's been rendered.

49
00:03:27,520 --> 00:03:29,440
So let's just go back to school.

50
00:03:31,060 --> 00:03:39,790
And now I will create another component or the folder, which you will, which will be containing the

51
00:03:39,800 --> 00:03:47,020
data, which we want to display, like determines the image of the dish, the name of the dish, the

52
00:03:47,020 --> 00:03:48,940
price of the dish, everything of them.

53
00:03:49,570 --> 00:03:52,720
So for that, we need to create another folder.

54
00:03:53,140 --> 00:03:59,200
You can create it or you can place the file anywhere, but I will get it in the source only.

55
00:03:59,690 --> 00:04:00,820
But that will be data.

56
00:04:02,940 --> 00:04:04,810
It could be data and other data.

57
00:04:05,550 --> 00:04:06,600
I will create.

58
00:04:08,420 --> 00:04:09,610
They turn dogs.

59
00:04:11,460 --> 00:04:12,630
And we will try.

60
00:04:16,450 --> 00:04:17,230
Export.

61
00:04:19,540 --> 00:04:27,830
Bonds and that will be data is equal to an array, an array of what an array of objects.

62
00:04:28,420 --> 00:04:36,640
So how will have key value pairs which will be containing the mean image and everything of a dish?

63
00:04:37,330 --> 00:04:39,310
So how will give name?

64
00:04:40,960 --> 00:04:41,500
And.

65
00:04:42,650 --> 00:04:45,260
William and will be the name like.

66
00:04:46,590 --> 00:04:52,260
First fish and will give a comma an image.

67
00:04:53,400 --> 00:04:55,170
So this is an image.

68
00:04:56,010 --> 00:04:58,050
And the third thing will be the price.

69
00:05:00,100 --> 00:05:03,850
And but I don't need the politicians right.

70
00:05:03,880 --> 00:05:05,100
It's a numerical loser.

71
00:05:05,260 --> 00:05:08,690
You can write it like and anytime you anything you want.

72
00:05:08,710 --> 00:05:10,600
So it's just a number, right?

73
00:05:11,440 --> 00:05:16,390
So you can write it like this and just and just save it.

74
00:05:18,050 --> 00:05:23,300
OK, so this is an array of objects and the objects that are key value pairs.

75
00:05:23,870 --> 00:05:24,200
OK.

76
00:05:25,070 --> 00:05:28,490
So you can just go back to menu.

77
00:05:29,690 --> 00:05:39,020
And basically, this data won't work, actually, because we we have taken this dummy data who actually

78
00:05:39,230 --> 00:05:47,060
I've already created, like I've searched for some dishes and along with the photos title and the price.

79
00:05:47,360 --> 00:05:50,690
So let me just piece that data here.

80
00:05:51,470 --> 00:05:58,340
Let me just paste that data so that you can have a clear look of everything and.

81
00:06:01,000 --> 00:06:03,360
So this is all the data, huh?

82
00:06:03,880 --> 00:06:07,180
So this is all the food which we are going to sell on our website.

83
00:06:07,670 --> 00:06:13,570
So these are all the importations of the image we have all imported by image and.

84
00:06:15,060 --> 00:06:15,930
There's just a.

85
00:06:17,840 --> 00:06:21,410
An image and everything else, so we'll just save it.

86
00:06:21,860 --> 00:06:25,540
And now we go back to our menu dot Jesus.

87
00:06:26,210 --> 00:06:30,740
Now what we've got going to do is we are going to import the data like.

88
00:06:34,500 --> 00:06:35,130
Import.

89
00:06:36,790 --> 00:06:38,680
Data from.

90
00:06:41,440 --> 00:06:43,120
Maybe we can go to.

91
00:06:46,410 --> 00:06:46,720
Data.

92
00:06:49,250 --> 00:06:51,010
Then slash it up.

93
00:06:51,320 --> 00:06:52,370
We call it the only.

94
00:06:53,180 --> 00:06:57,530
OK, now what we are going to do is use the map function.

95
00:06:58,010 --> 00:07:03,740
Now, if you are new to react and if we don't know about the map function, I would highly recommend

96
00:07:03,740 --> 00:07:07,550
you to go and learn the map function from the script.

97
00:07:08,060 --> 00:07:09,470
It is really, really important.

98
00:07:09,470 --> 00:07:12,440
If you don't know the map function, you need to learn it.

99
00:07:12,560 --> 00:07:13,730
It's really, really important.

100
00:07:14,030 --> 00:07:18,140
So let's just let's just start with the map function.

101
00:07:18,710 --> 00:07:22,340
We've already imported data, so now we'll use malfunction.

102
00:07:22,340 --> 00:07:24,080
So map function is a JavaScript.

103
00:07:24,530 --> 00:07:28,680
So to use JavaScript inside the written statement, you need to use coronaviruses.

104
00:07:28,680 --> 00:07:32,080
So inside the calibrations, only you can use JavaScript.

105
00:07:32,150 --> 00:07:37,780
So we'll use the name of the component that is due to a dot dot map.

106
00:07:38,700 --> 00:07:39,120
And.

107
00:07:41,120 --> 00:07:45,440
This is a function, and inside this very will, we will be creating another function.

108
00:07:45,830 --> 00:07:51,980
So this will be a federal function and the Fed does index to federal functions, something like that.

109
00:07:52,280 --> 00:07:56,840
Apprentices and then equal to and then design and clearances.

110
00:07:56,840 --> 00:07:59,030
And so this is a written statement.

111
00:07:59,460 --> 00:08:01,710
If you write written, it's OK.

112
00:08:01,730 --> 00:08:06,740
And if you don't even write it down, you can just write whatever you need to return it like whatever

113
00:08:06,740 --> 00:08:09,070
the function that you need to return over here.

114
00:08:09,570 --> 00:08:12,890
So here we will provide those things.

115
00:08:13,190 --> 00:08:18,620
That is that it expects two arguments basically first variable and second is the idea of the key.

116
00:08:20,080 --> 00:08:23,500
So air will provide menu item, maybe.

117
00:08:26,780 --> 00:08:29,330
Menu item Solecki.

118
00:08:29,600 --> 00:08:36,850
I'm in coma and then so head, we will provide that what we want to return, so we'll provide written,

119
00:08:37,840 --> 00:08:40,040
written statement and we provide this.

120
00:08:40,580 --> 00:08:43,790
And inside OFA will provide our live.

121
00:08:46,090 --> 00:08:47,800
Closing for the death.

122
00:08:49,160 --> 00:08:49,460
OK.

123
00:08:50,120 --> 00:08:58,790
And inside here we will be providing, for example, my new menu and item.

124
00:09:01,100 --> 00:09:05,900
Dog name, maybe, or price, whatever you want to display here.

125
00:09:06,350 --> 00:09:11,270
So this will also be another cuddly place like this.

126
00:09:11,870 --> 00:09:18,440
And then we just say this, and let's just see that any errors are errors.

127
00:09:18,950 --> 00:09:21,470
So data does not contain an export.

128
00:09:21,490 --> 00:09:23,450
OK, we to export the data.

129
00:09:24,750 --> 00:09:25,200
OK.

130
00:09:26,220 --> 00:09:27,930
And this is named as.

131
00:09:31,380 --> 00:09:33,330
Data and then we see it.

132
00:09:35,350 --> 00:09:42,940
And our default export, so that is why we need to put this in the curly braces.

133
00:09:43,000 --> 00:09:49,390
So this also you need to keep in mind that whenever you are importing a constant or or an array from

134
00:09:49,390 --> 00:09:51,610
another component, so you need to put that inside the car.

135
00:09:52,120 --> 00:09:54,190
So that's a really, really important thing to keep in mind.

136
00:09:54,790 --> 00:09:57,340
So there are some adults.

137
00:09:59,300 --> 00:10:03,290
We can't resolve the images, so that is just a normal thing.

138
00:10:03,980 --> 00:10:04,550
And.

139
00:10:06,330 --> 00:10:06,680
It would.

140
00:10:07,640 --> 00:10:09,060
So the name was different here.

141
00:10:09,350 --> 00:10:12,170
It asserts, and we were writing assets.

142
00:10:12,680 --> 00:10:18,770
So I hope now we can render it and go back to the menu here.

143
00:10:20,160 --> 00:10:23,550
Let me take you to the browser first outlooks on the browser.

144
00:10:24,760 --> 00:10:25,870
Let me refresh.

145
00:10:27,380 --> 00:10:29,750
You can see all the names of the best we can see.

146
00:10:30,020 --> 00:10:36,470
And if we change, if we change it to price, maybe from name to price.

147
00:10:37,530 --> 00:10:38,460
And then we heard Save.

148
00:10:39,340 --> 00:10:41,380
And then we go back to the browser.

149
00:10:42,740 --> 00:10:46,790
And we'll see the prices, you can see the prices are displayed here.

150
00:10:47,270 --> 00:10:56,060
So this is what we are going to do now for this review, and we are using the map function because it

151
00:10:56,060 --> 00:11:02,330
is all about like, I don't want to create separate, separate lives and separate separate containers

152
00:11:02,330 --> 00:11:03,560
for every single dish.

153
00:11:03,920 --> 00:11:08,270
Like if I used to, if I wanted to create like one card.

154
00:11:08,390 --> 00:11:14,600
So I don't want to create a card for every single dish and I create every single container and every

155
00:11:14,600 --> 00:11:19,970
single like HDMI of what every single other container.

156
00:11:19,970 --> 00:11:22,040
So that is what we need to keep in mind.

157
00:11:22,370 --> 00:11:29,510
So that is why I'm going to create a standard, a standard container like we used like nav, bar and

158
00:11:29,900 --> 00:11:32,420
footer, and we are using it on every single page.

159
00:11:32,720 --> 00:11:39,970
So just exactly like it, we are going to create another container, which we will be naming as a.

160
00:11:41,380 --> 00:11:49,300
As menu item, so that menu item will be inside the components folder, so.

161
00:11:50,450 --> 00:11:56,450
Let's just go to the components folder and let us create another file that will be.

162
00:11:57,640 --> 00:11:59,680
Menu item dark.

163
00:12:00,040 --> 00:12:00,500
Yes.

164
00:12:01,570 --> 00:12:05,920
Let me just use our trick, which is our key.

165
00:12:07,010 --> 00:12:07,480
OK.

166
00:12:08,150 --> 00:12:15,320
And inside the menu, I don't we'll be having two deaths, and the first one is for the menu item,

167
00:12:15,320 --> 00:12:19,550
and second is is just a normal day and.

168
00:12:23,360 --> 00:12:28,040
It will mean we will be naming it as menu item, so.

169
00:12:30,360 --> 00:12:31,980
Menu item.

170
00:12:32,790 --> 00:12:34,320
And we'll be having another live.

171
00:12:36,520 --> 00:12:46,600
OK, so inside this, do this do will be basically for the image or we'll be using an image for.

172
00:12:49,020 --> 00:12:50,880
But are like display.

173
00:12:53,660 --> 00:12:56,960
So we will provide style to this.

174
00:12:57,260 --> 00:12:58,220
It will be styled.

175
00:13:02,050 --> 00:13:13,040
Background image and how it will provide tactics, and we'll try to you all and this through dollar

176
00:13:13,060 --> 00:13:15,400
sign and provide this.

177
00:13:15,820 --> 00:13:21,250
So here we'll be providing we'll be passing props in this function.

178
00:13:21,520 --> 00:13:27,730
So the props will be Image's name and price the image name.

179
00:13:28,890 --> 00:13:37,500
Price, and then here it will be, it will be image and it will be image and.

180
00:13:39,460 --> 00:13:41,680
Next, we'll be having an one with name.

181
00:13:42,430 --> 00:13:48,760
And you know this, we'll be having an each one with name.

182
00:13:49,750 --> 00:13:54,010
So we are using Dow script, so it will be inside the calligraphers name.

183
00:13:54,310 --> 00:13:56,350
Next, we'll be having a big dog.

184
00:13:58,080 --> 00:14:01,380
Detached insiders will be having the price.

185
00:14:02,480 --> 00:14:03,020
So.

186
00:14:04,910 --> 00:14:05,200
Right.

187
00:14:05,930 --> 00:14:10,790
And in front of this price, we will be using the rupee symbol.

188
00:14:11,390 --> 00:14:17,450
So you need to search for the rupee symbol and you need to just be stood in front of this.

189
00:14:17,630 --> 00:14:20,060
So we'll be using rupee symbol and then we save.

190
00:14:21,240 --> 00:14:31,320
OK, so now we are going to map through the data and we are going to grab the data from the data logs

191
00:14:31,650 --> 00:14:38,460
and every single data, like every single object, will be given one of them one of this one on this

192
00:14:38,460 --> 00:14:43,170
container, which will be saving its image, title and price.

193
00:14:43,530 --> 00:14:50,520
So then every single container will be loading and the data will be having its own guide.

194
00:14:51,450 --> 00:14:56,820
So let me just show you what I'm talking, if you are a beginner and if you do not react, this might

195
00:14:56,820 --> 00:14:58,110
seem a little weird to you.

196
00:14:58,410 --> 00:15:03,630
This might be a little hard to digest, but if you are a beginner or an intermediate level to react,

197
00:15:04,020 --> 00:15:06,390
you know what exactly I'm trying to say.

198
00:15:06,660 --> 00:15:09,990
So if you are new and you are having a little problem, dude, I just don't.

199
00:15:10,320 --> 00:15:12,210
Don't worry, this is a little tricky.

200
00:15:12,510 --> 00:15:17,760
If you go through it through two or three times, you will be understanding what I'm trying to say.

201
00:15:18,420 --> 00:15:24,270
Now we go to the menu and we want to provide this content, which we created as a menu item to every

202
00:15:24,270 --> 00:15:26,610
single data, every single dish.

203
00:15:26,940 --> 00:15:27,760
What I'm trying to say.

204
00:15:27,780 --> 00:15:29,280
So first of all, I'll import it.

205
00:15:29,970 --> 00:15:31,170
So import.

206
00:15:33,710 --> 00:15:34,700
Menu item.

207
00:15:36,760 --> 00:15:37,150
Not.

208
00:15:37,960 --> 00:15:38,230
On.

209
00:15:40,130 --> 00:15:40,550
From.

210
00:15:45,660 --> 00:15:48,330
It's where attitudes and components.

211
00:15:49,730 --> 00:15:51,530
I'm quite OK.

212
00:15:52,460 --> 00:15:58,460
And now in place of this live, we will be providing we will be providing this.

213
00:16:00,530 --> 00:16:05,450
This container of IPA component to this menu item.

214
00:16:08,070 --> 00:16:11,520
Who will be using return and for wrapping this?

215
00:16:12,570 --> 00:16:12,930
This.

216
00:16:16,000 --> 00:16:16,340
OK.

217
00:16:16,630 --> 00:16:18,340
What what what was strong?

218
00:16:21,550 --> 00:16:27,070
OK, so we will be passing those same exact same props and.

219
00:16:28,550 --> 00:16:34,490
That is the key image and price, so key will be.

220
00:16:37,800 --> 00:16:38,110
He.

221
00:16:39,190 --> 00:16:50,410
And we'll be providing space, then we'll provide you meet, so that's that will be a menu item type

222
00:16:50,950 --> 00:16:51,460
image.

223
00:16:51,580 --> 00:16:53,260
Next, we'll be having.

224
00:16:55,140 --> 00:16:59,220
Image and then guess the name.

225
00:17:00,570 --> 00:17:02,370
Full name will be.

226
00:17:04,750 --> 00:17:07,180
Menu item dog name.

227
00:17:08,170 --> 00:17:11,080
Next will be having price or price will be.

228
00:17:12,650 --> 00:17:23,090
Main menu item guide Price, and then we'll save it, so it will look something like this, and I hope

229
00:17:23,360 --> 00:17:26,540
this works and when we go to the browser.

230
00:17:28,250 --> 00:17:31,430
And it is compiling right now for.

231
00:17:34,150 --> 00:17:39,580
We have we have not created any styles and CSIS file for.

232
00:17:40,760 --> 00:17:42,140
We'll do that in a minute.

233
00:17:43,230 --> 00:17:47,850
And then when we come to the browser, we see nothing, so there is something wrong and when we refresh,

234
00:17:48,600 --> 00:17:51,720
so there is some error which we are not able to see.

235
00:17:52,240 --> 00:17:54,240
So let me just go back to.

236
00:17:55,370 --> 00:17:55,790
The.

237
00:17:57,010 --> 00:17:59,830
Be escort and see if that is something we are missing out.

238
00:17:59,950 --> 00:18:02,260
OK, so this should be in calibrates.

239
00:18:02,270 --> 00:18:04,170
We forgot to put this in calligraphers.

240
00:18:04,600 --> 00:18:05,530
Let me just save it.

241
00:18:06,660 --> 00:18:10,320
I've saved it, and everything's OK.

242
00:18:10,710 --> 00:18:14,640
Fast forward, and then we go to the browser.

243
00:18:14,850 --> 00:18:21,630
OK, now we see the details, we see the picture, we see the title of the page, we see the price of

244
00:18:21,630 --> 00:18:21,960
the dish.

245
00:18:22,200 --> 00:18:28,620
So these are the only three things which we want to see, and every does have its own separate container.

246
00:18:28,860 --> 00:18:29,820
That's a very good thing.

247
00:18:30,030 --> 00:18:34,100
This looks a little weird because we have not yet imported the doxy as a.

248
00:18:34,740 --> 00:18:41,340
So for that, we need to go to the style door to use this file and we need to like imported so.

249
00:18:42,610 --> 00:18:46,300
Well, the styles will go to the menu and.

250
00:18:50,880 --> 00:18:57,480
We'll go to the stables and we'll create the file that is the menu dog, see us.

251
00:18:58,820 --> 00:19:02,330
So and we'll peace to see us here, and then we'll have to save.

252
00:19:03,410 --> 00:19:09,620
And this is the CIUSSS I will like to see from the beginning of this year as to which we are using.

253
00:19:15,320 --> 00:19:19,700
So let's go back and see how.

254
00:19:21,530 --> 00:19:25,040
This is the CSIS I think you would want be seeing, so let me show you again.

255
00:19:25,400 --> 00:19:27,740
This is the CSIS which we are using.

256
00:19:32,140 --> 00:19:32,490
OK.

257
00:19:33,010 --> 00:19:36,730
So let us just import this inside the menu.

258
00:19:37,810 --> 00:19:42,250
So let me take that bold statement that is.

259
00:19:45,260 --> 00:19:48,710
Inside the stars, that is the.

260
00:19:51,960 --> 00:19:52,410
Yes.

261
00:19:52,780 --> 00:19:53,910
Let me just save.

262
00:20:02,770 --> 00:20:08,710
OK, so when we go to the browser, it shows like this, I don't know why it's getting messed up.

263
00:20:09,160 --> 00:20:10,990
So let me just take a look at the CSIS.

264
00:20:11,020 --> 00:20:18,790
There is something wrong with the sensors or when you go to the menu item, OK, this image tag is covering

265
00:20:18,790 --> 00:20:19,150
it all.

266
00:20:19,180 --> 00:20:20,860
So we need to move it from here.

267
00:20:22,670 --> 00:20:23,700
Need to be stored here.

268
00:20:24,930 --> 00:20:29,220
It should close right by here because this is just for this image.

269
00:20:29,460 --> 00:20:31,050
We do need to wrap anything around it.

270
00:20:31,560 --> 00:20:37,500
So when we go back, you can see now it's good and you can see our menu and this is the menu.

271
00:20:38,190 --> 00:20:39,870
So now we have created the menu.

272
00:20:41,040 --> 00:20:48,210
So next, we'll be moving on to the other components for.

273
00:20:51,640 --> 00:20:57,770
That's it for this video, and in the next part, we'll be creating the about section and the content

274
00:20:58,220 --> 00:21:03,200
section, and we'll be also adding the links to the neighbor to all the pages which we have created.

275
00:21:03,740 --> 00:21:05,330
So then you see in the next part.