iT邦幫忙

2021 iThome 鐵人賽

DAY 1
2
Modern Web

寫出好維護又簡潔的 react 程式碼 feat: Function Programming系列 第 1

day1:參加的動機及大綱

這次的參賽是為了寫讓自己更多學習 react 更多更好的寫法,會從 Javascript 和 React 好的寫法開始,
加上許多好用的 CSS 套件使用,並在模組化和 function programming 上有所學習和使用,幫助自己 30 天可以
寫出具有簡潔和好懂的程式碼。

以下為大綱,為參考項目,不一定每天會照著寫,隨時會調整:

  1. 程式碼風格的重要性
  2. 程式碼的命名 (component, className)
  3. css style 規劃 (css module, emotion, taiwind)
  4. 判斷式的使用 (if, else, swaitch, es6)
  5. 元件內狀態的管理 (useState,useMemo)
  6. 跨元件的狀態管理 (context, library (redux, zustand))
  7. 資料傳遞的形式-1 (container->component, customet hook)
  8. 資料傳遞的形式-2 (context)
  9. 資料傳遞的形式-3 (redux, redux thunk)
  10. 資料傳遞的形式-3 (zustand)
  11. 使用 ES6 做資料判斷與處理
  12. useEffect 的寫法
  13. 事前處理 api 的資料格式 (api資料與畫面的連動)
  14. 共用重複的程式碼 (module, customerHook)
  15. 實現模組化-1 (function, component)
  16. 實現模組化-2 (充滿彈性的設計)

以下視情況追加

  1. 認識 Function Programming
  2. first class
  3. higher-order functions
  4. pure function
  5. immuable
  6. side effect
  7. declarative vs. imperative
  8. currying
  9. compose
  10. ramda.js
  11. react 使用 Function Programming

期待30天後可以寫出簡潔又好懂得 clean code。


下一篇
day2: 程式碼風格的重要性
系列文
寫出好維護又簡潔的 react 程式碼 feat: Function Programming8

1 則留言

0
Ken Chen
iT邦新手 5 級 ‧ 2021-09-16 01:17:55

期待看到 Ramda 的使用~~~~

joseph wu iT邦新手 5 級 ‧ 2021-09-18 16:04:08 檢舉

到時候跟 Ken Chen交流一下

我要留言

立即登入留言