酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

React-bootstrap で書くとコンポーネント的に Bootstrap が使えるよ!

React-Bootstrap は React.js のコンポーネントとして Bootstrap を扱うことができるライブラリです。 これを使うことでBootstrapのCSSではなく、React.js のコンポーネントを組み合わせる感覚でコードを構築する事ができます。また、全体のコードが明瞭になるのでメンテナンスコストも抑えられそうです!


Merit

  • 全体のコードが明瞭になる
  • BootstrapのCSSを覚える必要がなく、設定で変更が簡単にできる
  • ModalなどJSを組み合わせる場合もコンポーネントとして扱える

Installation

ライブラリのインストール手順です。

1
$ npm install react-bootstrap --save

CSSの読み込み

CSS自体は同梱していないようなので、別途読み込む。 好きなテーマを使えるのでこれは助かるかも。 npm で別管理しても良さそう。

1
2
3
4
5
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">

Usage

Navigation Bar

いつものナビゲーションバーはこんなコードになります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// components/NavigationSample.jsx
import React from 'react';

export NavigationSample class extends React.Component {
  render () {
    return (
      <Grid>
        <Row className="show-grid">
          <Col xs={12} md={8}><code>&lt;{'Col xs={12} md={8}'} /&gt;</code></Col>
          <Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
        </Row>

        <Row className="show-grid">
          <Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
          <Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
          <Col xsHidden md={4}><code>&lt;{'Col xsHidden md={4}'} /&gt;</code></Col>
        </Row>

        <Row className="show-grid">
          <Col xs={6} xsOffset={6}><code>&lt;{'Col xs={6} xsOffset={6}'} /&gt;</code></Col>
        </Row>

        <Row className="show-grid">
          <Col md={6} mdPush={6}><code>&lt;{'Col md={6} mdPush={6}'} /&gt;</code></Col>
          <Col md={6} mdPull={6}><code>&lt;{'Col md={6} mdPull={6}'} /&gt;</code></Col>
        </Row>
      </Grid>
    );
}

Layout

例えば上のような Layout にしたい場合はこちら。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// components/LayoutSample.jsx
import React from 'react';

export LayoutSample class extends React.Component {
  render () {
    return (
      <Grid>
        <Row className="show-grid">
          <Col xs={12} md={8}><code>&lt;{'Col xs={12} md={8}'} /&gt;</code></Col>
          <Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
        </Row>

        <Row className="show-grid">
          <Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
          <Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
          <Col xsHidden md={4}><code>&lt;{'Col xsHidden md={4}'} /&gt;</code></Col>
        </Row>

        <Row className="show-grid">
          <Col xs={6} xsOffset={6}><code>&lt;{'Col xs={6} xsOffset={6}'} /&gt;</code></Col>
        </Row>

        <Row className="show-grid">
          <Col md={6} mdPush={6}><code>&lt;{'Col md={6} mdPush={6}'} /&gt;</code></Col>
          <Col md={6} mdPull={6}><code>&lt;{'Col md={6} mdPull={6}'} /&gt;</code></Col>
        </Row>
      </Grid>
    );
}

Grid, Row Col と Bootstrap CSSの対応関係

  • <Col xs={12} md={4}> => <div class="col-md-4 col-xs-12">
  • <Row> => <div class="row">
  • <Grid> => <div class="container">
  • <Button> => <button type="button" class="btn">

Happy Hacking!

Special Thanks

おすすめの書籍