1
00:00:00,710 --> 00:00:01,880
And everyone and welcome.

2
00:00:02,120 --> 00:00:07,820
So now that we're done with generating and installing the required software and packages, let's start

3
00:00:07,820 --> 00:00:08,660
with the coding bug.

4
00:00:09,050 --> 00:00:12,200
For that, you need to open Visual Studio Code, which is your code editor.

5
00:00:12,530 --> 00:00:18,920
And after opening the just to record, you need to go to the library and click on the terminal and then

6
00:00:18,930 --> 00:00:19,700
the new terminal.

7
00:00:20,390 --> 00:00:26,900
So this will open up the new terminal, and now you need to create a real project since you have not

8
00:00:26,900 --> 00:00:27,980
created an new project.

9
00:00:28,250 --> 00:00:32,340
So now you have to create a bigger project for this particular section.

10
00:00:32,810 --> 00:00:36,530
So if you're new to react, let me just explain you how you have to create.

11
00:00:36,920 --> 00:00:38,900
Let me disclose this another terminal, OK?

12
00:00:39,200 --> 00:00:44,310
So if you're new to react, let me just explaining how to create a React project and if you are a beginner

13
00:00:44,310 --> 00:00:46,320
or intermediate level, no problem with that.

14
00:00:46,830 --> 00:00:49,700
You just brought up with this information.

15
00:00:49,940 --> 00:00:53,780
So you need to tap this command and wherever you are.

16
00:00:53,870 --> 00:01:03,950
So you have to just be at as this like and be X. If you just take this A and B space, create Python,

17
00:01:04,280 --> 00:01:10,610
React Hyphen App space and the name of the project and any name like you can provide any name here.

18
00:01:10,640 --> 00:01:17,420
This is purely a string and any name which you desire to like create the product so you can add that

19
00:01:17,420 --> 00:01:19,190
name and you need to, for example.

20
00:01:20,260 --> 00:01:27,030
But then you need to press and Tony, you just return and then you will be able to create your product.

21
00:01:27,310 --> 00:01:32,440
So after everything and done, this will take at least five to 10 minutes to create the product.

22
00:01:32,440 --> 00:01:33,460
So don't panic.

23
00:01:33,730 --> 00:01:36,220
It will install so many packages and modules.

24
00:01:36,580 --> 00:01:38,620
So this takes around five to 10 minutes.

25
00:01:38,620 --> 00:01:41,680
Ah, depending upon the processing power of your PC.

26
00:01:42,040 --> 00:01:45,190
For me, it takes around five to 10, so it will take for you.

27
00:01:45,190 --> 00:01:46,150
All saw this much only.

28
00:01:46,600 --> 00:01:48,490
Don't worry, and it needs an internet connection.

29
00:01:48,490 --> 00:01:53,770
So before installing this, before running this command, make sure your PC is connected to internet

30
00:01:53,770 --> 00:01:54,280
or Wi-Fi.

31
00:01:55,210 --> 00:02:01,030
OK, so this will take up to five 10 minutes and after you get a message in the terminal, which is

32
00:02:01,030 --> 00:02:01,870
happy hacking.

33
00:02:02,350 --> 00:02:07,240
And if you see that message, that means you have successfully installed or connected your project.

34
00:02:07,600 --> 00:02:11,950
So after that project disclosure, you can just open it with a visual studio code.

35
00:02:12,280 --> 00:02:17,300
And after opening it, you need to just you will able to see something like that.

36
00:02:17,320 --> 00:02:18,580
Some familiar structures like that.

37
00:02:18,910 --> 00:02:23,830
OK, so so you have freshly installed the React project.

38
00:02:23,830 --> 00:02:28,690
You have to first freshly created products, so you will be seeing some more files here, some extra

39
00:02:28,690 --> 00:02:34,630
files here because I have deleted some of the unnecessary files like they are not necessary for, but

40
00:02:34,630 --> 00:02:35,560
for us, they are not.

41
00:02:36,220 --> 00:02:37,450
So I'm going to get those files.

42
00:02:37,450 --> 00:02:42,490
So you will also have to build those files since you've installed and you've created a new product,

