1
00:00:01,320 --> 00:00:02,880
‫Let's finish this section

2
00:00:02,880 --> 00:00:06,150
‫with the three most important lifecycle methods,

3
00:00:06,150 --> 00:00:10,800
‫which our component did mount, component did update,

4
00:00:10,800 --> 00:00:13,090
‫and component will unmount.

5
00:00:14,850 --> 00:00:17,760
‫And we are going to use these lifecycle methods

6
00:00:17,760 --> 00:00:22,020
‫to implement two more features into our application.

7
00:00:22,020 --> 00:00:26,913
‫So first of all, we want to search for weather as we type.

8
00:00:27,780 --> 00:00:29,783
‫So for example, as I keep typing

9
00:00:29,783 --> 00:00:33,660
‫it will then search basically for different locations

10
00:00:33,660 --> 00:00:36,990
‫until I arrive at something that I want.

11
00:00:36,990 --> 00:00:38,247
‫So notice that we don't have

12
00:00:38,247 --> 00:00:40,890
‫the search weather button here anymore,

13
00:00:40,890 --> 00:00:43,140
‫but instead, each time that I type,

14
00:00:43,140 --> 00:00:45,693
‫a new search will be fired off.

15
00:00:46,530 --> 00:00:48,180
‫So that's one of the features,

16
00:00:48,180 --> 00:00:51,330
‫and the other one is as I reload the page now,

17
00:00:51,330 --> 00:00:54,210
‫then you see that we get the exact same location

18
00:00:54,210 --> 00:00:55,560
‫that we had before.

19
00:00:55,560 --> 00:00:58,800
‫And so, that's because we store this location here

20
00:00:58,800 --> 00:01:00,210
‫in local storage

21
00:01:00,210 --> 00:01:03,870
‫each time that we type a new location in here.

22
00:01:03,870 --> 00:01:06,540
‫So, let's now use lifecycle methods

23
00:01:06,540 --> 00:01:08,763
‫to implement these two features.

24
00:01:09,930 --> 00:01:14,070
‫So, lifecycle methods are essentially special methods

25
00:01:14,070 --> 00:01:17,280
‫that all React components get access to,

26
00:01:17,280 --> 00:01:20,100
‫and which we can use to run side effects

27
00:01:20,100 --> 00:01:23,760
‫at different points of the component lifecycle.

28
00:01:23,760 --> 00:01:28,200
‫And the most important points of the lifecycle are mounting,

29
00:01:28,200 --> 00:01:32,310
‫re-rendering, and unmounting of the component.

30
00:01:32,310 --> 00:01:34,500
‫So we already talked about these before

31
00:01:34,500 --> 00:01:37,980
‫when we first talked about the use effect hook.

32
00:01:37,980 --> 00:01:39,360
‫Right?

33
00:01:39,360 --> 00:01:43,230
‫Now, the lifecycle methods are not exactly the same thing

34
00:01:43,230 --> 00:01:46,440
‫as the use effect hook in function components;

35
00:01:46,440 --> 00:01:49,500
‫but they are the closest similar thing that we have

36
00:01:49,500 --> 00:01:51,480
‫in class components.

37
00:01:51,480 --> 00:01:56,283
‫And so let's now start with the component did mount method.

38
00:01:57,840 --> 00:02:00,243
‫So let's just specify that one here.

39
00:02:01,740 --> 00:02:05,160
‫So component did mount,

40
00:02:05,160 --> 00:02:08,490
‫and so this is really just another method.

41
00:02:08,490 --> 00:02:10,920
‫And as the name of the method says,

42
00:02:10,920 --> 00:02:14,490
‫this one is called immediately after rendering.

43
00:02:14,490 --> 00:02:17,640
‫So basically, after the dom has been created,

44
00:02:17,640 --> 00:02:21,840
‫just like a use effect hook with the empty dependency array.

45
00:02:21,840 --> 00:02:25,110
‫And so this is the ideal place to perform

46
00:02:25,110 --> 00:02:29,130
‫some initial side effects as the component loads.

47
00:02:29,130 --> 00:02:32,460
‫So what we can do here, as the component renders,

48
00:02:32,460 --> 00:02:37,383
‫and first mounts, is to call our fetch weather method.

49
00:02:39,270 --> 00:02:41,370
‫Okay? And so what this will do

50
00:02:41,370 --> 00:02:44,400
‫is that as soon as the app is loaded

