HTML에서도 Bootstrap을 사용할 수 있었듯이, 리액트에서도 사용할 수 있다.
아래 링크로 가서, 원하는 리액트 프로젝트 파일을 열고
https://react-bootstrap.netlify.app/getting-started/introduction
React-Bootstrap
The most popular front-end framework, rebuilt for React.
react-bootstrap.github.io
터미널에 아래와 같은 코드를 입력해주면 된다.
npm install react-bootstrap bootstrap
1) 다음으로는 App.js 파일에 아래 코드를 임포트해서 넣거나,
import 'bootstrap/dist/css/bootstrap.min.css';
2) index.html 파일의 head태그 안에 아래 코드를 복붙해서 넣으면 된다.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
● 부스트랩 적용방법
- 원하는 적용 스타일을 찾는다. 예시로 button을 검색해보았고, 버튼중에서 primary 버튼을 적용하려고 한다고 가정해보자.
- Primary 서식 코드를 복사해서 app.js에 넣어준다. 그 다음, Button를 임포트한다는 코드를 맨위에 적어주어야한다