JSX trong React là gì? Hướng dẫn chi tiết cho người mới bắt đầu

Trong thế giới phát triển web hiện đại, React đã nổi lên như một thế lực thống trị, một thư viện JavaScript mạnh mẽ để xây dựng giao diện người dùng (UI). Và ẩn sau sức mạnh của React, có một "phép thuật" mang tên JSX. Nếu bạn đang bắt đầu hành trình với React, hoặc thậm chí đã làm việc với nó một thời gian, việc hiểu sâu sắc về JSX không chỉ là một yêu cầu, mà là chìa khóa để mở ra toàn bộ tiềm năng sáng tạo của bạn.

Bài viết này sẽ đưa bạn đi từ những khái niệm cơ bản nhất đến những góc nhìn sâu sắc về JSX, giải thích tại sao nó không phải là HTML, và làm thế nào nó trở thành một phần không thể thiếu của hệ sinh thái React.

1. JSX là gì? Một cái nhìn trực quan

Hãy bắt đầu bằng một ví dụ đơn giản. Thay vì viết code JavaScript thuần túy để tạo một phần tử DOM như thế này:

const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Xin chào thế giới!',
)

Với JSX, bạn có thể viết một cách trực quan và quen thuộc hơn rất nhiều:

const element = <h1 className="greeting">Xin chào thế giới!</h1>

Ngay lập tức, bạn có thể thấy sự khác biệt. Dòng code thứ hai trông gần giống hệt như HTML. Nó ngắn gọn, dễ đọc và dễ hình dung ra cấu trúc giao diện.

JSX (JavaScript XML) là một phần mở rộng cú pháp cho JavaScript. Nó cho phép chúng ta viết code trông giống HTML ngay bên trong các file JavaScript. JSX không phải là một ngôn ngữ riêng biệt, cũng không phải là HTML chạy trong JavaScript. Nó chỉ đơn giản là "cú pháp ngọt ngào" (syntactic sugar) cho hàm React.createElement().

Điểm cốt lõi cần nhớ: Trình duyệt không thể đọc trực tiếp JSX. Trước khi được thực thi trên trình duyệt, code JSX sẽ được "biên dịch" (transpile) bởi các công cụ như Babel thành các đối tượng JavaScript thông thường mà React có thể hiểu.

2. Tại sao phải dùng JSX? Những lợi ích vượt trội

Câu hỏi tự nhiên tiếp theo là: "Tại sao chúng ta cần thêm một lớp cú pháp nữa? JavaScript thuần không đủ sao?" Câu trả lời nằm ở những lợi ích to lớn mà JSX mang lại trong quá trình phát triển.

Sức mạnh của trực quan hóa

Logic và giao diện thường gắn bó chặt chẽ với nhau. Ví dụ, một nút bấm có thể thay đổi văn bản khi được nhấp, hoặc một danh sách hiển thị các mục dữ liệu từ một mảng. JSX cho phép bạn giữ logic render (cách UI hiển thị) và logic nghiệp vụ (UI làm gì) ở cùng một nơi - bên trong một component. Điều này giúp code dễ hiểu, dễ bảo trì và dễ dàng hình dung luồng hoạt động của ứng dụng.

Code ngắn gọn và dễ đọc hơn

Như đã thấy ở ví dụ trên, cú pháp của JSX gần gũi với HTML, giúp giảm đáng kể số lượng code cần viết so với việc sử dụng React.createElement() lồng vào nhau. Khi xây dựng các component phức tạp, sự khác biệt này càng trở nên rõ rệt, giúp code của bạn sạch sẽ và dễ quản lý hơn.

Bắt lỗi sớm hơn

JSX có kiểu dữ liệu rõ ràng. Khi bạn biên dịch JSX, Babel sẽ thực hiện các kiểm tra. Ví dụ, nếu bạn quên đóng một thẻ hoặc gõ sai tên một thuộc tính, trình biên dịch sẽ báo lỗi ngay lập tức, giúp bạn phát hiện và sửa lỗi sớm trong quá trình phát triển thay vì phải đợi đến lúc chạy ứng dụng.

Tăng cường hiệu suất (Một cách gián tiếp)

React sử dụng một cơ chế gọi là Virtual DOM (DOM ảo) để tối ưu hóa việc cập nhật giao diện. JSX tích hợp hoàn hảo với cơ chế này. Khi bạn viết JSX, React sẽ tạo ra các đối tượng JavaScript nhẹ nhàng đại diện cho cây DOM. Khi trạng thái (state) thay đổi, React sẽ tạo một cây DOM ảo mới, so sánh nó với cây cũ, và chỉ cập nhật những phần thực sự thay đổi trên DOM thật. Quá trình này hiệu quả hơn nhiều so với việc thao tác trực tiếp với DOM thật.

3. Cú pháp JSX: Không hoàn toàn là HTML

Mặc dù trông rất giống HTML, JSX có những quy tắc riêng mà bạn cần nắm vững. Đây là những điểm khác biệt quan trọng nhất.

HTML vs JSX

Phải có một phần tử gốc duy nhất

Mọi biểu thức JSX phải được bao bọc trong một phần tử cha duy nhất.

