1
00:00:00,750 --> 00:00:06,510
OK, so now what we'll do is we'll see then that all of the components inside the airport just goes

2
00:00:06,510 --> 00:00:11,640
abroad, just file these detailed file, which is responsible for like rendering all of the components

3
00:00:11,640 --> 00:00:12,060
inside.

4
00:00:12,540 --> 00:00:15,200
Or so what we'll do is we'll go inside.

5
00:00:15,210 --> 00:00:18,090
They are gorgeous and we'll render all of that.

6
00:00:18,090 --> 00:00:22,680
We'll provide some more functionality because more functionality is needed right now that all of the

7
00:00:22,680 --> 00:00:29,100
functionality will be provided inside the Proteus, but we need to install one more package that everything

8
00:00:29,100 --> 00:00:30,540
will do in the Abdelhadi.

9
00:00:30,600 --> 00:00:33,060
So let me close this folder and we'll come to ideas.

10
00:00:33,390 --> 00:00:39,600
Right now, we have just basically like done the simple task of like importing and displaying it.

11
00:00:39,930 --> 00:00:41,910
But that's not we are going to do, actually.

12
00:00:42,240 --> 00:00:53,040
So inside this, what we'll do is we create a new state and the concept that we first introduced it.

13
00:00:54,510 --> 00:00:57,090
Who will do the U.S?

14
00:00:57,860 --> 00:00:58,230
State?

15
00:00:59,340 --> 00:01:01,740
And after that.

16
00:01:02,950 --> 00:01:04,390
What we'll do is.

17
00:01:06,150 --> 00:01:07,020
At this concert.

18
00:01:08,160 --> 00:01:12,600
We'll have the north, we'll have the third north.

19
00:01:14,240 --> 00:01:16,560
And we'll have the U.S.

20
00:01:17,420 --> 00:01:17,960
State.

21
00:01:19,410 --> 00:01:21,130
Now, I'll have some dummy data here.

22
00:01:21,150 --> 00:01:25,320
No, this will be an art object study.

23
00:01:27,610 --> 00:01:29,650
So this will be having some dummy data.

24
00:01:30,310 --> 00:01:34,810
Where did the data is that it will be displaying on the screen now?

25
00:01:34,930 --> 00:01:35,890
Why won't the data?

26
00:01:35,890 --> 00:01:36,600
Because it?

27
00:01:38,030 --> 00:01:45,920
Because I want something to be stored like in the court and that be standard on the screen, I don't

28
00:01:45,920 --> 00:01:50,480
want the screen to be blank and divorced when the user comes to it.

29
00:01:50,510 --> 00:01:54,170
So I don't want it to be like blank complete blank stares I.

30
00:01:54,440 --> 00:01:55,630
I'll be providing some data.

31
00:01:55,640 --> 00:01:56,630
So let me just.

32
00:01:58,020 --> 00:01:59,190
What being based on data?

33
00:02:01,180 --> 00:02:07,660
And inside the borders, only there is some good for basically it is this.

34
00:02:08,960 --> 00:02:10,520
Array of objects.

35
00:02:12,430 --> 00:02:13,420
Let me be straight down.

36
00:02:14,080 --> 00:02:14,320
Yeah.

37
00:02:14,770 --> 00:02:15,490
This is the data.

38
00:02:15,670 --> 00:02:18,700
Now you might be noticing what is this new idea inside the city?

39
00:02:18,910 --> 00:02:20,110
So you guessed it right.

40
00:02:20,590 --> 00:02:22,060
This is an external package.

41
00:02:22,060 --> 00:02:24,040
We will be installing this package.

42
00:02:24,370 --> 00:02:30,760
And now what this package will do, it will give a unique I.D. to each and every different post.

43
00:02:31,120 --> 00:02:38,860
And we don't have to write any other malfunction function to do the generating the I.D. and that is

44
00:02:38,860 --> 00:02:40,630
why we just simply use this.

