1
00:00:06,515 --> 00:00:07,410
- In this section,

2
00:00:07,410 --> 00:00:11,070
we got to see how to create
a Complete React Application.

3
00:00:11,070 --> 00:00:12,870
We're going to demonstrate

4
00:00:12,870 --> 00:00:16,080
how to use a tool called Create React App.

5
00:00:16,080 --> 00:00:18,663
It simplifies creating
a React application,

6
00:00:19,560 --> 00:00:21,540
either in TypeScript or in JavaScript,

7
00:00:21,540 --> 00:00:23,790
we're gonna choose TypeScript.

8
00:00:23,790 --> 00:00:26,010
It'll generate a complete application

9
00:00:26,010 --> 00:00:28,410
with all the configuration that we need

10
00:00:28,410 --> 00:00:30,270
and some simple code files

11
00:00:30,270 --> 00:00:33,390
and HTML files to give
us a starting point.

12
00:00:33,390 --> 00:00:36,030
It'll also define when we use this tool,

13
00:00:36,030 --> 00:00:38,640
it'll create a package.json file

14
00:00:38,640 --> 00:00:41,010
and that will specify all the libraries

15
00:00:41,010 --> 00:00:42,600
that need to be downloaded,

16
00:00:42,600 --> 00:00:44,220
and it will download them

17
00:00:44,220 --> 00:00:48,240
as part of our application
creation process.

18
00:00:48,240 --> 00:00:50,463
So, it'll download the React library,

19
00:00:51,360 --> 00:00:53,730
React-DOM, Babel,

20
00:00:53,730 --> 00:00:56,193
and any other libraries that are needed.

21
00:00:57,090 --> 00:00:57,923
Okay.

22
00:00:57,923 --> 00:01:02,400
And it'll organize our JavaScript
code or TypeScript code,

23
00:01:02,400 --> 00:01:05,190
and our user interface
artifacts correctly.

24
00:01:05,190 --> 00:01:08,490
So, it'll generate code,
it'll generate components,

25
00:01:08,490 --> 00:01:11,400
it'll generate HTML files and style sheets

26
00:01:11,400 --> 00:01:14,610
and configuration files
for a simple application.

27
00:01:14,610 --> 00:01:16,140
But it's a good starting point

28
00:01:16,140 --> 00:01:19,230
into which you can then
add your own functionality.

29
00:01:19,230 --> 00:01:21,810
I've already done this before.

30
00:01:21,810 --> 00:01:24,870
So, I'm gonna show you an example
of a prebuilt application,

31
00:01:24,870 --> 00:01:26,910
I'll show you how I've built it as well.

32
00:01:26,910 --> 00:01:28,653
If you go to the Example2 folder.

33
00:01:30,330 --> 00:01:31,470
Here we are.

34
00:01:31,470 --> 00:01:35,100
I've already created, using
the Create React App tool,

35
00:01:35,100 --> 00:01:38,370
I've already created a sample
application called Demo App.

36
00:01:38,370 --> 00:01:40,770
I'm gonna show you the
content of that in a moment.

37
00:01:40,770 --> 00:01:42,810
First of all, let me
show you how I built it,

38
00:01:42,810 --> 00:01:44,880
or how did I generate it.

39
00:01:44,880 --> 00:01:48,450
So, we can use this
tool, Create React App.

40
00:01:48,450 --> 00:01:49,830
You can get information about it here,

41
00:01:49,830 --> 00:01:51,630
it's quite a nice tool.

42
00:01:51,630 --> 00:01:53,700
It's what most people these days use,

43
00:01:53,700 --> 00:01:55,290
I think when they're generating,

44
00:01:55,290 --> 00:01:57,270
you know professional React applications

45
00:01:57,270 --> 00:01:59,940
because it does a lot of
the heavy lifting for you.

46
00:01:59,940 --> 00:02:01,980
It's very easy to use.

47
00:02:01,980 --> 00:02:04,050
You just run a command like this.

48
00:02:04,050 --> 00:02:05,250
So, first of all, you have to have

49
00:02:05,250 --> 00:02:08,430
Node Package Manager
installed beforehand, okay?

50
00:02:08,430 --> 00:02:13,050
So, if you don't already
have that go to nodejs.org,

51
00:02:13,050 --> 00:02:17,130
download the Node-JS library tool.

52
00:02:17,130 --> 00:02:20,940
NPX is Node Package Manager, Execute.

