Cách dùng HTML sang JSX
- Dán mã HTML hoặc SVG của bạn.
- Xem JSX được chuyển đổi ngay lập tức. Thuộc tính, style và chú thích đã được viết lại theo chuẩn React.
- Tùy chọn: bọc JSX trong một component có tên, rồi sao chép vào dự án của bạn.
Những thay đổi khi chuyển HTML sang JSX
classthànhclassName, cònforthànhhtmlFor.- Style inline thành object:
style="font-size: 14px"→style={{ fontSize: '14px' }}. - Các thẻ không có thẻ đóng được tự đóng:
<img>→<img />,<br>→<br />. - Event handler và các thuộc tính khác dùng camelCase:
onclick→onClick,tabindex→tabIndex. - Thuộc tính SVG được viết theo camelCase:
stroke-width→strokeWidth,xlink:href→xlinkHref. - Chú thích HTML thành
{/* … */}, còn dấu ngoặc nhọn trong văn bản được escape.
Event handler
Các handler inline như onclick="doThing()" trong HTML là chuỗi, nhưng trong React phải là hàm. Vì vậy công cụ sẽ chuyển chúng thành một placeholder có chú thích để bạn thay bằng tham chiếu hàm thực tế.
Nhiều phần tử gốc
Một component chỉ được trả về một phần tử. Khi HTML có nhiều phần tử cấp cao nhất, công cụ sẽ bọc chúng trong fragment <>…</>.
Bảo mật theo thiết kế
Việc chuyển đổi chạy hoàn toàn trên trình duyệt của bạn. Mã của bạn không bao giờ được tải lên, nên an toàn cho các dự án có tính bảo mật cao.
Cũng được tìm dưới tên: chuyển html sang jsx, html sang react, chuyển đổi html sang jsx, svg sang jsx, class sang classname, html to jsx.
Các công cụ dùng kèm tốt với HTML sang JSX
- SVG sang JSX — Dán SVG từ Figma, Illustrator hoặc bộ icon và nhận ngay một React component (JSX hoặc TSX) sẵn sàng sử dụng, kèm bản xem trước icon an toàn.
- Định dạng HTML — Dán mã HTML đã nén hoặc lộn xộn và nhận lại HTML được thụt lề rõ ràng, nhất quán — bao gồm cả các khối <style> và <script> nhúng bên trong.
- Chuyển CSS sang Tailwind — Dán các quy tắc hoặc khai báo CSS và nhận ngay danh sách class Tailwind tương ứng cho từng selector, bao gồm trạng thái hover: và giá trị tùy chỉnh như p-[13px].
- HTML & CSS sang Webflow — Dán HTML và CSS, nhấn Copy to Webflow rồi dán vào Designer.
Câu hỏi thường gặp
Vì sao React cần className thay vì class?
“class” là từ khóa dành riêng trong JavaScript, mà JSX được biên dịch thành JavaScript, nên React dùng tên thuộc tính DOM là className.
Tôi có thể chuyển icon SVG thành component React không?
Có. Chỉ cần dán SVG, các thuộc tính như stroke-width và fill-rule sẽ được viết theo camelCase. Nếu bạn cần quy trình SVG chuyên biệt với props, hãy dùng SVG sang JSX.
Điều gì xảy ra với event handler onclick inline?
Chúng được chuyển thành onClick kèm một placeholder và chú thích, vì React yêu cầu một hàm chứ không phải chuỗi mã.
Tôi có thể cài HTML sang JSX như một ứng dụng web và dùng khi không có mạng không?
Có. HTML sang JSX là một ứng dụng web (PWA) có thể cài đặt — cài trực tiếp từ trình duyệt, không cần tải từ cửa hàng ứng dụng. Trên Chrome hoặc Edge (Windows, macOS, Linux, ChromeOS) hoặc Android, bấm Cài đặt ứng dụng ở đầu trang này; trên iPhone và iPad, dùng Chia sẻ → Thêm vào Màn hình chính; trên Mac, dùng File → Add to Dock trong Safari 17 trở lên. Sau đó ứng dụng mở trong cửa sổ riêng với biểu tượng riêng, và vì chạy hoàn toàn trên trình duyệt nên vẫn hoạt động khi không có mạng. Firefox trên máy tính không thể cài ứng dụng web. Cách cài đặt hoạt động thế nào.