Giới thiệu về JSX

GIới thiệu về JSX là bài viết đề cập đến một loại cú pháp đơn giản để viết code html hòa lẫn javascipt một cách nhẹ nhàng dễ đọc dễ hiểu. JSX giúp bạn code tạo các thành phần giao diện để hiển thị dữ liệu một cách trực quan hơn. Ví dụ về JSX:

const element = <h1>Chào mừng bạn đến với React!</h1>;

JSX có thể chứa biểu thức JavaScript

Trong JSX, có thể chèn các biểu thức JavaScript bằng cách đặt chúng trong dấu ngoặc nhọn {}.

const name = 'React';
const element = <h1>Xin chào, {name} !</h1>;

JSX với thuộc tính HTML

Trong JSX , truyền giá trị cho các thuộc tính cũng giống như HTML, các thuộc tính thường được viết theo camelCase. Thuộc tính được bao trong {} nếu là giá trị JavaScript.

const imgUrl = 'https://example.com/image.png';
const element = <img src={imgUrl} alt="Hình ảnh" />;

Một số thuộc tính HTML cần chú ý trong JSX

Trong JSX, một số thuộc tính HTML cần được viết theo cú pháp đặc biệt:

  • class trong HTML trở thành className trong JSX.
  • for trong HTML trở thành htmlFor trong JSX.
  • value của thẻ <input> phải dùng defaultValue nếu muốn đặt giá trị mặc định.
  • readonly trong HTML trở thành readOnly trong JSX.
  • maxlength trong HTML trở thành maxLength trong JSX.
  • colspan và rowspan trong HTML trở thành colSpan và rowSpan trong JSX.

Ví dụ:

<input type="text" defaultValue="Giá trị mặc định" readOnly />
<input type="checkbox" defaultChecked={true} />
<label htmlFor="inputId">Nhập tên</label>

JSX với các phần tử con

JSX có thể chứa các phần tử con như sau:

const element = (
  <div>
    <h1>Tiêu đề</h1>
    <p>Đây là đoạn văn bản.</p>
  </div>
);

Lưu ý: Các phần tử cha phải được bọc trong một thẻ đơn (ví dụ: <div> hoặc <React.Fragment>).

Điều kiện trong JSX

Bạn có thể sử dụng điều kiện trong JSX bằng cách dùng toán tử điều kiện hoặc toán tử logic &&.

const isLoggedIn = true;
const element = isLoggedIn ? <h1>Chào mừng!</h1> : <h1>Vui lòng đăng nhập!</h1>;

Dùng map() để render danh sách

JSX có thể sử dụng map() để hiển thị danh sách các phần tử.

const items = ['React', 'Vue', 'Angular'];
const listItems = items.map( (item) => <li key={item}>{item}</li>);
const element = <ul> {listItems} </ul>;

Trước khi khi sâu vào ReactJS/NextJS, bạn cần đọc qua bài giới thiệu về JSX này, nó là cú pháp mà bạn sẽ hùng nhiều trong các component. Nhờ nó mà bạn viết code hiển thị data nhanh hơn, gọn hơn,

Muốn đọc thêm thông tin, xem ở trang này nhé https://www.w3schools.com/react/react_jsx.asp

BÀI VIẾT LIÊN QUANXEM THÊM