İçeriğe geç
🛠️ToolsShed

HTML to JSX

HTML işaretlemesini React JSX söz dizimine dönüştürün; öznitelikleri, satır içi stilleri ve boş öğeleri otomatik olarak dönüştürün.

Uygulanan dönüşümler:

  • class → className
  • for → htmlFor
  • style="..." → style={{...}}
  • Boş öğeler (br, hr, img, input) kendi kendini kapatır
  • HTML yorumları {/* */} olarak dönüştürülür

Bu araç hakkında

HTML to JSX, standart HTML işaretlemesini React uygulamalarında kullanılmak üzere sözdizimsel olarak geçerli JSX söz dizimine dönüştüren bir dönüştürücüdür. React bileşenleri oluştururken, geliştiriciler sıklıkla HTML kod parçacıklarını JSX biçimine dönüştürmesi gerekir; bu, öznitelik adlarını (class dari className'e), satır içi stilleri farklı şekilde (dizeden nesneye) işlemeyi ve void öğelerini uyarlamayı gerektirir. Bu araç bu dönüşümleri otomatikleştirerek zaman kazandırır ve manuel dönüştürme hatalarını azaltır.

Aracı kullanmak için HTML kodunuzu giriş kutusuna yapıştırın ve "Dönüştür"'e tıklayın. Dönüştürücü anında geçerli JSX çıktısı üretir ve bunu doğrudan React bileşenlerinize kopyalayabilirsiniz. HTML olay işleyicileri (onclick'den onClick'e), boolean öznitelikler (checked, disabled), veri öznitelikleri ve CSS sınıf adları gibi yaygın dönüşümleri işler. Tipik kullanım alanları arasında mevcut HTML şablonlarını React'e taşımak, üçüncü taraf HTML kod parçacıklarını entegre etmek veya mockup'lardan hızlı bir şekilde bileşen JSX'i oluşturmak yer almaktadır.

Dönüştürücü tamamen tarayıcınızda çalışır ve sunucu yüklemesi yoktur, bu nedenle kodunuz özel kalır. Karmaşık dinamik şablonlar veya koşullu rendereleme mantığının dönüştürmeden sonra da manuel ince ayar gerektirebileceğini unutmayın. Karmaşık durum yönetimi veya özel mantığa sahip bileşenler için, oluşturulan JSX daha da iyileştirebileceğiniz sağlam bir başlangıç noktası olarak hizmet eder.

Sıkça Sorulan Sorular

Kod Uygulaması

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.