Edit in JSFiddle

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div class="container">
  <div id="hello">
  </div>
</div>

var Hello = React.createClass({
  propTypes: {
    value: React.PropTypes.string
  },
  
  getDefaultProps: function() {
    return {
      value: "@tercel_s"
    };
  },
  
  getInitialState: function() {
    return {
    	name: this.props.value
    };
  },
  
  // 描画処理
  render: function() {
    return (
      <div>
        <h3>コンポーネント分割の練習</h3>
        <NameInputForm value={this.state.name} 
                       onChange={this.handleChanged} />
        <MessageField name={this.state.name} />
      </div>
    );
  },

  // テキストエリア変更時のイベント処理
  //（子コンポーネントから呼ばれるよ！）
  handleChanged: function(value) {
    this.setState({name: value});
  }
});

// ----------------------------------------
// 子コンポーネント1: テキストエリア
var NameInputForm = React.createClass({
  propTypes: {
    value: React.PropTypes.string.isRequired,
    onChange: React.PropTypes.func.isRequired
  },

  getInitialState: function() {
    return {
    	name: this.props.value
    };
  },
  
  render: function() {
    return (
      <form className="form-inline">
        <div className="form-group">
          <label>お名前：</label> 
          <input name="name" 
                 className="form-control"
                 value={this.state.name} 
                 placeholder="名前を入力してください"
                 onChange={this.handleChange} />
        </div>
      </form>
    );
  },

  handleChange: function(event) {
    var newValue = event.target.value;
    this.setState({name: newValue});
    this.props.onChange(newValue);
  }
});

// ----------------------------------------
// 子コンポーネント2: メッセージ領域
var MessageField = React.createClass({
  propTypes: {
    name: React.PropTypes.string.isRequired
  },
  
  render: function() {
    var name = this.props.name;
    var isEmpty = !name;
    var innerContent = isEmpty ? 
                       <span>名前が入力されていません</span> : 
                       <span>ようこそ {name} さん</span>;
    return (
      <div className={isEmpty ? 
                      'alert alert-warning' : 
                      'alert alert-info'}>
        {innerContent}
      </div>
    );
  }
});  

ReactDOM.render(
  <Hello />,
  document.getElementById('hello')
);