【Day19】用Bootstrap和Fontawesome来刻我们的计数器吧 (´∀`)!!

我们先来画我们的计数器吧!

为了让我们的计数器精美一点点点，

我们先来安装React的fontAwesome(一些icon)和React的bootstrap吧!

• Fontawesome

    npm i --save @fortawesome/fontawesome-svg-core
    npm install --save @fortawesome/free-solid-svg-icons
    npm install --save @fortawesome/react-fontawesome
  

• Bootstrap

  npm install react-bootstrap@next [email protected]
  

  React Bootstrap的参考文件

  • 安装完bootstrap後，需要在最底层的组件，也就是我们的APP.js里import bootstrap的css

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

先用Container,Row,Col来组装我们的Component

 <Container className="App" data-test="component-app">
      <Row>
       
      </Row>
      <Row>
        
         
      </Row>
      <Row className="justify-content-md-center">
           <Col xs lg={4}>
             
            </Col>
      </Row>
    </Container>

总共会要三行，第一行摆标题，第二行摆变动的数字，最後一行是要拿来放按键的!

• 标题

  		 <Row>
              <h1>
                How many hearts do you want to give me ?
              </h1>
          </Row>
  

• 变动的数字

  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
  import {faHeart} from '@fortawesome/free-solid-svg-icons'
  
  	<Row>
          <Col>
            <h1><FontAwesomeIcon icon={faHeart} style={{color:"red"}}/>&nbsp;&nbsp;
                <span ></span></h1>
          </Col>
      </Row>
  

• 按键

  <Row className="justify-content-md-center">
             <Col xs lg={4}>
                <Button variant="primary"
                      size="lg"
                  >
                      Give me a heart !
                  </Button>
              </Col>
  </Row>
  

到这里我们先执行 npm start 打开画面，看一下长怎麽样 ↓

这个Component就快完成啦~ 现在我们缺的是那个变动的数字!

所以我们要用上一篇所提到的Hook来建立这个State。

• 使用Hook建立count这个state

   const [count, setCount] = React.useState(0);
  

• 将state显示在爱心後

   <Row>
          <Col>
              <h1><FontAwesomeIcon icon={faHeart} style={{color:"red"}}/>&nbsp;&nbsp;					<span>{count}</span>
              </h1>
          </Col>
        </Row>
  

• 将setCount这个function绑定在按键上

      <Row className="justify-content-md-center">
             <Col xs lg={4}>
                <Button variant="primary"
                      size="lg"
                      onClick={() => setCount(count + 1)}
                  >
                      Give me a heart !
                  </Button>
              </Col>
        </Row>
  

到这边，我们长得很一般般的计数器Component已完成，下一篇就要为这个Component写测试啦!

终於来到三分之二的边缘了~~好感动R ಥ⌣ಥ