53
00:02:20,940 --> 00:02:24,420
You give it the name of
an application to execute.

54
00:02:24,420 --> 00:02:26,760
Presumably you don't have
that installed on your machine

55
00:02:26,760 --> 00:02:28,950
at the moment, it'll download it for you.

56
00:02:28,950 --> 00:02:32,220
It'll download this tool and then run it.

57
00:02:32,220 --> 00:02:36,450
And it generates React
application as its name suggests

58
00:02:36,450 --> 00:02:38,522
in this folder, okay?

59
00:02:38,522 --> 00:02:40,860
So it'll create a folder
called Whatever Demo App,

60
00:02:40,860 --> 00:02:45,480
and in there it'll create a
full, simple React application.

61
00:02:45,480 --> 00:02:48,390
Now by default, it would
generate JavaScript.

62
00:02:48,390 --> 00:02:51,090
If you specify --template typescript,

63
00:02:51,090 --> 00:02:53,880
then obviously generates
TypeScript code instead.

64
00:02:53,880 --> 00:02:58,110
So it'll end up with files
called .tsx, instead of .jsx,

65
00:02:58,110 --> 00:03:00,933
it'll have TypeScript code
instead of JavaScript.

66
00:03:02,100 --> 00:03:06,210
Okay? So it'll generate a
React application in TypeScript

67
00:03:06,210 --> 00:03:10,650
and it'll create basically
the template code.

68
00:03:10,650 --> 00:03:13,260
There'll be a node, a package.json file

69
00:03:13,260 --> 00:03:15,420
saying what libraries are needed

70
00:03:15,420 --> 00:03:16,860
and it'll download those libraries

71
00:03:16,860 --> 00:03:18,150
into the node module folder.

72
00:03:18,150 --> 00:03:20,760
It'll do all of that
when you run this tool.

73
00:03:20,760 --> 00:03:24,000
It's quite slow, it'll take
about five minutes to do it,

74
00:03:24,000 --> 00:03:26,790
you know but you only need to do it once.

75
00:03:26,790 --> 00:03:30,150
So let's have a look at the
application that it generated.

76
00:03:30,150 --> 00:03:34,410
I'm gonna open up my Demo
application in a code editor.

77
00:03:34,410 --> 00:03:35,709
So here it is

78
00:03:35,709 --> 00:03:39,320
this is what was generated
by the Create React App tool.

79
00:03:39,320 --> 00:03:42,513
So the first thing I wanna
point out is package.json,

80
00:03:43,710 --> 00:03:45,930
this was generated by the tool.

81
00:03:45,930 --> 00:03:48,270
It specifies all the dependencies

82
00:03:48,270 --> 00:03:50,790
that need to be downloaded
into our local folder.

83
00:03:50,790 --> 00:03:53,280
All of these dependencies
will be downloaded

84
00:03:53,280 --> 00:03:54,810
into node modules.

85
00:03:54,810 --> 00:03:56,973
Okay? If you expand node modules,

86
00:03:57,840 --> 00:04:01,230
to be honest, it's a crazy
number of dependencies,

87
00:04:01,230 --> 00:04:03,060
so I'm not gonna go through all of those.

88
00:04:03,060 --> 00:04:04,920
but pick out a couple of them,

89
00:04:04,920 --> 00:04:08,310
notice that it automatically
pulls down the React library.

90
00:04:08,310 --> 00:04:09,690
In my earlier example,

91
00:04:09,690 --> 00:04:13,620
I had a script tag in my
webpage to pull that library in,

92
00:04:13,620 --> 00:04:15,660
this is the prep, the
correct way to do it,

93
00:04:15,660 --> 00:04:18,930
really is to download it
beforehand using package manager,

94
00:04:18,930 --> 00:04:20,490
node package manager.

95
00:04:20,490 --> 00:04:23,130
So I've also got the React-DOM library

96
00:04:23,130 --> 00:04:25,740
for rendering stuff in a webpage

97
00:04:25,740 --> 00:04:28,083
and I've got the TypeScript compiler.

98
00:04:29,580 --> 00:04:32,880
There's some interesting
things here for testing

99
00:04:32,880 --> 00:04:35,204
that come in handy later on.

100
00:04:35,204 --> 00:04:38,110
The testing library that
we've looked at already

101
00:04:39,210 --> 00:04:40,560
the basic testing library,

