UTILS.
100% di peramban

HTML ke JSX / React

Konversi cuplikan HTML menjadi JSX valid untuk React — mengganti nama atribut, menutup sendiri tag void, dan mengubah gaya inline menjadi objek style.

— keluaran muncul di sini —

Tentang alat ini

Konverter HTML ke JSX / React mem-parsing cuplikan HTML dengan DOMParser native browser dan menserialisasikannya kembali sebagai JSX valid, memperbaiki semua yang dibutuhkan React. Ia berjalan sepenuhnya di sisi klien, sehingga markup yang Anda tempel tetap di mesin Anda. Tempel HTML apa pun — ekspor desain, template email, sketsa komponen — dan dapatkan JSX yang bisa langsung Anda masukkan ke berkas React.

Penulisan ulang mengganti nama atribut cadangan (class menjadi className, for menjadi htmlFor), menerapkan camelCase pada sisanya — tabindex ke tabIndex, maxlength ke maxLength, stroke-width ke strokeWidth — sambil membiarkan atribut data-* dan aria-* tidak tersentuh. Elemen void seperti img, br, input, dan hr dibuat menutup sendiri (<img />), komentar HTML menjadi {/* ... */}, kurung kurawal literal dalam teks di-escape sebagai {'{'}, dan string inline style="a:b;c:d" dikonversi menjadi objek style={{ a: 'b', c: 'd' }} dengan kunci CSS ber-camelCase. Atribut boolean seperti disabled dapat dihasilkan telanjang atau sebagai ={true} dengan sakelar.

Pilih output fragment — beberapa node root secara otomatis dibungkus dalam fragment <>...</> — atau output komponen penuh, yang membungkus JSX dalam export default function dengan nama dan indentasi pilihan Anda (2 spasi, 4 spasi, atau tab). Hasilnya siap ditempel; karena parsing menggunakan DOM sungguhan, penyusunan yang salah dinormalisasi sama seperti yang dilakukan browser.

Pertanyaan yang sering diajukan

Atribut mana yang diganti namanya?
class menjadi className dan for menjadi htmlFor; atribut bertanda hubung atau cadangan lainnya di-camelCase (tabindex ke tabIndex, maxlength ke maxLength, stroke-width ke strokeWidth). Atribut data-* dan aria-* dipertahankan persis seperti ditulis.
Bagaimana gaya inline ditangani?
String style="color:red;font-size:14px" menjadi style={{ color: 'red', fontSize: '14px' }} — setiap properti CSS di-camelCase dan setiap nilai dihasilkan sebagai string, yang selalu valid untuk gaya inline React.
Apa yang terjadi dengan beberapa elemen root?
JSX membutuhkan satu root, jadi ketika cuplikan Anda memiliki beberapa node tingkat atas, mereka dibungkus dalam Fragment (<>...</>). Mode komponen penuh justru membungkusnya di dalam ekspresi berkurung yang dikembalikan.
Apakah mengonversi komentar dan tag void?
Ya. Komentar HTML menjadi komentar JSX {/* ... */}, dan elemen void (img, br, input, hr, meta, link, dan lainnya) dirender menutup sendiri sebagai <img />, yang dibutuhkan JSX.

Alat lainnya