Input
Menyiapkan ruang kerja Anda…
Cara menggunakan
- Tempel fragmen HTML, buka file UTF-8 atau muat Contoh.
- Pilih indentasi lalu Konversikan ke JSX.
- Periksa markup, lalu salin atau unduh.
Memindahkan markup HTML ke React
HTML dari template biasanya perlu disesuaikan untuk JSX, misalnya className, htmlFor, elemen self-closing dan bentuk inline style.
Konverter menangani struktur markup. State komponen, callback peristiwa dan logika aplikasi tetap perlu ditulis di tempat JSX digunakan.
Konversi atribut dan style
Atribut HTML dipetakan ke bentuk React, termasuk className dan htmlFor. Atribut SVG umum memakai kapitalisasi React.
CSS inline menjadi objek style, lalu hasil diformat sebagai JSX. Teks literal di-escape sesuai kebutuhan, bukan dianggap ekspresi JavaScript.
<label class="field" for="email">Email<input id="email"></label><label className="field" htmlFor="email">Email<input id="email" /></label>Contoh konversi atribut yang disingkat. Hasil lengkap diformat dan memiliki pembungkus fragment.
Struktur dan perilaku
Fragmen HTML di-parsing sebelum dikonversi. Hasil memakai pembungkus fragment dan sintaks self-closing bila sesuai.
Elemen script dan atribut peristiwa inline dihapus. Perilakunya tidak dikonversikan menjadi callback React; URL dan style yang tersisa tetap perlu ditinjau untuk aplikasi Anda.
Mengintegrasikan hasil
Tempel JSX pada render atau ekspresi return komponen. Hubungkan kembali perilakunya secara manual. Tinjau inline style, terutama deklarasi fallback berulang dan !important yang tidak dapat diwakili sepenuhnya oleh objek style.
Input teks hingga 1 MiB. Transformasi CSS dan HTML berjalan dalam worker dengan batas 30 detik. Alat warna menggunakan sRGB; gaya yang dihasilkan merupakan pratinjau dan perlu diuji dalam tata letak Anda sendiri.
Pertanyaan umum
Apakah hasil berupa komponen React lengkap?
Tidak. Hasilnya adalah markup JSX. Tambahkan komponen, import, data dan perilakunya dalam proyek.
Bagaimana dengan script dan atribut onclick?
Elemen script dan atribut peristiwa inline dihapus. Kodenya tidak dijalankan atau diterjemahkan menjadi handler React.
Mengapa kurung kurawal pada teks tetap berupa teks?
Input di-parsing sebagai HTML. Kurung kurawal literal di-escape untuk JSX, bukan dievaluasi sebagai ekspresi.
Apakah inline style dikonversikan persis?
Deklarasi umum menjadi properti style React. Deklarasi fallback berulang dan !important tidak selalu dapat diwakili setara oleh objek JavaScript.
Dapatkah markup SVG dikonversikan?
Atribut SVG umum dipetakan ke nama React. Uji hasil pada komponen, termasuk ID, referensi dan atribut khusus aplikasi.