Edited at

今からはじめるReact.js〜スタイルの適用〜

前回→今からはじめる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に置きます。


main.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;
}


index.html

<!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>


index.js

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')
);



header.jsx

var React = require('react');

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

module.exports = Header;


※ヘッダは特に変更することもなかったのですが、便宜上変更しています。


body.jsx

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と記述してしまうと適用されません。


footer.jsx

var React = require('react');

//フッタの定義
var Footer = React.createClass({
render: function(){
return (
<footer style={{textAlign: "center"}}>
<hr/>
<span>フッタです</span>
</footer>
);
}
});

module.exports = Footer;


上記ではfooterタグにcssスタイルが適用されるようにしつつ、直接スタイルも指定しています。


サンプルソース

https://github.com/kunitak/react-tutorial/tree/day3

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