-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
71 lines (63 loc) · 1.98 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Introduction | Learning React</title>
</head>
<body>
<section id="entry-point"></section>
<script src="https://fb.me/react-0.14.7.min.js"></script>
<script src="https://fb.me/react-dom-0.14.7.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
<script type="text/babel">
var notes = [
{ id: 1, content: 'Learn React' },
{ id: 2, content: 'Get Lunch' },
{ id: 3, content: 'Learn React Native' }
]
var Note = React.createClass({
render() {
return <li>{ this.props.content }</li>
}
})
var NotesList = React.createClass({
renderNote(note) {
return <Note key={ note.id } content={ note.content } />
},
render() {
return <ul>{ this.props.notes.map(this.renderNote) }</ul>
}
})
var NotesForm = React.createClass({
render: function () {
return (
<form ref="form" onSubmit={ this.handleSubmission }>
<input type="text" ref="content" />
<input type="submit" value="Add Note" />
</form>
)
},
handleSubmission: function (event) {
event.preventDefault()
this.props.onSubmit(this.refs.content)
this.refs.form.reset()
}
})
var App = React.createClass({
render: function () {
return (
<section>
<h1>You have { this.props.notes.length } notes</h1>
<NotesList notes={ this.props.notes } />
<NotesForm onSubmit={ this.formWasSubmitted } />
</section>
)
},
formWasSubmitted: function (content) {
alert('New note: ' + content)
}
})
ReactDOM.render(<App notes={ notes } />, document.getElementById('entry-point'))
</script>
</body>
</html>