react Bootstrap
2022. 11. 11. 22:57ㆍStudy/React
React-Bootstrap 라이브러리
https://react-bootstrap.github.io/
React-Bootstrap을 사용하면
HTML CSS로 직접 디자인하지 않고, 예제코드를 복사/붙여넣기 하여 레이아웃을 쉽게 생성할 수 있다.
설치 1. npm 명령어
각종 라이브러리들은 해당 라이브러리 공식 홈페이지에서 사용방법을 보고 설치하면 된다.
https://react-bootstrap.github.io/getting-started/introduction
위 사이트에서 제공하는 방법대로 터미널을 열고, 경로 확인 후 명령어를 입력한다.
명령어는 바뀔 수 있으니 사용할 때마다 사이트에 들어가서 확인하도록 하자.
npm install react-bootstrap bootstrap
설치 2. 추가 CSS를 연결한다.
React-Bootstrap 사이트 설명
React-Bootstrap은 매우 정확한 버전의 Bootstrap에 의존하지 않기 때문에 CSS가 포함되어 제공되지 않습니다. 그러나 이러한 구성 요소를 사용하려면 일부 스타일시트 가 필요 합니다.
// public/index.html <head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin="anonymous"
/>// 혹은 src/App.js
import 'bootstrap/dist/css/bootstrap.min.css';
사용법
버튼이 필요하면 React-Bootstrap 사이트에서 검색 후, 예제코드를 복붙하면 버튼 생성 끝
복사 하기 전 상단에 import 해야 한다.
import { Button, Row, Col } from 'react-bootstrap'
function App(){
return (
<div>
<Button variant="primary">Primary</Button>
</div>
)
}
'Study > React' 카테고리의 다른 글
| react router dom (0) | 2022.11.11 |
|---|---|
| public, src 이미지 사용 시 경로, 사용법 (0) | 2022.11.11 |
| build & GitHub Pages로 배포 (0) | 2022.11.11 |
| Component 만드는 또 다른 문법 class (0) | 2022.11.11 |
| state를 이용하여 input 입력값 가져오기 (0) | 2022.11.11 |
