Konverter HTML ke JSX/React Gratis

Cara kerjanya

1. Tempel HTML: masukkan cuplikan HTML standar, div, formulir, tabel, atau blok lengkap, di area input.
2. Pilih opsi: aktifkan pembungkus React Fragment dan pemformatan pretty-print sesuai kebutuhan.
3. Dapatkan JSX seketika: konverter secara otomatis mengubah class → className, for → htmlFor, string style menjadi objek style, dan menutup tag self-closing.
4. Salin ke proyek Anda: tempel keluaran JSX langsung ke komponen React Anda.

Mengapa menggunakan HTML → JSX?

Saat memigrasikan template HTML ke React, konversi manual rentan terhadap kesalahan. Lupa satu className atau membiarkan tag yang tidak ditutup akan merusak build. Konverter ini menangani semua perubahan yang diperlukan secara otomatis, termasuk mengonversi nama properti CSS seperti background-color menjadi camelCase backgroundColor dalam atribut style, mengubah string event handler menjadi referensi fungsi, dan menutup elemen void dengan benar. Ini mempercepat prototyping, migrasi kode, dan membantu developer yang tidak terbiasa dengan perbedaan sintaks JSX.

Konversi utama

• class → className, diperlukan dalam komponen React
• for → htmlFor, untuk elemen label
• string style → objek, mis.: "color:red" → {color:'red'}
• Tag self-closing, <br> → <br />
• Pembungkus Fragment, <>…</> luar opsional

Apa sebenarnya JSX itu

JSX singkatan dari «JavaScript XML». Ini adalah ekstensi sintaktis untuk JavaScript yang ditemukan oleh Jordan Walke di Facebook pada 2013 sebagai bagian dari pengumuman React pertama di JSConf US. JSX memungkinkan Anda menulis markup berbentuk XML langsung di dalam kode JavaScript, <div className="hello">World</div>: dan transpiler (saat ini hampir selalu Babel) mengompilasi ke pemanggilan fungsi biasa: React.createElement('div', {className: 'hello'}, 'World'). Browser tidak pernah melihat JSX secara langsung; yang dikirim adalah JavaScript biasa.

Motivasi awal Walke adalah bahwa bahasa template (Mustache, Handlebars, direktif lama Angular) adalah warga kelas dua dari bahasa induk, mereka tidak dapat menggunakan loop, kondisional, atau variabel JavaScript secara native, sehingga masing-masing menemukan kembali sintaksnya sendiri. JSX membalik hubungan tersebut: alih-alih template yang sesekali menggunakan JavaScript, ia memberi Anda JavaScript yang sesekali menggunakan markup. Fakta bahwa {condition && <Item />} adalah ekspresi JS biasa yang mengembalikan elemen React adalah ide utamanya.

Sejak React 17 (Oktober 2020), runtime JSX otomatis berarti Anda tidak lagi harus import React from 'react' di setiap file yang menggunakan JSX, Babel menyisipkan import runtime secara otomatis. JSX juga telah diadopsi jauh melampaui React itu sendiri: Preact, Solid, Qwik, Hono JSX, Million, Lit, dan .tsx TypeScript semuanya mengonsumsi sintaks yang sama. Spec draft JSX di facebook.github.io/jsx sengaja dibuat framework-agnostic.

Daftar lengkap perbedaan HTML→JSX

