⚛️ Bài 1: Giới Thiệu React & Cài Đặt Môi Trường

1. React Là Gì?

React là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook (Meta) vào năm 2013. React cho phép xây dựng giao diện người dùng (UI) một cách hiệu quả thông qua mô hình component-based — tức chia UI thành các phần nhỏ, độc lập và có thể tái sử dụng.

React khác gì Framework?

React là thư viện (library), chỉ tập trung vào phần View (giao diện). Trong khi đó, Angular hay Vue.js là framework cung cấp đầy đủ routing, state management, form handling. Với React, bạn tự chọn thư viện bổ sung theo nhu cầu.

2. Virtual DOM Hoạt Động Như Thế Nào?

Virtual DOM (DOM ảo) là kỹ thuật giúp React cực kỳ nhanh. Thay vì thao tác trực tiếp với DOM thật (rất chậm), React tạo một bản sao DOM ảo trong bộ nhớ.

Quy trình hoạt động:

• Bước 1: React tạo Virtual DOM (cây JavaScript object nhẹ)
• Bước 2: Khi state thay đổi, React tạo Virtual DOM mới
• Bước 3: So sánh (diff) Virtual DOM cũ và mới
• Bước 4: Chỉ cập nhật những phần thật sự thay đổi lên DOM thật

3. Cài Đặt Môi Trường

🔧 Cài đặt Node.js

React cần Node.js (để chạy npm/npx). Tải từ nodejs.org (phiên bản LTS).

# Kiểm tra Node.js và npm
node -v    # v20.x.x
npm -v     # 10.x.x

🚀 Tạo Project React với Vite (Khuyên dùng)

# Tạo project mới
npm create vite@latest my-react-app -- --template react

# Di chuyển vào thư mục project
cd my-react-app

# Cài đặt dependencies
npm install

# Chạy development server
npm run dev
# → http://localhost:5173

4. Cấu Trúc Thư Mục Project React

my-react-app/
├── node_modules/         # Thư viện bên thứ ba
├── public/               # File tĩnh (favicon, images)
│   └── vite.svg
├── src/                  # Source code chính
│   ├── assets/           # Hình ảnh, fonts
│   ├── App.css           # CSS cho App component
│   ├── App.jsx           # Component chính
│   ├── index.css         # CSS global
│   └── main.jsx          # Entry point
├── index.html            # HTML template
├── package.json          # Dependencies & scripts
├── vite.config.js        # Cấu hình Vite
└── eslint.config.js      # Cấu hình ESLint

5. Chương Trình React Đầu Tiên

Mở file src/App.jsx và thay nội dung:

function App() {
    return (
        <div>
            <h1>Xin chào, React! ⚛️</h1>
            <p>Đây là ứng dụng React đầu tiên của tôi.</p>
        </div>
    );
}

export default App;

File src/main.jsx (entry point):

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';

// Render App component vào thẻ #root trong index.html
ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);