Những thuộc tính nào được đổi tên?

class → className, for → htmlFor, tabindex → tabIndex, readonly → readOnly, colspan → colSpan, cùng camelCase cho mọi DOM property tiêu chuẩn và handler on*.

Chuỗi style được chuyển đổi thế nào?

Chuỗi được tách theo dấu chấm phẩy, mỗi thuộc tính CSS chuyển sang camelCase và kết quả xuất ra dưới dạng object JSX hai cặp ngoặc nhọn. Vendor prefix và custom property được giữ nguyên.

data-* và aria-* có thay đổi không?

Không. JSX nhận chúng ở dạng kebab nên bộ chuyển đổi không động đến. Chỉ những thuộc tính DOM chuẩn mới được đổi sang camelCase.

Bình luận HTML có được chuyển không?

Có. trở thành {/* bình luận */} để giữ nguyên ý nghĩa mà không phá parser JSX.

Còn script và handler inline thì sao?

Bộ chuyển đổi đổi onclick thành onClick và các handler khác, nhưng phần thân hàm vẫn là chuỗi. Bạn thường viết lại thành callback React thật trước khi phát hành.

HTML của tôi có được gửi đi đâu không?

Không. Việc chuyển đổi hoàn toàn ở tab trình duyệt này. Toova không nhìn thấy nội dung dán — không analytics, không log, không gì cả.

HTML sang JSX — class, for, style, handler

Trình chuyển đổi HTML → JSX

Riêng tư theo thiết kế — chạy hoàn toàn trong trình duyệt của bạn

Dán HTML bên trái và sao chép JSX sẵn sàng cho React bên phải. Bộ chuyển đổi đổi class thành className, for thành htmlFor, các chuỗi style inline thành object camelCase và tự đóng các void element như img, input để JSX có thể phân tích.

Đổi tên thuộc tính và event

React dùng tên thuộc tính DOM thay vì thuộc tính HTML: tabindex thành tabIndex, readonly thành readOnly, colspan thành colSpan. Các handler inline chuyển từ onclick sang onClick, onmouseover sang onMouseOver, và tương tự với mọi handler tiêu chuẩn. Hai trường hợp đổi tên đặc thù HTML là class → className và for → htmlFor vì cả hai đều là từ khóa JavaScript.

Chuyển chuỗi style thành object camelCase

JSX yêu cầu inline style là object literal và từng thuộc tính CSS phải ở dạng camelCase. Chuỗi padding: 1rem; background-color: #fff trở thành style={{ padding: '1rem', backgroundColor: '#fff' }}. Bộ chuyển đổi xử lý kebab-case sang camelCase, vendor prefix (-webkit-, -moz-, -ms-) cũng như CSS custom property (--brand-color giữ nguyên, dùng key dạng chuỗi nếu cần).

Quyền riêng tư và các trường hợp đặc biệt

Quá trình chuyển đổi chạy trong một hàm JavaScript duy nhất ngay trên tab này. HTML của bạn không rời khỏi trình duyệt — quan trọng khi bạn chuyển đổi markup chứa dữ liệu khách hàng. 14 void element (img, input, br, hr, meta, link, area, base, col, embed, source, track, wbr, param) được tự đóng để JSX chấp nhận. Thuộc tính data- và aria- giữ nguyên vì vốn đã hợp lệ trong JSX.

Câu hỏi thường gặp

Những thuộc tính nào được đổi tên?: class → className, for → htmlFor, tabindex → tabIndex, readonly → readOnly, colspan → colSpan, cùng camelCase cho mọi DOM property tiêu chuẩn và handler on*.
Chuỗi style được chuyển đổi thế nào?: Chuỗi được tách theo dấu chấm phẩy, mỗi thuộc tính CSS chuyển sang camelCase và kết quả xuất ra dưới dạng object JSX hai cặp ngoặc nhọn. Vendor prefix và custom property được giữ nguyên.
data-* và aria-* có thay đổi không?: Không. JSX nhận chúng ở dạng kebab nên bộ chuyển đổi không động đến. Chỉ những thuộc tính DOM chuẩn mới được đổi sang camelCase.
Bình luận HTML có được chuyển không?: Có.  trở thành {/* bình luận */} để giữ nguyên ý nghĩa mà không phá parser JSX.
Còn script và handler inline thì sao?: Bộ chuyển đổi đổi onclick thành onClick và các handler khác, nhưng phần thân hàm vẫn là chuỗi. Bạn thường viết lại thành callback React thật trước khi phát hành.
HTML của tôi có được gửi đi đâu không?: Không. Việc chuyển đổi hoàn toàn ở tab trình duyệt này. Toova không nhìn thấy nội dung dán — không analytics, không log, không gì cả.