1. Reactとは？Bootstrapとは？基本をおさらい

React（リアクト）は、ウェブページの画面を作るための道具です。たとえば、ボタンをクリックしたら動くような仕組みを作ることができます。

Bootstrap（ブートストラップ）は、見た目をカッコよく整えるための道具です。ボタンや文字の色、大きさ、レイアウトなどを簡単に調整できます。

ReactにBootstrapを組み合わせると、見た目が整った動くウェブページを作ることができるのです。

2. Bootstrap本体を読み込んで使う方法

まずは「Bootstrap本体」を読み込む方法です。これはCSSとJavaScriptのファイルを読み込んで、HTMLタグにクラス名をつけて見た目を整えます。

ReactアプリにBootstrapを導入するには、次のコマンドを使います。


npm install bootstrap

次に、「index.js」または「App.js」などのファイルでCSSを読み込みます。


import 'bootstrap/dist/css/bootstrap.min.css';

この設定をすることで、HTMLにBootstrapのクラスを付ければ、見た目が整います。

3. Bootstrap本体での使用例（HTMLのクラスで使う）

Bootstrap本体を使う場合は、普通のHTMLと同じように、classNameでBootstrapのクラス名を指定します。


function App() {
  return (
    <div className="container mt-5">
      <h1 className="text-success">ReactとBootstrapを使っています</h1>
      <button className="btn btn-primary">クリックしてね</button>
    </div>
  );
}

4. react-bootstrapを使う方法とは？

react-bootstrap（リアクト・ブートストラップ）は、React用に作られたBootstrapのパーツ集です。ボタンやナビバーなどをReactのコンポーネントとして使えます。

インストールは以下のコマンドです。


npm install react-bootstrap bootstrap

これでreact-bootstrapとBootstrap本体の両方が使えるようになります。

5. react-bootstrapでの使い方例

react-bootstrapでは、ボタンや見出しを<Button>のように書いて使います。クラス名ではなく、タグでパーツを呼び出すイメージです。


import Button from 'react-bootstrap/Button';

function App() {
  return (
    <div className="container mt-5">
      <h1 className="text-primary">react-bootstrapで表示</h1>
      <Button variant="success">クリックしてね</Button>
    </div>
  );
}

6. Bootstrap本体とreact-bootstrapの違いは？

見た目はほとんど同じですが、使い方が違います。

Bootstrap本体：HTMLのclassで見た目を変える
react-bootstrap：Reactのタグを使って見た目を作る

react-bootstrapの方がReactに慣れていれば使いやすいですが、最初はBootstrap本体の方がシンプルかもしれません。

7. 初心者におすすめの使い分け方

はじめてReactでBootstrapを使うなら、まずはBootstrap本体の読み込みで始めましょう。HTMLのclassNameを使うだけで簡単にデザインを整えることができます。

Reactに少し慣れてきたら、react-bootstrapにも挑戦してみると、部品を組み合わせて複雑な画面を作るのが楽になります。

8. Bootstrapのバージョンに注意しよう

react-bootstrapは、Bootstrap 5に対応した最新版である必要があります。古いバージョンだと、ボタンの種類などが合わないことがあります。

コマンドでインストールする時は、常に最新版を意識しましょう。

9. トラブルが起きたときのチェックポイント

CSSが効いてない → import 'bootstrap/dist/css/bootstrap.min.css'を忘れていないか
react-bootstrapの部品が動かない → import Button from 'react-bootstrap/Button'などが正しく書かれているか
ボタンが表示されない → BootstrapやReactのバージョンが古くないか確認

初心者でもあせらず、ゆっくり一つずつ確認すれば大丈夫です。