backbone.js

var TodoApp = Backbone.View.extend({
  template: Handlebars.compile(
    '<div>\
      <h3>TODO</h3>\
      {{#each items}}\
        {{ this }}\
      {{/each}}\
      <form>\
        <input value="{{ text }}">\
        <button>Add #{{ items.length }}</button>\
      </form>\
    </div>'
  ),
  events: {
    'submit form': 'handleSubmit',
    'change input': 'onChange'
  },
  initialize: function() {
    this.items = [ ];
    this.text = '';
  },
  onChange: function(e) {
    this.text = e.target.value;
    this.render();
  },
  handleSubmit: function(e) {
    e.preventDefault();
    this.items = this.items.concat([this.text]);
    this.text = '';
    this.render();
  },
  render: function() {
    this.$el.html(this.template(this));
  }
});

var app = new TodoApp();
app.render({ el: 'body' });

react.js

var $R = React.createElement;

var TodoList = React.createClass({displayName: 'TodoList',
  render: function() {
    return $R("ul", null, this.props.items.map(function(itemText) {
      return $R("li", null, itemText);
    }));
  }
});
var TodoApp = React.createClass({displayName: 'TodoApp',
  getInitialState: function() {
    return {items: [], text: ''};
  },
  onChange: function(e) {
    this.setState({text: e.target.value});
  },
  handleSubmit: function(e) {
    e.preventDefault();
    var nextItems = this.state.items.concat([this.state.text]);
    var nextText = '';
    this.setState({items: nextItems, text: nextText});
  },
  render: function() {
    return (
      $R("div", null,
        $R("h3", null, "TODO"),
        $R(TodoList, {items: this.state.items}),
        $R("form", {onSubmit: this.handleSubmit},
          $R("input", {onChange: this.onChange, value: this.state.text}),
          $R("button", null, 'Add #' + (this.state.items.length + 1))
        )
      )
    );
  }
});

React.render($R(TodoApp, null), mountNode);

react.jsx

var TodoList = React.createClass({
  render: function() {
    var createItem = function(itemText) {
      return <li>{itemText}</li>;
    };
    return <ul>{this.props.items.map(createItem)}</ul>;
  }
});
var TodoApp = React.createClass({
  getInitialState: function() {
    return {items: [], text: ''};
  },
  onChange: function(e) {
    this.setState({text: e.target.value});
  },
  handleSubmit: function(e) {
    e.preventDefault();
    var nextItems = this.state.items.concat([this.state.text]);
    var nextText = '';
    this.setState({items: nextItems, text: nextText});
  },
  render: function() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <input onChange={this.onChange} value={this.state.text} />
          <button>{'Add #' + (this.state.items.length + 1)}</button>
        </form>
      </div>
    );
  }
});

React.render(<TodoApp />, mountNode);