forked from kay-is/react-from-zero
-
Notifications
You must be signed in to change notification settings - Fork 0
/
10-example-app.html
126 lines (95 loc) · 3.11 KB
/
10-example-app.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
<!doctype html>
<title>10 Example App - React From Zero</title>
<script src="https://unpkg.com/react@16.4.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.4.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/create-react-class@15.6.3/create-react-class.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="app"></div>
<script type="text/babel">
// An example of a simple React app
// It uses simple component functions for its stateless components
// and a complex component class to handle the interactions
// First we have the Task and TaskList
// They get all their data/state through their properties
// <TaskList>
// <Task text="Do something"/>
// <Task text="Do nothing"/>
// </TaskList>
// Task needs a text property
function Task(props) {
return <li>{props.text}</li>
}
// TaskList needs an array of Task in its children property
function TaskList(props) {
// Print the first element bold
return (
<ul>
<b key={0}>{props.children[0]}</b>
{props.children.slice(1)}
</ul>
)
}
// This component handles the input
// It needs to be a class, because the <input> element is stateful
var TaskInput = createReactClass({
getInitialState: function() {
return {value: ""}
},
// gets called when someone types into the <input> element
handleChange: function(e) {
this.setState({value: e.target.value})
},
// gets called when someone clicks the <button> element
handleAdd: function(e) {
if (!this.state.value) return
// call the function that was added into its onAdd property
this.props.onAdd(this.state.value)
// clear the state so the input is empty again after an add
this.setState({value: ""})
},
// renders the elements every time someone types or adds
render: function() {
return (
<div>
<input
placeholder="Enter Task ."
value={this.state.value}
onChange={this.handleChange}/>
<button onClick={this.handleAdd}>Add</button>
</div>
)
},
})
// The app keeps track of the current tasks in its state
var TodoApp = createReactClass({
getInitialState: function() {
return {tasks: []}
},
// this callback will be inserted into the onAdd property of the <TaskInput> component
handleAdd: function(task) {
// adding a new task
var tasks = [task].concat(this.state.tasks)
// this forces the <TodoApp> component to render
this.setState({tasks: tasks})
},
render: function() {
// create the list of <Task> components from the tasks array in the state
var taskElements = this.state.tasks.map(function(t, i) {
return <Task key={i} text={t}/>
})
// some simple styling
// and adding the add handler to the <TaskInput> component
return (
<div style={{width: 300, margin: "auto"}}>
<TaskInput onAdd={this.handleAdd}/>
<TaskList>
{taskElements}
</TaskList>
</div>
)
},
})
var renderTarget = document.getElementById("app")
// we can use components directly
ReactDOM.render(<TodoApp/>, renderTarget)
</script>