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 で別管理しても良さそう。






🐞 Usage

Navigation Bar

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

12} md={8}><code><{'Col xs={12} md={8}'} />code>Col>
6} md={4}><code><{'Col xs={6} md={4}'} />code>Col>
</Row>


<{'Col xs={6} md={4}'} />code>Col>
6} md={4}><code><{'Col xs={6} md={4}'} />code>Col>
4}><code><{'Col xsHidden md={4}'} />code>Col>
</Row>


<{'Col xs={6} xsOffset={6}'} />code>Col>
</Row>


<{'Col md={6} mdPush={6}'} />code>Col>
6} mdPull={6}><code><{'Col md={6} mdPull={6}'} />code>Col>
</Row>
Grid>
);
}
// components/NavigationSample.jsx
import React from 'react';

export NavigationSample class extends React.Component {
render () {
return (

"show-grid">

Layout

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

12} md={8}><code><{'Col xs={12} md={8}'} />code>Col>
6} md={4}><code><{'Col xs={6} md={4}'} />code>Col>
</Row>


<{'Col xs={6} md={4}'} />code>Col>
6} md={4}><code><{'Col xs={6} md={4}'} />code>Col>
4}><code><{'Col xsHidden md={4}'} />code>Col>
</Row>


<{'Col xs={6} xsOffset={6}'} />code>Col>
</Row>


<{'Col md={6} mdPush={6}'} />code>Col>
6} mdPull={6}><code><{'Col md={6} mdPull={6}'} />code>Col>
</Row>
Grid>
);
}
// components/LayoutSample.jsx
import React from 'react';

export LayoutSample class extends React.Component {
render () {
return (

"show-grid">

🤔 グリッド、 Row ColとBootstrap CSSの対応関係

  • =>
  • =>
  • =>
  • =>

🗽 Form要素について

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



id="formControlsText"
type="text"
label="Text"
placeholder="Enter text"
/>

id="formControlsEmail"
type="email"
label="Email address"
placeholder="Enter email"
/>

id="formControlsPassword"
label="Password"
type="password"
/>

id="formControlsFile"
type="file"
label="File"
help="Example block-level help text here."
/>


Checkbox
</Checkbox>

Radio
Radio>



1
</Checkbox>
{' '}

2
Checkbox>
{' '}

3
</Checkbox>
FormGroup>

"radioGroup" inline>

1
</Radio>
{' '}

2
Radio>
{' '}
"radioGroup" inline>

3
</Radio>
FormGroup>

"formControlsSelect">

Select</ControlLabel>


>...</option>

FormControl>
</FormGroup>

Multiple selectControlLabel>
"select" multiple>

>select (multiple)</option>


</FormControl>
FormGroup>

"formControlsTextarea">

Textarea</ControlLabel>
>
</FormGroup>


Static textControlLabel>

email@example.com
</FormControl.Static>
FormGroup>

>

Submit
</Button>
form>

Happy Hacking!

🍣 参考リンク

🖥 VULTRおすすめ

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

📚 おすすめの書籍