51
00:02:44,400 --> 00:02:47,670
‫it'll immediately start fetching for the weather.

52
00:02:47,670 --> 00:02:50,283
‫And indeed, that's exactly what happened here.

53
00:02:51,240 --> 00:02:54,630
‫Now this only works because we have Lisbon here

54
00:02:54,630 --> 00:02:57,150
‫as a predefined location string,

55
00:02:57,150 --> 00:02:59,340
‫but this is just to demonstrate

56
00:02:59,340 --> 00:03:03,420
‫how this lifecycle method here works.

57
00:03:03,420 --> 00:03:05,520
‫So again, this is not exactly the same

58
00:03:05,520 --> 00:03:08,130
‫as the use effect hook, but the closest thing

59
00:03:08,130 --> 00:03:11,829
‫that we can imagine this being is a use effect

60
00:03:11,829 --> 00:03:14,490
‫with the empty dependency array.

61
00:03:14,490 --> 00:03:18,153
‫So only running on mount but not on re-renders.

62
00:03:19,298 --> 00:03:21,570
‫Okay, but speaking of re-renders

63
00:03:21,570 --> 00:03:25,683
‫of course we also have a lifecycle method for that event.

64
00:03:26,520 --> 00:03:31,293
‫And so that one is called component did update.

65
00:03:33,000 --> 00:03:34,200
‫All right?

66
00:03:34,200 --> 00:03:36,960
‫Now what's special about this method

67
00:03:36,960 --> 00:03:39,780
‫is that React actually gives it access

68
00:03:39,780 --> 00:03:43,053
‫to the previous state and the previous props.

69
00:03:44,190 --> 00:03:46,960
‫So the first argument is the previous props

70
00:03:48,090 --> 00:03:51,063
‫and the second one is the previous state.

71
00:03:51,930 --> 00:03:56,580
‫And so this is then a bit similar to the use effect hook

72
00:03:56,580 --> 00:04:00,120
‫with some variable here in the dependency array.

73
00:04:00,120 --> 00:04:03,300
‫For example, we can now use these previous state

74
00:04:03,300 --> 00:04:06,660
‫here to check if the location has changed.

75
00:04:06,660 --> 00:04:09,990
‫And so, that's then similar to having a use effect

76
00:04:09,990 --> 00:04:13,590
‫with location in the dependency array.

77
00:04:13,590 --> 00:04:16,170
‫The difference is that this method right here

78
00:04:16,170 --> 00:04:18,120
‫is not called on mount.

79
00:04:18,120 --> 00:04:20,280
‫So really only on re-render,

80
00:04:20,280 --> 00:04:21,930
‫while this use effect

81
00:04:21,930 --> 00:04:25,380
‫would of course also be called on mount.

82
00:04:25,380 --> 00:04:26,680
‫So, on the initial render.

83
00:04:27,690 --> 00:04:31,710
‫So, as I was saying, we can now compare the current state

84
00:04:31,710 --> 00:04:33,690
‫with the previous state.

85
00:04:33,690 --> 00:04:36,993
‫So, this dot state dot location,

86
00:04:37,830 --> 00:04:39,150
‫if it's different,

87
00:04:39,150 --> 00:04:41,793
‫so if it has changed across renders,

88
00:04:42,840 --> 00:04:45,213
‫then we can do something.

89
00:04:46,770 --> 00:04:50,550
‫And of course we can also not do this comparison

90
00:04:50,550 --> 00:04:52,320
‫and not even do anything

91
00:04:52,320 --> 00:04:55,320
‫with this previous date or the previous props.

92
00:04:55,320 --> 00:04:57,480
‫But in this case we actually need them,

93
00:04:57,480 --> 00:04:59,880
‫because now what we want to do

94
00:04:59,880 --> 00:05:03,030
‫is to again fetch the weather

95
00:05:03,030 --> 00:05:04,890
‫in case that the new location

96
00:05:04,890 --> 00:05:07,233
‫is different from the previous one.

97
00:05:08,250 --> 00:05:11,730
‫And so this will then basically enable us to search

98
00:05:11,730 --> 00:05:13,683
‫for the weather as we type.

99
00:05:16,830 --> 00:05:19,890
‫So, you see it's already working.

100
00:05:19,890 --> 00:05:22,140
‫So it's doing exactly the same thing

101
00:05:22,140 --> 00:05:24,213
‫as before in our demo app.

