1
00:00:02,000 --> 00:00:03,000
So now that we picked up those

2
00:00:03,000 --> 00:00:08,000
important React basics, it's time to dig a bit deeper

3
00:00:08,000 --> 00:00:11,000
to dive into some advanced concepts like routing

4
00:00:11,000 --> 00:00:16,000
sending HTTP requests and application wide state management

5
00:00:17,000 --> 00:00:19,000
and what all these things are.

6
00:00:19,000 --> 00:00:21,000
We're going to explore that.

7
00:00:21,000 --> 00:00:26,000
And for this, we're going to leave this basic project

8
00:00:27,000 --> 00:00:28,000
this basic demo we worked on.

9
00:00:28,000 --> 00:00:30,000
Instead, we're going to build this

10
00:00:30,000 --> 00:00:33,000
meet up demo application

11
00:00:33,000 --> 00:00:36,000
I showed you earlier already.

12
00:00:36,000 --> 00:00:38,000
And for that, I cleaned up my project.

13
00:00:38,000 --> 00:00:42,000
I removed basically all the imports and all the content

14
00:00:42,000 --> 00:00:47,000
from this app file here and index css has some new content.

15
00:00:47,000 --> 00:00:51,000
You'll find my updated project attached.

16
00:00:51,000 --> 00:00:55,000
So there you all to find the updated index css file.

17
00:00:55,000 --> 00:00:58,000
And I deleted all the components.

18
00:00:58,000 --> 00:00:59,000
Now, as I just said

19
00:00:59,000 --> 00:01:02,000
you'll find this updated starting state attached

20
00:01:02,000 --> 00:01:06,000
and you can therefore then start with that same project.

21
00:01:06,000 --> 00:01:07,000
In the end here,

22
00:01:07,000 --> 00:01:11,000
once you downloaded it, you need to run NPM install again.

23
00:01:11,000 --> 00:01:12,000
Then one step done.

24
00:01:12,000 --> 00:01:15,000
You can NPM start this project again to bring

25
00:01:15,000 --> 00:01:18,000
up that development server again.

26
00:01:18,000 --> 00:01:21,000
And that will give you a blank page.

27
00:01:21,000 --> 00:01:24,000
Because now we're going to build this project

28
00:01:24,000 --> 00:01:25,000
from the ground up.

29
00:01:25,000 --> 00:01:29,000
And this project will now involve more components

30
00:01:29,000 --> 00:01:31,000
than the previous one.

31
00:01:31,000 --> 00:01:35,000
And it will involve the important concept of routing.

32
00:01:35,000 --> 00:01:40,000
Now, what does routing mean, considered is Netflix example

33
00:01:40,000 --> 00:01:42,000
from before again.

34
00:01:42,000 --> 00:01:44,000
There I went to the

35
00:01:44,000 --> 00:01:49,000
my list page to view the items I added to my list.

36
00:01:49,000 --> 00:01:53,000
Now it looks like I visited a totally different page

37
00:01:53,000 --> 00:01:57,000
but if you watch this refresh icon in the top left corner

38
00:01:57,000 --> 00:01:59,000
you see that it never changes.

39
00:01:59,000 --> 00:02:02,000
It never goes into that loading mode

40
00:02:02,000 --> 00:02:07,000
because actually we never fetched a new HTML page.

41
00:02:07,000 --> 00:02:10,000
The page loaded by the browser never changed.

42
00:02:10,000 --> 00:02:13,000
We always stay on that single page.

43
00:02:13,000 --> 00:02:15,000
And that's the case for Netflix

44
00:02:15,000 --> 00:02:19,000
because they also have such a single page application.

45
00:02:19,000 --> 00:02:22,000
It should also be the case for our project now.

46
00:02:22,000 --> 00:02:25,000
I wanna give the user the illusion

47
00:02:25,000 --> 00:02:28,000
of having different pages to which we can navigate

48
00:02:28,000 --> 00:02:30,000
whilst actually staying on one

49
00:02:30,000 --> 00:02:34,000
and the same page and leaving it up to react, to change

50
00:02:34,000 --> 00:02:36,000
what's visible on the page.

51
00:02:36,000 --> 00:02:38,000
The advantage of this approach is

