我們先來畫我們的計數器吧!

為了讓我們的計數器精美一點點點，

我們先來安裝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 bootstrap@5.1.0
  

  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 ಥ⌣ಥ