1
00:00:00,720 --> 00:00:02,040
Hello, everyone, and welcome.

2
00:00:02,610 --> 00:00:08,160
So now that we have discussed the project, let's start building the worst thing that you need if you

3
00:00:08,160 --> 00:00:13,860
want to work with react on your computer is that you need to have Node.js and npm installed on your

4
00:00:13,860 --> 00:00:14,370
computer.

5
00:00:14,850 --> 00:00:18,780
So if you will not install Node.js and and being on a computer.

6
00:00:19,170 --> 00:00:22,580
So we need to go to this website, which is Nordeste or G.

7
00:00:23,280 --> 00:00:25,510
And click on this link right here.

8
00:00:25,530 --> 00:00:28,890
This button, which is recommended for most of the users.

9
00:00:28,970 --> 00:00:31,320
We just click on this button right here.

10
00:00:31,950 --> 00:00:36,600
And this will download installer for Node.js on your PC.

11
00:00:37,080 --> 00:00:43,650
So once it is downloaded, you just double click on it and just follow the instructions for the installation.

12
00:00:44,100 --> 00:00:51,090
I'm not doing it because I've already installed Norges and be on my computer, so if not, so you just

13
00:00:51,090 --> 00:00:51,990
follow this process.

14
00:00:52,530 --> 00:00:57,990
So once you've followed all the instructions and installed successfully node yes, on your computer,

15
00:00:58,500 --> 00:00:59,280
then number two.

16
00:00:59,880 --> 00:01:01,380
Now what about npm?

17
00:01:01,500 --> 00:01:08,430
So you no need to worry about npm, because if you install Node.js from this installer right here,

18
00:01:08,850 --> 00:01:15,720
then npm is automatically installed on your computer, so you don't need to worry about that.

19
00:01:16,870 --> 00:01:24,740
So now that you've installed Node.js and npm on your computer, the next thing you need is code editor.

20
00:01:25,270 --> 00:01:30,610
So if you have a coordinator, then skip this part and if you have not installed any quarter.

21
00:01:30,970 --> 00:01:36,340
So I personally use this, which is Visual Studio code, or we scored.

22
00:01:36,820 --> 00:01:42,650
So I will prefer you to use this coordinator as we will be using this story while coding.

23
00:01:42,670 --> 00:01:48,100
So if you're not installing this, you can just go to this website, which is code dot visual, you

24
00:01:48,400 --> 00:01:50,050
dot com slash download.

25
00:01:51,060 --> 00:01:57,060
So once you arrive at that and this website, you can just download it according to your operating system,

26
00:01:57,060 --> 00:02:02,370
if you are a Windows user, you can download it here, according to the configurations, 32 or 64 bit

27
00:02:03,000 --> 00:02:03,450
next.

28
00:02:03,480 --> 00:02:06,180
If you are a Linux user, you can download it from here.

29
00:02:06,180 --> 00:02:09,090
And if you're a Mac user, you can download it from here.

30
00:02:09,120 --> 00:02:09,810
A zip file.

31
00:02:10,470 --> 00:02:12,180
So that's about it.

32
00:02:12,870 --> 00:02:19,260
Once you've downloaded the Visual Studio code and just go to the file path that it has downloaded and

33
00:02:19,260 --> 00:02:22,770
just install it, so it's not regular installation process.

34
00:02:23,400 --> 00:02:28,800
So which is like saying for all the software's on windows and on any other platform.

35
00:02:29,370 --> 00:02:30,210
Just install it.

36
00:02:30,210 --> 00:02:35,460
And once you install it, just open it by double clicking on the icon.

37
00:02:35,910 --> 00:02:39,630
So let me just show you how it will look like when you once you open it.

38
00:02:40,140 --> 00:02:44,700
So this is how it will look like once you open the Visual Studio code.

39
00:02:45,180 --> 00:02:52,080
So this is how it looks at the beginning when you even you're not going to do any project or something

40
00:02:52,080 --> 00:02:52,440
like that.

41
00:02:52,950 --> 00:02:55,170
So this is what you will see.

42
00:02:56,200 --> 00:03:00,020
Next, what you need to do is you need to open the terminal.

43
00:03:00,040 --> 00:03:06,580
You can see this tab right here that says Terminal two, just click on it and just click New Terminal.

