React 是什麼？2025 完整新手學習指南

React 是當今前端開發中最熱門的技術之一，不管你想要轉職前端，還是後端想做 Side Project，甚至是想利用 AI 來打造自己的網頁 App，理解 React 的基礎概念與環境設置都是入門的第一步。

本篇文章將帶你認識什麼是 React、它的特色與優勢，以及如何設置開發環境，幫助你快速開始你的 React 學習之旅。

什麼是 React？

React 是一個由 Facebook 開發的開源 JavaScript 函式庫，專為構建高效、可維護的用戶界面（UI）而設計。它特別適合用於開發單頁應用（Single Page Applications, SPA），讓使用者無需刷新頁面即可享受流暢的體驗。

React 的核心理念是「組件化」。它將複雜的頁面拆解成一個個獨立的、可重複使用的組件，每個組件負責自身的邏輯和渲染。當數據發生變化時，React 會通過「虛擬 DOM（Virtual DOM）」來更有效率的更新頁面，減少直接操作真實 DOM 的開銷，進而提升性能。

簡單來說，React 讓你可以用更直觀、更模組化的方式開發前端應用，特別適合那些需要頻繁更新的動態網站。

為甚麼我們要學習 React？

接著讓我們從技術層面和現實層面來討論為甚麼要學 React。

簡化開發流程

在過去，使用原生 JavaScript 開發大型 web 應用是一件非常困難的事情，除了一堆商業、UI、功能的邏輯交雜在一起，我們還需樣管理成百上千個 DOM 元素、處理大量狀態、實現可重用 UI 組件或特效等等問題，很容易讓程式碼變得冗餘、難以維護。

而 React 前端框架的出現解決了這些痛點。它提出了一種全新的構建用戶界面 (UI) 的方式，也改變了前端開發的環境。

學習 React 並不是為了替代原生 JavaScript，而是為了在一定層面上簡化和提高大型應用的開發效率。而 React 的設計思想也能幫助我們構建優雅、高效、可擴展的前端應用，並且這些思想也能夠讓我們在軟體領域走的更深更遠。

更好的工作機會

因為 React 提高了前端的開發效率，越來越多公司拋棄 JQuery 並選擇 React，也因此豐富了 React 的生態系統，有龐大的開發者社群，提供很多封裝好的工具或函式庫、UI 庫，並也提供更多的工作機會。

也因此，不管是為了更快的開發還是找工作，或是培養更深度的程式設計思想，學習前端框架是必要的路程之一。

延伸閱讀：

2025 前端框架怎麼選？React、Vue、Angular 完整比較指南

React 的特色

React 之所以受到廣泛歡迎，除了背靠大公司 Facebook 以外，它獨特的設計與功能也受到開發者的支持和青睞。下面我就舉出 React 的 5 大特色：

1. 組件化開發：React 鼓勵將 UI 分解為獨立的組件，例如按鈕、表單或導航欄。這些組件可以獨立開發、測試和重用，大幅提升程式碼的可維護性。再也不用每個地方都寫一樣的程式碼。
2. 虛擬 DOM：React 利用虛擬 DOM 來優化頁面的更新。每次數據變化時，React 會先計算出需要更新的部分，再一次性更新到真實 DOM，避免不必要的重繪與重排，提升渲染的效率。
3. 單向數據流：在 React 中，數據從父組件單向流向子組件，這種設計讓數據的流向更清晰且可預測，減少了因數據混亂導致的 bug。
4. JSX 語法：React 引入 JSX，一種結合 JavaScript 和 HTML 的語法，讓開發者能以更直觀的方式撰寫組件。
5. 豐富的生態系統：React 擁有強大的社區和生態支持，我們能夠結合像 React Router（路由管理）、Redux（狀態管理）等第三方函式庫，讓我們能輕鬆地去構建更複雜的應用。
6. 跨平台的開發：除了 Web 開發以外，還能搭配 React Native 來開發行動應用程式，也就是說只要學會 React，就能同時開發網頁和手機。

簡單說，React 能夠在眾多框架中脫穎而出，這是因為其高性能、組件靈活性，以及背靠大公司和強大的生態系統。

延伸閱讀：

學 React 一定要知道的重要基礎觀念

React 常用的 JSX 渲染方法 - 條件渲染、渲染列表

學習 React 前，你應該具備的知識

在學習 React 前，你需要掌握一些基礎知識，因為 React 是建立在這些知識上的前端框架，如果你是第一次接觸網頁的新手，可以先從 W3Schools 開始學習基礎知識～以下是學習 React 前應具備的技能

• HTML/CSS
  理解網頁的基本結構（如標籤、屬性）和樣式（如選擇器、盒模型），這些是構建網頁 UI 的基礎。
• JavaScript
  掌握 JS 的核心概念，包括變數、函式、物件、陣列、事件處理等。React 的邏輯幾乎都用 JS 實現，因此這部分至關重要。
• ES6（建議）
  熟悉 ES6 的新語法，例如箭頭函式（=>）、解構賦值（{a, b} = obj）、模組導入（import），這些在 React 中非常常見。雖然不是必須，但能讓你的代碼更簡潔高效。