102
00:04:40,560 --> 00:04:44,763
plus some extensions for using
testing library with React.

103
00:04:45,750 --> 00:04:47,760
Okay? So there's a whole
bunch of dependencies here

104
00:04:47,760 --> 00:04:49,170
that are important.

105
00:04:49,170 --> 00:04:51,570
But it'll download those automatically

106
00:04:51,570 --> 00:04:53,760
into the node modules folder

107
00:04:53,760 --> 00:04:55,860
and then it's generated

108
00:04:55,860 --> 00:04:59,850
also various content in the public folder

109
00:04:59,850 --> 00:05:02,910
and various content in the SRC folder.

110
00:05:02,910 --> 00:05:05,510
Okay. So let's take a look
at those two folders now.

111
00:05:06,840 --> 00:05:07,673
So first of all,

112
00:05:07,673 --> 00:05:09,480
that's the directory
structure in the application

113
00:05:09,480 --> 00:05:11,640
that I just showed you about.

114
00:05:11,640 --> 00:05:16,350
The public folder contains
the basic HTML content

115
00:05:16,350 --> 00:05:18,900
at the top level in your application.

116
00:05:18,900 --> 00:05:19,740
To be quite honest,

117
00:05:19,740 --> 00:05:22,080
it's the only file here
that's actually needed

118
00:05:22,080 --> 00:05:25,530
is index.HTML, and it's extremely simple.

119
00:05:25,530 --> 00:05:27,630
We'll have a look at that in a minute.

120
00:05:27,630 --> 00:05:30,750
Most of the interesting
content is in the SRC folder.

121
00:05:30,750 --> 00:05:33,870
It's in the SRC folder where
we have our components.

122
00:05:33,870 --> 00:05:35,490
So I'll just point out the few things

123
00:05:35,490 --> 00:05:39,960
before we get into the
detail index.HTML by default,

124
00:05:39,960 --> 00:05:41,490
that's the homepage.

125
00:05:41,490 --> 00:05:46,050
And there's a file called
index.tsx or index.jsx.

126
00:05:46,050 --> 00:05:47,040
This is the first,

127
00:05:47,040 --> 00:05:49,860
or this is kinda like the
entry point for your code.

128
00:05:49,860 --> 00:05:53,820
It's always the index
TSX file that runs first

129
00:05:53,820 --> 00:05:57,240
and you'll also notice
that there's an index.css.

130
00:05:57,240 --> 00:05:59,760
So the idea is that you define in there:

131
00:05:59,760 --> 00:06:02,040
you define your corporate branding,

132
00:06:02,040 --> 00:06:05,073
your corporate color scheme
fonts across the whole website.

133
00:06:06,810 --> 00:06:08,550
Then as we'll see in a moment

134
00:06:08,550 --> 00:06:11,970
there's also a file
called App TSX in there,

135
00:06:11,970 --> 00:06:14,610
it defines the application component.

136
00:06:14,610 --> 00:06:16,680
It generates one component by default

137
00:06:16,680 --> 00:06:17,850
and it's called App,

138
00:06:17,850 --> 00:06:20,643
it's the top level component
in the application.

139
00:06:21,750 --> 00:06:25,230
It also generates a sample test script

140
00:06:25,230 --> 00:06:28,770
which will come in handy
later to test that component.

141
00:06:28,770 --> 00:06:31,440
Plus a CSS style sheet,

142
00:06:31,440 --> 00:06:33,930
if you want to define styles
just for that component.

143
00:06:33,930 --> 00:06:35,010
So that's an interesting point,

144
00:06:35,010 --> 00:06:37,320
We can have two sets of style sheets.

145
00:06:37,320 --> 00:06:40,410
A style sheet called index,
for the whole website,

146
00:06:40,410 --> 00:06:43,740
and then individual style
sheets called App.css,

147
00:06:43,740 --> 00:06:46,230
that pertain just to one
particular component,

148
00:06:46,230 --> 00:06:47,433
just for that component.

149
00:06:48,450 --> 00:06:51,270
Okay, so let's have a look. First of all,

150
00:06:51,270 --> 00:06:52,533
at the index.HTML,

151
00:06:53,430 --> 00:06:57,960
the homepage for our web
application, it's really simple.

152
00:06:57,960 --> 00:07:00,210
It's a lot simpler than what we looked at

153
00:07:00,210 --> 00:07:01,770
when we wrote it all ourself.