44
00:03:07,090 --> 00:03:14,050
You can also open this by using a shortcut which is controlled plus Bektic the key above the tab.

45
00:03:14,260 --> 00:03:17,080
It's called Bektic, so just press control.

46
00:03:17,170 --> 00:03:19,510
Plus some Bektic and the terminal will be open.

47
00:03:20,050 --> 00:03:26,050
So I've used WCL on my computer and configured it to my VA scored.

48
00:03:26,420 --> 00:03:30,280
Evolution means Windows Subsystem for Linux, which is open to use of this terminal.

49
00:03:30,280 --> 00:03:35,470
You'll see here is an open two terminal and all the Linux commands on executable on this.

50
00:03:35,920 --> 00:03:37,750
So you might not be having this.

51
00:03:37,750 --> 00:03:43,090
And if you click on Terminal and you open their terminal, you might be opening a command prompt CMD.

52
00:03:43,570 --> 00:03:45,520
But that is totally fine.

53
00:03:45,520 --> 00:03:46,750
That is perfectly OK.

54
00:03:46,930 --> 00:03:50,230
You don't need to worry about it if you are not having a cell.

55
00:03:50,530 --> 00:03:57,960
All of the commands, which I'm going to use today can be executable on WCL or on command prompt the

56
00:03:57,970 --> 00:04:00,610
all I seem, so we don't need to worry about it.

57
00:04:00,980 --> 00:04:07,630
But once you install an audience and PM, you can just check it by running this command, which is once

58
00:04:07,630 --> 00:04:09,010
you have to check the npm.

59
00:04:09,340 --> 00:04:14,740
So if you want to check and permissions, install or not install on a completely new to run this command,

60
00:04:14,740 --> 00:04:17,410
which is npm Spears iPhone, we.

61
00:04:18,700 --> 00:04:22,330
So this will show you the version of the NBN before it's installed.

62
00:04:22,800 --> 00:04:26,080
And as you can see, I'm installing PM, so I will see the wording.

63
00:04:26,080 --> 00:04:31,540
And if the PM is not installed, that means you will get some error and it will show you some error,

64
00:04:31,540 --> 00:04:34,330
like, come on, not recognised or something like that.

65
00:04:34,690 --> 00:04:38,170
But that's an indication that and PM is not installed correctly.

66
00:04:38,380 --> 00:04:43,300
So just install it once again and and be a same I can do for the node.

67
00:04:43,300 --> 00:04:47,500
Also, by tapping the command node hyphen, we.

68
00:04:47,860 --> 00:04:48,940
So you will see it.

69
00:04:49,150 --> 00:04:53,170
I know my node is little, not updated, but it's fine.

70
00:04:53,170 --> 00:04:54,370
It'll work for us.

71
00:04:54,790 --> 00:05:03,040
So I just clear the mess up, and now we're going to create a folder or directory in which all of the

72
00:05:03,040 --> 00:05:04,480
project files will be present.

73
00:05:04,750 --> 00:05:06,860
So let me create are better.

74
00:05:06,880 --> 00:05:07,180
Three.

75
00:05:08,020 --> 00:05:10,980
So I'll type a command which is desired.

76
00:05:10,990 --> 00:05:14,530
This is same for this one, too.

77
00:05:14,530 --> 00:05:15,160
So you can.

78
00:05:15,400 --> 00:05:22,870
If you're on windows, you can create a directory or folder manually, and I will type the name of the

79
00:05:22,870 --> 00:05:26,650
directory so the name you can give any name to the directory.

80
00:05:26,650 --> 00:05:37,030
That's not a compulsion that you need to give it a name, so I'll give as full food or the app would

81
00:05:37,030 --> 00:05:43,630
order up and then I'll hit enter, and then I'll go to this particular directory food.

82
00:05:45,170 --> 00:05:46,930
Order now.

83
00:05:47,200 --> 00:05:52,910
And now I'm inside that directly, and I clear the mess and I'll see now I can see that the food order

84
00:05:52,910 --> 00:05:55,310
app directory is completely empty.

85
00:05:56,420 --> 00:06:00,320
Now what I need to do is I need to install the.

86
00:06:01,500 --> 00:06:02,490
React app.

87
00:06:02,850 --> 00:06:08,610
So how we need to install, react or react project in your computer.

88
00:06:08,970 --> 00:06:13,380
So you need to do this process every time when you create a new React project.

