xDev Asia

React、Virtual DOM、コンポーネントベースのアーキテクチャとは何ですか。 React、Vue、Angular、Svelte を比較します。ツールエコシステム、create-react-app と Vite。 JSX 構文、最初のコンポーネント。

React と Next.js: 基本から高度まで

パート 1: React の基礎

xdev.asia

1. Reactとは何ですか?

React は、Meta (Facebook) によって開発された、ユーザーインターフェイス (UI) を構築するための JavaScript ライブラリです。 React はフレームワークではありません - 焦点を絞っているだけです ビューレイヤー また、ルーティング、状態管理、データ取得のための他のツールを選択することもできます。

1.1.中心となる概念

コンポーネントベース: UI は独立した再利用可能なコンポーネントに分割されます
宣言的：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)	高速 (変化検出)	最速 (ランタイムなし)
生態系	最大の	大	完了	成長中。成長する
TypeScript	素晴らしい	良い	内蔵	良い
SSR	Next.js	ナクスト	角度ユニバーサル	SvelteKit
求人	ほとんど	たくさん	たくさん	成長中。成長する

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 の紹介