※この記事は http://qiita.com/kuniken/items/c0f5ed06695ce52d4854 で投稿した内容と同じものです。 前回→今からはじめるReact.js〜初めてのコンポーネント〜

複数のコンポーネントを一つにまとめる

前回でも述べましたが、コンポーネントは最終的に一つにまとめてあげる必要があります。 ヘッダ、ボディ、フッタとコンポーネントを作成した場合を例に、ソースを書いてみます。 index.jsを以下のように書き換えます。

var React = require('react');

//ヘッダの定義
var Header = React.createClass({
  render: function(){
    return (
      <h1>ヘッダです</h1>
    );
  }
});

//ボディの定義
var Body = React.createClass({
  render: function(){
    return (
      <h1>ボディです</h1>
    );
  }
});

//フッタの定義
var Footer = React.createClass({
  render: function(){
    return (
      <h1>フッタです</h1>
    );
  }
});

//コンポーネントを一つにまとめる
var Index = React.createClass({
  render:function(){
    return (
      <div>
        <Header/>
        <hr/>
        <Body/>
        <hr/>
        <Footer/>
      </div>
    );
  }
});

React.render(
  <Index />,
  document.getElementById('content')
);

上記の例では、 ヘッダ、ボディ、フッタコンポーネントを定義し、Indexコンポーネントとして一つにまとめています。 作成したら、前回同様、コンパイルしてブラウザでindex.htmlを表示してみてください。

サンプルソース

https://github.com/kunitak/react-tutorial/tree/day2-1

コンポーネントごとにファイル分割する。

コンポーネントごとにファイル分割した場合もやることは同じです。 ヘッダ、ボディ、フッタをそれぞれ別のファイルに定義した場合、以下のようになります。 コンポーネント定義のみのファイルになるため、区別しやすくするため拡張子を.jsxとしときます。 ファイル名はheader.jsxとして、client/scripts/views以下に置くことにします。

var React = require('react');

//ヘッダの定義
var Header = React.createClass({
  render: function(){
    return (
      <h1>ヘッダです</h1>
    );
  }
});

module.exports = Header;

ボディ、フッターはヘッダと同様に書けばいいのでここでは割愛します。 他のファイルからHeaderコンポーネントを利用できるように、 module.exports = Header; を忘れずに書きます。 それぞれファイルが作成できたら、index.jsでインポートします。 以下のようになります。

var React = require('react');
var Header = require('./views/header.jsx');//ヘッダをインポート
var Body = require('./views/body.jsx');//ボディをインポート
var Footer = require('./views/footer.jsx');//フッタをインポート

//コンポーネントを一つにまとめる
var Index = React.createClass({
  render:function(){
    return (
      <div>
        <Header/>
        <hr/>
        <Body/>
        <hr/>
        <Footer/>
      </div>
    );
  }
});

React.render(
  <Index />,
  document.getElementById('content')
);

サンプルソース

https://github.com/kunitak/react-tutorial/tree/day2-2 次回→今からはじめるReact.js〜スタイルの適用〜