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のヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります！

📚 おすすめの書籍