useContext 是一種 React hook，讓我們能夠直接取用其他元件的 Context，而無須層層傳遞 props，進而使程式碼簡潔易讀。

【React hook】深入淺出 10 分鐘理解 useContext

軟體開發

在軟體領域中，"Thunk" 是一個常用的術語，它指的是一種用於延遲計算，或將運算延後執行的程式碼片段。它通常用於函數式編程，或編譯器的設計中。Redux 透過 createAsyncThunk 實作了該非同步/異步操作，並提供數個 API 協助我們使用 Redux。

十分鐘完整理解 createAsyncThunk 如何處理非同步操作

React 表單驗證是一種技術與使用者體驗的設計，讓使用者能夠即時檢查輸入的資料並修正，提升使用者的使用體驗，並確保資料的正確性。

【React hook】手把手學會 Form 表單驗證與 UX 優化全教學

「px」，即像素，是最基本的單位，它常被用於指定字體大小、邊框粗細等。「em」和「rem」通常用於調整相對大小，「em」在子元素中的適用，而「rem」則以根元素為參考。另一方面，「vh」和「vw」分別代表視窗的高度和寬度百分比，特別適合實現響應式設計。「vmin」和「vmax」則根據視窗的最小或最大

【CSS】CSS 單位指南與應用大全（em, rem, vh, vw, %, px, vmin, vmax）

在 React 測試生態系統中，React Testing Library 成為了方便好用的選擇，因其強調測試應該關注於使用者的操作與觀察元件行為，而不是測試細節實現。

【Redux Toolkit】 React Testing Library 測試最完整中文指南

在傳統開發的過程中，很容易會搞混一般的 this 和箭頭函式（arrow function）中的 lexcial "this" 兩者的差異。本文就以實際的例子來說明各自的差異，以及在未來使用時需要注意哪一些細節。

箭頭函式（Arrow function）的 this 究竟是什麼？如何簡單理解 Lexical "this"？

本文將深入探討鏈表的核心概念，使用 JavaScript 來說明如何實現和操作鏈表（Linked List），包括 append、prepend、remove、find 和 reverse 等五大方法。

深入理解鏈表（Linked List）與資料結構 - 以 JavaScript 實作

本文介紹 TypeScript 常遇到的混合型別，以及如何透過五種型別防禦（Type Guard）來解決。涵蓋了使用型別斷言、型別謂詞、in 運算子、typeof 運算子以及 instanceof 運算子這幾種方式。透過本文的學習，能夠更好地運用 TypeScript 進行程式碼開發。

[TypeScript] 10 分鐘學會 TS 中必會的 5 種型別防禦 Type Guard

本文帶你深入探索 TypeScript 中的 satisfies 特性，能幫助你實現精確的型別推導與型別檢查。透過實際案例，展示如何使用 satisfies 提升代碼的型別安全與程式碼的整潔，是每位 TypeScript 開發者不可或缺的知識。

[TypeScript] 快速上手 satisfies，讓你輕鬆推論型別與類型檢查

此處作為整理前端（Frontend）和相關的 HTML、CSS、JavaScript、React 等前端觀念與技巧，全部都會收錄在這個專題之中。同時也會將相關的技術與反思記錄在此，歡迎各位讀者互相交流。

Chris 前端的專研筆記

所有文章