如何安裝React：從零到專案啟動，新手也能輕鬆上手的完整指南

Byadmin

是不是曾經遇過朋友眉頭一皺，問說「欸，React到底要怎麼安裝啊？我弄好久都弄不好耶！」或是自己剛踏入前端世界，對著密密麻麻的教學文感到手足無措呢？這種情境，相信很多剛開始學習前端開發的夥伴們都似曾相識吧？別擔心，今天這篇文就是要來幫大家徹底解決「如何安裝React」這個大哉問的！我會用最白話、最詳細的方式，手把手帶你從頭到尾，輕鬆建立起你的第一個React應用程式。

簡單來說，要在您的電腦上「如何安裝React」，最推薦也最快速的方式就是透過Node.js環境下的工具來自動建立專案骨架。您只需要安裝Node.js（它會一併安裝好npm，或是您也可以選擇安裝Yarn），然後在您的終端機（或稱命令提示字元）輸入一行指令，例如使用Create React App工具的 npx create-react-app my-react-app，或是更現代、速度更快的Vite工具的 npm create vite@latest my-react-app -- --template react，就能輕鬆啟動您的第一個React應用程式了！接下來，您只要進入新建立的專案資料夾，執行啟動指令，就能在瀏覽器中看到您的React應用囉！

Table of Contents

為什麼學會安裝React這麼重要？

你可能會想，只是安裝個東西，有那麼多學問嗎？哎呀，當然有囉！就像蓋房子一樣，打地基可是最重要的第一步！React作為目前業界最受歡迎、應用最廣泛的前端函式庫之一，它為我們打造互動性強、效能優異的單頁應用程式（SPA）提供了絕佳的工具。根據許多開發者社群的統計，例如Stack Overflow每年的開發者調查，React一直都穩居前端框架喜愛度榜單的前幾名，足見其影響力與重要性。

學會「如何安裝React」，不僅僅是學會敲幾行指令那麼簡單。這其實是在為你的前端開發旅程打下堅實的基礎，讓你能夠：

  • 快速啟動專案： 不用從零開始設定一大堆複雜的建置工具，專注在程式邏輯上。
  • 理解開發環境： 認識Node.js、npm、開發伺服器等重要概念，這些都是現代前端開發不可或缺的環節。
  • 解決基本問題： 在未來的開發過程中，遇到問題時能更清楚問題可能出在哪裡，有效排除障礙。

安裝React前的準備：萬丈高樓平地起！

在我們真正開始「如何安裝React」之前，有幾個先決條件得準備好。就像廚師做菜前要備好料一樣，這些工具是我們開發React專案的基石。

1. Node.js 與 npm/Yarn：開發React的基石

嘿，這裡可能會有新手朋友問：「React不是JavaScript函式庫嗎？為什麼要安裝Node.js呢？」這問題問得真好！答案是，雖然React是在瀏覽器裡跑的JavaScript，但我們的開發過程，從建立專案、安裝各種套件（像是React本身、各種UI函式庫），到啟動一個小型的開發伺服器，甚至將我們的程式碼轉換成瀏覽器能理解的樣子（這個過程叫做「打包」或「編譯」），這些都！需！要！Node.js環境才能執行。可以把它想像成一個幕後的「工廠」，幫我們把所有的開發工具都整合起來。

如何安裝 Node.js？

安裝Node.js非常簡單，你只需要：

  1. 前往官方網站： 打開你的瀏覽器，搜尋「Node.js」或直接輸入 nodejs.org。
  2. 選擇推薦的LTS版本： 在官網首頁，你會看到兩個下載選項：一個是「LTS」（長期支援版，Long Term Support），另一個是「Current」（最新功能版）。我會強烈建議新手選擇LTS版本。為什麼呢？LTS版本經過充分測試，穩定性最高， Bug相對少，也比較不會遇到奇奇怪怪的套件相容性問題，簡直是新手福音啊！
  3. 下載並安裝： 點擊LTS版本下載後，執行安裝檔。過程中基本上就是一直按「下一步」就好，保持預設設定，它會自動幫你把Node.js以及npm（Node.js的套件管理器，我們用來安裝其他套件的工具）都安裝好。

