iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
Modern Web

以 React 為主的那些前端事系列 第 3

Day 03 - 命名的規則

如果有錯誤,歡迎留言指教~ Q_Q

好的命名,也能夠清楚的讓人一看就知道是在做什麼

團隊有統一的寫法,也能更快能理解和有個開發規範

就算是自己獨立開發,隔幾天也是會容易忘記啦~

變數命名: 駝峰式命名 (camelCase)

駝峰式命名: 變數名稱的第一個英文單字開頭是小寫,其餘的英文單字開頭是大寫。

例如: isLoadingnewsList

常數變數: 大寫_大寫

常數是,不會再變更這個變數 -> 用 const

例如: SLOGANUPDATE_TIME

Components 命名要大寫開頭

Components命名 -> 功能+類型(誰的什麼項目)

例如:
xxxButton → LoginButton

xxxPage → NewList

也是因為 React 是以開頭大小寫分辨是否為 Html 既有的元件

檔案名和檔案內的 const 變數名命名一致

// NewList.jsx
const NewList = ({ onCreate }) => {

};

export default NewList;

components props 的命名,要跟 event 事件有關

components 的 props 命名,要看得出來是在處理什麼
onCreate、onDelete、onUpdate、onChange、onAdd、onInsert

例如:

點擊是一個動作,但實際做了什麼,是新增嗎? 還是刪除? 也一併寫在命名吧

  const clickShare = () => {
    setIsShare(true);
  };
    
  render(
      <button className="whiteButton" onClick={clickShare}>
  )

上一篇
Day 02 - 那個 React Hook
下一篇
Day 04 - 導入 TypeScript
系列文
以 React 為主的那些前端事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言