Edited at

今からはじめるReact.js〜コンポーネントをまとめる〜

More than 3 years have passed since last update.

前回→今からはじめるReact.js〜初めてのコンポーネント〜

[2016/05/18追記]

当記事のソースは執筆時点ではReact0.13をベースに書いていましたので、0.14以降では

今からはじめるReact.js〜React ver0.14〜

で記載のように実装する必要があります。


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

前回でも述べましたが、コンポーネントは最終的に一つにまとめてあげる必要があります。

ヘッダ、ボディ、フッタとコンポーネントを作成した場合を例に、ソースを書いてみます。

index.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としときます。

ファイルはclient/scripts/views以下に置くことにします。


header.jsx

var React = require('react');

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

module.exports = Header;


ボディ、フッターはヘッダと同様に書けばいいのでここでは割愛します。

他のファイルからHeaderコンポーネントを利用できるように、

module.exports = Header;

を忘れずに書きます。

それぞれファイルが作成できたら、index.jsでインポートします。

以下のようになります。


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〜スタイルの適用〜