Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

前回→今からはじめる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〜

kuniken
React,Nodejs,Salesforceをよく使ってます。 ーー エンジニア募集中です! https://paiza.jp/career/job_offers/5412 システムに関するご相談はこちらより承っております。 https://solutionware.jp/contact.html
https://solutionware.jp/blog/category/kunitak/
solutionware
WEBサービスの開発・運営を通じてお客様の生産性向上を実現します
https://solutionware.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away