iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 1
2
Modern Web

I Want To Know React系列 第 1

Why I Want To Know React

回到斯巴達鐵人賽的動機

距離上次參加 ITHome 鐵人賽已經三年多了,連續 30 天輸出文章的高壓洗禮仍歷歷在目,但在寫鐵人賽的題目: I Want To Know JS 這個系列文時很明顯感受到自己的進步。透過輸出文章, JavaScript 功力變得紮實許多了。然而,單純的 Vanilla JS 以難以應付越來越複雜的前端畫面與狀態處理。三年後的今天,使用前端框架幾乎是建構大型前端應用的標準配備,而精通三大框架 Angular, React, Vue 中的其中一套框架也自然成為前端工程師的必備技能之一。

並非說純 JavaSript 已經不重要了,如果重來一次,我依然會先從 JavaScript 這個較底層的前端知識點學起,畢竟根據 第一性原理,釐清較靠近源頭的知識往往是個正確的決定。但從 靠近源頭的知識 邁向 衍伸的知識 也是非常重要的成長與學習的過程,這也是為何我選擇 I Want To Know React 作為這次鐵人賽的主題。

工程師就是一個不斷學習新知的職業,對於較晚學習的我來說,花更多時間與心力來學習並統整新知更是必要的,而我將會用鐵人賽來督促自己學得更快、更多、更好。期望藉由本系列文能學習到深入且紮實的 React 知識與技巧,也希望能夠將這些知識點傳遞給更多想要深入學習 React 的開發者。

以下將介紹系列文將採用的 內容文章格式與脈絡 以及 適合的讀者群

內容與形式

本系列文的內容將以 React 官方文件 中的知識為主,因此我們的主要內容會專注在學習 React Core 本身而留較少的篇幅去介紹相關生態系套件。另外,雖然不會有原始碼解析那麼深入的內容,但還是希望盡量學習到一些常被忽略掉的背景、運作機制與特性細節。可以把這系列當成一個官方文件的讀書心得,但遇到有延伸知識時會盡量補完。另外,主題與章節將依自己的理解有所刪減、調整或改動順序。

以下為預計會帶到的主題:

  1. Why I Want To Know React
  2. 初探 React
  3. 初探 JSX
  4. JSX 語法
  5. Render React Element
  6. 初探 Component & Props
  7. Component 內部原理 & 使用技巧
  8. 初探 Component State
  9. Component State 內部原理
  10. Component 生命週期
  11. 事件處理
  12. 向上傳遞 State
  13. Conditional Rendering
  14. List
  15. Form (Input)
  16. 進階介紹 JSX
  17. 組成 vs 繼承
  18. Context
  19. 簡介 Hook
  20. 使用 State Hook
  21. 使用 Effect Hook
  22. 傳遞 Ref
  23. Refs 與 DOM
  24. Fragment
  25. Pattern - Higher-Order Component
  26. Pattern - Render Props
  27. 型別檢查
  28. 嚴格模式
  29. Reconciliation
  30. 最佳化效能
  31. React Dev tool 與 Profiler
  32. Accessibility
  33. 錯誤邊界
  34. React 與 SPA
  35. React 與狀態管理
  36. 結語

文章格式與脈絡

此系列文希望能夠深入淺出的讓讀者學習到 React 相關知識,並避免知其然而不知其所以然的狀況發生,因此每個主題中都會先 簡介主題,接著介紹 為什麼 等較根源性/背景性的問題,最後帶入實作面的 如何做內部機制 的部分。

再更詳細說明一點文章格式,每篇文章的內容依照主題的不同,可能會有以下幾種部分:

  • 簡介功能與概念
  • 為什麼需要此功能
  • 優缺點
  • 使用方式
  • 回顧主題
  • 內部機制與特性
  • 技巧
  • 範例
  • 小結
  • 參考資料

適合的讀者

建議的讀者

  • 熟悉 JavaScript ES6+、知道 WebpackBabel,並想開始學習 React 的讀者
  • 初學 React,並想更深入理解 React 並補完細節的讀者

不建議的讀者

  • 因為本系列文會花很多篇幅描述 為什麼內部機制 & 特性,因此不適合想快速查找語法或使用方式的讀者。

附註

  • 如果文章中有任何錯誤的觀念,或有任何改善的空間,希望各位能夠不吝指教!
  • 為了方便之後的維護與擴充,此系列將公開放在 GitHub 上,歡迎大家按星訂閱!

下一篇
I Want To Know React - 初探 React
系列文
I Want To Know React30

尚未有邦友留言

立即登入留言