<html>
  <head>
    <title>Title</title>
    <script src="bower_components/react/react.js"></script>
    <script src="bower_components/react/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="app-container"></div>
    <script type="text/jsx">
      var App = React.createClass({
        getInitialState: function() {
          return { message: "" };
        },

        updateMessage: function(e) {
          this.setState({ message: e.target.value });
        },

        render: function() {
          return (
            <div>
              <input type="text" onChange={this.updateMessage} />
              <p>{this.state.message}</p>
            </div>
          );
        }
      });

      React.render(
        <App />,
        document.getElementById('app-container')
      );
    </script>
  </body>
</html>

<html>
  <head>
    <title>Title</title>
    <script src="bower_components/react/react.js"></script>
    <script src="bower_components/react/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="app-container"></div>
    <script type="text/jsx">
      var App = React.createClass({
        getInitialState: function() {
          return { message: "" };
        },

        updateMessage: function(e) {
          this.setState({ message: e.target.value });
        },

        render: function() {
          return (
            <div>
              <input type="text" onChange={this.updateMessage} />
              <Message message={this.state.message} />
            </div>
          );
        }
      });

      var Message = React.createClass({
        render: function() {
          return <p>{this.props.message}</p>;
        }
      });

      React.render(
        <App />,
        document.getElementById('app-container')
      );
    </script>
  </body>
</html>

Make message display part independent component
Make message display part independent component
