Bu araç ne işe yarar?
HTML to JSX, yapıştırdığınız ham HTML kodunu React bileşenlerinde doğrudan kullanılabilen geçerli JSX'e çevirir. Eski şablonları, e-posta parçacıklarını veya tasarımcıdan gelen HTML'i React projesine taşıyan geliştiriciler için zaman kazandırır.
Nasıl kullanılır?
- Verinizi sol alana yapıştırın veya yazın.
- Sonuç anında sağ tarafta oluşturulur.
- Kopyala düğmesiyle çıktıyı alıp istediğiniz yerde kullanın.
Tam olarak neyi dönüştürür?
Araç en yaygın JSX uyumsuzluklarını tek seferde giderir: class özelliğini className'e, for'u htmlFor'a, tabindex'i tabIndex'e çevirir; maxlength, colspan, cellpadding, crossorigin gibi öznitelikleri camelCase haline getirir. Satır içi style="margin: 0 auto" metinlerini style={{ margin: "0 auto" }} nesnelerine dönüştürür, img, input, br gibi etiketleri kendiliğinden kapanır hale getirir ve HTML yorumlarını ({/* ... */}) JSX yorumuna çevirir.
Tipik kullanım örnekleri
Bootstrap veya Tailwind ile hazırlanmış statik bir landing page'i React'e taşırken, tasarımcının verdiği HTML kartını bileşene dönüştürürken ya da Stack Overflow'dan kopyalanan bir parçacığı JSX'e uyarlarken işe yarar. Çıktıyı doğrudan kopyalayıp bir .jsx veya .tsx dosyasına yapıştırabilirsiniz. Yazdıkça anlık çevrildiği için büyük blokları parça parça yapıştırarak sonucu hemen görebilirsiniz.
Sıkça sorulan sorular
Satır içi style nasıl çevriliyor?
style="margin: 0 auto; padding: 20px;" gibi metinler ayrıştırılır; her özellik camelCase yapılır ve px, % ya da sayısal olmayan değerler tırnak içine alınarak style={{ margin: "0 auto", padding: "20px" }} nesnesi üretilir.
Tüm HTML öznitelikleri otomatik dönüşür mü?
En sık karşılaşılan öznitelikler (class, for, tabindex, readonly, autofocus, maxlength, colspan, rowspan, cellpadding, crossorigin, hreflang vb.) çevrilir. Çok nadir veya özel data-* öznitelikleri zaten JSX'te geçerlidir ve olduğu gibi korunur.
Çıktıyı doğrudan React'te kullanabilir miyim?
Evet, ancak çıktının bir bileşenin return içinde tek bir kök öğe ya da Fragment ile sarmalanması gerekir. Araç öznitelik ve etiket sözdizimini düzeltir; kök sarmalamayı projenize göre siz eklersiniz.
HTML → JSX ücretsiz mi?
Evet. HTML → JSX ve MagmaNex'teki 300'den fazla aracın tamamı tamamen ücretsizdir, kayıt veya üyelik gerektirmez.
Verilerim güvende mi?
Evet. Tüm işlemler tarayıcınızda yerel olarak çalışır. Girdiğiniz veriler sunucuya gönderilmez, kaydedilmez veya paylaşılmaz.
Mobil cihazda çalışır mı?
Evet. HTML → JSX telefon, tablet ve bilgisayarda sorunsuz çalışır; ayrı bir uygulama indirmenize gerek yoktur.
🔒 Gizlilik: Tüm işlemler tarayıcınızda yapılır, verileriniz sunucuya gönderilmez.