確認 Node.js 和 npm 是否安裝成功

安裝完畢後，我們要確認一下這個「工廠」有沒有成功啟動。

  1. 開啟終端機：

    • Windows 用戶： 可以在搜尋欄輸入「cmd」或「PowerShell」來開啟。我個人會推薦安裝 Windows Terminal，用起來更舒服。
    • macOS 用戶： 開啟「終端機」應用程式（可以在「應用程式」→「工具程式」中找到）。
  2. 輸入指令檢查版本： 在終端機裡，依序輸入以下指令並按下Enter：

    • node -v：如果成功，會顯示你安裝的Node.js版本號（例如：v18.17.0）。
    • npm -v：如果成功，會顯示npm的版本號（例如：9.6.7）。

    如果你看到版本號，恭喜你，Node.js和npm已經準備就緒囉！

npm 與 Yarn：套件管理器的選擇

提到npm，就不得不提一下它的好兄弟——Yarn。它們都是JavaScript的套件管理器，功能基本上大同小異，都是幫我們下載、管理專案所需的各種第三方函式庫。

那麼，該選哪一個呢？ 對於新手來說，一開始用npm就已經很夠用了，因為它會隨著Node.js一起安裝。如果你對速度有更高要求，或者未來想嘗試不同的工具生態系，Yarn也是個很棒的選擇。

以下我整理了一個簡單的表格，讓你快速了解兩者的差異：

特性 npm Yarn
起源 Node.js官方預設 Facebook開發，為了解決npm早期的一些問題（速度、安全性）
安裝方式 隨Node.js安裝，無需額外動作 需額外安裝：npm install -g yarn
指令 npm install, npm start, npm run build yarn install (或 yarn), yarn start, yarn build
速度 較早期版本慢，但新版已大幅優化 以速度著稱，尤其是平行安裝
鎖定檔 package-lock.json yarn.lock
優勢 預設安裝，生態系龐大，資料庫完善 安裝速度快，離線模式，更好的安全性
適合對象 新手入門，多數專案都適用 追求速度與效率的開發者，大型專案

看吧，其實差不多對不對？我個人現在是兩種都會用，看專案當初是用哪種工具建置的就順著用。如果你想安裝Yarn，一樣在終端機輸入：npm install -g yarn 就可以囉！安裝完後，記得用 yarn -v 確認一下版本。

2. 終端機與程式碼編輯器：你的左右手

除了Node.js，你還需要一個趁手的工具來輸入指令和撰寫程式碼。

  • 終端機（Terminal）： 這就是你跟電腦「對話」的介面。我們所有的安裝指令、啟動專案指令，都是在這裡輸入的。前面已經提過了，Windows可以用CMD或PowerShell，macOS用內建的「終端機」App。
  • 程式碼編輯器（Code Editor）： 這是你寫程式的地方。市面上有許多選擇，但我會真心推薦，也幾乎是業界標準的——Visual Studio Code (VS Code)。它輕量、功能強大、擴充性極佳，而且完全免費！趕快去 code.visualstudio.com 下載一個吧，絕對不會後悔的！

如何安裝React：兩種最主流、最輕鬆的方式

好啦，萬事俱備，只欠東風！現在，我們就要來實際操作「如何安裝React」了。目前，建立React專案最常見、也最推薦給新手的方式有兩種：一個是老牌的 Create React App (CRA)，另一個是新興的 Vite。這兩者都能幫我們快速建立一個React專案的樣板，省去手動配置Webpack、Babel等複雜工具的麻煩。

方法一：使用 Create React App (CRA) – 穩定又可靠的老朋友

Create React App (簡稱CRA) 是由Facebook官方維護的工具，它的目標就是讓新手能夠「零配置」地快速啟動一個React專案。它把所有複雜的建置工具（像Webpack、Babel）都封裝起來了，你不需要去理解那些細節，只要專心寫React程式碼就好。對於剛接觸React的你來說，CRA絕對是一個友善又穩定的起點。

