Softonic

Konverter HTML ke JSX

Langkah 1 / 2

Mengonversi: class menjadi className, for menjadi htmlFor, style inline menjadi objek JSX, menutup sendiri tag void, menghapus komentar HTML.

Konversi ke JSX

JSX terlihat seperti HTML sampai sebenarnya tidak: class adalah className, for adalah htmlFor, style adalah objek bukan string, dan setiap tag kosong harus menutup sendiri. Tempel HTML dan konverter ini menghasilkan JSX yang langsung terkompilasi di percobaan pertama, sehingga Anda dapat memindahkan halaman pemasaran ke komponen React tanpa menghabiskan sepuluh menit berikutnya mengejar error kompiler.

Cara mengubah HTML menjadi JSX

  1. 1

    Tempel HTML

    Markup seukuran satu komponen, atau satu fragmen halaman utuh.

  2. 2

    Ubah

    Alat ini mengganti nama atribut seperti `class`, `for`, dan `readonly` menjadi penulisan JSX serta mengubah gaya inline menjadi objek.

  3. 3

    Periksa JSX

    Hasilnya siap ditempel ke file `.jsx` atau `.tsx`.

  4. 4

    Salin dan tempelkan

    Kode menggunakan ekspresi satu baris sehingga cocok dimasukkan ke komponen yang sudah ada.

Setiap perbedaan HTML ke JSX yang penting

JSX bukanlah HTML. Ini adalah ekspresi JavaScript yang dikompilasi menjadi panggilan React.createElement(), jadi nama atribut mengikuti konvensi JavaScript.

Konverter otomatis menangani penggantian nama yang paling umum. Daftar lengkap di bawah ini adalah referensi yang Anda perlukan saat menulis JSX secara manual.

Penggantian nama atribut

HTML JSX Catatan
class className class dipesan di JS
for htmlFor for dipesan
tabindex tabIndex camelCase
readonly readOnly camelCase
contenteditable contentEditable camelCase
stroke-width (SVG) strokeWidth camelCase
xlink:href xlinkHref Namespace bertitik dua diratakan
aria-label aria-label ARIA mempertahankan tanda hubung
data-* data-* Atribut data mempertahankan tanda hubung

Atribut style

HTML: style="color: red; padding: 10px"

JSX: style={{ color: 'red', padding: 10 }}

Nilai angka tanpa satuan menjadi piksel; pertahankan string untuk persentase dan nilai tanpa satuan seperti flex.

Elemen kosong yang menutup sendiri

HTML mengizinkan <br> dan <input> tanpa tag penutup. JSX mengharuskan <br /> dan <input />, setiap elemen harus ditutup secara eksplisit.

Komentar

Komentar HTML (<!-- -->) tidak valid di dalam badan JSX. Konverter ini menghapusnya; jika ingin menyimpan catatan, tulis sendiri dalam bentuk {/* Komentar blok JavaScript */}.

Atribut boolean

HTML: <input checked> (atau <input checked="checked">)

JSX: <input checked={true} /> atau cukup <input checked />. Jangan pernah mengirim string “true”.

Jalan keluar

  • Potongan HTML yang tidak tepercaya dapat dirender dengan dangerouslySetInnerHTML={{ __html: ... }}, sengaja dibuat jelek agar tidak digunakan.
  • Atribut data-* kustom tetap apa adanya; atribut non-standar tetap diteruskan tetapi dapat memicu peringatan React dalam mode pengembangan.

Pertanyaan yang Sering Diajukan

Atribut SVG seperti stroke-width harus ditulis dengan camelCase (strokeWidth) di JSX, dan setiap tag harus menutup sendiri. Konverter menutup sendiri tag void di dalam SVG dan mengubah nama properti dalam string gaya menjadi camelCase, tetapi tidak mengganti nama atribut SVG; ubah stroke-width menjadi strokeWidth secara manual. Untuk ikon sekali pakai, pendekatan paling bersih adalah menyimpan ikon sebagai file SVG lalu mengimpornya sebagai komponen melalui svgr.

Ya, baik JSX maupun TSX menggunakan className. Satu-satunya pengecualian adalah di dalam dangerouslySetInnerHTML, tempat string HTML mentah mempertahankan class karena disisipkan apa adanya ke DOM.

Tidak. Keluarannya hanya fragmen JSX, tanpa pembungkus export default function dan tanpa anotasi tipe. Tempel ke file .jsx atau .tsx Anda lalu tambahkan props, tipe, dan pembungkusnya sendiri. class tetap diubah menjadi className, persis seperti yang diharapkan TSX.

Mereka diteruskan apa adanya. Konverter tidak mengganti nama penangan peristiwa, jadi ubah onclick menjadi onClick dan ganti nilai string dengan fungsi sungguhan, misalnya onClick={() => doThing()}. Anda tetap perlu mendefinisikan fungsi doThing dalam lingkup komponen.

Alat Terkait

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Referensi pintasan papan ketik

Cari pintasan bawaan terdokumentasi untuk VS Code, Chrome, dan Bash dengan GNU Readline di macOS, Windows, dan Linux.

Pemformat HTML

Format HTML secara lokal di browser dengan inden dua atau empat spasi. HTML tidak diunggah atau divalidasi.

Generator EditorConfig

Buat file .editorconfig dengan gaya dan ukuran indentasi, akhir baris, charset, dan aturan spasi Anda untuk format yang konsisten di berbagai IDE dan editor.

Validator Email

Validasi alamat email: pemeriksaan sintaks RFC 5322, pengecekan live record MX, serta detail bagian lokal, domain, dan panjang. Tidak ada email yang dikirim.

Alat ini tersedia dalam bahasa lain