iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

React 從 0.5 到 1 系列

以 React 官方文件(API reference、Advanced Guide)、React team 成員的 blog 為素材,更進一步了解不同情境的處理、寫出更精簡好看的 code,了解網頁前端除了讓網頁動起來之外,該注意到的課題。

參賽天數 15 天 | 共 15 篇文章 | 2 人訂閱 訂閱系列文 RSS系列文
DAY 1

[鐵人賽 Day01] 文章架構、預計內容,以及適用範圍

寫在鐵人賽開賽之前 不知道是否有人跟我一樣,學習一門前端框架到現在,有辦法寫出一個稱得上功能完整的網頁,也能夠搭配常見套件(以 React 來說就是 react...

2021-09-16 ‧ 由 串串 分享
DAY 2

[鐵人賽 Day02] 如何提升你的 React 網站易用性?(Web Accessibility)(上)- 無障礙網站 intro

文章大綱與涵蓋範圍 這篇文章會介紹無障礙網站(Web Accessibility,又稱為 a11y)的目的與實踐方向,給對於這個概念還感覺到陌生的朋友,如果已經...

2021-09-17 ‧ 由 串串 分享
DAY 3

[鐵人賽 Day03] 如何提升你的 React 網站易用性?(Web Accessibility)(中)- Accessible name、Keyboard Accessibility

文章大綱與涵蓋範圍 繼上篇介紹完無障礙網站(Web Accessibility,又稱為 a11y)的目的與實踐方向,中、下篇將著重在 React Advance...

2021-09-18 ‧ 由 串串 分享
DAY 4

[鐵人賽 Day04] 如何提升你的 React 網站易用性?(Web Accessibility)(下)- Mouse and pointer events、Development Tools

文章大綱與涵蓋範圍 繼上篇介紹完無障礙網站(Web Accessibility,又稱為 a11y)的目的與實踐方向,中、下篇將著重在 React Advance...

2021-09-19 ‧ 由 串串 分享
DAY 5

[鐵人賽 Day05] React 中的 Code splitting(代碼分離)方法

什麼是 Code splitting?為什麼要做 Code splitting? 如果你的網站是用 Create React App, Next.js, Gat...

2021-09-20 ‧ 由 串串 分享
DAY 6

[鐵人賽 Day06] React 中如何攔截網站 Runtime 錯誤?- Error boundaries

前言 前一篇 Code Spliting 文章中有提到用 Error boundaries 來處理載入錯誤的顯示,實際上該如何實作呢?本篇會實際動手嘗試,給各位...

2021-09-21 ‧ 由 串串 分享
DAY 7

[鐵人賽 Day07] 為何不該使用 index 當作 Key 值 ?——React render 更新機制解釋

前言 你可能聽過以下這個錯誤案例(或者說 anti-pattern 的案例):在一個會不斷新增、排序、刪除的列表上,使用 index 作為 key 值。但你知道...

2021-09-22 ‧ 由 串串 分享
DAY 8

[鐵人賽 Day08] 如何使用 memoization 方法減少 useContext 非必要 re-render 的效能問題?

前情提要 在看 context API 相關的文件時,發現了一篇 React repo 中的討論,主題是 useContext 如何避免非必要的重複 rende...

2021-09-23 ‧ 由 串串 分享
DAY 9

[鐵人賽 Day09] React Context(上)-單純的用法

Why Context 在寫 React 網站的時候,因為資料都是由上而下的藉由元件傳遞,有些情況,例如:整體 UI 主題、使用者身份驗證、偏好語言...等廣泛...

2021-09-24 ‧ 由 串串 分享
DAY 10

[鐵人賽 Day10] Context(下)-花式用法

Context 的各種情境 實際的情境可能更加複雜,如果我們希望切換樣式的按鈕,是底下深層的子元件呢?我可以一次 pass 好幾個 context 下去嗎?Re...

2021-09-25 ‧ 由 串串 分享