react-bootstrap 설치하기

bootstrap 라이브러리 설치

yarn add react-bootstrap bootstrap 

저는 yarn으로 설치했어요.

css파일 복붙하기

ReactBootStrap사이트
index.html파일에 Bootstrap사이트에 있는 css파일을 복붙해줍니다.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
  crossorigin="anonymous"
/>

실험하기!

BootStrap 버튼 주워오는 사이트
마음에 드는 레이아웃을 주워와서 내 App.js에 복붙해봅니다.

function App() {
  return (
    <div className="App">

      <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>
  
    </div>
  );
}

화면에 잘 뜬다면 설치 성공!@~!~