步驟一：開啟你的終端機

找到你剛剛準備好的終端機（CMD、PowerShell、macOS終端機），開啟它。

步驟二：執行 Create React App 指令

在終端機中，輸入以下指令，然後按下Enter。 

npx create-react-app my-react-app

讓我來解釋一下這行指令：

  • npx： 這是npm 5.2.0版本後推出的一個工具，它允許你在不全域安裝套件的情況下執行指令。這裡的意思是「幫我執行一次create-react-app這個工具」。
  • create-react-app： 這就是我們用來建立React專案的工具名稱。
  • my-react-app： 這是你的新React專案的名稱。你可以把它改成任何你喜歡的名字，像是 my-first-react-app、todo-list-app 都可以，但記得不要用大寫字母，也不要包含特殊符號喔！

指令執行後，你會看到終端機開始下載、安裝一大堆東西。這需要一點時間，請耐心等待，它會幫你把React本身、React DOM、以及所有開發環境所需的依賴套件都準備好。

步驟三：進入專案資料夾

當CRA安裝完成後，它會提示你一些接下來的指令。首先，我們要進入剛剛建立的專案資料夾。 

cd my-react-app

cd 是 “change directory” 的縮寫，就是「切換目錄」的意思。

步驟四：啟動開發伺服器

現在，我們已經在專案資料夾裡了，可以啟動開發伺服器，看看我們的React應用長什麼樣子！ 

npm start

或者，如果你是使用Yarn： 

yarn start

執行這行指令後，你的瀏覽器會自動開啟一個新的分頁，通常是 http://localhost:3000/，然後你就會看到一個寫著「Edit src/App.js and save to reload.」的React Logo畫面！恭喜你，你的第一個React專案成功啟動了！

我的小提醒： 如果瀏覽器沒有自動開啟，你可以手動在瀏覽器網址列輸入 http://localhost:3000/ 試試看喔！

方法二：擁抱 Vite – 新時代的極速體驗

Vite (讀作 /viːt/，像是法文的「快」) 是一個相對較新的前端建置工具，由Vue.js的作者尤雨溪開發。它在前端開發社群中迅速竄紅，主要原因就是它的「快」！相較於CRA基於Webpack的建置流程，Vite利用了瀏覽器原生的ES模組（ES Modules）特性，實現了真正的「光速啟動」與「熱模組替換（HMR）」。對於追求開發效率、或是電腦效能沒那麼強大的朋友來說，Vite絕對是你的新寵兒！

步驟一：開啟你的終端機

跟CRA一樣，先開啟你的終端機。

步驟二：執行 Vite 專案建立指令

在終端機中，輸入以下指令並按下Enter： 

npm create vite@latest

或者，如果你是使用Yarn： 

yarn create vite

這行指令會啟動Vite的互動式建立專案流程。它會先問你幾個問題：

步驟三：選擇框架與變體

  1. Project name: (專案名稱)

    輸入你的專案名稱，例如 my-react-vite-app，然後按Enter。

  2. Select a framework: (選擇一個框架)

    這裡會列出Vue、React、Preact等等。用鍵盤的上下箭頭選擇 React，然後按Enter。

  3. Select a variant: (選擇一個變體)

    React框架下通常會有 JavaScript 和 TypeScript 兩種變體。對於新手，我建議先選擇 JavaScript，然後按Enter。等你熟悉了React和JavaScript之後，再嘗試TypeScript會更好上手。

步驟四：進入專案資料夾與安裝依賴

Vite會提示你接下來的步驟。首先，一樣是進入專案資料夾： 

cd my-react-vite-app

接著，由於Vite只幫你建立好專案結構，還沒安裝那些必要的套件，所以你需要手動執行安裝指令： 

npm install

或者，如果你是使用Yarn： 

yarn

這個步驟跟CRA一樣，都需要一點時間來下載安裝套件。

步驟五：啟動開發伺服器

套件安裝完成後，你就可以啟動開發伺服器了！ 

