React.js starter template

<!DOCTYPE html>
<html>

  <head>
    <script data-require="react@*" data-semver="0.14.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
    <script data-require="react@*" data-semver="0.14.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="example"></div>
    <script src="script.js"></script>
  </body>

</html>

class Input extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      curValue: ''
    }
  }
  
  onSubmit(e) {
    e.preventDefault()
    this.props.onAddTodo(this.state.curValue)
    this.setState({curValue: ''})
  }
  
  onChange(e) {
    this.setState({
      curValue: e.target.value
    })
  }
  
  render() {
    return (
      <div>
        <form method="post" onSubmit={this.onSubmit.bind(this)}>
          <input  type="text"
                  onChange={this.onChange.bind(this)}
                  value={this.state.curValue}
          />
          <button type="submit">Ajouter</button>
        </form>
      </div> 
    )
  }
}

class Todolist extends React.Component {
  render() {
    return (
      <ul>
        {this.props.todolist.map((todo, idx) =>
              <li key={idx}>{todo}</li>
        )}
      </ul>
    )
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      todolist: []
    }
  }
  
  newTodo(txt) {
    this.setState({
      todolist: [txt, ...this.state.todolist]
    })
  }
  
  render() {
    return (
      <div>
        <h1>TODOLIST</h1>
        <Todolist todolist={this.state.todolist} />
        <br />
        <Input onAddTodo={this.newTodo.bind(this)} />
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('example')
);

/* Styles go here */