REACT_reactstrap Buttons

Buttons 패키지는 <Button> 태그에 color 속성에 약속된 문자열을 넣으면, 용도에 맞는 버튼 스타일을 지원해준다

 

- R039_ReactstrapBottons.js

import React, { Component } from "react";
import { Button } from 'reactstrap';

class R039_ReactstrapBottons extends Component {
    render() {
        return(
            <div style={{padding : "0px"}}>
                <Button color="primary">blue</Button>
                <Button color="info">teal</Button>
                <Button color="success">green</Button>
                <Button color="warning">yellow</Button>
                <Button color="danger">red</Button>
                <Button color="dark">dark gray</Button>
                <Button color="secondary">gray</Button>
                <Button color="light">white</Button>
            </div>
        )
    }
}
export default R039_ReactstrapBottons;

 

- App.js

import React from 'react';
import './App.css'; 
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면  
//'./..App.css'

import ReactstrapBottons from './R039_ReactstrapBottons'
import 'bootstrap/dist/css/bootstrap.css'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>CSS 적용하기</p>
      <ReactstrapBottons/>
    </div>
  );
}

export default App;

 

결과