npm run dev

或者，如果你是使用Yarn： 

yarn dev

執行後，你會在終端機看到類似 http://localhost:5173/ 這樣的網址（Vite預設的埠號通常是5173）。在瀏覽器中開啟這個網址，你就會看到Vite和React的歡迎頁面啦！是不是超級快呢？

CRA 與 Vite 的抉擇：我該選哪個呢？

看到這裡，你可能又會想：「這兩個都能建立React專案，那我到底該選哪一個來『如何安裝React』呢？」這是一個非常好的問題！我的建議是：

  • 如果你是剛開始學React，想追求最穩定、最官方、最少學習曲線的體驗，那就選Create React App (CRA)。 它的社群支援非常強大，遇到問題很容易找到解決方案。
  • 如果你喜歡嘗試新技術，追求極致的開發速度，或是你的電腦效能比較吃緊，那就選Vite。 它的熱模組替換（HMR）速度真的會讓你驚豔，開發體驗超級流暢。

我自己兩者都會用，新專案我現在會優先考慮Vite。以下表格幫你快速比較兩者的特點：

特性 Create React App (CRA) Vite
建置工具 Webpack Rollup (開發模式下利用原生ESM)
啟動速度 較慢，需完整打包 極快，利用瀏覽器原生ESM
熱模組替換 (HMR) 較慢 極快，瞬間更新
設定複雜度 零配置 (但要修改配置需「eject」) 預設配置少，但自定義較彈性
套件支援 極佳，社群龐大 良好，但對於一些老舊套件可能需額外配置
對新手的友好度 非常友好，上手快 友好，但理解其工作原理可能需更多背景知識
推薦情境 穩定的專案，教學，傳統需求 追求效率，新專案，中小型專案

認識你的第一個React專案：安裝後的探索

恭喜你，已經成功「如何安裝React」並啟動了你的第一個專案！現在，你可能會好奇，這些指令到底變出了什麼東西？我們的程式碼要寫在哪裡呢？別急，我來帶你簡單逛逛這個新家。

用VS Code打開你的專案資料夾（例如 `my-react-app` 或 `my-react-vite-app`），你會看到類似這樣的結構： 

my-react-app/
├── node_modules/
├── public/
├── src/
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   └── ... 其他檔案 (如 logo.svg, reportWebVitals.js, setupTests.js)
├── .gitignore
├── package.json
├── README.md
└── ... (Vite可能會有 vite.config.js 等)

專案文件結構概覽

  • node_modules/： 這是你專案所有依賴套件（包括React本身、你未來安裝的各種UI庫等等）的家。這個資料夾通常非常大，而且你不需要去動裡面的東西。它在版本控制（如Git）中會被忽略，因為裡面的東西可以透過 `package.json` 重新安裝。
  • public/： 存放公用資源，例如專案的HTML入口檔案（通常是 `index.html`）、網站圖示（favicon.ico）等等。這些檔案不會被打包工具處理，會直接複製到最終的部署目錄。
  • src/： 這就是你的程式碼樂園！ 幾乎所有你撰寫的React組件、樣式、邏輯都會放在這個資料夾裡。它是整個應用程式的核心。
  • .gitignore： Git版本控制的設定檔，告訴Git哪些檔案或資料夾不需要被追蹤（例如 `node_modules`）。
  • README.md： 專案的說明文件，通常會包含專案介紹、如何安裝、如何執行、如何部署等等資訊。

`package.json`：專案的身份證與說明書

這個檔案非常重要，它就像你專案的「身份證」和「說明書」。裡面記錄了：

  • 專案基本資訊： 專案名稱 (name)、版本號 (version) 等。
  • 指令腳本 (scripts)： 這裡定義了你可以執行的各種指令，像是 npm start (CRA) 或 npm run dev (Vite) 這些就是在這裡定義的。你也可以定義自己的客製化指令喔！

    {
  "name": "my-react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    // ... 其他依賴
  },
  "scripts": {
    "start": "react-scripts start", // CRA的啟動指令
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  // ... 其他設定
}
  • 依賴套件 (dependencies)： 列出了你的專案在執行時需要的所有套件，以及它們的版本範圍。當你執行 npm install 或 yarn 時，就是根據這裡的清單去 `node_modules` 裡下載這些套件的。
  • 開發依賴 (devDependencies)： 列出了只在開發階段需要，但部署到生產環境時不需要的套件，例如測試工具、代碼檢查工具等等。

