Sample React todo app without LinkState()

react-todo-app.jsx

/** @jsx React.DOM */

var TodoAdd = React.createClass({displayName: 'TodoAdd',
  getInitialState: function() {
    return { text: '' };
  },
  changeText: function(e) {
    this.setState({ text: e.target.value });
    e.preventDefault();
  },
  cleanText: function() {
    this.setState({ text: '' });
  },
  render: function() {
    return (
      React.DOM.form(null, 
        React.DOM.input({type: "text", value: this.state.text, onChange: this.changeText}), 
        React.DOM.button({type: "submit", onClick: this.props.onSubmit}, 
          "Add"
        )
      )
    );
  }
});

var Todo = React.createClass({displayName: 'Todo',
  getInitialState: function() {
    return {
      todos: []
    }
  },
  addTodo: function(e) {
    var todoAdd = this.refs.todoAdd;
    var newTodo = { text: todoAdd.state.text };
    
    this.setState({
      todos: this.state.todos.concat([newTodo])
    });
    
    todoAdd.cleanText();
    e.preventDefault();
  },
  removeTodo: function(e) {
    var el = e.target;
    var todos = this.state.todos;
    var text = el.previousSibling.textContent;
    
    todos.forEach(function(todo, i) {
      if (todo.text === text) {
        todos.splice(i, 1);
      }
    });
    
    this.setState({ todos: todos });
    e.preventDefault();
  },
  render: function() {
    var todoItems = this.state.todos.map(function(todo, i) {
      return (
        React.DOM.li({key: i}, 
          React.DOM.span(null, todo.text), 
          React.DOM.button({type: "button", onClick: this.removeTodo}, "×")
        )
      );
    }.bind(this));
  
    return (
      React.DOM.div(null, 
        TodoAdd({ref: "todoAdd", onSubmit: this.addTodo}), 
        React.DOM.ul(null, todoItems)
      )
    );
  }
});

React.renderComponent(Todo(null), document.querySelector('#app'));