102
00:05:25,110 --> 00:05:28,020
‫Now, one downside that you can immediately see

103
00:05:28,020 --> 00:05:31,500
‫is that our fetching logic here is now spread

104
00:05:31,500 --> 00:05:34,560
‫across these two lifecycle methods.

105
00:05:34,560 --> 00:05:38,880
‫So, fetching the weather on mount and also on re-render.

106
00:05:38,880 --> 00:05:41,040
‫And so, then we need to call this function here

107
00:05:41,040 --> 00:05:42,750
‫in two places.

108
00:05:42,750 --> 00:05:46,050
‫Now that's not a big deal of course in the situation

109
00:05:46,050 --> 00:05:48,000
‫but in real world applications,

110
00:05:48,000 --> 00:05:50,850
‫this used to be really a big problem.

111
00:05:50,850 --> 00:05:53,580
‫So, we used to have logic that belongs together

112
00:05:53,580 --> 00:05:56,790
‫spread out over these different methods.

113
00:05:56,790 --> 00:06:00,030
‫So, that then makes the code a lot harder to understand

114
00:06:00,030 --> 00:06:02,220
‫and to use effect actually solved

115
00:06:02,220 --> 00:06:03,690
‫some of these problems.

116
00:06:03,690 --> 00:06:05,370
‫Again, because this one here.

117
00:06:05,370 --> 00:06:08,340
‫So this effect like this would run both

118
00:06:08,340 --> 00:06:11,310
‫on mount and on re-render.

119
00:06:11,310 --> 00:06:15,780
‫But anyway, we can now remove this button here

120
00:06:15,780 --> 00:06:17,673
‫as we now no longer need it.

121
00:06:19,500 --> 00:06:21,900
‫Alright, what we can also remove

122
00:06:21,900 --> 00:06:23,430
‫to make this a bit more real,

123
00:06:23,430 --> 00:06:26,403
‫is of course this initial location.

124
00:06:29,040 --> 00:06:31,320
‫But this will now give us a problem

125
00:06:31,320 --> 00:06:34,170
‫because right now on the component mount

126
00:06:34,170 --> 00:06:36,900
‫this will still attempt to fetch the weather;

127
00:06:36,900 --> 00:06:39,450
‫even though right now we have no location.

128
00:06:39,450 --> 00:06:42,150
‫And so actually, in this particular case,

129
00:06:42,150 --> 00:06:43,620
‫it doesn't make any sense

130
00:06:43,620 --> 00:06:46,710
‫to even fetch the weather as the component mounts.

131
00:06:46,710 --> 00:06:49,020
‫So I will now remove this from here

132
00:06:49,020 --> 00:06:51,840
‫but it was still important to understand initially

133
00:06:51,840 --> 00:06:54,900
‫how this lifecycle method here works;

134
00:06:54,900 --> 00:06:58,053
‫and we will actually need it again here in a minute.

135
00:06:58,980 --> 00:07:00,930
‫But now let's just reload here,

136
00:07:00,930 --> 00:07:04,260
‫and so then we don't get that error anymore,

137
00:07:04,260 --> 00:07:07,620
‫but we still get now this error.

138
00:07:07,620 --> 00:07:11,373
‫And first, that's because this one here doesn't exist.

139
00:07:12,720 --> 00:07:14,880
‫But let's try that again.

140
00:07:14,880 --> 00:07:16,650
‫And, so here, now the problem is

141
00:07:16,650 --> 00:07:18,870
‫that there was no location found.

142
00:07:18,870 --> 00:07:22,590
‫So this API only starts searching for something

143
00:07:22,590 --> 00:07:26,670
‫if we have at least two characters in our string.

144
00:07:26,670 --> 00:07:30,720
‫So, let's quickly fix that by coming here into this function

145
00:07:30,720 --> 00:07:35,635
‫and we can just say if this dot state dot location

146
00:07:35,635 --> 00:07:40,623
‫dot length is less than two, then just return.

147
00:07:41,520 --> 00:07:44,310
‫So, then just don't do anything.

148
00:07:44,310 --> 00:07:47,640
‫And so now, yeah, now that's fixed.

149
00:07:47,640 --> 00:07:51,870
‫And again, as we keep typing, it'll then show us the weather

150
00:07:51,870 --> 00:07:53,703
‫for those different locations.