52
00:02:38,000 --> 00:02:42,000
that we never have to wait for a new page to be loaded.

53
00:02:42,000 --> 00:02:46,000
Instead, we can always stay fast, stay reactive

54
00:02:46,000 --> 00:02:50,000
because everything is handled by client side Java script

55
00:02:50,000 --> 00:02:54,000
which is faster than sending a new request to a server.

56
00:02:54,000 --> 00:02:58,000
And that can really enhance the user experience.

57
00:02:58,000 --> 00:03:00,000
Now, therefore we wanna add something which is

58
00:03:00,000 --> 00:03:02,000
called routing to our project.

59
00:03:02,000 --> 00:03:06,000
We wanna add a router, a special tool

60
00:03:06,000 --> 00:03:08,000
which actually watches changes

61
00:03:08,000 --> 00:03:12,000
in the URL and then changes what's visible

62
00:03:12,000 --> 00:03:16,000
on the screen based on the URL.

63
00:03:16,000 --> 00:03:18,000
So, which basically gives us a way

64
00:03:18,000 --> 00:03:23,000
of giving our users this illusion of routing.

65
00:03:23,000 --> 00:03:24,000
And for this

66
00:03:24,000 --> 00:03:27,000
I'll actually quit this development server again

67
00:03:27,000 --> 00:03:30,000
and install a new dependency,

68
00:03:30,000 --> 00:03:35,000
a new third party package into this project.

69
00:03:35,000 --> 00:03:39,000
We do this with NPM install with the NPM install command

70
00:03:39,000 --> 00:03:42,000
but now not just executed like this

71
00:03:42,000 --> 00:03:45,000
but instead we now add a package name thereafter.

72
00:03:45,000 --> 00:03:49,000
The name of the package, which should be installed

73
00:03:49,000 --> 00:03:52,000
so download it into this project here.

74
00:03:52,000 --> 00:03:57,000
And that's the react dash router dash dom package.

75
00:03:58,000 --> 00:04:02,000
That's a package which as the name kind of implies

76
00:04:02,000 --> 00:04:06,000
allows us to add routing functionality to react.

77
00:04:06,000 --> 00:04:09,000
So it allows us to handle URLs and change.

78
00:04:09,000 --> 00:04:11,000
What's visible on the screen

79
00:04:11,000 --> 00:04:15,000
without fetching new HTML pages.

80
00:04:15,000 --> 00:04:19,000
Simply hit Enter and this package will be installed.

81
00:04:19,000 --> 00:04:21,000
And in package dot json

82
00:04:21,000 --> 00:04:24,000
you'll see that a new entry was added.

83
00:04:24,000 --> 00:04:26,000
So that file was automatically updated

84
00:04:26,000 --> 00:04:29,000
which means that if you now share this project again

85
00:04:29,000 --> 00:04:32,000
without a node modules folder

86
00:04:32,000 --> 00:04:35,000
and someone then runs just NPM install again

87
00:04:35,000 --> 00:04:38,000
that newly added package will also be picked

88
00:04:38,000 --> 00:04:41,000
up and installed because it is part of this package.

89
00:04:41,000 --> 00:04:43,000
json file.

90
00:04:43,000 --> 00:04:44,000
Now we don't need to do this here

91
00:04:44,000 --> 00:04:47,000
because we just did install it.

92
00:04:47,000 --> 00:04:49,000
So we can run NPM start again to bring up

93
00:04:49,000 --> 00:04:51,000
that development server again.

94
00:04:51,000 --> 00:04:55,000
And now we can add routing, but what does this mean?

95
00:04:55,000 --> 00:04:59,000
What does add routing mean?

96
00:04:59,000 --> 00:05:00,000
In the end it means that we need

97
00:05:00,000 --> 00:05:05,000
to add this routing tool to our code

98
00:05:05,000 --> 00:05:09,000
so that we have this thing watching for URL changes.

99
00:05:09,000 --> 00:05:11,000
And we need to let this thing

100
00:05:11,000 --> 00:05:16,000
this tool know which component should be loaded

101
00:05:16,000 --> 00:05:21,000
as a page for which route, for which URL.

102
00:05:21,000 --> 00:05:25,000
And for this all start by adding a new folder next

103
00:05:25,000 --> 00:05:28,000
to the components folder inside the src folder

