Post

[React] react Bootstrap

Posted
By songmiok
1 min read
[React] react Bootstrap

React-Bootstrap 라이브러리

https://react-bootstrap.github.io/

React-Bootstrap을 사용하면
HTML CSS로 직접 디자인하지 않고, 예제코드를 복사/붙여넣기 하여 레이아웃을 쉽게 생성할 수 있다.

설치 1. npm 명령어

각종 라이브러리들은 해당 라이브러리 공식 홈페이지에서 사용방법을 보고 설치하면 된다.
https://react-bootstrap.github.io/getting-started/introduction

위 사이트에서 제공하는 방법대로 터미널을 열고, 경로 확인 후 명령어를 입력한다.
명령어는 바뀔 수 있으니 사용할 때마다 사이트에 들어가서 확인하도록 하자.

1

npm install react-bootstrap bootstrap

설치 2. 추가 CSS를 연결한다.

React-Bootstrap 사이트 설명

React-Bootstrap은 매우 정확한 버전의 Bootstrap에 의존하지 않기 때문에 CSS가 포함되어 제공되지 않습니다. 그러나 이러한 구성 요소를 사용하려면 일부 스타일시트 가 필요 합니다.

1
2
3
4
5
6
7
8

// 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"
/>

1
2

// 혹은 src/App.js
import 'bootstrap/dist/css/bootstrap.min.css';

사용법

버튼이 필요하면 React-Bootstrap 사이트에서 검색 후, 예제코드를 복붙하면 버튼 생성 끝
복사 하기 전 상단에 import 해야 한다.

1
2
3
4
5
6
7
8
9

import { Button, Row, Col } from 'react-bootstrap'

function App(){
  return (
    <div>
      <Button variant="primary">Primary</Button>
    </div>
  )
}
JavaScript, React
This post is licensed under CC BY 4.0 by the author.