1
00:00:01,560 --> 00:00:07,890
In the previous video, we saw how to the air component industry, you will see the next step of that

2
00:00:08,490 --> 00:00:10,690
that is building this a cleared area component.

3
00:00:11,580 --> 00:00:17,340
So first, we are going to go to the conference and create the new component criteria area.

4
00:00:22,520 --> 00:00:24,260
Fear not, yes.

5
00:00:25,730 --> 00:00:31,970
So once this is created now, we have to do with like the boilerplate coding that you do for every component

6
00:00:32,240 --> 00:00:36,050
that is import react from react.

7
00:00:42,690 --> 00:00:46,710
And then you have to create a function for the create area.

8
00:00:49,080 --> 00:00:51,000
Created a company function.

9
00:00:52,290 --> 00:00:53,850
Create media.

10
00:00:58,970 --> 00:01:00,770
Now it will return.

11
00:01:08,600 --> 00:01:09,910
Was going to do it.

12
00:01:12,040 --> 00:01:12,940
Some text like.

13
00:01:14,360 --> 00:01:16,940
The Bay Area company.

14
00:01:19,530 --> 00:01:21,060
Now you have to export the component.

15
00:01:22,580 --> 00:01:23,210
Export.

16
00:01:24,770 --> 00:01:25,410
Before.

17
00:01:26,820 --> 00:01:28,070
In India.

18
00:01:29,460 --> 00:01:33,270
Once you are done with this boat and not just an important component of cleared area.

19
00:01:36,750 --> 00:01:37,320
And bought.

20
00:01:39,680 --> 00:01:40,400
Create area.

21
00:01:41,950 --> 00:01:45,420
Companies that created so this is like this is why the reason.

22
00:01:46,090 --> 00:01:52,570
Many of the developers using Visual Studio Port, it gives like it has so many what is its snippets

23
00:01:52,570 --> 00:02:01,120
and function like the extensions that it becomes very handy for the developers, such as auto filling

24
00:02:01,120 --> 00:02:06,520
or sometimes auto filling the class names out of language, HTML element of link, some lines of code

25
00:02:06,850 --> 00:02:07,360
and everything.

26
00:02:07,360 --> 00:02:11,260
So this is the reason why Visual Studio code is better for like.

27
00:02:11,270 --> 00:02:15,340
You can also use other other ideas such as ATM and everything.

28
00:02:15,520 --> 00:02:20,800
But I would prefer Visual Studio Port if you start if you are a basic, basic developer.

29
00:02:21,280 --> 00:02:22,870
Yes, just getting started with the basics.

30
00:02:23,320 --> 00:02:25,290
OK, now let's go into this medium.

31
00:02:25,960 --> 00:02:32,260
So here, after inputting the criteria now variable, we have to use off the hand that we need to have

32
00:02:32,260 --> 00:02:33,580
this clear data component type.

33
00:02:34,570 --> 00:02:35,550
Appeared.

34
00:02:40,590 --> 00:02:47,670
So, yeah, so once this is done now, if you open, you can see like we have got the creative component

35
00:02:48,570 --> 00:02:50,720
that we have in the created at the that.

36
00:02:51,390 --> 00:02:58,110
So now we don't want the pics like we want a form that takes the title that takes the content and everything

37
00:02:58,560 --> 00:03:01,650
so that we build here and remove this.

38
00:03:02,760 --> 00:03:07,100
And now from Class Glassman should be create not.

39
00:03:10,540 --> 00:03:12,520
OK, so no need of action.

40
00:03:13,180 --> 00:03:15,430
No, it's not so fun.

41
00:03:17,370 --> 00:03:20,940
It will be a class name will be.

42
00:03:22,250 --> 00:03:22,970
It's not.

43
00:03:23,660 --> 00:03:26,900
And then if we need to have input inside, there's a.

44
00:03:28,240 --> 00:03:28,840
Farm, right?

45
00:03:29,290 --> 00:03:30,280
So we'll have the input.

46
00:03:35,260 --> 00:03:37,150
And what type will be next?

47
00:03:37,750 --> 00:03:38,890
The name will be title.

48
00:03:39,970 --> 00:03:45,250
The name of the college told the title of the note that we are making on change.

49
00:03:48,070 --> 00:03:52,030
So this will see in the coming few minutes.

50
00:03:53,080 --> 00:03:56,370
So place holder should be Typekit.