89
00:06:13,740 --> 00:06:19,240
So let me show you the first step of installing or creating a recap.

90
00:06:19,770 --> 00:06:30,050
So you need to tap this command, which is and B x space create React app that is a hyphen in the middle.

91
00:06:30,070 --> 00:06:32,190
Just keep in mind that and then space.

92
00:06:32,190 --> 00:06:37,020
And then this will give the name of the app space.

93
00:06:37,020 --> 00:06:39,100
After space, you have to give the name of the app.

94
00:06:39,120 --> 00:06:43,020
It can be any name you can give any name and inspiring.

95
00:06:43,380 --> 00:06:52,080
Just don't provide spaces that should not be spaces in the name, so I will provide a name like food.

96
00:06:53,280 --> 00:06:58,620
Order the I'll provide the same name, then I will enter.

97
00:06:59,400 --> 00:07:00,360
So.

98
00:07:01,880 --> 00:07:11,750
Now the reactor project is going to install in our folder and you need to just go to that folder and.

99
00:07:13,250 --> 00:07:15,130
Check what other things.

100
00:07:15,170 --> 00:07:18,680
Once the installation is complete, we need to just go back and see.

101
00:07:19,160 --> 00:07:21,820
So this can take up to several minutes.

102
00:07:21,830 --> 00:07:23,440
It can also take five minutes.

103
00:07:23,450 --> 00:07:25,130
It can also take 10 minutes.

104
00:07:25,520 --> 00:07:30,470
So this completely depends on the processing power of your PC.

105
00:07:31,090 --> 00:07:34,400
So for me, it usually takes five to six minutes.

106
00:07:34,790 --> 00:07:39,000
It can take 10 minutes to you for you, or it can even take three minutes for you.

107
00:07:39,020 --> 00:07:41,810
It totally depends on your PC, so don't need to worry.

108
00:07:42,140 --> 00:07:46,580
If it takes a lot, it takes a little more time than usual.

109
00:07:46,850 --> 00:07:51,530
You need to just be patient and just see till the installation is completed.

110
00:07:52,040 --> 00:07:59,450
So if that doesn't work, if this command doesn't work and if you see any error while installing this

111
00:08:00,350 --> 00:08:02,390
command, installing this project.

112
00:08:02,690 --> 00:08:07,340
So that means there is something wrong with the installation of nodes and npm.

113
00:08:07,610 --> 00:08:13,250
So what you need to do is you need to follow the steps again, which I showed you earlier to install

114
00:08:13,250 --> 00:08:14,810
an audience and beam.

115
00:08:15,140 --> 00:08:24,350
So just follow those steps and then come back and then do this as all of the steps freshly and new environment.

116
00:08:24,620 --> 00:08:26,300
So this is what you need to do.

117
00:08:27,330 --> 00:08:34,080
React has been the product has been installed here, and it can take up to several minutes, so once

118
00:08:34,080 --> 00:08:37,170
it's installed, we'll do the rest of the work.

119
00:08:37,290 --> 00:08:41,070
So let's wait till it gets installed on a PC.

120
00:08:43,880 --> 00:08:44,510
Hello, guys.

121
00:08:44,540 --> 00:08:51,050
So now, as you can see, the React app has been installed successfully.

122
00:08:51,410 --> 00:08:56,870
So how do you know if the React app is installed or not successfully?

123
00:08:57,350 --> 00:09:05,600
So once you receive this message which says happy hacking, so this means that the Reset app has been

124
00:09:05,600 --> 00:09:09,740
successfully installed on your folder, which I will hold on you.

125
00:09:10,130 --> 00:09:17,480
You chosen to install so two to check that you need to just turn the command alerts and you can see

126
00:09:17,480 --> 00:09:18,890
a new folder has been created.

127
00:09:18,890 --> 00:09:21,140
Inside are the main folder.

128
00:09:22,010 --> 00:09:26,210
So let's just go into that folder using CD and tab.

129
00:09:26,600 --> 00:09:30,920
So now if I run a less command, you will see all of the.

130
00:09:32,060 --> 00:09:40,850
All of the files and folders which are being created using the using the command, which we run, which

131
00:09:40,850 --> 00:09:43,340
is Create React app.

132
00:09:43,820 --> 00:09:46,260
So this is this was it?

