はじめに

React-Bootstrap は、Bootstrap 5 の機能を React コンポーネントとして提供するライブラリです。
これにより、Bootstrap のスタイルやレイアウトを活かしながら、React のコンポーネントベースの開発が可能になります。

この記事では、React-Bootstrap のインストール方法と基本的な使い方について解説します。

React-Bootstrap のインストール

まず、React プロジェクトに React-Bootstrap をインストールします。

SH
npm install react-bootstrap bootstrap

または、Yarn を使う場合：

SH
yarn add react-bootstrap bootstrap

Bootstrap の CSS もプロジェクトに追加する必要があります。通常、Next.js の App Router を使用している場合は app/layout.js または app/layout.tsx に以下の行を追加します。

JS
import "bootstrap/dist/css/bootstrap.min.css";

Create React App を使用している場合は、index.js や App.js に同様の import を追加してください。

基本的な使い方

React-Bootstrap では、通常の Bootstrap のクラスをそのまま使うのではなく、コンポーネントとして利用します。

ボタン（Button）

JSX
import Button from "react-bootstrap/Button";

function Example() {
  return <Button variant="primary">プライマリボタン</Button>;
}

export default Example;

variant="primary" でボタンのスタイルを指定できます。他にも secondary、success、danger などのバリエーションが利用可能です。

アラート（Alert）

JSX
import Alert from "react-bootstrap/Alert";

function Example() {
  return <Alert variant="success">成功しました！</Alert>;
}

export default Example;

コンテナ（Container）

JSX
import Container from "react-bootstrap/Container";

function Example() {
  return (
    <Container>
      <h1>React-Bootstrap のコンテナ</h1>
    </Container>
  );
}

export default Example;

まとめ

今回は、React-Bootstrap のインストールと基本的な使い方について解説しました。