1
00:00:06,600 --> 00:00:07,530
- In this section,

2
00:00:07,530 --> 00:00:09,330
we are going to investigate an application

3
00:00:09,330 --> 00:00:11,160
with multiple components.

4
00:00:11,160 --> 00:00:12,630
This will help you to understand

5
00:00:12,630 --> 00:00:15,510
how to define multiple components and why,

6
00:00:15,510 --> 00:00:17,490
and how to pass parameters into them

7
00:00:17,490 --> 00:00:19,410
so that they know what to display.

8
00:00:19,410 --> 00:00:23,550
Remember, a component is
either a function or a class

9
00:00:23,550 --> 00:00:26,250
which renders some HTML.

10
00:00:26,250 --> 00:00:27,900
So in a typical application,

11
00:00:27,900 --> 00:00:31,680
you will have one top
level component called App,

12
00:00:31,680 --> 00:00:34,170
which basically is the
whole web interface,

13
00:00:34,170 --> 00:00:36,720
and it then calls smaller components

14
00:00:36,720 --> 00:00:38,640
to display part of the webpage.

15
00:00:38,640 --> 00:00:42,210
A bit like the way the main
function calls smaller functions

16
00:00:42,210 --> 00:00:44,040
in Java and C#.

17
00:00:44,040 --> 00:00:45,780
So we'll have one top level component,

18
00:00:45,780 --> 00:00:47,850
the root component called App,

19
00:00:47,850 --> 00:00:50,550
and it will then render
lower level components,

20
00:00:50,550 --> 00:00:54,060
each component renders
part of the webpage.

21
00:00:54,060 --> 00:00:57,438
And it needs parameters to help
it know what data to display

22
00:00:57,438 --> 00:01:00,150
in those components.

23
00:01:00,150 --> 00:01:01,830
So our app will demonstrate

24
00:01:01,830 --> 00:01:05,190
how to define a root component called App.

25
00:01:05,190 --> 00:01:07,500
You nearly always, in a React application,

26
00:01:07,500 --> 00:01:09,840
define a top level root component.

27
00:01:09,840 --> 00:01:11,910
You know, the first
component to be rendered,

28
00:01:11,910 --> 00:01:14,970
like the main function
in a Java application

29
00:01:14,970 --> 00:01:17,491
and you typically call
it App by convention.

30
00:01:17,491 --> 00:01:21,009
It then calls other lower level components

31
00:01:21,009 --> 00:01:24,078
to render part of the
webpage for the whole

32
00:01:24,078 --> 00:01:26,610
React application.

33
00:01:26,610 --> 00:01:27,443
You don't...

34
00:01:27,443 --> 00:01:29,670
The application component
couldn't possibly

35
00:01:29,670 --> 00:01:32,460
render everything because
it's too complicated.

36
00:01:32,460 --> 00:01:35,010
What you do instead is the App component

37
00:01:35,010 --> 00:01:38,790
cause other components and they
display part of the webpage

38
00:01:38,790 --> 00:01:39,623
each.

39
00:01:39,623 --> 00:01:41,223
It's divide and conquer.

40
00:01:41,223 --> 00:01:45,420
We can pass parameters
into a component to say

41
00:01:45,420 --> 00:01:46,890
I want to invoke this component,

42
00:01:46,890 --> 00:01:49,080
it needs to render some content

43
00:01:49,080 --> 00:01:52,020
or here's the parameters,
here's the data that you need

44
00:01:52,020 --> 00:01:53,823
in order to decide what to display,

45
00:01:54,810 --> 00:01:55,650
We're gonna work with...

46
00:01:55,650 --> 00:01:57,420
Well, it's not gonna be that complex data,

47
00:01:57,420 --> 00:01:58,950
but as we go through the examples,

48
00:01:58,950 --> 00:02:01,110
it'll be the data that we pass

49
00:02:01,110 --> 00:02:04,050
or that we render would become
increasingly interesting,

50
00:02:04,050 --> 00:02:05,370
as you'll see.

51
00:02:05,370 --> 00:02:07,560
So I've already written this example.

52
00:02:07,560 --> 00:02:09,570
If you look in the Example 3 folder,

53
00:02:09,570 --> 00:02:11,730
you can see the application.

54
00:02:11,730 --> 00:02:16,110
So here we are, Lesson 9, Example 3,

55
00:02:16,110 --> 00:02:18,210
I used to create React App tool

56
00:02:18,210 --> 00:02:20,670
to create this demo application.

57
00:02:20,670 --> 00:02:24,210
And it has the same structure
as every other application

58
00:02:24,210 --> 00:02:26,610
generated using Create React App.

59
00:02:26,610 --> 00:02:27,930
So let's have a look at this application

60
00:02:27,930 --> 00:02:29,130
in the code editor here.

61
00:02:30,270 --> 00:02:31,170
Here it is.

62
00:02:31,170 --> 00:02:32,970
It has a Package Jason file

63
00:02:32,970 --> 00:02:35,520
which specifies the dependencies.

64
00:02:35,520 --> 00:02:37,830
When you create the application,

65
00:02:37,830 --> 00:02:40,230
it downloads those
dependencies, as we've seen,

66
00:02:40,230 --> 00:02:41,403
into node models.

67
00:02:42,390 --> 00:02:45,090
In the public folder, the only
thing of interest really is

68
00:02:45,090 --> 00:02:47,790
the index HTML, our homepage.

69
00:02:47,790 --> 00:02:50,190
I've tided it up a little bit.

70
00:02:50,190 --> 00:02:53,077
Again, it's this bit here, the outlet.

71
00:02:53,077 --> 00:02:54,780
Basically, all of my content

72
00:02:54,780 --> 00:02:57,940
for the entire React application
will be displayed here

73
00:02:59,670 --> 00:03:01,410
- Right. In the source folder then,

