延續昨天介紹的 Code Splitting，今天要介紹如何使用動態匯入來拆分程式碼，會以 React 的動態匯入來說明。 沒有動態匯入🤯 在介紹動態匯入前，...
透過使用 TypeScript 的 Utility Types，可以更靈活地操控型別，特別是在處理複雜的資料結構時。 接下來的這幾天，我們要來介紹 TypeSc...
今天，我們要來實作健身房管理系統中另一個重要的功能：課程管理。我們來建立課程列表頁面、課程詳情頁面，以及一個日曆來顯示課程安排。 1. 安裝必要的套件 首先，我...
React 在 component function 中提供了一個 useEffect hook 來 隔絕和管理副作用 。React 在每次 render 之後...
Component 的三大生命週期 生命週期就是指一個 React Component 在被創建到被銷毀的過程中，會經歷的一系列階段。 一. Mount Mou...
Document Metadata Document Metadata （如 <title>、<link> 和 <meta>...
useMemo 是 React 中用來記憶化計算結果的一個 Hook。能夠在每次重新渲染的時候緩存計算的結果，只有當某些依賴項發生變化時才會重新計算，這在處理昂...
鯨魚
‧
2024-10-07
隨著專案的成長，需要將父組件的資料傳遞給深層的子組件。這樣的資料傳遞過程會逐漸變得複雜且繁瑣。React 提供的 useContext Hook 能夠有效解決這...
鯨魚
‧
2024-10-06
昨天，我們終於將 Todo List 的功能完成，今天開始，我們要來探索一些先前沒有機會用到的小技巧以及觀念。 在 Todo List 中，所有的 <in...
今天要介紹的是 React 的 Hook 模式，嚴格來說 Hooks 不一定是一種設計模式，但它可以替代很多傳統的設計模式。介紹 Hooks 前，先來看看 R...
本系列文章 GitHub 在 Day23，我們提到了像 messageDetails 這樣只涉及少數元件的狀態，使用局部管理可以避免不必要的全域依賴並保持程式碼...
當呼叫 setState 後會發起 component re-render，React 會啟動 reconciliation 流程，最終更新瀏覽器的 DOM 並...
今天，我們將實作健身房管理系統中一個非常關鍵的功能——會員管理。我們會構建會員列表頁面和會員詳情頁面，並且學習如何使用 TanStack Table 和 Rea...
use React 19 推出了新的 API use ，可以用來取得非同步的內容或 Promise ，也可用來取得 Context。 use 只能在 rende...
在 React 中，我們經常使用 useState 來管理組件的狀態，並讓組件隨著狀態的變化重新渲染。不過在某些情況，不希望狀態變更時觸發重新渲染，這時就可以使...
鯨魚
‧
2024-10-05
今天，我們要為 Gym Pro 設計登入頁面和主要的導航結構，並討論如何使用 React Query 來優化我們的 API 請求。 1. 設計登入頁面 首先，我...
今天要介紹的是 Render Props 模式，這也屬於 React 的模式之一。 Render Props 是什麼 Render Props 的目的類似 H...
JSX 語法 JSX 語法是一種語法糖，提供我們在建立 react element 時，用類似撰寫 HTML 語法的體驗，提高可閱讀性與開發體驗。 使用 Re...
在網頁中常常需要與後端進行資料的溝通，通常是使用API來獲取、修改、或刪除資料。在這篇文章中，要學習如何在 React 中使用 Axios 套件來進行 CRUD...
鯨魚
‧
2024-10-04
本系列文章 GitHub 今天我們要來完成 Todo List 的最後一個主要功能，也就是編輯功能。 這邊先來釐清需求：預計的做法是點擊 Edit 按鈕之後，原...
昨天我們開始React實戰-打造健身房dashboard，今天，我們要開始實作我們的健身房後台管理系統 —— Gym Pro。我們將從建立專案開始，一步步建立起...
接下來幾天會介紹幾個 React 的設計模式，介紹模式時不會說明太多 React 基礎概念，如果對 React 不熟悉的推薦可以讀我之前的筆記文章～今天要介紹...
了解useEffect之前，先來知道 何謂 副作用吧！ 什麼是副作用 (Side Effects)？ 在日常生活中，我們常聽到「副作用」這個詞。例如，當我們服用...
鯨魚
‧
2024-10-03
本系列文章 GitHub 今天我們要持續優化資料管理的部分，目標是使用 useContext 搭配 useReducer，將新增與刪除功能改為使用全域狀態管理。...
今天是Day 18，我們前面學習了許多React的技巧，現在應該要來實作看看。我們來使用 React 開發一個實際的專案 —— 健身房後台 Dashboard。...
Deep clone 又稱深複製，相對淺複製僅是將物件的第一層複製，深複製則是將物件的所有層級都複製一份，深複製當遇到巢狀物件或是陣列時，就會進行深層的遍歷，將...
今天就要來準備實作TodoList了，來看一下昨天的結果圖。 首先開一個新的專案 專案環境建立 使用 create-react-app 建立一個 React 專...
鯨魚
‧
2024-10-02
本系列文章 GitHub 先前我們為了專注於 TypeScript 的使用方式，因此元件間的資料傳遞都是透過 props 進行。但隨著元件和功能越來越多，是不是...
為什麼需要 Server Components? React Server Components 的誕生是為了進一步提升效能和使用者體驗，解決前端開發中的常見問...
今天，我們將聊聊如何提升 React 應用的效能，確保應用能夠在不同情境下高效運行。效能優化是開發高效軟體的關鍵，不僅能提升使用者體驗，還能減少伺服器和用戶端的...
Monica
Jamie
Moscle.dev
Ashley
Jaren
iThome鐵人賽
看影片追技術