1
00:00:00,390 --> 00:00:07,220
OK, now let's go to the audience and configure all of the things, all of the components and letters

2
00:00:07,410 --> 00:00:09,200
to the global context inside it.

3
00:00:09,570 --> 00:00:15,870
And let us grab all the components and configure all of them, according to our application.

4
00:00:16,870 --> 00:00:19,480
So let us go to yes.

5
00:00:20,350 --> 00:00:28,660
And here we are in the Middle Ages, and all it will do is first, let us start importing whatever we

6
00:00:28,660 --> 00:00:29,050
need.

7
00:00:29,470 --> 00:00:35,290
So the very first thing we'll do is we'll import the use context and the use of.

8
00:00:37,150 --> 00:00:40,420
Use effect, fact and use context.

9
00:00:40,960 --> 00:00:41,230
Yeah.

10
00:00:42,590 --> 00:00:49,370
And now we'll import all of the components as well, so buttons is already important.

11
00:00:49,580 --> 00:00:52,430
The button and we'll import the import.

12
00:00:54,190 --> 00:00:55,870
Gone down.

13
00:00:56,500 --> 00:01:00,130
Animation from Countdown Animation.

14
00:01:01,450 --> 00:01:09,640
Next, we'll be importing the set set Pomodoro from the set from one component.

15
00:01:12,570 --> 00:01:20,910
And after this, we'll be importing these settings and text from the global context, which is inside

16
00:01:20,910 --> 00:01:24,030
the context world to import.

17
00:01:28,720 --> 00:01:31,330
Things can set context.

18
00:01:33,040 --> 00:01:33,700
From.

19
00:01:37,220 --> 00:01:40,980
Context and settings context.

20
00:01:41,010 --> 00:01:41,330
Cool.

21
00:01:42,120 --> 00:01:45,170
So that is what we actually wanted to do next.

22
00:01:45,830 --> 00:01:51,080
Inside the app function, we will create all of the JavaScript code, which we need help.

23
00:01:51,350 --> 00:01:54,680
So like the use effect and the use context and everything like that.

24
00:01:55,250 --> 00:01:55,580
OK.

25
00:01:56,120 --> 00:02:03,230
So let me create a constant concern of this that will be all of it, like the Pomodoro.

26
00:02:06,330 --> 00:02:06,660
And.

27
00:02:08,750 --> 00:02:12,760
Spellings stay on the rule.

28
00:02:13,860 --> 00:02:15,540
And they will be executing.

29
00:02:19,160 --> 00:02:25,970
Executing start animate and it would be the children.

30
00:02:27,560 --> 00:02:28,790
Will be these dark.

31
00:02:30,680 --> 00:02:31,360
I might.

32
00:02:32,260 --> 00:02:33,820
And there will be the.

33
00:02:35,830 --> 00:02:36,520
Because.

34
00:02:40,750 --> 00:02:43,900
I'm sure there will be the update.

35
00:02:47,060 --> 00:02:50,660
I see to it will be set.

36
00:02:53,190 --> 00:02:55,590
Current climate.

37
00:02:58,210 --> 00:02:59,620
Said, I don't.

38
00:03:01,590 --> 00:03:03,390
Time and these are things important.

39
00:03:07,870 --> 00:03:15,820
Is sittings between now this will be equal to the global context, equal to U.S?

40
00:03:17,730 --> 00:03:19,770
Use context and start of this.

41
00:03:20,420 --> 00:03:20,660
The.

42
00:03:22,420 --> 00:03:23,080
Are things can.

43
00:03:24,460 --> 00:03:24,910
This one?

44
00:03:26,250 --> 00:03:26,520
Well.

45
00:03:27,540 --> 00:03:30,710
You save it to make it a defector.

46
00:03:31,540 --> 00:03:32,190
Okay.

47
00:03:32,970 --> 00:03:37,500
After that, we'll be making use of the use effect hook.

48
00:03:38,370 --> 00:03:42,290
And let me first type it out and then I'll explain what is the use effect?

49
00:03:44,800 --> 00:03:46,780
And this expect to function basically.

50
00:03:48,790 --> 00:03:49,270
So.

51
00:03:51,340 --> 00:03:52,180
All of this.

52
00:03:55,310 --> 00:03:55,880
We'll do.

53
00:03:58,310 --> 00:04:00,750
Is a state.

54
00:04:02,860 --> 00:04:08,980
This one did execute and sort of this phenotype executing.

55
00:04:10,020 --> 00:04:20,730
And all the dependency area will be containing two variables that is the sea cube thing, and the next

56
00:04:20,730 --> 00:04:22,440
is the start.

57
00:04:23,610 --> 00:04:29,880
Animation or animated, sorry, animate other time explaining what is the use context?