74
00:03:01,410 --> 00:03:04,410
this is a bit more interesting
than what we've seen before.

75
00:03:04,410 --> 00:03:05,580
I have defined...

76
00:03:05,580 --> 00:03:08,070
Well, first of all, you always start...

77
00:03:08,070 --> 00:03:11,550
The application always
starts with index.tsx.

78
00:03:11,550 --> 00:03:13,830
And in 99 times over a hundred,

79
00:03:13,830 --> 00:03:18,540
the index tsx simply renders
the application component,

80
00:03:18,540 --> 00:03:20,073
okay, to say, start.

81
00:03:21,210 --> 00:03:24,210
The application component is here, Apptsx.

82
00:03:24,210 --> 00:03:26,733
Notice, I've got rid of
some unnecessary files.

83
00:03:27,810 --> 00:03:29,550
When you generate this application,

84
00:03:29,550 --> 00:03:33,390
there'll be an app test and an app CSS.

85
00:03:33,390 --> 00:03:34,320
So I've deleted those

86
00:03:34,320 --> 00:03:36,960
because we don't really
need them in this example.

87
00:03:36,960 --> 00:03:39,810
So this is a top level component.

88
00:03:39,810 --> 00:03:42,510
And what is it going to display?

89
00:03:42,510 --> 00:03:44,469
Okay, well, it's going to display...

90
00:03:44,469 --> 00:03:48,630
Ignore the React fragment bit for now.

91
00:03:48,630 --> 00:03:50,770
Okay. That's just like a wrapper.

92
00:03:50,770 --> 00:03:53,490
It's going to render another component.

93
00:03:53,490 --> 00:03:56,700
This is how one component can say,

94
00:03:56,700 --> 00:03:58,650
please, can you render another component?

95
00:03:58,650 --> 00:04:01,290
Panel A is another component.

96
00:04:01,290 --> 00:04:02,220
Or to put it another way,

97
00:04:02,220 --> 00:04:07,220
it's a function that
returns some HTML XML.

98
00:04:07,230 --> 00:04:08,063
We'll have a look at that there.

99
00:04:08,063 --> 00:04:11,400
In fact, I've got four components

100
00:04:11,400 --> 00:04:15,180
growing in interest and complexity
as we work through them.

101
00:04:15,180 --> 00:04:19,140
Panel A displays a div,
which is quite simple.

102
00:04:19,140 --> 00:04:22,140
So does Panel B, so does
Panel C, and panel D

103
00:04:22,140 --> 00:04:24,780
but with parameters as we'll see.

104
00:04:24,780 --> 00:04:27,840
Okay. So I think probably
we should have a look

105
00:04:27,840 --> 00:04:29,520
at how this application's gonna look

106
00:04:29,520 --> 00:04:31,650
before we dive into the code.

107
00:04:31,650 --> 00:04:35,160
So to run the application,
you say, yarn start

108
00:04:35,160 --> 00:04:37,380
or you can say, NPM start.

109
00:04:37,380 --> 00:04:39,450
Well, I've done that already.

110
00:04:39,450 --> 00:04:41,970
I've already started the server

111
00:04:41,970 --> 00:04:45,150
and it'll host my application

112
00:04:45,150 --> 00:04:48,060
and this is what it looks like.

113
00:04:48,060 --> 00:04:51,780
That's how it's going to
appear in the browser.

114
00:04:51,780 --> 00:04:53,490
So it displays Panel A...

115
00:04:53,490 --> 00:04:54,960
Oh, I've got some colors.
I hope you like them.

116
00:04:54,960 --> 00:04:56,550
I spent quite a while choosing them.

117
00:04:56,550 --> 00:05:00,630
Panel A decides to display itself in blue,

118
00:05:00,630 --> 00:05:04,410
Panel B decides to
display itself in green.

119
00:05:04,410 --> 00:05:07,620
Now I have three instances of Panel C.

120
00:05:07,620 --> 00:05:09,510
Panel C is a component.

121
00:05:09,510 --> 00:05:11,070
It's ultimately a function,

122
00:05:11,070 --> 00:05:13,590
but if you render it three times,

123
00:05:13,590 --> 00:05:15,930
then that's the panel three component.

124
00:05:15,930 --> 00:05:18,540
The same function called three times,

125
00:05:18,540 --> 00:05:21,330
it calls, it displays itself three times.

126
00:05:21,330 --> 00:05:23,404
And then I've got another
component called panel D

127
00:05:23,404 --> 00:05:26,100
which is a little bit
more ambitious in that

128
00:05:26,100 --> 00:05:28,890
it kind of has more interesting content.

129
00:05:28,890 --> 00:05:33,690
Okay. So Panel A, Panel
B, Panel C and Panel D.

130
00:05:33,690 --> 00:05:36,420
Those are the four
components that are rendered

131
00:05:36,420 --> 00:05:38,430
by my application component.

132
00:05:38,430 --> 00:05:40,020
So just take you back to the top again,

133
00:05:40,020 --> 00:05:43,620
here's my application component, app.tsx.

134
00:05:43,620 --> 00:05:48,620
It renders a component, Panel
B, with some parameters.

135
00:05:49,680 --> 00:05:52,350
It rendered three instances.

136
00:05:52,350 --> 00:05:53,490
In fact, four.

137
00:05:53,490 --> 00:05:54,338
Three, that's right.

138
00:05:54,338 --> 00:05:55,171
(Narrator chuckles) I can't count.

139
00:05:55,171 --> 00:05:57,120
Three instances of Panel C.

140
00:05:57,120 --> 00:05:59,760
It basically called the Panel
C component three times.

141
00:05:59,760 --> 00:06:01,530
It calls the function three times.

142
00:06:01,530 --> 00:06:06,030
It displays itself three times
illustrating different syntax

