在現代 Web 開發中，前端技術不斷演進，而 React 已成為最受歡迎的 JavaScript 前端框架之一。如果你想開發高效能、可維護的 Web 應用，React 絕對是你必須掌握的技術。
本篇文章將帶你認識 React 的核心概念、優勢以及如何開始開發 React 應用。
什麼是 React？
React 是由 Facebook（Meta） 開發的 前端 JavaScript 框架，主要用於構建 可重用的 UI 元件，並且能夠高效更新和渲染畫面。
為什麼選擇 React？
✅ 元件化架構：將 UI 拆分成獨立的元件，提高可重用性和可維護性。
✅ Virtual DOM：透過虛擬 DOM 提升效能，避免不必要的畫面重新渲染。
✅ 單向數據流：資料的變更是單向傳遞，讓應用程式更容易維護和除錯。
✅ 社群與生態系統強大：擁有大量開發者支持，以及豐富的第三方套件。
✅ 跨平台開發：透過 React Native，還能開發 iOS 和 Android 應用。
目前，許多大型公司如 Facebook、Instagram、Netflix、Airbnb、Uber 都在使用 React，可見其影響力與穩定性。
React vs. 其他前端框架
| 特性 | React | Vue.js | Angular |
|---|---|---|---|
| 開發公司 | Meta（Facebook） | Evan You | |
| 核心概念 | 元件化、Virtual DOM | 雙向數據綁定、指令 | MVVM、雙向數據綁定 |
| 學習曲線 | 中等 | 易學 | 陡峭 |
| 規模適合度 | 中大型專案 | 小中型專案 | 大型企業應用 |
| 生態系統 | 豐富 | 較新但發展快 | 完整但較笨重 |
| 效能 | 高 | 高 | 中等 |
| 社群支持 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ |
如果你希望開發一個 靈活、效能佳、可擴展的 Web 應用，React 是非常好的選擇。
如何開始使用 React？
1. 安裝環境
在開始使用 React 之前，請確保你的電腦已安裝 Node.js，然後使用 npx 指令建立 React 專案：
npx create-react-app my-app
cd my-app
npm start
這樣你就可以打開瀏覽器，看到 React 預設的歡迎畫面！
React 核心概念
1. 元件（Components）
React 透過元件化開發，將 UI 拆分成小單位，讓每個部分都能獨立管理。
函式元件（Functional Component）
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
類別元件（Class Component）
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}
目前 React 主要使用 函式元件 + Hooks 來開發，類別元件已較少使用。
2. JSX（JavaScript XML）
JSX 是 React 獨有的語法，讓我們可以在 JavaScript 內直接寫 HTML：
const element = <h1>Hello, React!</h1>;
JSX 其實會被轉換成 JavaScript：
const element = React.createElement("h1", null, "Hello, React!");
這讓我們可以更直覺地開發 UI，而不需要寫大量 createElement 語法。
3. Props（屬性）
props 讓我們可以傳遞資料到子元件，例如：
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
<Welcome name="Alice" />
這樣 Welcome 元件就能顯示 Hello, Alice!
4. State（狀態）
state 讓元件能夠管理自己的狀態，例如計數器：
import React, { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>目前計數：{count}</p>
<button onClick={() => setCount(count + 1)}>增加</button>
</div>
);
}
這裡使用 useState 來建立計數狀態，每次點擊按鈕時，count 會加 1，React 會自動更新畫面。
5. 事件處理（Event Handling）
React 的事件綁定與原生 JavaScript 類似，但需要使用 camelCase 命名方式：
<button onClick={handleClick}>點我</button>
完整範例：
function ButtonClick() {
function handleClick() {
alert("按鈕被點擊！");
}
return <button onClick={handleClick}>點我</button>;
}
這樣當用戶點擊按鈕時，會跳出 alert 提示框。
6. React Hooks（讓函式元件更強大）
React 16.8 之後推出 Hooks，讓函式元件也能擁有 state 和 lifecycle（生命週期）。
最常見的 Hooks：
useState：用來管理狀態useEffect：用來處理副作用（如 API 請求）useContext：共享全域狀態
範例：使用 useEffect 取得 API 資料
import React, { useState, useEffect } from "react";
function UsersList() {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/users")
.then(response => response.json())
.then(data => setUsers(data));
}, []);
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
這段程式碼會在元件載入時，自動從 API 取得用戶清單，並顯示在畫面上。
React 生態系統
學會 React 之後，還可以搭配以下技術，打造更強大的應用：
- React Router：管理單頁應用（SPA）的路由
- Redux / Context API：管理全域狀態
- Next.js：React 的伺服器端渲染（SSR）框架
- Tailwind CSS / Material UI：提升 UI 設計與開發速度
結論
React 是現代前端開發的核心技術，擁有靈活的元件化架構、高效能的 Virtual DOM，並且有強大的社群支持。
學習 React，你將能夠開發更靈活、可維護的前端應用，並且提升你的開發效率！
你是否已經開始使用 React？遇到什麼問題嗎？歡迎留言交流 ?
評論