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

🚕 Form要素について

react-bootstrapのformを使うとBootsrapらしいHTML構造に変換してくれます。

<form>
<FieldGroup
id="formControlsText"
type="text"
label="Text"
placeholder="Enter text"
/>
<FieldGroup
id="formControlsEmail"
type="email"
label="Email address"
placeholder="Enter email"
/>
<FieldGroup
id="formControlsPassword"
label="Password"
type="password"
/>
<FieldGroup
id="formControlsFile"
type="file"
label="File"
help="Example block-level help text here."
/>
<Checkbox checked readOnly>
Checkbox
</Checkbox>
<Radio checked readOnly>
Radio
</Radio>
<FormGroup>
<Checkbox inline>
1
</Checkbox>
{' '}
<Checkbox inline>
2
</Checkbox>
{' '}
<Checkbox inline>
3
</Checkbox>
</FormGroup>
<FormGroup>
<Radio name="radioGroup" inline>
1
</Radio>
{' '}
<Radio name="radioGroup" inline>
2
</Radio>
{' '}
<Radio name="radioGroup" inline>
3
</Radio>
</FormGroup>
<FormGroup controlId="formControlsSelect">
<ControlLabel>Select</ControlLabel>
<FormControl componentClass="select" placeholder="select">
<option value="select">select</option>
<option value="other">...</option>
</FormControl>
</FormGroup>
<FormGroup controlId="formControlsSelectMultiple">
<ControlLabel>Multiple select</ControlLabel>
<FormControl componentClass="select" multiple>
<option value="select">select (multiple)</option>
<option value="other">...</option>
</FormControl>
</FormGroup>
<FormGroup controlId="formControlsTextarea">
<ControlLabel>Textarea</ControlLabel>
<FormControl componentClass="textarea" placeholder="textarea" />
</FormGroup>
<FormGroup>
<ControlLabel>Static text</ControlLabel>
<FormControl.Static>
email@example.com
</FormControl.Static>
</FormGroup>
<Button type="submit">
Submit
</Button>
</form>

Happy Hacking!

🗻 参考リンク

🖥 VULTRおすすめ

VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります!

📚 おすすめの書籍