104
00:05:28,000 --> 00:05:30,000
and that's the pages folder.

105
00:05:30,000 --> 00:05:32,000
You don't have to add to this folder

106
00:05:32,000 --> 00:05:36,000
and you don't have to name it pages, but in the end here

107
00:05:36,000 --> 00:05:39,000
this is a good way of differentiating

108
00:05:39,000 --> 00:05:43,000
and of separating our components that are embedded

109
00:05:43,000 --> 00:05:45,000
in other components, which will be stored

110
00:05:45,000 --> 00:05:47,000
in the components folder,

111
00:05:47,000 --> 00:05:51,000
from the components that will be loaded as pages.

112
00:05:51,000 --> 00:05:54,000
Technically we'll build components in the same way

113
00:05:54,000 --> 00:05:56,000
no matter how we use them,

114
00:05:56,000 --> 00:05:59,000
but for as a developer, to have an easier time to

115
00:05:59,000 --> 00:06:02,000
quickly find the right components we wanna work on,

116
00:06:02,000 --> 00:06:05,000
I'll separate them into these two folders.

117
00:06:05,000 --> 00:06:08,000
And in the pages folder, we're now going to add a couple

118
00:06:08,000 --> 00:06:11,000
of react components, which again

119
00:06:11,000 --> 00:06:14,000
will be built just like all the other components

120
00:06:14,000 --> 00:06:17,000
but which will be loaded by this router,

121
00:06:17,000 --> 00:06:22,000
we just installed when certain URLs are visited.

122
00:06:22,000 --> 00:06:25,000
And here for this application for this project

123
00:06:25,000 --> 00:06:29,000
we're building here, I'll add all meet-ups js file.

124
00:06:29,000 --> 00:06:32,000
So a component that will be responsible

125
00:06:32,000 --> 00:06:35,000
for loading and displaying all the meetups we have.

126
00:06:37,000 --> 00:06:41,000
I'll add a new meetup js file and I'll add a favorites

127
00:06:41,000 --> 00:06:43,000
js file.

128
00:06:43,000 --> 00:06:47,000
New meetup will allow us to add a new meetup later

129
00:06:47,000 --> 00:06:52,000
and favorites js will allow us to view our favorite meetups

130
00:06:53,000 --> 00:06:55,000
because we'll add a functionality that allows us to

131
00:06:55,000 --> 00:06:59,000
bookmark, to favorite a meet-up as a user.

132
00:07:01,000 --> 00:07:04,000
But step-by-step for the moment, I'll just set up

133
00:07:04,000 --> 00:07:07,000
some dummy components in these three files.

134
00:07:07,000 --> 00:07:10,000
And I'll start with all meet-ups and I'll name

135
00:07:10,000 --> 00:07:13,000
this component function, all meetups page.

136
00:07:13,000 --> 00:07:15,000
You can name it however you want.

137
00:07:15,000 --> 00:07:18,000
I'll just choose this name to make it clear

138
00:07:18,000 --> 00:07:21,000
that this component will be used as a page

139
00:07:21,000 --> 00:07:23,000
that's loaded by this router.

140
00:07:24,000 --> 00:07:26,000
Now, just as all the other components we built

141
00:07:26,000 --> 00:07:30,000
before this component has to be exported

142
00:07:30,000 --> 00:07:32,000
and it needs to returns some JSX code.

143
00:07:32,000 --> 00:07:34,000
And for the moment, I'll just return a div where

144
00:07:34,000 --> 00:07:38,000
I say all meetups page, that's of course not

145
00:07:38,000 --> 00:07:41,000
the final content, but some starting content for now.

146
00:07:42,000 --> 00:07:47,000
Then we can copy this and add it into favorites file here.

147
00:07:47,000 --> 00:07:49,000
So this is the favorites page

148
00:07:49,000 --> 00:07:52,000
and we wanna export the favorites page.

149
00:07:52,000 --> 00:07:57,000
And here I'll then say favorites page, and then save this

150
00:07:58,000 --> 00:08:02,000
and copy this into new meetup and named his new meetup page

151
00:08:04,000 --> 00:08:07,000
and also use that name for exporting.

152
00:08:07,000 --> 00:08:10,000
And here we say, new meetup page.