43
00:02:42,490 --> 00:02:43,060
new product.

44
00:02:43,510 --> 00:02:48,290
So you'll be having some more extra files here, for example, like an important web, vitals or test

45
00:02:48,420 --> 00:02:49,420
or something like that.

46
00:02:49,660 --> 00:02:54,040
So you need to delete all of them and you need to keep only these files, which up in India.

47
00:02:54,400 --> 00:02:56,890
So let me show you from the beginning, you will have a new audience.

48
00:02:56,890 --> 00:02:58,630
You don't need to touch this folder at all.

49
00:02:59,050 --> 00:03:01,000
Next, we will have a public folder.

50
00:03:01,000 --> 00:03:02,680
You do need to take this folder at all.

51
00:03:03,130 --> 00:03:06,000
And next, we have a sazi or the source for.

52
00:03:06,610 --> 00:03:09,660
So you need to open this folder and you will have such files here.

53
00:03:09,940 --> 00:03:10,630
So you do need.

54
00:03:12,000 --> 00:03:19,110
Just keep this like says he will keep a GST, will keep it next door to see if it's required.

55
00:03:19,110 --> 00:03:23,220
If you don't feel anything like wrong and that you can just keep it or you can just delete it, there's

56
00:03:23,220 --> 00:03:25,170
no need an index or did.

57
00:03:25,170 --> 00:03:26,340
This is very, very important.

58
00:03:26,580 --> 00:03:33,210
Either all these files like baggage or some package lock, Jason, all you need to keep other old files

59
00:03:33,210 --> 00:03:35,940
new to delete, and there's no need to keep them at all.

60
00:03:36,330 --> 00:03:41,910
OK, so once you have deleted all the files and just cleaning up after finishing, cleaning up everything

61
00:03:42,180 --> 00:03:48,390
you need to come to this, which is a.j.'s and your app drawer just to look something like this should

62
00:03:48,390 --> 00:03:49,680
look something like this.

63
00:03:49,680 --> 00:03:55,860
And there will be lot of things like report by vitals on importing the logo and all some logo like logo

64
00:03:56,400 --> 00:03:57,060
dot as we do.

65
00:03:57,270 --> 00:04:03,810
So you need to delete all that and your app drawer just to look like this like simple, cleaner and

66
00:04:03,960 --> 00:04:04,440
crispy.

67
00:04:04,700 --> 00:04:05,910
So it should look like this.

68
00:04:06,150 --> 00:04:11,250
And after your a.j.'s is cleaning finished you with the cleaning?

69
00:04:11,640 --> 00:04:16,860
So let me just check if this app is running on order to also check it like the way I'm checking it.

70
00:04:17,280 --> 00:04:20,250
So provide any testing value here, for example.

71
00:04:20,250 --> 00:04:25,440
Hello, world, and then you need to save it, and then you need to open the terminal so you can open

72
00:04:25,440 --> 00:04:29,430
the terminal with the shortcut, which is a control plus metrics.

73
00:04:29,820 --> 00:04:31,710
OK, so this is the previous command.

74
00:04:31,710 --> 00:04:34,290
Let me just delete it and then.

75
00:04:34,330 --> 00:04:34,690
OK.

76
00:04:35,270 --> 00:04:35,520
Wait.

77
00:04:36,480 --> 00:04:38,910
Uh, let me just clean it.

78
00:04:38,910 --> 00:04:42,870
OK, now you need to go to the folder in which our product is operating.

79
00:04:43,230 --> 00:04:49,710
So after creating the project with and be screened to your tap, you will get a folder in which all

80
00:04:49,710 --> 00:04:54,280
your files and these files will be present to you need to go to was followed up by Sunni.

81
00:04:54,570 --> 00:05:01,860
And for me, this project and then better and hit enter and let me see what are the components in the

82
00:05:02,490 --> 00:05:02,910
folder.

83
00:05:02,910 --> 00:05:06,140
So it is all these files which are here, I can see done.

84
00:05:06,930 --> 00:05:08,130
I can see those files.

85
00:05:08,490 --> 00:05:13,470
And one more thing I am using WCL here, which is Windows Subsystem for Linux.