143
00:06:06,030 --> 00:06:10,170
and then, it renders panel D.

144
00:06:10,170 --> 00:06:13,080
So each of these, Panel A, B, C, and D,

145
00:06:13,080 --> 00:06:15,921
each of those is a
separate component defined.

146
00:06:15,921 --> 00:06:19,530
Typically, you put each
component into a separate file.

147
00:06:19,530 --> 00:06:22,110
Panel A.TSX.

148
00:06:22,110 --> 00:06:26,400
Panel B.TSX, Panel C and Panel D.

149
00:06:26,400 --> 00:06:29,040
Okay, then, so that's Panel A TSX.

150
00:06:29,040 --> 00:06:32,523
It's a really simple functional component.

151
00:06:33,450 --> 00:06:38,040
The function is called Panel
A and it returns a div.

152
00:06:38,040 --> 00:06:41,010
I've got some CSS classes involved.

153
00:06:41,010 --> 00:06:42,780
I've got a class that says

154
00:06:42,780 --> 00:06:46,713
if you have a div whose
CSS class is Panel A,

155
00:06:46,713 --> 00:06:48,810
then it displays it in blue.

156
00:06:48,810 --> 00:06:49,950
I think it was, wasn't it?

157
00:06:49,950 --> 00:06:52,053
And it says hello from Panel A component.

158
00:06:53,130 --> 00:06:54,060
Let's have a quick look at that

159
00:06:54,060 --> 00:06:58,470
in the actual code deck, Panel A.tsx.

160
00:06:58,470 --> 00:07:00,315
So I'm just wondering about the style.

161
00:07:00,315 --> 00:07:02,566
There's an interesting thing here.

162
00:07:02,566 --> 00:07:05,040
In normal HTML,

163
00:07:05,040 --> 00:07:07,770
if you want to set the
CSS class for something,

164
00:07:07,770 --> 00:07:09,543
you would just say class.

165
00:07:11,040 --> 00:07:14,370
But unfortunately, in
JavaScript these days,

166
00:07:14,370 --> 00:07:16,170
class is a keyword.

167
00:07:16,170 --> 00:07:17,280
That's a bit of a shame.

168
00:07:17,280 --> 00:07:20,280
So in React, you've gotta say class name.

169
00:07:20,280 --> 00:07:23,190
In your React code, you say class name.

170
00:07:23,190 --> 00:07:25,590
When it gets compiled by Babel,

171
00:07:25,590 --> 00:07:29,970
it converts it into a, like a
regular CSS class attribute.

172
00:07:29,970 --> 00:07:32,000
But so the question I've
got for you is, okay

173
00:07:32,000 --> 00:07:35,730
so that's very well, that's
what my panel will display.

174
00:07:35,730 --> 00:07:36,720
And remember,

175
00:07:36,720 --> 00:07:38,460
here's my top level component that says,

176
00:07:38,460 --> 00:07:41,310
please, will you render panel A.

177
00:07:41,310 --> 00:07:43,323
And it says, okay, then I will.

178
00:07:45,390 --> 00:07:47,910
But where does this CSS class come from

179
00:07:47,910 --> 00:07:50,403
because I haven't imported
any style sheet here?

180
00:07:51,240 --> 00:07:53,910
So I guess, it must be
the style sheet that sits

181
00:07:53,910 --> 00:07:55,260
across the whole application.

182
00:07:55,260 --> 00:07:59,220
Remember, in the top
level code file index,

183
00:07:59,220 --> 00:08:03,210
it imports the kind of
corporate global style sheet.

184
00:08:03,210 --> 00:08:05,650
So I guess, the classes
must be defined in there

185
00:08:06,686 --> 00:08:07,519
and they are.

186
00:08:08,550 --> 00:08:11,550
So in here, I've said like, first of all,

187
00:08:11,550 --> 00:08:12,950
I think I could probably...

188
00:08:14,243 --> 00:08:15,930
I think I'll probably
get rid of that line,

189
00:08:15,930 --> 00:08:19,020
but you can see, at any div with a class

190
00:08:19,020 --> 00:08:22,470
of either Panel A, B, C,
or D, they get displayed

191
00:08:22,470 --> 00:08:25,680
with a white font and a certain size.

192
00:08:25,680 --> 00:08:28,800
A class... Sorry, a div
with a Panel A class

193
00:08:28,800 --> 00:08:30,150
would be displayed in blue.

194
00:08:31,050 --> 00:08:32,700
Well, that's good.

195
00:08:32,700 --> 00:08:37,700
Here's my Panel A class,
here's my panel A component.

196
00:08:37,830 --> 00:08:40,713
It displays in a CSS class of panel A,

197
00:08:41,730 --> 00:08:46,590
and that class is going to be blue.

198
00:08:46,590 --> 00:08:48,783
So my Panel A gets displayed in blue.

199
00:08:49,770 --> 00:08:51,300
That's very good.

200
00:08:51,300 --> 00:08:52,260
So there we are.

201
00:08:52,260 --> 00:08:53,850
Here's my functional component,

202
00:08:53,850 --> 00:08:55,642
and here's how I invoke it.

203
00:08:55,642 --> 00:08:57,480
It is confusing initially.

204
00:08:57,480 --> 00:08:58,980
It is a function

205
00:08:58,980 --> 00:09:00,720
but you don't call it like a function.

206
00:09:00,720 --> 00:09:02,520
There are reasons for
this that are kind of

207
00:09:02,520 --> 00:09:04,110
beyond what we're looking at just now.

208
00:09:04,110 --> 00:09:06,420
You use XML syntax.

209
00:09:06,420 --> 00:09:08,700
Effectively, it almost
like it creates an object

210
00:09:08,700 --> 00:09:11,910
from this function to
represent this markup.

