ryanbrunner/todo_app.js

## todo_app.js
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
	<div id='todo'></div>

	<script type='text/jsx'>
		var Todo = React.createClass({
			render: function() {
				return <li>
					<input type='checkbox' checked={ this.props.todo.completed } onChange={ this.toggleCompleted } />
					{ this.props.todo.name }
				</li>;
			},

			toggleCompleted: function(e) {
				this.props.onCompletedChanged(this.props.id, e.target.checked);
			}
		});

		var TodoApp = React.createClass({
			getInitialState: function() {
				return {
					todos: [
						{ completed: false, name: "Mow the lawn" },
						{ completed: true, name: "Pick up laundry" }
					]
				};
			},

			render: function() {
				var todoChanged = this.todoChanged;

				return <div>
					<h2>My todo App</h2>

					<div>
						You have { this.state.todos.length } todos.
					</div>
					<ul>
						{ this.state.todos.map(function(todo, i) {
							return <Todo todo={ todo } id={ i }onCompletedChanged={ todoChanged } />;
						})}
					</ul>
					<div>
						<input type='text' ref='newtodo' placeholder='Add a todo' />
						<button onClick={ this.addTodo }>Add</button>
					</div>
				</div>
			},

			todoChanged: function(index, isCompleted) {
				var todos = this.state.todos;
				todos[index].completed = isCompleted;
				this.setState({ todos: todos });
			},

			addTodo: function(e) {
				var text = this.refs.newtodo.getDOMNode();
				var newTodo = { completed: false, name: text.value };
				this.setState({ todos: this.state.todos.concat(newTodo)});
			},

			changeState: function(newState) {
				window.localStorage["todos"]
			}
		});

		React.render(<TodoApp />, document.getElementById("todo"))
	</script>


</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
	</head>
	<body>
	<div id='todo'></div>

	<script type='text/jsx'>
	var Todo = React.createClass({
	render: function() {
	return <li>
	<input type='checkbox' checked={ this.props.todo.completed } onChange={ this.toggleCompleted } />
	{ this.props.todo.name }
	</li>;
	},

	toggleCompleted: function(e) {
	this.props.onCompletedChanged(this.props.id, e.target.checked);
	}
	});

	var TodoApp = React.createClass({
	getInitialState: function() {
	return {
	todos: [
	{ completed: false, name: "Mow the lawn" },
	{ completed: true, name: "Pick up laundry" }
	]
	};
	},

	render: function() {
	var todoChanged = this.todoChanged;

	return <div>
	<h2>My todo App</h2>

	<div>
	You have { this.state.todos.length } todos.
	</div>
	<ul>
	{ this.state.todos.map(function(todo, i) {
	return <Todo todo={ todo } id={ i }onCompletedChanged={ todoChanged } />;
	})}
	</ul>
	<div>
	<input type='text' ref='newtodo' placeholder='Add a todo' />
	<button onClick={ this.addTodo }>Add</button>
	</div>
	</div>
	},

	todoChanged: function(index, isCompleted) {
	var todos = this.state.todos;
	todos[index].completed = isCompleted;
	this.setState({ todos: todos });
	},

	addTodo: function(e) {
	var text = this.refs.newtodo.getDOMNode();
	var newTodo = { completed: false, name: text.value };
	this.setState({ todos: this.state.todos.concat(newTodo)});
	},

	changeState: function(newState) {
	window.localStorage["todos"]
	}
	});

	React.render(<TodoApp />, document.getElementById("todo"))
	</script>


	</body>
	</html>