直接在 HTML 中使用 React (CDN 版)
直接在 HTML 中使用 React 1. 在 中引入 CDN html 2. 中加入 root html 3. 在 前增加 區塊 html // React 邏輯寫在這裡 4. 在 script 中快樂的寫 React html const { useState } = React; functi...
React Hook Form：頂尖表單處理實戰
為什麼需要 React Hook Form？ 在傳統 React 中處理表單（使用 useState），每當您在輸入框打一個字，整個組件就會重新渲染（Rerender）一次。當表單有 20、30 個欄位時，電腦會開始變慢，程式碼也會變得異常臃腫。 React Hook Form 的核心優勢： 效能頂...
React Router 核心指南
核心組件介紹 HashRouter：路由的容器。 Routes：路由的「總機」，用來包裹所有的路徑設定。 Route：定義單一對應關係，例如：/orders 對應到 OrderList 組件。 Link：取代傳統的 標籤，點擊時不會重新整理網頁。 useParams：用來抓取網址上的參數（例如：/o...
useEffect：與外部世界互動的橋樑
什麼是 useEffect？ 當組件「渲染後」需要執行動作（如：抓取資料、訂閱事件、修改 DOM），就要用 useEffect。 useEffect 讓您在組件「渲染後」執行某些操作。這些操作通常不直接參與畫面繪製，而是與外部世界互動。 核心觀念： React 的渲染過程應該是純粹的（輸入什麼資料就...
useRef：掌握 React 的「儲物櫃」與 DOM 操控
什麼是 useRef？ useRef 回傳一個帶有 current 屬性的物件。它有兩個最主要的用途： 1. 存取 DOM 元素：直接抓取網頁上的 HTML 標籤（例如讓輸入框聚焦）。 2. 儲存「不需要渲染」的資料：存放在裡面的資料改變時，不會觸發組件重新渲染。 核心觀念： 如果您希望改了某個值，...
useState：管理組件的「記憶」
useState ：管理組件的「記憶」 什麼是 useState？ useState 讓組件能記住資訊（如：輸入框文字、API 回傳的資料）。 在 React 中，組件的畫面是由「資料」驅動的。當資料改變時，畫面必須跟著更新。 useState 是 React 最基礎的 Hook，它的作用是為函數組...
Redux Toolkit (RTK) 狀態管理實戰
核心概念 Store：存放所有狀態的地方（大倉庫）。 Slice：將狀態邏輯切片。包含狀態（Initial State）和改變狀態的方法（Reducers）。 Dispatch：發送動作（Action）的指令。 Selector：從倉庫裡挑出你要的那筆資料。 範例：ERP 庫存管理 codepen ...
Swiper 簡單應用：打造流暢的輪播效果
Swiper 簡單應用 引用 html 基本 HTML 架構 html CSS css .swiperslide { height: auto; } img { display: block; width: 100%; height: 100%; objectfit: cover; } JavaSc...
使用 Vite 建立 React 專案
使用 Vite 建立 React 專案 1. 打開終端機（Terminal），輸入以下指令： bash 使用 npm 建立專案 npm create vite@latest 2. 輸入專案名稱 圖片https://hackmd.io/uploads/r1NbgHdDbl.png 3. 選擇框架 Re...