[React] React Bootstrap 사용하기

 

설치방법

https://react-bootstrap.github.io/getting-started/introduction

React-Bootstrap

여기에서 get started를 누르고 설치를 하면된다.

참고로 npm install은 yarn add와 동일하다.

 

yarn add react-bootstrap bootstrap

 

react bootstrap 사이트의 css link 태그 index.html에 복붙한다.

이렇게 쓰는 건 지리적으로 먼 곳에서 불러와서 쓰는 것이기 때문에, 다운받아서 사용하는 방법도 추천된다.

다운받고 css 안에 bootstrap.css 넣는방식!

 

설치 확인

https://getbootstrap.com/

Bootstrap

 

위의 사이트에서 Docs 탭에서 원하는 UI를 App.js에 복붙해보면 된다.

<div class="btn-group" role="group" aria-label="Basic mixed styles example">
  <button type="button" class="btn btn-danger">Left</button>
  <button type="button" class="btn btn-warning">Middle</button>
  <button type="button" class="btn btn-success">Right</button>
</div>

아주 잘 뜬다! 굿! 부트스트랩 설치가 완료되었다.

 

react bootstrap에서도 가져와서 사용할 수 있다.

App.js에 사용할 컴포넌트(대문자로 시작하는 것)들을 import 해두어야 한다!

import { Button } from 'react-bootstrap';