第2回 簡単なReact.jsの使い方 （3/8）

３）シンプルなコンポーネントを作る

それでは、JSX を使ってコンポーネントを作ってみましょう。

まずは一番簡単な例です。Hello Worldと描画するコンポーネントを作成します。src/main/jsx/client.jsxを以下のように書き換えてください。

var React = require('react');
var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello World</div>;
  }
});
 
React.render(<HelloMessage/>, document.getElementById('react-container'));

その後、テンプレートのルートディレクトリで、gulpと実行してください。

gulp

ブラウザでhttp://localhost:8080にアクセスすると、Hello Worldが表示されます。

次に、もう少し複雑なテーブルを表示してみましょう。 src/main/jsx/client.jsxを以下のように書き換えてください。

var React = require('react');
var HelloMessage = React.createClass({
  render: function() {
    return (
      <table>
        <tr>
          <th>ビルドツール</th>
          <th>モジュールバンドラー</th>
        </tr>
        <tr>
          <td>gulp</td>
          <td>webpack</td>
        </tr>
        <tr>
          <td>Grunt</td>
          <td>browserify</td>
        </tr>
      </table>
    );
  }
});
 
React.render(<HelloMessage/>, document.getElementById('react-container'));

先ほどのgulpコマンドをCTRL + cで停止していなければ、すでにブラウザがリロードされ、下のような表示になっています。

ここまでくれば、なんとなくJSX の動作はわかってきたのではないでしょうか。React.createClassを利用してコンポーネントを定義し、React.renderを利用して定義したクラスを描画します。

なお、テンプレートで定義しているgulpは次のことを行ってくれます。

• 起動時
  • JSX のコンパイル
  • 開発用のHTTPサーバの起動(8080でListen)
• ソースコードが変更された時
  • JSX の再コンパイル
  • ブラウザのリロード

また、renderメソッドを作成する際、renderメソッドの戻り値は必ず一つの要素でなければいけません。つまり

return (
  <div>Hello World</div>;
  <div>Hello World</div>;
);

とすることはできません。代わりにdivタグで包んで下記のようにする必要があります。

return (
  <div>
    <div>Hello World</div>;
    <div>Hello World</div>;
  </div>
);