index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-9>
  <title>First Component</title>
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <!-- container node -->
  <div id="app"></div>

  <script src="http://fb.me/react-0.12.2.js"></script>
  <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
  <script type="text/jsx">
    /** @jsx React.DOM */

    var MessageBox = React.createClass({

      handleAdd: function(e){
        console.log(this); 
        var newMessage = this.refs.newMessage.getDOMNode().value;
        var newMessages = this.state.messages.concat([newMessage]);
        this.setState({
          messages: newMessages
        });
      },

      getInitialState: function() {
        return {
          isVisible: true,
          messages: [
          'I like the world',
          'Coffee flavored ice cream is highly underrated',
          'My spoon is too big',
          'Tuesday is coming. Did you bring your coat?',
          'I am a banana'
          ]
        }
      },

      render: function() {

        var inlineStyles = {
          display: this.state.isVisible ? 'block' : 'none'
        };

        var messages = this.state.messages.map(function(message) {
          return <SubMessage message={message} />
        })

        return (
          <div className="container jumbotron" style={inlineStyles}>
            <h2>Hello, World</h2>
            <input ref="newMessage" type="text" />
            <button className="btn btn-primary" onClick={this.handleAdd}>Add</button>
            { messages }
          </div>
        );
      }
    });

    var SubMessage = React.createClass({
      handleDelete: function(e) {

      },

      propTypes: function() {
        message: React.PropTypes.string.isRequired
      },

      getDefaultProps: function () {
        return {
          message: "Its good to see you"
        }
      },

      render: function() {
        return (
          <div>{this.props.message}</div>
        )
      }
    });

    var reactComponent = React.render(
      <MessageBox />,
      document.getElementById('app'),
      function after() {
        console.log('hai after render!');
      }
    )

  </script>
</body>
</html>