有了這些基礎，你就可以更輕鬆地進入 React 的學習。

React 和原生 JS 的差別

React 與原生 JavaScript 在開發方式上有很大的不同，

1. 組件化 vs 傳統 DOM 操作：原生 JS 通常直接操作 DOM（例如 document.getElementById），更新頁面時需要手動修改。React 則透過組件和虛擬 DOM 管理更新，自動完成渲染。原生 JS 就像一個很笨的建築工人，你必須告訴他要"如何做 (如何操作 DOM)”，他才會做出網頁；而 React、Vue 就像是聰明的建築工人，你只需要告訴他 "你想要的樣子”，他就會自動幫你搞定網頁操作 DOM 的細節。
2. 聲明式 Declarative vs 命令式 imperative：React 採用聲明式編程，你只需描述 UI 應該長什麼樣子，React 會負責實現更新；而原生 JS 是命令式編程，需要明確告訴瀏覽器每一步該做什麼。關於聲明式和命令式的差別，可以參考這篇文章
3. 可維護性：React 的組件化設計可以讓程式碼的結構更清晰，且易於維護和擴展。原生 JS 在大型專案中很容易就變得雜亂，當專案越大，維護成本也會越高。
4. 單向數據流：在 React 中，資料只能從上往下傳遞，可以把資料想像成河水，它只能從上游(資料來源)流向下游(使用者介面)，不能反向回去或橫流叉流，這樣的好處是我們可以更好的管控資料。
5. 學習曲線：原生 JS 入門雖然簡單，但在大規模應用中需要更多程式碼來實現複雜功能。反之，React 初期需要學習新概念（如 JSX、組件），但掌握後能顯著提升開發效率。了解了 React 的角色以及為何要學 React 後，下一步就是要來設置能寫 React 的環境。

React 環境設置 - 安裝 Node.js 與 Terminal

設置 React 環境的步驟不會很難，只要照著以下的步驟就能順利設置環境，步驟分為：

1. 下載並安裝 Node.js
2. 使用 Terminal 建置 React 環境

接著就可以運行 React 開始寫程式了，沒錯就這麼簡單～

下載並安裝 Node.js

到 Node.js 的官網，點擊畫面中的 Download Node.js，下載完後行安裝即可。

安裝過程基本上就是一直按“繼續”就好，不需要額外什麼設定。

等他安裝完後這一部就完成了，我們可以在終端機中輸入 node -v 和 npm -v 確認 Node.js 和 npm 已正確安裝。

如果你是 Mac 用戶，推薦你使用 Warp 這個終端機，而如果你是 windows 用戶，可以使用 windows terminal，下載後打開即可在裡面輸入：

node -v

npm -v

如果正確安裝，他會顯示你的 node 和 npm 版本。

當然，你也可以直接使用 vs code 內建的 terminal 來執行命令，只要按 ctrl + ` 就可以打開並輸入命令。

接著就是來建置 React 環境。

建置 React 環境

通常有兩種方法可以建置 React：

• 使用 create-react-app 指令
• 使用 vite 工具 (推薦)

第一種是官方的指令，第二個則是使用現在更流行的工具來更快建置 React 專案，兩個各有優缺點，但現在只是要練習，推薦直接使用第二種更快速的方式

使用 Create React App 建置 React 環境

1. 全局安裝 Create React App: 在終端機中執行以下命令：-g 的意思是 global，也就是在電腦上安裝這個指令。

npm install -g create-react-app

2. 建立新的 React 專案:接著使用指令創建你的 react app

create-react-app your-app-name

3. 進入專案目錄:移動到你的 react app 目錄

cd your-app-name

4. 啟動開發伺服器:

npm start

接下來來看用 vite 的方式～

使用 Vite 建置 React 環境。

使用 vite 建置 React 的方法簡單一點，步驟是：

1. 使用 Vite 建立新的 React 專案: 在終端機中執行以下命令：

npm create vite@latest my-app --template react

2. 進入專案目錄:

cd my-app

3. 安裝相依性:

npm install

4. 啟動開發伺服器:

npm run dev

到這邊就建置完成了，非常簡單吧！

文件檔案目錄結構

當你用 cli 快速建立出來專案後，新手可能會看到裡面有一堆資料夾，不知道從哪裡下手，這邊也簡單介紹一下每個目錄裡面是幹嘛的：

my-app/
├── node_modules/  # 套件資料夾
├── public/        # 靜態資源
├── src/           # 主要的 React 檔案
│   ├── App.js     # 主要的 React 組件
│   ├── index.js   # 程式進入點
│   ├── components/ # 可存放額外的組件
├── package.json   # 專案資訊與依賴
├── README.md      # 項目說明文件
└── ...

• node_modules/：相關的依賴，通常不需要去動它
• public/：存放靜態文件，例如 SVG、字體、圖片等等。
• src/：你的主要工作區，像是自定義的 React 組件、程式邏輯都放在這裡。
• package.json：專案的資訊和依賴的程式庫。

有時候我們也會新增 style/ 資料夾來放相關的樣式，或是 lib/ 資料夾放其他輔助的程式邏輯。