前回→今からはじめるReact.js〜コンポーネントをまとめる〜
[2016/05/18追記]
上記のソースは執筆時点ではReact0.13をベースに書いていましたので、0.14以降では
今からはじめるReact.js〜React ver0.14〜
で記載のように実装する必要があります。
スタイルを適用する
classNameとstyle
サービスを実装するにあたり、基本的なスタイルを独自に定義することになると思います。
React.jsでは全ページとしては統一感をもったスタイルを適用するとともに、コンポーネントごとにスタイルを指定することができます。
前段階として、
htmlに直接cssを適用する場合、
<button class="btn btn-default"/>
のようにclassを指定する方法が一般的な方法としてあげられますが、
React.jsのJSXで定義する場合、classの代わりに、
<button className="btn btn-default"/>
とclassNameを指定することになります。
また、直接コンポーネントのスタイルを指定したい場合はstyleを指定することもできます。
<button className="btn btn-default" style={{color:"gray"}}/>
のように、{{}}で囲んで指定することになります。
変数で定義しておいて、指定する場合は、
var Component = React.createClass({
render:function(){
var btnstyle = {
color: "red"
};
return (
<button className="btn btn-default" style={btnstyle}/>
);
}
});
のようになります。
JSXの中で、
- 変数
- 真偽値
- 数値
を指定する場合、key={value}のように指定するためです。
実際にソースを書いてみる
以上を踏まえて、実際のソースに適用してみます。
フッタを画面の一番下に固定して表示されるようにしてみます。
それぞれのファイルは以下のように書き換えています。
main.cssファイルをclient/cssに置きます。
html,body{
height:100%;
}
#content{
width: 100%;
position: relative;
min-height: 100%;
}
.main{
padding-bottom:40px; /*フッターの高さと同じ*/
}
footer{
height: 40px;
width: 100%;
position:absolute;
bottom:0;
}
<!DOCTYPE html>
<html>
<head>
<title>tutorial</title>
<meta charset="UTF-8">
<!--main css-->
<link rel="stylesheet" href="css/main.css">//自分で定義したcss
</head>
<body>
<div id="content"></div>
<script src="./build/app.js"></script>
</body>
</html>
var React = require('react');
var Header = require('./views/header.jsx');
var Body = require('./views/body.jsx');
var Footer = require('./views/footer.jsx');
//classNameでcssを指定
var Index = React.createClass({
render:function(){
return (
<div>
<Header/>
<div className="main">
<Body/>
</div>
<Footer/>
</div>
);
}
});
React.render(
<Index />,
document.getElementById('content')
);
var React = require('react');
//ヘッダの定義
var Header = React.createClass({
render: function(){
return (
<header>
<h1>ヘッダです</h1>
<hr/>
</header>
);
}
});
module.exports = Header;
※ヘッダは特に変更することもなかったのですが、便宜上変更しています。
var React = require('react');
//ボディの定義
var Body = React.createClass({
render: function(){
return (
<div style={{textAlign: "center"}}>
<h1>ボディです</h1>
</div>
);
}
});
module.exports = Body;
styleのkeyは上記のようにキャメルケースで記述します。
text-alignと記述してしまうと適用されません。
var React = require('react');
//フッタの定義
var Footer = React.createClass({
render: function(){
return (
<footer style={{textAlign: "center"}}>
<hr/>
<span>フッタです</span>
</footer>
);
}
});
module.exports = Footer;
上記ではfooterタグにcssスタイルが適用されるようにしつつ、直接スタイルも指定しています。