`src` 資料夾：你的程式碼樂園

打開 src 資料夾，你會看到一些預設的檔案。對於新手來說，你主要會修改的會是 App.js 和 index.js (或 main.jsx)。

  • index.js (或 main.jsx)： 這是React應用的入口檔案。它負責將你的主React組件（通常是 <App />）渲染到HTML檔案（public/index.html）中的特定元素上。你可以把這個檔案想像成整個React應用程式的「發電機」或「啟動器」。

    // CRA的index.js範例
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App'; // 導入App組件

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App /> // 將App組件渲染到id為'root'的HTML元素上
  </React.StrictMode>
);
  • App.js： 這是你的主應用組件。你一開始在瀏覽器上看到的畫面，就是從這個檔案開始渲染的。你可以把它想像成你應用程式的「根基」，所有的其他組件都會以它為中心，一層一層地嵌套進去。

    // CRA的App.js範例
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App; // 導出App組件供其他檔案使用

以後，你就可以在這個 App.js 裡面開始修改、增添你的UI和邏輯了，非常自由！

新手常見問題與排疑解惑：不再卡關！

我在教學這麼多學生的經驗裡，發現新手在「如何安裝React」以及剛開始專案時，最容易遇到一些「卡關」的問題。別怕，我把最常見的幾個問題都整理出來了，希望能幫你少走彎路！

Q1：Node.js 到底要裝哪個版本才好？LTS 是什麼意思？

這是一個非常關鍵的問題，也是許多新手容易搞混的地方！

Node.js的版本分為兩種：

  1. LTS (Long Term Support) 長期支援版：

    • 意思是： 這些版本被設計為長期穩定且安全。它們會獲得較長時間的錯誤修復和安全更新。
    • 適用對象： 我強烈推薦給所有新手以及生產環境使用！ 因為它們最穩定，與各種套件的相容性最好，可以大大減少遇到奇怪問題的機率。你不需要追最新功能，而是追求穩定性。
  2. Current (最新功能版)：

    • 意思是： 這些版本包含最新的Node.js功能和改進。它們的更新頻率較高，但穩定性可能不如LTS版本，且支援週期較短。
    • 適用對象： 主要是那些想要嚐鮮、探索Node.js最新功能，或是為特定功能做測試的開發者。不建議新手使用。

所以，總結來說，新手請務必選擇Node.js官方網站上標示為「LTS」的版本來安裝！ 這樣能讓你的React安裝和開發過程更加順暢。

Q2：我裝了 Node.js，但 `npm` 指令還是不能用怎麼辦？

啊哈！這也是很常見的狀況，通常有幾個可能的原因：

  1. 環境變數問題 (Windows最常見)：

    • 當你安裝Node.js時，它通常會自動將Node.js和npm的路徑加到你的系統環境變數中。但有時候，這個步驟會出錯，或者你安裝後沒有重啟終端機。
    • 解決方法：

      • 重啟終端機： 最簡單的解決方法就是先關閉所有開啟的終端機視窗，然後重新開啟一個新的終端機。通常這樣就能解決問題了。
      • 檢查環境變數 (Windows)： 如果重啟無效，你可能需要手動檢查一下系統環境變數的「Path」裡，有沒有包含Node.js的安裝路徑（通常是在 C:\Program Files\nodejs\）。如果沒有，需要手動添加。
  2. 安裝過程出錯：

    • 極少數情況下，Node.js的安裝包可能在下載或安裝過程中損壞。
    • 解決方法： 嘗試重新下載Node.js的安裝包，然後再次執行安裝。
  3. 多版本Node.js管理器：

    • 如果你之前使用過NVM (Node Version Manager) 或類似的工具來管理多個Node.js版本，可能會導致預設的npm路徑不正確。
    • 解決方法： 確保你切換到了一個有效的Node.js版本，並且該版本包含了可用的npm。例如，使用NVM的 nvm use [version] 指令。

