✨ Bài 2: JSX - Cú Pháp Trong React

⏱️ Thời gian đọc: 12 phút | 📚 Độ khó: Dễ

🎯 Sau bài học này, bạn sẽ:

Hiểu JSX là gì và tại sao React dùng JSX
Viết expressions trong JSX
Sử dụng conditional rendering trong JSX
Biết sự khác biệt giữa className, htmlFor với HTML thông thường
Sử dụng Fragments để tránh wrapper div không cần thiết

1. JSX Là Gì?

JSX (JavaScript XML) là cú pháp mở rộng cho JavaScript, cho phép viết code trông giống HTML nhưng thực chất là JavaScript. Babel sẽ compile JSX thành các lệnh React.createElement().

// Viết bằng JSX (dễ đọc)
const element = <h1>Xin chào!</h1>;

// Babel compile thành (khó đọc)
const element = React.createElement('h1', null, 'Xin chào!');

// JSX chỉ là syntactic sugar!

2. Expressions Trong JSX

Dùng dấu ngoặc nhọn {} để nhúng JavaScript expressions vào JSX:

function Greeting() {
    const name = 'An';
    const age = 25;
    const now = new Date();

    return (
        <div>
            {/* Biến */}
            <h1>Xin chào, {name}!</h1>

            {/* Phép tính */}
            <p>Năm sinh: {now.getFullYear() - age}</p>

            {/* Gọi hàm */}
            <p>Chữ hoa: {name.toUpperCase()}</p>

            {/* Template literal */}
            <p>{`${name} - ${age} tuổi`}</p>

            {/* Ternary operator */}
            <p>{age >= 18 ? 'Người lớn' : 'Trẻ em'}</p>
        </div>
    );
}

⚠️ Không thể dùng trong JSX:
• if/else statements (dùng ternary hoặc &&)
• for/while loops (dùng .map())
• Khai báo biến (const, let, var)

3. Quy Tắc JSX

Một root element duy nhất

// ❌ Lỗi: nhiều root elements
function Bad() {
    return (
        <h1>Title</h1>
        <p>Content</p>
    );
}

// ✅ Cách 1: Wrap trong div
function Good1() {
    return (
        <div>
            <h1>Title</h1>
            <p>Content</p>
        </div>
    );
}

// ✅ Cách 2: Dùng Fragment (không tạo thêm DOM node)
function Good2() {
    return (
        <>
            <h1>Title</h1>
            <p>Content</p>
        </>
    );
}

Sự khác biệt với HTML

function MyComponent() {
    return (
        <div>
            {/* className thay vì class */}
            <div className="container">

            {/* htmlFor thay vì for */}
            <label htmlFor="name">Tên:</label>
            <input id="name" />

            {/* style nhận object, camelCase */}
            <p style={{ color: 'red', fontSize: '16px' }}>
                Styled text
            </p>

            {/* Self-closing tags BẮT BUỘC */}
            <img src="photo.jpg" alt="Photo" />
            <br />
            <input type="text" />

            </div>
        </div>
    );
}

💡 Mẹo: Dùng HTML to JSX converter để chuyển đổi HTML sang JSX nhanh chóng!

4. Conditional Rendering

function Dashboard({ isLoggedIn, role, notifications }) {
    return (
        <div>
            {/* Ternary: hiển thị 1 trong 2 */}
            {isLoggedIn
                ? <h1>Chào mừng trở lại!</h1>
                : <h1>Vui lòng đăng nhập</h1>
            }

            {/* && operator: hiển thị hoặc không */}
            {notifications > 0 && (
                <span className="badge">
                    {notifications} thông báo mới
                </span>
            )}

            {/* Nhiều điều kiện: dùng hàm riêng */}
            {renderRole(role)}
        </div>
    );
}

function renderRole(role) {
    switch (role) {
        case 'admin': return <span>👑 Admin</span>;
        case 'editor': return <span>✏️ Editor</span>;
        default: return <span>👤 User</span>;
    }
}

📝 Tóm Tắt Bài Học

JSX = JavaScript XML, cú pháp HTML trong JS
Dùng {} để nhúng expressions JavaScript
Phải có một root element duy nhất (hoặc Fragment)
Dùng className, htmlFor, style={{}}
Conditional: ternary (? :) hoặc &&

← Bài 1: Giới thiệu React Bài 3: Components →