iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

前進React 生態系 : 技術應用與概念解析 系列

本系列文章將深入探討 React 與 TypeScript 的進階應用,並涵蓋現代 React 生態系中的多項核心技術。內容包括狀態管理(Server State 與 Client State)、React Server Components、渲染模式(Rendering Patterns)、Memorization 技術等。

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

Day 01 - 前言

前言 這個系列主要分享我在開發過程中所學到的一些技術和方法。同時,許多技術知識點其實是我之前接觸過的,但大多只是略懂皮毛,並沒有深入理解。藉由這次鐵人賽的契機,...

2024-09-15 ‧ 由 Jaren 分享
DAY 2

Day 02 - 泛起來 ~ 讓泛型寫出更靈活的程式碼

什麼是泛型? 首先先看一個簡單的例子 function identity<T>(arg: T): Type { return arg; } co...

2024-09-16 ‧ 由 Jaren 分享
DAY 3

Day 03 - 更複雜的泛型,那些好用的關鍵字和 Utility Types

在昨天只有介紹了 extends,還有其他好用的關鍵字。 typeof typeof 關鍵字可以用來取得一個變數或表達式的型別。 const user = {...

2024-09-17 ‧ 由 Jaren 分享
DAY 4

Day 04 - 掌握 TypeScript Discriminated Unions:提升 React 組件的靈活性與安全性

什麼是 Discriminated Unions 先看範例: type Shape = | { kind: "circle"; radi...

2024-09-18 ‧ 由 Jaren 分享
DAY 5

Day 05 - 掌握 ComponentProps:讓 React 元件型別更輕鬆

取得 HTML 元素的 props 在建立共用元件時,有時候會需要繼承到 HTML 元素的 props,這時候就需要針對原本的 props 做修改或擴充。但一個...

2024-09-19 ‧ 由 Jaren 分享
DAY 6

Day 06 - TypeScript 語法技巧與 Zod 簡介

其他 TypeScript 語法技巧 以下是我有時會忘記,但實際上簡單且實用的小技巧。 Function Overloads 可以重複定義相同的函數,根據不同的...

2024-09-20 ‧ 由 Jaren 分享
DAY 7

Day 07 - 結合 Zod 與 React Hook Form 實現簡潔的表單管理

為什麼需要使用 React Hook Form? 在沒有使用的表單管理套件的情況下,需要定義許多狀態來處理表單邏輯和各種錯誤狀況。而使用像 React Hook...

2024-09-21 ‧ 由 Jaren 分享
DAY 8

Day 08 - 掌握 React 中的 Ref:useRef、Callback Ref 與 React 19 新特性介紹

useRef 的使用時機 保存狀態:useRef 儲存的值不會因為元件重新渲染而改變,適合用來保存不需要觸發重新渲染的資料,像是表單輸入框的狀態、倒數計時器等...

2024-09-22 ‧ 由 Jaren 分享
DAY 9

Day 09 - 掌握 Client State:React 狀態管理的核心概念

React 的狀態類型 Client State:用戶端的狀態,包含各種和使用者狀態或互動相關的資料。 Server State:來自伺服器或 API 的...

2024-09-23 ‧ 由 Jaren 分享
DAY 10

Day 10 - Redux Toolkit 原理解析

Redux Toolkit 相關套件 必安裝套件: redux-toolkit : 簡化 Redux 的使用,讓開發者能更輕鬆地管理狀態和減少樣板程式碼,並且...

2024-09-24 ‧ 由 Jaren 分享