58
00:04:30,490 --> 00:04:35,200
OK, and what does it basically to use effect three?

59
00:04:36,800 --> 00:04:44,540
Now, use of fact is used to make the function execute according to a proper condition like.

60
00:04:45,870 --> 00:04:51,810
Inside of this variety function, and it also has a clean up function to just clean up the previous

61
00:04:51,810 --> 00:04:52,020
one.

62
00:04:52,560 --> 00:04:58,950
Now inside of this, we like gala function all we can also write the function.

63
00:04:59,340 --> 00:05:00,750
So here I have quite a function.

64
00:05:01,230 --> 00:05:04,200
Now what it will do is it will execute this function.

65
00:05:04,820 --> 00:05:10,530
Know how many times or at what point of time this.

66
00:05:12,080 --> 00:05:13,730
Function needs to be executed.

67
00:05:14,240 --> 00:05:16,130
What is the condition for this to be executed?

68
00:05:16,160 --> 00:05:17,010
What is the time?

69
00:05:17,810 --> 00:05:21,140
So this is defined by this particular dependency.

70
00:05:21,860 --> 00:05:28,420
Now whatever is the variable inside this that it is one to three, like no matter how many are there,

71
00:05:28,620 --> 00:05:29,330
it doesn't matter.

72
00:05:29,840 --> 00:05:37,670
So the execution of this function depends on the changes happening in this particular variable or these

73
00:05:37,670 --> 00:05:38,840
particular variables.

74
00:05:39,680 --> 00:05:46,010
So whenever these two variables will change, this function will be executed as simple as that.

75
00:05:46,340 --> 00:05:49,130
Now what if we left this dependency empty?

76
00:05:49,820 --> 00:05:56,650
So that simply means that this function needs to be executed only on the like the refreshing of the

77
00:05:56,660 --> 00:06:02,480
page when the page is being rendered, that time when the user opens the website with the benefit of

78
00:06:02,480 --> 00:06:06,860
time, that time this should be executed and then it should not be executed.

79
00:06:08,360 --> 00:06:12,590
This means when the dependency on it is empty.

80
00:06:12,650 --> 00:06:16,010
OK, so the original you understood.

81
00:06:17,200 --> 00:06:18,270
Let's come to the region.

82
00:06:19,870 --> 00:06:20,950
Go inside the written.

83
00:06:22,600 --> 00:06:27,100
Let me first delete everything and write things from scratch.

84
00:06:27,610 --> 00:06:31,750
So here I will write our day with the class name of container.

85
00:06:34,310 --> 00:06:34,670
Cool.

86
00:06:35,240 --> 00:06:43,700
So inside this container, Dave, there will be an H1 tag inside, this will be writing the full moon

87
00:06:43,700 --> 00:06:44,840
total.

88
00:06:46,330 --> 00:06:46,620
Well.

89
00:06:48,190 --> 00:06:56,650
And after that, that will be the small tag because we want to write this text in it and also be.

90
00:06:58,630 --> 00:06:59,540
Productive.

91
00:07:00,610 --> 00:07:02,110
The right.

92
00:07:03,250 --> 00:07:03,670
We.

93
00:07:05,010 --> 00:07:06,060
After this small.

94
00:07:08,290 --> 00:07:09,520
We have a condition.

95
00:07:11,980 --> 00:07:15,250
Like, I'm not a big one.

96
00:07:17,980 --> 00:07:22,590
Homeowners who don't want to know if this is low.

97
00:07:24,070 --> 00:07:26,620
Not true equal to zero.

98
00:07:29,760 --> 00:07:31,140
Then what will happen?

99
00:07:32,060 --> 00:07:39,270
So this question mark and after that, the condition, what will happen to inside of here, we'll ride,

100
00:07:39,800 --> 00:07:42,020
we'll call this component to this sect.

101
00:07:43,040 --> 00:07:50,630
Pomodoro, so this this component, this call now, what if this is not true, what this is false.

102
00:07:51,250 --> 00:07:54,810
So often this will also come up.

103
00:07:56,220 --> 00:07:57,840
Poland, Oregon, Tacoma.

104
00:07:58,140 --> 00:08:01,140
And inside of this, we'll ride our Dave.

105
00:08:02,980 --> 00:08:04,240
So basically.

106
00:08:07,830 --> 00:08:08,850
Inside this do.

107
00:08:10,480 --> 00:08:12,280
There will be unordered list.

108
00:08:14,920 --> 00:08:15,310
So.

109
00:08:17,450 --> 00:08:23,960
Inside Israel, there will be an honorary list with the class name of the class name.

110
00:08:24,890 --> 00:08:29,540
Like as we go label members.

111
00:08:30,840 --> 00:08:38,070
So inside this unordered list that is an ally and DNA is important.

