7. Giới thiệu React JSX

React JSX (JavaScript XML) là một phần quan trọng và độc đáo trong React. JSX cho phép bạn viết mã giao diện bằng cú pháp tương tự HTML trong mã JavaScript. Nó giúp mã nguồn trở nên dễ đọc và dễ hiểu hơn bằng cách kết hợp mã JavaScript và mã HTML lại với nhau.

Dưới đây là một số đặc điểm quan trọng của JSX:

1. Kết hợp mã JavaScript và HTML: JSX cho phép bạn viết mã JavaScript bên trong mã HTML và ngược lại. Điều này giúp bạn tạo ra các thành phần giao diện phong phú và tương tác một cách dễ dàng.
2. Sử dụng cú pháp tương tự HTML: JSX sử dụng cú pháp giống HTML, ví dụ như sử dụng thẻ và thuộc tính HTML để định nghĩa các thành phần.
3. Có thể sử dụng biểu thức JavaScript: Bạn có thể sử dụng biểu thức JavaScript bên trong cặp dấu ngoặc nhọn {} để tính toán giá trị và sử dụng chúng trong JSX.
4. Phải có một phần tử gốc: Mỗi lần bạn viết JSX, bạn cần có một phần tử gốc bao bọc tất cả các phần tử con. Điều này giúp React biết được điểm bắt đầu của cây giao diện.

Dưới đây là một ví dụ về cách sử dụng JSX trong React:

jsx

import React from 'react';

const user = {
  firstName: 'John',
  lastName: 'Doe',
};

const element = (
  <div>
    <h1>Hello, {user.firstName}!</h1>
    <p>Welcome to React JSX.</p>
  </div>
);

export default element;

Trong ví dụ này:

• Chúng ta sử dụng thẻ <div> để làm phần tử gốc và bao bọc các phần tử con bên trong.
• Sử dụng biểu thức {user.firstName} để thể hiện giá trị của thuộc tính firstName từ đối tượng user.
• Mã JSX này tạo ra một đoạn mã HTML tương ứng, làm cho việc hiển thị dễ dàng và trực quan hơn.

Như vậy, JSX là một phần quan trọng trong React, giúp bạn tạo ra giao diện người dùng phức tạp một cách dễ đọc và hiểu hơn.