JSX là gì? Quy tắc cú pháp JSX trong React qua ví dụ

JSX là một phần mở rộng cú pháp của JavaScript, cho phép bạn viết markup giống HTML ngay trong code. Component React trả về JSX để mô tả những gì sẽ hiện trên màn hình, và một công cụ build sẽ biên dịch nó thành các lời gọi hàm JavaScript thông thường. Nó trông giống HTML, nhưng có vài quy tắc khác, và dấu ngoặc nhọn cho phép bạn đưa bất kỳ giá trị JavaScript nào vào markup.

export default function App() {
    const user = { name: 'Ada Lovelace', role: 'Engineer', skills: ['math', 'code'] };
    const initials = user.name.split(' ').map((part) => part[0]).join('');

    return (
        <div className="card">
            <h2>{user.name}</h2>
            <p>
                {initials} works as an {user.role.toLowerCase()} and knows{' '}
                {user.skills.length} skills.
            </p>
            <ul>
                {user.skills.map((skill) => (
                    <li key={skill}>{skill.toUpperCase()}</li>
                ))}
            </ul>
        </div>
    );
}

Mọi thứ bên trong {} đều là JavaScript: một thuộc tính, một lời gọi phương thức, thậm chí cả map biến một mảng thành các mục danh sách. Thêm 'design' vào mảng skills và cả số đếm lẫn danh sách đều cập nhật.

Các quy tắc của JSX

Trả về một phần tử gốc

Component trả về một giá trị duy nhất, nên JSX của nó cần một phần tử cha duy nhất. Hai phần tử ngang hàng ở cấp trên cùng là lỗi cú pháp. Khi không muốn có thêm một <div> trên trang, hãy bọc chúng trong một fragment, <>...</>:

// Error: Adjacent JSX elements must be wrapped in an enclosing tag
return (
    <h1>Title</h1>
    <p>Text</p>
);

// OK: a fragment groups them without adding a DOM element
return (
    <>
        <h1>Title</h1>
        <p>Text</p>
    </>
);

Khi cần đặt key cho cả nhóm, hãy dùng dạng đầy đủ <Fragment key={id}>; xem fragment.

Đóng mọi thẻ

HTML cho phép để mở một số thẻ. JSX thì không. Phần tử không có phần tử con tự đóng bằng />: <img />, <br />, <input />, và các component của riêng bạn như <Avatar />.

Dùng className, htmlFor và thuộc tính camelCase

Thuộc tính JSX trở thành khóa của một đối tượng JavaScript, nên chúng tuân theo cách đặt tên của JavaScript. class và for là từ khóa dành riêng trong JavaScript, vì vậy JSX dùng className và htmlFor. Thuộc tính nhiều từ và mọi trình xử lý sự kiện đều viết theo camelCase: tabIndex, maxLength, autoFocus, onClick, onChange. Hai ngoại lệ giữ nguyên dấu gạch nối: thuộc tính aria-* và data-* được viết y như trong HTML.

export default function App() {
    return (
        <form onSubmit={(e) => e.preventDefault()}>
            <style>{`
                .field { display: block; margin-bottom: 8px; }
                .hint { color: #777; font-size: 13px; }
            `}</style>
            <label htmlFor="email" className="field">
                Email
            </label>
            <input id="email" type="email" maxLength={40} autoComplete="off" />
            <p className="hint" data-testid="hint" aria-live="polite">
                Clicking the label focuses the input, because htmlFor matches its id.
            </p>
            <button type="submit" disabled={false}>
                Send
            </button>
        </form>
    );
}

Đổi className="field" thành class="field". Nhãn vẫn giữ style, vì React vẫn đặt thuộc tính đó, nhưng bản build phát triển sẽ ghi log "Invalid DOM property class. Did you mean className?" Phần xem trước chạy như bản build production, nên bạn sẽ không thấy cảnh báo đó ở đây; hãy dùng className. Thuộc tính dạng chuỗi dùng dấu nháy (type="email"); mọi giá trị khác dùng dấu ngoặc nhọn (maxLength={40}, disabled={false}).

Dấu ngoặc nhọn nhận biểu thức, không nhận câu lệnh

Bên trong {} bạn có thể viết bất cứ thứ gì tạo ra một giá trị: một biến, phép tính, lời gọi hàm, toán tử ba ngôi, &&, template literal. Các câu lệnh như if, for và const không tạo ra giá trị, nên không thể đặt ở đó. Hãy xử lý trước return, hoặc dùng dạng biểu thức:

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);

    let message;
    if (count === 0) {
        message = 'No messages';
    } else {
        message = `${count} new message${count === 1 ? '' : 's'}`;
    }

    return (
        <div>
            <p>{message}</p>
            <p>{count > 5 ? 'Inbox is busy' : 'Inbox is calm'}</p>
            {count && <p>You have mail.</p>}
            <button onClick={() => setCount(count + 1)}>New message</button>
            <button onClick={() => setCount(0)}>Clear</button>
        </div>
    );
}

Nhìn kỹ trước khi click: trang đang hiện một số 0 lạc chỗ. count && <p>...</p> cho ra 0 khi số đếm bằng không, và React render số, kể cả số không. Đổi thành count > 0 && <p>You have mail.</p> và số 0 biến mất. false, null, undefined và true không render ra gì, vì vậy đặt một boolean bên trái && là an toàn. Trang render có điều kiện trình bày các cách viết này.

Style nội tuyến dùng một đối tượng

Thuộc tính style nhận một đối tượng JavaScript, không phải chuỗi CSS. Đó là lý do có kiểu "ngoặc nhọn kép": cặp bên ngoài nghĩa là "đây là JavaScript", cặp bên trong là đối tượng literal. Tên thuộc tính viết theo camelCase (backgroundColor, fontSize), và một số thuần nghĩa là pixel với hầu hết các thuộc tính kích thước.

