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


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

🐠 Merit

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

🎃 Installation

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

$ npm install react-bootstrap --save

🤔 CSSの読み込み

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

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

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

// 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にしたい場合はこちら。

// 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>
);
}

🍣 グリッド、 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!

🏈 参考リンク

📚 おすすめの書籍

🖥 サーバについて

このブログでは「Cloud Garage」さんのDev Assist Program(開発者向けインスタンス無償提供制度)でお借りしたサーバで技術検証しています。 Dev Assist Programは、開発者や開発コミュニティ、スタートアップ企業の方が1GBメモリのインスタンス3台を1年間無料で借りれる心強い制度です!(有償でも1,480円/月と格安)