1
00:00:06,660 --> 00:00:07,500
- In this lesson

2
00:00:07,500 --> 00:00:10,770
we'll see how to create a
very simple React application.

3
00:00:10,770 --> 00:00:13,110
The application will
demonstrate, first of all

4
00:00:13,110 --> 00:00:15,630
how to download the React packages

5
00:00:15,630 --> 00:00:18,630
from a content delivery network site.

6
00:00:18,630 --> 00:00:20,910
In other words, we'll have an HTML page.

7
00:00:20,910 --> 00:00:22,830
It'll have a couple of script tags,

8
00:00:22,830 --> 00:00:25,710
it'll pull in the React libraries directly

9
00:00:25,710 --> 00:00:28,200
in real time into our browser,

10
00:00:28,200 --> 00:00:30,660
from our website.

11
00:00:30,660 --> 00:00:33,900
We'll have a very simple
user interface just to

12
00:00:33,900 --> 00:00:36,900
help you understand how
the bits fit together.

13
00:00:36,900 --> 00:00:40,060
Have a look in the
Example1 folder, index.html

14
00:00:41,100 --> 00:00:43,410
So here's the folder.

15
00:00:43,410 --> 00:00:46,680
JsTdd lesson nine, example one.

16
00:00:46,680 --> 00:00:49,770
Index.html is just a single file.

17
00:00:49,770 --> 00:00:51,274
One of the nice things about React is it's

18
00:00:51,274 --> 00:00:54,660
easy to get started simply.

19
00:00:54,660 --> 00:00:56,790
That's quite different
from Angular where you

20
00:00:56,790 --> 00:00:59,310
have to learn quite a lot to do anything.

21
00:00:59,310 --> 00:01:01,260
React allows you to start simple

22
00:01:01,260 --> 00:01:05,160
and then to get more complex
as your competence grows.

23
00:01:05,160 --> 00:01:07,830
So if you open that in a browser

24
00:01:07,830 --> 00:01:08,670
this is what it looks like.

25
00:01:08,670 --> 00:01:11,430
It has a heading and some simple content.

26
00:01:11,430 --> 00:01:15,120
Okay. So the user interface
is simple, but that's good.

27
00:01:15,120 --> 00:01:18,930
So we can basically see
how to build that in React.

28
00:01:18,930 --> 00:01:21,480
Okay. So I'm gonna go through the code

29
00:01:21,480 --> 00:01:22,313
bit by bit, and then
afterwards I'll show you

30
00:01:22,313 --> 00:01:27,060
how the whole code looks
when you join it together.

31
00:01:27,060 --> 00:01:29,940
So, first of all, a React web application,

32
00:01:29,940 --> 00:01:32,250
you have an index.html

33
00:01:32,250 --> 00:01:35,250
and somewhere in the body of the HTML

34
00:01:35,250 --> 00:01:38,460
you have a single top level HTML element.

35
00:01:38,460 --> 00:01:40,230
Typically a div,

36
00:01:40,230 --> 00:01:42,210
and React will render--

37
00:01:42,210 --> 00:01:44,190
the React Engine will render all

38
00:01:44,190 --> 00:01:47,160
of its user interface into this element.

39
00:01:47,160 --> 00:01:47,993
So the element is

40
00:01:47,993 --> 00:01:51,150
like a hook into which
you can inject content.

41
00:01:51,150 --> 00:01:53,730
So it looks like this.

42
00:01:53,730 --> 00:01:55,470
And a div,

43
00:01:55,470 --> 00:01:58,380
You give it an ID, typically root

44
00:01:58,380 --> 00:01:59,790
although it doesn't have to be root

45
00:01:59,790 --> 00:02:01,530
as long as you are consistent later on.

46
00:02:01,530 --> 00:02:03,090
You'll see what I mean.

47
00:02:03,090 --> 00:02:07,230
This div will become the target
into which all dynamically

48
00:02:07,230 --> 00:02:10,593
generated content will
be displayed by React.

