Lewati ke konten
πŸ› οΈToolsShed

HTML to JSX

Konversi markup HTML ke syntax JSX untuk React. Mengubah atribut, gaya inline, dan elemen void secara otomatis.

Konversi diterapkan:

  • class β†’ className
  • for β†’ htmlFor
  • style="..." β†’ style={{...}}
  • Elemen void (br, hr, img, input) ditutup sendiri
  • Komentar HTML dikonversi ke {/* */}

Tentang alat ini

HTML to JSX adalah penyampai yang mengubah markup HTML standar menjadi sintaksis JSX yang valid secara sintaksis untuk digunakan dalam aplikasi React. Saat membangun komponen React, pengembang sering kali perlu mengonversi cuplikan HTML ke format JSX, yang memerlukan pengubahan nama atribut (class menjadi className), menangani gaya inline secara berbeda (string menjadi objek), dan menyesuaikan elemen void. Alat ini mengotomatisasi transformasi tersebut, menghemat waktu, dan mengurangi kesalahan konversi manual.

Untuk menggunakan alat ini, tempel kode HTML Anda ke dalam kotak input dan klik "Konversi". Penyampai secara instan menghasilkan keluaran JSX yang valid yang dapat Anda salin langsung ke komponen React Anda. Ia menangani konversi umum seperti penanganan peristiwa HTML (onclick menjadi onClick), atribut boolean (checked, disabled), atribut data, dan nama kelas CSS. Kasus penggunaan khas mencakup migrasi template HTML yang ada ke React, mengintegrasikan cuplikan HTML pihak ketiga, atau membuat JSX komponen dengan cepat dari mockup.

Penyampai beroperasi sepenuhnya di browser Anda tanpa unggahan server, sehingga kode Anda tetap pribadi. Perlu diingat bahwa template dinamis kompleks atau logika rendering bersyarat mungkin masih memerlukan penyesuaian manual setelah konversi. Untuk komponen dengan manajemen status rumit atau logika khusus, JSX yang dihasilkan berfungsi sebagai titik awal yang solid yang dapat Anda perbaiki lebih lanjut.

Pertanyaan yang Sering Diajukan

Implementasi Kode

import re

def html_to_jsx(html: str) -> str:
    jsx = html
    # class -> className
    jsx = re.sub(r'\bclass=', 'className=', jsx)
    # for -> htmlFor
    jsx = re.sub(r'\bfor=', 'htmlFor=', jsx)
    # HTML comments to JSX
    jsx = re.sub(r'<!--(.*?)-->', r'{/*\1*/}', jsx, flags=re.DOTALL)
    # Self-close void elements
    void_elements = ['area','base','br','col','embed','hr','img','input',
                     'link','meta','param','source','track','wbr']
    for tag in void_elements:
        jsx = re.sub(
            rf'<{tag}(\s[^>]*)?>',
            lambda m: m.group(0)[:-1] + ' />' if not m.group(0).endswith('/>') else m.group(0),
            jsx, flags=re.IGNORECASE
        )
    return jsx

html = '<div class="container"><br><img src="x.png" alt=""></div>'
print(html_to_jsx(html))
# <div className="container"><br /><img src="x.png" alt="" /></div>

Comments & Feedback

Comments are powered by Giscus. Sign in with GitHub to leave a comment.