iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

一次打破 React 常見的學習門檻與觀念誤解 系列

雖然 React 從 2013 年面世至今已經過了相當久的時間了,但這麼多年來有一件事情始終沒有太大的改變,就是關於「大家普遍覺得 React 學習門檻很高,也很難學的好」這一點。這其實與 React 本身的設計思維有很大的關係,當你無法掌握其中核心的觀念與脈絡時,就會覺得 React 的許多設計與行為都很不直覺甚至莫名其妙,進而更難將這些概念與實際的程式碼做出連結。

因此這個系列文正是希望將這些 React 的學習門檻、核心觀念、設計思維進行一個盤點並深入解析,希望能對於正在學習 React,或是已經有 React 的經驗但是苦惱於難以進一步掌握的朋友們有所幫助。

鐵人鍊成 | 共 30 篇文章 | 170 人訂閱 訂閱系列文 RSS系列文
DAY 1

達標好文 [Day 01] 前言:React 為什麼這麼難學的好?

2024/2 更新 - 實體書平裝版本推出 在經過快要一年的努力後,本系列文的實體書版本推出了~其中新增並補充了許多鐵人賽版本中沒有的脈絡與細節,並以全彩印刷拉...

2022-09-16 ‧ 由 Zet 分享
DAY 2

達標好文 [Day 02] 學好 React 需要的前置基本功

如前一章節中所述,有鑒於學習 React 其實非常仰賴 JavaScript 的一些基本功,因此我會建議一開始先不要著急,在開始 React 的學習之旅前可以先...

2022-09-17 ‧ 由 Zet 分享
DAY 3

[Day 03] React 開發環境建置的門檻

過去有很長一段時間中,開發環境的建置都被視為學習 React 的首要最大難關。由於 React 從非常早期的版本就已經擁抱 transpiler 與 moudl...

2022-09-18 ‧ 由 Zet 分享
DAY 4

[Day 04] DOM 與 Virtual DOM

就如同官方文件所描述的,React 是一個用於「打造 UI」的工具,而在瀏覽器中我們呈現 UI 的載體就是 DOM。DOM 與瀏覽器的畫面渲染引擎綁定,因此操作...

2022-09-19 ‧ 由 Zet 分享
DAY 5

[Day 05] 建構一切 UI 的最基本單位 — React element

React 採用了上一篇文章中所介紹的的 Virtual DOM 概念來實作抽象層,以產生並管理瀏覽器畫面中的真實 DOM。而在 React 中的每一個 Vir...

2022-09-20 ‧ 由 Zet 分享
DAY 6

[Day 06] Render React elements

在瞭解了 React element 這種虛擬抽象層中的最小建構單位之後,我們來深入了解一下要如何讓 React elements 產生出對應的真實 DOM e...

2022-09-21 ‧ 由 Zet 分享
DAY 7

[Day 07] JSX 根本就不是在 JavaScript 中寫 HTML

在前面的章節中,我們已經詳細的解析了 React element 相關的核心概念以及建立的方法。不過當你去參考絕大多數的 React 專案的程式碼時,你會發現幾...

2022-09-22 ‧ 由 Zet 分享
DAY 8

[Day 08] JSX 的重要特性與規則以及其背後緣由

為了滿足 transpiler 轉換的正確性,因此 JSX 語法在撰寫上會有一些重要的特性與規則需要注意。這些規則可能大多數人多少都聽過,但是卻不是很了解為什麼...

2022-09-23 ‧ 由 Zet 分享
DAY 9

[Day 09] 單向資料流 & DOM 渲染策略

在繼續深談 React 管理並更新畫面的策略與機制之前,我們先來探究一下關於單向資料流的概念,以及在尚未使用前端框架時實現單向資料流的 DOM 渲染策略,來幫助...

2022-09-24 ‧ 由 Zet 分享
DAY 10

[Day 10] React 畫面更新的核心機制(上):一律重繪渲染策略

在經過前面一些基本觀念的鋪陳之後,接下來我們將會繼續重點解析關於 React 產生並管理 UI 畫面的核心運作流程與原理,而這將會是真正掌握 React 這門技...

2022-09-25 ‧ 由 Zet 分享