Edit in JSFiddle

let user = {name: '@tercel_s'};

const App = () => 
  <div>
    <SectionTitle />
    <NameInputForm val={user.name} />
    <MessageField  name={user.name} />
  </div>;

// ----------------------------------------
// セクションのタイトル
const SectionTitle = () => <h3>コンポーネント分割の練習</h3>;

// ----------------------------------------
// テキストエリア
const NameInputForm = props =>
  <form className="form-inline">
    <div className="form-group">
      <label>お名前：</label> 
        <input name="name" 
               className="form-control"
               value={props.val} 
               placeholder="名前を入力してください"
               onChange={e => changed(e.target.value)} />
      </div>
    </form>;

// ----------------------------------------
// メッセージ領域
var MessageField = props => 
  <div className={isBlank() ? 'alert alert-warning' : 
                              'alert alert-info'}>
    {isBlank() ? <span>名前が入力されていません</span> : 
                 <span>ようこそ {props.name} さん</span>}
  </div>;

// イベント
const changed = newValue => {
  user.name = newValue || '';
  render();
}

const isBlank = () => !user.name;
const render = () =>
  ReactDOM.render(<App />,document.getElementById('app'));

render();

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