iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
Modern Web

用Jest和Enzyme來寫React測試吧!!系列 第 19

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


上一篇
【Day18】在使用者模式移除data-test屬性,淺談React Hook (•‿•)
下一篇
【Day20】建立計數器的Test,並提供測試使用的方法 ୧☉□☉୨!
系列文
用Jest和Enzyme來寫React測試吧!!30

尚未有邦友留言

立即登入留言