51
00:03:58,720 --> 00:04:03,910
I do some indentation so that it knocks the cord looks for me.

52
00:04:12,490 --> 00:04:15,580
So, yeah, so this is then now offer their input.

53
00:04:15,730 --> 00:04:17,080
We need to have the text in.

54
00:04:19,240 --> 00:04:20,160
Xperia.

55
00:04:21,550 --> 00:04:29,290
Everything should be monitored, so let me Typekit exterior exterior name will be content, the content

56
00:04:29,290 --> 00:04:33,640
of the novel and then it knows and everything.

57
00:04:34,210 --> 00:04:37,040
No need to specify columns means press federal should be.

58
00:04:40,560 --> 00:04:41,940
So once this is done.

59
00:04:45,260 --> 00:04:46,220
We just invented.

60
00:04:52,180 --> 00:04:55,540
It is a pulling back, so you can simply use this.

61
00:04:59,520 --> 00:04:59,970
So, yeah.

62
00:05:02,710 --> 00:05:06,130
OK, so those are a lot of strong.

63
00:05:07,690 --> 00:05:07,910
Yeah.

64
00:05:08,380 --> 00:05:11,770
So now after we finish the important exterior.

65
00:05:13,370 --> 00:05:16,250
We'll have the text directed all to have a placeholder.

66
00:05:17,890 --> 00:05:19,960
The big unknown.

67
00:05:21,540 --> 00:05:25,520
As you can see here in our episode, we're having taken place on.

68
00:05:27,790 --> 00:05:32,760
So now, once you open this door, you can see we ought be having a Typekit that having a take note,

69
00:05:32,770 --> 00:05:36,040
this can be expanded, but the default will be three rows.

70
00:05:36,430 --> 00:05:40,400
If you're going to expand it, you can and then rows and columns are going to expand it using this,

71
00:05:41,170 --> 00:05:41,890
you know, add over.

72
00:05:42,100 --> 00:05:45,790
But once you're different, the default, when the page loads by default, it will have three rows.

73
00:05:46,120 --> 00:05:56,350
But it looks like to me like it looks to be honest, it looks very bad or something like many of the

74
00:05:56,350 --> 00:05:57,280
developers won't like.

75
00:05:57,280 --> 00:05:58,930
This kind of bait should be very neat.

76
00:05:58,930 --> 00:06:01,000
As you can see here, it should be very proper.

77
00:06:01,300 --> 00:06:03,670
But that really is styling in a short period of time.

78
00:06:04,150 --> 00:06:07,570
But before that, we want to see like.

79
00:06:09,060 --> 00:06:13,820
We want to show the value that we are typing into the title and take a note so that we can store the

80
00:06:14,010 --> 00:06:17,430
note object like to some edit or kind of stuff.

81
00:06:17,790 --> 00:06:19,770
So for that, we need to use that books.

82
00:06:20,460 --> 00:06:21,930
Now the concept of books comes.

83
00:06:28,620 --> 00:06:28,980
So.

84
00:06:30,270 --> 00:06:30,840
Function.

85
00:06:32,340 --> 00:06:33,450
And they'll change.

86
00:06:36,870 --> 00:06:38,130
This will take a moment.

87
00:06:38,880 --> 00:06:45,120
First, let me finish writing the code, and then I'll explain line by line what that does.

88
00:06:46,750 --> 00:06:47,380
Concert.

89
00:06:48,680 --> 00:06:50,330
Name, common value.

90
00:06:53,010 --> 00:06:54,170
Even not.

91
00:07:09,580 --> 00:07:10,780
Said not.

92
00:07:12,370 --> 00:07:15,170
We'll be taking the previous note.

93
00:07:19,050 --> 00:07:21,180
And then when need done the new object?

94
00:07:24,210 --> 00:07:28,500
This is the spirit operator will discuss, like waterboarding, this ferry operator, why I'd be using

95
00:07:28,500 --> 00:07:28,770
this.

96
00:07:29,210 --> 00:07:33,150
Carl, what does even target written everything with?

97
00:07:33,150 --> 00:07:35,280
See everything after I finish writing the code?

98
00:07:35,730 --> 00:07:36,900
That's right, accord with me.

99
00:07:36,930 --> 00:07:37,740
Parallels with that.

100
00:07:37,920 --> 00:07:41,070
Once you also finish like we can discuss what happened.

101
00:07:47,460 --> 00:07:48,330
Previous not.

102
00:07:50,800 --> 00:07:51,250
Name.