Q3：為什麼我的 `create-react-app` 跑超慢，甚至失敗了？

這種情況我也遇過，真的會讓人很挫折！幾個可能的原因和解決方案：

  1. 網路環境不佳：

    • CRA在安裝過程中需要從npm倉庫下載大量的套件，如果你的網路不穩定或速度慢，就容易導致超時或失敗。
    • 解決方法：

      • 切換網路： 嘗試使用更穩定的Wi-Fi或有線網路。
      • 更換npm鏡像源 (Registry)： 有些地區的網路連接npm官方源速度較慢。你可以嘗試將npm的鏡像源更換為淘寶鏡像或其他國內的鏡像源，速度會快很多。

        npm config set registry https://registry.npmmirror.com

        （這是淘寶鏡像源的指令，如果之後想換回官方源，執行 npm config set registry https://registry.npmjs.org/）

  2. 磁碟空間不足：

    • `node_modules` 資料夾通常會佔用大量空間，如果你的硬碟空間不足，安裝就會失敗。
    • 解決方法： 清理硬碟空間，確保有足夠的可用空間。
  3. 防火牆或代理設置：

    • 某些防火牆或公司代理設置可能會阻擋npm的下載請求。
    • 解決方法： 暫時關閉防火牆，或配置npm使用代理伺服器（如果你的網路環境需要）。
  4. NPM緩存問題：

    • 有時候npm的緩存資料會損壞，導致安裝失敗。
    • 解決方法： 清理npm緩存：npm cache clean --force，然後再重新執行 `create-react-app` 指令。

Q4：Vite 啟動後，瀏覽器上什麼都沒看到？

嗯，Vite雖然快，但如果沒看到畫面，可能的原因也很明確：

  1. 忘記安裝依賴套件：

    • Vite的專案建立指令 npm create vite@latest 只會幫你建立專案骨架，不會自動安裝依賴套件！ 這跟CRA有點不同。
    • 解決方法： 進入專案資料夾後，請務必執行 npm install (或 yarn) 來安裝所有必要的套件，然後再執行 npm run dev (或 yarn dev)。
  2. 瀏覽器快取：

    • 有時候瀏覽器會快取舊的內容，即使伺服器啟動了，也可能顯示舊的或空白頁面。
    • 解決方法： 嘗試強制重新整理瀏覽器頁面 (Windows: Ctrl + F5 / macOS: Cmd + Shift + R)，或清除瀏覽器快取。
  3. 埠號衝突：

    • Vite預設使用的埠號（例如5173）可能被你電腦上的其他程式佔用了。
    • 解決方法： 通常Vite會自動尋找下一個可用的埠號。你也可以嘗試在 vite.config.js 中手動指定一個不同的埠號。
  4. Vite 配置問題：

    • 如果你手動修改過 vite.config.js，可能是配置錯誤導致無法啟動。
    • 解決方法： 檢查 vite.config.js 檔案，確保沒有語法錯誤或邏輯問題。如果是剛建立的專案，通常這個檔案不會有問題。

Q5：錯誤訊息 `Error: Cannot find module ‘react’` 是什麼意思？

看到這種錯誤訊息，通常代表你的React套件沒有被正確安裝或找到。

它可能來自以下幾個原因：

  1. 忘記執行 `npm install`：

    • 這是最常見的原因！專案建立後，如果你沒有在專案資料夾裡執行 `npm install` (或 `yarn`)，那麼 `node_modules` 資料夾就不存在，裡面的 `react` 套件當然也就不存在了。
    • 解決方法： 進入你的專案資料夾，執行 npm install 或 yarn。
  2. `node_modules` 資料夾損壞或不完整：

    • 有時候，下載過程可能中斷，導致 `node_modules` 裡面的套件不完整。
    • 解決方法：

      • 先刪除專案資料夾裡的 `node_modules` 資料夾。
      • 刪除 `package-lock.json` (如果用npm) 或 `yarn.lock` (如果用yarn)。
      • 然後重新執行 npm install 或 yarn。
  3. 環境變數或Node.js問題：

    • 如果你的Node.js環境本身就不太正常，也可能導致套件找不到。
    • 解決方法： 檢查Node.js和npm是否正常工作（如Q2所述）。

