CSS 프레임워크 - reactstrap

reactstrap이란?

reactstrap은 React.js에서 Bootstrap*을 더 쉽게 사용하기 위한 라이브러리다.

 

reactstrap 로고

 

*Bootstrap이란?

각종 레이아웃과 버튼, 입력창 등의 디자인과 기능을 CSS와 JavaScript로 만들어 놓은 오픈 소스 프론트엔드 프레임워크다.

 

사용법

 

설치하기

React 16.8 이상에서 지원된다.

npm install --save reactstrap bootstrap

 

import 

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

 

예시 1 : 버튼

import React from 'react';
import { Button } from 'reactstrap';

export default (props) => {
  return (
    <Button color="danger">Danger!</Button>
  );
};

 

예시 2: 모달

// React
import { Modal, ModalBody, ModalHeader } from 'reactstrap';
...
<Modal isOpen={open} toggle={() => setOpen(false)}>
  <ModalHeader>
    Modal title
  </ModalHeader>
  <ModalBody>
    Modal body text goes here.
  </ModalBody>
</Modal>

 

 

공식 문서

https://reactstrap.github.io/?path=/story/home-installation--page 

Storybook