bootstrap
Bootstrap3
React

Node.js, Express, sequelize, React で始めるモダン WEB アプリケーション入門(bootstrap番外編)

はじめに

前回のNode.js, Express, sequelize, React で始めるモダン WEB アプリケーション入門(React編)がバックエンド側である Express/Sequelize 編に比べて閲覧数の伸びが大きかったのでフロントエンド側で開発することになれば使う機会が多いと思われる bootstrap を使う方法も記述することにした。

Bootstrap とは

Bootstrap※ はポピュラーな HTML, CSS, and JavaScript フレームワークであり、
レスポンシブデザインを簡単に作成することが出来る。

※ Bootstrap は '18/04/04 現在 v4 が最新安定板ですが、react-bootstrap でが対応しているのが v3 までのためリンクは Bootstrap v3 のページに対して貼っています。

React の View で Bootstrap を利用する方法

Bootstrap は CDN を使うことで簡単に使うことが出来るものの、製品としてリリースする場合は、都度 CDN へアクセスするような使い方はせずに、React コンポーネントをビルドする際に bootstrap もビルドすることになると思われる。

React で Bootstrap を使うための npm パッケージとして React-Bootstrap があるため、今回はそれを利用する。

React-Bootstrapのインストール
> npm install --save react-bootstrap

尚、次の引用部のとおり React-Bootstrap には CSS ファイルがない。

Stylesheets

Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included css. However, some stylesheet is required to use these components. How and which bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.

そこで、bootstrap の CSS ファイルは手動で追加することとする。

Bootstrap_v3のインストール
> npm install --save bootstrap@3

インストールすると、bootstrap の minify された CSS ファイルは bootstrap/dist/css/bootstrap.min.css 配下に設置されるため、このファイルを src/index.js で import すればよい。

これで、例えば boostrap のスタイルが適用された Button を表示したい場合は下記のような JavaScript ファイルを作成することで React-Bootstrap が利用できるようになる。

Bootstrapスタイルのボタン(HelloとBootstrapの2つ)を表示するだけのサンプル(src/index.js)
var React = require('react');
var ReactDOM = require('react-dom');

require('bootstrap/dist/css/bootstrap.css');
var Button = require('react-bootstrap/lib/Button');

class ExpressSampleApp extends React.Component {
  render() {
    return (
      <div>
        <Button>Hello</Button>
        <Button>Bootstrap</Button>
      </div>
    );
  }
}

// DOMのレンダリング処理
//   see. https://reactjs.org/docs/react-dom.html#render
ReactDOM.render(
  <ExpressSampleApp />,            // Appをレンダリングする
  document.getElementById('root')  // id=root要素に対してレンダリングする
);

Bootstrap を使ったサンプル

サンプルコードは GitHub で公開しています。
操作内容のキャプチャは次のとおり。

sample-app.gif

あとがき

Bootstrap 4 が使える reactstrap を使ってみるとよいかもしれません。
細かい UI は作りこんでいないので割愛しています。