45
00:02:42,290 --> 00:02:44,210
This package here, as simple as that.

46
00:02:44,550 --> 00:02:51,170
So for that to install this package, you have to just open up your terminal using a control perspective

47
00:02:51,960 --> 00:02:59,210
and let me open another set of service already on that terminal and this one.

48
00:03:01,210 --> 00:03:09,190
What you need to do is you need to just go to the terminal and then you can just redirect to your whole

49
00:03:09,340 --> 00:03:09,660
project.

50
00:03:10,480 --> 00:03:12,550
So I have the project a review.

51
00:03:12,670 --> 00:03:16,390
So after coming here, you can just download and install an extension.

52
00:03:16,390 --> 00:03:21,710
Sorry, that is npm install and then no idea.

53
00:03:22,880 --> 00:03:31,480
This is the name of the extension or not extension Tony Beckett and Beckett, so you can just wait until

54
00:03:31,490 --> 00:03:34,550
and it will take just a couple of seconds and it will be installed on the computer.

55
00:03:34,850 --> 00:03:40,490
So I've already done it so that I am not doing it again when admittedly this terminal minimized.

56
00:03:40,940 --> 00:03:43,460
OK, so that is why I have used this.

57
00:03:43,460 --> 00:03:44,260
No, no I.D. No.

58
00:03:44,270 --> 00:03:46,070
I hope you understood why I view this.

59
00:03:46,910 --> 00:03:48,200
What basically what it will do.

60
00:03:48,200 --> 00:03:52,650
It will just create our own like ID of.

61
00:03:54,830 --> 00:04:02,630
Randomized to the every post, every post will have a unique different ID, and it does what it is actually.

62
00:04:03,350 --> 00:04:05,760
So next, we will be moving on.

63
00:04:05,780 --> 00:04:10,220
Now what we need to do next is that they can throw it in a semicolon.

64
00:04:10,590 --> 00:04:13,580
Now we want to fix this search now.

65
00:04:13,790 --> 00:04:14,540
So it's done.

66
00:04:14,810 --> 00:04:18,670
And also for that, I need a contest and we could get another hook.

67
00:04:19,130 --> 00:04:19,920
That would be the.

68
00:04:22,630 --> 00:04:23,200
So it.

69
00:04:25,680 --> 00:04:26,160
Next.

70
00:04:28,830 --> 00:04:30,420
And that would be said.

71
00:04:32,720 --> 00:04:34,910
Surge extra.

72
00:04:35,980 --> 00:04:39,040
And instead of here that will be used to.

73
00:04:40,300 --> 00:04:44,020
And that is in the spring.

74
00:04:45,250 --> 00:04:50,290
Meaning this search term will be having value whatever the user types.

75
00:04:50,680 --> 00:04:58,150
But as the user is not typing and in the initial fees, it will be having the initial value as an empty

76
00:04:58,150 --> 00:04:58,570
spring.

77
00:04:59,050 --> 00:05:03,760
So that's why we have paused here, empty string because it started to use it.

78
00:05:04,420 --> 00:05:06,400
Whatever the value we put here.

79
00:05:06,610 --> 00:05:10,990
So basically, that is the initial value of this particular, really.

80
00:05:11,020 --> 00:05:14,470
But the initial value for this particular variable is an empty string.

81
00:05:14,920 --> 00:05:17,140
So that is what I have done.

82
00:05:17,860 --> 00:05:25,990
Now next, what we'll do is will set the date more cost and we'll create our variable state hook for

83
00:05:25,990 --> 00:05:27,670
the dark mode also.

84
00:05:27,910 --> 00:05:40,300
So that will be the dark, dark, dark mode, and that will be the function to set this to set dark.

85
00:05:41,560 --> 00:05:44,890
And more so this is what we have done.

86
00:05:45,190 --> 00:05:49,090
Next, we'll giving will be giving it our initial value.

87
00:05:49,420 --> 00:05:51,160
What is the initial value U.S?