151
00:07:55,320 --> 00:07:56,460
‫Okay.

152
00:07:56,460 --> 00:07:57,300
‫Great.

153
00:07:57,300 --> 00:08:00,750
‫And now what we want to do is that feature where

154
00:08:00,750 --> 00:08:03,933
‫it will remember our location in local storage.

155
00:08:04,890 --> 00:08:07,530
‫So, how are we going to do that?

156
00:08:07,530 --> 00:08:11,490
‫Well, basically each time that we type a new character here

157
00:08:11,490 --> 00:08:14,910
‫we want to store the location into local storage.

158
00:08:14,910 --> 00:08:16,770
‫And so then once again,

159
00:08:16,770 --> 00:08:19,860
‫the component did update lifecycle method

160
00:08:19,860 --> 00:08:22,980
‫is the perfect place for doing that.

161
00:08:22,980 --> 00:08:25,020
‫So, besides fetching the weather,

162
00:08:25,020 --> 00:08:29,163
‫we also want local storage dot set item.

163
00:08:31,770 --> 00:08:33,657
‫Let's call this one location.

164
00:08:33,657 --> 00:08:36,840
‫And then what we want to store there is

165
00:08:36,840 --> 00:08:38,580
‫this, dot

166
00:08:38,580 --> 00:08:39,990
‫state

167
00:08:39,990 --> 00:08:41,520
‫dot location.

168
00:08:41,520 --> 00:08:43,380
‫And since this is already a string,

169
00:08:43,380 --> 00:08:46,353
‫we don't even need to convert it to a string.

170
00:08:47,670 --> 00:08:48,810
‫And so,

171
00:08:48,810 --> 00:08:51,060
‫now as we keep typing,

172
00:08:51,060 --> 00:08:52,990
‫let's check out our

173
00:08:54,960 --> 00:08:56,350
‫application tab here

174
00:08:57,450 --> 00:08:59,070
‫with a bit more space,

175
00:08:59,070 --> 00:09:02,340
‫and then indeed, here we have faro

176
00:09:02,340 --> 00:09:05,220
‫in the local storage right now.

177
00:09:05,220 --> 00:09:07,090
‫And so, all we have to do now

178
00:09:08,280 --> 00:09:12,330
‫because right now of course we don't get that value yet.

179
00:09:12,330 --> 00:09:15,300
‫And so what we have to do now is to read that value

180
00:09:15,300 --> 00:09:18,630
‫from local storage as the component mounts.

181
00:09:18,630 --> 00:09:22,350
‫And so the perfect place for that is again

182
00:09:22,350 --> 00:09:25,563
‫or component did mount lifecycle method.

183
00:09:26,610 --> 00:09:30,360
‫So, here we will want to set our state,

184
00:09:30,360 --> 00:09:34,410
‫based on that data that's coming from local storage.

185
00:09:34,410 --> 00:09:36,640
‫So this dot set state

186
00:09:37,650 --> 00:09:40,833
‫and then remember it always needs to be an object here.

187
00:09:42,390 --> 00:09:44,433
‫So with the location property,

188
00:09:45,540 --> 00:09:47,670
‫and then simply local storage

189
00:09:47,670 --> 00:09:49,330
‫dot get item

190
00:09:50,190 --> 00:09:52,743
‫from the key of location.

191
00:09:53,760 --> 00:09:56,190
‫Now, when we run this up for the first time

192
00:09:56,190 --> 00:09:59,280
‫there won't be no local storage yet

193
00:09:59,280 --> 00:10:00,900
‫at least not with this key.

194
00:10:00,900 --> 00:10:04,233
‫And so let's then set a default off an empty string.

195
00:10:05,700 --> 00:10:07,593
‫Okay? And there it is.

196
00:10:08,640 --> 00:10:12,240
‫So, let's reload here and then that's working great.

197
00:10:12,240 --> 00:10:15,570
‫So, let's just analyze what happens here.

198
00:10:15,570 --> 00:10:17,970
‫So, as the component is mounted,

199
00:10:17,970 --> 00:10:20,100
‫it will then read this value here

200
00:10:20,100 --> 00:10:23,040
‫from local storage right here.

201
00:10:23,040 --> 00:10:25,350
‫So, in this lifecycle method.

202
00:10:25,350 --> 00:10:27,270
‫So, this then sets the state,

203
00:10:27,270 --> 00:10:30,210
‫which will in turn re-render the component.

