[ React -CSS-Framwork ] React-BootStrap(리액트 부트스트랩) 사용법

Notice

Recent Posts

Recent Comments

Link

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

일안하고블로그

[ React -CSS-Framwork ] React-BootStrap(리액트 부트스트랩) 사용법 본문

React/Styling

[ React -CSS-Framwork ] React-BootStrap(리액트 부트스트랩) 사용법

대한93 2018. 8. 2. 10:34

React-BootStrap

부트스트랩을 따로 배우거나 한 것은 아니지만, 회사에서 사용을 하고 있기때문에 사용법과 장점들을 많이 알고 있었던 상태에서 리액트에도 React-BootStrap이라는 라이브러리를 활용해서 적용 할 수 있다고 하여 정리를 하면 쉽게 쓸 수 있을 것 같아서 , 정리를 해봅니다.

참조 한 사이트는 여기 입니다.

create-react-app으로 프로젝트를 만듭니다.

$ create-react-app react-boot1

설치가 완료 되었으면, 프로젝트 폴더 이동

$ cd react

프로젝트 이동후, 실행.

$ yarn start

화면이 나오면 성공입니다.

다음으로, Command 혹은 Bash 창에서 start 프로젝트를 중지 합니다.

정지 후, react-bootstrap을 설정해줍니다.

$ yarn add react-bootstrap

마지막으로 스타일시트를 설정해줍니다.

React-Bootstrap은 매우 정확한 부트스트랩 버전에 의존하지 않기 때문에 라이브러리에 css가 포함되어 있지않습니다. 간단하게 상단에 CDN형태로 추가해주면 쉽게 사용할 수 있습니다.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

상단에 소스를 긁어서 해당 파일 <head>태그 내부에 넣어주세요.

/public/index.html

이제 잘되는지 간단하게 테스트를 해보겠습니다.

가장먼저 만들어줄 것은 bootstrap button을 만들어 보는 것입니다.

import { ButtonToolbar, Button } from 'react-bootstrap';

react-bootstrap에서 Button과 ButtonTollBar를 사용 합니다.

저는 테스트용도로 App.js에서 작업을 해보았습니다.

import React, { Component } from 'react';
import { ButtonToolbar, Button } from 'react-bootstrap';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div>
        <ButtonToolbar>
          {/* Standard button */}
          <Button>Default</Button>
          {/* Provides extra visual weight and identifies the primary action in a set of buttons */}
          <Button bsStyle="primary">Primary</Button>
          {/* Indicates a successful or positive action */}
          <Button bsStyle="success">Success</Button>
          {/* Contextual button for informational alert messages */}
          <Button bsStyle="info">Info</Button>
          {/* Indicates caution should be taken with this action */}
          <Button bsStyle="warning">Warning</Button>
          {/* Indicates a dangerous or potentially negative action */}
          <Button bsStyle="danger">Danger</Button>
          {/* Deemphasize a button by making it look like a link while maintaining button behavior */}
          <Button bsStyle="link">Link</Button>
        </ButtonToolbar>
      </div>
    );
  }
}

export default App;