ocadaruma/index.html

## index.html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8"/>
    <title>TODO</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://fb.me/react-0.14.0.min.js"></script>
    <script src="https://fb.me/react-dom-0.14.0.min.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>

    <script type="text/jsx">
      var App = React.createClass({
        getInitialState: function() {
          return {todos: [], showAll: false};
        },
        onSubmit: function (todoText) {
          var newTodo = {id: this.state.todos.length, todoText: todoText, done: false};
          this.setState({
            todos: this.state.todos.concat([newTodo])
          });
        },
        onChangeShowAll: function (showAll) {
          this.setState({showAll: showAll});
        },
        onClickDone: function (id) {
          var todos = this.state.todos.map(function (t) {
            if (t.id === id) {
              return {id: t.id, todoText: t.todoText, done: true};
            } else {
              return t;
            }
          });

          this.setState({todos: todos});
        },
        render: function() {
          return <div>
            <Form onSubmit={this.onSubmit} />
            <Filter onChangeShowAll={this.onChangeShowAll} showAll={this.state.showAll} />
            <TodoList todos={this.state.todos} showAll={this.state.showAll} onClickDone={this.onClickDone}/>
          </div>;
        }
      });

      var Filter = React.createClass({
        _onChange: function (e) {
          this.props.onChangeShowAll(e.target.checked);
        },
        render: function () {
          return <div>
            <input type="checkbox" onChange={this._onChange} checked={this.props.showAll} />
            SHOW ALL
          </div>
        }
      });

      var Form = React.createClass({
        getInitialState: function () {
          return {todoText: ""}
        },
        _onSubmit: function (e) {
          this.props.onSubmit(this.state.todoText);
          this.setState({todoText: ""})
          e.preventDefault();
        },
        _onChange: function (e) {
          this.setState({todoText: e.target.value})
        },
        render: function() {
          return <form onSubmit={this._onSubmit}>
            <input type="text" placeholder="TODO" value={this.state.todoText} onChange={this._onChange} />
            <button>Add</button>
          </form>;
        }
      });

      var TodoList = React.createClass({
        _onClickDone: function(id) {
          this.props.onClickDone(id);
        },
        render: function() {
          var self = this;
          var list = this.props.todos.map(function(todo) { return <Todo todo={todo} onClickDone={self._onClickDone} /> });
          if (this.props.showAll) {
            return <div>{list}</div>;
          } else {
            return <div>{list.filter(function (todoElem) {
              return todoElem.props.todo.done === false
            })}</div>
          }
        }
      });

      var Todo = React.createClass({
        _onClickDone: function () {
          this.props.onClickDone(this.props.todo.id);
        },
        render: function() {
          return <div>
            {this.props.todo.todoText}
            {this.props.todo.done ? null : <button onClick={this._onClickDone}>DONE</button>}
          </div>
        }
      });

      ReactDOM.render(
          <App />, document.getElementById('app')
      );
    </script>
  </body>
</html>
	<!doctype html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8"/>
	<title>TODO</title>
	</head>
	<body>
	<div id="app"></div>
	<script src="https://fb.me/react-0.14.0.min.js"></script>
	<script src="https://fb.me/react-dom-0.14.0.min.js"></script>
	<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>

	<script type="text/jsx">
	var App = React.createClass({
	getInitialState: function() {
	return {todos: [], showAll: false};
	},
	onSubmit: function (todoText) {
	var newTodo = {id: this.state.todos.length, todoText: todoText, done: false};
	this.setState({
	todos: this.state.todos.concat([newTodo])
	});
	},
	onChangeShowAll: function (showAll) {
	this.setState({showAll: showAll});
	},
	onClickDone: function (id) {
	var todos = this.state.todos.map(function (t) {
	if (t.id === id) {
	return {id: t.id, todoText: t.todoText, done: true};
	} else {
	return t;
	}
	});

	this.setState({todos: todos});
	},
	render: function() {
	return <div>
	<Form onSubmit={this.onSubmit} />
	<Filter onChangeShowAll={this.onChangeShowAll} showAll={this.state.showAll} />
	<TodoList todos={this.state.todos} showAll={this.state.showAll} onClickDone={this.onClickDone}/>
	</div>;
	}
	});

	var Filter = React.createClass({
	_onChange: function (e) {
	this.props.onChangeShowAll(e.target.checked);
	},
	render: function () {
	return <div>
	<input type="checkbox" onChange={this._onChange} checked={this.props.showAll} />
	SHOW ALL
	</div>
	}
	});

	var Form = React.createClass({
	getInitialState: function () {
	return {todoText: ""}
	},
	_onSubmit: function (e) {
	this.props.onSubmit(this.state.todoText);
	this.setState({todoText: ""})
	e.preventDefault();
	},
	_onChange: function (e) {
	this.setState({todoText: e.target.value})
	},
	render: function() {
	return <form onSubmit={this._onSubmit}>
	<input type="text" placeholder="TODO" value={this.state.todoText} onChange={this._onChange} />
	<button>Add</button>
	</form>;
	}
	});

	var TodoList = React.createClass({
	_onClickDone: function(id) {
	this.props.onClickDone(id);
	},
	render: function() {
	var self = this;
	var list = this.props.todos.map(function(todo) { return <Todo todo={todo} onClickDone={self._onClickDone} /> });
	if (this.props.showAll) {
	return <div>{list}</div>;
	} else {
	return <div>{list.filter(function (todoElem) {
	return todoElem.props.todo.done === false
	})}</div>
	}
	}
	});

	var Todo = React.createClass({
	_onClickDone: function () {
	this.props.onClickDone(this.props.todo.id);
	},
	render: function() {
	return <div>
	{this.props.todo.todoText}
	{this.props.todo.done ? null : <button onClick={this._onClickDone}>DONE</button>}
	</div>
	}
	});

	ReactDOM.render(
	<App />, document.getElementById('app')
	);
	</script>
	</body>
	</html>