kolya182/app.js

## app.js
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'));

## index.html
<!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>
	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'));
	<!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>