Best Practices for React

收集有感的一些好習慣 ^_^(b)

Prefixing variables and methods

// is & has both represent boolean type values 兩個都適合用在布林值的命名
const isEmpty = true;
const hasChild = false;

// on & handle: on 適合作為 props name; handle 則更常在 event handler
// 通常我會把 component 內部自己使用或要傳下去的用 handle prefix，然後 component 接收的 props 就如上面所提的為 on prefix
const handleClick = () => {}
return (
  <Button onClick={handleClick}>
    按我
  </Button>
)

Avoiding anonymous functions 盡量不要使用匿名函式

無法第一時間理解該函式的作用、難以掌握調用的時機以及可能產生的問題。

Component file should be limited in 100 lines 每個組件檔案不要過多行數

通常一個組件的檔案不要有過多行的 code，雖然對於 Junior 會比較難，但還是盡量學著去拆分、優化可以 decouple 的邏輯。把這個提醒放在心中，會越來越上手！

參考

https://medium.com/@najm-eddine-zaga/18-best-practices-for-react-617e23ed7f2c
Wehelp Jenny 助教分享