133
00:09:46,280 --> 00:09:49,430
Now let's open this up inside.

134
00:09:49,440 --> 00:09:51,050
Are we escort?

135
00:09:51,380 --> 00:09:52,630
So how will open it?

136
00:09:52,640 --> 00:09:53,600
Just go to this.

137
00:09:54,350 --> 00:10:00,410
Maybe, maybe we can just open it through here, only to open it up from here.

138
00:10:00,950 --> 00:10:06,860
We need to first just run the command, which is forward.

139
00:10:08,490 --> 00:10:13,530
And he's got this will run just hit and.

140
00:10:19,250 --> 00:10:24,440
So now you can see our project folder is being open in the Visual Studio code.

141
00:10:24,830 --> 00:10:29,150
So this is how the project structure looks like.

142
00:10:29,510 --> 00:10:35,900
So this is all given to us from the command and create React app, so I've not even created a single

143
00:10:35,900 --> 00:10:36,380
file.

144
00:10:37,160 --> 00:10:43,910
Now this all files and folders are being created by default from their command and are given to us.

145
00:10:44,300 --> 00:10:49,460
This is a very, very good thing that you do need to create anything in the beginning, so everything

146
00:10:49,460 --> 00:10:51,250
is given to us in the beginning.

147
00:10:51,260 --> 00:10:55,160
So let's just review every folder and files.

148
00:10:55,160 --> 00:10:56,020
What is it?

149
00:10:56,030 --> 00:10:59,900
And let me explain it to you, the folder structure of a React project.

150
00:11:00,530 --> 00:11:04,490
So the first thing here is the node modules.

151
00:11:04,490 --> 00:11:06,770
Two You don't need to touch this folder.

152
00:11:06,770 --> 00:11:09,650
You don't need to open it or delete something from it.

153
00:11:09,890 --> 00:11:14,270
It's a very, very important folder, but you don't need to add or delete anything from this folder.

154
00:11:14,660 --> 00:11:16,880
The next is the public folder.

155
00:11:16,880 --> 00:11:25,340
It contains all of the public information, all of the public files, which are needs to be rendered

156
00:11:25,340 --> 00:11:26,090
in the browser.

157
00:11:26,270 --> 00:11:30,530
So in that in this folder usually does.

158
00:11:30,530 --> 00:11:35,420
The main file, which is important is the index stored file.

159
00:11:35,420 --> 00:11:38,090
This is the only file which is important in this folder.

160
00:11:38,540 --> 00:11:42,800
So as you can see, this is an index or an estimate file, and it's very important to have this file

161
00:11:42,800 --> 00:11:49,170
because when we open a website in the browser, what what we see are like on the browser, it's all

162
00:11:49,170 --> 00:11:49,670
legitimate.

163
00:11:49,670 --> 00:11:55,760
You know, it remains the only thing which gets rendered under which rendered on the browser.

164
00:11:56,090 --> 00:12:03,740
So this is all its HTML and this all comment and all, we don't need this, so we will just remove it

165
00:12:03,740 --> 00:12:07,910
to make things a little bit look a little cleaner.

166
00:12:08,390 --> 00:12:14,240
So you can also do it if you like, but there's no because these are the comments and it doesn't have

167
00:12:14,240 --> 00:12:14,810
any effect.

168
00:12:15,230 --> 00:12:15,590
OK.

169
00:12:15,980 --> 00:12:20,240
Next, we'll go to the SABC folder or the source folder.

170
00:12:20,250 --> 00:12:29,000
This is the most, most, most important folder of our project, and this contains all of the important

171
00:12:29,000 --> 00:12:35,840
information about the project and 99 percent of the time we'll be working on this under this fall.

172
00:12:35,840 --> 00:12:41,240
Not only will be creating some folders and files under this folder only, so you need to be careful

173
00:12:41,510 --> 00:12:42,320
with this folder.

174
00:12:43,320 --> 00:12:48,600
So the first thing is the Applaud CSIS, which is associated with the app or just file, so let me just

175
00:12:48,600 --> 00:12:56,790
explain you the apology as well, so this can be considered as the root root component under which all

176
00:12:56,790 --> 00:12:58,140
the component gets rendered.

177
00:12:59,160 --> 00:13:03,810
So it's like the root component, you know, like any component we create.

178
00:13:03,900 --> 00:13:08,430
So that component will be rendered in this ABDEL-ATI file.