211
00:09:11,910 --> 00:09:13,860
We can think of it more loosely and say

212
00:09:13,860 --> 00:09:17,350
it's almost like a function
call to render that content

213
00:09:18,540 --> 00:09:19,890
plus some other content.

214
00:09:19,890 --> 00:09:23,340
Well, what came next was Panel B,

215
00:09:23,340 --> 00:09:26,700
and it turns out that
Panel B has a parameter.

216
00:09:26,700 --> 00:09:31,203
So here's a statement of fact,
if a component needs inputs,

217
00:09:32,190 --> 00:09:34,743
your component can receive one object.

218
00:09:35,670 --> 00:09:36,540
It works like that.

219
00:09:36,540 --> 00:09:38,790
Your component can receive one object

220
00:09:38,790 --> 00:09:40,770
that contains properties.

221
00:09:40,770 --> 00:09:42,780
There may be many
properties inside the object

222
00:09:42,780 --> 00:09:45,030
but it is just one object.

223
00:09:45,030 --> 00:09:47,520
And in type script, you
have to say call on any

224
00:09:47,520 --> 00:09:49,710
just to keep the type script
compiler happy to say,

225
00:09:49,710 --> 00:09:52,020
okay, I'm not gonna bother
telling you what the data type is

226
00:09:52,020 --> 00:09:53,820
but that's fine.

227
00:09:53,820 --> 00:09:55,323
Let me show you how I call it.

228
00:09:56,280 --> 00:10:00,330
If you have a component that
takes property parameters,

229
00:10:00,330 --> 00:10:04,320
you just declare them as normal
XML attributes like this.

230
00:10:04,320 --> 00:10:07,500
And what actually happens
is those properties

231
00:10:07,500 --> 00:10:09,693
or these attributes that you specify here,

232
00:10:10,950 --> 00:10:14,553
those attributes get
plated into an object.

233
00:10:15,600 --> 00:10:17,670
Okay? So I've only got one
parameter at the moment.

234
00:10:17,670 --> 00:10:21,753
The parameter is called Message
and the value is, Hello.

235
00:10:24,270 --> 00:10:25,800
Okay. Hopefully you can read my writing.

236
00:10:25,800 --> 00:10:29,760
So this attribute gets
placed into an object,

237
00:10:29,760 --> 00:10:33,510
and that object then gets
passed in as a parameter

238
00:10:33,510 --> 00:10:34,740
into the functional component.

239
00:10:34,740 --> 00:10:36,060
It always works like that.

240
00:10:36,060 --> 00:10:38,220
No matter how many parameters you pass in,

241
00:10:38,220 --> 00:10:41,073
it'll just be one object that's received.

242
00:10:41,910 --> 00:10:44,070
So inside my Panel B,

243
00:10:44,070 --> 00:10:48,650
I take that incoming object and
I grab the message property.

244
00:10:48,650 --> 00:10:50,820
Okay. So that would be hello,

245
00:10:50,820 --> 00:10:53,280
and I just assign it into a local variable

246
00:10:53,280 --> 00:10:54,480
just to make my life easier.

247
00:10:54,480 --> 00:10:58,020
So message, MSG message is hello.

248
00:10:58,020 --> 00:11:01,530
That's the message parameter
placed into an object,

249
00:11:01,530 --> 00:11:03,000
and then I grab it out of there,

250
00:11:03,000 --> 00:11:04,500
I assign it to that local variable.

251
00:11:04,500 --> 00:11:05,460
And then here,

252
00:11:05,460 --> 00:11:09,570
I say hello from Panel B
component with message, message.

253
00:11:09,570 --> 00:11:12,570
There's a bit of syntax here
that I haven't explained before

254
00:11:12,570 --> 00:11:17,190
when you've got JSX syntax,
with a of JavaScript and XML,

255
00:11:17,190 --> 00:11:19,290
when you're in the middle of XML syntax,

256
00:11:19,290 --> 00:11:21,090
like an XML element,

257
00:11:21,090 --> 00:11:24,210
if you want to evaluate
any JavaScript expressions

258
00:11:24,210 --> 00:11:26,490
like the value of the message variable,

259
00:11:26,490 --> 00:11:29,763
you have to enclose this
JavaScript inside curly brackets.

260
00:11:31,170 --> 00:11:34,410
Okay. If you didn't put the
curly brackets in there,

261
00:11:34,410 --> 00:11:35,580
it would just kind of...

262
00:11:35,580 --> 00:11:38,160
If you didn't put the
curly brackets in there,

263
00:11:38,160 --> 00:11:41,605
it would just literally
display the word MSG.

264
00:11:41,605 --> 00:11:43,860
It's the curly brackets
that make it realize

265
00:11:43,860 --> 00:11:44,880
it has to evaluate it.

266
00:11:44,880 --> 00:11:46,170
I'll prove that point.

267
00:11:46,170 --> 00:11:48,273
I'm gonna go into my Panel B component.

268
00:11:50,070 --> 00:11:53,348
And what I'll do is I'll
accidentally on purpose

269
00:11:53,348 --> 00:11:56,670
forget to put that inside curly brackets.

270
00:11:56,670 --> 00:11:58,980
Okay. So then instead
of evaluating, you know,

271
00:11:58,980 --> 00:12:00,750
the value of the message variable,

272
00:12:00,750 --> 00:12:03,550
it'll just literally display the text MSG

273
00:12:04,650 --> 00:12:07,320
which isn't probably what I had in mind.

274
00:12:07,320 --> 00:12:11,100
Okay. So don't forget the curly brackets

275
00:12:11,100 --> 00:12:13,530
when you want to evaluate JavaScript.

276
00:12:13,530 --> 00:12:16,230
Now, this panel just
receives one parameter

