前回→今からはじめる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を表示してみてください。
サンプルソース
コンポーネントごとにファイル分割する。
コンポーネントごとにファイル分割した場合もやることは同じです。
ヘッダ、ボディ、フッタをそれぞれ別のファイルに定義した場合、以下のようになります。
コンポーネント定義のみのファイルになるため、区別しやすくするため拡張子を.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')
);
サンプルソース