86
00:05:13,470 --> 00:05:15,270
So basically, this is a Ubuntu terminal.

87
00:05:15,690 --> 00:05:22,710
So chances are high that you might be using a like command prompt or PowerShell, something like that.

88
00:05:23,010 --> 00:05:30,180
So that doesn't affect anything because all the commands which I will be using are exactly the same.

89
00:05:30,540 --> 00:05:36,980
So and then installing the packages running the process and all those commands and everything will be

90
00:05:36,990 --> 00:05:37,410
the same.

91
00:05:37,890 --> 00:05:39,210
So you don't need to worry about that.

92
00:05:39,630 --> 00:05:47,980
And once you are here, you need to just like type this command, which is npm space start and then

93
00:05:48,000 --> 00:05:50,530
start, and then you need to just hit downtown.

94
00:05:50,580 --> 00:05:53,940
So it will take a couple of seconds to start the service.

95
00:05:53,940 --> 00:05:59,970
So this will start start over on relegated port, where you will be able to see all the changes which

96
00:05:59,970 --> 00:06:01,230
you may have made here.

97
00:06:01,230 --> 00:06:04,020
So all the changes will be reflected on that port.

98
00:06:04,620 --> 00:06:06,150
So that search for this.

99
00:06:06,540 --> 00:06:13,230
And let us see what are the what are the things can see on the board?

100
00:06:13,710 --> 00:06:17,880
And this basically you'll see this and OK.

101
00:06:17,880 --> 00:06:24,180
So it shows that compile successfully and we are provided with the port and we have to go to this website

102
00:06:24,180 --> 00:06:29,370
and this you are all basically this is a local host, basically who you really just go to the browser

103
00:06:29,850 --> 00:06:32,010
and you just open.

104
00:06:33,570 --> 00:06:36,270
We just need to just open the.

105
00:06:37,790 --> 00:06:38,600
Open the website.

106
00:06:38,900 --> 00:06:41,750
OK, so it's loaded, and if I refresh it.

107
00:06:43,790 --> 00:06:49,340
This is Halloween, so that was a preview that was the like previous page, which I was demonstrating

108
00:06:49,550 --> 00:06:50,960
in the introduction review.

109
00:06:51,380 --> 00:06:53,650
So this is what we need to see.

110
00:06:53,680 --> 00:07:00,970
Hello, world, because when we go to the Lake View School and after, yes, we have dived, hello world.

111
00:07:01,010 --> 00:07:02,980
So here we are seeing a lowered.

112
00:07:03,950 --> 00:07:09,680
OK, now we have made sure that our app is running and everything is perfect.

113
00:07:10,010 --> 00:07:11,810
So if you have any errors, why?

114
00:07:11,860 --> 00:07:16,190
Because while deleting, there might be some imports which are missed out.

115
00:07:16,190 --> 00:07:22,580
So we just figured it out in the in the terminal only available to see like this import is missing and

116
00:07:22,580 --> 00:07:27,890
this is not defined and that so you need to just tackle it out and everything should look like this.

117
00:07:27,900 --> 00:07:30,280
So after that, you will not have any of the so last minute.

118
00:07:30,900 --> 00:07:33,890
So let me just play this dominant.

119
00:07:35,620 --> 00:07:42,970
And now we have to create components, so as you as we have seen in the introduction, we knew we had

120
00:07:42,970 --> 00:07:48,130
a search component, a surge button and below that we had many of the things like temperature and icons.

121
00:07:48,130 --> 00:07:53,650
And on before that, let me just create a folder that will be components.

122
00:07:55,320 --> 00:08:03,040
Components in the components for another will create a file, which will be that will create two components.

123
00:08:03,060 --> 00:08:09,270
What one will be the third component and the next will be the the component, which will be providing

124
00:08:09,270 --> 00:08:10,710
us all the information.

125
00:08:11,100 --> 00:08:12,800
So here we'll write.

126
00:08:14,660 --> 00:08:17,310
Anything contrived search, I mean, dark?

127
00:08:17,450 --> 00:08:17,840
Yes.

128
00:08:18,560 --> 00:08:23,750
OK, so here we use a cool trick to import our boilerplate code.