88
00:05:52,710 --> 00:05:58,560
Straight and initial value, it is false for it, like it is a Boolean value.

89
00:05:59,100 --> 00:06:02,520
Floss false because it is the.

90
00:06:04,230 --> 00:06:09,690
In the beginning, we will be showing the light, the what we learned about the dark motivation only

91
00:06:09,690 --> 00:06:11,700
when the user clicks on the download button.

92
00:06:12,180 --> 00:06:14,640
As simple as that, it is like really simple.

93
00:06:15,120 --> 00:06:19,740
OK, next to what we will do is we will right.

94
00:06:19,770 --> 00:06:20,880
I use effect.

95
00:06:21,220 --> 00:06:22,710
Now what is a huge effect?

96
00:06:23,010 --> 00:06:29,670
What it will do, it will be responsible for the changes or the things which we want to like.

97
00:06:31,580 --> 00:06:38,270
Like display on the very first visit of the user when the user comes and the page loads for the very

98
00:06:38,270 --> 00:06:38,870
first time.

99
00:06:39,560 --> 00:06:45,680
Whatever will be displayed that will be decided through, they are used to subtly use effect and they

100
00:06:45,690 --> 00:06:47,420
decided to let me first important here.

101
00:06:48,020 --> 00:06:51,500
So there will be use effect.

102
00:06:52,420 --> 00:06:54,550
OK, I did that next.

103
00:06:56,430 --> 00:06:57,900
And inside of this.

104
00:07:02,620 --> 00:07:06,070
I'll create the use effect that will be used.

105
00:07:08,820 --> 00:07:09,330
Effect.

106
00:07:10,770 --> 00:07:12,360
Of course, that expression function.

107
00:07:13,770 --> 00:07:15,600
So it will be something like that.

108
00:07:17,230 --> 00:07:19,740
And inside of this, I will have a concert.

109
00:07:21,590 --> 00:07:24,330
That would be saved notes.

110
00:07:25,070 --> 00:07:28,220
That would be equal to the Western diet.

111
00:07:29,560 --> 00:07:30,190
Boss.

112
00:07:32,670 --> 00:07:36,630
And do you want to save it to the local storage local?

113
00:07:38,540 --> 00:07:40,910
Oh, it is darned good.

114
00:07:41,350 --> 00:07:42,010
I don't.

115
00:07:43,120 --> 00:07:44,590
And sort of the thing to be.

116
00:07:47,610 --> 00:07:49,390
And that would be the name of our app.

117
00:07:49,410 --> 00:07:52,080
No, let me see right off.

118
00:07:54,180 --> 00:07:54,780
Why?

119
00:07:56,840 --> 00:07:59,840
I'll be like, you are there are no leaders of no.

120
00:08:01,240 --> 00:08:02,170
But that will be.

121
00:08:03,800 --> 00:08:04,560
The.

122
00:08:08,390 --> 00:08:11,630
Or the review review.

123
00:08:14,340 --> 00:08:14,540
Yeah.

124
00:08:16,150 --> 00:08:18,730
And there's a serene randomly that came of it.

125
00:08:19,340 --> 00:08:21,290
And next, we will be.

126
00:08:22,630 --> 00:08:25,770
Forgiving our dependency it inside this huge effect.

127
00:08:26,040 --> 00:08:32,940
What is our dependency like dependency or is it like whatever the variable instead is under dependency?

128
00:08:33,580 --> 00:08:39,720
The bad with evil is responsible for the function, but execution of the function and side effect,

129
00:08:39,960 --> 00:08:48,690
like whenever that particular variable changes, then or at that time, only this function will be executed.

130
00:08:48,690 --> 00:08:50,180
For example, I come here.

131
00:08:52,160 --> 00:09:00,020
I'll place notes here now whenever the North, this variable changed, so then only this function or

132
00:09:00,050 --> 00:09:04,070
whatever it is that inside this that would be executed, it is as simple as that.

133
00:09:04,950 --> 00:09:07,100
But what we are done with to use effect.

