REACT_reactstrap Badge

Badge 패키지는 부모요소에 추가로 특정 문자열이나 숫자를 표시할 때 사용한다

 

- R035_ReactstrapBadges.js 

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

class R035_ReactstrapBadges extends Component {
    render() {
        return (
            <div>
                <h1>PRODUCT NAME <Badge color="secondary"> </Badge></h1>
                <Button color="light" outline>
                    Accessor <Badge color="dark">4</Badge>
                </Button>
                <Badge color="danger" pill>pill</Badge>
                <Badge href="http://example.com" color="light">GoLink</Badge>
            </div>
        )
    }
}
export default R035_ReactstrapBadges;

 

- App.js

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

import ReactstrapBadges from './R035_ReactstrapBadges'
import 'bootstrap/dist/css/bootstrap.css'

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

export default App;

 

결과