129
00:08:25,370 --> 00:08:33,110
So if you haven't started that extension, well, well enough, and if you're not, so let me just take

130
00:08:33,110 --> 00:08:38,260
you to the extension page and come contortion next.

131
00:08:39,050 --> 00:08:39,380
OK.

132
00:08:39,950 --> 00:08:43,990
And you will be able to see this this extension right here.

133
00:08:44,000 --> 00:08:46,800
You need to install this S1 redux.

134
00:08:47,000 --> 00:08:56,870
And this is this will provide you with all the snippets right to react so up and just press control

135
00:08:56,870 --> 00:08:57,410
plus speak.

136
00:08:57,980 --> 00:09:05,270
Or if you are just type R FC and if you get the boilerplate code well enough.

137
00:09:05,270 --> 00:09:07,100
And if you don't, for me, it doesn't work.

138
00:09:07,100 --> 00:09:08,330
I don't know for what reason.

139
00:09:08,720 --> 00:09:09,950
For some reason, it doesn't work.

140
00:09:09,950 --> 00:09:11,960
So let me just press control shift copy.

141
00:09:12,410 --> 00:09:14,750
Then I will get this E7 snippet first.

142
00:09:14,760 --> 00:09:21,260
Then I have to click it and then I have to press R F C and OK.

143
00:09:21,260 --> 00:09:23,870
Well, so we have got the boilerplate code.

144
00:09:23,870 --> 00:09:25,220
So this is the default code.

145
00:09:25,520 --> 00:09:34,910
Inside this, we will write all the code and basically all the GSX and all like based upon the logical

146
00:09:34,910 --> 00:09:35,240
part.

147
00:09:36,400 --> 00:09:39,370
Let's start creating the search component.

148
00:09:39,970 --> 00:09:42,430
So what does a search component generally has?

149
00:09:42,460 --> 00:09:49,000
It has input field in which you type down what you need to be searched and you have a search button

150
00:09:49,000 --> 00:09:51,970
which gets clicked and then all the data we get.

151
00:09:52,480 --> 00:09:54,400
So that's what we are going to create.

152
00:09:54,550 --> 00:10:03,520
So I have already created a CSIS file for this and let me just create the file here and put the coordinate.

153
00:10:03,790 --> 00:10:12,040
So we are not going to like deep dive deep into the CSC because if you go in like the today will be

154
00:10:12,040 --> 00:10:14,110
like five to six hours long and I don't want that.

155
00:10:14,500 --> 00:10:17,590
So let me just paste prosecutions, which I have already created.

156
00:10:18,010 --> 00:10:28,750
And so basically this season's present like in these files, that presents the default, which we'll

157
00:10:28,750 --> 00:10:32,530
be using, and this is the Syrian linked to the icons which we'll be using.

158
00:10:32,860 --> 00:10:38,770
So make sure you have this and you will have it in the C in the C, because you you'll be getting the

159
00:10:38,770 --> 00:10:39,100
code.

160
00:10:39,750 --> 00:10:46,390
So, OK, so we'll be having this and this is all the users, and I'll be explaining it time to time,

161
00:10:46,750 --> 00:10:48,490
but you need to just take a look at this.

162
00:10:48,500 --> 00:10:51,760
So this will be useful for like this.

163
00:10:51,820 --> 00:10:55,830
We are only creating one since Australia, and this one sees us file only.

164
00:10:55,930 --> 00:10:57,820
That will be everything which we need.

165
00:10:58,900 --> 00:10:59,230
OK.

166
00:10:59,710 --> 00:11:07,480
So let me just hit Controller Steve and let me just go to the third main component here and now we will

167
00:11:07,480 --> 00:11:08,350
import that file.

168
00:11:08,900 --> 00:11:15,220
So then if I show you what happens, if I don't import that so mean it would be disruptive and we have

169
00:11:15,220 --> 00:11:16,150
to create our own do.

170
00:11:16,420 --> 00:11:23,680
So our day will be, let me just name it, any class names like rap or wrapper, anything you can name

171
00:11:23,950 --> 00:11:24,820
it completely.

