1
00:00:06,290 --> 00:00:08,220
`- So we're going to be looking at React

2
00:00:08,220 --> 00:00:11,280
in quite a lot of detail in
this lesson and the next lesson.

3
00:00:11,280 --> 00:00:15,510
This lesson concentrates on
explaining how React looks.

4
00:00:15,510 --> 00:00:16,590
And then the following lesson

5
00:00:16,590 --> 00:00:20,670
goes into more detail on how
to test React applications.

6
00:00:20,670 --> 00:00:21,900
So what is React?

7
00:00:21,900 --> 00:00:24,660
Well, it's a lightweight
client-side framework

8
00:00:24,660 --> 00:00:25,830
from Facebook.

9
00:00:25,830 --> 00:00:29,100
Makes it easier for you
to organize large amounts

10
00:00:29,100 --> 00:00:31,290
of user interface code.

11
00:00:31,290 --> 00:00:32,670
You need to have some kind of framework

12
00:00:32,670 --> 00:00:34,740
when you're implementing
this one in the code.

13
00:00:34,740 --> 00:00:37,950
So that you have structure in
the work that you're doing.

14
00:00:37,950 --> 00:00:39,780
Now, it turns out that with React,

15
00:00:39,780 --> 00:00:42,420
you can actually create two
different types of application.

16
00:00:42,420 --> 00:00:45,390
You can create applications
for a web browser,

17
00:00:45,390 --> 00:00:46,510
this is ReactJS,

18
00:00:47,408 --> 00:00:50,220
this is what we're gonna
cover in this lesson.

19
00:00:50,220 --> 00:00:52,350
Alternatively, you can use React

20
00:00:52,350 --> 00:00:55,260
to create native applications
in order to target,

21
00:00:55,260 --> 00:00:58,140
in particular, mobile
platform, like a cell phone.

22
00:00:58,140 --> 00:01:01,380
So like a iOS or Android devices.

23
00:01:01,380 --> 00:01:04,590
The React library itself
is basically the same

24
00:01:04,590 --> 00:01:06,630
but you can render your user interface

25
00:01:06,630 --> 00:01:09,480
either in a web browser, ReactJS,

26
00:01:09,480 --> 00:01:13,860
or on a native mobile
device, React Native.

27
00:01:13,860 --> 00:01:16,023
So we're gonna focus on ReactJS.

28
00:01:17,400 --> 00:01:19,650
It turns out that you
can either use JavaScript

29
00:01:19,650 --> 00:01:20,820
or TypeScript

30
00:01:20,820 --> 00:01:23,190
to implement React applications.

31
00:01:23,190 --> 00:01:24,270
And to be honest,

32
00:01:24,270 --> 00:01:27,510
there's probably as many
people use one as the other.

33
00:01:27,510 --> 00:01:30,480
JavaScript has the
advantage of being simpler,

34
00:01:30,480 --> 00:01:33,750
so you can write code with less ceremony.

35
00:01:33,750 --> 00:01:35,550
But TypeScript is more rigorous

36
00:01:35,550 --> 00:01:38,820
because in TypeScript
when you declare a verbal,

37
00:01:38,820 --> 00:01:41,160
you specify what type it's going to be

38
00:01:41,160 --> 00:01:45,510
and therefore the compiler
can help check misuse.

39
00:01:45,510 --> 00:01:48,330
TypeScript also has other features

40
00:01:48,330 --> 00:01:51,990
like interfaces and enums.

41
00:01:51,990 --> 00:01:53,640
And those also, you know,

42
00:01:53,640 --> 00:01:56,700
can help you write well
structured applications

43
00:01:56,700 --> 00:01:57,900
with fewer bugs.

44
00:01:57,900 --> 00:02:01,200
So we're gonna kind of
look at both approaches.

45
00:02:01,200 --> 00:02:02,850
The first few examples we're gonna look at

46
00:02:02,850 --> 00:02:04,590
will use JavaScript.

47
00:02:04,590 --> 00:02:07,590
And then as we get into more
complex examples later on,

48
00:02:07,590 --> 00:02:10,080
we'll kind of switch and
we look at TypeScript.

49
00:02:10,080 --> 00:02:11,530
Which is, you know, probably,

50
00:02:12,900 --> 00:02:14,850
I would choose TypeScript myself

51
00:02:14,850 --> 00:02:17,550
because it gives you a little
bit more rigor in your code.

52
00:02:17,550 --> 00:02:19,020
But in either case,

53
00:02:19,020 --> 00:02:21,990
you're gonna be making use
of some of the new features

54
00:02:21,990 --> 00:02:23,610
introduced in JavaScript.

55
00:02:23,610 --> 00:02:24,630
So what I thought I'd do is,

56
00:02:24,630 --> 00:02:27,060
before we actually dive
into React in detail,

57
00:02:27,060 --> 00:02:28,920
I thought I'd give you a quick summary

58
00:02:28,920 --> 00:02:31,560
of some of the top new
features in JavaScript

59
00:02:31,560 --> 00:02:35,730
that you need to know about
to use React effectively.

60
00:02:35,730 --> 00:02:39,000
So, first of all, interpolated strings.

61
00:02:39,000 --> 00:02:40,830
I'm gonna give you some examples

62
00:02:40,830 --> 00:02:42,720
of each of these topics I'm gonna look at

63
00:02:42,720 --> 00:02:44,160
in the next few minutes.

64
00:02:44,160 --> 00:02:45,723
So an interpolated string,

65
00:02:46,590 --> 00:02:47,670
would look like this,

66
00:02:47,670 --> 00:02:48,930
you could declare a variable.

67
00:02:48,930 --> 00:02:52,500
Let's say I've got a variable
holding the person's name

68
00:02:52,500 --> 00:02:55,980
and the person's name
is Andy, a good name.

69
00:02:55,980 --> 00:02:58,153
And the person's age is 21.

70
00:03:01,669 --> 00:03:05,343
And what I'm gonna do is
I'm gonna have a string.

71
00:03:05,343 --> 00:03:06,390
I'm gonna declare a string.

72
00:03:06,390 --> 00:03:11,390
Oh, let is a new way of declaring
variables in ECMAScript 6.

73
00:03:12,270 --> 00:03:15,090
I'm gonna declare a string called S,

74
00:03:15,090 --> 00:03:17,640
which is going to be
an interpolated string.

75
00:03:17,640 --> 00:03:18,960
An interpolated string

76
00:03:18,960 --> 00:03:22,890
starts with a back tick
and inside the back ticks

77
00:03:22,890 --> 00:03:26,160
you can have embedded expressions.

78
00:03:26,160 --> 00:03:30,810
Hi and then you say dollar, curly bracket

79
00:03:30,810 --> 00:03:32,130
and then inside the curly brackets

80
00:03:32,130 --> 00:03:33,330
you can have an expression,

81
00:03:33,330 --> 00:03:35,010
an embedded JavaScript expression

82
00:03:35,010 --> 00:03:36,420
So, hi

83
00:03:36,420 --> 00:03:38,010
Andy,

84
00:03:38,010 --> 00:03:43,010
you will soon be,

85
00:03:43,350 --> 00:03:45,270
excuse my typing,

86
00:03:45,270 --> 00:03:48,720
dollar, age plus one.

87
00:03:48,720 --> 00:03:49,903
Okay, so there you go.

88
00:03:51,180 --> 00:03:52,013
Cheers.

89
00:03:53,220 --> 00:03:56,400
So that's an example of
an interpolated string.

90
00:03:56,400 --> 00:03:59,580
A string that starts
and ends with back ticks

91
00:03:59,580 --> 00:04:02,640
and then inside it has curly
bracket, dollar expressions,

92
00:04:02,640 --> 00:04:03,720
which are evaluated.

93
00:04:03,720 --> 00:04:07,050
Hi Andy, you will be 22 soon.

94
00:04:07,050 --> 00:04:08,220
Cheers.

95
00:04:08,220 --> 00:04:09,810
That's an interpolated string.

96
00:04:09,810 --> 00:04:12,630
So that comes in quite
handy because often in React

97
00:04:12,630 --> 00:04:14,970
you are trying to build
up a string of HTML

98
00:04:14,970 --> 00:04:16,680
with embedded values,

99
00:04:16,680 --> 00:04:20,490
so the back tick helps
you to build up a string

100
00:04:20,490 --> 00:04:21,753
in one expression.

101
00:04:22,770 --> 00:04:25,410
Okay, next topic, arrow functions.

102
00:04:25,410 --> 00:04:28,350
An arrow function is
also known as a lambda

103
00:04:28,350 --> 00:04:29,490
in other languages.

104
00:04:29,490 --> 00:04:31,830
It's an anonymous function effectively.

105
00:04:31,830 --> 00:04:35,610
So that's typically used
for handling events.

106
00:04:35,610 --> 00:04:37,920
So it might look something like this.

107
00:04:37,920 --> 00:04:40,260
Well traditionally in JavaScript,

108
00:04:40,260 --> 00:04:41,310
you might have written code like this.

109
00:04:41,310 --> 00:04:42,960
Imagine you've got a button,

110
00:04:42,960 --> 00:04:46,650
let button one equals something.

111
00:04:46,650 --> 00:04:50,613
Okay, so you basically
found a button in your code.

112
00:04:51,625 --> 00:04:53,250
I'll just declare it as
available, like that,

113
00:04:53,250 --> 00:04:57,640
but either we've done
something like document dot get

114
00:05:00,240 --> 00:05:02,073
or how about this query selector,

115
00:05:05,310 --> 00:05:10,310
query selector and you
give it the ID of a button,

116
00:05:10,500 --> 00:05:12,270
button one, in your webpage.

117
00:05:12,270 --> 00:05:14,550
So button one is a button

118
00:05:14,550 --> 00:05:16,063
and you wanna handle the click event.

119
00:05:16,063 --> 00:05:19,380
So you can say button,

120
00:05:19,380 --> 00:05:21,543
button one dot on click.

121
00:05:24,840 --> 00:05:26,463
When the click event occurs,

122
00:05:27,607 --> 00:05:28,830
oh, sorry about my typing,

123
00:05:28,830 --> 00:05:30,124
you just,

124
00:05:30,124 --> 00:05:31,560
you give it a function

125
00:05:31,560 --> 00:05:33,480
and that function will be invoked

126
00:05:33,480 --> 00:05:35,040
when the click event occurs.

127
00:05:35,040 --> 00:05:37,290
So, in traditional programming,

128
00:05:37,290 --> 00:05:39,480
JavaScript, you'd've
had a callback function

129
00:05:39,480 --> 00:05:41,220
a function like this,

130
00:05:41,220 --> 00:05:44,430
which does some work.

131
00:05:44,430 --> 00:05:45,263
So,

132
00:05:47,130 --> 00:05:48,870
it does some handling event there.

133
00:05:48,870 --> 00:05:50,940
Okay, so if I was gonna write it,

134
00:05:50,940 --> 00:05:51,840
I'd write it like that.

135
00:05:51,840 --> 00:05:53,690
So that would be, that would be fine.

136
00:05:54,870 --> 00:05:57,330
But in ECMAScript these days,

137
00:05:57,330 --> 00:05:59,760
instead of having an anonymous
function written that way

138
00:05:59,760 --> 00:06:02,340
you can have a lambda
or an arrow function.

139
00:06:02,340 --> 00:06:05,160
You have parenthesis
representing the parameters

140
00:06:05,160 --> 00:06:07,920
and then you have an arrow like this.

141
00:06:07,920 --> 00:06:08,753
Okay?

142
00:06:08,753 --> 00:06:11,520
So basically this is the lambda syntax,

143
00:06:11,520 --> 00:06:12,900
or arrow functions,

144
00:06:12,900 --> 00:06:16,293
more or less the same as
callback functions in ECMAScript,

145
00:06:17,190 --> 00:06:20,790
traditional ECMAScript, but
a slightly easier syntax.

146
00:06:20,790 --> 00:06:23,790
And this event handler
can receive a parameter,

147
00:06:23,790 --> 00:06:25,710
like an event.

148
00:06:25,710 --> 00:06:26,543
Okay?

149
00:06:26,543 --> 00:06:30,120
So you can say, this is
the event that occurred,

150
00:06:30,120 --> 00:06:34,290
click event, handle the event
inside this arrow function.

151
00:06:34,290 --> 00:06:35,123
Okay?

152
00:06:35,123 --> 00:06:38,463
So those are called arrow
functions, as in an arrow,

153
00:06:39,390 --> 00:06:42,750
but they're also called lambdas
in most other languages.

154
00:06:42,750 --> 00:06:45,600
Okay, classes and inheritance.

155
00:06:45,600 --> 00:06:48,780
So, JavaScript, for the last 15 years,

156
00:06:48,780 --> 00:06:51,480
emulated object orientation

157
00:06:51,480 --> 00:06:54,900
in a, kind of, relatively clumsy way

158
00:06:54,900 --> 00:06:57,210
but ECMAScript these
days has proper support

159
00:06:57,210 --> 00:07:00,120
for classes and inheritance.

160
00:07:00,120 --> 00:07:04,200
So you could find a class
called bank account,

161
00:07:04,200 --> 00:07:06,450
a good old bank account class.

162
00:07:06,450 --> 00:07:07,980
And in the bank account class you'd have

163
00:07:07,980 --> 00:07:09,360
a constructive function

164
00:07:09,360 --> 00:07:12,870
to initialize a new bank
account when it's created.

165
00:07:12,870 --> 00:07:17,790
You'd pass in the name
and the initial balance

166
00:07:17,790 --> 00:07:20,460
and the constructor would
add those properties

167
00:07:20,460 --> 00:07:21,750
to the object.

168
00:07:21,750 --> 00:07:25,290
This object now has a name, property,

169
00:07:25,290 --> 00:07:27,543
which receives the
incoming parameter name.

170
00:07:28,860 --> 00:07:31,680
This bank account object
has an age property,

171
00:07:31,680 --> 00:07:33,033
age balance,

172
00:07:34,020 --> 00:07:37,440
which is the value of the
balance property passed in

173
00:07:37,440 --> 00:07:38,273
like so.

174
00:07:38,273 --> 00:07:41,520
So a constructive function
would initialize a new object.

175
00:07:41,520 --> 00:07:44,670
You might also have a method
to deposit and withdraw.

176
00:07:44,670 --> 00:07:46,503
So let's write the deposit method.

177
00:07:47,340 --> 00:07:50,250
It takes in the amount to be deposited

178
00:07:50,250 --> 00:07:52,630
and it increments this object balance

179
00:07:54,450 --> 00:07:56,253
to include the amount,

180
00:07:57,171 --> 00:07:58,350
like that.

181
00:07:58,350 --> 00:08:00,933
And you'd have a withdrawal
function and so on.

182
00:08:02,210 --> 00:08:03,810
You could inherit from it,

183
00:08:03,810 --> 00:08:07,350
a special kind of bank account
called savings account,

184
00:08:07,350 --> 00:08:08,700
which doesn't,

185
00:08:08,700 --> 00:08:10,440
which adds interest.

186
00:08:10,440 --> 00:08:11,970
So you'd say something like this,

187
00:08:11,970 --> 00:08:16,970
class, savings account,
extends or inherits from,

188
00:08:17,580 --> 00:08:19,260
in other words bank account.

189
00:08:19,260 --> 00:08:22,740
And in here you would define
how does a savings account

190
00:08:22,740 --> 00:08:23,760
extend bank account?

191
00:08:23,760 --> 00:08:25,470
Does it have extra properties?

192
00:08:25,470 --> 00:08:27,270
Does it have extra methods?

193
00:08:27,270 --> 00:08:28,103
And so on.

194
00:08:28,103 --> 00:08:31,200
Inheritance in JavaScript
is based on Java,

195
00:08:31,200 --> 00:08:33,120
syntax actually, not quite the same

196
00:08:33,120 --> 00:08:35,970
but based on Java, but much simpler.

197
00:08:35,970 --> 00:08:36,803
Okay?

198
00:08:36,803 --> 00:08:39,450
So that's the basic idea of inheritance,

199
00:08:39,450 --> 00:08:40,830
classes and inheritance.

200
00:08:40,830 --> 00:08:43,590
That's an important
feature you can imagine.

201
00:08:43,590 --> 00:08:46,020
We also have destructuring.

202
00:08:46,020 --> 00:08:47,860
Destructuring is where you take an object

203
00:08:47,860 --> 00:08:49,110
or an array

204
00:08:49,110 --> 00:08:51,750
and you deliberately extract each element

205
00:08:51,750 --> 00:08:54,720
into a separate variable all in one go.

206
00:08:54,720 --> 00:08:58,230
So, imagine I had this person object,

207
00:08:58,230 --> 00:08:59,850
that person one.

208
00:08:59,850 --> 00:09:01,560
I've got a person object

209
00:09:01,560 --> 00:09:05,673
and that person object has
a name, a name property.

210
00:09:07,770 --> 00:09:09,100
Let's go for Jayne

211
00:09:10,980 --> 00:09:12,303
and an age property,

212
00:09:15,690 --> 00:09:16,523
21

213
00:09:17,370 --> 00:09:19,353
and a nationality property,

214
00:09:20,940 --> 00:09:21,773
guess what?

215
00:09:23,010 --> 00:09:24,000
Correct.

216
00:09:24,000 --> 00:09:25,650
Welsh.

217
00:09:25,650 --> 00:09:26,580
So there's a person.

218
00:09:26,580 --> 00:09:29,160
What I can do is I can declare variables

219
00:09:29,160 --> 00:09:31,530
to extract each property one by one.

220
00:09:31,530 --> 00:09:33,210
Well, I could do it manually, like this,

221
00:09:33,210 --> 00:09:36,570
I could say, let's declare
a property called name,

222
00:09:36,570 --> 00:09:39,150
which will extract person one's name,

223
00:09:39,150 --> 00:09:40,620
that'll be Jayne.

224
00:09:40,620 --> 00:09:43,980
Let's declare another variable called age,

225
00:09:43,980 --> 00:09:47,040
which will extract the person's one,

226
00:09:47,040 --> 00:09:48,333
person one's age,

227
00:09:50,310 --> 00:09:51,240
21.

228
00:09:51,240 --> 00:09:54,540
Let's declare another variable called nat,

229
00:09:54,540 --> 00:09:56,850
which will extract the person,

230
00:09:56,850 --> 00:09:59,160
person one's nationality.

231
00:09:59,160 --> 00:10:00,780
So in each of these cases, manually,

232
00:10:00,780 --> 00:10:03,090
I've extracted a property from the object

233
00:10:03,090 --> 00:10:04,890
and copied it into a variable

234
00:10:04,890 --> 00:10:07,410
that happens to have the same name.

235
00:10:07,410 --> 00:10:09,360
So the ability to take an object

236
00:10:09,360 --> 00:10:12,840
and to access its properties one by one,

237
00:10:12,840 --> 00:10:14,520
to store in separate variables,

238
00:10:14,520 --> 00:10:17,970
I could write those three
lines, equivalently, like this.

239
00:10:17,970 --> 00:10:19,920
So these three lines here,

240
00:10:19,920 --> 00:10:21,510
I'm gonna comment out.

241
00:10:21,510 --> 00:10:22,350
And instead of those,

242
00:10:22,350 --> 00:10:24,040
I'm gonna declare all in one line

243
00:10:25,320 --> 00:10:26,370
this,

244
00:10:26,370 --> 00:10:30,410
curly brackets, name, age, nat, equals p1.

245
00:10:33,210 --> 00:10:34,800
This is destructuring.

246
00:10:34,800 --> 00:10:37,440
It takes the object on
the right hand side,

247
00:10:37,440 --> 00:10:41,310
and it creates variables called name

248
00:10:41,310 --> 00:10:44,190
and that automatically
holds the p1's name.

249
00:10:44,190 --> 00:10:47,580
This is the object that
will donate its properties.

250
00:10:47,580 --> 00:10:49,890
It'll donate its name property,

251
00:10:49,890 --> 00:10:52,410
in other words, copy
it into this variable.

252
00:10:52,410 --> 00:10:55,350
It creates this variable to hold p1's age

253
00:10:55,350 --> 00:10:58,290
and it creates that variable
to hold p1's nationality.

254
00:10:58,290 --> 00:10:59,970
So this destructuring,

255
00:10:59,970 --> 00:11:01,140
take an object

256
00:11:01,140 --> 00:11:05,730
and extract its properties
into separate variables

257
00:11:05,730 --> 00:11:08,130
is equivalent to these
three lines of code here.

258
00:11:09,000 --> 00:11:11,250
And we use that a lot in React, actually.

259
00:11:11,250 --> 00:11:13,410
Often you pass objects around

260
00:11:13,410 --> 00:11:15,600
and you want to get at
their internal properties.

261
00:11:15,600 --> 00:11:19,290
Destructuring does that for us.

262
00:11:19,290 --> 00:11:21,120
So that's destructuring.

263
00:11:21,120 --> 00:11:23,400
There's a similar, but opposite, process

264
00:11:23,400 --> 00:11:26,280
called the spread operator.

265
00:11:26,280 --> 00:11:28,230
Let me show you this one.

266
00:11:28,230 --> 00:11:30,243
Imagine I had an array.

267
00:11:31,560 --> 00:11:32,910
So, I've got an array here.

268
00:11:32,910 --> 00:11:37,910
Let array one equals 10, 20, 30.

269
00:11:40,500 --> 00:11:41,640
Okay.

270
00:11:41,640 --> 00:11:42,510
I could do this.

271
00:11:42,510 --> 00:11:47,013
I can say, console dot log a1.

272
00:11:48,360 --> 00:11:49,193
Okay.

273
00:11:49,193 --> 00:11:50,460
And what I'm gonna do
is I'm gonna prefix it

274
00:11:50,460 --> 00:11:52,260
with dot, dot, dot.

275
00:11:52,260 --> 00:11:54,510
In that context, the dot, dot, dots index

276
00:11:54,510 --> 00:11:56,910
means a spread operator.

277
00:11:56,910 --> 00:11:58,340
What the spread operator does

278
00:11:58,340 --> 00:12:02,310
is it expands the object or the array

279
00:12:02,310 --> 00:12:05,910
into a comma-separated
sequence of its elements.

280
00:12:05,910 --> 00:12:06,870
It's equivalent,

281
00:12:06,870 --> 00:12:07,980
this statement here,

282
00:12:07,980 --> 00:12:09,720
is completely equivalent

283
00:12:09,720 --> 00:12:12,810
to this console dot log.

284
00:12:12,810 --> 00:12:14,490
The dot, dot, dot operator,

285
00:12:14,490 --> 00:12:15,420
it says, basically,

286
00:12:15,420 --> 00:12:17,433
give me element zero of the array,

287
00:12:18,990 --> 00:12:21,616
a0,

288
00:12:21,616 --> 00:12:24,330
a0, comma.

289
00:12:24,330 --> 00:12:27,600
The spread operator basically
expands with a comma

290
00:12:27,600 --> 00:12:29,257
between each element,

291
00:12:29,257 --> 00:12:32,040
a element one, comma,

292
00:12:32,040 --> 00:12:33,123
a element two.

293
00:12:34,080 --> 00:12:34,913
Okay?

294
00:12:34,913 --> 00:12:36,870
So, those two statements
are, again, equivalent.

295
00:12:36,870 --> 00:12:40,740
The spread operator means
take the object or the array

296
00:12:40,740 --> 00:12:43,860
and split it into a
comma-separated sequence,

297
00:12:43,860 --> 00:12:46,980
element zero, comma, element
one, comma, element two.

298
00:12:46,980 --> 00:12:48,960
That's what the dot,
dot, dot operator does.

299
00:12:48,960 --> 00:12:50,160
And believe it or not,

300
00:12:50,160 --> 00:12:52,110
that actually turns
out to be really useful

301
00:12:52,110 --> 00:12:53,670
in React as well.

302
00:12:53,670 --> 00:12:55,560
Often, you have an object

303
00:12:55,560 --> 00:12:58,680
and you want to split it
into its individual parts

304
00:12:58,680 --> 00:13:01,740
so that you can access each
individual part separately.

305
00:13:01,740 --> 00:13:02,730
And that's what that does.

306
00:13:02,730 --> 00:13:05,520
It converts an object or an array

307
00:13:05,520 --> 00:13:09,813
into a comma-separated sequence
of its constituent parts.

308
00:13:11,370 --> 00:13:12,840
Okay,

309
00:13:12,840 --> 00:13:16,290
one last thing, array
mapping and filtering.

310
00:13:16,290 --> 00:13:17,970
You can take an array

311
00:13:17,970 --> 00:13:21,330
and it has a map function
to convert each element

312
00:13:21,330 --> 00:13:22,650
into something else.

313
00:13:22,650 --> 00:13:24,270
And it has a filter function

314
00:13:24,270 --> 00:13:28,440
to keep analytical WHERE clause in SQL.

315
00:13:28,440 --> 00:13:29,790
So I could take an array,

316
00:13:29,790 --> 00:13:31,680
I could take a1

317
00:13:31,680 --> 00:13:33,360
and I could say,

318
00:13:33,360 --> 00:13:37,170
take my array, a1 and map each element.

319
00:13:37,170 --> 00:13:38,010
The map function,

320
00:13:38,010 --> 00:13:40,410
well, there are lots of
different ways you can do this.

321
00:13:40,410 --> 00:13:42,960
It basically takes a
callback function to say,

322
00:13:42,960 --> 00:13:46,230
what would you like to
perform on each element?

323
00:13:46,230 --> 00:13:48,030
So for each element, I'll call it i,

324
00:13:49,562 --> 00:13:50,880
no, let's call it e, e for element.

325
00:13:50,880 --> 00:13:51,993
Let's call it elem.

326
00:13:53,670 --> 00:13:54,503
For each element

327
00:13:54,503 --> 00:13:57,813
I would like to convert it
into the element squared.

328
00:14:00,690 --> 00:14:02,640
So it implicitly iterates,

329
00:14:02,640 --> 00:14:05,160
you give it an array and the map function,

330
00:14:05,160 --> 00:14:07,713
it automatically iterates
through the elements.

331
00:14:09,300 --> 00:14:11,280
It'll iterate through the elements there.

332
00:14:11,280 --> 00:14:14,970
It'll call the lambda for each element.

333
00:14:14,970 --> 00:14:17,345
First of all, it'll pass in 10

334
00:14:17,345 --> 00:14:18,510
and we get back a hundred.

335
00:14:18,510 --> 00:14:20,433
What you get back is a result array.

336
00:14:24,360 --> 00:14:28,050
Whatever you wanna call it,
let's just call it r, ra.

337
00:14:28,050 --> 00:14:29,310
You give it an array

338
00:14:29,310 --> 00:14:32,880
and for each element, it'll
transform it into a squared.

339
00:14:32,880 --> 00:14:34,500
I'll get back a result array

340
00:14:34,500 --> 00:14:38,673
that will contain 10 squared,
20 squared, 30 squared.

341
00:14:40,350 --> 00:14:41,183
Okay?

342
00:14:41,183 --> 00:14:42,016
So that's very useful.

343
00:14:42,016 --> 00:14:44,190
That's really useful in React as well,

344
00:14:44,190 --> 00:14:45,023
because you'll see,

345
00:14:45,023 --> 00:14:47,100
because you'll often have an array of data

346
00:14:47,100 --> 00:14:48,900
and you want to transform the data

347
00:14:48,900 --> 00:14:51,270
into some kind of HTML element.

348
00:14:51,270 --> 00:14:52,770
Transform the data

349
00:14:52,770 --> 00:14:55,263
into an HTML element that I can display.

350
00:14:56,640 --> 00:14:57,473
Right.

351
00:14:57,473 --> 00:14:59,370
There's a filter function as well.

352
00:14:59,370 --> 00:15:00,990
Similar kind of thing.

353
00:15:00,990 --> 00:15:02,943
You say a1 dot filter.

354
00:15:03,870 --> 00:15:05,400
And again you give it a function

355
00:15:05,400 --> 00:15:08,670
and that function is
gonna be called, you know,

356
00:15:08,670 --> 00:15:09,720
n times,

357
00:15:09,720 --> 00:15:12,090
depending on your array size.

358
00:15:12,090 --> 00:15:13,740
What you've gotta do in this function

359
00:15:13,740 --> 00:15:17,310
is to return a true or false, you know,

360
00:15:17,310 --> 00:15:20,910
so, depending on what
your syntax is for why,

361
00:15:20,910 --> 00:15:23,910
under what circumstances do
you want to filter your data?

362
00:15:23,910 --> 00:15:28,910
Maybe you wanna get back
every element that is even.

363
00:15:29,010 --> 00:15:30,990
So, if you take the element

364
00:15:30,990 --> 00:15:33,330
and you divide it by two

365
00:15:33,330 --> 00:15:36,813
if the remainder is
zero, keep that element.

366
00:15:38,100 --> 00:15:41,260
So it'll basically pass 10 into here

367
00:15:42,150 --> 00:15:43,630
and then it'll pass in 20

368
00:15:44,730 --> 00:15:46,710
and then it'll pass in 30, you know,

369
00:15:46,710 --> 00:15:49,380
because that's array
that I'm iterating over.

370
00:15:49,380 --> 00:15:52,350
And for each time it'll
return true or false.

371
00:15:52,350 --> 00:15:53,760
If it returns true,

372
00:15:53,760 --> 00:15:57,570
then the element survives the filter.

373
00:15:57,570 --> 00:15:58,403
Okay?

374
00:15:58,403 --> 00:16:01,353
So I'll call this, let the
filtered array equal that.

375
00:16:03,423 --> 00:16:05,820
And just to make it even more
exciting than it already is,

376
00:16:05,820 --> 00:16:07,173
let's change that to be 21.

377
00:16:08,040 --> 00:16:10,860
So it'll pass in 10,

378
00:16:10,860 --> 00:16:13,740
10 is evenly divisible by two.

379
00:16:13,740 --> 00:16:15,090
So let's say, keep that element,

380
00:16:15,090 --> 00:16:16,290
it returns true.

381
00:16:16,290 --> 00:16:18,090
It then passes in 21,

382
00:16:18,090 --> 00:16:21,060
21 is not evenly divisible by two,

383
00:16:21,060 --> 00:16:22,770
so drop that one.

384
00:16:22,770 --> 00:16:25,500
It's like saying select
star from collection

385
00:16:25,500 --> 00:16:26,700
where it's an odd number,

386
00:16:26,700 --> 00:16:28,860
where it's an even number, like that.

387
00:16:28,860 --> 00:16:32,400
Okay, so, these are all
very useful techniques

388
00:16:32,400 --> 00:16:33,233
that we've just looked at

389
00:16:33,233 --> 00:16:34,230
and we'll be looking at them,

390
00:16:34,230 --> 00:16:38,190
we'll be using them ad hoc
during the next few sections.

391
00:16:38,190 --> 00:16:39,060
Right.

392
00:16:39,060 --> 00:16:40,920
There's also a bunch of libraries.

393
00:16:40,920 --> 00:16:42,180
When you write a React application,

394
00:16:42,180 --> 00:16:45,720
obviously you need to get
the libraries from somewhere.

395
00:16:45,720 --> 00:16:48,270
React is a relatively small framework.

396
00:16:48,270 --> 00:16:49,103
Okay?

397
00:16:49,103 --> 00:16:49,936
So there aren't that many libraries

398
00:16:49,936 --> 00:16:51,140
that you need to pull in.

399
00:16:52,650 --> 00:16:53,970
You've got two different ways

400
00:16:53,970 --> 00:16:56,340
in which you can pull the libraries in.

401
00:16:56,340 --> 00:16:57,420
The easiest approach,

402
00:16:57,420 --> 00:16:58,530
we'll have a look at first,

403
00:16:58,530 --> 00:17:00,630
is to write a simple webpage.

404
00:17:00,630 --> 00:17:04,650
And in our webpage we're
gonna include script tags,

405
00:17:04,650 --> 00:17:08,100
which will pull in libraries
directly from a website.

406
00:17:08,100 --> 00:17:09,120
There's a website you might've come across

407
00:17:09,120 --> 00:17:11,340
unpkg.com.

408
00:17:11,340 --> 00:17:15,690
It's a website for many
standard NodeJS libraries.

409
00:17:15,690 --> 00:17:18,780
So initially, we write a
simple React application

410
00:17:18,780 --> 00:17:20,700
that'll pull in the libraries directly

411
00:17:20,700 --> 00:17:22,983
using script tags from HTML.

412
00:17:24,390 --> 00:17:25,530
A better approach

413
00:17:25,530 --> 00:17:29,463
is to download the libraries
onto your local machine,

414
00:17:30,300 --> 00:17:33,600
rather than pulling them down
as part of your web rendering.

415
00:17:33,600 --> 00:17:35,940
It's better to pull those
libraries down initially

416
00:17:35,940 --> 00:17:36,900
and then kind of build them

417
00:17:36,900 --> 00:17:39,210
into your application source code.

418
00:17:39,210 --> 00:17:40,350
So to do that,

419
00:17:40,350 --> 00:17:43,650
you need to use Node
Package Manager or YARN.

420
00:17:43,650 --> 00:17:45,150
So that's the preferred way of doing it

421
00:17:45,150 --> 00:17:46,620
because it gives you a,

422
00:17:46,620 --> 00:17:48,150
kind of like a way of optimizing

423
00:17:48,150 --> 00:17:50,790
the application size afterwards.

424
00:17:50,790 --> 00:17:53,250
So, we'll start off
with the first approach,

425
00:17:53,250 --> 00:17:54,870
in the first example

426
00:17:54,870 --> 00:17:56,640
and then we'll see how to do it properly

427
00:17:56,640 --> 00:17:59,553
using YARN or Node afterwards.

428
00:18:01,080 --> 00:18:01,913
Okay?

429
00:18:01,913 --> 00:18:04,050
So that gives you an idea
of where we're heading.

430
00:18:04,050 --> 00:18:05,880
What we'll do in the next section

431
00:18:05,880 --> 00:18:08,160
is have a look at how
to write a very simple

432
00:18:08,160 --> 00:18:09,450
React application

433
00:18:09,450 --> 00:18:11,400
where we've pulled down
the libraries directly

434
00:18:11,400 --> 00:18:13,140
using this first approach.

435
00:18:13,140 --> 00:18:15,090
Then we'll take it a step further

436
00:18:15,090 --> 00:18:16,410
and see how to do it properly

437
00:18:16,410 --> 00:18:18,033
using Node Package Manager.