179
00:13:09,670 --> 00:13:14,200
Next, we have our best dogs, so we don't need this.

180
00:13:14,740 --> 00:13:21,690
We have indexed dog index tortoises, which is us, which is associated with index dog Jaspal.

181
00:13:22,000 --> 00:13:26,080
So in the next two days, while you can see the app component has been rendered.

182
00:13:26,320 --> 00:13:32,740
So the root component is is rendered in the index or just flat, but this is at the top level.

183
00:13:33,010 --> 00:13:37,300
So this also has a document or Kettleman by early rule.

184
00:13:37,690 --> 00:13:40,900
So what is this ideal route where this is coming from?

185
00:13:41,170 --> 00:13:46,660
So just remember, we went to the public fall and we went to the index days to measure.

186
00:13:47,170 --> 00:13:55,480
Here we have a day which has an idea of roots, but this is the idea which is used here in the index

187
00:13:55,480 --> 00:13:55,730
dog.

188
00:13:55,950 --> 00:13:59,320
Yes, you can see here this is the idea which is use.

189
00:13:59,800 --> 00:14:07,510
So only to get confused about this comments and all, we have been going to clean it up in just a moment.

190
00:14:07,870 --> 00:14:14,050
So let me first just show you how this project will look if you run this project, how this will look

191
00:14:14,050 --> 00:14:14,620
in your browser.

192
00:14:14,830 --> 00:14:17,680
For that, you need to open the terminal with control.

193
00:14:17,680 --> 00:14:19,870
Plus Bektic and.

194
00:14:21,210 --> 00:14:31,410
You know, to go to this folder, food bring app, and we need to go to the main project folder.

195
00:14:31,890 --> 00:14:36,870
And you can see this all are the things which are present in our folders.

196
00:14:36,880 --> 00:14:46,160
No need to run one simple command to run the server for our project, and that command is npm space

197
00:14:46,170 --> 00:14:49,590
S.T.A.R.T. that to start and just hit enter.

198
00:14:50,070 --> 00:14:55,830
So this will take few seconds to load and this will let OD Server go live.

199
00:14:56,130 --> 00:15:01,860
And it will reflect all of the changes which we make here in the browser so we can just open the link

200
00:15:01,860 --> 00:15:07,860
in the browser of our localhost and all the changes will be reflected right into our browser.

201
00:15:08,220 --> 00:15:10,440
So as you can see, this is starting the development.

202
00:15:10,440 --> 00:15:10,860
So what?

203
00:15:10,860 --> 00:15:17,160
So this will take a few more seconds, and after that we can see our website live on the local host.

204
00:15:18,840 --> 00:15:26,430
And these are all the other things that his backers locked or some packaged or Jason, so need to touch

205
00:15:26,430 --> 00:15:27,360
on any of this.

206
00:15:27,600 --> 00:15:33,600
So as you can see, Assad is a starter and you can see the information here that your server is running

207
00:15:33,600 --> 00:15:34,500
on this.

208
00:15:35,190 --> 00:15:36,630
You are this is a local host.

209
00:15:36,630 --> 00:15:39,240
You are all you can just copy it into the browser.

210
00:15:39,270 --> 00:15:44,310
Or even if you don't, I think it might have been open in the browser.

211
00:15:44,400 --> 00:15:46,290
So just click it and.

212
00:15:47,600 --> 00:15:49,370
Now, let me just open the browser.

213
00:15:50,210 --> 00:15:54,680
Okay, so we are in the browser right now and we open that app.

214
00:15:55,580 --> 00:15:58,970
The URL, which was provided in the terminal.

215
00:15:59,270 --> 00:16:06,320
So this is how the default React project looks into the browser looks like in the browser.

216
00:16:06,500 --> 00:16:12,590
So whenever you install a React project and you, you don't do anything, you don't make any changes

217
00:16:12,590 --> 00:16:16,460
to it and you directly run away, just run the server away.

218
00:16:16,860 --> 00:16:20,870
But this is what we are going to see in the browser.

219
00:16:20,880 --> 00:16:23,510
So this is how it looks in the browser.

220
00:16:23,780 --> 00:16:28,820
So let me just make some changes and show it to you how this actually looks.

221
00:16:28,820 --> 00:16:36,320
If you make some changes, if you just do make some changes to, you know, to the to the project.

