【React】Bootstrap

React で Bootstrap を利用してみます。

React Bootstrap というものがあり、これは Bootstrap を React でJSXで使用する為のライブラリです。
今回は React Bootstrap を使用してみます。

インストール

プロジェクトディレクトリで以下のコマンドを実行します。

npm install react-bootstrap bootstrap

セッティング

cssの読み込み

cssを読み込みます。どこに記載するかは以降の例を参考にして下さい。

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

コンポーネントの読み込み

使用したいBootstrapのコンポーネントを読み込みます。以下はボタンコンポーネントを読み込む例になります。どこに記載するかは以降の例を参考にして下さい。

import { Button } from 'react-bootstrap';

ボタン

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

function App() {
  return (
    <>
      <Button variant="primary">Button</Button>
    </>
  );
}

export default App;

最後に

特にありません。

コメントを残す

メールアドレスが公開されることはありません。

© DeNnie.Lab All Rights Reserved.