// ❌ Lỗi! Hai phần tử cùng cấp
const element = (
  <h1>Xin chào</h1>
  <p>Đây là React</p>
);

// ✅ Dùng một thẻ div bao bọc
const element = (
  <div>
    <h1>Xin chào</h1>
    <p>Đây là React</p>
  </div>
)

Hoặc sử dụng React Fragment (một phần tử vô hình) để không tạo thêm thẻ thừa trong DOM:

import React from 'react'

const element = (
  <React.Fragment>
    <h1>Xin chào</h1>
    <p>Đây là React</p>
  </React.Fragment>
)

// Hoặc cú pháp ngắn gọn
const element = (
  <>
    <h1>Xin chào</h1>
    <p>Đây là React</p>
  </>
)

2. Tên thuộc tính theo quy tắc camelCase

Vì JSX thực chất là JavaScript, các thuộc tính HTML sẽ được chuyển đổi sang quy tắc đặt tên camelCase.

class trong HTML trở thành className trong JSX (vì class là một từ khóa của JavaScript).
for trong thẻ <label> trở thành htmlFor.
Các thuộc tính có dấu gạch ngang như tab-index trở thành tabIndex.

/* HTML: */
<div class="container" tabindex="0"></div>

// JSX:
const element = <div className="container" tabIndex="0"></div>

Nhúng biểu thức JavaScript với dấu ngoặc nhọn

Đây là tính năng mạnh mẽ nhất của JSX. Bạn có thể nhúng bất kỳ biểu thức JavaScript hợp lệ nào vào bên trong code JSX bằng cách đặt nó trong cặp dấu ngoặc nhọn {}.

const name = 'React Developer'
const user = {
  avatarUrl: 'https://example.com/avatar.jpg',
}

const element = (
  <div>
    <h1>Chào mừng, {name}!</h1>
    <p>Năm hiện tại là {new Date().getFullYear()}</p>
    <img src={user.avatarUrl} alt="Avatar" />
  </div>
)

Bạn có thể gọi hàm, thực hiện phép toán, sử dụng toán tử ba ngôi, và phổ biến nhất là dùng hàm .map() để render một danh sách các phần tử.

const products = [
  { id: 1, name: 'iPhone 15' },
  { id: 2, name: 'Samsung Galaxy S24' },
  { id: 3, name: 'Google Pixel 8' },
]

const productList = (
  <ul>
    {products.map((product) => (
      <li key={product.id}>{product.name}</li>
    ))}
  </ul>
)

Lưu ý: Việc cung cấp thuộc tính key là rất quan trọng để React xác định các phần tử trong danh sách một cách hiệu quả.

Style nội tuyến (Inline Styles)

Để thêm style trực tiếp vào một phần tử, bạn cần truyền vào một đối tượng JavaScript. Các thuộc tính CSS cũng được viết theo quy tắc camelCase.

const headerStyle = {
  color: 'white',
  backgroundColor: 'blue', // background-color trong CSS
  fontSize: '24px', // font-size trong CSS
}

const header = <h1 style={headerStyle}>Đây là tiêu đề</h1>

Comments trong JSX

Cách viết chú thích trong JSX cũng hơi khác một chút.

const element = (
  <div>
    {/* Đây là một comment trong JSX */}
    <h1>Xin chào</h1>
  </div>
)

4. JSX dưới "lớp vỏ": Quá trình biên dịch

Như đã đề cập, code JSX mà bạn viết không phải là thứ cuối cùng chạy trên trình duyệt. Công cụ - phổ biến nhất là Babel - đóng vai trò "người phiên dịch", giúp chuyển đổi cú pháp JSX của bạn thành các lệnh gọi hàm React.createElement().

// Khi bạn viết:
const element = <h1 className="title">Hello, world</h1>

// Babel sẽ biên dịch nó thành:
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello, world',
)

Hàm React.createElement() này sẽ trả về một đối tượng JavaScript (thường được gọi là "React element"), mô tả cho React biết cần phải render gì ra màn hình.

Đây là lý do tại sao bạn phải import React trong các file sử dụng JSX (ít nhất là với các phiên bản React cũ hơn 17). Mặc dù bạn không gọi trực tiếp React.createElement(), nhưng sau khi biên dịch, code của bạn sẽ sử dụng nó.

Kết luận: JSX không chỉ là cú pháp, đó là tư duy

JSX không chỉ đơn thuần là một công cụ tiện lợi. Nó đại diện cho một sự thay đổi trong tư duy về cách xây dựng giao diện người dùng. Bằng cách kết hợp logic và markup trong một đơn vị duy nhất gọi là "component", JSX thúc đẩy một kiến trúc dễ hiểu, dễ mở rộng và dễ bảo trì.

Nó là cầu nối hoàn hảo giữa sự quen thuộc của HTML và sức mạnh vô biên của JavaScript, cho phép các nhà phát triển xây dựng những trải nghiệm người dùng phức tạp và sống động một cách hiệu quả và đầy cảm hứng. Nắm vững JSX chính là bạn đã nắm được trong tay một trong những công cụ mạnh mẽ và thanh lịch nhất trong thế giới phát triển front-end hiện đại. Hãy bắt đầu viết JSX và cảm nhận sự khác biệt!