Skip to main content

react guidance

常見的錯誤​

1. 在 html 裡面寫 loop ex:​

// bad 不易閱讀
<ol>
  {data.map((item)=> {
    <li>item</li>
  })}
</ol>

// good
const lawyers = data.map((item)=> {
  return <li>item</li>
})

<div>{lawyers}</div>
// bad
<div>首頁</div>
<div>關於我們</div>
<div>...</div>

// good
const nav = [首頁,關於我們,...]
return nav.map((item)=> <div>{item}</div>)

3. css判斷式應避免整段重複 變數處理統一放在最後面​

// bad
<div class={`${isLast ? "mb-1 mt-2 ml-1" : "mb-1 mt-2 ml-3" }`} />

// good
<div class={`mb-1 mt-2 ${isLast ? "ml-1" : "ml-3" }`} />

4. 使用正確的語法​

const data = "123"
let a = `${data}` // bad
let a = data      // good

5. 命名統一都用駝峰 組件大寫開頭 hook小寫開頭​

const MyFooter = () => <div>footer</div>
const useFooter = () => {
  return [首頁,關於我們]
}
  • hook檔名
  // bad
  hooks/use-hook
  // good
  hooks/useHook
  • 組件檔名
  // bad
  components/card
  // good
  components/Card

6. 有意義的命名​

// bad
const [isOpen, setIsOpen] = useState(true)
const [open, setOpen] = useState(true)

// good
const [isMenuOpen, setIsMenuOpen] = useState(true)
const [isCardOpen, setIsCardOpen] = useState(true)

7. 判斷是否顯示內容​

// bad 
{!experience ? (
  ""
) : (
  <div className="mt-6 sm:mt-12">
    <div className="container">
      <div className="sm:w-1/4">
        <h3 className="title-border-sm font-serif text-xl mb-6">
          學經歷
        </h3>
      </div>
      <div className="sm:w-3/4">{nl2br(experience)}</div>
    </div>
  </div>
)}

// good 
const component = () => {
    // ....
}

{ experience && component }

  • 反判斷
if (!isFalse) ...

if (isTrue) ...
  • create element 優點：盡量在程式碼內減少html以及jsx語法
{isOpen ? (
  <XIcon className="block h-6 w-6" onClick={()=> console.log("click")} />
) : (
  <MenuIcon className="block h-6 w-6"  onClick={()=> console.log("click")}  />
)}

const MenuIcons = ({ isOpen }) => {
  return React.createElement(isOpen ? XIcon : MenuIcon, {
    className: "block h-6 w-6",
  })
}

const icon = React.createElement(isOpen ? XIcon : MenuIcon, {
  className: "block h-6 w-6",
})

<>{icon}</>

其他​

1. 分支名不要用中文​

// bad
feature/卡片組件

// good?
feature/add_card

2. 商業邏輯或是難以理解的地方添加註解​

diction = Object.keys(keywords).join("|0x0008|101\n") + "|0x0008|101\n"

3. commit 要寫得有意義 發pr前可以整理一下​

// bad
fix: 補個槓槓
fix: 加上註解

// good?
chore: 整理code 
url補上斜線 添加url註解

4. 少寫css 理論上大部分的東西 tailwindcss 都做得出來​

5. pr的描述要提到所有寫到的東西​

6. 使用commit squash​

  1. 整理成一筆 未來可以一次找到全部的相關更改內容
  2. 搭配 source tree

重構​

1. 先重構組件 再重構template​