app.html



<html>
<head>
  <script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://npmcdn.com/react-router/umd/ReactRouter.min.js"></script>

<style>

.header {
  background-color: green;
  padding:5px;
  color:white;
}

.menu {
  list-style-type: none;

}

.menu li {
  padding:5px;
  display:inline;
  margin:5px;

}

.content {
  background-color: pink;
  width:100%;
  height:100%;
}

.active {
  background-color: #0099FF;
}

.taskItemsContainer {
  list-style: none;
}

.taskItemsContainer li {
  background-color: pink;
  color:white;
  padding:10;
  margin:5;
}

.todoListContainer {
  background-color: orange;
  height:200px;
  width:200px;
}

</style>

</head>

<body>

  <div id="container"></div>

  <script type="text/babel">

  var container = document.querySelector("#container");

  var TodoList = React.createClass({

      getInitialState: function() {
        return {
          tasks :[]
        }
      },

      addTask : function() {

         var tasks = this.state.tasks;
         tasks.push({
           title: this._inputElement.value,
           key:Date.now()
         });

         this.setState({
           tasks : tasks
         });

         this._inputElement.value = ""

      },

      render: function() {
        return (
          <div className="todoListContainer">
          <input ref={(a) => this._inputElement = a} type="text"/>
          <button onClick={this.addTask}>Add</button>
          <TodoListItems tasks={this.state.tasks} />
          </div>
        )
      }

  });

  var TodoListItems = React.createClass({

      render: function() {

        function createTaskItem(task) {
          return <li key={task.key}>{task.title}</li>
        }

        var tasks = this.props.tasks;
        var taskItemList = tasks.map(createTaskItem);

        return (
          <div>
          <ul className="taskItemsContainer">
          {taskItemList}
          </ul>
          </div>
        )
      }
  });

  ReactDOM.render(
    <TodoList />,
    container
  )


  </script>

</body>

</html>