系列文章
[Day 01] 前言：React 為什麼這麼難學的好？
2024/2 更新 - 實體書平裝版本推出 在經過快要一年的努力後，本系列文的實體書版本推出了～其中新增並補充了許多鐵人賽版本中沒有的脈絡與細節，並以全彩印刷拉...
[Day 02] 學好 React 需要的前置基本功
如前一章節中所述，有鑒於學習 React 其實非常仰賴 JavaScript 的一些基本功，因此我會建議一開始先不要著急，在開始 React 的學習之旅前可以先...
[Day 03] React 開發環境建置的門檻
過去有很長一段時間中，開發環境的建置都被視為學習 React 的首要最大難關。由於 React 從非常早期的版本就已經擁抱 transpiler 與 moudl...
[Day 04] DOM 與 Virtual DOM
就如同官方文件所描述的，React 是一個用於「打造 UI」的工具，而在瀏覽器中我們呈現 UI 的載體就是 DOM。DOM 與瀏覽器的畫面渲染引擎綁定，因此操作...
[Day 05] 建構一切 UI 的最基本單位 — React element
React 採用了上一篇文章中所介紹的的 Virtual DOM 概念來實作抽象層，以產生並管理瀏覽器畫面中的真實 DOM。而在 React 中的每一個 Vir...
[Day 06] Render React elements
在瞭解了 React element 這種虛擬抽象層中的最小建構單位之後，我們來深入了解一下要如何讓 React elements 產生出對應的真實 DOM e...
[Day 07] JSX 根本就不是在 JavaScript 中寫 HTML
在前面的章節中，我們已經詳細的解析了 React element 相關的核心概念以及建立的方法。不過當你去參考絕大多數的 React 專案的程式碼時，你會發現幾...
[Day 08] JSX 的重要特性與規則以及其背後緣由
為了滿足 transpiler 轉換的正確性，因此 JSX 語法在撰寫上會有一些重要的特性與規則需要注意。這些規則可能大多數人多少都聽過，但是卻不是很了解為什麼...
[Day 09] 單向資料流 & DOM 渲染策略
在繼續深談 React 管理並更新畫面的策略與機制之前，我們先來探究一下關於單向資料流的概念，以及在尚未使用前端框架時實現單向資料流的 DOM 渲染策略，來幫助...
[Day 10] React 畫面更新的核心機制（上）：一律重繪渲染策略
在經過前面一些基本觀念的鋪陳之後，接下來我們將會繼續重點解析關於 React 產生並管理 UI 畫面的核心運作流程與原理，而這將會是真正掌握 React 這門技...