Konverter HTML → JSX
Privasi sejak awal — berjalan sepenuhnya di peramban Anda
Tempel HTML di sebelah kiri lalu salin JSX siap-React di sebelah kanan. Konverter mengubah class menjadi className, for menjadi htmlFor, string style inline menjadi objek camelCase, dan menutup sendiri void element seperti img dan input agar JSX bisa memparsenya.
Pemetaan atribut dan event
React memakai nama properti DOM, bukan atribut HTML: tabindex menjadi tabIndex, readonly menjadi readOnly, colspan menjadi colSpan. Handler inline berpindah dari onclick ke onClick, onmouseover ke onMouseOver, dan seterusnya untuk semua handler standar. Dua penggantian khas HTML adalah class → className dan for → htmlFor karena keduanya kata cadangan JavaScript.
String style menjadi objek camelCase
JSX menuntut style inline berupa object literal dengan setiap properti CSS dalam camelCase. String seperti padding: 1rem; background-color: #fff berubah menjadi style={{ padding: '1rem', backgroundColor: '#fff' }}. Konverter menangani kebab-case ke camelCase, prefix vendor (-webkit-, -moz-, -ms-), serta properti kustom CSS (--brand-color tetap, dengan kunci string jika perlu).
Privasi dan kasus pinggir
Transformasi berjalan dalam satu fungsi JavaScript di tab ini. HTML Anda tidak meninggalkan peramban — penting saat memindahkan markup yang memuat data pelanggan. Ke-14 void element (img, input, br, hr, meta, link, area, base, col, embed, source, track, wbr, param) tampil self-closing agar JSX menerimanya. Atribut data- dan aria- dipertahankan apa adanya karena memang sudah valid di JSX.
Pertanyaan yang Sering Diajukan
- Atribut apa saja yang dinamai ulang?
- class → className, for → htmlFor, tabindex → tabIndex, readonly → readOnly, colspan → colSpan, ditambah camelCase untuk semua properti DOM standar dan handler on*.
- Bagaimana string style dikonversi?
- Dibelah berdasarkan titik koma, setiap properti CSS dijadikan camelCase, lalu dikeluarkan sebagai objek JSX dengan kurung kurawal ganda. Prefix vendor dan properti kustom dipertahankan.
- Apakah data-* dan aria-* berubah?
- Tidak. JSX menerima keduanya dalam bentuk kebab, jadi konverter tidak mengubahnya. Hanya atribut DOM standar yang diganti.
- Apakah komentar HTML ikut dikonversi?
- Ya. <!-- komentar --> berubah menjadi {/* komentar */} sehingga maksud tetap sama tanpa mematahkan parser.
- Bagaimana dengan skrip dan handler inline?
- Konverter mengubah onclick menjadi onClick dan handler lain, namun isi fungsinya tetap string. Biasanya Anda menulisnya ulang sebagai callback React sebelum rilis.
- Apakah HTML saya dikirim ke mana pun?
- Tidak. Transformasi sepenuhnya berjalan di tab peramban ini. Toova tidak melihat apa yang Anda tempel — tanpa analitik, tanpa log, tanpa apa pun.