277
00:12:16,230 --> 00:12:17,640
but of course, you can
pass in multiple parameters

278
00:12:17,640 --> 00:12:18,473
if you like.

279
00:12:18,473 --> 00:12:19,560
Have a look at this.

280
00:12:19,560 --> 00:12:22,980
Panel C takes in two parameters.

281
00:12:22,980 --> 00:12:26,190
They always get passed in
as a single object though.

282
00:12:26,190 --> 00:12:28,440
So a single object gets accumulated,

283
00:12:28,440 --> 00:12:32,453
these parameters, these XML
attributes get accumulated

284
00:12:32,453 --> 00:12:34,320
into a single object.

285
00:12:34,320 --> 00:12:37,473
So there'll be a property
called F name, first name.

286
00:12:38,850 --> 00:12:40,233
And the first name is Kari.

287
00:12:41,400 --> 00:12:42,330
Okay, good.

288
00:12:42,330 --> 00:12:43,620
And then the L name,

289
00:12:43,620 --> 00:12:47,103
the person's last name is Nordmann.

290
00:12:48,630 --> 00:12:51,590
Nordmann, like so.

291
00:12:51,590 --> 00:12:53,659
So that object again gets passed

292
00:12:53,659 --> 00:12:58,659
into the component as a
single object, like, so.

293
00:12:59,280 --> 00:13:00,690
And then from that object,

294
00:13:00,690 --> 00:13:03,120
I extract the first name property, Kari,

295
00:13:03,120 --> 00:13:05,070
and I put into that
variable so I can display

296
00:13:05,070 --> 00:13:06,510
the person's first name.

297
00:13:06,510 --> 00:13:09,004
And then from the object,
I called it props,

298
00:13:09,004 --> 00:13:10,590
but I could have called it anything,

299
00:13:10,590 --> 00:13:14,130
I extract the last name property,
which would be Nordmann,

300
00:13:14,130 --> 00:13:15,870
I put it into another help available,

301
00:13:15,870 --> 00:13:18,060
which I can then display there. Okay?

302
00:13:18,060 --> 00:13:20,130
So it says hello from Panel C component

303
00:13:20,130 --> 00:13:24,843
with the first name of Kari
and the last name of Nordmann.

304
00:13:25,710 --> 00:13:27,840
So that's fair enough I think, isn't it?

305
00:13:27,840 --> 00:13:29,400
I'm gonna show you some alternative syntax

306
00:13:29,400 --> 00:13:31,080
using destructuring.

307
00:13:32,318 --> 00:13:34,080
Let me go back into my code.

308
00:13:34,080 --> 00:13:36,930
If you remember, destructuring
is the ability to

309
00:13:36,930 --> 00:13:40,770
take an object and to extract
its properties easily.

310
00:13:40,770 --> 00:13:43,203
So I'm gonna give myself
a bit of blank line.

311
00:13:44,190 --> 00:13:47,310
Instead of declaring
separate variables like this,

312
00:13:47,310 --> 00:13:49,890
I could have done it in a
single statement like this,