222
00:16:37,510 --> 00:16:42,640
So first of all, let me do some cleaning and let me show you what are the things you do need to keep

223
00:16:42,640 --> 00:16:46,870
and you just have to delete the first file here is the app to test firing.

224
00:16:46,870 --> 00:16:54,670
Just select this and then select this low code or as v g, then select this report whitelist and also

225
00:16:54,670 --> 00:16:57,380
select this set up start.

226
00:16:57,430 --> 00:16:57,790
Yes.

227
00:16:58,210 --> 00:17:03,430
Select all of this is in the control and then just delete all of this files.

228
00:17:03,700 --> 00:17:04,600
But be careful.

229
00:17:04,600 --> 00:17:10,960
Don't delete app gorgeous, or just just delete the whatever I am showing you nothing extra than nothing

230
00:17:10,960 --> 00:17:11,560
more than that.

231
00:17:11,830 --> 00:17:15,850
Just delete these or files, OK, then hit.

232
00:17:15,850 --> 00:17:17,200
Delete and just.

233
00:17:18,240 --> 00:17:25,050
And so this will be deleted, as you can see, this is deleted and you will get some errors, of course,

234
00:17:25,050 --> 00:17:29,070
because some file has been deleted and those files were imported somewhere.

235
00:17:29,460 --> 00:17:31,830
So that's why we are getting a no, don't worry.

236
00:17:32,750 --> 00:17:33,500
We figured it out.

237
00:17:33,920 --> 00:17:39,260
So in the app, dodges five, we don't need anything now.

238
00:17:39,890 --> 00:17:45,740
Like, as of now, we don't need anything, so we'll delete all of the things which were provided by

239
00:17:45,740 --> 00:17:47,930
react to us and we'll just write.

240
00:17:49,820 --> 00:17:50,600
Hello.

241
00:17:52,270 --> 00:17:52,750
World.

242
00:17:54,280 --> 00:17:55,270
So and we'll see.

243
00:17:55,960 --> 00:18:01,590
And next we go to our index, talk to us, file and see what are the things we need to change.

244
00:18:02,200 --> 00:18:09,520
So we don't need this report web vitals and we don't need this.

245
00:18:09,910 --> 00:18:16,990
Also, this all will just delete it and then we'll save probably the short run now.

246
00:18:17,020 --> 00:18:22,790
And let me just go to dances and OK, all good here.

247
00:18:23,470 --> 00:18:32,290
And I think something is being important, which is our present, and I can't see it either.

248
00:18:32,650 --> 00:18:33,280
So.

249
00:18:34,300 --> 00:18:40,840
No, go dog, as we say, is being imported somewhere in our app.

250
00:18:42,860 --> 00:18:51,800
So let me just see how this all works and how it's being ordered and.

251
00:18:53,330 --> 00:18:59,660
So we found out that in the gorgeous file that is this logo which is being portrayed, which we have

252
00:18:59,660 --> 00:19:05,330
already deleted, so it cannot find it, so we'll delete this line from here because we don't need that

253
00:19:05,330 --> 00:19:06,140
logo anymore.

254
00:19:06,380 --> 00:19:08,590
And now you can see things are perfect.

255
00:19:08,600 --> 00:19:10,040
And let me just show you.

256
00:19:10,530 --> 00:19:14,960
And let me just go to the browser and show you how this looks now.

257
00:19:15,380 --> 00:19:22,550
So let me just go to the browser and let me just show you how this all looks.

258
00:19:22,910 --> 00:19:26,970
So now I'm in the browser and you can see Hello World, which we dived in.

259
00:19:27,000 --> 00:19:28,130
We can see it.

260
00:19:28,400 --> 00:19:33,560
And now let me just grab something else and let me describe something else and show it to you.

261
00:19:34,970 --> 00:19:46,730
Now, let me just provide an H1 tag, maybe each one, and just taking some time, I don't know why

262
00:19:47,480 --> 00:19:50,120
and but we will write another.

263
00:19:52,780 --> 00:19:54,160
Maybe heading.

264
00:19:56,310 --> 00:20:06,090
So we'll just save it and we'll go to the browser and we'll go to the browser and see, OK, another

265
00:20:06,090 --> 00:20:08,310
heading is being rendered here.

266
00:20:08,640 --> 00:20:11,980
So this is what we need to do now.