49
00:02:12,330 --> 00:02:15,420
Okay. So that in your HTML content is

50
00:02:15,420 --> 00:02:19,500
gonna be dynamically expanded
when the application runs.

51
00:02:19,500 --> 00:02:21,000
Right. Okay.

52
00:02:21,000 --> 00:02:23,250
You need to pull in some libraries.

53
00:02:23,250 --> 00:02:26,340
There's a package for
the React Engine itself.

54
00:02:26,340 --> 00:02:28,710
The React Engine or the React Package

55
00:02:28,710 --> 00:02:31,320
is capable of building a view,

56
00:02:31,320 --> 00:02:32,400
which can then be rendered

57
00:02:32,400 --> 00:02:35,580
either in a webpage using React JS

58
00:02:35,580 --> 00:02:37,380
or in a mobile application

59
00:02:37,380 --> 00:02:39,120
using React Native.

60
00:02:39,120 --> 00:02:40,530
So the first import,

61
00:02:40,530 --> 00:02:42,720
imports the React library itself.

62
00:02:42,720 --> 00:02:44,070
And then the second import

63
00:02:44,070 --> 00:02:45,660
imports react-dom.

64
00:02:45,660 --> 00:02:47,550
React-dom is the library

65
00:02:47,550 --> 00:02:51,480
that renders this view in the web browser.

66
00:02:51,480 --> 00:02:54,960
Okay. So the React library
lets you create the view

67
00:02:54,960 --> 00:02:57,090
and then react-dom lets
you render that view

68
00:02:57,090 --> 00:02:57,923
in a browser,

69
00:02:57,923 --> 00:03:00,840
in the document object model of a browser.

70
00:03:00,840 --> 00:03:03,810
So we need to import
both of these libraries

71
00:03:03,810 --> 00:03:05,460
into our application.

72
00:03:05,460 --> 00:03:08,460
So the easiest way to do this, initially,

73
00:03:08,460 --> 00:03:10,800
is to download those directly

74
00:03:10,800 --> 00:03:13,830
from the unpkg.com

75
00:03:13,830 --> 00:03:16,500
content delivery network site.

76
00:03:16,500 --> 00:03:19,140
So unpkg.com is the standard CDN

77
00:03:19,140 --> 00:03:22,140
for downloading any kind
of JavaScript library.

78
00:03:22,140 --> 00:03:25,470
So you end up having script
tag that look like this.

79
00:03:25,470 --> 00:03:26,700
You have a script tag that pulls

80
00:03:26,700 --> 00:03:30,780
from unpkg.com and pulling
in the React library.

81
00:03:30,780 --> 00:03:33,270
The version numbers obviously
gonna change over time

82
00:03:33,270 --> 00:03:35,040
but this is the React library.

83
00:03:35,040 --> 00:03:36,840
That's the first one.

84
00:03:36,840 --> 00:03:40,920
Plus another script tag
that also goes to unpkg.com

85
00:03:40,920 --> 00:03:44,490
and it pulls in react-dom,
that's the second one.

86
00:03:44,490 --> 00:03:47,280
Okay. The ability to create the view

87
00:03:47,280 --> 00:03:49,950
and the ability to render
that view in a webpage

88
00:03:49,950 --> 00:03:53,400
both of those scripts, those
script files are needed

89
00:03:53,400 --> 00:03:54,663
in this simple example.

90
00:03:55,650 --> 00:03:57,240
Right, now here's a thing,

91
00:03:57,240 --> 00:03:59,670
we're also going to be be using Babel.

92
00:03:59,670 --> 00:04:03,900
I mentioned Babel a few times
in the last few lessons.

93
00:04:03,900 --> 00:04:06,300
Babel is a transpiler.

94
00:04:06,300 --> 00:04:10,260
It does two things in the
context of a React application.

95
00:04:10,260 --> 00:04:12,390
First of all, it'll transpile