153
00:08:10,000 --> 00:08:13,000
Now we've got these free page components.

154
00:08:13,000 --> 00:08:16,000
Now we need to use that router package to

155
00:08:16,000 --> 00:08:20,000
define when which page should be loaded.

156
00:08:20,000 --> 00:08:23,000
And for this be first of all, need to go to index js

157
00:08:23,000 --> 00:08:28,000
and to wrap our app component, which you render here

158
00:08:28,000 --> 00:08:30,000
with another component.

159
00:08:30,000 --> 00:08:33,000
For this, we need to import something

160
00:08:33,000 --> 00:08:38,000
from react dash router dash dom and that

161
00:08:38,000 --> 00:08:42,000
something which we import is the browser router, like this.

162
00:08:43,000 --> 00:08:44,000
Now it turns out

163
00:08:44,000 --> 00:08:49,000
that browser router is in the end a component itself

164
00:08:49,000 --> 00:08:53,000
and therefore we can use it as a HTML element, opening

165
00:08:53,000 --> 00:08:56,000
and closing tags, and wrap those tags

166
00:08:56,000 --> 00:08:58,000
around the app component.

167
00:08:59,000 --> 00:09:01,000
Now that is something we haven't seen

168
00:09:01,000 --> 00:09:05,000
up to this point that a non-standard component.

169
00:09:05,000 --> 00:09:10,000
So a non HTML component would be wrapped around something

170
00:09:10,000 --> 00:09:11,000
but it is something we can do.

171
00:09:11,000 --> 00:09:13,000
And it is something we are doing here.

172
00:09:15,000 --> 00:09:17,000
We're going to learn how we make our own components

173
00:09:17,000 --> 00:09:21,000
wrappable a little bit later in this course.

174
00:09:21,000 --> 00:09:25,000
So now we initialize this router package.

175
00:09:25,000 --> 00:09:27,000
We make it aware of this app

176
00:09:27,000 --> 00:09:31,000
and we ensure that it watches our URL so to say.

177
00:09:32,000 --> 00:09:34,000
Now, as a next step

178
00:09:34,000 --> 00:09:37,000
we need to define the URLs we wanna support

179
00:09:37,000 --> 00:09:41,000
and which pages should be loaded for the different URLs.

180
00:09:42,000 --> 00:09:44,000
And we do this in the app component now.

181
00:09:44,000 --> 00:09:46,000
So in this wrapped component.

182
00:09:47,000 --> 00:09:51,000
In there we return a div and we can leave it like this.

183
00:09:51,000 --> 00:09:53,000
But now in this div

184
00:09:53,000 --> 00:09:57,000
I wanna return or use other components

185
00:09:57,000 --> 00:10:02,000
which are also imported from react router dom.

186
00:10:02,000 --> 00:10:05,000
So we also import react router dom here and here

187
00:10:05,000 --> 00:10:09,000
we import the route component.

188
00:10:09,000 --> 00:10:13,000
So just like browser router route is a component

189
00:10:13,000 --> 00:10:16,000
and we use it like a component, but the job

190
00:10:16,000 --> 00:10:20,000
of the route component is to define different paths

191
00:10:20,000 --> 00:10:23,000
in the URL we wanna listen to

192
00:10:23,000 --> 00:10:25,000
and which component should be loaded

193
00:10:25,000 --> 00:10:27,000
for these different paths.

194
00:10:29,000 --> 00:10:31,000
And therefore I will also already import

195
00:10:31,000 --> 00:10:35,000
my three page components here

196
00:10:35,000 --> 00:10:40,000
that all meetups page from dot slash pages, all meetups.

197
00:10:42,000 --> 00:10:47,000
And then the new meetup page from dot pages, new meetup.

198
00:10:48,000 --> 00:10:52,000
And of course also the favorites page component

199
00:10:52,000 --> 00:10:54,000
from dot slash pages, favorites.

200
00:10:56,000 --> 00:11:00,000
And now in this div here, we can use the route component

201
00:11:00,000 --> 00:11:03,000
which I'm importing from react router dom

202
00:11:03,000 --> 00:11:08,000
and give it a path prop, a path attribute.

203
00:11:09,000 --> 00:11:10,000
Now path takes a string

204
00:11:10,000 --> 00:11:15,000
and that will be the path in the URL after your domain.