267
00:20:12,000 --> 00:20:18,950
We will make changes and we will see the reflected changes in the browser.

268
00:20:18,960 --> 00:20:20,430
So this is what we need to do.

269
00:20:20,670 --> 00:20:25,230
The project structure is like this only discloses publicly that we don't need it.

270
00:20:25,620 --> 00:20:27,540
We don't need to make any changes.

271
00:20:27,870 --> 00:20:35,700
And remember, don't need any other folders or files rather than which are which, I assure you.

272
00:20:36,060 --> 00:20:38,910
OK, so now let me just stop the third one.

273
00:20:39,870 --> 00:20:42,240
And let me just clear all of it.

274
00:20:42,630 --> 00:20:49,860
And now we want to install some more packages, which we are going to need further when we move forward

275
00:20:51,120 --> 00:20:52,350
by creating this project.

276
00:20:52,680 --> 00:20:57,450
The first thing which I told you in the introduction would you also that you need to install?

277
00:20:58,110 --> 00:21:02,400
We will be using Real-Time algorithm for the routing and navigation.

278
00:21:02,760 --> 00:21:12,960
So we will run a command which is called and B and install the act hyphen without the hyphen dom.

279
00:21:13,500 --> 00:21:16,950
So just run this command and head anchor.

280
00:21:18,190 --> 00:21:19,520
But this will be installed.

281
00:21:20,050 --> 00:21:23,350
Installing the crowd at home, who are the project?

282
00:21:24,130 --> 00:21:26,640
This doesn't come by default with react.

283
00:21:26,650 --> 00:21:34,830
So to doing so, you need to install it like by running this command solely so you don't need to worry

284
00:21:34,840 --> 00:21:39,880
just one simple line and then react out or bomb will be installed in your project.

285
00:21:40,570 --> 00:21:44,260
OK, so this will take just few seconds.

286
00:21:44,290 --> 00:21:45,760
Not even more than a minute.

287
00:21:46,210 --> 00:21:49,510
It will just take like 20 to 30 seconds and.

288
00:21:50,730 --> 00:21:56,760
The real crowd or bomb will be installed on your project, so as you can see, it's installed next,

289
00:21:56,760 --> 00:22:03,980
we need to install material way, so let me just take you to the website of the material doorway and

290
00:22:03,990 --> 00:22:04,820
let me just go.

291
00:22:04,840 --> 00:22:06,240
Yeah, it is.

292
00:22:08,950 --> 00:22:14,800
OK, it's opening, but this is the website of material anyway, and this is what we'll be using for

293
00:22:14,800 --> 00:22:16,240
icons in our project.

294
00:22:16,670 --> 00:22:21,020
And remember, material anyway is a really, really important.

295
00:22:21,040 --> 00:22:24,340
Or you can see it's an awesome UI library.

296
00:22:24,340 --> 00:22:30,030
If you're working with the app, you can create forms, you can create have boards and all that.

297
00:22:30,190 --> 00:22:34,300
It provides you a lot of a lot of easy life.

298
00:22:34,780 --> 00:22:37,880
So just you need to install it by this command.

299
00:22:37,900 --> 00:22:46,450
Just click here and it will be copied and you just go back to your VSCO terminal and just just paste

300
00:22:46,450 --> 00:22:46,690
that.

301
00:22:46,690 --> 00:22:49,150
Come on and just press enter.

302
00:22:50,240 --> 00:22:59,150
So this will be installing all of the like material UI components, which we can use any time.

303
00:22:59,650 --> 00:23:02,360
So this will just be installing all of that.

304
00:23:02,780 --> 00:23:10,940
And next, we need to install one more thing, which is material new icons so that the product we need

305
00:23:10,940 --> 00:23:15,830
to run a separate command, how you might be thinking that I am, but and running so much of command.

306
00:23:16,340 --> 00:23:19,780
Don't worry this one, this one would be the last command.

307
00:23:19,780 --> 00:23:24,730
Then we don't return any command like we don't need to install any other like external packages.

308
00:23:24,730 --> 00:23:27,050
Then we'll be working inside our project only.

309
00:23:28,310 --> 00:23:35,120
So let just this install, which is the material way, and then we will be installing the material you

310
00:23:35,180 --> 00:23:45,260
icons, so to speak, so little little time lag because it's like around 10 or 12, maybe, I guess