313
00:13:49,890 --> 00:13:54,490
using destructuring { fname, lname

314
00:13:58,637 --> 00:13:59,943
= props.

315
00:14:01,080 --> 00:14:04,503
Oops. = props.

316
00:14:05,790 --> 00:14:09,120
Okay. So those two lines,
I can now comment out,

317
00:14:09,120 --> 00:14:12,000
this line is equivalent
to these two lines.

318
00:14:12,000 --> 00:14:14,670
It'll say, take the object
and form that object,

319
00:14:14,670 --> 00:14:16,470
look for a property called Fname

320
00:14:16,470 --> 00:14:19,140
and stick it into a
variable also called Fname.

321
00:14:19,140 --> 00:14:21,207
Okay. So there's that
correspondence of names there,

322
00:14:21,207 --> 00:14:22,230
Fname.

323
00:14:22,230 --> 00:14:25,170
And also extract the Lname property

324
00:14:25,170 --> 00:14:27,000
and put it into a variable called Lname.

325
00:14:27,000 --> 00:14:29,070
Well, that'll do the same.

326
00:14:29,070 --> 00:14:31,320
So we de structure the incoming object

327
00:14:31,320 --> 00:14:34,980
and grab the constituent parts
and put them into variables

328
00:14:34,980 --> 00:14:36,130
called Fname and Lname.

329
00:14:37,110 --> 00:14:37,943
That's pretty cool.

330
00:14:37,943 --> 00:14:38,866
I'll just save that,

331
00:14:38,866 --> 00:14:40,770
and I'll prove that it
still actually works.

332
00:14:40,770 --> 00:14:43,270
It has the benefit they're still working.

333
00:14:43,270 --> 00:14:44,970
Okay. So that's still looking good.

334
00:14:44,970 --> 00:14:46,383
That was this example here.

335
00:14:47,250 --> 00:14:49,140
And to take it a step further,

336
00:14:49,140 --> 00:14:52,740
instead of doing the destructuring
here inside the function,

337
00:14:52,740 --> 00:14:55,620
you can actually use
destructuring syntax directly

338
00:14:55,620 --> 00:14:57,060
in the function parameter.

339
00:14:57,060 --> 00:14:59,280
The function receives one object,

340
00:14:59,280 --> 00:15:01,980
you can de structure that
incoming object like this,

341
00:15:01,980 --> 00:15:04,920
extract the Fname property
into that variable

342
00:15:04,920 --> 00:15:07,293
and extract the Lname property into that.

343
00:15:08,130 --> 00:15:12,330
Okay. And then I can get
rid of this statement.

344
00:15:12,330 --> 00:15:13,980
I've effectively done it in line.

345
00:15:14,910 --> 00:15:18,060
So what this means is... Or
and because it's type script,

346
00:15:18,060 --> 00:15:20,220
you need to just say, "Oh,
I'm not gonna bother fussing

347
00:15:20,220 --> 00:15:23,430
about what types they
are, anything will do."

348
00:15:23,430 --> 00:15:27,150
So these properties get passed in

349
00:15:27,150 --> 00:15:32,100
from my main application component.

350
00:15:32,100 --> 00:15:35,010
When it passes in an Fname
property and an Lname,

351
00:15:35,010 --> 00:15:37,210
those get passed into an object.

352
00:15:37,210 --> 00:15:39,570
That object is destructured.

353
00:15:39,570 --> 00:15:42,544
The Fname property is
extracted into this variable

354
00:15:42,544 --> 00:15:45,030
and the Lname into that variable.

355
00:15:45,030 --> 00:15:48,150
And that means, we don't need
to do any kind of explicit

356
00:15:48,150 --> 00:15:50,190
extraction here.

357
00:15:50,190 --> 00:15:52,410
We can just use the
variables that have already

358
00:15:52,410 --> 00:15:54,750
been extracted, like so, okay?

359
00:15:54,750 --> 00:15:57,813
So that's a really common
technique in React.

360
00:15:59,190 --> 00:16:00,600
Okay. What's next?

361
00:16:00,600 --> 00:16:02,790
Let's have a look at this example here.

362
00:16:02,790 --> 00:16:06,090
What I've done here is
instead of hard copying it,

363
00:16:06,090 --> 00:16:07,620
I've got an object, okay.

364
00:16:07,620 --> 00:16:10,740
Typically, you have an object
that contains some data.

365
00:16:10,740 --> 00:16:12,300
So this object, you know,

366
00:16:12,300 --> 00:16:15,150
it might have come from
a rest service call.

367
00:16:15,150 --> 00:16:18,270
So you've actually got
an object here, a person,

368
00:16:18,270 --> 00:16:20,580
and the person's first name is Kari,

369
00:16:20,580 --> 00:16:23,910
and the person's last name is Nordmann.

370
00:16:23,910 --> 00:16:26,490
And the sent backs I've
got here is kind of similar

371
00:16:26,490 --> 00:16:27,600
to the previous slide,

372
00:16:27,600 --> 00:16:30,750
grab the person's first name, Kari,

373
00:16:30,750 --> 00:16:32,880
and pass it in as the Fname parameter.

374
00:16:32,880 --> 00:16:34,920
So the same thing's gonna happen.

375
00:16:34,920 --> 00:16:37,050
An object will get created.

376
00:16:37,050 --> 00:16:39,197
It'll have an Fname property,

377
00:16:39,197 --> 00:16:42,960
and the Fname property will be
the person's first name Kari,

378
00:16:42,960 --> 00:16:44,880
I'll just write K for Kari,

379
00:16:44,880 --> 00:16:48,270
and then I'll pass into the
object, an L name property,

380
00:16:48,270 --> 00:16:50,816
L name, and the L name
property is going to be

381
00:16:50,816 --> 00:16:53,730
the person's last name, which is Nordmann.

382
00:16:53,730 --> 00:16:54,693
I'll just write N.

383
00:16:55,650 --> 00:16:59,130
Okay. So an object, I grab the properties,

384
00:16:59,130 --> 00:17:02,820
pass them in as properties
called that and that,

385
00:17:02,820 --> 00:17:05,880
the object gets passed into my component.

386
00:17:05,880 --> 00:17:08,980
My component can then access
the person's first name

387
00:17:10,200 --> 00:17:13,210
and the person's last name like that.

388
00:17:13,210 --> 00:17:15,180
Okay. So basically, it's very similar,

389
00:17:15,180 --> 00:17:17,218
the only difference between
this and the previous example

390
00:17:17,218 --> 00:17:19,923
is that the data came
from an object beforehand.

391
00:17:20,880 --> 00:17:22,390
One last example, here

392
00:17:24,240 --> 00:17:27,090
you can also use the spread operator.

393
00:17:27,090 --> 00:17:30,150
The spread operator will
automatically expand

394
00:17:30,150 --> 00:17:32,610
an object into its constituent parts.

395
00:17:32,610 --> 00:17:35,070
So when you say ...person,

396
00:17:35,070 --> 00:17:38,340
this is equivalent to say, right,

397
00:17:38,340 --> 00:17:42,000
invoke the Panel C component, Panel C,

398
00:17:42,000 --> 00:17:45,510
expand all the properties
in the person object.

399
00:17:45,510 --> 00:17:46,343
So in other words,

400
00:17:46,343 --> 00:17:49,483
it'll basically expand
it into Fname = Kari,

401
00:17:51,360 --> 00:17:52,920
I'll just write K for Kari.

402
00:17:52,920 --> 00:17:55,200
And it'll also expand the Lname property.

403
00:17:55,200 --> 00:17:58,200
The.... syntax basically just
expands all the properties

404
00:17:58,200 --> 00:17:59,073
one by one.

405
00:18:00,150 --> 00:18:01,080
So it's easier.

406
00:18:01,080 --> 00:18:03,750
It's easier for you to expand
the object using that syntax.

407
00:18:03,750 --> 00:18:07,710
It'll automatically
generate an Fname property

408
00:18:07,710 --> 00:18:10,290
and then Lname property, like so, okay.

409
00:18:10,290 --> 00:18:11,640
And then, once you've done that,

410
00:18:11,640 --> 00:18:15,030
those properties will then
get bundled into an object

411
00:18:15,030 --> 00:18:17,610
and passed up into my component

412
00:18:17,610 --> 00:18:19,650
in the same way that
we've been looking at.

413
00:18:19,650 --> 00:18:22,440
Okay. So the spread
operator is the easiest way

414
00:18:22,440 --> 00:18:26,523
to pass an entire object
into another component.

415
00:18:27,990 --> 00:18:30,450
Right. Almost done.

416
00:18:30,450 --> 00:18:32,550
Panel D, have a look at this one.

417
00:18:32,550 --> 00:18:34,590
I've got a rich data type here.

418
00:18:34,590 --> 00:18:39,590
An employee has a name and
a salary and some skills.

419
00:18:40,260 --> 00:18:44,220
This person can do Spring
Boot, React, and type script.

420
00:18:44,220 --> 00:18:47,140
Pass all of those properties
up into the component.

421
00:18:47,140 --> 00:18:51,660
Okay. So using the spread operator here,

422
00:18:51,660 --> 00:18:53,283
again, it'll create an object,

423
00:18:54,212 --> 00:18:57,600
and that object will basically
have a name property,

424
00:18:57,600 --> 00:18:59,100
the employee's name.

425
00:18:59,100 --> 00:19:01,650
The employee's name, Jane Doe.

426
00:19:01,650 --> 00:19:02,727
Okay, good.

427
00:19:02,727 --> 00:19:05,760
There'll be a salary property.

428
00:19:05,760 --> 00:19:07,080
How much does Jane earn?

429
00:19:07,080 --> 00:19:10,740
Jane earns 20 K, not bad.

430
00:19:10,740 --> 00:19:14,490
And there's skills property, skills.

431
00:19:14,490 --> 00:19:16,740
Skills is an array of strings.

432
00:19:16,740 --> 00:19:20,280
I'll draw that like this, as an array.

433
00:19:20,280 --> 00:19:24,630
Okay. So those properties
get bundled into an object.

434
00:19:24,630 --> 00:19:26,930
That object is then
passed into the component,

435
00:19:27,900 --> 00:19:30,870
and the component uses
that destructuring syntax.

436
00:19:30,870 --> 00:19:33,780
It says, grab the name into that variable

437
00:19:33,780 --> 00:19:35,280
that would be Jane Doe.

438
00:19:35,280 --> 00:19:38,070
Extract the salary, 20 K,

439
00:19:38,070 --> 00:19:39,510
and extract the skills.

440
00:19:39,510 --> 00:19:43,050
The skills remember is that
array that looks like this.

441
00:19:43,050 --> 00:19:46,560
And then, it outputs the name
Jane Doe, and the salary.

442
00:19:46,560 --> 00:19:49,260
And then what it does is
it uses a map function.

443
00:19:49,260 --> 00:19:50,960
This is a really common technique.

444
00:19:51,870 --> 00:19:53,010
I've got an unordered list here,

445
00:19:53,010 --> 00:19:54,760
I'll remind you what it looks like.

446
00:19:55,650 --> 00:19:56,790
This is what it's gonna look like.

447
00:19:56,790 --> 00:19:59,040
It takes the strings
of the person's skills

448
00:19:59,040 --> 00:20:03,660
and it converts each string
into a list item like that,

449
00:20:03,660 --> 00:20:05,493
using array map.

450
00:20:06,540 --> 00:20:09,750
It takes skills, which is the array,

451
00:20:09,750 --> 00:20:10,860
and it passes...

452
00:20:10,860 --> 00:20:12,180
It calls the map function.

453
00:20:12,180 --> 00:20:15,300
When you call the map
function on an array,

454
00:20:15,300 --> 00:20:18,240
it'll call, I've specified
here, effectively,

455
00:20:18,240 --> 00:20:21,960
an arrow function that
starts there and ends there.

456
00:20:21,960 --> 00:20:26,100
This is an arrow function,

457
00:20:26,100 --> 00:20:29,400
and it's gonna call that arrow
function for each element.

458
00:20:29,400 --> 00:20:34,050
So the first one, it basically
passed in the first skill.

459
00:20:34,050 --> 00:20:34,883
Okay.

460
00:20:35,970 --> 00:20:38,490
The first skill will be in Spring Boot

461
00:20:38,490 --> 00:20:41,763
and the index is the zero, basically.

462
00:20:42,870 --> 00:20:44,820
And then in here, it outputs,

463
00:20:44,820 --> 00:20:46,620
it basically takes that skill, Spring Boot

464
00:20:46,620 --> 00:20:48,900
and it converts it into a list item.

465
00:20:48,900 --> 00:20:50,310
Ignore the key attribute for now,

466
00:20:50,310 --> 00:20:52,350
that's just a React mechanism.

467
00:20:52,350 --> 00:20:54,960
It outputs the skill, Spring Booth.

468
00:20:54,960 --> 00:20:56,310
Don't forget curly brackets

469
00:20:56,310 --> 00:20:58,830
when you have JavaScript
in the middle of a list,

470
00:20:58,830 --> 00:21:00,570
and then enlist item.

471
00:21:00,570 --> 00:21:04,020
So it took in that text, Spring Boot,

472
00:21:04,020 --> 00:21:07,383
and it converted it into
a list item like that.

473
00:21:08,310 --> 00:21:09,347
Okay.

474
00:21:09,347 --> 00:21:12,270
The whole thing is enclosed
in an unordered list.

475
00:21:12,270 --> 00:21:15,390
So I guess what I could do,
I'm gonna go back into my code.

476
00:21:15,390 --> 00:21:18,810
I'm gonna modify my map function.

477
00:21:18,810 --> 00:21:19,710
I'm gonna, first of all,

478
00:21:19,710 --> 00:21:22,290
slightly rearrange the indentation

479
00:21:22,290 --> 00:21:24,663
to see if that makes it
look easier on the eye.

480
00:21:25,584 --> 00:21:28,050
I'm quite fussy with my
code, I don't know about you,

481
00:21:28,050 --> 00:21:30,960
but I spend quite a lot of
time fussing about my code

482
00:21:30,960 --> 00:21:33,873
to make sure that it's as
readable as possibly could be.

483
00:21:35,910 --> 00:21:38,130
Right. So I have an unordered list.

484
00:21:38,130 --> 00:21:40,713
I'm gonna change that to
be an ordered list, OL.

485
00:21:41,909 --> 00:21:42,742
OL.

486
00:21:42,742 --> 00:21:44,880
Okay. Remember, whenever
you change your code here,

487
00:21:44,880 --> 00:21:48,060
React automatically refreshes the browser.

488
00:21:48,060 --> 00:21:53,060
So I should now have an
ordered list and it is ordered.

489
00:21:53,850 --> 00:21:56,550
And what I'm gonna do is I'm
going to take each skill,

490
00:21:56,550 --> 00:21:58,203
I'm gonna rename this variable.

491
00:21:59,070 --> 00:22:00,480
Generally, when you've got Lambdas,

492
00:22:00,480 --> 00:22:03,000
you wanna give these
variables short names.

493
00:22:03,000 --> 00:22:05,313
I'll just call it S, S for skill.

494
00:22:06,420 --> 00:22:08,970
And it'll take the skill
and the index number,

495
00:22:08,970 --> 00:22:12,270
and it'll display a list item with a key.

496
00:22:12,270 --> 00:22:15,683
The key is just there to react,
like each element in a list

497
00:22:15,683 --> 00:22:18,180
to have a different ID number.

498
00:22:18,180 --> 00:22:21,513
And I'm gonna put the skill in uppercase.

499
00:22:22,620 --> 00:22:23,820
Okay. Because it is a string,

500
00:22:23,820 --> 00:22:26,190
I can convert it in uppercase.

501
00:22:26,190 --> 00:22:28,290
Okay. So basically,
the string that came in

502
00:22:28,290 --> 00:22:31,500
was like Spring Boot, and
it'll display Spring Boot

503
00:22:31,500 --> 00:22:33,903
in a list item in capital letters.

504
00:22:35,760 --> 00:22:36,850
There we go.

505
00:22:36,850 --> 00:22:39,060
All right. So it's really
quite a useful thing.

506
00:22:39,060 --> 00:22:40,765
You often have arrays in React,

507
00:22:40,765 --> 00:22:43,380
and you typically take the array of data

508
00:22:43,380 --> 00:22:46,830
and you map each piece
of data into an element.

509
00:22:46,830 --> 00:22:48,240
And that element gets displayed

510
00:22:48,240 --> 00:22:51,120
as a larger part of your output.

511
00:22:51,120 --> 00:22:55,275
And remember, remember to put
code inside curly brackets.

512
00:22:55,275 --> 00:22:57,210
If you forgot the curly brackets,

513
00:22:57,210 --> 00:22:59,343
it would just output the text, literally,

514
00:23:00,390 --> 00:23:02,703
which wouldn't be so
pleasing for the user.

515
00:23:03,540 --> 00:23:05,700
Okay. Now, instead of
actually displaying the value,

516
00:23:05,700 --> 00:23:08,160
it just displayed, oh, the code.

517
00:23:08,160 --> 00:23:11,160
So you'd probably get a
G-reel report if you did that.

518
00:23:11,160 --> 00:23:13,020
So let's just fix it,

519
00:23:13,020 --> 00:23:15,930
and let's put the curly brackets
back in again, there we go.

520
00:23:15,930 --> 00:23:18,960
And the user interface, lovely.

521
00:23:18,960 --> 00:23:21,150
So that's quite a realistic example.

522
00:23:21,150 --> 00:23:25,440
Just to summarize, we have
an application component,

523
00:23:25,440 --> 00:23:28,293
and the application component
calls other components,

524
00:23:29,130 --> 00:23:31,650
and each other component
can have parameters

525
00:23:31,650 --> 00:23:33,990
to basically decide what to render.

526
00:23:33,990 --> 00:23:37,110
You can pass the parameters
in, in many different ways.

527
00:23:37,110 --> 00:23:40,890
And when the component receives
it, it can use techniques

528
00:23:40,890 --> 00:23:43,920
like mapping to decide how to display it.

529
00:23:43,920 --> 00:23:47,160
One final point which I
hadn't mentioned before.

530
00:23:47,160 --> 00:23:50,730
When you have a component, it returns XML,

531
00:23:50,730 --> 00:23:53,850
it's gonna return a single
outer element. Okay?

532
00:23:53,850 --> 00:23:57,150
You can't return like sibling elements.

533
00:23:57,150 --> 00:23:58,746
You have to have one element as a wrapper,

534
00:23:58,746 --> 00:24:00,723
and that's what fragment React is.

535
00:24:01,830 --> 00:24:03,600
It's like an invisible wrapper.

536
00:24:03,600 --> 00:24:05,100
If I just left it like that,

537
00:24:05,100 --> 00:24:08,460
it'll say, you can't return
lots of elements side by side.

538
00:24:08,460 --> 00:24:10,215
They have to be encapsulated

539
00:24:10,215 --> 00:24:13,170
in a single element on the upside.

540
00:24:13,170 --> 00:24:14,340
So you could write that.

541
00:24:14,340 --> 00:24:17,610
These days, in modern React,
you can just actually write it

542
00:24:17,610 --> 00:24:19,740
like this, it looks a bit odd.

543
00:24:19,740 --> 00:24:21,739
It's like an empty element.

544
00:24:21,739 --> 00:24:24,660
It fulfills the purpose
of being a wrapper.

545
00:24:24,660 --> 00:24:25,860
It doesn't display anything,

546
00:24:25,860 --> 00:24:29,460
it's just a sandwich with
the meat in the middle.

547
00:24:29,460 --> 00:24:30,293
There we go.

548
00:24:30,293 --> 00:24:32,103
So I think it's quite nice.