【ReactでBootstrapを使えるようにする方法】

ReactでBootstrapを使ったので、インストールの仕方を忘れないように、備忘録として残しておきます！

１必要なパッケージをインストール

npm install react-bootstrap bootstrap

２BootstrapのCSSを読み込む
src/index.js または App.js の先頭で以下を追加

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

３React Bootstrapのコンポーネントを使う
たとえばボタンを使いたい場合

import Button from 'react-bootstrap/Button';

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

Bootstrapのクラスを直接書くのではなく、React用にラップされたコンポーネントを使えるのが特徴らしい！！