JSX: phần mở rộng JavaScript và ví dụ sử dụng

JSX là gì?

JSX (JavaScript XML) là phần mở rộng cú pháp cho JavaScript, được giới thiệu lần đầu trong React vào năm 2013. Nó cho phép nhà phát triển mô tả cấu trúc giao diện người dùng theo phong cách khai báo, kết hợp đánh dấu và logic trong một tập tin.

Trước JSX, các nhà phát triển sử dụng template chuỗi (Mustache, Handlebars) hoặc tạo phần tử DOM thủ công qua document.createElement. Cả hai cách tiếp cận đều có nhược điểm: template chuỗi không được kiểm tra kiểu, và tạo DOM thủ công rườm rà và dễ xảy ra lỗi.

React đã chọn một con đường khác — nhúng đánh dấu trực tiếp vào mã. Quyết định này đã gây ra tranh luận trong cộng đồng, nhưng theo thời gian nó đã trở thành tiêu chuẩn. Ngày nay, JSX không chỉ được sử dụng trong React mà còn trong SolidJS, Preact, Qwik và thậm chí trong Vue thông qua các plugin.

Cú pháp JSX cơ bản

Phần tử JSX trông giống thẻ HTML nhưng được nhúng trực tiếp vào JavaScript. Mỗi phần tử được biên dịch thành lời gọi React.createElement với ba đối số: loại phần tử, đối tượng props và các phần tử con. Một phần tử gốc là quy tắc bắt buộc: biểu thức JSX phải trả về một phần tử cha hoặc fragment.

import React from 'react';

// JSX cơ bản - một phần tử gốc
const element = (
  <div className="app">
    <h1>Hello, World!</h1>
    <p>Welcome to React</p>
  </div>
);

Fragment để nhóm

Khi không cần nút DOM bổ sung, hãy sử dụng React.Fragment hoặc cú pháp rút gọn <></>. Fragment không tạo phần tử DOM thật mà chỉ nhóm các nút con. Điều này đặc biệt hữu ích trong bảng và danh sách, nơi một wrapper bổ sung sẽ phá vỡ cấu trúc HTML.

function Columns() {
  return (
    <>
      <td>First</td>
      <td>Second</td>
    </>
  );
}

Biểu thức và biến trong JSX

Bất kỳ biểu thức JavaScript nào cũng được nhúng trong JSX qua dấu ngoặc nhọn { }. Bên trong, bạn có thể sử dụng biến, lời gọi hàm, toán tử ba ngôi và phương thức mảng. Kết xuất có điều kiện được thực hiện qua toán tử ba ngôi hoặc AND logic.

function Greeting({ name, isLoggedIn }) {
  const items = ['Red', 'Green', 'Blue'];

  return (
    <div>
      {/* Expression with variable */}
      <h1>Hello, {name}</h1>

      {/* Conditional rendering */}
      {isLoggedIn ?
        <p>Welcome back!</p :
        <button>Login</button>
      }

      {/* Render array */}
      <ul>
        {items.map(item =>
          <li key={item}>{item}</li>
        )}
      </ul>
    </div>
  );
}

Một giới hạn chính — chỉ có biểu thức mới có thể được sử dụng bên trong dấu ngoặc nhọn, không phải câu lệnh. Bạn không thể sử dụng if/else, for, switch — chỉ toán tử ba ngôi, toán tử logic và phương thức mảng. Lời gọi hàm được phép, bao gồm cả hàm mũi tên.

Sự khác biệt giữa JSX và HTML

JSX trông giống HTML nhưng có những khác biệt cơ bản. Thuộc tính được viết bằng camelCase — className thay vì class, onClick thay vì onclick, tabIndex thay vì tabindex. Điều này là do JSX biên dịch thành JavaScript, nơi dấu gạch nối trong tên thuộc tính không được phép.

Một khác biệt quan trọng nữa — thẻ tự đóng. Trong HTML, một số thẻ (br, hr, input) có thể không đóng. Trong JSX, tất cả các thẻ tự đóng phải có dấu gạch chéo đóng: <br />, <input />. Tên thuộc tính SVG cũng được chuyển thành camelCase: strokeWidth, fillOpacity.

Cách JSX được biên dịch thành JavaScript

Trình duyệt không hiểu JSX trực tiếp. Trước khi thực thi, mã JSX đi qua một trình biên dịch — Babel, TypeScript hoặc esbuild. Mỗi phần tử JSX được biến thành lời gọi createElement hoặc jsx/runtime.

Chuyển đổi qua Babel

// JSX gốc
const element = <h1 className="title">Hello</h1>;

// Sau khi biên dịch
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello'
);

Với React 17, một phép biến đổi JSX mới đã xuất hiện không yêu cầu import React. Import tự động jsx-runtime cho phép viết component mà không cần import React from ‘react’. Babel và TypeScript hỗ trợ phép biến đổi này thông qua cấu hình {"runtime": "automatic"}.

JSX ngoài React: Solid, Preact, Vue

Mặc dù JSX gắn liền với React, các framework khác cũng sử dụng nó. SolidJS sử dụng JSX với biên dịch thành các nút DOM thật, không cần Virtual DOM. Preact là một thay thế nhẹ cho React với hỗ trợ JSX đầy đủ. Vue hỗ trợ JSX qua @vue/babel-plugin-jsx, mặc dù template chính của nó là template.

Một khác biệt chính là ngữ nghĩa biểu thức. Trong React, các biểu thức JSX được thực thi ở mỗi lần kết xuất. Trong SolidJS, JSX biên dịch một lần và các bản cập nhật được theo dõi qua tín hiệu. Điều này ảnh hưởng đến hiệu suất: SolidJS không cần Virtual DOM và điều phối, làm cho việc kết xuất JSX nhanh hơn.

Trong TypeScript, JSX được hỗ trợ ở cấp độ ngôn ngữ. Các tập tin có phần mở rộng .tsx tự động xử lý cú pháp JSX. Đánh kiểu props là một trong những lợi thế chính của TypeScript + JSX: IDE gợi ý các thuộc tính mong đợi, kiểu callback và tính bắt buộc của props.

Thực hành tốt nhất với JSX

Viết mã JSX dễ đọc và dễ bảo trì. Trích xuất các biểu thức phức tạp vào các biến hoặc hàm riêng — điều này cải thiện khả năng đọc và cho phép kiểm tra logic riêng biệt với đánh dấu. Sử dụng fragment thay vì các wrapper div không cần thiết.

Quy tắc thụt lề — duy trì thụt lề cho các phần tử lồng nhau. Mỗi cấp độ lồng nhau là một cấp độ thụt lề. Thẻ đóng phải ở cùng cấp với thẻ mở. Đối với các thuộc tính dài, hãy sử dụng xuống dòng.

Tránh hàm mũi tên nội tuyến trong props nếu chúng được tạo ra ở mỗi lần kết xuất. Trong trường hợp này, hãy bọc callback trong useCallback hoặc di chuyển hàm ra ngoài component. Chia các component phức tạp thành những component nhỏ hơn — mỗi component nên xử lý một đơn vị logic của giao diện.