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({
  // 初期化処理
  getInitialState: function() {
    return {
    	name: "@tercel_s"
    };
  },
  
  // 描画処理
  render: function() {
    return (
      <div>
        <h3>イベント処理の練習</h3>
        <div>{this.getFormContent()}</div>
        <div>{this.getAlertContent()}</div>
      </div>
    );
  },

  // 入力フォーム
  getFormContent: 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>    
    );
  },
  
  // アラート
  getAlertContent: function() {
    var isEmpty = !this.state.name;
    var innerContent = isEmpty ? 
                       <span>名前が入力されていません</span> : 
                       <span>ようこそ {this.state.name} さん</span>;
    return (
      <div className={isEmpty ? 
                      'alert alert-warning' : 
                      'alert alert-info'}>
        {innerContent}
      </div>
    );
  },
  
  // イベント処理
  handleChange: function(event) {
    var target = event.target;
    var data = {};
    data[target.name] = target.value;
    this.setState(data);
  }
});

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