134
00:09:07,670 --> 00:09:11,600
And next, we will be having the add note functionality.

135
00:09:12,020 --> 00:09:15,470
So we will have the original functionality now.

136
00:09:15,470 --> 00:09:17,750
So let us create a function again.

137
00:09:18,590 --> 00:09:19,310
That will be.

138
00:09:20,230 --> 00:09:20,920
And North.

139
00:09:23,540 --> 00:09:25,140
So, Michael, you know, it's going to hurt.

140
00:09:26,100 --> 00:09:27,480
We will have the not.

141
00:09:31,300 --> 00:09:40,900
Head north and then it be taxed and fired as an argument, so software title function on this.

142
00:09:43,150 --> 00:09:50,350
And this one is a federal function, and that will be construed did say it now, you might be wondering

143
00:09:50,350 --> 00:09:56,950
whether that will conform in our application so that they come from this line new.

144
00:10:01,040 --> 00:10:01,430
It.

145
00:10:04,110 --> 00:10:08,160
Yeah, that would be another like new note.

146
00:10:08,250 --> 00:10:11,630
This would be for the new North, so foremost.

147
00:10:13,650 --> 00:10:15,940
You know what?

148
00:10:16,570 --> 00:10:20,110
And this could it be for the I.D.?

149
00:10:21,910 --> 00:10:25,710
And that we look at from the packages reinstalled, that is an NYT.

150
00:10:27,530 --> 00:10:28,010
That's it.

151
00:10:29,450 --> 00:10:35,590
Not to my current commander, remember, don't make this mistake is a common or semicolon, OK?

152
00:10:36,940 --> 00:10:40,930
Well, after the idea that would be taxed, which would be taxed.

153
00:10:44,960 --> 00:10:47,390
And after this, it'll will be the date.

154
00:10:49,170 --> 00:10:50,100
Which will be.

155
00:10:53,160 --> 00:10:56,970
Failed to look strong.

156
00:10:59,010 --> 00:10:59,370
Who?

157
00:11:02,990 --> 00:11:03,800
Local.

158
00:11:06,270 --> 00:11:06,770
It.

159
00:11:08,980 --> 00:11:09,310
Thank.

160
00:11:10,280 --> 00:11:15,320
Now, why I'm getting this better is because I did not provide a comment, and instead I provided the

161
00:11:15,470 --> 00:11:17,210
doc will stop you.

162
00:11:17,490 --> 00:11:20,990
Oh, no problem that it is spellings at all.

163
00:11:21,320 --> 00:11:23,960
It did start to look altered string.

164
00:11:24,950 --> 00:11:26,220
You look all day to.

165
00:11:27,950 --> 00:11:28,250
This.

166
00:11:29,960 --> 00:11:30,220
I.

167
00:11:31,180 --> 00:11:35,290
If come to it, OK, OK, their suit and.

168
00:11:36,950 --> 00:11:38,270
Let me also give the.

169
00:11:39,380 --> 00:11:39,890
Like.

170
00:11:41,560 --> 00:11:43,390
New notes for the for the new notes.

171
00:11:43,870 --> 00:11:47,970
That would be an idea after this, but would it be another let go?

172
00:11:49,090 --> 00:11:55,780
And new words and that will be equal to.

173
00:11:56,980 --> 00:12:03,590
Murdoch and Nord's knew North.

174
00:12:04,590 --> 00:12:09,720
And after that, we will setting it to we will be set in the third.

175
00:12:10,820 --> 00:12:14,640
North and east and north, there will be the.

176
00:12:17,460 --> 00:12:20,730
New norms, and we'll save it.

177
00:12:22,230 --> 00:12:24,470
So that is it.

178
00:12:24,770 --> 00:12:27,580
And this is giving us the new not.

179
00:12:30,270 --> 00:12:36,540
So basically now we are left out with the delayed mode functionality, so that is what we are left out,

180
00:12:36,540 --> 00:12:37,680
so that will do in the next few.