React Bootstrap

React Bootstrap 설치

• JS에서 사용하는 Bootstrap과 별개로 React Bootstrap 라이브러리를 따로 사용해야 한다
• 터미널에서 원하는 프로젝트 파일을 생성 후 디렉토리로 이동(npm create-react-app projectname), react bootstrap 사이트에서 제공하는 get started의 install code를 터미널에 입력하면 설치가 끝난다
• 어떤 스타일은 bootstrap css 을 요구하는 경우가 있어 bootstrap.min.css 를 import 하기 위한 link 태그를 index.html head에 넣어주면 된다

React Bootstrap 사용

import {Button} from 'react-bootstrap'

function App() {
    return (
        <div className="app">
            <Button variant="primary">Primary</Button>
        </div>
    )
}

• bootstrap 사용은 JS와 동일하게 사이트에서 검색해 코드를 복사해 사용하면 되는데, 차이점은 react bootstrap 라이브러리는 component 형태로 되어 있어 사용 시 라이브러리 import를 상단에 해주어야 한다는 점이다(component기 때문에 대문자로 시작)
• 여러 component 사용 시에는 import { Button, Nav } 처럼 나열해 작성해주면 된다
• 참고 HTML/CSS Bootstrap