204
00:10:30,210 --> 00:10:32,460
‫And so, then after that re-render,

205
00:10:32,460 --> 00:10:36,090
‫the component did update method will get called.

206
00:10:36,090 --> 00:10:38,430
‫And so that's where we then fetch the weather

207
00:10:38,430 --> 00:10:41,790
‫because of course the new location will be different

208
00:10:41,790 --> 00:10:43,470
‫than the previous one.

209
00:10:43,470 --> 00:10:46,290
‫But if we copy this, for example,

210
00:10:46,290 --> 00:10:48,750
‫and then just paste the same thing here,

211
00:10:48,750 --> 00:10:52,560
‫then the new state is the same as the current one.

212
00:10:52,560 --> 00:10:55,140
‫And so then nothing happened here.

213
00:10:55,140 --> 00:10:57,600
‫Great. So this is how we work

214
00:10:57,600 --> 00:11:01,170
‫with lifecycle methods in a very simple way.

215
00:11:01,170 --> 00:11:03,690
‫So just again, some simple examples

216
00:11:03,690 --> 00:11:05,970
‫but that's all we need right here.

217
00:11:05,970 --> 00:11:09,390
‫And now to finish, let's just take one more minute to talk

218
00:11:09,390 --> 00:11:11,610
‫about another lifecycle method

219
00:11:11,610 --> 00:11:15,720
‫which is the component will unmount method.

220
00:11:15,720 --> 00:11:18,210
‫So this one is a bit less important

221
00:11:18,210 --> 00:11:21,300
‫but let's just mention it here as well.

222
00:11:21,300 --> 00:11:22,620
‫Now this component,

223
00:11:22,620 --> 00:11:26,228
‫so the app component will actually never unmount,

224
00:11:26,228 --> 00:11:29,100
‫so it doesn't make sense to use it here.

225
00:11:29,100 --> 00:11:31,410
‫So, let's do it here in the weather

226
00:11:31,410 --> 00:11:35,223
‫because of course, this component will sometimes not exist.

227
00:11:36,360 --> 00:11:38,220
‫So, when there is no string here

228
00:11:38,220 --> 00:11:40,413
‫then there's also no weather component.

229
00:11:41,400 --> 00:11:46,400
‫So, we can just then use component will unmount.

230
00:11:47,280 --> 00:11:49,620
‫And so doing this is very similar

231
00:11:49,620 --> 00:11:54,420
‫to returning a cleanup function from a effect function.

232
00:11:54,420 --> 00:11:57,720
‫The difference is that this one really only runs

233
00:11:57,720 --> 00:11:59,700
‫after the component unmounts,

234
00:11:59,700 --> 00:12:02,940
‫so after it disappears and is destroyed,

235
00:12:02,940 --> 00:12:05,340
‫not between renders.

236
00:12:05,340 --> 00:12:10,140
‫So again, this lifecycle method is mostly used to clean up

237
00:12:10,140 --> 00:12:13,890
‫after some effects, which in this case we don't really have,

238
00:12:13,890 --> 00:12:16,800
‫and so there's not really any meaningful thing

239
00:12:16,800 --> 00:12:18,150
‫that we can do here.

240
00:12:18,150 --> 00:12:20,700
‫So, let's just log something through the console

241
00:12:20,700 --> 00:12:21,843
‫just to show you.

242
00:12:22,980 --> 00:12:27,060
‫So, weather will unmount,

243
00:12:27,060 --> 00:12:28,680
‫or is unmounting,

244
00:12:28,680 --> 00:12:29,930
‫it doesn't really matter.

245
00:12:31,260 --> 00:12:32,163
‫All right?

246
00:12:33,990 --> 00:12:37,200
‫So again, between renders, this is not running

247
00:12:37,200 --> 00:12:38,970
‫so it's not doing anything.

248
00:12:38,970 --> 00:12:43,110
‫But then well, nothing happens actually.

249
00:12:43,110 --> 00:12:46,260
‫So our weather didn't even disappear

250
00:12:46,260 --> 00:12:50,400
‫but that's just because we probably have some problem here.

251
00:12:50,400 --> 00:12:51,690
‫So let's come back here

252
00:12:51,690 --> 00:12:55,770
‫to the function where we fetch this data.

253
00:12:55,770 --> 00:12:58,140
‫And so here, what we want to do instead

254
00:12:58,140 --> 00:13:00,360
‫is to not only return,