103
00:07:52,530 --> 00:07:53,740
Would be like.

104
00:08:00,220 --> 00:08:01,440
There's no change and no.

105
00:08:11,520 --> 00:08:14,790
Is equals to use a state that in the state took.

106
00:08:16,990 --> 00:08:22,720
It will have to approve to properties likely will be in default and then.

107
00:08:25,020 --> 00:08:26,010
Content will be.

108
00:08:33,490 --> 00:08:36,840
So one more like before we finish, you know?

109
00:08:38,520 --> 00:08:39,660
On change.

110
00:08:40,910 --> 00:08:42,860
We have to call the function and then change.

111
00:08:45,090 --> 00:08:46,110
The same thing over here.

112
00:08:47,110 --> 00:08:51,600
Don Change really called the change, and also the value will be.

113
00:08:53,160 --> 00:08:54,090
No doubt, Typekit.

114
00:09:01,150 --> 00:09:01,870
The same thing here.

115
00:09:02,950 --> 00:09:04,740
Just copy this lengthy.

116
00:09:09,360 --> 00:09:13,050
And then, Jane, there's a Bible no doctor on.

117
00:09:20,240 --> 00:09:23,540
So we have to import the EU's debt and import that.

118
00:09:29,240 --> 00:09:30,200
Well, it's not the.

119
00:09:31,490 --> 00:09:31,790
So.

120
00:09:42,110 --> 00:09:42,440
What?

121
00:09:44,250 --> 00:09:47,820
So we cannot simply import react and hooks in a single line itself.

122
00:09:49,060 --> 00:09:52,300
Because everything is from reactor only to.

123
00:09:53,480 --> 00:09:54,620
Use multiple lines.

124
00:09:58,420 --> 00:10:01,200
So some now what we have done is.

125
00:10:02,660 --> 00:10:05,540
Until now, what we did, we just today created a big studio.

126
00:10:05,930 --> 00:10:09,200
But how to track the changes happening inside them?

127
00:10:09,680 --> 00:10:15,800
For example, if I'm typing something, for example, if I type in some random thing, the value should

128
00:10:15,800 --> 00:10:18,460
keep punching whenever something is changing into text.

129
00:10:18,890 --> 00:10:21,500
So that is why we are introducing the concept of books here.

130
00:10:22,040 --> 00:10:28,430
What is basically the meaning of this sentence is we are creating a variable.

131
00:10:28,880 --> 00:10:32,030
You know, as in programming, there are variables that can bend some value.

132
00:10:32,480 --> 00:10:39,560
So this note is a variable and set note is a function that is used to change the value of this variable.

133
00:10:40,100 --> 00:10:40,520
OK.

134
00:10:41,540 --> 00:10:44,030
That we are defining using this use, Jacob.

135
00:10:44,840 --> 00:10:47,390
So initially you started contents.

136
00:10:47,390 --> 00:10:48,750
What does this note contain?

137
00:10:48,770 --> 00:10:50,510
This is a variable, but what it contains?

138
00:10:50,900 --> 00:10:56,210
This contains a JavaScript object that like this content, for example, if you will give inside your

139
00:10:56,210 --> 00:11:02,930
straight book and set off for all of this, if you give up simple, empty audit, not contents and be

140
00:11:02,930 --> 00:11:03,140
added.

141
00:11:03,380 --> 00:11:08,930
But as of now, your giving object object with two properties, one title and content.

142
00:11:09,320 --> 00:11:14,720
So this note is a variable that contains a JavaScript object with two properties title and content.

143
00:11:15,500 --> 00:11:18,020
By default, this the title ambitions.

144
00:11:18,350 --> 00:11:22,160
And now, whenever you want to change this node value, you can use that.

145
00:11:22,460 --> 00:11:23,720
You can change that by using the set.

146
00:11:23,720 --> 00:11:29,240
Not so this is what the user is doing, basically on change.

147
00:11:29,510 --> 00:11:34,460
So whenever they input, the user is typing something on the input, for example, if I am typing something

148
00:11:34,460 --> 00:11:36,380
over it, that means on change.

149
00:11:36,380 --> 00:11:38,180
That means it is changing rapidly.

150
00:11:38,510 --> 00:11:43,670
Whenever I type a new key or in a new letter, then it is changing the input.

151
00:11:44,390 --> 00:11:50,210
So on changing moves, whenever the input is changing inside this input element, then we are we are

