/** @jsx React.DOM */
var HelloMessage = React.createClass({
    render: function() {
        return <div>{'Hello ' + this.props.name}</div>;
    }
});

React.renderComponent(
    <HelloMessage name="John" />,
    document.getElementById('myapp')
);
          

var HelloMessage = React.createClass(
    render: function() {
        return React.DOM.div(null, 'Hello ' + this.props.name);
    }
});

React.renderComponent(
    HelloMessage( {name:"John"} ),
    document.getElementById('myapp')
);
          

/** @jsx React.DOM */
var TodoList = React.createClass({
    render: function() {
        return
            <ul>
            {this.props.items.map(function(itemText) {
                return <li>{itemText}</li>;
            })}
            </ul>;
    }
});
          

/** @jsx React.DOM */
var TodoApp = React.createClass({
  onChange: function(e) {
    this.setState({text: e.target.value});
  },
  onSubmit: function(e) { ... },
  render: function() {
    return (
      <div>
        <TodoList items={this.state.items} />
        <form onSubmit={this.onSubmit}>
          <input onChange={this.onChange}
                    value={this.state.text} />
          <button>
              {'Add #' + (this.state.items.length + 1)}
          </button>
        </form>
      </div>
    );
  }
});