當呼叫 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...
Day 1: 1131228一、目標:開發一個任務管理系統，並運用 MVC (model view controller)架構二、預計使用工具:(一)前端: J...
在網頁中常常需要與後端進行資料的溝通，通常是使用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 應用的效能，確保應用能夠在不同情境下高效運行。效能優化是開發高效軟體的關鍵，不僅能提升使用者體驗，還能減少伺服器和用戶端的...
鐵人賽進行到這裡，也來到第17天囉！ 前面我們學習不少React的基礎概念，現在就來做個綜合練習，把先前所學的內容做練習。要做的項目是TodoList，這小專案...
鯨魚
‧
2024-10-01
本系列文章 GitHub 目前的 Todo List 在輸入欄位為空白時仍然可以送出。今天，我們要來修正這個問題，並為其新增錯誤提示訊息。此外，為了練習我們在...
今天，我們將學習 React 中兩個重要的程式碼重用技巧：高階元件（HOC）和渲染屬性（Render Props）。這些技巧是提升程式碼可讀性與重用性的工具，能...
本系列文章 GitHub 今天我們要將原本寫死的 Todo List 資料轉為使用實際輸入的內容。由於在先前的篇章已經使用過 useState，這次我們將透過...
今天我們要來聊聊如何管理React專案，好的專案結構可以讓其他開發者很清楚該去哪邊找到檔案。 為什麼專案結構很重要？ 好的專案結構有助於提升程式的可讀性和維護性...
React 16 Suspense 和 React Lazy 其實在 React 16 時就有 Suspense，需要搭配 lazy 使用。使用原因是為了優化效...
前言 在現代前端開發中，與後端進行資料交換是常見的需求。透過 HTTP 請求，我們可以將資料送出並取得結果。這篇文章將介紹如何使用 TypeScript 實作...
在 React 中，處理表單是常見的事情，通常使用onChange 事件處理器來去做資料的更新。表單可能會有多種欄位，會將每個欄位拆開來介紹，以下分別為各種類型...
鯨魚
‧
2024-09-29
本系列文章 GitHub 之前我們將新增 todo 的 input 以及按鈕放在 App.tsx，現在我們要將它提出為獨立的元件： <div classN...
今天我們要來聊聊 React 生態系中的兩個實用的套件：React Query 和 React Hook Form。 React Query： React Qu...
Ashley
Moscle.dev
Jaren
Monica
Jamie
Mao
iThome鐵人賽
看影片追技術