React 環境建置

在開始撰寫 React 之前，你需要先建立開發環境。本篇將介紹如何使用現代工具快速建立 React 專案。

事前準備

在開始之前，請確保你的電腦已安裝：

Node.js（建議 18.0 以上版本）：下載 Node.js
程式碼編輯器：推薦使用 VS Code

你可以在終端機輸入以下指令確認 Node.js 是否安裝成功：

node -v
npm -v

如果有顯示版本號碼，表示安裝成功。

使用 Vite 建立 React 專案

Vite 是目前最推薦的 React 開發工具，它的特色是啟動速度快、熱更新即時，開發體驗非常好。

在終端機執行以下指令來建立專案：

# 建立專案（my-react-app 可以換成你想要的專案名稱）
npm create vite@latest my-react-app -- --template react

# 進入專案資料夾
cd my-react-app

# 安裝依賴套件
npm install

# 啟動開發伺服器
npm run dev

執行 npm run dev 後，終端機會顯示類似這樣的訊息：

  VITE v5.x.x  ready in xxx ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

打開瀏覽器，前往 http://localhost:5173/，你會看到 React 的歡迎畫面，恭喜你成功建立了第一個 React 專案！

如果你想使用 TypeScript，可以將 --template react 改成 --template react-ts。

專案結構介紹

建立完成後，你的專案資料夾結構大致如下：

my-react-app/
├── node_modules/      # 依賴套件（不需要手動修改）
├── public/            # 靜態資源
│   └── vite.svg
├── src/               # 原始碼（主要工作目錄）
│   ├── assets/        # 圖片等資源
│   ├── App.css        # App 元件的樣式
│   ├── App.jsx        # App 元件（主要元件）
│   ├── index.css      # 全域樣式
│   └── main.jsx       # 程式進入點
├── index.html         # HTML 模板
├── package.json       # 專案設定與依賴清單
└── vite.config.js     # Vite 設定檔

重要的檔案說明：

src/main.jsx：程式的進入點，負責將 React App 渲染到 HTML 頁面
src/App.jsx：主要的 React 元件，你可以從這裡開始撰寫你的應用程式
index.html：HTML 模板，包含一個 <div id="root"> 作為 React 的掛載點

檔案內容解析

讓我們來看看幾個重要檔案的內容：

main.jsx（程式進入點）

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import './index.css'

// 將 App 元件渲染到 HTML 中 id 為 root 的元素
createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
)

這段程式碼做的事情：

引入 React 和相關模組
引入主要的 App 元件
使用 createRoot 找到 HTML 中的 #root 元素
將 App 元件渲染到該元素中

StrictMode 是 React 的開發輔助工具，它會在開發環境中幫你檢查潛在問題，例如不安全的生命週期方法或過時的 API。在正式環境中不會有任何影響。

App.jsx（主要元件）

import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
      </div>
    </>
  )
}

export default App

這是一個簡單的計數器元件，包含：

useState：React 的 Hook，用來管理元件狀態
count：目前的計數值
setCount：更新計數值的函式
點擊按鈕會執行 setCount，讓計數值加 1

開始你的第一個修改

現在讓我們來修改 App.jsx，寫一個簡單的 Hello World：

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>這是我的第一個 React 應用程式</p>
    </div>
  )
}

export default App

存檔後，瀏覽器會自動更新顯示你的修改，這就是 Vite 的熱更新 (Hot Module Replacement, HMR) 功能。

常用指令

在專案開發過程中，你會經常使用這些指令：

指令	說明
`npm run dev`	啟動開發伺服器
`npm run build`	打包專案（產生正式環境用的檔案）
`npm run preview`	預覽打包後的結果

其他建立專案的方式

除了 Vite，還有其他方式可以建立 React 專案：

Next.js（推薦用於正式專案）

Next.js 是基於 React 的全端框架，提供伺服器端渲染 (SSR)、靜態網站生成 (SSG) 等功能：

npx create-next-app@latest

Create React App（已不推薦）

Create React App (CRA) 曾經是 React 官方推薦的建立工具，但因為效能和維護問題，目前已不再推薦使用。如果你看到舊的教學使用 CRA，建議改用 Vite。