112
00:08:39,650 --> 00:08:44,570
Which burden which we have imported, which we have already created inside the.

113
00:08:47,860 --> 00:08:53,050
Inside the component, this is not the normally steel mill button or not another word.

114
00:08:53,200 --> 00:08:57,550
This is the component with the button component, which we created right here.

115
00:08:59,090 --> 00:09:03,260
This one, and we also importantly, you can see this.

116
00:09:03,620 --> 00:09:06,740
This one is this is this button company.

117
00:09:07,400 --> 00:09:15,790
So now insiders inside the bottom, there will be a title like we are giving the values to the props.

118
00:09:15,950 --> 00:09:16,610
Nothing else.

119
00:09:18,840 --> 00:09:30,360
Work next will be giving the active glass to glass, and that is equal to executing.

120
00:09:31,910 --> 00:09:32,360
Dark.

121
00:09:33,500 --> 00:09:34,130
Active.

122
00:09:36,150 --> 00:09:37,350
Equal equal to.

123
00:09:39,140 --> 00:09:39,710
Work.

124
00:09:40,980 --> 00:09:41,550
And.

125
00:09:43,460 --> 00:09:45,230
That will be the active label.

126
00:09:49,940 --> 00:09:52,190
Or undefined?

127
00:09:55,340 --> 00:09:56,060
That's not true.

128
00:09:56,270 --> 00:10:01,370
This is undefined now after we finish with this.

129
00:10:05,550 --> 00:10:07,560
We will add up, call that function.

130
00:10:09,200 --> 00:10:12,660
So this is the callback callback back and.

131
00:10:14,430 --> 00:10:15,450
It's sequel to.

132
00:10:18,300 --> 00:10:22,770
It's for this group and in fact, at all function.

133
00:10:24,560 --> 00:10:28,010
Inside this, there will be a set cutting timer to work.

134
00:10:29,760 --> 00:10:34,200
Said current time and will pass inside, there's a string that is brought.

135
00:10:35,150 --> 00:10:35,540
OK.

136
00:10:36,320 --> 00:10:36,800
All right.

137
00:10:37,640 --> 00:10:39,050
Let me factor this cold.

138
00:10:46,550 --> 00:10:50,420
After this alive, we will have another ally.

139
00:10:52,260 --> 00:11:01,650
And that will be for these short to be the weekend, basically just copy this a lie and pasted down

140
00:11:01,650 --> 00:11:02,070
here.

141
00:11:03,720 --> 00:11:05,510
We will make some changes.

142
00:11:05,520 --> 00:11:08,220
The title will be short break.

143
00:11:11,970 --> 00:11:15,300
Short break and this will be short.

144
00:11:18,410 --> 00:11:20,420
Deliver on the phone and head, it will be sharp.

145
00:11:23,500 --> 00:11:23,820
OK.

146
00:11:24,530 --> 00:11:28,940
OK, so next, we'll be having the list for the long one.

147
00:11:29,030 --> 00:11:31,610
OK, so the this one is done.

148
00:11:32,840 --> 00:11:33,740
Let me copy this.

149
00:11:35,570 --> 00:11:36,140
And.

150
00:11:38,070 --> 00:11:44,550
After this, we'll be having for the long break, we will ride it, whatever we are doing, we will

151
00:11:44,550 --> 00:11:46,590
ride to will ride.

152
00:11:48,160 --> 00:11:52,330
Instead of shortages will do long, long.

153
00:11:52,810 --> 00:11:54,400
And here it will be long.

154
00:11:57,510 --> 00:12:03,060
And available fame, undefined callback function and started this, that will be long.

155
00:12:05,900 --> 00:12:08,110
OK, so long.

156
00:12:10,190 --> 00:12:14,810
Now, after the list is over, after the unordered list is all, there will be a button.

157
00:12:15,240 --> 00:12:18,380
Now they're just for these settings to open up these settings, OK?

158
00:12:19,430 --> 00:12:22,760
So we'll call the button component, obviously.

159
00:12:24,360 --> 00:12:26,190
But what we call the button.

160
00:12:29,780 --> 00:12:33,200
And inside this, there will be a title.

161
00:12:35,700 --> 00:12:37,000
Which will be equal to.

162
00:12:38,600 --> 00:12:39,380
Settings.

163
00:12:40,100 --> 00:12:48,740
And there's a callback, and this callback will be for these settings button.

164
00:12:51,120 --> 00:12:51,990
This one, right, too.

165
00:12:52,530 --> 00:12:52,890
OK.

166
00:12:53,640 --> 00:13:04,350
Next, we will be having a bag with a class name of diamond container, so we will create that single

167
00:13:04,380 --> 00:13:05,070
day back.

168
00:13:06,170 --> 00:13:08,300
So maybe we can do that in the next do.