154
00:07:01,770 --> 00:07:04,200
And basically the only thing
that contains of interest

155
00:07:04,200 --> 00:07:05,880
is the anchor point,

156
00:07:05,880 --> 00:07:08,370
into which our HTML content
is gonna be rendered.

157
00:07:08,370 --> 00:07:12,390
A div whose ID is root, for example,

158
00:07:12,390 --> 00:07:15,243
React is gonna render
all the content there.

159
00:07:16,290 --> 00:07:19,050
Okay? So if you opened up the index HTML,

160
00:07:19,050 --> 00:07:22,830
you can ignore everything in
there, apart from this div,

161
00:07:22,830 --> 00:07:26,460
into which our content
will be rendered, right?

162
00:07:26,460 --> 00:07:28,380
When you run a React application

163
00:07:28,380 --> 00:07:31,530
the first file that gets
executed in the SRC folder

164
00:07:31,530 --> 00:07:33,843
is index.tsx.

165
00:07:34,710 --> 00:07:39,570
And index.tsx looks quite
similar to what we had before,

166
00:07:39,570 --> 00:07:41,700
the first few statements are different.

167
00:07:41,700 --> 00:07:43,230
If you haven't seen this before

168
00:07:43,230 --> 00:07:48,000
this is the way that you
import classes and functions

169
00:07:48,000 --> 00:07:49,470
from libraries.

170
00:07:49,470 --> 00:07:52,860
It picks up the React library
from the node modules folder

171
00:07:52,860 --> 00:07:55,200
which defines a classical React.

172
00:07:55,200 --> 00:07:59,430
And it picks up the React-DOM
library from node modules

173
00:07:59,430 --> 00:08:02,100
which defines a classical React-DOM,

174
00:08:02,100 --> 00:08:04,410
this is how you import style sheets.

175
00:08:04,410 --> 00:08:06,540
You don't use link tags anymore,

176
00:08:06,540 --> 00:08:08,460
you just import a style sheet.

177
00:08:08,460 --> 00:08:10,380
Interesting, isn't it? You import code

178
00:08:10,380 --> 00:08:13,380
and you import style
sheets in the same way,

179
00:08:13,380 --> 00:08:17,400
import the style sheet and also from App.

180
00:08:17,400 --> 00:08:19,560
Now, this is interesting as well.

181
00:08:19,560 --> 00:08:22,170
When you want to import a SRC file,

182
00:08:22,170 --> 00:08:24,540
there's a SRC file called App TSX that

183
00:08:24,540 --> 00:08:26,820
contains my App component.

184
00:08:26,820 --> 00:08:31,820
But when you import TSX
files, you don't say App.tsx,

185
00:08:31,860 --> 00:08:35,250
You just give it the
root part of your filing

186
00:08:35,250 --> 00:08:36,870
and it automatically figures

187
00:08:36,870 --> 00:08:39,420
that you're trying to import App.txs.

188
00:08:39,420 --> 00:08:41,160
Inside that file,

189
00:08:41,160 --> 00:08:44,370
it defines a functional
component called App,

190
00:08:44,370 --> 00:08:46,170
as we'll see in a moment.

191
00:08:46,170 --> 00:08:48,300
And this functional component,

192
00:08:48,300 --> 00:08:52,653
when it's invoked vetoes
XML or HTML to be rendered.

193
00:08:53,640 --> 00:08:54,930
Right this code here,

194
00:08:54,930 --> 00:08:58,200
is looking fairly similar
to what we've seen before.

195
00:08:58,200 --> 00:08:59,640
React on render,

196
00:08:59,640 --> 00:09:02,490
the render function takes two parameters.

197
00:09:02,490 --> 00:09:03,840
The first parameter

198
00:09:03,840 --> 00:09:06,390
I'm gonna ignore the
strict mode bit for now.

199
00:09:06,390 --> 00:09:07,500
Ignore that.

200
00:09:07,500 --> 00:09:09,420
Effectively the first parameter is

201
00:09:09,420 --> 00:09:11,790
what component do you want to render?

202
00:09:11,790 --> 00:09:14,520
Well, it'll be the
application component please.

203
00:09:14,520 --> 00:09:16,920
Okay, that's gonna be the
content for our webpage.

204
00:09:16,920 --> 00:09:21,592
It'll render the App component
by calling the App function

