Konverter HTML ke JSX
Konverter HTML ke JSX gratis online. Tempel HTML dan dapatkan JSX React yang bersih dengan className, htmlFor, objek style camelCase, tag penutup mandiri, dan komentar yang aman, semuanya di browser.
Apa yang dilakukan konverter HTML ke JSX?
Ia mengubah markup HTML biasa menjadi JSX yang bisa dirender React. Tempel HTML Anda di area input, dan JSX yang setara muncul di panel output, diperbarui saat Anda mengetik dengan debounce singkat.
Atribut apa saja yang diganti nama?
class menjadi className, for menjadi htmlFor, tabindex menjadi tabIndex, dan atribut berhubung lain seperti maxlength, colspan, atau stroke-width dikonversi ke nama camelCase milik React. Atribut data-* dan aria-* tetap apa adanya.
Bagaimana atribut style dikonversi?
String CSS seperti style="background-color: red; font-size: 12px" menjadi objek JavaScript: style={{backgroundColor:'red', fontSize:'12px'}}. Semua properti CSS ditulis camelCase dan nilainya dibungkus tanda kutip.
Bagaimana elemen void ditangani?
Elemen yang tidak bisa punya anak — img, br, input, hr, meta, link, dan lainnya — dinormalkan ke sintaks penutup mandiri: <img> menjadi <img />, sesuai aturan JSX. Div dan span kosong juga ditutup dengan cara yang sama.
Apa yang terjadi pada komentar HTML?
Komentar diubah menjadi komentar JSX: <!-- note --> menjadi {/* note */}. Urutan karakter yang bisa mengakhiri komentar lebih awal dinetralkan agar kode hasil selalu bisa dikompilasi.
Bagaimana entitas dan karakter khusus diperlakukan?
Entitas seperti & atau © didekode menjadi karakter asli, lalu kurung kurawal dan kurung sudut di-escape ulang dengan cara yang aman untuk JSX, sehingga teks berisi { } atau < tampil benar tanpa merusak komponen.
Apa fungsi opsi komponen fungsi?
Ia membungkus markup hasil konversi dengan templat siap pakai: function Component() { return ( ...JSX Anda... ) } alih-alih JSX mentah. Aktifkan saat ingin menempel potongan langsung ke file React.
Apakah HTML saya diunggah ke mana pun?
Tidak. Pemrosesan sepenuhnya di browser Anda memakai DOMParser bawaan. Tidak ada yang dikirim ke server, jadi markup privat aman dikonversi, dan alat ini juga bisa dipakai offline.
Cara Menggunakan Konverter HTML ke JSX
Konversi HTML biasa menjadi JSX React siap pakai tanpa keluar dari peramban. Semuanya diurai secara lokal dengan DOMParser bawaan — markaoh Anda tidak pernah diunggah.
- Tempel HTML Anda ke editor kiri; hasil JSX muncul di kanan dan menyegarkan saat Anda mengetik (debounce 300 ms).
- Pilih lebar indentasi di "Indentasi" — 2 atau 4 spasi per tingkat sarang.
- Aktifkan "Komponen fungsi" untuk membungkus keluaran dalam function Component() { return ( ... ) }, siap ditempel ke berkas React.
- Gunakan Salin untuk mengambil hasil, Contoh untuk memuat sampel, atau Bersihkan untuk memulai ulang.
class, for, dan tabindex menjadi className, htmlFor, dan tabIndex, untaian style menjadi objek camelCase, dan elemen kosong seperti img atau br dikeluarkan sebagai penutup mandiri — persis seperti yang diharapkan JSX.
Alat Terkait
- Pemformat HTML Format dan percantik kode HTML secara instan. Konversi HTML minifikasi menjadi kode bersih dan mudah dibaca. Alat online gratis, tanpa daftar.
- Kode ke Gambar Ubah cuplikan kode menjadi gambar yang dapat dibagikan dengan sorotan sintaks, tema kustom, dan dekorasi jendela. 100% privasi, semuanya di browser Anda.
- Pemeriksa Hash Hitung dan verifikasi hash MD5, SHA-1, SHA-256, SHA-512 secara lokal
- Kalkulator Chmod Kalkulator chmod online gratis untuk memvisualisasikan dan menghitung izin file Linux dengan kotak centang. Konversi instan antara notasi numerik (755, 644) dan simbolik (rwxr-xr-x). Mendukung izin khusus seperti setuid, setgid, sticky bit.
- Tabel ASCII Referensi pengkodean karakter ASCII lengkap dengan kode desimal, heksadesimal, oktal, biner, entitas HTML, dan deskripsi karakter. Cari dan filter secara instan.
- Penampil Hex Lihat konten file dalam format hex dump dengan pencarian, navigasi offset, dan pengguliran virtual
- Cari Tipe MIME Temukan tipe MIME berdasarkan ekstensi file atau cari ekstensi berdasarkan tipe MIME secara instan. Referensi online gratis dengan 1000+ entri.
- Pemeriksa Resolusi Layar Deteksi resolusi layar, ukuran viewport, DPI, dan kedalaman warna secara real-time.