React 元件開發指南 從特性與函式庫工具淺談元件開發

Lin Yen-Cheng on 2019-12-22 5 min. read

必備的特性

在軟體或是元件開發上,我們需要考量:

  • 可維護性
  • 可讀可理解性
  • 可靠性:出現錯誤還是可以繼續工作

元件概述

透過 React.js 這個 component-based 的函式庫進行前端開發,我們會更專注在:

  • 開發可重用的元件
  • 使用別人開發好的元件

首先先推薦下面兩個網站都有整理不錯的資源,可以都點進去觀賞一下。

使用現有元件注意事項

比起自己開發,我們更常去使用別人開發好的元件,底下是一些可以納入評估的項目:

  • 無障礙支援程度 (A11y)
  • 樣式是否方便客製化來配合目前網站視覺
  • 文件是否詳細
  • 瀏覽器支援
  • 看一下目前的 issue
  • 更新的速度
  • Release Note 是否詳細

元件開發注意事項

靜態樣式的處理,傳統的 css 或是 scss 的寫法,比較適合整體 Layout 相關

  • 若在新增元件的同時寫樣式檔,在元件重構或移動時會需要較多的確認與步驟
  • 樣式檔本身是 global 的,會需要一個團隊都能遵守的命名規則

當我們需要用程式去控制動態樣式,我們可以透過以下的方式處理

  • Inline style
  • classnames 去操作動態樣式
function SubmitButton({ isHidden }) {
  const btnSummitClass = classNames({
    btn: true,
    "btn-default": true,
    "cursor--not-allowed": isHidden,
  });
  const styleButton = { display: isHidden ? "none" : "block" };

  return (
    <button type="button" className=&#123;btnSummitClass&#125; style=&#123;styleButton&#125;>
      <SkillChart nowProfile=&#123;nowProfile&#125; />
    </button>
  );
&#125;

CSS in JS

  • Emotion: 沒用過但也蠻熱門的

  • Zero-runtime CSS in JS library

    • 輕量化的解決方案
  • Styled-Component

    • 會先把該 tag 預設的規則放入
    • 接著依照我們寫的樣式,動態的產生 class 來解決我們命名的問題
    • 透過 stylis 樣式預處理
    • inject 編譯過的樣式到 <head>

故事書

利用故事書將元件獨立進行開發與測試,透過這樣的方式可以讓剛開始接觸專案的人更快速的了解系統中元件的使用方法

使用故事書獨立開發可能需要注意的事項

  • Promise 取代 http request
  • 使用 setTimeout 模擬一些需要時間的動作
  • 列出所有可能的狀態
  • 利用 knobs 方便進行測試
  • 專案架構上可以盡量把故事跟元件放近一點,減少找來找去

環境設定

  • react-app-rewired: 不解開 react create script 又想自訂部分設定的工具
  • lint rule: 讓機器處理規則,像是 hooks 的提示
  • bundle analyzer: 網頁載入過慢可以用這個來評估

開發函式庫或套件


喜歡這篇文章,請幫忙拍拍手喔 🤣

share