xDev Asia

什麼是React、Virtual DOM、基於元件的架構。比較 React、Vue、Angular、Svelte。工俱生態系統，create-react-app 與 Vite。 JSX 語法，第一個元件。

React 和 Next.js：從基礎到高級

第 1 部分：React 基礎知識

亞洲開發網

1.React是什麼？

React 是一個用於建立使用者介面 (UI) 的 JavaScript 程式庫，由 Meta (Facebook) 開發。 React 不是一個框架——它只是專注於 視圖圖層 並允許您選擇其他工具進行路由、狀態管理、資料擷取。

1.1.核心概念

基於組件的：UI被劃分為獨立的、可重複使用的元件
聲明式：介面說明 應該看起來像, React 自動處理 DOM 更新
虛擬DOM：React在記憶體中建立一個虛擬DOM，比較並只更新變化的部分
單向資料流：資料透過 props 從父級→子級流動

1.2.虛擬 DOM 是如何運作的？

User Action → setState() → Virtual DOM re-render (in memory)
    → Diffing (so sánh Virtual DOM cũ và mới)
    → Reconciliation (chỉ update DOM thật ở phần thay đổi)

2. 比較 React、Vue、Angular、Svelte

特點	反應	維埃	角	斯韋爾特
類型	圖書館	框架	框架	編譯器
學習曲線	中等	簡單	硬	簡單
捆綁尺寸	~45KB	〜33KB	〜143KB	〜2KB
效能	快速（虛擬 DOM）	快速（虛擬 DOM）	快速（變化檢測）	最快（無運轉時間）
生態系統	最大	大號	完成	成長。成長
打字稿	優秀	好	內建	好
固態繼電器	Next.js	努克斯特	角度通用	苗條套件
工作機會	大多數	很多	很多	成長。成長

3. 使用Vite搭建項目

# Create React + TypeScript project
npm create vite@latest my-app -- --template react-ts

cd my-app
npm install
npm run dev

3.1.項目結構

my-app/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   ├── App.tsx          ← Root component
│   ├── App.css
│   ├── main.tsx         ← Entry point
│   └── vite-env.d.ts
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

4.JSX 語法

// JSX = JavaScript XML
// Cho phép viết HTML-like syntax trong JavaScript

// ✅ JSX
const element = <h1>Hello, React!</h1>;

// ↓ Biên dịch thành
const element = React.createElement('h1', null, 'Hello, React!');

4.1. JSX 規則

function App() {
  const name = 'Duy';
  const isLoggedIn = true;
  const items = ['React', 'Vue', 'Angular'];

  return (
    // Rule 1: Phải có 1 root element (hoặc Fragment)
    <>
      {/* Rule 2: Expressions trong {} */}
      <h1>Hello, {name}!</h1>

      {/* Rule 3: className thay vì class */}
      <div className="container">
        {/* Rule 4: htmlFor thay vì for */}
        <label htmlFor="email">Email</label>

        {/* Rule 5: CamelCase cho attributes */}
        <input onClick={() => {}} tabIndex={0} />

        {/* Rule 6: Self-closing tags */}
        <img src="logo.png" alt="Logo" />
        <br />

        {/* Conditional rendering */}
        {isLoggedIn && <p>Welcome back!</p>}
        {isLoggedIn ? <Dashboard /> : <Login />}

        {/* List rendering */}
        <ul>
          {items.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>

        {/* Inline styles (object, camelCase) */}
        <div style={{ backgroundColor: 'blue', fontSize: '16px' }}>
          Styled div
        </div>
      </div>
    </>
  );
}

5. 第一個組件

// src/components/Greeting.tsx
function Greeting() {
  return (
    <div>
      <h1>Xin chào từ React! 🚀</h1>
      <p>Đây là component đầu tiên của bạn.</p>
    </div>
  );
}

export default Greeting;

// src/App.tsx
import Greeting from './components/Greeting';

function App() {
  return (
    <div>
      <Greeting />
    </div>
  );
}

export default App;

下一篇： 組件、道具和 TypeScript — 功能組件、打字道具和組件組成。

第 1 課：React 簡介