Công Cụ Chuyển HTML sang JSX

Công cụ này là gì?

Công cụ trực tuyến miễn phí này chuyển đổi HTML tiêu chuẩn thành cú pháp JSX hợp lệ để sử dụng với React. Đây là cách nhanh nhất để tái cấu trúc mã HTML hiện có thành các thành phần sẵn sàng cho các ứng dụng front-end hiện đại.

Cách sử dụng

1. Dán hoặc nhập HTML của bạn vào trình soạn thảo.
2. Nhấp vào Chuyển đổi để tạo mã JSX.
3. Tải xuống, sao chép hoặc chia sẻ JSX đã chuyển đổi của bạn ngay lập tức.

Đăng nhập bằng Google hoặc GitHub để lưu các chuyển đổi của bạn và truy cập chúng bất cứ lúc nào.

JSX là gì?

JSX (JavaScript XML) là một phần mở rộng cú pháp cho JavaScript được sử dụng trong React để định nghĩa các thành phần giao diện người dùng một cách khai báo. JSX cho phép bạn viết các thẻ giống như HTML trực tiếp trong mã JavaScript của bạn.

Không giống như HTML truyền thống, JSX sử dụng các quy tắc đặc biệt (như className thay vì class) và hỗ trợ nhúng các biểu thức JavaScript bên trong dấu ngoặc nhọn.

Ví dụ JSX cơ bản:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
    

Tìm hiểu thêm tại tài liệu chính thức của React.

Ví dụ HTML vs JSX

HTML

<div>
  <div class="awesome" style="border: 1px solid red">
    <label for="name">Nhập tên của bạn: </label>
    <input type="text" id="name" />
  </div>
  <p>Nhập HTML của bạn vào đây</p>
</div>
    

JSX đã chuyển đổi

<div>
  <div className="awesome" style={{ border: '1px solid red' }}>
    <label htmlFor="name">Nhập tên của bạn: </label>
    <input type="text" id="name" />
  </div>
  <p>Nhập HTML của bạn vào đây</p>
</div>