96
00:04:12,390 --> 00:04:16,860
or convert modern JavaScript
into traditional JavaScript.

97
00:04:16,860 --> 00:04:18,330
So a little bit earlier

98
00:04:18,330 --> 00:04:19,680
I mentioned some of the new features

99
00:04:19,680 --> 00:04:24,030
in JavaScript like interpolated
strings, arrow functions,

100
00:04:24,030 --> 00:04:27,480
classes, destructuring.

101
00:04:27,480 --> 00:04:30,060
Modern JavaScript supports these features.

102
00:04:30,060 --> 00:04:33,780
But if you are targeting
browsers that are older

103
00:04:33,780 --> 00:04:36,870
and to be honest, they'd have
to be quite old these days.

104
00:04:36,870 --> 00:04:40,080
What you might need to do is
to convert your modern code

105
00:04:40,080 --> 00:04:42,180
into a traditional JavaScript

106
00:04:42,180 --> 00:04:44,163
that older browsers could understand.

107
00:04:45,090 --> 00:04:47,370
So if you're using a modern browser

108
00:04:47,370 --> 00:04:49,530
you don't need to do this conversion.

109
00:04:49,530 --> 00:04:52,988
Modern browsers understand
modern ecoscript.

110
00:04:52,988 --> 00:04:54,360
But if you have an older browser

111
00:04:54,360 --> 00:04:58,080
then you can use Babel to
transpile your modern syntax

112
00:04:58,080 --> 00:04:59,910
into traditional syntax

113
00:04:59,910 --> 00:05:02,790
that older browsers would understand.

114
00:05:02,790 --> 00:05:04,710
So Babel can do that,

115
00:05:04,710 --> 00:05:07,620
converting modern JavaScript into

116
00:05:07,620 --> 00:05:09,510
like old JavaScript.

117
00:05:09,510 --> 00:05:13,500
And also it can transpile
something called JSX.

118
00:05:13,500 --> 00:05:15,270
Now I haven't mentioned that yet.

119
00:05:15,270 --> 00:05:20,270
JSX is a syntax which
combines JavaScript and XML

120
00:05:21,090 --> 00:05:22,710
in a single file.

121
00:05:22,710 --> 00:05:26,370
So I'll explain why, what
it is and why we use it.

122
00:05:26,370 --> 00:05:31,230
And then I'll explain why
Babel is needed to convert it.

123
00:05:31,230 --> 00:05:35,580
Anyway, long story
short in this simple way

124
00:05:35,580 --> 00:05:39,750
of writing a React application
at the moment we need Babel

125
00:05:39,750 --> 00:05:41,790
in the browser to do this work.

126
00:05:41,790 --> 00:05:46,050
So we have a script tag that
pulls in the Babel transpiler.

127
00:05:46,050 --> 00:05:48,566
Okay. So pulls in the Babel transpiler.

128
00:05:48,566 --> 00:05:50,910
That Babel transpiler will now,

129
00:05:50,910 --> 00:05:53,631
when my webpage is
loaded, it'll dynamically

130
00:05:53,631 --> 00:05:57,510
convert, modern JavaScript
into traditional Syntax.

131
00:05:57,510 --> 00:06:00,900
And it'll also convert
JSX into pure JavaScript.

132
00:06:00,900 --> 00:06:03,600
Again, I need to explain that in a moment.

133
00:06:03,600 --> 00:06:05,733
So we have a Babel script tag as well.

134
00:06:06,660 --> 00:06:08,913
Okay. Now what is JSX?

135
00:06:10,440 --> 00:06:15,030
A JSX file can contain JavaScript and XML.

136
00:06:15,030 --> 00:06:19,830
So you use JavaScript to
represent your application logic.

137
00:06:19,830 --> 00:06:23,220
Defining functions, write in if statements

138
00:06:23,220 --> 00:06:24,600
things like this.

139
00:06:24,600 --> 00:06:25,773
And then you use XML

140
00:06:25,773 --> 00:06:29,370
to define the user interface
that you want to build.