172
00:11:25,810 --> 00:11:31,660
Any class name, which I'm providing here is according like on, according to the CSIS files.

173
00:11:32,120 --> 00:11:37,600
So don't think that these are by default or these only we have to like, provide nor you can provide

174
00:11:37,600 --> 00:11:38,160
anything.

175
00:11:38,560 --> 00:11:44,440
And these are just according to because in this season's files, I've named according to them.

176
00:11:44,590 --> 00:11:45,970
So that is why I am providing this.

177
00:11:46,330 --> 00:11:48,970
You can write anything and make the modifications.

178
00:11:48,970 --> 00:11:49,600
Industriousness?

179
00:11:49,900 --> 00:11:50,430
Nobody.

180
00:11:50,500 --> 00:11:50,830
OK.

181
00:11:51,280 --> 00:11:52,840
So we have tried this frap.

182
00:11:52,840 --> 00:11:56,260
And next we'll be providing a search component.

183
00:11:56,440 --> 00:12:01,090
So search inside this will be providing an input tag.

184
00:12:01,780 --> 00:12:05,680
So and then put back the type will be taxed also.

185
00:12:05,680 --> 00:12:10,990
But we can provide search also because the nation will find they are providing that they have provided

186
00:12:10,990 --> 00:12:14,050
a new value to the recorder to search.

187
00:12:14,140 --> 00:12:15,580
So type in search.

188
00:12:15,910 --> 00:12:17,860
Next, we'll be having a placeholder.

189
00:12:18,250 --> 00:12:25,030
So this will have value of maybe like like type 30 name.

190
00:12:26,370 --> 00:12:27,270
Or something like that.

191
00:12:27,660 --> 00:12:32,190
Next, we'll be having an idea of search.

192
00:12:34,220 --> 00:12:39,680
And excerpt that we provided back last name and everything.

193
00:12:39,980 --> 00:12:41,750
So this is then what will next?

194
00:12:41,750 --> 00:12:43,670
We'll be having Biden.

195
00:12:44,240 --> 00:12:51,020
So we'll be having a button so that will have an hourglass team of search.

196
00:12:52,080 --> 00:12:56,940
Bottom of cable and then will be have having button.

197
00:12:57,980 --> 00:12:58,480
So.

198
00:13:00,130 --> 00:13:05,680
And like if you don't put also it into a day, so it it works, OK, if you don't put into it.

199
00:13:05,980 --> 00:13:10,060
Also, this will cause you to just give a name class name to the button.

200
00:13:10,060 --> 00:13:11,050
So that will also work.

201
00:13:11,500 --> 00:13:15,570
So we'll provide some sort.

202
00:13:17,060 --> 00:13:17,420
Barton.

203
00:13:18,300 --> 00:13:22,220
OK, again, I'm going to the same mistake, I don't know why I'm doing this.

204
00:13:23,030 --> 00:13:23,470
OK?

205
00:13:23,540 --> 00:13:24,970
And they have to provide.

206
00:13:25,730 --> 00:13:27,380
First of all, you need to provide a button.

207
00:13:27,920 --> 00:13:29,420
What is wrong with the internet?

208
00:13:30,200 --> 00:13:30,620
Okay.

209
00:13:31,850 --> 00:13:36,800
And you have to give the class name that will be the last name.

210
00:13:37,250 --> 00:13:41,640
Then you'll provide the name here and you will provide a search button.

211
00:13:41,690 --> 00:13:41,960
OK.

212
00:13:42,560 --> 00:13:47,750
So this will be the button and inside the button you can write search.

213
00:13:49,030 --> 00:13:55,390
But could be or that if you just say and let me check star stories on it.

214
00:13:55,510 --> 00:13:58,840
Yeah, it's stunning and let me just go to the browser and.

215
00:14:00,410 --> 00:14:05,330
What are the things which we see, we see nothing, we see nothing.

216
00:14:05,690 --> 00:14:07,970
So do you know the reason behind this?

217
00:14:09,200 --> 00:14:12,380
Do you know the reason why we are not seeing anything?

218
00:14:12,890 --> 00:14:18,740
So that reason, I tell you in the next, what do you see in the next, do you?