はじめに

今更すぎるけどreact-bootstrapについて簡単に記載します。

手順

create-react-appでもなんでもいいですが、reactプロジェクトを作成してプロジェクトのルートディレクトリに移動しましょう。

React-Bootstrap · React-Bootstrap Documentation

公式サイトの導入手順ページにコマンドが記載されているのでその通りに入力して実行します。

導入後、以下のような記載をしてボタンを作成してみましょう。

npm startでローカルに実行してみます。

…あれ、ボタンが装飾されているはずですがされていない。。。

import文の追加を忘れてますね。。。

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

これを追加してあげましょう。

ボタンが装飾されているのがわかると思います。

ソースコード

import React from 'react';
import logo from './logo.svg';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button } from 'react-bootstrap';

function App() {
  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>test</Button>
      </header>
    </div>
  );
}

export default App;