Created
July 27, 2017 21:58
-
-
Save allenjprice/d25e01208fadf4aaccecb025e47085ac to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class App extends React.Component { | |
| constructor(props) { | |
| super(props); | |
| this.state = { | |
| todos: ['wake up', 'eat a breakfast', 'try to take over the world'], | |
| value: '' | |
| } | |
| this.handleChange = this.handleChange.bind(this); | |
| } | |
| handleChange(event) { | |
| this.setState({ | |
| value: event.target.value | |
| }); | |
| } | |
| handleClick() { | |
| // have the value in our state (which is the value of the input) added to the todo list | |
| this.setState({ | |
| // todos: this.state.todos.concat([this.state.value]) | |
| todos: [...this.state.todos, this.state.value] | |
| }) | |
| } | |
| //EXPLAIN FOR YOURSELF: What is the difference between the way the `onChange` handler is created on line 32, and the way the `onClick` handler is created on line 33? | |
| render() { | |
| return ( | |
| <div> | |
| <h1>Todo-React</h1> | |
| <input type="text" onChange={this.handleChange}></input> | |
| <button onClick={this.handleClick.bind(this)}>add todo</button> | |
| <hr /> | |
| <ul> | |
| {this.state.todos.map((todo, i) => <ListItem item={todo} /> )} | |
| </ul> | |
| </div> | |
| ) | |
| } | |
| } | |
| const ListItem = (props) => { | |
| return ( | |
| <li>{props.item}</li> | |
| ) | |
| } | |
| ReactDOM.render(<App />, document.getElementById('app')); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Todo-React</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> | |
| <script src="https://fb.me/react-with-addons-0.14.6.js"></script> | |
| <script src="https://fb.me/react-dom-0.14.6.js"></script> | |
| </head> | |
| </head> | |
| <body> | |
| <div id="app"></div> | |
| <script type="text/babel" src="app.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment