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

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

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

什麼是 React？

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

雖然官方聲稱 React 是一個函式庫，但 React 的生態完整性，說他是一個框架也不為過。

延伸閱讀：框架和函式庫的差別？

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

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

為甚麼我們要學習 React？

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

簡化開發流程

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

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

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

更好的工作機會

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

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

React 的特色

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

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

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

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

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

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

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

React 和原生 JS 的差別

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

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

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

大致了解 React 後，我們就可以來建置 React 環境了，設置 React 環境的步驟不會很難，只要照著以下的步驟就能順利完成，步驟只有 2 步，分為：

下載並安裝 Node.js
使用 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 + ` 就可以打開並輸入命令。

安裝完 Node.js 後，接著就可以來建置 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. 進入專案目錄：利用 cd 指令移動到你的 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/：相關的依賴React 基礎概念
public/：存放靜態文件，例如 SVG、字體、圖片等等。
src/：你的主要工作區，像是自定義的 React 組件、程式邏輯都放在這裡。
package.json：專案的資訊和依賴的程式庫。

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

補充

在網路上會看到有些教學使用 CDN 來引入 React 使用，或是使用線上編輯器，例如 codepen 或 CodeSandbox 來使用 React，這些方法都可以用來練習 React，但要製作自己的專案，還是必須用前面提到到的兩個方法喔！

React 裡的 4 個重要觀念

當我們建置完環境，準備正式進入 React 之前，要先來說說 React 幾個很重要觀念，這些觀念可以說是適用於整個前端生態包括其它框架，很多新手在接觸 React 或其它框架時，會覺得很不習慣或不好上手，有很大一部份就是因為沒有先建立這些的觀念，所以我會建議先花一點時間理解一下這 4 個重要觀念喔！分別是：

JSX 語法
組件 Components
屬性 Props
狀態 State

JSX 語法

JSX 是 React 很重要也很基本的語法，他就像是在 JS 裡寫 HTML，這邊做個簡單的示範，我們先宣告一個變數 title，並且給他一個 <h1 /> 的值，就像下面這樣，是不是蠻像在 JS 裡寫 HTML 的呢？

const title = <h1>Hello, world!</h1>

JSX 語法的強大之處在於，我們可以用花括號 {} 來搭配其他 JavaScript 的變數，比如我們希望 title 可以重複使用，例如給他不同的 message 來顯示不同的標題，我們就能像下面這樣把 { message } 放到 title 中：這就是 JSX 的好處。

const message = 'Hello, World!'
const title = <h1>{ message }</h1>
// <h1>Hello, world!</h1>

更進階的用法，可以搭配 template literals 樣板字面值來使用，例如

const message = 'Hello, World!'
const title = <h1>{ `This is my message: "${message}"`}</h1>
//<h1>This is my message: "Hello, world!"</h1>

當然我們也可以添加 HTML 的屬性在 JSX 裡，利如 class、id、data-* 等等常見的 HTML 屬性，但要注意的是，因為我們是在 JS 裡，所以有些語法會和在 HTML 裡不太一樣。

1. className : 在 JSX 裡如果要寫 class，必須要寫成 className

const title = <h1 class="heading">{ message }</h1> // 錯誤
const title = <h1 className="heading">{ message }</h1> // 正確

這是因為在 JS 中，已經有 class 這個關鍵字了，所以要用 className 代替。

2. 駝峰式命名 (camel) : 在 JSX 中，屬性的名稱要用駝峰式命名代替

const title = <h1 onclick={() => alert('hello')}>{ message }</h1> // 錯誤
const title = <h1 onClick={() => alert('hello')}>{ message }</h1> // 正確

例如點擊事件是 onclick，但在 JSX 裡就要用 onClick（ C 是大寫！）

但 aria-* 和 data-* 就不需要，因為中間已經有 - 連接了。

補充：其實 JSX 在最後也會被轉譯成 JS 格式，例如

const message = 'Hello, World!';
const element = <h1>{message}</h1>;

// 變成

const message = 'Hello, World!';
const element = React.createElement('h1', null, message);

這個轉換過程是由 Babel 等工具完成的，我們現在不太需要關心具體的實現。

組件 Component

第二個重要的觀念是 Component 組件（有些人也稱為元件）可以想像一個頁面是好幾個組件所組成的，比如一般的網站可能會有 Header 組件、Button 組件、Footer 組件 ... 等等。每個組件都擁有自己的結構、樣式、行為邏輯。

以往我們用原生 JS，如果網頁上有很多個類似的按鈕，我們可能會重複寫非常多類似的邏輯或樣式，比如：

<button class="btn btn-primary">My Button</button>
<button class="btn btn-outline">My Button</button>
<button class="btn btn-underscore">My Button</button>

每個 button 又要寫額外的 style 或事件邏輯，這會讓網站難以維護。

所以組件的好處就是可以讓我們重複使用相同的結構，而在 React 裡，一切皆是函數，一個函數就代表一個組件。舉個簡單例子，我們可以創建一個 Button 函數組件，並且將 JSX 用括號 () 括起來：

unction Button() {
  return (
    <button class="btn">
      My Button
    </button>
  );
}

Button 函數返回的值就是上面提到的 JSX 。要注意的有三件事情

如果 return 的 JSX 超過一行，就要用 () 括起來
組件的名稱開頭一定要是大寫，這是為了讓 React 區別是一般 HTML tag 還是我們自訂一的組件
我們一次只能返回一個父元素，比如：

// 錯誤
function Button() {
  return (
    <label>This is a button</label>
    <button class="btn">
      My Button
    </button>
  );
}

我們要用一個父元素將其包起來：

// 正確
function Button() {
  return (
    <div>
      <label>This is a button</label>
      <button class="btn">
        My Button
      </button>
    </div>
  );
}

在 React 中，我們也可以用一個空的 tag <> 來包住子元素，這個在 React 裡稱為 Fragment 組件，空 tag 是 Fragment 組件的簡寫。

// 正確
function Button() {
  return (
    <>
      <label>This is a button</label>
      <button class="btn">
        My Button
      </button>
    </>
  );
}

建立好 Button 組件後，我們就可以在需要的地方直接使用 <Button /> 來使用組件。這在原生 HTML 和 JS 中是難以做到的。

<Button />
<Button />
<Button />

下一步，我們希望可以單獨控制每個 <Button /> 的樣式、事件等等， props（屬性）就可以做到！

屬性 Props

我們可以傳入參數給 React 函數組件，也就是所謂的 Props 屬性，這樣的好處是讓組件的複用性更高，例如我們希望可以自由地調整 Button 的 Background 和文字，並且想針對不同的 Button 有不同的點擊效果，我們就可以稍微改寫一下上面的例子：

function Button(props) {
  return (
    <button
      onClick=(props.onClick)
      style={{backgroundColor: props.color}}>
      {props.text}
    </button>
  );
}

這個 Button 組件接收三個屬性參數: color 、 text 和 onClick。當我們使用這個組件時,只需要傳入不同的屬性值，就能夠快速打造多個有相同架構的按鈕:

<Button color="blue" text="Click Me" onClick={console.log('you click me')} />
<Button color="red" text="Don't Click" onClick={console.log('don't click)}/>

這樣就能渲染出兩個不同顏色和文字的按鈕，並且有不同的 console。

簡單說，我們可以把 props 想像成組件的 "inputs" 或 "參數"，它們決定了組件的外觀和行為。比如前面 Button 組件的例子，color 、 text 和 onClick 就是組件的三個參數。

所以組件化的優勢在於可重用性。一旦創建好一個通用組件，無論在應用的任何地方，我們都可以輕鬆地複用它。這種模塊化設計大大提高了開發效率和程式的可維護性。

當然，我們也可以使用 ES6 的解構語法來簡化程式：

function Button({ color, text, onClick }) {
  return (
    <button
      onClick={onClick}
      style={{backgroundColor: color}}>
      {text}
    </button>
  );
}

現在我們已經能在網站的每個地方重複使用這個 Button 了！不過現在有個新的需求，PM 希望用戶點擊按鈕之後，可以更改按鈕的文字，我們該怎麼做呢？這就要提到狀態 state。

狀態 State

狀態(state) 和屬性(props) 是新手很容易搞混的地方！所以在介紹狀態之前，我們先來講一個觀念：在程式世界中，如果隨意更改函數 input，會讓程式碼變得非常不好維護，因為我們不知道 input 究竟變成甚麼樣子。舉例來說：

function sum(num1, num2) {
  num1 = num1 * 2; // 隨意更改 input 的值
  return num1 + num2;
}

let x = 1, y = 2;
let z = sum(x ,y); 
// 預期是 1 + 2 = 3
// 但因為更改了 input，變成 1 * 2 + 2 = 4

比較好的做法是在函數裡新增一另一個變數來操作：

function sum(num1, num2) {
  let num3 = num1 * 2;
  // 執行要用到 num3 的操作
  return num1 + num2;
}

相對的，在 React 中，我們也不能隨意更改組件的 prop 值，所以如果我們要更新組件的文字，我們一樣需要在組件新增一個變數，也就是狀態 state 來控制組件。

每個組件都可以有自己的 state，當 state 更新的時候，畫面會跟著更新，我們在稍微改寫一下 Button 組件。

function Button(props) {
  const [myText, setMyText] = useState(props.text) // 這是在 React 中宣告 state 的語法
  const changeText = () => {
    setMyText('你點擊我了！') // 並且我們只能用 set... 來更改 state
  }
  
  return (
    <button
      onClick={changeText}
      style={{backgroundColor: props.color}}>
      {myText}
    </button>
  );
}

useState 是 React 宣告狀態的方法，傳入的值會是 state 的初始值，且只能用 setState 來改變 state 的值，這樣 React 才會知道狀態改變，UI 也要跟著改變。

上面程式碼解釋是：

useState 創建一個狀態變量 myText 和一個更新這個狀態的函式 setMyText。
定義了一個名為 changeText 的函式，當調用這個函式時，它會使用 setMyText 函式來更新 myText 狀態的值為"你點擊我了！"
最後，組件返回了一個 JSX 表示的 button 元素。這個按鈕被設置了一個點擊事件處理器，當按鈕被點擊時會調用 changeText 函式，從而更新按鈕上顯示的文字。

簡單說，我們可以把 state 看作是組件的"內部數據源"，它決定了組件在特定時間點的呈現樣子。一旦狀態發生變化。就會自動觸發重新渲染組件的機制。

以上就是對 React 基礎概念的詳細解釋，希望通過案例和比喻，能讓你對 JSX、組件、props、state 核心理念有初步的理解。

最後簡單總結這個篇幅的重點：

JSX : 類似在 JS 裡寫 HTML，可以用 {} 來結合 JS 的語法。
組件化：React 中每個組件都是一個函數，且返回 JSX
屬性：傳入參數當作組件的屬性，可以更好操控利用組件
狀態：每個組件都有自己的狀態，只有狀態改變，UI 才會改變，且要使用 React 的 useState 才能宣告狀態。，通常不需要去動它

開始你的 React 之旅吧！

看到這邊，相信你對 React 已經有一個基本的認識，如果你已經下定決心學習 React 了，這邊也推薦幾個很不錯的資源，讓你能快速開始學習：

React 官方的英文教學
React 官方的中文教學 - 建議搭配英文教學一起看，了解常見名詞的中文
2 小時 React 快速入門 - 如果你喜歡看影片學習，這個是很不錯的 YT 教學

你可能會感興趣的文章 👇

batch update 是什麼？React 非同步的狀態更新。2025 前端框架怎麼選？React、Vue、Angular 完整比較指南 React Compiler 在實際的程式碼中表現如何？（翻譯文章）React Compiller 是什麼？他有哪些好處？

前端基礎

前端動效

前端框架

前端進階

職涯相關

其它內容