205
00:11:15,000 --> 00:11:16,000
So in our case

206
00:11:16,000 --> 00:11:20,000
our domain is for example, local hosts:3000.

207
00:11:20,000 --> 00:11:22,000
That's our domain, of course

208
00:11:22,000 --> 00:11:24,000
on a real server after deployment.

209
00:11:24,000 --> 00:11:27,000
That would be something like my page.com.

210
00:11:27,000 --> 00:11:29,000
And now the part

211
00:11:29,000 --> 00:11:33,000
after the domain is the path that can be just a slash

212
00:11:33,000 --> 00:11:36,000
so no path at all in the end

213
00:11:36,000 --> 00:11:39,000
or it can be something like slash favorites

214
00:11:39,000 --> 00:11:43,000
or slash products or anything like that.

215
00:11:43,000 --> 00:11:46,000
So the part after the domain is the path and here we define

216
00:11:46,000 --> 00:11:50,000
for which path, which component should be loaded.

217
00:11:50,000 --> 00:11:51,000
And here we can start

218
00:11:51,000 --> 00:11:55,000
with slash nothing to handle the default path

219
00:11:55,000 --> 00:12:00,000
that we just visited our domain slash nothing.

220
00:12:00,000 --> 00:12:03,000
And then between these route tags,

221
00:12:03,000 --> 00:12:08,000
we actually do now add the component that should be loaded,

222
00:12:08,000 --> 00:12:11,000
like the all meetups page like this,

223
00:12:12,000 --> 00:12:15,000
because that should be the starting page actually.

224
00:12:16,000 --> 00:12:20,000
We can add another route here for, let's say

225
00:12:20,000 --> 00:12:25,000
slash new dash meetup and the path it's up to you.

226
00:12:25,000 --> 00:12:29,000
If we now visit my domain.com/new-meetup

227
00:12:29,000 --> 00:12:32,000
then the component which we render

228
00:12:32,000 --> 00:12:35,000
between these route tags will be loaded.

229
00:12:35,000 --> 00:12:37,000
And that could be the new meetups page.

230
00:12:38,000 --> 00:12:40,000
And last but not least

231
00:12:40,000 --> 00:12:45,000
we can also define a route for the path slash favorites

232
00:12:45,000 --> 00:12:48,000
and then render the favorites page like this.

233
00:12:50,000 --> 00:12:52,000
Now we're defining three routes

234
00:12:52,000 --> 00:12:56,000
and instead of this content here

235
00:12:56,000 --> 00:12:59,000
the actual page component will be rendered

236
00:12:59,000 --> 00:13:01,000
if that route determines

237
00:13:01,000 --> 00:13:04,000
that the current URL matches this path.

238
00:13:04,000 --> 00:13:09,000
So if we are on my domain.com/new-meetup

239
00:13:09,000 --> 00:13:12,000
this new meetup page component would be rendered

240
00:13:12,000 --> 00:13:15,000
and not the favorites page, for example.

241
00:13:16,000 --> 00:13:19,000
So if we save this and we go back and reload

242
00:13:19,000 --> 00:13:24,000
localhost:3000, we should see the all meetups page here.

243
00:13:25,000 --> 00:13:27,000
But if we go to favorites, for example

244
00:13:27,000 --> 00:13:32,000
we see favorites page as well, but wait a second,

245
00:13:32,000 --> 00:13:37,000
is this the desired result that we see it as well?

246
00:13:37,000 --> 00:13:40,000
Well, it depends in some applications, depending

247
00:13:40,000 --> 00:13:44,000
on what you build, you might want such a nested page

248
00:13:44,000 --> 00:13:48,000
so that the page for just slash slash nothing is rendered

249
00:13:48,000 --> 00:13:53,000
but also this specific page for slash favorites.

250
00:13:53,000 --> 00:13:56,000
We see this output because by default

251
00:13:56,000 --> 00:14:01,000
react router matches all your paths and it simply checks

252
00:14:01,000 --> 00:14:06,000
if the current path includes these paths here

253
00:14:06,000 --> 00:14:11,000
and slash favorites includes both slash favorites, as well

254
00:14:11,000 --> 00:14:16,000
as just slash, which is why both components are rendered.

