React-Bootstrap 사용하기

1. React-Bootstrap 설치

https://react-bootstrap.netlify.app/

npm install react-bootstrap bootstrap

터미널에 설치 명령어를 입력해준다.

2. CSS 파일 import

App.js

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

App.js파일에 import 하거나

index.html

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
  integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
  crossorigin="anonymous"
/>

index.html 파일 head 태그 안에 붙여넣어준다.
App.js보다는 index.html에 넣는게 더 낫겠다.

3. 사용할 태그 import

Button, NavBar 등등 사용할 디자인을 가져온 뒤 상단에 import 해주어야 한다.

import { Navbar, Container, Nav } from "react-bootstrap";

      <Button variant="primary">Primary</Button>{" "}

NavBar에서 . 뒤에 붙은 단어들은 굳이 import 안해도 된다.