JSX là một khái niệm cốt lõi trong React – nếu bạn đang hoặc sẽ học React, hiểu rõ JSX là bắt buộc. Dưới đây là bài viết tổng hợp chi tiết về JSX trong React, bao gồm định nghĩa, lý do sử dụng, cú pháp, ví dụ và các lưu ý quan trọng.


🧠 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 bên trong JavaScript. JSX được sử dụng trong React để mô tả giao diện người dùng một cách trực quan và dễ hiểu hơn.

Ví dụ:

const element = <h1>Hello, world!</h1>;

Dòng trên không phải là HTML thuần, mà là JSX. Trình biên dịch như Babel sẽ chuyển JSX thành JavaScript gọi hàm React.createElement.


🔍 Tại sao sử dụng JSX?

✅ Dễ đọc và dễ viết

JSX giúp viết cấu trúc giao diện (UI) dễ hiểu hơn, gần giống HTML.

✅ Gắn liền với logic JavaScript

Bạn có thể nhúng các biến, biểu thức, hàm JavaScript vào JSX bằng cú pháp {}.

const name = 'John';
const element = <h1>Hello, {name}!</h1>;

✅ Cảnh báo lỗi sớm

JSX giúp phát hiện lỗi cú pháp sớm hơn trong quá trình build.


🧱 Cú pháp JSX cơ bản

1. Một component chỉ được phép trả về 1 phần tử gốc

// Sai ❌
return (
  <h1>Title</h1>
  <p>Subtitle</p>
);

// Đúng ✅
return (
  <div>
    <h1>Title</h1>
    <p>Subtitle</p>
  </div>
);

2. Dùng {} để nhúng biểu thức JavaScript

const age = 25;
return <p>Tuổi: {age}</p>;

3. Dùng className thay vì class

return <div className="container">Nội dung</div>;

4. Dùng htmlFor thay vì for trong thẻ <label>

<label htmlFor="email">Email</label>
<input id="email" />

⚡ Các tính năng nâng cao trong JSX

1. Ternary operator (if else rút gọn)

const isLoggedIn = true;
return <p>{isLoggedIn ? 'Welcome' : 'Please login'}</p>;

2. Rendering mảng với .map()

const items = ['Táo', 'Cam', 'Chuối'];
return (
  <ul>
    {items.map((item, index) => <li key={index}>{item}</li>)}
  </ul>
);

3. Fragment – thay vì dùng <div> bọc ngoài

return (
  <>
    <h1>Tiêu đề</h1>
    <p>Mô tả</p>
  </>
);

⚠️ Lưu ý khi dùng JSX

Lưu ýGiải thích
JSX phải có thẻ cha bao ngoàiVì mỗi component chỉ return được một phần tử gốc
key là bắt buộc khi render listĐể React xác định và cập nhật chính xác
Không dùng if trực tiếp trong JSXThay vào đó dùng &&, ? : hoặc viết logic trước return
JSX chỉ cho phép biểu thức, không cho phép câu lệnhKhông thể dùng if, for trong JSX trực tiếp

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

Dưới đây là ví dụ JSX và JavaScript tương đương:

const element = <h1 className="title">Hello</h1>;

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

const element = React.createElement('h1', { className: 'title' }, 'Hello');

📦 JSX trong thực tế

Component cơ bản dùng JSX:

function Welcome(props) {
  return <h1>Xin chào, {props.name}</h1>;
}

Component phức tạp hơn:

function UserCard({ user }) {
  return (
    <div className="card">
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

📚 Tổng quan

Thuộc tínhJSX
Tên đầy đủJavaScript XML
Dùng trongReact
Ưu điểmDễ đọc, trực quan, gắn liền JavaScript
Nhược điểmCần trình biên dịch (như Babel) để chạy trên trình duyệt
Không bắt buộcBạn có thể dùng React mà không cần JSX, nhưng sẽ rất rối

🏗 Cách JSX hoạt động bên trong React

JSX chỉ là "cú pháp ngọt" (syntactic sugar)

JSX không phải là HTML – nó chỉ giúp bạn viết code giống HTML trong JavaScript. Khi build, JSX sẽ được biên dịch thành React.createElement:

const element = <h1>Hello</h1>;

Sẽ được Babel chuyển thành:

const element = React.createElement(
  'h1',
  null,
  'Hello'
);

Mỗi phần tử JSX tạo ra một React Element – là một object đơn giản mô tả những gì sẽ xuất hiện trên UI.


🧩 JSX – cách xử lý các thuộc tính và sự kiện

✅ Thuộc tính (Props)

  • Các thuộc tính viết theo camelCase thay vì kiểu kebab-case như HTML.
HTMLJSX
<div tabindex="0"><div tabIndex={0}>
<input maxlength="5"><input maxLength={5}>

✅ Sự kiện

  • Tên sự kiện viết theo camelCase: onClick, onChange, onMouseEnter,...
  • Truyền vào là hàm, không phải chuỗi như HTML.
function handleClick() {
  alert('Đã click!');
}

<button onClick={handleClick}>Click me</button>

🔄 Điều kiện trong JSX

Không thể dùng if/else trực tiếp trong JSX, nhưng có 3 cách phổ biến để render có điều kiện:

1. Toán tử ? :

{isLoggedIn ? <p>Chào mừng!</p> : <p>Vui lòng đăng nhập.</p>}

2. Toán tử &&

{hasError && <p style={{ color: 'red' }}>Có lỗi xảy ra</p>}

3. Tách ra ngoài JSX

let content;
if (loading) {
  content = <p>Đang tải...</p>;
} else {
  content = <p>Dữ liệu đã tải.</p>;
}

return <div>{content}</div>;

🔁 Duyệt mảng trong JSX – map()

React thường xuyên hiển thị danh sách, như danh sách bài viết, sản phẩm, bình luận,... JSX không hỗ trợ for, thay vào đó bạn dùng .map():

const fruits = ['Táo', 'Cam', 'Chuối'];

return (
  <ul>
    {fruits.map((fruit, index) => (
      <li key={index}>{fruit}</li>
    ))}
  </ul>
);

🔑 Tại sao cần key?

Key giúp React nhận diện phần tử nào thay đổi, thêm hoặc xóa để cập nhật hiệu quả mà không render lại toàn bộ DOM.

Lưu ý: Không nên dùng index làm key trong danh sách có thể thay đổi thứ tự.


🧠 JSX nâng cao

1. JSX với Style

Bạn có thể thêm style trực tiếp bằng object JavaScript:

const style = {
  color: 'blue',
  fontSize: '20px'
};

return <p style={style}>Chữ màu xanh</p>;

⚠️ Tên thuộc tính CSS cũng viết camelCase: backgroundColor, fontSize,...


2. Component lồng nhau bằng JSX

function Card({ title, children }) {
  return (
    <div className="card">
      <h3>{title}</h3>
      <div>{children}</div>
    </div>
  );
}

function App() {
  return (
    <Card title="Giới thiệu">
      <p>Đây là nội dung bên trong thẻ Card.</p>
    </Card>
  );
}

children là tất cả nội dung nằm giữa cặp thẻ <Card>...</Card>


🧼 Một số clean code JSX nên tuân theo

Thói quen xấu ❌Cách tốt ✅
JSX dài dòng trong returnTách component nhỏ
Không đặt key khi dùng .map()Luôn thêm key
Inline function phức tạpTách ra ngoài
Quá nhiều điều kiện lồng nhauViết logic ngoài return

💡 Mẹo thực tế khi dùng JSX

✅ Sử dụng Fragment khi không muốn tạo thêm thẻ HTML

<>
  <h1>Tiêu đề</h1>
  <p>Mô tả</p>
</>

Tương đương với:

<React.Fragment>
  <h1>Tiêu đề</h1>
  <p>Mô tả</p>
</React.Fragment>

✅ Tên component phải viết hoa chữ cái đầu

function Welcome() {
  return <h1>Xin chào!</h1>;
}

// Đúng
<Welcome />

// Sai - sẽ bị React hiểu là thẻ HTML <welcome>
<welcome />

✅ Tổng kết JSX – Mindmap nhanh

JSX
├── Là gì: JavaScript XML
├── Viết UI giống HTML
├── Ưu điểm: dễ đọc, kết hợp logic JS
├── Cần Babel để compile
├── Dùng props, sự kiện, render có điều kiện
├── Duyệt mảng với map() + key
├── Dùng Fragment để tránh thẻ thừa
├── Clean code: tách component, hạn chế logic phức tạp trong JSX