255
00:14:16,000 --> 00:14:20,000
Again, that could be what you want, but often it's not.

256
00:14:20,000 --> 00:14:24,000
That's why there is another component provided

257
00:14:24,000 --> 00:14:26,000
by react router dom, which helps us.

258
00:14:26,000 --> 00:14:29,000
And that's the switch component.

259
00:14:29,000 --> 00:14:32,000
We can use the switch component to wrap all our

260
00:14:32,000 --> 00:14:36,000
route components like this.

261
00:14:36,000 --> 00:14:38,000
And with that, we tell a react router

262
00:14:38,000 --> 00:14:42,000
that only one of these routes should be active.

263
00:14:42,000 --> 00:14:46,000
So at most one of these pages should be rendered.

264
00:14:46,000 --> 00:14:48,000
If we do that and save this,

265
00:14:48,000 --> 00:14:51,000
we don't see two components being rendered

266
00:14:51,000 --> 00:14:53,000
but we don't see the correct component

267
00:14:53,000 --> 00:14:55,000
being rendered either.

268
00:14:55,000 --> 00:14:57,000
Instead for a slash favorites,

269
00:14:57,000 --> 00:14:59,000
we now see all meetups.

270
00:14:59,000 --> 00:15:01,000
And the reason for this is now how your routes

271
00:15:01,000 --> 00:15:03,000
are matched.

272
00:15:03,000 --> 00:15:06,000
React router by default checks if the path

273
00:15:06,000 --> 00:15:11,000
of the current URL starts with the path to find here

274
00:15:12,000 --> 00:15:13,000
and because of switch

275
00:15:13,000 --> 00:15:16,000
it will then stop looking at the other routes as soon

276
00:15:16,000 --> 00:15:20,000
as it has a hit, as soon as it finds a match.

277
00:15:20,000 --> 00:15:25,000
Now, of course, slash favorites starts with just slash

278
00:15:25,000 --> 00:15:27,000
and then because of switch, it doesn't look any further,

279
00:15:27,000 --> 00:15:30,000
and therefore all meetups is rendered.

280
00:15:30,000 --> 00:15:32,000
That's not what we want.

281
00:15:32,000 --> 00:15:35,000
And we can prevent this by adding the exact prop here

282
00:15:35,000 --> 00:15:39,000
on route and setting this to true.

283
00:15:39,000 --> 00:15:40,000
Though you can also shorten this

284
00:15:40,000 --> 00:15:41,000
and if you have a prop

285
00:15:41,000 --> 00:15:45,000
which you just want to set to a true the value

286
00:15:45,000 --> 00:15:48,000
you can just add the prop name like this.

287
00:15:48,000 --> 00:15:50,000
So we add the exact prop

288
00:15:50,000 --> 00:15:53,000
and set it to true to this first route.

289
00:15:53,000 --> 00:15:58,000
And the exact prop tells react, router that for this route

290
00:15:58,000 --> 00:16:01,000
it should not check if the path begins with this path

291
00:16:01,000 --> 00:16:06,000
but if the full path matches this path and that's now

292
00:16:06,000 --> 00:16:08,000
of course not the case for slash favorites.

293
00:16:08,000 --> 00:16:13,000
So this will not create a match and it will continue looking

294
00:16:13,000 --> 00:16:17,000
and it will ultimately find this route four slash favorites.

295
00:16:18,000 --> 00:16:22,000
So now we see the favorites page or a new dash meetup,

296
00:16:22,000 --> 00:16:26,000
we see the new meetup page and for just local hosts:3000

297
00:16:26,000 --> 00:16:28,000
we see the all meetups page

298
00:16:28,000 --> 00:16:31,000
and that's how we can add routing.

299
00:16:31,000 --> 00:16:32,000
But of course at the moment

300
00:16:32,000 --> 00:16:37,000
we're just navigating around by entering URLs manually.

301
00:16:37,000 --> 00:16:39,000
And that's not very realistic.

302
00:16:39,000 --> 00:16:43,000
In reality, we would probably want some, some header,

303
00:16:43,000 --> 00:16:45,000
some navigation bar at the top

304
00:16:45,000 --> 00:16:47,000
which provides different links

305
00:16:47,000 --> 00:16:50,000
and therefore that is what we're going to add next.