141
00:06:29,370 --> 00:06:32,670
Like I'll have a button
please, and a text box.

142
00:06:32,670 --> 00:06:37,440
So you embed this JSX syntax

143
00:06:37,440 --> 00:06:40,170
in a script tag like this.

144
00:06:40,170 --> 00:06:42,540
A bit later on when we're kind of

145
00:06:42,540 --> 00:06:46,350
writing React applications
like properly, if you like,

146
00:06:46,350 --> 00:06:48,160
this is like a simplified approach

147
00:06:49,140 --> 00:06:51,360
this kind of works automatically.

148
00:06:51,360 --> 00:06:55,320
But at the moment, what we
need to do is first of all

149
00:06:55,320 --> 00:06:58,260
make sure that we've
imported the Babel transpiler

150
00:06:58,260 --> 00:07:00,330
like I discussed a few minutes ago.

151
00:07:00,330 --> 00:07:03,240
And then have a script tag.

152
00:07:03,240 --> 00:07:06,600
You put your code here
that contains a mixture

153
00:07:06,600 --> 00:07:08,280
of JavaScript and XML.

154
00:07:08,280 --> 00:07:11,340
So your JSX code, you embed it

155
00:07:11,340 --> 00:07:16,340
in a script envelope where
you specify type, text, label.

156
00:07:16,380 --> 00:07:19,890
What that does is it
tells the Babel transpiler

157
00:07:19,890 --> 00:07:22,980
that it needs to transpile
the code inside here

158
00:07:22,980 --> 00:07:24,693
into pure JavaScript.

159
00:07:25,860 --> 00:07:29,670
I need to explain what this
JSX syntax is gonna look like.

160
00:07:29,670 --> 00:07:33,090
So it all comes down to
the idea of components.

161
00:07:33,090 --> 00:07:36,583
In React a component is either a function

162
00:07:36,583 --> 00:07:40,050
or a class that renders

163
00:07:40,050 --> 00:07:43,770
HTML or XML to the React Engine.

164
00:07:43,770 --> 00:07:45,960
So it basically tells React

165
00:07:45,960 --> 00:07:49,830
this is the content that I would
like you to display please.

166
00:07:49,830 --> 00:07:52,770
So here's an example of a component.

167
00:07:52,770 --> 00:07:55,440
A component can either
be written as a function

168
00:07:55,440 --> 00:07:56,583
or as a class.

169
00:07:57,960 --> 00:08:00,750
A few years ago, people
used to use classes

170
00:08:00,750 --> 00:08:05,370
but these days people use
functions as a cleaner syntax.

171
00:08:05,370 --> 00:08:09,840
So here I've written a
functional component.

172
00:08:09,840 --> 00:08:11,040
It's a function.

173
00:08:11,040 --> 00:08:13,530
It starts with the capital
letter, by the way.

174
00:08:13,530 --> 00:08:15,820
It's a function that returns

175
00:08:16,860 --> 00:08:18,480
HTML.

176
00:08:18,480 --> 00:08:20,190
Well to be strictly correct,

177
00:08:20,190 --> 00:08:21,720
it doesn't return HTML.

178
00:08:21,720 --> 00:08:23,490
It returns XML.

179
00:08:23,490 --> 00:08:25,470
Hence the term JSX.

180
00:08:25,470 --> 00:08:29,043
This is a combination of
JavaScript syntax and XML.

181
00:08:30,090 --> 00:08:33,701
So it's really easy to generate content.

182
00:08:33,701 --> 00:08:36,960
If I render this component

183
00:08:36,960 --> 00:08:41,910
it will render a div with a
heading and two bullet points.

184
00:08:41,910 --> 00:08:43,770
Well, that's the user
interface that we've seen.

185
00:08:43,770 --> 00:08:46,470
You build your user
interface using XML syntax.

186
00:08:46,470 --> 00:08:49,113
It's a very easy syntax to get used to.

