React編程 教學課程

上門編程教學課程內容

課程簡介

本課程專為希望快速入門 React.js 前端框架的學員設計，用三小時時間掌握 React 的核心概念、元件設計、狀態管理與資料流操作，建立可重用且高效的前端開發思維。

React 是現代前端開發中最受歡迎的框架之一，由 Meta（Facebook）開發，廣泛應用於 Web 應用、行動應用（React Native）與跨平台產品。
課程以「由淺入深、以實作為主」為教學核心，學員將從基礎 JSX 語法、元件化開發到事件互動與資料綁定，逐步構建一個實際的前端應用介面。

 

適合對象：

• 想進入前端開發領域的初學者

• 已熟悉 HTML / CSS / JavaScript 想升級為框架開發者者

• 想使用 React 開發 Web、Dashboard 或 SPA 的工程師

• 有志於學習 Next.js、React Native、Redux 的學員

學習成果：

• 理解 React 核心理念（元件化、宣告式 UI、單向資料流）

• 能使用 JSX 建立可重用的元件

• 掌握狀態管理與事件處理

• 熟悉 React Hooks（如 useState、useEffect）

• 能獨立建立中小型前端專案並與 API 串接

---

 

課程時長

3 小時（180 分鐘）
理論講解與實作比例為 3 : 7

---

 

課程大綱

第一部份：React 基礎與開發環境建置（30 分鐘）

• React 架構理念與生態圈概述

• React vs Vue / Angular：理念與開發差異

• 開發環境準備：Node.js + Vite / Create React App

• 專案結構說明（src、components、assets）

• 實作：建立第一個 React 專案並啟動開發伺服器

---

第二部份：JSX 語法與元件化概念（40 分鐘）

• JSX 介紹：HTML + JavaScript 的融合語法

• 建立自訂元件（Function Component）

• Props（傳入參數）與組件重用設計

• 建立組件樹與結構化畫面

• 實作：製作「個人名片元件」、「產品卡片組」

---

第三部份：狀態管理與事件處理（40 分鐘）

• useState Hook：建立與更新元件狀態

• 事件處理（onClick、onChange、onSubmit）

• 雙向資料綁定（Controlled Components）

• 表單輸入與動態畫面更新

• 實作範例：建立「留言板與即時顯示區塊」

---

第四部份：資料流與副作用 Hook（40 分鐘）

• useEffect Hook：處理生命週期與非同步動作

• 串接外部 API（fetch / axios）

• 條件渲染與清單渲染（map、filter）

• 狀態提升（State Lifting）實作

• 實作練習：建立「商品清單頁面」，自 API 抓取資料並顯示

---

第五部份：專案結構規劃與延伸應用（30 分鐘）

• 元件樣式化方法（CSS Modules / Styled Components / Tailwind CSS）

• Route 導覽：React Router 基礎應用

• 簡易全域狀態管理思維（Context API）

• 部署與最佳化（Vercel / Netlify）

• 延伸方向：Next.js、Redux、React Query、React Native

---

 

課程特色

• 三小時濃縮 React 核心概念與基礎程式實作。

• 真實專案導向，從元件設計到 API 整合一次學會。

• 建立現代前端開發思維，打下進階框架學習基礎。

• 與 Next.js、Redux、TypeScript 無縫銜接。