概要

React Bootstrapをプロジェクトに含める方法を学びましょう。

インストール

React-Bootstrapを利用する最適な方法は、npm（またはyarn）を使用してインストールできるnpmパッケージを経由することです。

Bootstrap Sassファイルをカスタマイズする場合、またはスタイルシートにCDNを使用しない場合は、vanilla Bootstrapもインストールすると役立つ場合があります。

npm install react-bootstrap bootstrap

コンポーネントのインポート

ライブラリ全体ではなく、react-bootstrap/Buttonのように個々のコンポーネントをインポートする必要があります。そうすることで、使用する特定のコンポーネントのみが取り込まれ、クライアントに送信するコード量を大幅に削減できます。

import Button from 'react-bootstrap/Button';

// or less ideally
import { Button } from 'react-bootstrap';

ブラウザグローバル

window.ReactBootstrapオブジェクトにすべてのコンポーネントがエクスポートされたreact-bootstrap.jsおよびreact-bootstrap.min.jsバンドルを提供しています。これらのバンドルはjsDelivrおよびnpmパッケージで利用可能です。

<script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin></script>

<script
  src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"
  crossorigin></script>

<script
  src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js"
  crossorigin></script>

<script>var Alert = ReactBootstrap.Alert;</script>

例

React-Bootstrapは、いくつかの基本的なCodeSandboxの例を含むリポジトリを開始しました。こちらをクリックして確認してください。

スタイルシート

React-BootstrapはBootstrapの正確なバージョンに依存していないため、CSSは含まれていません。ただし、これらのコンポーネントを使用するには、いくつかのスタイルシートが必要です。

CSS

{
  /* The following line can be included in your src/index.js or App.js file */
}
import 'bootstrap/dist/css/bootstrap.min.css';

Bootstrapのスタイルを含める方法やどれを含めるかはユーザー次第ですが、最も簡単な方法はCDNから最新のスタイルを含めることです。CDNを使用するメリットに関する詳細については、こちらをご覧ください。

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
  integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
  crossorigin="anonymous"
/>

Sass

Sassを使用している場合、最も簡単な方法は、BootstrapのソースSassファイルをメインのSassファイルに含めてから、src/index.jsまたはApp.jsファイルでそれを要求することです。これは、一般的なcreate-react-appアプリケーションに適用されます。その他のユースケースでは、Sass/SCSSスタイルシートをCSSにコンパイルするために、選択したバンドラーをセットアップする必要がある場合があります。

/* The following line can be included in a src/App.scss */
@import '~bootstrap/scss/bootstrap';

/* The following line can be included in your src/index.js or App.js file */
import './App.scss';

Bootstrapのカスタマイズ

BootstrapのテーマやBootstrapの変数をカスタマイズする場合は、カスタムSassファイルを作成できます。

/* The following block can be included in a custom.scss */

/* make the customizations */
$theme-colors: (
  'info': tomato,
  'danger': teal
);

/* import bootstrap to set changes */
@import '~bootstrap/scss/bootstrap';

...そして、それをメインのSassファイルにインポートします。

/* The following line can be included in a src/App.scss */
@import 'custom';

高度な使用法

スタイルシートのカスタマイズに関する詳細なユースケースと詳細については、Bootstrapドキュメントを参照してください。

`as` Prop API

特定のReact-Bootstrapコンポーネントでは、レンダリングされるコンポーネントまたはHTMLタグを変更する必要がある場合があります。

特定のReact-Bootstrapコンポーネントのすべてのスタイルを保持しながら、最終的にレンダリングされるコンポーネント（別のReact-Bootstrapコンポーネント、別のカスタムコンポーネント、または別のHTMLタグ）を切り替えたい場合は、aspropを使用してそれを行うことができます。

以下の例では、Buttonコンポーネントのaspropにアンカーを渡しています。これにより、最終的にはaタグがレンダリングされますが、Buttonコンポーネントと同じスタイルになります。

結果

読み込み中...

ライブエディター

<Stack direction="horizontal" gap={2}>
  <Button as="a" variant="primary">
    Button as link
  </Button>
  <Button as="a" variant="success">
    Button as link
  </Button>
</Stack>;

<Stack direction="horizontal" gap={2}>
  <Button as="a" variant="primary">
    Button as link
  </Button>
  <Button as="a" variant="success">
    Button as link
  </Button>
</Stack>;

以下は、React Bootstrapコンポーネントを渡す例です。BadgeコンポーネントとButtonコンポーネントが含まれており、aspropに提供されています。これにより、最終的にはBadgeコンポーネントと同じスタイルのButtonコンポーネントがレンダリングされます。

結果

読み込み中...

ライブエディター

import Badge from 'react-bootstrap/Badge';
import Button from 'react-bootstrap/Button';

function Example() {
  return (
    <div>
      <h1>
        Example heading
        <Badge bg="secondary" as={Button}>
          New
        </Badge>
      </h1>
    </div>
  );
}

export default Example;

import Badge from 'react-bootstrap/Badge';
import Button from 'react-bootstrap/Button';

function Example() {
  return (
    <div>
      <h1>
        Example heading
        <Badge bg="secondary" as={Button}>
          New
        </Badge>
      </h1>
    </div>
  );
}

export default Example;

テーマ

React-Bootstrapは、既存のBootstrapテーマと互換性があります。選択したテーマのインストール手順に従ってください。

注意！

React-BootstrapはBootstrapのJavaScriptを完全に再実装しているため、デフォルトのJavaScriptの動作を拡張するテーマとは自動的に互換性がありません。

Create React App

Create React Appを使用してアプリにカスタムテーマを追加する場合は、Create React AppとBootstrapの追加ドキュメントをこちらで参照してください。

ブラウザサポート

ReactとBootstrapの両方でサポートされているすべてのブラウザをサポートすることを目指しています。

インストール​

コンポーネントのインポート​

ブラウザグローバル​

例​

スタイルシート​

CSS​

Sass​

Bootstrapのカスタマイズ​

高度な使用法​

as Prop API​

テーマ​

ブラウザサポート​