리액트에서 부트스트랩(React Bootstrap)적용하기

리액트에서 부트스트랩을 사용할수 있는 라이브러가 2개있다.

 

react-bootstarp 과 reactstarp 이다.

 

두개중에 사용하고 싶은걸 사용하면 된다.

 

www.npmtrends.com/react-bootstrap-vs-reactstrap

react bootstrap vs reactstrap | npm trends

두개를 비교한 내용이다.

 

www.geeksforgeeks.org/difference-between-reactstrap-and-react-bootstrap/

Difference between reactstrap and react-bootstrap - GeeksforGeeks

여기서는 react-bootstarp를 사용하기로 한다.

 

react-bootstrap.netlify.app/getting-started/introduction/

React-Bootstrap

react-bootstrap를 install한다.

npm install react-bootstrap bootstrap

app.js파일을 다음과 같이 수정한다.

import 'bootstrap/dist/css/bootstrap.min.css';
import {Button} from "react-bootstrap";

function App() {
  return (
    <Button>Boot strap</Button>
  );
}

export default App;

버튼이 다음과 같이 보여지면 bootstrap이 적용된 상태이다.

 

 

 

참조 : react-bootstrap.netlify.app/getting-started/introduction/

React-Bootstrap

react-bootstarp 샘플예제

github.com/react-bootstrap/code-sandbox-examples/blob/master/README.md

react-bootstrap/code-sandbox-examples