Tìm hiểu JSX

1. JSX là gì?

JSX (JavaScript XML) là một cú pháp mở rộng của JavaScript, được sử dụng trong React để mô tả giao diện người dùng. JSX cho phép bạn viết mã HTML trực tiếp bên trong JavaScript, giúp mã nguồn dễ đọc và dễ hiểu hơn.

Ví dụ về JSX:

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

Dòng mã trên sẽ được biên dịch thành JavaScript thuần:

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

2. Tại sao nên sử dụng JSX?

Dễ đọc và dễ viết: JSX giúp mã nguồn dễ đọc hơn nhờ cấu trúc tương tự như HTML. Tính năng mạnh mẽ: Cho phép nhúng biểu thức JavaScript vào trong JSX. Bảo mật: JSX ngăn chặn các cuộc tấn công XSS (Cross-Site Scripting) bằng cách tự động escape dữ liệu. Tối ưu hóa hiệu suất: JSX được biên dịch thành JavaScript tối ưu trước khi được thực thi.

3. Biểu thức trong JSX

Bạn có thể nhúng các biểu thức JavaScript vào JSX bằng cặp ngoặc nhọn {}.

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

Trong ví dụ trên, {name} sẽ được thay thế bằng giá trị của biến name.

4. Các thuộc tính (Props) trong JSX

JSX cho phép bạn truyền thuộc tính (props) vào các thẻ giống như HTML.

const element = <img src="image.jpg" alt="Description" />;

Các thuộc tính trong JSX tuân theo quy tắc camelCase. Ví dụ: class trong HTML trở thành className trong JSX.

5. JSX và điều kiện

Bạn có thể sử dụng các điều kiện để hiển thị hoặc ẩn nội dung trong JSX.

Sử dụng toán tử điều kiện (ternary operator):

const isLoggedIn = true;
const element = isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;

Sử dụng if-else bên ngoài JSX:

let element;
if (isLoggedIn) {
	  element = <h1>Welcome back!</h1>;
} else {
	  element = <h1>Please sign in.</h1>;
}

6. JSX Fragment

JSX yêu cầu mỗi phần tử phải được bao bọc trong một phần tử cha. Để tránh thêm các thẻ không cần thiết vào DOM, bạn có thể sử dụng Fragment.

<>
	  <h1>Hello</h1>
	  <p>This is a paragraph.</p>
</>

7. JSX và hàm map()

JSX kết hợp rất tốt với các phương thức JavaScript như map() để lặp qua mảng và hiển thị danh sách.

const numbers = [1, 2, 3, 4];
const listItems = numbers.map((number) =>
	  <li key={number}>{number}</li>
);

8. Kết luận

JSX là một phần quan trọng trong React, giúp tăng hiệu suất phát triển và làm cho mã nguồn dễ bảo trì. Việc thành thạo JSX sẽ giúp bạn xây dựng các giao diện React một cách linh hoạt và hiệu quả.