ReactでBootstrapを簡単に導入する方法

React

ReactでBootstrapを導入する方法

ReactでBootstrapを導入するには、以下の手順に従ってください。

1. プロジェクトの作成

まず、Reactアプリケーションを作成します。
既にプロジェクトがある場合は、このステップをスキップしてください。

npx create-react-app my-app
cd my-app

2. Bootstrapのインストール

次に、Bootstrapをインストールします。
npmまたはyarnを使用できます。

npmを使用する場合
npm install bootstrap
yarnを使用する場合
yarn add bootstrap

3. Bootstrapのスタイルシートをインポート

src/index.js（またはsrc/index.tsx）ファイルにBootstrapのスタイルシートをインポートします。

// src/index.js または src/index.tsx
import 'bootstrap/dist/css/bootstrap.min.css';

4. コンポーネントでBootstrapクラスを使用

BootstrapのクラスをReactコンポーネントで使用します。
使用できるクラスは以下のようなBootstrapのページから探すのが良いでしょう。以下はバージョン5.3の場合の例です。
https://getbootstrap.jp/docs/5.3/getting-started/introduction/
実装時は、例えば以下のようにします。

// src/App.js または src/App.tsx
import React from 'react';

function App() {
  return (
    <div className="container">
      <h1 className="text-center">Hello, Bootstrap!</h1>
      <button className="btn btn-primary">Click Me</button>
    </div>
  );
}

export default App;

5. アプリケーションの起動

最後に、アプリケーションを起動して、Bootstrapが適用されていることを確認します。

npmを使用する場合
npm start
yarnを使用する場合
yarn start

react-bootstrapライブラリの使用

BootstrapのJavaScriptコンポーネント（例えばモーダルやドロップダウン）を使用する場合は、react-bootstrapライブラリを使用することもできます。

1. React-Bootstrapのインストール

追加で、React用のBootstrapコンポーネントを提供するreact-bootstrapもインストールできます。

npmを使用する場合
npm install react-bootstrap
yarnを使用する場合
yarn add react-bootstrap

2. React-Bootstrapコンポーネントの使用

react-bootstrapのコンポーネントをインポートして使用します。
使用できるコンポーネントは以下のあたりを参考にすると良いでしょう。
https://react-bootstrap.netlify.app/docs/components/accordion

// src/App.js または src/App.tsx
import React from 'react';
import { Button, Container } from 'react-bootstrap';

function App() {
  return (
    <Container>
      <h1 className="text-center">Hello, React-Bootstrap!</h1>
      <Button variant="primary">Click Me</Button>
    </Container>
  );
}

export default App;

これで、ReactアプリケーションにBootstrapを導入し、利用できるようになります。