Q6：我可以在沒有網路的情況下安裝 React 嗎？

嗯… 嚴格來說，首次安裝React或建立React專案時，你需要網路連線。 因為不論是CRA還是Vite，它們都需要從npm的遠端倉庫下載大量的React函式庫本身、以及所有開發時需要的工具和依賴套件。這些套件都儲存在網路上，沒有網路就無法下載。

但是，一旦你成功建立了一個React專案，並且所有的 `node_modules` 資料夾都已經存在你的電腦上了，那麼：

  • 你可以離線工作： 你可以在沒有網路的情況下，打開你的程式碼編輯器，繼續編寫React組件。
  • 你可以離線啟動開發伺服器： 只要所有依賴都已經在 `node_modules` 裡，你就可以執行 `npm start` (或 `npm run dev`) 來啟動開發伺服器，並在瀏覽器中看到你的應用程式。
  • 新的套件需要網路： 如果你之後想在專案中安裝新的第三方React套件（例如一個UI組件庫），那麼你就又需要網路連線來下載這些新的套件了。

所以，總之，第一次「如何安裝React」和下載依賴時，網路是絕對必要的喔！

Q7：如果我不需要這麼多「自動設定」，想手動安裝 React 怎麼辦？

你這是問到點子上了！這問題很棒，代表你對React的內部運作開始產生好奇心了。

CRA和Vite之所以受歡迎，就是因為它們幫我們做了很多事情，像是：

  • JSX 轉換： React程式碼裡會寫JSX（一種JS和HTML混寫的語法），但瀏覽器不認識JSX，需要Babel這種工具將其轉換成純JavaScript。
  • 模組打包： 你的React專案可能會有幾十個甚至上百個JS檔案，瀏覽器一個一個載入效率很差。Webpack或Rollup這種「打包工具」會把所有檔案打包成少數幾個，優化載入速度。
  • 開發伺服器： 啟動一個可以即時監聽檔案變動、自動刷新瀏覽器的開發伺服器。
  • 優化壓縮： 部署到生產環境前，自動壓縮程式碼、圖片等等，以提升網站效能。

如果沒有CRA或Vite，你需要手動去配置這些工具：

  1. 安裝必要的套件：

    • react 和 react-dom (React核心)
    • webpack (打包工具)
    • webpack-cli (Webpack命令列介面)
    • webpack-dev-server (開發伺服器)
    • babel-loader, @babel/core, @babel/preset-react, @babel/preset-env (Babel及其React預設)
    • html-webpack-plugin (自動生成HTML檔案)
    • css-loader, style-loader (處理CSS)
  2. 配置Webpack： 建立 webpack.config.js 檔案，詳細設定入口、出口、各種loader、plugin等等。
  3. 配置Babel： 建立 .babelrc 檔案，設定要使用的preset。
  4. 建立HTML入口檔案： 手動撰寫 index.html。
  5. 定義npm scripts： 在 package.json 中定義啟動開發伺服器和建置專案的指令。

你看看，這是不是一大堆設定？對於新手來說，這簡直是惡夢一場！所以，我個人是不建議新手一開始就嘗試手動配置。先用CRA或Vite把React跑起來，理解React本身的語法和邏輯，等你對整個前端建置流程有更深入的了解後，再去研究Webpack和Babel的配置，這樣學習曲線會平緩很多，也比較不會產生挫敗感。

Q8：除了CRA和Vite，還有沒有其他建立React專案的方法？

