雖然 React 從 2013 年面世至今已經過了相當久的時間了,但這麼多年來有一件事情始終沒有太大的改變,就是關於「大家普遍覺得 React 學習門檻很高,也很難學的好」這一點。這其實與 React 本身的設計思維有很大的關係,當你無法掌握其中核心的觀念與脈絡時,就會覺得 React 的許多設計與行為都很不直覺甚至莫名其妙,進而更難將這些概念與實際的程式碼做出連結。
因此這個系列文正是希望將這些 React 的學習門檻、核心觀念、設計思維進行一個盤點並深入解析,希望能對於正在學習 React,或是已經有 React 的經驗但是苦惱於難以進一步掌握的朋友們有所幫助。
2024/2 更新 - 實體書平裝版本推出 在經過快要一年的努力後,本系列文的實體書版本推出了~其中新增並補充了許多鐵人賽版本中沒有的脈絡與細節,並以全彩印刷拉...
如前一章節中所述,有鑒於學習 React 其實非常仰賴 JavaScript 的一些基本功,因此我會建議一開始先不要著急,在開始 React 的學習之旅前可以先...
過去有很長一段時間中,開發環境的建置都被視為學習 React 的首要最大難關。由於 React 從非常早期的版本就已經擁抱 transpiler 與 moudl...
就如同官方文件所描述的,React 是一個用於「打造 UI」的工具,而在瀏覽器中我們呈現 UI 的載體就是 DOM。DOM 與瀏覽器的畫面渲染引擎綁定,因此操作...
React 採用了上一篇文章中所介紹的的 Virtual DOM 概念來實作抽象層,以產生並管理瀏覽器畫面中的真實 DOM。而在 React 中的每一個 Vir...
在瞭解了 React element 這種虛擬抽象層中的最小建構單位之後,我們來深入了解一下要如何讓 React elements 產生出對應的真實 DOM e...
在前面的章節中,我們已經詳細的解析了 React element 相關的核心概念以及建立的方法。不過當你去參考絕大多數的 React 專案的程式碼時,你會發現幾...
為了滿足 transpiler 轉換的正確性,因此 JSX 語法在撰寫上會有一些重要的特性與規則需要注意。這些規則可能大多數人多少都聽過,但是卻不是很了解為什麼...
在繼續深談 React 管理並更新畫面的策略與機制之前,我們先來探究一下關於單向資料流的概念,以及在尚未使用前端框架時實現單向資料流的 DOM 渲染策略,來幫助...
在經過前面一些基本觀念的鋪陳之後,接下來我們將會繼續重點解析關於 React 產生並管理 UI 畫面的核心運作流程與原理,而這將會是真正掌握 React 這門技...