Lesson 01：React 簡介與環境建置

1.1 什麼是 React？

React 是由 Facebook（現 Meta）開發的 JavaScript UI 函式庫，用於建構使用者介面。

React 的核心特性

特性	說明
宣告式 (Declarative)	描述「UI 應該長什麼樣」，React 自動處理 DOM 更新
元件化 (Component-Based)	UI 拆成可複用的獨立元件
虛擬 DOM (Virtual DOM)	透過差異比較演算法，只更新真正需要改變的部分
單向資料流 (One-way Data Flow)	資料從父元件流向子元件，更容易追蹤與除錯

React vs 原生 JavaScript

// ============================================================
// 原生 JavaScript — 命令式 (Imperative)
// ============================================================
const container = document.getElementById('app');
const button = document.createElement('button');
let count = 0;
button.textContent = `點擊了 ${count} 次`;
button.addEventListener('click', () => {
  count++;
  button.textContent = `點擊了 ${count} 次`;
});
container.appendChild(button);

// ============================================================
// React — 宣告式 (Declarative)
// ============================================================
function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      點擊了 {count} 次
    </button>
  );
}

宣告式的寫法只要描述「UI 與資料的關係」，React 自動幫你處理 DOM 操作。

---

1.2 環境建置

方法一：Create React App (CRA)

# 建立新專案
npx create-react-app my-app

# 進入專案目錄
cd my-app

# 啟動開發伺服器
npm start

CRA 產生的專案結構：

my-app/
├── node_modules/      # 套件依賴
├── public/
│   ├── index.html     # HTML 模板
│   └── favicon.ico
├── src/
│   ├── App.js         # 主元件
│   ├── App.css        # 主樣式
│   ├── index.js       # 應用程式進入點
│   └── index.css      # 全域樣式
├── package.json       # 專案設定
└── README.md

方法二：Vite（推薦 — 速度更快）

# 建立新專案
npm create vite@latest my-app -- --template react

# 進入專案目錄
cd my-app

# 安裝依賴
npm install

# 啟動開發伺服器
npm run dev

Vite 產生的專案結構：

my-app/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── App.jsx        # 主元件
│   ├── App.css
│   ├── main.jsx       # 進入點
│   └── index.css
├── index.html         # HTML 模板 (在根目錄)
├── package.json
└── vite.config.js     # Vite 設定

CRA vs Vite 比較

比較項目	Create React App	Vite
啟動速度	較慢（Webpack）	極快（ESBuild）
HMR 速度	一般	毫秒級
設定難度	零設定	零設定
生態系	成熟	快速成長
建議	學習用	正式專案推薦

---

1.3 第一個 React 應用程式

進入點 — main.jsx（Vite）或 index.js（CRA）

// main.jsx (Vite) 或 index.js (CRA)
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

// 取得 HTML 中 id="root" 的 DOM 節點
const root = ReactDOM.createRoot(document.getElementById('root'));

// 將 <App /> 元件渲染到該節點
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

React.StrictMode 是什麼？

• 僅在開發環境有作用，生產環境不影響
• 幫助偵測潛在問題：
• 偵測不安全的生命週期方法
• 偵測過時的 API 使用
• 偵測意外的副作用（會刻意呼叫兩次 render）

主元件 — App.jsx

// App.jsx
function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>歡迎來到 React 的世界 🎉</p>
    </div>
  );
}

export default App;

---

1.4 React 的運作原理

虛擬 DOM 流程

1. 狀態改變 (State Change)
       ↓
2. React 建立新的虛擬 DOM 樹
       ↓
3. 新舊虛擬 DOM 進行差異比較 (Diffing)
       ↓
4. 計算最小的 DOM 操作
       ↓
5. 批次更新真實 DOM (Reconciliation)

範例：理解重新渲染

import { useState } from 'react';

function App() {
  const [name, setName] = useState('React');

  console.log('App 元件被渲染了！');

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="輸入名稱"
      />
      <p>每次輸入都會觸發重新渲染，打開 Console 看看！</p>
    </div>
  );
}

export default App;

每當 name 改變，React 會重新呼叫 App 函式，產生新的虛擬 DOM， 然後只更新真正有變化的 <h1> 內容。

---

1.5 常用開發工具

React Developer Tools

• Chrome / Firefox 擴充套件
• 安裝後可在瀏覽器 DevTools 看到 Components 和 Profiler 兩個分頁
• 可以檢視元件樹、props、state、hooks 的即時狀態

VS Code 推薦擴充套件

擴充套件	說明
ES7+ React/Redux/React-Native snippets	快速生成 React 程式碼片段
Prettier	程式碼格式化
ESLint	程式碼風格檢查
Auto Rename Tag	自動重命名配對的標籤

常用程式碼片段快捷鍵

rafce  → React Arrow Function Component Export
rfc    → React Function Component
imp    → import 語句
imr    → import React
ust    → useState snippet
uef    → useEffect snippet

---

1.6 練習題

練習 1：建立你的第一個 React 專案

npm create vite@latest hello-react -- --template react
cd hello-react
npm install
npm run dev

練習 2：修改 App.jsx

將 App.jsx 修改為以下內容，觀察頁面變化：

function App() {
  const studentName = '你的名字';
  const currentDate = new Date().toLocaleDateString('zh-TW');

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>👋 歡迎，{studentName}！</h1>
      <p>今天是 {currentDate}</p>
      <p>你正在學習 React.js</p>
      <p>2 + 3 = {2 + 3}</p>
    </div>
  );
}

export default App;

練習 3：觀察 StrictMode 的雙重渲染

function App() {
  console.log('🔄 App 渲染了！');

  return (
    <div>
      <h1>打開 Console 觀察</h1>
      <p>在開發模式下，你會看到 console.log 被呼叫兩次</p>
      <p>這是 StrictMode 的行為，用來幫你發現潛在問題</p>
    </div>
  );
}

export default App;

---

本課重點回顧

1. React 是一個宣告式的 UI 函式庫
2. 使用 Vite 或 CRA 可以快速建立專案
3. React 透過虛擬 DOM 達成高效的 UI 更新
4. ReactDOM.createRoot().render() 是應用程式的進入點
5. React.StrictMode 在開發環境幫助偵測問題