JSX là gì? Tại sao nó quan trọng trong React?

Khi bắt đầu học React, bạn sẽ gặp ngay một thứ trông như HTML trong JavaScript. Đó chính là JSX – một cú pháp đặc biệt được thiết kế để mô tả giao diện người dùng trong React.

JSX là gì?

JSX (JavaScript XML) là một cú pháp mở rộng của JavaScript cho phép bạn viết HTML trong JavaScript. Mặc dù không phải là tính năng gốc của JavaScript, nhưng JSX được React sử dụng rộng rãi vì nó giúp mô tả UI một cách dễ đọc và gần gũi với lập trình viên web.

Ví dụ:

const name = "Hung";
const element = <h1>Xin chào, {name}!</h1>;

JSX cho phép bạn chèn biểu thức JavaScript (như biến, hàm, phép toán...) vào bên trong giao diện bằng cách đặt trong dấu {}.

JSX hoạt động như thế nào?

JSX không phải là HTML. Trước khi chạy trên trình duyệt, JSX sẽ được biên dịch thành các lệnh React.createElement.

Ví dụ:

<h1>Hello</h1>

Sẽ được Babel biên dịch thành:

React.createElement('h1', null, 'Hello');

Vì vậy, trình duyệt thực chất không hiểu JSX – bạn luôn cần trình biên dịch (như Babel/Webpack) để sử dụng JSX trong React.

Lợi ích của JSX

1. Viết UI rõ ràng, dễ đọc
   JSX gần giống HTML nên giúp lập trình viên web cảm thấy quen thuộc.

2. Tích hợp logic dễ dàng
   Có thể chèn điều kiện, vòng lặp, biến... vào trong JSX một cách trực tiếp.

3. Gắn liền với component-based architecture
   Mỗi component React thường return JSX để mô tả giao diện riêng của nó.

4. Tối ưu hiệu năng khi kết hợp với Virtual DOM
   JSX được React xử lý và chuyển thành Virtual DOM, giúp cập nhật giao diện nhanh và hiệu quả.

Một số lưu ý khi dùng JSX

• Dùng className thay cho class (tránh xung đột với từ khóa class của JavaScript):

  <div className="header">...</div>
  

• Mọi thẻ phải được đóng đúng cách (kể cả thẻ đơn):

  <img src="..." />
  <input type="text" />
  

• JSX chỉ trả về một phần tử duy nhất – nên thường dùng div hoặc <>...</> (React Fragment) để bao bọc:

  return ( <> <Header /> <Content /> </>
  );
  

JSX cho phép biểu thức, không phải câu lệnh

Bạn có thể dùng các biểu thức như toán tử ba ngôi, gọi hàm, toán tử logic... trong JSX:

{score > 90 ? "Xuất sắc" : "Cần cố gắng"}

Nhưng không thể dùng lệnh điều kiện if, for trực tiếp trong JSX:

❎️ Sai:

if (score > 90) { return <p>Xuất sắc</p>;
}

✅ Đúng (dùng bên ngoài hoặc chuyển thành biểu thức):

{score > 90 && <p>Xuất sắc</p>}

JSX nâng cao: kết hợp render danh sách

const names = ['May', 'Fest']; <ul> {names.map((name, index) => ( <li key={index}>{name}</li> ))}
</ul>

🔚 Kết luận

JSX là một cú pháp mạnh mẽ giúp viết UI trong React một cách trực quan, ngắn gọn và linh hoạt. Tuy không phải là JavaScript thuần hay HTML thực sự, nhưng JSX giúp bạn kết hợp logic với giao diện một cách tự nhiên, là công cụ cốt lõi để xây dựng component trong React.

Hiểu JSX kỹ sẽ giúp bạn dễ dàng xây dựng các giao diện phức tạp, đọc hiểu code React nhanh hơn và làm việc hiệu quả hơn trong các dự án thực tế.