205
00:09:21,592 --> 00:09:24,450
and it'll render it in
our element called root.

206
00:09:24,450 --> 00:09:27,123
That's the element we saw
just now in the index page.

207
00:09:28,230 --> 00:09:30,060
Now what about this?

208
00:09:30,060 --> 00:09:33,843
What about this React StrictMode then?

209
00:09:34,740 --> 00:09:37,920
Typically you embed your component,

210
00:09:37,920 --> 00:09:41,130
your application component
in React StrictMode,

211
00:09:41,130 --> 00:09:44,370
it enables more rigorous check in

212
00:09:44,370 --> 00:09:46,470
about how components and objects are used

213
00:09:46,470 --> 00:09:47,760
in your application.

214
00:09:47,760 --> 00:09:50,700
It's like an extra level of safety checks

215
00:09:50,700 --> 00:09:52,230
enforced by React.

216
00:09:52,230 --> 00:09:54,210
There's an interesting
article about it here,

217
00:09:54,210 --> 00:09:56,370
it's quite esoteric.

218
00:09:56,370 --> 00:09:58,080
So you don't really need
to know much about it

219
00:09:58,080 --> 00:09:59,610
to be honest, you just use it

220
00:09:59,610 --> 00:10:01,170
and it'll just make sure
that your application

221
00:10:01,170 --> 00:10:02,673
follows best practice.

222
00:10:03,990 --> 00:10:08,550
Right. So this is the first it
code file that gets executed

223
00:10:08,550 --> 00:10:11,580
and basically what it does is
it renders the App component.

224
00:10:11,580 --> 00:10:13,260
So that's the next thing
for us to have a look at

225
00:10:13,260 --> 00:10:14,670
is the App component.

226
00:10:14,670 --> 00:10:16,023
What does that actually do?

227
00:10:17,220 --> 00:10:18,300
So here it is.

228
00:10:18,300 --> 00:10:20,523
Here's my App component App TSX.

229
00:10:21,360 --> 00:10:23,880
Oh, it imports its own style sheet,

230
00:10:23,880 --> 00:10:26,010
each component can have
its own style sheet,

231
00:10:26,010 --> 00:10:27,870
typically with the same found name.

232
00:10:27,870 --> 00:10:31,890
Import the style sheet,
just for this component.

233
00:10:31,890 --> 00:10:36,573
My functional component
will return a chunk of XML,

234
00:10:37,680 --> 00:10:40,290
well HTML really, but in XML syntax.

235
00:10:40,290 --> 00:10:42,840
Okay, so the actual detail in here

236
00:10:42,840 --> 00:10:44,580
is actually less important.

237
00:10:44,580 --> 00:10:46,560
What's important is the big picture.

238
00:10:46,560 --> 00:10:48,720
We have a functional component

239
00:10:48,720 --> 00:10:52,350
that returns a chunk of HTML, XML

240
00:10:52,350 --> 00:10:55,473
whatever it returns is gonna
be rendered in my webpage.

241
00:10:57,810 --> 00:10:59,880
Right? So I guess all we need to do now

242
00:10:59,880 --> 00:11:01,860
is to actually run the application.

243
00:11:01,860 --> 00:11:03,180
So what you'd need to do is

244
00:11:03,180 --> 00:11:07,140
if you open up a command
window in the Demo App folder

245
00:11:07,140 --> 00:11:09,420
and then you can run yarn start,

246
00:11:09,420 --> 00:11:12,068
or you can say NPM start, if you prefer.

247
00:11:12,068 --> 00:11:15,600
And what that does it
basically the React compiler

248
00:11:15,600 --> 00:11:18,030
will build your application in memory.

249
00:11:18,030 --> 00:11:20,100
It'll start up a simple web server

250
00:11:20,100 --> 00:11:23,490
by default on the local machine port 3000,

251
00:11:23,490 --> 00:11:25,920
and then it opens a browser automatically

252
00:11:25,920 --> 00:11:30,060
so they can view the rendered content.

253
00:11:30,060 --> 00:11:33,393
Okay so, let's do that.

254
00:11:34,290 --> 00:11:36,930
I've already in this command window here

255
00:11:36,930 --> 00:11:39,060
I've already ran yarn start.

256
00:11:39,060 --> 00:11:40,500
And as you can see,

257
00:11:40,500 --> 00:11:43,020
it started up a local web server,