import { useState } from 'react';

export default function App() {
    const [big, setBig] = useState(false);
    const boxStyle = {
        padding: 12,
        borderRadius: 8,
        backgroundColor: big ? '#dbeafe' : '#f3f4f6',
        fontSize: big ? 24 : 16,
    };

    return (
        <div>
            <div style={boxStyle}>Styled with a JavaScript object</div>
            <p style={{ color: '#555', marginTop: 8 }}>Double braces: an object literal.</p>
            <button onClick={() => setBig(!big)}>Toggle size</button>
        </div>
    );
}

Vì style là một đối tượng, nó có thể được tính từ state như mọi giá trị khác. Thử đổi fontSize: big ? 24 : 16 thành fontSize: big ? '2em' : '1em': chuỗi được truyền nguyên vẹn kèm đơn vị.

Chú thích

Chú thích bên trong JSX được đặt trong dấu ngoặc nhọn: {/* this is a comment */}. Chú thích HTML (<!-- -->) là lỗi cú pháp. Bên ngoài markup, trong thân hàm, chú thích // thông thường vẫn dùng được như bình thường.

return (
    <div>
        {/* The header is hidden on small screens */}
        <Header />
    </div>
);

Chuyển HTML sang JSX

Dán HTML vào một component là bước đầu thường gặp, và phần lớn sẽ chạy được. Đây là những thay đổi bạn thường phải làm:

• class thành className, và for thành htmlFor.
• Thẻ rỗng tự đóng: <br> thành <br />, <img src="a.png"> thành <img src="a.png" />.
• style="color: red; font-size: 14px" thành style={{ color: 'red', fontSize: 14 }}.
• Thuộc tính sự kiện nhận một hàm, không phải chuỗi: onclick="save()" thành onClick={save}.
• Tên thuộc tính chuyển sang camelCase: tabindex thành tabIndex, và stroke-width của SVG thành strokeWidth.
• <!-- comments --> thành {/* comments */}.
• Nhiều phần tử ở cấp trên cùng cần một phần tử cha hoặc một fragment.

Các công cụ chuyển HTML sang JSX trực tuyến làm những bước này giúp bạn, nhưng nắm được chúng sẽ giúp bạn dễ đọc thông báo lỗi khi bỏ sót một bước.

JSX được biên dịch thành gì

Trình duyệt không thể chạy JSX. Một trình biên dịch (như Babel, SWC hoặc Oxc, được Vite và các framework chạy giúp bạn) biến mỗi thẻ thành một lời gọi hàm từ react/jsx-runtime:

// What you write
const element = <h1 className="title">Hello, {name}</h1>;
const button = <Button size="small">OK</Button>;

// What the compiler produces (roughly)
import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';

const element = _jsxs('h1', { className: 'title', children: ['Hello, ', name] });
const button = _jsx(Button, { size: 'small', children: 'OK' });

Thẻ viết thường trở thành một chuỗi ('h1', một phần tử HTML), thẻ viết hoa chữ đầu trở thành tham chiếu đến hàm của bạn (Button), các thuộc tính trở thành đối tượng props, và nội dung trở thành children. Các thiết lập cũ biên dịch thành React.createElement(type, props, ...children), đó là lý do các tệp cũ bắt đầu bằng import React from 'react' dù không hề nhắc đến React. Lời gọi này trả về một đối tượng thuần gọi là phần tử React (React element). Bạn có thể ghi log nó:

function Badge({ label }) {
    return <span style={{ border: '1px solid', padding: '0 6px' }}>{label}</span>;
}

export default function App() {
    const heading = <h3 className="title">Hello</h3>;
    const badge = <Badge label="new" />;

    console.log('heading type:', heading.type, 'props:', heading.props);
    console.log('badge type is the Badge function:', badge.type === Badge);

    return (
        <div>
            {heading}
            {badge}
        </div>
    );
}

Console cho thấy heading chỉ là dữ liệu: một kiểu 'h3' và một đối tượng props. Đó cũng là lý do JSX có thể được lưu trong biến, truyền vào hàm và trả về từ hàm.

JSX tự escape văn bản cho bạn

Mọi chuỗi bạn đặt trong dấu ngoặc nhọn đều được render thành văn bản, không bao giờ thành HTML. Nếu người dùng gõ <img src=x onerror=alert(1)> vào ô bình luận, React hiển thị đúng các ký tự đó trên màn hình thay vì tạo ra một thẻ ảnh. Nhờ vậy dạng tấn công cross-site scripting (XSS) phổ biến nhất bị chặn ngay từ mặc định.

export default function App() {
    const comment = 'Nice post! <b>bold?</b> <img src="x" onerror="alert(1)">';
    const trustedHtml = 'This came from <b>our own</b> markdown renderer.';

    return (
        <div>
            <p>{comment}</p>
            <p dangerouslySetInnerHTML={{ __html: trustedHtml }} />
        </div>
    );
}

Đoạn văn đầu tiên in các thẻ ra dưới dạng ký tự thường. Đoạn thứ hai dùng dangerouslySetInnerHTML, thuộc tính này bỏ qua việc escape và chèn chuỗi vào như HTML thật, nên "our own" được in đậm. Cái tên dài chính là lời cảnh báo: chỉ truyền vào HTML do chính bạn tạo ra hoặc đã được làm sạch bằng một công cụ như DOMPurify. Truyền dữ liệu người dùng nhập vào đó sẽ mở lại lỗ hổng XSS mà JSX đã đóng.