리액트에서 부트스트랩을 사용할수 있는 라이브러리는 2개가 있다.
react-bootstrap (이걸 사용할 것임) 과 reactstrap
React Bootstrap
https://react-bootstrap.github.io/
설치
npm install react-bootstrap bootstrap
import (App.js에서 import한다.)
import 'bootstrap/dist/css/bootstrap.min.css';
App.js파일을 다음과 같이 수정한다.
import 'bootstrap/dist/css/bootstrap.min.css';
import {Button} from "react-bootstrap";
function App() {
return (
<Button>Boot strap</Button>
);
}
export default App;
버튼이 다음과 같이 보여지면 bootstrap이 적용된 상태이다.
부트스트랩 사용 2가지 방법
1. div
2. 컴포넌트 (이거로 해보기)
홈페이지에서 component를 누른 후 해당 스타일을 적용하면 된다.
'React' 카테고리의 다른 글
[React] MUI (Material-UI) CSS 사용하기 (0) | 2023.02.21 |
---|---|
[React] useEffect()의 Callback으로 async 함수를 쓰지 않는 이유 (0) | 2023.02.20 |
[React] useNavigate()와 useLocation()으로 페이지 이동하면서 값 전달하기 (0) | 2023.02.19 |
[React] .env 사용하기(URL 등 비공개 이용) (0) | 2023.02.16 |
[React] React 폴더구조 (0) | 2023.02.13 |