255
00:13:00,360 --> 00:13:05,340
‫but also just set the state to empty weather again.

256
00:13:05,340 --> 00:13:10,120
‫Basically doing return this dot set state

257
00:13:11,220 --> 00:13:16,220
‫and then the weather should basically be reset

258
00:13:16,560 --> 00:13:18,333
‫to an empty object.

259
00:13:19,620 --> 00:13:21,813
‫So, let's try that again.

260
00:13:23,520 --> 00:13:24,720
‫Okay.

261
00:13:24,720 --> 00:13:29,280
‫And then now we saw that the component disappeared

262
00:13:29,280 --> 00:13:33,240
‫and so then the component will unmount method was called

263
00:13:33,240 --> 00:13:37,020
‫and therefore we got this log here in our console.

264
00:13:37,020 --> 00:13:39,150
‫And so, this again would be ideal

265
00:13:39,150 --> 00:13:43,320
‫to clean up after some side effects that we created.

266
00:13:43,320 --> 00:13:44,760
‫So not really the case here,

267
00:13:44,760 --> 00:13:47,610
‫but now you know that this method exists

268
00:13:47,610 --> 00:13:51,060
‫and that it's one of the three most important ones

269
00:13:51,060 --> 00:13:52,440
‫I would say.

270
00:13:52,440 --> 00:13:55,650
‫Now if we write again here component,

271
00:13:55,650 --> 00:13:59,062
‫you see that there are many other lifecycle methods,

272
00:13:59,062 --> 00:14:01,290
‫but these are not that important,

273
00:14:01,290 --> 00:14:03,720
‫and so therefore we will not talk about that

274
00:14:03,720 --> 00:14:08,720
‫here in this basically crash course of class components.

275
00:14:09,000 --> 00:14:11,430
‫So, remember that the goal of this section

276
00:14:11,430 --> 00:14:13,560
‫was not for you to really learn

277
00:14:13,560 --> 00:14:17,310
‫how to write these class-based components on your own,

278
00:14:17,310 --> 00:14:19,710
‫but more to understand how they work

279
00:14:19,710 --> 00:14:22,830
‫and what they look like in case you ever come across

280
00:14:22,830 --> 00:14:25,260
‫some of them in your work.

281
00:14:25,260 --> 00:14:29,580
‫In case that company still maintains some old code base.

282
00:14:29,580 --> 00:14:32,430
‫So, that's perfectly possible thing to happen.

283
00:14:32,430 --> 00:14:34,290
‫And, so, I thought it was a good idea

284
00:14:34,290 --> 00:14:35,910
‫to include this section here

285
00:14:35,910 --> 00:14:39,480
‫so that you can be prepared for that possible future.

286
00:14:39,480 --> 00:14:41,190
‫And now if you feel like it,

287
00:14:41,190 --> 00:14:44,190
‫you could actually convert this entire application

288
00:14:44,190 --> 00:14:46,710
‫back to function components.

289
00:14:46,710 --> 00:14:49,980
‫So, I think that would be a really, really great exercise

290
00:14:49,980 --> 00:14:53,310
‫for you to practice everything that we have learned

291
00:14:53,310 --> 00:14:54,660
‫up until this point,

292
00:14:54,660 --> 00:14:56,640
‫including understanding even better

293
00:14:56,640 --> 00:14:59,280
‫how these class components work.

294
00:14:59,280 --> 00:15:00,720
‫So, in case you do that,

295
00:15:00,720 --> 00:15:03,300
‫I would really like to see your implementation.

296
00:15:03,300 --> 00:15:06,750
‫So make sure that you paste something like a link

297
00:15:06,750 --> 00:15:11,750
‫to a GitHub repo in the course Q and A after this lecture.

298
00:15:11,910 --> 00:15:15,990
‫And so yeah, really looking forward to seeing that.

299
00:15:15,990 --> 00:15:17,970
‫And then once you're done with that,

300
00:15:17,970 --> 00:15:20,340
‫or even if you don't want to do it,

301
00:15:20,340 --> 00:15:23,850
‫I hope to see you soon in the next section

302
00:15:23,850 --> 00:15:28,110
‫which will be the beginning of part three of this course.

303
00:15:28,110 --> 00:15:30,450
‫So, this is where we will finally enter

304
00:15:30,450 --> 00:15:33,783
‫the advanced React part of this course.