Bootstrap のコンポーネントを React で使えるようにした react-bootstrap を使ってみました。

インストール

$ npm install -g browserify
$ npm install -D babelify babel-preset-es2015 babel-preset-react
$ npm install -S react react-bootstrap react-dom

ボタン

基本のボタンから。

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<div id="app"></div>
<script src="bundle.js"></script>
// a.js

import React from 'react';
import { Button } from 'react-bootstrap';
import { render } from 'react-dom';

class App extends React.Component {
    render() {
        return <div>
            <Button>{'Button'}</Button>
        </div>;
    }
}

render(<App />, document.querySelector('#app'));

Browserify でビルドして HTML を開けば Bootstrap のボタンが表示されることが確認できます。

$ browserify -t [ babelify --presets es2015 --presets react ] -o bundle.js a.js

ドロップダウン

ボタンをクリックしたらドロップダウンが出るようにしてみます。

import { DropdownButton, MenuItem } from 'react-bootstrap';

<DropdownButton title="Dropdown">
    <MenuItem>{'Item 1'}</MenuItem>
    <MenuItem>{'Item 2'}</MenuItem>
    <MenuItem>{'Item 3'}</MenuItem>
</DropdownButton>

<DropdownButton> と <MenuItem> でドロップダウンの出るボタンが作れます。

素の Bootstrap だと要素もたくさん必要ですし、どの要素にどのクラスとどの属性を書けばいいのかわかりづらくなりがちなので、大分楽になるのではないでしょうか。

フォーム

フォームのコントロールのためのコンポーネント含まれています。

import { Input } from 'react-bootstrap';

<Input type="text" label="Text" placeholder="text" />

これだけで <div class="form-group"> <label> <input> タグすべて作ってくれます。

<select> 要素は <Input type="select"> で作れるようです。

import { Input } from 'react-bootstrap';

<Input type="select" label="Select" value={2}>
    <option value={1}>One</option>
    <option value={2}>Two</option>
    <option value={3}>Three</option>
</Input>

アドオンは属性を通してつけることができるみたいです。

import { Input, Glyphicon } from 'react-bootstrap';

<Input type="number" addonBefore="@" />
<Input type="number" addonBefore={<Glyphicon glyph="pencil" />} addonAfter=".0" />
<Input type="text" buttonAfter={<Button>Go</Button>} />

サイズと色

Bootstap の *-lg *-sm や *-danger *-warn *-success のようなクラスは bsSize と bsStyle という属性から指定できるみたいです。

import { Input } from 'react-bootstrap';

<Input type="text" label="A" value="a" bsSize="lg" bsStyle="success" />
<Input type="text" label="A" value="a" bsSize="lg" bsStyle="info" />

さいごに

Bootstrap のクラスを直接使うのではなく、このようなコンポーネントを使うと、本質的な部分だけ記述できていい感じがします。特にフォーム周りはかなりコード量を減らせそうです。

ここには書かなかった要素も大量にあって React + Bootstrap な開発をかなり助けてくれそうです。