【ReactBootstrap×TypeScript】ReactBootstrapをTypeScript版のReactに導入する

やりたいこと

CSSフレームワークのBootstrapをReactのプロジェクトで使いたかったが、
あーしてもこーしても上手く使えなかったので調べたところReactBootstrapなるものがあるらしい。
今回はReactBootstrapを導入するところまでまとめる。

色々インストールする

①create-react-appでTS版のインストール
こっちのサイト参考⇒https://create-react-app.dev/docs/adding-typescript/

npx create-react-app my-app --template typescript
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

正直、公式そのままである。

②
次にBootstrapもインストールしておく。
こっちのサイト参考⇒https://create-react-app.dev/docs/adding-bootstrap/#using-a-custom-theme

TS版もインストールすることを忘れないように。

npm install --save bootstrap @types/bootstrap
npm install --save node-sass @types/node-sass

③
で、ReactBootstrapをいよいよインストールする
こっちのサイト参考⇒https://react-bootstrap.github.io/getting-started/introduction/

npm install react-bootstrap @types/react-bootstrap

ボタンを配置して、導入できたか確かめる

①
index.tsxにBootstrapのcssをインポートさせておく。

src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';    //←ここにとりあえず追加

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

②
App.tsxにボタンを配置してみる

src/App.tsx

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Button } from 'react-bootstrap';    //ここにボタンコンポーネント追加

const App: React.FC = () => {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        {/*↓↓↓↓↓ここにとりあえずボタン置いてみる*/}
        <Button variant="primary">青いボタン</Button>
      </header>
    </div>
  );
}

export default App;

実際に動かしてみる

npm run start

これで、ポート3000にアクセスして、青いボタンが表示されていれば、ReactBootstrapの導入は完了です。

自分もようやくBootstrapで作ったポートフォリオサイトのモックを移植できる･･････。