• Penggantian nama kata yang dicadangkan. class → className (karena class dicadangkan di JS). for → htmlFor (alasan yang sama, for adalah kata kunci loop). Inilah dua hal yang selalu membuat semua orang tersandung pertama kali.
• Semua atribut lainnya menggunakan camelCase. tabindex → tabIndex, readonly → readOnly, maxlength → maxLength, contenteditable → contentEditable.
• Dua pengecualian penting tetap kebab-case. Atribut aria-* (aria-label, aria-hidden) dan atribut data-* (data-testid) tetap dalam bentuk HTML-nya. Begitu pula xmlns.
• Tag self-closing wajib untuk elemen void: <br> menjadi <br />, <img> menjadi <img />, <input> menjadi <input />. JSX ketat seperti XML di mana HTML lebih permisif.
• Inline style menggunakan objek, bukan string. style="color: red; background-color: blue" menjadi style={{ color: 'red', backgroundColor: 'blue' }}. Perhatikan tiga hal: kurung kurawal ganda (satu untuk ekspresi JSX, satu untuk object literal), nama properti camelCase, nilai string dikutip. Nilai piksel numerik menghilangkan unit: marginTop: 16, bukan '16px'.
• Event handler menggunakan camelCase dan menerima referensi fungsi. onclick="handleClick()" menjadi onClick={handleClick}: perhatikan tanda kurung yang hilang. onClick={handleClick()} akan memanggil handleClick pada saat render dan menetapkan nilai kembaliannya sebagai handler, yang hampir selalu merupakan bug.
• Komentar menggunakan {/* … */} di dalam JSX, bukan <!-- … -->. Sintaks komentar HTML tidak memiliki makna di dalam JSX.
• Fragment membungkus beberapa sibling. Sebuah komponen harus mengembalikan satu root, sehingga beberapa elemen tingkat atas membutuhkan <>…</> (atau <React.Fragment>…</React.Fragment> yang lebih panjang) yang membungkus mereka.
• Rendering kondisional menggunakan ekspresi JS. {isVisible && <Item />} merender item hanya jika kondisinya truthy; {condition ? <A /> : <B />} memilih salah satu dari dua.
• Kurung kurawal dalam teks perlu di-escape. Literal { di dalam konten teks JSX diinterpretasikan sebagai awal ekspresi. Gunakan {'{'} atau padanan entitas HTML.

SVG, aksesibilitas, dan lainnya

SVG berfungsi di dalam JSX dengan aturan camelCase yang sama untuk sebagian besar atribut, viewBox, strokeWidth, fillOpacity. Pengecualian yang perlu diperhatikan: xlink:href menggunakan ejaan khusus xlinkHref (sekarang sudah deprecated demi href biasa), dan xmlns tetap apa adanya. Atribut aksesibilitas mengikuti konvensi kebab-case ARIA sendiri sebagai pengecualian: aria-label, aria-describedby, role semuanya tetap seperti tertulis.

Untuk CSS, objek style inline JSX adalah satu pilihan. Sebagian besar codebase produksi menggunakan salah satu dari tiga alternatif yang lebih kaya: CSS Modules (nama kelas yang di-scope per file yang dikompilasi oleh bundler), Tailwind CSS (kelas utility yang melewati dengan bersih melalui className), atau library CSS-in-JS seperti styled-components, Emotion, atau Vanilla Extract. Tailwind telah menjadi pilihan paling umum dalam proyek baru sejak 2022; kelas Tailwind tidak perlu konversi sama sekali saat memindahkan HTML ke JSX, mereka melewati sebagai string className biasa.

Gotcha umum saat konversi

• Event handler inline yang memanggil fungsi. onclick="alert(1)" dalam HTML biasanya menjadi onClick={() => alert(1)} dalam JSX, dibungkus dalam arrow function sehingga alert dijalankan saat klik, bukan saat render. Konverter naif yang menghasilkan onClick={alert(1)} akan memunculkan alert pada saat render bukan saat pengguna klik. Konverter ini menangani kasus umum tetapi ada baiknya memeriksa keluarannya.
• Komentar HTML akan dihapus. Sebagian besar konverter JSX menghapus komentar HTML alih-alih menerjemahkannya ke bentuk {/* */}, karena yang terakhir hanya berfungsi di posisi tertentu di dalam JSX. Tambahkan komentar kembali secara manual di tempat yang Anda inginkan.
• Penggantian nama atribut SVG tidak selalu ditangani oleh konverter otomatis. stroke-width, fill-rule, clip-path, text-anchor semuanya membutuhkan bentuk camelCase, periksa keluaran dengan teliti jika Anda menempelkan SVG dari set ikon seperti Heroicons atau Lucide.
• Atribut boolean. <input disabled> dalam HTML menjadi <input disabled /> dalam JSX. <input disabled="false"> dalam HTML sebenarnya disabled (nilai apa pun mengaktifkannya), tetapi dalam JSX disabled={false} secara benar dinonaktifkan, semantik JSX lebih masuk akal daripada semantik HTML.
• Entitas HTML. © berfungsi dalam konten teks JSX tetapi menggunakan karakter Unicode literal (©) lebih disukai.   berfungsi sama.
• Kasus tabindex. Harusnya tabIndex. Mudah terlupa karena nilainya sering 0 atau -1 dan terlihat numerik, tetapi nama atributnya tetap membutuhkan camelCase.

Kapan Anda akan menggunakan ini

• Migrasi template yang dirender server ke React. Menempelkan potongan HTML dari situs yang ada dan mendapatkan JSX adalah kasus penggunaan kanonik.
• Mengimpor ikon, badge, atau ekspor alat desain. Heroicons, Lucide, fitur «Copy as SVG» Figma semuanya memberi Anda HTML/SVG mentah yang membutuhkan penggantian nama.
• Mengonversi snippet Tailwind UI / Flowbite / DaisyUI dari contoh HTML mereka ke JSX untuk proyek React. Kelas Tailwind melewati tidak berubah; hanya atribut struktural yang perlu dikonversi.
• Orientasi developer yang mengenal HTML tetapi bukan JSX: melihat aturan mekanis yang diterapkan secara otomatis lebih cepat daripada membaca daftar perbedaan.
• Prototyping cepat ketika Anda telah membuat markup dalam HTML biasa untuk tujuan sketsa dan ingin memasukannya ke dalam komponen React.

Keluaran berfungsi untuk konsumen JSX apa pun, React, Preact, Solid, Qwik, Hono JSX, Million, template literal html Lit (dengan penyesuaian kecil). Ini tidak berfungsi untuk React Native, yang menggunakan komponen primitif native seperti <View> dan <Text> daripada elemen HTML.

Pertanyaan lainnya

Apa perbedaan antara JSX dan HTML?

HTML adalah bahasa markup yang langsung di-parse oleh browser. JSX adalah sintaks ekspresi JavaScript yang dikompilasi ke pemanggilan React.createElement, ia tidak pernah sampai ke browser sebagai JSX. JSX terlihat ketat seperti XML (setiap tag harus ditutup, atribut menggunakan camelCase) karena di-parse sebagai ekspresi JavaScript, bukan sebagai HTML yang permisif. Kesamaan visual itu disengaja tetapi semantik yang mendasarinya cukup berbeda.

Apakah saya masih perlu import React di setiap file JSX?

Tidak sejak React 17 (Oktober 2020), yang memperkenalkan runtime JSX otomatis. Dengan itu, Babel menyisipkan import runtime yang diperlukan untuk Anda, sehingga file yang hanya menggunakan JSX tidak memerlukan import React from 'react' di bagian atas file. Runtime klasik masih tersedia untuk toolchain yang lebih lama. Sebagian besar proyek baru menggunakan runtime otomatis.

Bisakah saya menggunakan JSX tanpa React?

Ya. JSX adalah sintaks generik dengan spec draft di facebook.github.io/jsx, dan banyak framework menggunakannya: Preact, Solid, Qwik, Hono JSX, Million, Lit, dan varian template bertag htm. Framework-framework tersebut berbeda dalam apa yang dikompilasi JSX (Preact menggunakan h(…), Solid dikompilasi ke primitif reaktif bergranulasi halus, dll.) tetapi sintaksnya sama.

Mengapa style menggunakan objek alih-alih string?

Karena sintaks ekspresi JSX sudah menyediakan kurung kurawal untuk menyematkan nilai JavaScript, dan object literal adalah representasi JS yang paling alami dari property bag. Objek style juga memungkinkan angka (sebagian besar secara otomatis mendapat px) dan ekspresi JS, yang tidak bisa dilakukan string. Trade-off-nya adalah sintaks kurung kurawal ganda yang sedikit tidak nyaman style={{ … }}, kurung kurawal luar untuk «ini adalah ekspresi JSX», kurung kurawal dalam untuk object literal.

Apakah ada yang dikirim ke server?

Tidak. Logika konversi adalah JavaScript murni yang menelusuri string HTML Anda dan menulis ulang atribut, semuanya di browser Anda. HTML yang Anda tempel tidak pernah meninggalkan halaman, berguna saat migrasi template internal berhak milik atau markup komponen dengan endpoint API yang tertanam di dalamnya.