當然有囉！前端的世界就是這麼多采多姿。除了CRA和Vite，還有一些工具和框架可以建立React專案，但它們通常有更特定的應用場景和更豐富的功能集。

  1. Next.js：

    • 是什麼： 這是一個基於React的「全端框架」（Full-stack framework）。它不僅能做前端渲染，還支援伺服器端渲染（SSR）、靜態網站生成（SSG），以及API路由等功能。簡單來說，如果你想用React來做一個需要SEO優化、或者同時包含後端API邏輯的完整網站，Next.js會是你的首選。
    • 安裝方式： npx create-next-app@latest
    • 適用情境： 部落格、電商網站、內容管理系統、需要良好SEO的應用。
  2. Gatsby：

    • 是什麼： 這是一個基於React的「靜態網站生成器」（Static Site Generator, SSG）。它強調「資料優先」，可以從多種資料源（Markdown、CMS、API等）獲取資料，然後在建置時生成優化過的靜態HTML檔案。最終的網站非常快且安全。
    • 安裝方式： npm install -g gatsby-cli 然後 gatsby new my-gatsby-site
    • 適用情境： 靜態網站、部落格、文檔網站、無需頻繁更新的企業官網。
  3. Remix：

    • 是什麼： 也是一個基於React的全端框架，由React Router的作者開發。它強調Web標準和更好的用戶體驗，在資料獲取和表單處理方面有獨特優勢。
    • 安裝方式： npx create-remix@latest
    • 適用情境： 需要高互動性、表單處理複雜、或追求現代Web標準的應用。

你會發現，這些工具的安裝指令都跟CRA和Vite有點像，因為它們都是利用底層的Node.js和npm來幫你自動化建置流程。它們並不是替代「如何安裝React」，而是在React的基礎上，提供了更豐富、更專門的功能，幫助你解決特定類型的網站開發需求。對於剛入門React的你來說，我還是建議從CRA或Vite開始，等你掌握了React核心概念後，再去探索這些更強大的框架會比較適合！

我的個人經驗分享與小提醒

作為一個在前端打滾多年的開發者，我在「如何安裝React」和開發React專案的路上，也踩過不少坑，累積了一些小心得想分享給你：

  • 版本管理真的很重要： Node.js、npm、以及React本身都有很多版本。有時候，新舊版本之間會有一些不相容的問題。如果遇到奇怪的錯誤，不妨檢查一下你安裝的這些工具版本是否符合專案要求，或者是不是太舊或太新了。我會建議用LTS版Node.js，並且定期更新npm或yarn。
  • 多看官方文件： React的官方文件 (react.dev) 是你最好的學習資源。遇到問題，先去官方文件找找看，通常都能找到解答。它不僅教你「怎麼做」，更會解釋「為什麼這麼做」。
  • 不要害怕錯誤訊息： 剛開始寫程式，看到終端機或瀏覽器噴出一大串紅色的錯誤訊息，真的會讓人心頭一驚。但其實，這些錯誤訊息往往是最好的「老師」！它們會告訴你問題可能出在哪一行、哪個檔案。學會閱讀錯誤訊息，是每個開發者必備的技能。看不懂英文沒關係，複製貼上到Google翻譯一下，通常就能找到方向。
  • 善用社群資源： Stack Overflow、GitHub Issues、以及各種前端開發社群（例如Facebook上的前端社團）都是你的好幫手。遇到解決不了的問題，勇敢地發問吧！通常都會有熱心的前輩願意幫忙。
  • 實作是最好的學習方式： 看再多文章、再多教學影片，都不如自己動手寫程式來得有效。從一個簡單的Todo List、一個小計算機開始，一步步把學到的知識應用到實際專案中，你會發現自己的進步會非常快！

好了，從準備工作到實際操作「如何安裝React」的兩種主流方式，再到專案結構的初步認識，以及常見問題的排解，我已經把我的經驗和知識都傾囊相授給你了。相信你現在對於如何開始你的React旅程，應該有了清晰的藍圖了！React的世界廣闊又精彩，別猶豫了，趕快動手建立你的第一個React應用，開始你的創造之旅吧！

如何安裝react