mirror of
https://github.com/kay-is/react-from-zero.git
synced 2026-04-24 03:00:06 -04:00
126 lines
3.1 KiB
HTML
126 lines
3.1 KiB
HTML
<!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 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 = 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> |