258
00:11:43,020 --> 00:11:46,200
ran it on local host 3000.

259
00:11:46,200 --> 00:11:50,340
So, and it also opened
a browser window as well

260
00:11:50,340 --> 00:11:51,580
pointed to that URL

261
00:11:52,890 --> 00:11:54,030
and here's what it looks like.

262
00:11:54,030 --> 00:11:57,170
Here's the content rendered
by my App component

263
00:11:57,170 --> 00:11:58,170
in the webpage.

264
00:11:58,170 --> 00:11:59,520
And it's really cool,

265
00:11:59,520 --> 00:12:01,440
there's a hot reload feature.

266
00:12:01,440 --> 00:12:04,053
If you change the code
in your App component,

267
00:12:05,527 --> 00:12:09,180
the React engine will automatically

268
00:12:09,180 --> 00:12:11,097
recompile your application

269
00:12:11,097 --> 00:12:13,200
and it'll automatically
refresh it in a browser,

270
00:12:13,200 --> 00:12:15,360
using an underlying web socket effectively

271
00:12:15,360 --> 00:12:17,760
to keep a live link between your code

272
00:12:17,760 --> 00:12:19,350
and the rendered content.

273
00:12:19,350 --> 00:12:21,060
So I'm gonna do that now.

274
00:12:21,060 --> 00:12:22,860
I'm gonna go back into the code.

275
00:12:22,860 --> 00:12:25,740
I'm gonna go into my App component.

276
00:12:25,740 --> 00:12:26,910
Remember it's the App component

277
00:12:26,910 --> 00:12:29,100
that's doing all the rendering,

278
00:12:29,100 --> 00:12:31,950
and in here when it says Learn React,

279
00:12:31,950 --> 00:12:35,463
I'm gonna change that
to be Learn React today,

280
00:12:37,080 --> 00:12:39,333
It's so cool!

281
00:12:41,670 --> 00:12:43,000
When I save that file,

282
00:12:43,000 --> 00:12:45,180
it'll automatically the React-engine

283
00:12:45,180 --> 00:12:47,700
will automatically recompile my code

284
00:12:47,700 --> 00:12:50,490
and refresh the view in the browser.

285
00:12:50,490 --> 00:12:51,360
So in the browser,

286
00:12:51,360 --> 00:12:55,560
immediately it's been
refactored and re-executed.

287
00:12:55,560 --> 00:12:58,320
So that was a very
simple React application

288
00:12:58,320 --> 00:12:59,883
but it's got proper structure.

289
00:13:00,840 --> 00:13:04,230
So quick recap, it
generated this application.

290
00:13:04,230 --> 00:13:06,150
I used to create React App tool.

291
00:13:06,150 --> 00:13:08,430
It generated a package.json

292
00:13:08,430 --> 00:13:11,040
and it downloaded all the dependencies.

293
00:13:11,040 --> 00:13:12,570
It downloaded those dependencies

294
00:13:12,570 --> 00:13:17,570
into my node modules folder,
okay, which is massive.

295
00:13:18,120 --> 00:13:20,010
It generated a public folder

296
00:13:20,010 --> 00:13:22,500
of which the only, you know
particularly interesting thing

297
00:13:22,500 --> 00:13:27,500
is the index file which
has this div with an ID,

298
00:13:27,810 --> 00:13:29,700
and that's the only
thing that really matters

299
00:13:29,700 --> 00:13:31,740
in this public folder.

300
00:13:31,740 --> 00:13:34,650
And then in the SRC folder
amongst the other bits,

301
00:13:34,650 --> 00:13:38,550
oh the spinning graphic
by the way, was logo SVG.

302
00:13:38,550 --> 00:13:42,753
But anyway index.txs rendered
my application component,

303
00:13:43,710 --> 00:13:46,170
my App. Oh and also
imported the style sheet.

304
00:13:46,170 --> 00:13:48,720
My application component returned,

305
00:13:48,720 --> 00:13:50,340
it was a functional component

306
00:13:50,340 --> 00:13:53,280
and it returned some HTML, XML

307
00:13:53,280 --> 00:13:55,983
and that's what got
rendered in the webpage.

308
00:13:57,090 --> 00:13:59,970
Okay so we have here now a framework

309
00:13:59,970 --> 00:14:03,660
into which we can add our
own components to build up

310
00:14:03,660 --> 00:14:07,083
to build up a more, you know,
complete user interface.