-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathlesson2.html
308 lines (300 loc) · 28.6 KB
/
lesson2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
<html>
<head>
<title>Lists, Refs, Bind Callbacks, LifeCycle & 3rd party integration</title>
<link href="lib/bootstrap.css" rel="stylesheet" />
<link href="lib/prism.css" rel="stylesheet" />
<link href="lib/style.css" rel="stylesheet" type="text/css" media="all" />
<script src="lib/lodash.min.js"></script>
<script src="lib/react.js"></script>
<script src="lib/prism.js"></script>
<script src="lib/JSXTransformer.js"></script>
<script id="sourceView">
function fixExtraIndent(content) {
//removes extra padding on the left for source code
function countspace(line) {
var r = line.match(/^\s*/);
if (!r) return 0;
return r[0].length;
}
var lines = content.split(/\n/);
var returnlines = []
var guttersize = null;
_.each(lines, function(line) {
if (guttersize == null) {
var gspace = countspace(line)
if (gspace == line.length) {
return;
} else {
guttersize = gspace;
}
}
returnlines.push(line.substr(guttersize));
});
return returnlines.join("\n");
}
var SourceCode = React.createClass({
propTypes: {
sourceId: React.PropTypes.string,
language: React.PropTypes.string,
liveEdit: React.PropTypes.bool
},
getDefaultProps: function() {
return {
language: "jsx"
}
},
getInitialState: function() {
return {
source: fixExtraIndent(document.getElementById(this.props.sourceId).innerHTML)
};
},
componentDidMount: function() {
Prism.highlightElement(this.refs.source.getDOMNode());
},
componentDidUpdate: function() {
Prism.highlightElement(this.refs.source.getDOMNode());
},
refreshCode: function() {
var node = this.refs.source.getDOMNode(),
code = node.innerText || node.textContent;
if (!code) return;
try {
var result = JSXTransformer.transform(code)
var jscode = result['code']
eval(jscode)
} catch(e) {
console.log("JSX compile error:", e)
return
}
},
render: function() {
return React.DOM.pre({},
React.DOM.code({
onBlur: this.refreshCode,
onInput: this.refreshCode,
contentEditable: this.props.liveEdit,
className: "language-"+this.props.language,
ref: "source"}, this.state.source));
}
});
(function(d, w){
window.addEventListener("load", function() {
Prism.languages.jsx = _.merge({}, Prism.languages.javascript, Prism.languages.markup);
_.each(d.querySelectorAll(".sourceCode"), function(el) {
React.renderComponent(SourceCode({sourceId: el.dataset.source,
language: el.dataset.language,
liveEdit: el.dataset.edit ? true : false}),
el);
}, false);
})
}(document, window));
</script>
<script type="text/jsx" id="renderListSource">
/** @jsx React.DOM */
var Messages = React.createClass({
getInitialState: function() {
return {
items: this.props.value || []
};
},
addItem: function(event) {
//not contaminating the original state is desirable
var newItems = this.state.items.slice(0);
newItems.push("Hi again");
this.setState({items: newItems});
},
render: function() {
return <div>
<ul>
{/*use map to process each item and return an element*/}
{this.state.items.map(function(item, number) {
return <li key={number}>{item}</li>
})}
</ul>
<button onClick={this.addItem}>Add</button>
</div>;
}
});
React.renderComponent(
<Messages value={['Hello World', 'Second item']}/>,
document.getElementById('renderList')
);
</script>
<script type="text/jsx" id="sendMessageSource">
/** @jsx React.DOM */
var MessageYourself = React.createClass({
getInitialState: function() {
return {
items: this.props.value || []
};
},
sendMessage: function(event) {
var newItems = this.state.items.slice(0);
//use refs to access the state of a child element and get the value
newItems.push(this.refs.message.state.value);
this.refs.message.setState({value: ""})
this.setState({items: newItems});
},
render: function() {
return <div>
<ul>
{this.state.items.map(function(item, number) {
return <li key={number}>{item}</li>
})}
</ul>
{/*defining ref to access later*/}
<fieldset><input ref="message" type="text"/></fieldset>
<button onClick={this.sendMessage}>Send</button>
</div>;
}
});
React.renderComponent(
<MessageYourself value={['Hello World', 'Second item']}/>,
document.getElementById('sendMessage')
);
</script>
<script type="text/jsx" id="todoListSource">
/** @jsx React.DOM */
var TodoList = React.createClass({
getInitialState: function() {
return {
items: this.props.value || []
};
},
add: function(event) {
var newItems = this.state.items.slice(0);
newItems.push(this.refs.newItem.state.value);
this.refs.newItem.setState({value: ""})
this.setState({items: newItems});
},
remove: function(number, event) {
var newItems = _.clone(this.state.items)
newItems.splice(number, 1);
this.setState({items: newItems});
},
renderItem: function(item, index) {
return <li key={index}>
{item}
{/*bind callback to the index of this item*/}
<button onClick={this.remove.bind(this, index)}>Remove</button>
</li>
},
render: function() {
return <div>
<ul>
{this.state.items.map(this.renderItem)}
</ul>
<fieldset><input ref="newItem" type="text"/></fieldset>
<button onClick={this.add}>Add</button>
</div>;
}
});
React.renderComponent(
<TodoList value={['Invent something', '????']}/>,
document.getElementById('todoList')
);
</script>
</head>
<body>
<section class="container">
<h1>Rendering a List</h1>
<div class="row">
<div class="col-sm-4">
<p>
In the addItem method we clone "items" so that the original state remains unmodified.
This particular example would not have an issue with modifying "items" in place
but if we ever implement our own "componentShouldUpdate" then we run the risk of not knowing if our state was modified.
</p>
<ul>
<li>Use "map" to iterate over items and emit virtual DOM</li>
<li>Specify "key" attribute to distinguish each list item in the virtual DOM</li>
<li>Construct the DOM in the order that it will be rendered</li>
<li>Try not to modify the original state by cloning</li>
</ul>
<div class="result" id="renderList"></div>
</div>
<div class="col-sm-8">
<div class="sourceCode" data-source="renderListSource" data-edit="true"></div>
</div>
</div>
</section>
<section class="container">
<h1>Using refs</h1>
<div class="row">
<div class="col-sm-4">
<ul>
<li>Attribute "ref" triggers the component to be stored in "this.refs" with the associated value as the key</li>
<li>Use ref to retrieve data and send messages to children</li>
</ul>
<div class="result" id="sendMessage"></div>
</div>
<div class="col-sm-8">
<div class="sourceCode" data-source="sendMessageSource" data-edit="true"></div>
</div>
</div>
</section>
<section class="container">
<h1>Binding data to callbacks</h1>
<div class="row">
<div class="col-sm-4">
<ul>
<li>function.bind(this, arg1, arg2, ...)</li>
<li>embed callback data from the rendering cycle to the callback</li>
<li>Define other render methods to keep the main render function simple</li>
</ul>
<div class="result" id="todoList"></div>
</div>
<div class="col-sm-8">
<div class="sourceCode" data-source="todoListSource" data-edit="true"></div>
</div>
</div>
</section>
<section class="container">
<h1>Lifecycle & Integrations</h1>
<p>For arguments and details for each component method see the <a href="https://facebook.github.io/react/docs/component-specs.html">Component Specs & Lifecycle</a></p>
<div class="row">
<div class="col-sm-4">
<p>When a component is instantiated</p>
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjI1MCIgaGVpZ2h0PSI1MDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8IS0tIENyZWF0ZWQgd2l0aCBNZXRob2QgRHJhdyAtIGh0dHA6Ly9naXRodWIuY29tL2R1b3BpeGVsL01ldGhvZC1EcmF3LyAtLT4KIDxnPgogIDx0aXRsZT5iYWNrZ3JvdW5kPC90aXRsZT4KICA8cmVjdCBmaWxsPSIjZmZmIiBpZD0iY2FudmFzX2JhY2tncm91bmQiIGhlaWdodD0iNTAyIiB3aWR0aD0iMjUyIiB5PSItMSIgeD0iLTEiLz4KICA8ZyBkaXNwbGF5PSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgeT0iMCIgeD0iMCIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIgaWQ9ImNhbnZhc0dyaWQiPgogICA8cmVjdCBmaWxsPSJ1cmwoI2dyaWRwYXR0ZXJuKSIgc3Ryb2tlLXdpZHRoPSIwIiB5PSIwIiB4PSIwIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIi8+CiAgPC9nPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIHRyYW5zZm9ybT0icm90YXRlKDkwIDExMi4xMTk5NjQ1OTk2MDkzOSw2Mi43MDE2Njc3ODU2NDQ1NCkgIiBpZD0ic3ZnXzEiIGQ9Im0xMTAuMjU2MjU2LDczLjUxOTgwNmw2LjUwMDQxMiwtNi42ODE2MDJsLTEyLjU2ODQ5NywwbC0xMi41NjgyMDcsMGwwLC00LjEzNjUzNmwwLC00LjEzNjUzNmwxMi40MjQxMDMsMGM2LjgzMzQyLDAgMTIuNDI0MjEsLTAuMjA5MzY2IDEyLjQyNDIxLC0wLjQ2NTcwNmMwLC0wLjI1NjM0OCAtMi43MjAxNjksLTMuMjYyODMzIC02LjA0NTI3MywtNi42ODE4NTRsLTYuMDQ0OTY4LC02LjIxNTkwNGw1LjU4NzYzMSwwbDUuNTg3MzQxLDBsOC41MzMzMjUsOC43NTg1MzdsOC41MzM2Myw4Ljc1ODI4NmwtOC41NDk4OTYsOC43NDE0NjNsLTguNTQ5NjIyLDguNzQxNzE0bC01Ljg4MjI3OCwwbC01Ljg4MjMwOSwwbDYuNTAwMzk3LC02LjY4MTg2MmwwLDB6IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlPSIjMDAwIiBmaWxsPSIjZmZmIi8+CiAgPHRleHQgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgdGV4dC1hbmNob3I9ImxlZnQiIGZvbnQtZmFtaWx5PSJIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjI0IiBpZD0ic3ZnXzIiIHk9IjMwLjUiIHg9Ijg2IiBzdHJva2Utd2lkdGg9IjAiIHN0cm9rZT0iIzAwMCIgZmlsbD0iIzAwMDAwMCI+TmV3PC90ZXh0PgogIDx0ZXh0IHhtbDpzcGFjZT0icHJlc2VydmUiIHRleHQtYW5jaG9yPSJsZWZ0IiBmb250LWZhbWlseT0iSGVsdmV0aWNhLCBBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgaWQ9InN2Z18zIiB5PSIxMDQiIHg9IjM1LjUiIGZpbGwtb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLW9wYWNpdHk9Im51bGwiIHN0cm9rZS13aWR0aD0iMCIgc3Ryb2tlPSIjMDAwIiBmaWxsPSIjMDAwMDAwIj5nZXREZWZhdWx0UHJvcHM8L3RleHQ+CiAgPHRleHQgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgdGV4dC1hbmNob3I9ImxlZnQiIGZvbnQtZmFtaWx5PSJIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjI0IiBpZD0ic3ZnXzUiIHk9IjE5MCIgeD0iNTEuNSIgZmlsbC1vcGFjaXR5PSJudWxsIiBzdHJva2Utb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLXdpZHRoPSIwIiBzdHJva2U9IiMwMDAiIGZpbGw9IiMwMDAwMDAiPmdldEluaXRpYWxTdGF0ZTwvdGV4dD4KICA8dGV4dCB4bWw6c3BhY2U9InByZXNlcnZlIiB0ZXh0LWFuY2hvcj0ibGVmdCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjQiIGlkPSJzdmdfNyIgeT0iMjcwIiB4PSIxMi41IiBmaWxsLW9wYWNpdHk9Im51bGwiIHN0cm9rZS1vcGFjaXR5PSJudWxsIiBzdHJva2Utd2lkdGg9IjAiIHN0cm9rZT0iIzAwMCIgZmlsbD0iIzAwMDAwMCI+Y29tcG9uZW50V2lsbE1vdW50PC90ZXh0PgogIDx0ZXh0IHhtbDpzcGFjZT0icHJlc2VydmUiIHRleHQtYW5jaG9yPSJsZWZ0IiBmb250LWZhbWlseT0iSGVsdmV0aWNhLCBBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgaWQ9InN2Z184IiB5PSIzNTQiIHg9IjgwLjUiIGZpbGwtb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLW9wYWNpdHk9Im51bGwiIHN0cm9rZS13aWR0aD0iMCIgc3Ryb2tlPSIjMDAwIiBmaWxsPSIjMDAwMDAwIj5yZW5kZXI8L3RleHQ+CiAgPHRleHQgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgdGV4dC1hbmNob3I9ImxlZnQiIGZvbnQtZmFtaWx5PSJIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjI0IiBpZD0ic3ZnXzkiIHk9IjQ0MyIgeD0iMTEuNSIgZmlsbC1vcGFjaXR5PSJudWxsIiBzdHJva2Utb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLXdpZHRoPSIwIiBzdHJva2U9IiMwMDAiIGZpbGw9IiMwMDAwMDAiPmNvbXBvbmVudERpZE1vdW50PC90ZXh0PgogIDxwYXRoIHRyYW5zZm9ybT0icm90YXRlKDkwIDExMy4xMTk5NjQ1OTk2MDkzNiwxMzcuNzAxNjYwMTU2MjUwMDMpICIgaWQ9InN2Z18xMyIgZD0ibTExMS4yNTYyNjQsMTQ4LjUxOTgwNmw2LjUwMDQwNCwtNi42ODE1OTVsLTEyLjU2ODQ5NywwbC0xMi41NjgyMTQsMGwwLC00LjEzNjUzNmwwLC00LjEzNjU1MWwxMi40MjQxMSwwYzYuODMzNDIsMCAxMi40MjQyMSwtMC4yMDkzNTEgMTIuNDI0MjEsLTAuNDY1Njk4YzAsLTAuMjU2MzQ4IC0yLjcyMDE2OSwtMy4yNjI4MzMgLTYuMDQ1MjgsLTYuNjgxODYybC02LjA0NDk2LC02LjIxNTg4OWw1LjU4NzYzMSwwbDUuNTg3MzQxLDBsOC41MzMzMTgsOC43NTg1M2w4LjUzMzYzOCw4Ljc1ODI4NmwtOC41NDk4OTYsOC43NDE0N2wtOC41NDk2MjIsOC43NDE2OTlsLTUuODgyMjc4LDBsLTUuODgyMzA5LDBsNi41MDA0MDQsLTYuNjgxODU0bDAsMHoiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2U9IiMwMDAiIGZpbGw9IiNmZmYiLz4KICA8cGF0aCB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxMTUuMTE5OTY0NTk5NjA5MzYsMjIzLjcwMTY2MDE1NjI1MDAzKSAiIGlkPSJzdmdfMTQiIGQ9Im0xMTMuMjU2MjY0LDIzNC41MTk4MDZsNi41MDA0MDQsLTYuNjgxNTk1bC0xMi41Njg0OTcsMGwtMTIuNTY4MjE0LDBsMCwtNC4xMzY1MzZsMCwtNC4xMzY1NTFsMTIuNDI0MTEsMGM2LjgzMzQyLDAgMTIuNDI0MjEsLTAuMjA5MzUxIDEyLjQyNDIxLC0wLjQ2NTY5OGMwLC0wLjI1NjM0OCAtMi43MjAxNjksLTMuMjYyODMzIC02LjA0NTI4LC02LjY4MTg1NGwtNi4wNDQ5NiwtNi4yMTU4OTdsNS41ODc2MzEsMGw1LjU4NzM0MSwwbDguNTMzMzE4LDguNzU4NTNsOC41MzM2MzgsOC43NTgyODZsLTguNTQ5ODk2LDguNzQxNDdsLTguNTQ5NjIyLDguNzQxNjk5bC01Ljg4MjI3OCwwbC01Ljg4MjMwOSwwbDYuNTAwNDA0LC02LjY4MTg1NGwwLDB6IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlPSIjMDAwIiBmaWxsPSIjZmZmIi8+CiAgPHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoOTAgMTEyLjExOTk2NDU5OTYwOTMzLDMwNi43MDE2NjAxNTYyNTAwNikgIiBpZD0ic3ZnXzE1IiBkPSJtMTEwLjI1NjI2NCwzMTcuNTE5ODA2bDYuNTAwNDA0LC02LjY4MTYxbC0xMi41Njg0OTcsMGwtMTIuNTY4MjE0LDBsMCwtNC4xMzY1MzZsMCwtNC4xMzY1MzZsMTIuNDI0MTEsMGM2LjgzMzQyLDAgMTIuNDI0MjEsLTAuMjA5MzUxIDEyLjQyNDIxLC0wLjQ2NTY5OGMwLC0wLjI1NjM0OCAtMi43MjAxNjksLTMuMjYyODQ4IC02LjA0NTI4LC02LjY4MTg1NGwtNi4wNDQ5NiwtNi4yMTU5MTJsNS41ODc2MzEsMGw1LjU4NzM0MSwwbDguNTMzMzE4LDguNzU4NTQ1bDguNTMzNjM4LDguNzU4MzAxbC04LjU0OTg5Niw4Ljc0MTQ1NWwtOC41NDk2MjIsOC43NDE2OTlsLTUuODgyMjc4LDBsLTUuODgyMzA5LDBsNi41MDA0MDQsLTYuNjgxODU0bDAsMHoiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2U9IiMwMDAiIGZpbGw9IiNmZmYiLz4KICA8cGF0aCB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxMTMuMTE5OTY0NTk5NjA5MzMsMzg5LjcwMTY2MDE1NjI1MDA2KSAiIGlkPSJzdmdfMTYiIGQ9Im0xMTEuMjU2MjY0LDQwMC41MTk4MDZsNi41MDA0MDQsLTYuNjgxNjFsLTEyLjU2ODQ5NywwbC0xMi41NjgyMTQsMGwwLC00LjEzNjUzNmwwLC00LjEzNjUzNmwxMi40MjQxMSwwYzYuODMzNDIsMCAxMi40MjQyMSwtMC4yMDkzNTEgMTIuNDI0MjEsLTAuNDY1Njk4YzAsLTAuMjU2MzQ4IC0yLjcyMDE2OSwtMy4yNjI4NDggLTYuMDQ1MjgsLTYuNjgxODU0bC02LjA0NDk2LC02LjIxNTkxMmw1LjU4NzYzMSwwbDUuNTg3MzQxLDBsOC41MzMzMSw4Ljc1ODU0NWw4LjUzMzY0Niw4Ljc1ODMwMWwtOC41NDk4OTYsOC43NDE0NTVsLTguNTQ5NjIyLDguNzQxNjk5bC01Ljg4MjI3OCwwbC01Ljg4MjMwOSwwbDYuNTAwNDA0LC02LjY4MTg1NGwwLDB6IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlPSIjMDAwIiBmaWxsPSIjZmZmIi8+CiA8L2c+Cjwvc3ZnPg=="/>
</div>
<div class="col-sm-4">
<p>When a component's state is updated</p>
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjI5MCIgaGVpZ2h0PSIzODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8IS0tIENyZWF0ZWQgd2l0aCBNZXRob2QgRHJhdyAtIGh0dHA6Ly9naXRodWIuY29tL2R1b3BpeGVsL01ldGhvZC1EcmF3LyAtLT4KIDxnPgogIDx0aXRsZT5iYWNrZ3JvdW5kPC90aXRsZT4KICA8cmVjdCBmaWxsPSIjZmZmIiBpZD0iY2FudmFzX2JhY2tncm91bmQiIGhlaWdodD0iMzgyIiB3aWR0aD0iMjkyIiB5PSItMSIgeD0iLTEiLz4KICA8ZyBkaXNwbGF5PSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgeT0iMCIgeD0iMCIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIgaWQ9ImNhbnZhc0dyaWQiPgogICA8cmVjdCBmaWxsPSJ1cmwoI2dyaWRwYXR0ZXJuKSIgc3Ryb2tlLXdpZHRoPSIwIiB5PSIwIiB4PSIwIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIi8+CiAgPC9nPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIHRyYW5zZm9ybT0icm90YXRlKDkwIDE0My4xMTk5NjQ1OTk2MDk0LDYxLjcwMTY2Nzc4NTY0NDU0NSkgIiBpZD0ic3ZnXzEiIGQ9Im0xNDEuMjU2MjU2LDcyLjUxOTgwNmw2LjUwMDQxMiwtNi42ODE2MDJsLTEyLjU2ODQ5NywwbC0xMi41NjgyMDcsMGwwLC00LjEzNjUzNmwwLC00LjEzNjUzNmwxMi40MjQxMDMsMGM2LjgzMzQyLDAgMTIuNDI0MjEsLTAuMjA5MzY2IDEyLjQyNDIxLC0wLjQ2NTcwNmMwLC0wLjI1NjM0OCAtMi43MjAxNjksLTMuMjYyODMzIC02LjA0NTI3MywtNi42ODE4NTRsLTYuMDQ0OTY4LC02LjIxNTkwNGw1LjU4NzYzMSwwbDUuNTg3MzQxLDBsOC41MzMzMjUsOC43NTg1MzdsOC41MzM2Myw4Ljc1ODI4NmwtOC41NDk4OTYsOC43NDE0NjNsLTguNTQ5NjIyLDguNzQxNzE0bC01Ljg4MjI3OCwwbC01Ljg4MjMwOSwwbDYuNTAwMzk3LC02LjY4MTg2MmwwLDB6IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlPSIjMDAwIiBmaWxsPSIjZmZmIi8+CiAgPHRleHQgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgdGV4dC1hbmNob3I9ImxlZnQiIGZvbnQtZmFtaWx5PSJIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjI0IiBpZD0ic3ZnXzIiIHk9IjI5LjUiIHg9Ijk4IiBzdHJva2Utd2lkdGg9IjAiIHN0cm9rZT0iIzAwMCIgZmlsbD0iIzAwMDAwMCI+c2V0U3RhdGU8L3RleHQ+CiAgPHRleHQgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgdGV4dC1hbmNob3I9ImxlZnQiIGZvbnQtZmFtaWx5PSJIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjI0IiBpZD0ic3ZnXzMiIHk9IjEwMiIgeD0iMTEuNSIgZmlsbC1vcGFjaXR5PSJudWxsIiBzdHJva2Utb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLXdpZHRoPSIwIiBzdHJva2U9IiMwMDAiIGZpbGw9IiMwMDAwMDAiPnNob3VsZENvbXBvbmVudFVwZGF0ZTwvdGV4dD4KICA8dGV4dCB4bWw6c3BhY2U9InByZXNlcnZlIiB0ZXh0LWFuY2hvcj0ibGVmdCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjQiIGlkPSJzdmdfNSIgeT0iMTkyIiB4PSIyMy41IiBmaWxsLW9wYWNpdHk9Im51bGwiIHN0cm9rZS1vcGFjaXR5PSJudWxsIiBzdHJva2Utd2lkdGg9IjAiIHN0cm9rZT0iIzAwMCIgZmlsbD0iIzAwMDAwMCI+Y29tcG9uZW50V2lsbFVwZGF0ZTwvdGV4dD4KICA8dGV4dCB4bWw6c3BhY2U9InByZXNlcnZlIiB0ZXh0LWFuY2hvcj0ibGVmdCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjQiIGlkPSJzdmdfOCIgeT0iMjc1IiB4PSIxMDkuNSIgZmlsbC1vcGFjaXR5PSJudWxsIiBzdHJva2Utb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLXdpZHRoPSIwIiBzdHJva2U9IiMwMDAiIGZpbGw9IiMwMDAwMDAiPnJlbmRlcjwvdGV4dD4KICA8dGV4dCB4bWw6c3BhY2U9InByZXNlcnZlIiB0ZXh0LWFuY2hvcj0ibGVmdCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjQiIGlkPSJzdmdfOSIgeT0iMzYzIiB4PSIyOC41IiBmaWxsLW9wYWNpdHk9Im51bGwiIHN0cm9rZS1vcGFjaXR5PSJudWxsIiBzdHJva2Utd2lkdGg9IjAiIHN0cm9rZT0iIzAwMCIgZmlsbD0iIzAwMDAwMCI+Y29tcG9uZW50RGlkVXBkYXRlPC90ZXh0PgogIDxwYXRoIHRyYW5zZm9ybT0icm90YXRlKDkwIDE0My4xMTk5NjQ1OTk2MDkzOCwxMzguNzAxNjYwMTU2MjUwMDMpICIgaWQ9InN2Z18xMyIgZD0ibTE0MS4yNTYyNTYsMTQ5LjUxOTgwNmw2LjUwMDQxMiwtNi42ODE1OTVsLTEyLjU2ODQ5NywwbC0xMi41NjgyMTQsMGwwLC00LjEzNjUzNmwwLC00LjEzNjU1MWwxMi40MjQxMSwwYzYuODMzNDIsMCAxMi40MjQyMSwtMC4yMDkzNTEgMTIuNDI0MjEsLTAuNDY1Njk4YzAsLTAuMjU2MzQ4IC0yLjcyMDE2OSwtMy4yNjI4MzMgLTYuMDQ1MjczLC02LjY4MTg2MmwtNi4wNDQ5NjgsLTYuMjE1ODg5bDUuNTg3NjMxLDBsNS41ODczNDEsMGw4LjUzMzMxLDguNzU4NTNsOC41MzM2NDYsOC43NTgyODZsLTguNTQ5ODk2LDguNzQxNDdsLTguNTQ5NjIyLDguNzQxNjk5bC01Ljg4MjI3OCwwbC01Ljg4MjMwOSwwbDYuNTAwMzk3LC02LjY4MTg1NGwwLDB6IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlPSIjMDAwIiBmaWxsPSIjZmZmIi8+CiAgPHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoOTAgMTQ0LjExOTk2NDU5OTYwOTM4LDIyNC43MDE2NjAxNTYyNTAwMykgIiBpZD0ic3ZnXzE0IiBkPSJtMTQyLjI1NjI1NiwyMzUuNTE5ODA2bDYuNTAwNDEyLC02LjY4MTU5NWwtMTIuNTY4NDk3LDBsLTEyLjU2ODIwNywwbDAsLTQuMTM2NTM2bDAsLTQuMTM2NTUxbDEyLjQyNDEwMywwYzYuODMzNDIsMCAxMi40MjQyMSwtMC4yMDkzNTEgMTIuNDI0MjEsLTAuNDY1Njk4YzAsLTAuMjU2MzQ4IC0yLjcyMDE2OSwtMy4yNjI4MzMgLTYuMDQ1MjczLC02LjY4MTg1NGwtNi4wNDQ5NjgsLTYuMjE1ODk3bDUuNTg3NjMxLDBsNS41ODczNDEsMGw4LjUzMzMxLDguNzU4NTNsOC41MzM2NDYsOC43NTgyODZsLTguNTQ5ODk2LDguNzQxNDdsLTguNTQ5NjIyLDguNzQxNjk5bC01Ljg4MjI3OCwwbC01Ljg4MjMwOSwwbDYuNTAwMzk3LC02LjY4MTg1NGwwLDB6IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlPSIjMDAwIiBmaWxsPSIjZmZmIi8+CiAgPHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoOTAgMTQ2LjExOTk2NDU5OTYwOTM1LDMwOS43MDE2NjAxNTYyNTAwNikgIiBpZD0ic3ZnXzE2IiBkPSJtMTQ0LjI1NjI1NiwzMjAuNTE5ODA2bDYuNTAwNDEyLC02LjY4MTYxbC0xMi41Njg0OTcsMGwtMTIuNTY4MjA3LDBsMCwtNC4xMzY1MzZsMCwtNC4xMzY1MzZsMTIuNDI0MTAzLDBjNi44MzM0MiwwIDEyLjQyNDIxLC0wLjIwOTM1MSAxMi40MjQyMSwtMC40NjU2OThjMCwtMC4yNTYzNDggLTIuNzIwMTY5LC0zLjI2Mjg0OCAtNi4wNDUyNzMsLTYuNjgxODU0bC02LjA0NDk2OCwtNi4yMTU5MTJsNS41ODc2MzEsMGw1LjU4NzM0MSwwbDguNTMzMzEsOC43NTg1NDVsOC41MzM2NDYsOC43NTgzMDFsLTguNTQ5ODk2LDguNzQxNDU1bC04LjU0OTYyMiw4Ljc0MTY5OWwtNS44ODIyNzgsMGwtNS44ODIzMDksMGw2LjUwMDM5NywtNi42ODE4NTRsMCwweiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iIzAwMCIgZmlsbD0iI2ZmZiIvPgogPC9nPgo8L3N2Zz4="/>
</div>
<div class="col-sm-4">
<p>When a component's props is updated (either by parent or setProps)</p>
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjMyMCIgaGVpZ2h0PSI0NDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8IS0tIENyZWF0ZWQgd2l0aCBNZXRob2QgRHJhdyAtIGh0dHA6Ly9naXRodWIuY29tL2R1b3BpeGVsL01ldGhvZC1EcmF3LyAtLT4KIDxnPgogIDx0aXRsZT5iYWNrZ3JvdW5kPC90aXRsZT4KICA8cmVjdCBmaWxsPSIjZmZmIiBpZD0iY2FudmFzX2JhY2tncm91bmQiIGhlaWdodD0iNDQyIiB3aWR0aD0iMzIyIiB5PSItMSIgeD0iLTEiLz4KICA8ZyBkaXNwbGF5PSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgeT0iMCIgeD0iMCIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIgaWQ9ImNhbnZhc0dyaWQiPgogICA8cmVjdCBmaWxsPSJ1cmwoI2dyaWRwYXR0ZXJuKSIgc3Ryb2tlLXdpZHRoPSIwIiB5PSIwIiB4PSIwIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIi8+CiAgPC9nPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIHRyYW5zZm9ybT0icm90YXRlKDkwIDE2Mi4xMTk5NjQ1OTk2MDk0LDY1LjcwMTY2Nzc4NTY0NDU1KSAiIGlkPSJzdmdfMSIgZD0ibTE2MC4yNTYyNTYsNzYuNTE5ODA2bDYuNTAwNDEyLC02LjY4MTYwMmwtMTIuNTY4NDk3LDBsLTEyLjU2ODIwNywwbDAsLTQuMTM2NTM2bDAsLTQuMTM2NTM2bDEyLjQyNDEwMywwYzYuODMzNDIsMCAxMi40MjQyMSwtMC4yMDkzNjYgMTIuNDI0MjEsLTAuNDY1NzA2YzAsLTAuMjU2MzQ4IC0yLjcyMDE2OSwtMy4yNjI4MzMgLTYuMDQ1MjczLC02LjY4MTg1NGwtNi4wNDQ5NjgsLTYuMjE1OTA0bDUuNTg3NjMxLDBsNS41ODczNDEsMGw4LjUzMzMyNSw4Ljc1ODUzN2w4LjUzMzYzLDguNzU4Mjg2bC04LjU0OTg5Niw4Ljc0MTQ2M2wtOC41NDk2MjIsOC43NDE3MTRsLTUuODgyMjc4LDBsLTUuODgyMzA5LDBsNi41MDAzOTcsLTYuNjgxODYybDAsMHoiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2U9IiMwMDAiIGZpbGw9IiNmZmYiLz4KICA8dGV4dCB4bWw6c3BhY2U9InByZXNlcnZlIiB0ZXh0LWFuY2hvcj0ibGVmdCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjQiIGlkPSJzdmdfMiIgeT0iMzIuNSIgeD0iMTExIiBzdHJva2Utd2lkdGg9IjAiIHN0cm9rZT0iIzAwMCIgZmlsbD0iIzAwMDAwMCI+c2V0UHJvcHM8L3RleHQ+CiAgPHRleHQgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgdGV4dC1hbmNob3I9ImxlZnQiIGZvbnQtZmFtaWx5PSJIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjI0IiBpZD0ic3ZnXzMiIHk9IjE4MiIgeD0iMjguNSIgZmlsbC1vcGFjaXR5PSJudWxsIiBzdHJva2Utb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLXdpZHRoPSIwIiBzdHJva2U9IiMwMDAiIGZpbGw9IiMwMDAwMDAiPnNob3VsZENvbXBvbmVudFVwZGF0ZTwvdGV4dD4KICA8dGV4dCB4bWw6c3BhY2U9InByZXNlcnZlIiB0ZXh0LWFuY2hvcj0ibGVmdCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjQiIGlkPSJzdmdfNSIgeT0iMjU3IiB4PSI0NS41IiBmaWxsLW9wYWNpdHk9Im51bGwiIHN0cm9rZS1vcGFjaXR5PSJudWxsIiBzdHJva2Utd2lkdGg9IjAiIHN0cm9rZT0iIzAwMCIgZmlsbD0iIzAwMDAwMCI+Y29tcG9uZW50V2lsbFVwZGF0ZTwvdGV4dD4KICA8dGV4dCB4bWw6c3BhY2U9InByZXNlcnZlIiB0ZXh0LWFuY2hvcj0ibGVmdCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjQiIGlkPSJzdmdfOCIgeT0iMzM5IiB4PSIxMjguNSIgZmlsbC1vcGFjaXR5PSJudWxsIiBzdHJva2Utb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLXdpZHRoPSIwIiBzdHJva2U9IiMwMDAiIGZpbGw9IiMwMDAwMDAiPnJlbmRlcjwvdGV4dD4KICA8dGV4dCB4bWw6c3BhY2U9InByZXNlcnZlIiB0ZXh0LWFuY2hvcj0ibGVmdCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjQiIGlkPSJzdmdfOSIgeT0iNDI0IiB4PSI0Ni41IiBmaWxsLW9wYWNpdHk9Im51bGwiIHN0cm9rZS1vcGFjaXR5PSJudWxsIiBzdHJva2Utd2lkdGg9IjAiIHN0cm9rZT0iIzAwMCIgZmlsbD0iIzAwMDAwMCI+Y29tcG9uZW50RGlkVXBkYXRlPC90ZXh0PgogIDxwYXRoIHRyYW5zZm9ybT0icm90YXRlKDkwIDE2Mi4xMTk5NjQ1OTk2MDkzOCwyMTEuNzAxNjYwMTU2MjUwMDMpICIgaWQ9InN2Z18xMyIgZD0ibTE2MC4yNTYyNTYsMjIyLjUxOTgwNmw2LjUwMDQxMiwtNi42ODE1OTVsLTEyLjU2ODQ5NywwbC0xMi41NjgyMDcsMGwwLC00LjEzNjUzNmwwLC00LjEzNjU1MWwxMi40MjQxMDMsMGM2LjgzMzQyLDAgMTIuNDI0MjEsLTAuMjA5MzUxIDEyLjQyNDIxLC0wLjQ2NTY5OGMwLC0wLjI1NjM0OCAtMi43MjAxNjksLTMuMjYyODMzIC02LjA0NTI3MywtNi42ODE4N2wtNi4wNDQ5NjgsLTYuMjE1ODgxbDUuNTg3NjMxLDBsNS41ODczNDEsMGw4LjUzMzMxLDguNzU4NTNsOC41MzM2NDYsOC43NTgyODZsLTguNTQ5ODk2LDguNzQxNDdsLTguNTQ5NjIyLDguNzQxNjk5bC01Ljg4MjI3OCwwbC01Ljg4MjMwOSwwbDYuNTAwMzk3LC02LjY4MTg1NGwwLDB6IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlPSIjMDAwIiBmaWxsPSIjZmZmIi8+CiAgPHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoOTAgMTYyLjExOTk2NDU5OTYwOTM1LDI4OS43MDE2NjAxNTYyNTAwNikgIiBpZD0ic3ZnXzE0IiBkPSJtMTYwLjI1NjI1NiwzMDAuNTE5ODA2bDYuNTAwNDEyLC02LjY4MTU4bC0xMi41Njg0OTcsMGwtMTIuNTY4MjA3LDBsMCwtNC4xMzY1NjZsMCwtNC4xMzY1MzZsMTIuNDI0MTAzLDBjNi44MzM0MiwwIDEyLjQyNDIxLC0wLjIwOTM1MSAxMi40MjQyMSwtMC40NjU2OThjMCwtMC4yNTYzNDggLTIuNzIwMTY5LC0zLjI2MjgxNyAtNi4wNDUyNzMsLTYuNjgxODU0bC02LjA0NDk2OCwtNi4yMTU4ODFsNS41ODc2MzEsMGw1LjU4NzM0MSwwbDguNTMzMzEsOC43NTg1MTRsOC41MzM2NDYsOC43NTgzMDFsLTguNTQ5ODk2LDguNzQxNDU1bC04LjU0OTYyMiw4Ljc0MTY5OWwtNS44ODIyNzgsMGwtNS44ODIzMDksMGw2LjUwMDM5NywtNi42ODE4NTRsMCwweiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iIzAwMCIgZmlsbD0iI2ZmZiIvPgogIDxwYXRoIHRyYW5zZm9ybT0icm90YXRlKDkwIDE2Mi4xMTk5NjQ1OTk2MDkzNSwzNzMuNzAxNjYwMTU2MjUwMDYpICIgaWQ9InN2Z18xNiIgZD0ibTE2MC4yNTYyNTYsMzg0LjUxOTgwNmw2LjUwMDQxMiwtNi42ODE2MWwtMTIuNTY4NDk3LDBsLTEyLjU2ODIwNywwbDAsLTQuMTM2NTM2bDAsLTQuMTM2NTM2bDEyLjQyNDEwMywwYzYuODMzNDIsMCAxMi40MjQyMSwtMC4yMDkzNTEgMTIuNDI0MjEsLTAuNDY1Njk4YzAsLTAuMjU2MzQ4IC0yLjcyMDE2OSwtMy4yNjI4NDggLTYuMDQ1MjczLC02LjY4MTg1NGwtNi4wNDQ5NjgsLTYuMjE1OTEybDUuNTg3NjMxLDBsNS41ODczNDEsMGw4LjUzMzMxLDguNzU4NTQ1bDguNTMzNjQ2LDguNzU4MzAxbC04LjU0OTg5Niw4Ljc0MTQ1NWwtOC41NDk2MjIsOC43NDE2OTlsLTUuODgyMjc4LDBsLTUuODgyMzA5LDBsNi41MDAzOTcsLTYuNjgxODU0bDAsMHoiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2U9IiMwMDAiIGZpbGw9IiNmZmYiLz4KICA8cGF0aCB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxNjMuMTE5OTY0NTk5NjA5MzgsMTQyLjcwMTY2MDE1NjI1MDAzKSAiIGlkPSJzdmdfMTciIGQ9Im0xNjEuMjU2MjU2LDE1My41MTk4MDZsNi41MDA0MTIsLTYuNjgxNTk1bC0xMi41Njg0OTcsMGwtMTIuNTY4MjA3LDBsMCwtNC4xMzY1NTFsMCwtNC4xMzY1MmwxMi40MjQxMDMsMGM2LjgzMzQyLDAgMTIuNDI0MjEsLTAuMjA5MzY2IDEyLjQyNDIxLC0wLjQ2NTcxNGMwLC0wLjI1NjM0OCAtMi43MjAxNjksLTMuMjYyODMzIC02LjA0NTI3MywtNi42ODE4NTRsLTYuMDQ0OTY4LC02LjIxNTkwNGw1LjU4NzYzMSwwbDUuNTg3MzQxLDBsOC41MzMzMjUsOC43NTg1MzdsOC41MzM2Myw4Ljc1ODI4NmwtOC41NDk4OTYsOC43NDE0N2wtOC41NDk2MjIsOC43NDE2OTlsLTUuODgyMjc4LDBsLTUuODgyMzA5LDBsNi41MDAzOTcsLTYuNjgxODU0bDAsMHoiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2U9IiMwMDAiIGZpbGw9IiNmZmYiLz4KICA8dGV4dCB4bWw6c3BhY2U9InByZXNlcnZlIiB0ZXh0LWFuY2hvcj0ibGVmdCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjQiIGlkPSJzdmdfMTgiIHk9IjExMC41IiB4PSIxMCIgc3Ryb2tlLXdpZHRoPSIwIiBzdHJva2U9IiMwMDAiIGZpbGw9IiMwMDAwMDAiPmNvbXBvbmVudFdpbGxSZWNlaXZlUHJvcHM8L3RleHQ+CiA8L2c+Cjwvc3ZnPg=="/>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p>
This example uses Reactjs & Prism to render the source code used for rendering the source code examples.
A component has a life cycle with explicit events and can define handlers for those events. By hooking into
those lifecycle events we can trigger loading and updating 3rd party javascript tools like Prism or jQuery.
</p>
<ul>
<li>Component looks up source code with the given sourceId property</li>
<li>Component renders source code in a code tag</li>
<li>componentDidMount & componentDidUpdate to trigger Prism load and updates</li>
<li>On code change optionally re-evaluate the code</li>
<li>Seperate routine mounts a component for each sourceCode instance</li>
</ul>
</div>
<div class="col-sm-8">
<div class="sourceCode" data-source="sourceView" data-language="javascript"></div>
</div>
</div>
</section>
<div class="footer container">
<ul class="pagination">
<li><a href="lesson1.html">«</a></li>
<li><a href="lesson1.html">Lesson 1</a></li>
<li class="active"><a href="lesson2.html">Lesson 2</a></li>
<li><a href="lesson3.html">Lesson 3</a></li>
<li><a href="lesson4.html">Lesson 4</a></li>
<li><a href="lesson3.html">»</a></li>
</ul>
</div>
</body>
</html>