React Todos

Starting point for creating JSFiddles with React. This uses React with Addons.

by Tyler Brown

HTML

<script src="http://fb.me/JSXTransformer-0.13.0.js"></script>
<script src="http://fb.me/react-with-addons-0.13.0.js"></script>
<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div id="main"></div>

CSS

#main {
    width: 500px; height: 500px;
    border:1px solid red;
    padding: 12px;
}

JavaScript 1.7

var TodoList = React.createClass({
    getInitialState: function() {
        return {
            todos: ['Lorem', 'Ipsum']
        }
    },
    addTodo: function(newTodo) {
        var newTodos = this.state.todos.concat([newTodo]);
        this.setState({todos: newTodos});
    },
    render: function() {
        return (
            <div id="todo-list">
                <h3>Todo List</h3>
                <TLAddForm addTodo={this.addTodo} />
                <TLItems todos={this.state.todos} />
            </div>
        );
    }
});

var TLAddForm = React.createClass({
    addTodo: function(e) {
        e.preventDefault();
        var txtNewTodoEl = this.refs.txtNewTodo.getDOMNode();
        var newTodo = txtNewTodoEl.value;
        txtNewTodoEl.value = '';
        this.props.addTodo(newTodo);
    },
    render: function() {
        return (
            <form onSubmit={this.addTodo}>
                <input type="text" placeholder="New Todo..." ref="txtNewTodo" />
                <input type="submit" value="Add" />
            </form>
        );
    }
});

var TLItems = React.createClass({
    render: function() {
        return (
            <ul>
                {this.props.todos.map(function(todo) {
                    return <li>{todo}</li>;
                })}
            </ul>
        );
    }
});


var mainEl = document.getElementById('main');
React.render(<TodoList />, mainEl);