mirror of
https://github.com/kay-is/react-from-zero.git
synced 2026-04-24 03:00:06 -04:00
126 lines
3.0 KiB
HTML
126 lines
3.0 KiB
HTML
<!doctype html>
|
|
|
|
<title>10 Example App - React From Zero</title>
|
|
|
|
<script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
|
|
<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.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 = React.createClass({
|
|
|
|
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 empy 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 = React.createClass({
|
|
|
|
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> |