187
00:08:50,280 --> 00:08:51,113
Now, the thing is

188
00:08:51,113 --> 00:08:54,120
this code here is gonna run in a browser

189
00:08:54,120 --> 00:08:57,270
and browsers have no clue
what's going on here.

190
00:08:57,270 --> 00:08:58,830
A browser would look at this and say,

191
00:08:58,830 --> 00:09:00,960
but what? what are you doing?

192
00:09:00,960 --> 00:09:02,970
You know, this is XML syntax

193
00:09:02,970 --> 00:09:05,400
but this is meant to be JavaScript.

194
00:09:05,400 --> 00:09:09,010
So in order for this code to
be understood by the browser

195
00:09:09,900 --> 00:09:11,991
Babel will transpile

196
00:09:11,991 --> 00:09:16,991
or convert the XML syntax
into pure JavaScript.

197
00:09:17,100 --> 00:09:19,110
It'll effectively do something like

198
00:09:19,110 --> 00:09:20,790
it'll convert the div element

199
00:09:20,790 --> 00:09:24,330
into you like a console, right
line, that kind of thing.

200
00:09:24,330 --> 00:09:28,410
It'll build this into pure
JavaScript function calls

201
00:09:28,410 --> 00:09:31,953
to build HTML content dynamically.

202
00:09:32,820 --> 00:09:34,050
We don't need to worry too much

203
00:09:34,050 --> 00:09:35,880
about the underlying mechanism.

204
00:09:35,880 --> 00:09:39,090
We can just cheerfully
write components like this

205
00:09:39,090 --> 00:09:42,480
that return embedded XML.

206
00:09:42,480 --> 00:09:47,377
This component when rendered
will render this XML.

207
00:09:48,720 --> 00:09:51,600
So that's the last thing
we need to think about.

208
00:09:51,600 --> 00:09:55,920
How can we actually render
this component on our webpage?

209
00:09:55,920 --> 00:09:57,720
Well, it looks like this.

210
00:09:57,720 --> 00:10:00,450
There's a class called ReactDOM

211
00:10:00,450 --> 00:10:02,520
provided by one of those includes.

212
00:10:02,520 --> 00:10:04,470
It has a render function

213
00:10:04,470 --> 00:10:06,900
and the render function
takes two parameters.

214
00:10:06,900 --> 00:10:09,450
The first parameter is the component

215
00:10:09,450 --> 00:10:13,140
that we want to render using XML syntax.

216
00:10:13,140 --> 00:10:15,140
This is XML syntax, okay.

217
00:10:15,140 --> 00:10:17,550
It is basically a function call.

218
00:10:17,550 --> 00:10:20,640
When Babel sees this

219
00:10:20,640 --> 00:10:23,760
it'll basically call
the items list function.

220
00:10:23,760 --> 00:10:25,470
The one that we looked at

221
00:10:25,470 --> 00:10:26,910
on the previous slide.

222
00:10:26,910 --> 00:10:30,060
That function returns a chunk of XML.

223
00:10:30,060 --> 00:10:34,170
That XML will be rendered
wherever we specify.

224
00:10:34,170 --> 00:10:36,150
So the first parameter

225
00:10:36,150 --> 00:10:38,310
which component do you want to render?

226
00:10:38,310 --> 00:10:40,050
And therefore what HTML?

227
00:10:40,050 --> 00:10:41,580
And the second parameter

228
00:10:41,580 --> 00:10:44,970
where do you want it to
appear on the webpage?

229
00:10:44,970 --> 00:10:47,100
And then you give it the ID of your div

230
00:10:47,100 --> 00:10:48,800
where that's going to be rendered.

231
00:10:50,280 --> 00:10:52,860
Okay. So we create the component

232
00:10:52,860 --> 00:10:55,860
by using the XML tag, we use XML syntax

233
00:10:55,860 --> 00:10:58,710
but ultimately that's
gonna be a function call.

234
00:10:58,710 --> 00:11:02,760
And then the second parameter,
we pass it into the React,

