[React] reactでbootstrap使い方

# reactでbootstrap

既存の私たちが**bootstrap**を使うために**cdn**を使いました。
しかし、**react**では方法が少し違います。
一つ一つ学んでみたいと思います。

<br><br>

まずreactプロジェクトを生成します。
リンクの下段に出ています。
[プロジェクトを生成方法](https://qiita.com/huraipan/items/89aec21e230cf299164a)

<br><br>

## 1. react bootstrap インストール
一番上のやつです。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509555/d92c24b4-4e88-451d-cc07-507bf875ad02.png)

<br>

Get started
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509555/4b38e52e-ba43-28d8-ce38-8849a3ce9805.png)

<br>

これをターミナルに入力してください。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509555/fb91a106-8efc-ecc2-fe9d-51a20adc8cea.png)

<br>

なんか赤い字が出ましたけどオッケーです。
あれ何かしている方は教えて下さい。
![スクリーンショット 2023-07-18 142927.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509555/e883bc92-6c54-4e1f-665f-674cba26cc5c.png)

<br>

cssをbootstrapを使うところにimportします。
わたしはこんどapp.jsにします。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509555/a155400a-45b5-ba45-913f-f4cc56b99ce3.png)

こんな感じですね。
```react
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css'; // ここ

function App() {
  return (
    <div className="App">
    </div>
  );
}
```

<br><br>


## 2. ボタンを使いましょう。

bootstrapでボタンを探して使いましょう。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509555/dfe804ef-ade0-6163-76de-3818ed891ac2.png)
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509555/d505e64b-a52d-a707-e83b-dea650aa4ae8.png)
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509555/d77fde58-dac3-b341-c7fc-5dde3735359b.png)

<br>

探したボタンをapp.jsに貼り付けます。
```react
function App() {
  return (
    <div className="App">
      <Button variant="primary">Primary</Button>
    </div>
  );
}
```

<br>
でもこんなエラーが出ます。

![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509555/cb4baad4-abc0-a58a-d2e0-7cadbfb2e25e.png)

<br>

先のページをよく見るとbuttonをimportすることを見られます。
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509555/6285ad51-403d-cb16-11c5-b0be9210851d.png)

```react
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Button from 'react-bootstrap/Button';

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

![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509555/a5ea8507-9762-0991-d344-ab143bccc9b9.png)

<br><br>
文書をよく読んでみると、どれをインポートすべきか分かります。
<br>
通常は大文字のタグです。


## 2. navbar

これがbootstrapのnavbarコードです。
```react
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';


<Navbar bg="dark" data-bs-theme="dark">
        <Container>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
        </Nav>
    </Container>
</Navbar>
```

<br>

こんなにimpotが多いときは一緒に書くことができます。
```react
import {Container, Nav, Navbar} from 'react-bootstrap';
```

以上です。