152
00:11:50,270 --> 00:11:50,660
calling.

153
00:11:50,660 --> 00:11:55,760
Basically, you handle change function since handwriting is a JavaScript function without specifying

154
00:11:55,760 --> 00:11:57,110
that exactly basis.

155
00:11:57,440 --> 00:12:01,880
So instead of double whenever we want to use Dallas script as you normally would be using calibrates.

156
00:12:02,600 --> 00:12:04,610
So now what does this handle change function?

157
00:12:04,610 --> 00:12:06,440
Missouri is staking it even.

158
00:12:06,710 --> 00:12:10,100
What is the even even that is triggering that this function?

159
00:12:10,430 --> 00:12:14,480
So basically, what is the event that is triggering the function that is typing some text by some use

160
00:12:14,490 --> 00:12:20,180
that that is though it can be kind of the server use that somebody is typing detection is a triggering

161
00:12:20,180 --> 00:12:20,300
thing.

162
00:12:20,300 --> 00:12:22,340
Even this even has a target.

163
00:12:22,640 --> 00:12:25,160
This target has full value properties.

164
00:12:25,370 --> 00:12:32,750
One is name and address value, so if you want to pin them, you can bring the console.

165
00:12:33,890 --> 00:12:34,550
Not long.

166
00:12:35,730 --> 00:12:41,880
Even got target, so now I'll show you in our developer council.

167
00:12:42,930 --> 00:12:43,300
You've been the.

168
00:12:44,730 --> 00:12:49,080
And then you find out something you can see whenever I'm typing a new letter entering a new letter.

169
00:12:49,350 --> 00:12:50,370
I see an example.

170
00:12:50,700 --> 00:12:51,630
I'll clear this.

171
00:12:57,590 --> 00:12:58,310
OK, so now.

172
00:12:59,400 --> 00:13:05,590
Whenever I type a new, for example, at Typekit, when I type it, then you can send, you know, some

173
00:13:05,730 --> 00:13:06,930
something is console.log.

174
00:13:07,290 --> 00:13:12,380
So when you are selecting this, this put this input as a baby's, as a name, as a placeholder.

175
00:13:12,390 --> 00:13:13,050
This has a value.

176
00:13:13,620 --> 00:13:16,290
But out of this, everything we want naming value.

177
00:13:16,770 --> 00:13:18,660
So that is why we are distributing them.

178
00:13:19,050 --> 00:13:25,170
Restructuring means even though Target is an object that contains many, many properties like name,

179
00:13:25,170 --> 00:13:27,330
value, place, then everything out of that.

180
00:13:27,330 --> 00:13:28,530
We want domain name and value.

181
00:13:28,920 --> 00:13:32,250
So we have to use those names to be structure the same names.

182
00:13:32,640 --> 00:13:38,790
But when we are using like when we want to, you know, take information from our area, then no need

183
00:13:38,790 --> 00:13:39,720
to use these brackets.

184
00:13:39,720 --> 00:13:45,060
We can simply use square brackets and the name can be anything but object B structuring it should be

185
00:13:45,060 --> 00:13:49,830
the name of the property owner, so name the rating from the human target name.

186
00:13:50,130 --> 00:13:53,100
It is a starting and said this name variable and value the same.

187
00:13:54,470 --> 00:13:58,670
So name and value basically out of even target name and even target dog value.

188
00:13:59,270 --> 00:13:59,930
So now.

189
00:14:01,150 --> 00:14:05,800
Here, Signal, we are using signal that means we are changing, they're, you know, they're not,

190
00:14:07,210 --> 00:14:11,470
as I said before this, not content stable and content with different ambition.

191
00:14:11,890 --> 00:14:13,330
So we're calling the signal.

192
00:14:13,720 --> 00:14:17,620
Well, basically previous means previous, not content.

193
00:14:17,770 --> 00:14:22,090
This is the parameter that we are sending to set, not this content.

194
00:14:22,090 --> 00:14:25,600
The value of the previous note that previously value.

195
00:14:25,810 --> 00:14:30,940
That means, for example, I'm having something, you know, text messages, the value currently.

196
00:14:31,970 --> 00:14:36,260
Now I'm typing a new letter called one when I typed one.

197
00:14:36,560 --> 00:14:38,870
That was the change that something changed.

198
00:14:39,110 --> 00:14:40,190
So on it will call.

199
00:14:40,190 --> 00:14:41,360
This had a change function.

