Pengembang / React

Konverter HTML ke JSX

Konversi HTML menjadi JSX untuk React: class menjadi className, style inline menjadi object, elemen void ditutup, kurung kurawal di-escape, dan komentar dipertahankan, dengan opsi membungkusnya dalam komponen.

Konverter HTML ke JSX: HTML diurai menjadi elemen, sehingga atribut diubah namanya untuk React (class, for, tabindex, readonly, maxlength, dan lainnya), style menjadi object dengan key camelCase, serta elemen void seperti <br> dan <img> ditutup. Kurung kurawal dan tanda kurung siku dalam teks di-escape, komentar menjadi {/* */}, dan nilai formulir menjadi defaultValue serta defaultChecked agar kolom tetap dapat diedit. Output dari halaman pengujian berhasil dikompilasi sebagai TSX. Berjalan 100% lokal di browser Anda tanpa upload file ke server.

Kategori
Tools developer
Dijalankan
Di browser Anda
Biaya
Gratis · tanpa daftar
Ketersediaan
Siap digunakan
HTML ke JSXPemrosesan lokal

Berjalan sepenuhnya di browser Anda

  • onclick="send()" pada <button> dihapus: tulis sebagai fungsi, misalnya onClick={() => …}.

JSX

<div className="card" style={{ marginTop: "8px", backgroundColor: "#fff" }}>
  <label htmlFor="email">Email</label>
  <input id="email" type="email" placeholder="you@example.com" required />
  <button tabIndex="0">Send</button>
  {/* footer */}
  <p>Price: {"{"}price{"}"} &gt; 0</p>
</div>

Atribut diubah namanya untuk React (class menjadi className, for menjadi htmlFor, tabindex menjadi tabIndex), style menjadi objek, elemen kosong dan void ditutup, komentar menjadi {/* */}, dan nilai formulir menjadi defaultValue agar field tetap dapat diedit.

Setelah dikonversi

Ubah markup yang berulang menjadi component yang menerima props, ganti teks hard-coded dengan variabel dalam kurung kurawal, lalu pindahkan style inline ke class CSS atau sistem styling Anda, karena object style dibuat ulang pada setiap render.

Untuk icon SVG, SVG to JSX membuat component yang meneruskan props; untuk menghapus komentar dan whitespace tambahan terlebih dahulu, gunakan HTML minifier.

Perbedaan yang sering menjebak

JSX memerlukan satu elemen root, jadi beberapa elemen akan dibungkus dalam fragment (<>…</>). Setiap elemen harus ditutup, nama atribut menggunakan camelCase, dan teks yang berisi { atau } harus ditulis sebagai {"{"}, yang dilakukan converter untuk Anda.

Cara menggunakannya

  1. Tempelkan HTML, mulai dari satu elemen hingga seluruh bagian halaman.
  2. Bungkus hasilnya dalam komponen bernama jika diperlukan.
  3. Salin JSX, lalu tulis ulang event handler inline yang tercantum dalam peringatan.

Privasi & batasan

HTML dikonversi di browser Anda dan tidak pernah di-upload.

Alat terkait

SVG ke JSXHTML MinifierEncoder HTML

Pertanyaan umum

Mengapa atribut onclick dihapus?

Dalam HTML, atribut tersebut adalah string kode; dalam React, atribut tersebut harus berupa fungsi. Konverter mencantumkan setiap atribut agar Anda dapat menulis ulang, misalnya onclick="save()" menjadi onClick={save}.

Mengapa value menjadi defaultValue?

Atribut value dalam React membuat kolom menjadi controlled, sehingga tidak dapat diisi tanpa handler onChange; defaultValue menetapkan teks awal dan membuatnya tetap dapat diedit.

Apakah SVG didukung?

Ya: atribut SVG seperti stroke-width menjadi strokeWidth. Untuk seluruh file SVG yang diubah menjadi komponen, tool SVG ke JSX menambahkan props.

Alat gratis · berjalan di browser anda · tanpa perlu akun