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

前回→[今からはじめるReact.js〜コンポーネントをまとめる〜](http://qiita.com/kuniken/items/c0f5ed06695ce52d4854)

[2016/05/18追記]
上記のソースは執筆時点ではReact0.13をベースに書いていましたので、0.14以降では
[今からはじめるReact.js〜React ver0.14〜](http://qiita.com/kuniken/items/2fc5b782da5d302247ab)
で記載のように実装する必要があります。


# スタイルを適用する
## 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"}}/>`
のように、{{}}で囲んで指定することになります。
変数で定義しておいて、指定する場合は、

```jsx
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に置きます。

```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;
}
```

```html: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>
```

```jsx: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')
);
```

```jsx:header.jsx
var React = require('react');

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

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

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

```jsx: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〜](http://qiita.com/kuniken/items/2fc5b782da5d302247ab)