235
00:11:02,760 --> 00:11:07,760
so they create-- get element by ID.

236
00:11:07,890 --> 00:11:10,950
We specify where that's
going to be rendered.

237
00:11:10,950 --> 00:11:12,120
And that's what it looks like.

238
00:11:12,120 --> 00:11:13,890
So just to finish off,

239
00:11:13,890 --> 00:11:15,510
I'm gonna take a retrospective run

240
00:11:15,510 --> 00:11:17,820
through the code completely
from top to bottom

241
00:11:17,820 --> 00:11:21,210
just to summarize how
it all hands together.

242
00:11:21,210 --> 00:11:25,140
So here is index.html in code editor.

243
00:11:25,140 --> 00:11:28,560
So it's just a very simple HTML page.

244
00:11:28,560 --> 00:11:31,290
You know, there's hardly
anything to it, really.

245
00:11:31,290 --> 00:11:32,520
So first of all

246
00:11:32,520 --> 00:11:34,750
I've got some beautiful CSS styles

247
00:11:36,150 --> 00:11:37,170
And then I've got my--

248
00:11:37,170 --> 00:11:38,040
my div,

249
00:11:38,040 --> 00:11:41,333
I've given my div an idea of root here.

250
00:11:41,333 --> 00:11:45,480
Therefore, when I render my content,

251
00:11:45,480 --> 00:11:47,610
I specify root here.

252
00:11:47,610 --> 00:11:48,750
I could have changed this.

253
00:11:48,750 --> 00:11:52,113
I could have called it my app root.

254
00:11:53,040 --> 00:11:56,220
And then down here, when I
come to render in the content

255
00:11:56,220 --> 00:11:59,760
I'd have said my app root.

256
00:11:59,760 --> 00:12:03,000
There, render the content here please,

257
00:12:03,000 --> 00:12:04,890
in the element with that ID.

258
00:12:04,890 --> 00:12:07,260
So you just need to be consistent

259
00:12:07,260 --> 00:12:08,093
here

260
00:12:09,780 --> 00:12:10,623
and here.

261
00:12:12,270 --> 00:12:13,980
There will be imported three scripts.

262
00:12:13,980 --> 00:12:16,920
If you remember a script
for the React library itself

263
00:12:16,920 --> 00:12:18,620
which enables us to create a view.

264
00:12:19,454 --> 00:12:22,740
A script for ReactDOM, which enables us to

265
00:12:22,740 --> 00:12:26,610
render a view in a browser.

266
00:12:26,610 --> 00:12:29,040
And then the script tag for Babel, because

267
00:12:29,040 --> 00:12:30,890
Babel needs to do some transpilation.

268
00:12:32,610 --> 00:12:37,384
The code that I've got is
enclosed in a script tag

269
00:12:37,384 --> 00:12:40,080
It's enabled by Babel.

270
00:12:40,080 --> 00:12:41,193
It's enBabled.

271
00:12:42,269 --> 00:12:47,070
So Babel will transpile
this into pure JavaScript.

272
00:12:47,070 --> 00:12:49,710
So even though there's embedded XML here

273
00:12:49,710 --> 00:12:53,220
Babel would transpile
this into pure JavaScript

274
00:12:53,220 --> 00:12:54,450
And it's pure JavaScript

275
00:12:54,450 --> 00:12:57,120
that then gets rendered in the browser.

276
00:12:57,120 --> 00:12:59,400
So here's a functional component.

277
00:12:59,400 --> 00:13:04,400
It returns, whatever it
returns is to be rendered.

278
00:13:04,500 --> 00:13:06,510
When I invoke that component here

279
00:13:06,510 --> 00:13:08,940
it'll basically call that function.

280
00:13:08,940 --> 00:13:10,980
Whatever that function returns

281
00:13:10,980 --> 00:13:14,700
would be rendered here in the webpage.

282
00:13:14,700 --> 00:13:16,650
And that's how it looks when we finish.