200
00:14:41,660 --> 00:14:43,430
It would take name and value from the target.

201
00:14:43,730 --> 00:14:47,930
Now the previous model with the previous year, and that is the best test.

202
00:14:48,050 --> 00:14:51,380
And then it will call this function and it will return the previous date.

203
00:14:51,380 --> 00:14:52,010
Not best.

204
00:14:52,310 --> 00:14:54,410
And also extra name value.

205
00:14:54,410 --> 00:14:55,130
That is one.

206
00:14:55,760 --> 00:14:56,090
OK.

207
00:14:56,120 --> 00:14:58,930
This gives that extra thing that has added newly.

208
00:14:59,270 --> 00:15:05,180
So one basically we are giving the previous value and then also concatenating with the new value.

209
00:15:05,840 --> 00:15:06,170
OK.

210
00:15:06,500 --> 00:15:11,300
This we are basically taking in all, you know, the previous.

211
00:15:11,300 --> 00:15:14,540
So we have like start saving it and said they're not variable.

212
00:15:14,930 --> 00:15:15,830
And we are returning it.

213
00:15:16,250 --> 00:15:22,000
So every time we are changing the input, this change the note value chain and the note that island,

214
00:15:22,010 --> 00:15:26,420
not the content, we are giving it to the value of the input because it should be saying write an input.

215
00:15:26,420 --> 00:15:27,650
What is the value dissolving?

216
00:15:27,650 --> 00:15:31,010
It should be the same as the note or title of content.

217
00:15:31,250 --> 00:15:32,690
This is basically good programming.

218
00:15:33,020 --> 00:15:34,290
This is what we are doing, basically.

219
00:15:35,090 --> 00:15:37,140
We are handling the changes, right?

220
00:15:37,160 --> 00:15:38,180
Why this is important.

221
00:15:38,540 --> 00:15:44,840
This is important because whenever we are clicking on enter, that means the data is now we are having

222
00:15:44,840 --> 00:15:46,490
that, we are getting hold of the data.

223
00:15:46,700 --> 00:15:53,360
The note what that what the user want to give, like want to have to do the blue note so that we can

224
00:15:53,360 --> 00:15:54,050
add to our order.

225
00:15:54,560 --> 00:16:00,110
So this note object, we can add to our idea and it said, and then we can say it again as a b empty

226
00:16:00,110 --> 00:16:00,470
object.

227
00:16:01,070 --> 00:16:02,840
So that is why it is very important.

228
00:16:02,840 --> 00:16:06,550
And also books are used so that it does not depend.

229
00:16:06,560 --> 00:16:12,070
It does not disturb the Boulder web page, for example, of another type, as you saw in console.log.

230
00:16:12,080 --> 00:16:18,650
Like when I type a word here, only that, you know, the consolidated log is up, nothing is getting

231
00:16:18,650 --> 00:16:19,130
refreshed.

232
00:16:19,520 --> 00:16:20,590
So that is the beauty of it.

233
00:16:20,610 --> 00:16:22,490
It works on books and the components.

234
00:16:22,790 --> 00:16:29,150
But I believe the required components and the required things on the web page gets reloaded or refreshed,

235
00:16:29,150 --> 00:16:30,380
but not the pitch.

236
00:16:30,790 --> 00:16:36,710
So these are basic understanding of of books and, you know, previous values, shipping quotes and

237
00:16:36,710 --> 00:16:37,760
this is a separate operator.

238
00:16:38,060 --> 00:16:44,570
Split operator means to get hold back, to get hold of all the previous note like, you know, copy

239
00:16:44,570 --> 00:16:49,160
and paste in the previous value privacy notice, a variable the contents of information, the copy and

240
00:16:49,160 --> 00:16:52,130
paste that will be using the spread operator.

241
00:16:53,570 --> 00:16:56,900
So this is what we have done in this video.

242
00:16:57,220 --> 00:17:03,430
The next reader will see like adding, like creating a new warrior for that, you know, to keep the

243
00:17:03,440 --> 00:17:04,790
hold of all the true items.

244
00:17:05,270 --> 00:17:12,170
And whenever the user clicks on submit to add that node inside it and also deleting that note that two

245
00:17:12,170 --> 00:17:12,980
items from that it.

246
00:17:13,400 --> 00:17:17,420
This and the styling part of the scene now it's looks somewhat ugly.

247
00:17:18,020 --> 00:17:21,890
So we'll do the styling and everything in the next in the coming weeks.