리액트스트랩 사용법

reactstrap

부트스트랩은 프론트엔드 개발을 쉽게 할 수 있는 프레임워크입니다.
리액트스트랩은 부트스트랩의 리액트 버전입니다.

리액트 프로젝트를 생성하고 npm이나 yarn을 사용하여 reactstrap 및 bootstrap을 설치합니다.
reactstrap에는 bootstrap CSS가 포함되어 있지 않으므로 bootstrap도 함께 설치해야합니다.

$ yarn add bootstrap
$ yarn add reactstrap 

그리고 src/index.js 파일에 bootstrap css를 import 해줍니다.

import 'bootstrap/dist/css/bootstrap.min.css';

이제 원하는 컴포넌트를 import 해주고 사용하면 됩니다.
테스트용으로 App.js에서 작업을 해보겠습니다.

import React from 'react';
import './App.css';
import { Button } from 'reactstrap';

function App() {
  return (
    <div className="App">
        <Button color="info">info</Button>
        <Button color="danger">danger</Button>
        <Button color="success">success</Button>
    </div>
  );
}

export default App;

reactstrap layout

• xs : 한 줄
• sm : 576px 에서 다음 줄로 넘어감
• md : 768px
• lg : 992px
• xl : 1200px
• fluid : 뷰포트 전체의 너비

아래 링크에서 다양한 컴포넌트 사용이 가능합니다.
reactstrap