311
00:23:45,260 --> 00:23:46,400
I don't know exactly.

312
00:23:46,910 --> 00:23:50,030
So this is being done.

313
00:23:50,750 --> 00:23:59,330
Then let me just take you to the to the website of to the reactor outer dome on npm.

314
00:23:59,630 --> 00:24:01,640
Let me just show you how important this is.

315
00:24:01,670 --> 00:24:06,010
You can see on npm, it's like it's downloaded so much.

316
00:24:06,020 --> 00:24:07,970
It's like really, really popular.

317
00:24:07,970 --> 00:24:11,990
And that's why we are using it directly to nominate a website.

318
00:24:12,350 --> 00:24:21,710
So let us just go back to our viewers code and check, OK, it's being installed and now we will install.

319
00:24:23,390 --> 00:24:26,870
Icons, icons, a fun.

320
00:24:27,500 --> 00:24:28,730
To the yellow.

321
00:24:29,090 --> 00:24:35,810
OK, so this unit installed just to have this come on and head down to this will install all the icons

322
00:24:35,810 --> 00:24:38,030
on material way off my of in the eye.

323
00:24:38,040 --> 00:24:41,900
And then you can use it in your project that you can use any of the icons.

324
00:24:41,900 --> 00:24:46,820
So you need to just go to the material to a website and.

325
00:24:48,460 --> 00:24:55,300
Then you can just go to maybe search and then you can go to icons, material icons.

326
00:24:57,070 --> 00:25:02,730
This will provide you the entire list of the icons for which you can use in your project.

327
00:25:03,090 --> 00:25:03,840
So.

328
00:25:05,140 --> 00:25:06,630
Sticking a little time.

329
00:25:08,640 --> 00:25:14,700
Wait till it loads and you can see the entire list of the icons you need to just search here and you

330
00:25:14,700 --> 00:25:20,880
just copy and just copy the code and then imported a new in your code.

331
00:25:21,480 --> 00:25:27,750
So we'll do it, will do it, will do it in our projects or no need to worry about it.

332
00:25:28,050 --> 00:25:35,760
So let's just go back to our base code and let's just see if it's installed.

333
00:25:36,300 --> 00:25:38,010
So this is installing, actually.

334
00:25:39,810 --> 00:25:41,610
Take a few seconds.

335
00:25:41,700 --> 00:25:49,260
Not more than a few seconds, and then we are done with the installation and setup of the environment

336
00:25:49,260 --> 00:25:50,180
of our project.

337
00:25:51,090 --> 00:25:53,550
Every installation will be completed.

338
00:25:53,910 --> 00:25:56,580
This will be the last installation from a third party.

339
00:25:57,480 --> 00:26:00,870
So let's just see how much time it takes and.

340
00:26:02,780 --> 00:26:07,250
Then we are going to go and then will be creating our beautiful website.

341
00:26:07,700 --> 00:26:14,660
So we will be creating the first of all will be like creating components one by one and then we will

342
00:26:14,660 --> 00:26:18,230
be rendering it into the main component.

343
00:26:18,500 --> 00:26:26,090
So till it's done, let me just create a folder here in the source where we will be creating our components.

344
00:26:26,090 --> 00:26:30,830
So I will create a folder for all components.

345
00:26:32,690 --> 00:26:39,560
Enter in the thoughts swirl I've created for it, which is components inside this, I will be creating

346
00:26:39,560 --> 00:26:47,060
the components and then I will be rendering it into the main and main, which is Abdel-Aziz.

347
00:26:47,300 --> 00:26:52,270
So as you can see, the material you icons have been installed.

348
00:26:52,280 --> 00:26:55,570
Now we are done with the installation of you installed the crowd and all.

349
00:26:55,610 --> 00:26:59,390
We're installing material while you install material, new icons.

350
00:26:59,870 --> 00:27:05,030
So we are done with the installation and setting up the environment, setting up our project.

351
00:27:05,330 --> 00:27:12,620
So in the next part, we will be creating that board and then we'll be moving forward to the other components

352
00:27:13,280 --> 00:27:13,790
by then.

353
00:27:14,270 --> 00:27:14,930
So.

354
00:27:16,000 --> 00:27:17,050
See you in the next video.

355
00:27:17,200 --> 00:27:17,590
Thank you.