<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"></div> <script src="./node_modules/react/umd/react.development.js"></script>//npm i react <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>// npm i react <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> <script src="./node_modules/prop-types/prop-types.min.js"></script>// npm install i prop-types <script type="text/babel"> class App extends React.Component { constructor(props) { super(props); this.state = { todos: ['AAA', 'BBB', 'CCC'] }; this.addTodo=this.addTodo.bind(this) } addTodo(todo){ const {todos}=this.state todos.unshift(todo) this.setState({todos}) } render() { const { todos } = this.state; return ( <div> Simple TODO list <Add count={todos.length} addTodo={this.addTodo}/> <List todos={todos}/> </div> ) } } class Add extends React.Component { constructor(props) { super(props); this.add = this.add.bind(this) } add() { const todo=this.todoInput.value.trim(); if(!todo) return this.props.addTodo(todo) this.todoInput.value='' } render() { return ( <div> <input type="text" ref={input => this.todoInput = input} /> <button onClick={this.add}>add #{this.props.count + 1}</button> </div> ) } } Add.propTypes = { count: PropTypes.number.isRequired, addTodo:PropTypes.func.isRequired } class List extends React.Component { render() { const { todos } = this.props return ( <ul> {todos.map((todo, key) => (<li key={key}>{todo}</li>))} </ul> ) } } List.propTypes = { todos: PropTypes.array.isRequired } ReactDOM.render(<App />, document.getElementById('app')); </script> </body> </html>