HTML'den JSX'e Dönüştürücü
Ücretsiz çevrimiçi HTML'den JSX'e dönüştürücü. HTML'i yapıştır, className, htmlFor, camelCase stiller, kendinden kapanan etiketler ve güvenli yorumlarla temiz React JSX'ini anında al. Tamamen tarayıcında çalışır.
HTML'den JSX'e dönüştürücü ne yapar?
Sıradan HTML işaretlemesini React'in render edebileceği JSX'e çevirir. HTML'i giriş alanına yapıştırın; karşılığı olan JSX çıktı panelinde görün ve kısa bir gecikmeyle yazarken canlı güncellenir.
Hangi öznitelikler yeniden adlandırılır?
class, className olur; for, htmlFor olur; tabindex, tabIndex olur. maxlength, colspan, stroke-width gibi kısa çizgili diğer öznitelikler de React'in camelCase adlarına döner. data-* ve aria-* öznitelikleri aynen kalır.
style özniteliği nasıl dönüştürülür?
style="background-color: red; font-size: 12px" gibi bir CSS dizesi JavaScript nesnesine dönüşür: style={{backgroundColor:'red', fontSize:'12px'}}. Her CSS özelliği camelCase yazılır ve değer tırnak içine alınır.
Void etiketler nasıl işlenir?
Çocuk alamayan etiketler — img, br, input, hr, meta, link ve diğerleri — kendinden kapanan sözdizimine normalleştirilir: <img> ögesi <img /> olur; JSX tam olarak bunu ister. Boş div ve span da aynı biçimde kapanır.
HTML yorumlarına ne olur?
JSX yorumlarına dönüştürülür: <!-- not --> becomes {/* not */}. Yorumu erken kapatacak diziler etkisizleştirilir; böylece üretilen kod her zaman derlenir.
Varlıklar ve özel karakterler nasıl ele alınır?
& veya © gibi varlıklar gerçek karakterlere çözülür; ardından küme ve açı parantezleri JSX için güvenli biçimde yeniden kaçışlanır. Böylece { } veya < içeren metinler bileşeni bozmadan doğru görüntülenir.
Fonksiyon bileşeni seçeneği ne işe yarar?
Dönüşen işaretlemeyi hazır bir kalıba sarar: function Component() { return ( ...JSX... ) } şeklinde; çıplak JSX yerine. Kodu doğrudan bir React dosyasına yapıştıracaksan açın.
HTML'im bir yere yükleniyor mu?
Hayır. Ayrıştırma tamamen tarayıcınızda, yerleşik DOMParser ile yapılır. Hiçbir sunucuya veri gitmez; özel işaretlemeyi güvenle dönüştürebilirsiniz ve araç çevrimdışı da çalışır.
HTML'den JSX'e Dönüştürücü Nasıl Kullanılır
Tarayıcıdan çıkmadan normal HTML'i hemen kullanılabilir React JSX'ye dönüştürün. Her şey, yerleşik DOMParser ile yerelde ayrıştırılır — işaretlemeniz asla yüklenmez.
- HTML'inizi soldaki düzenleyiciye yapıştırın; JSX sonucu sağda görünür ve yazarken yenilenir (300 ms debounce).
- "Girinti" içinde girinti genişliğini seçin — her iç içe seviye için 2 veya 4 boşluk.
- "Fonksiyon bileşeni" anahtarını açarak çıktıyı function Component() { return ( ... ) } içine sarın; React dosyasına yapıştırmaya hazır olur.
- Sonucu almak için Kopyala'yı, örnek yüklemek için Örnek'i, baştan başlamak için Temizle'yi kullanın.
class, for ve tabindex; className, htmlFor ve tabIndex olur; style dizgileri camelCase nesnelere dönüşür; img veya br gibi void öğeler kendi kendini kapatan biçimde üretilir — tam olarak JSX'in beklediği şey.
İlgili Araçlar
- HTML Güzelleştirici HTML kodunu anında biçimlendirin ve güzelleştirin. Sıkıştırılmış HTML'i temiz, okunabilir koda dönüştürün. Ücretsiz çevrimiçi araç, kayıt gerekmez.
- Kodu Görsel Yap Kod parçacıklarını sözdizimi vurgulama, özel temalar ve pencere süslemeleriyle paylaşılabilir görsellere dönüştürün. %100 gizlilik, tümü tarayıcınızda.
- Hash Doğrulayıcı MD5, SHA-1, SHA-256, SHA-512 dosya hashlerini yerel olarak hesapla ve doğrula
- Chmod Hesaplayıcı Onay kutularıyla Linux dosya izinlerini görselleştirmek ve hesaplamak için ücretsiz çevrimiçi chmod hesaplayıcı. Sayısal (755, 644) ve sembolik gösterim (rwxr-xr-x) arasında anında dönüştürün. setuid, setgid, sticky bit gibi özel izinleri destekler.
- ASCII Tablosu Ondalık, onaltılık, sekizlik, ikili kodlar, HTML varlıkları ve karakter açıklamaları ile eksiksiz ASCII karakter kodlama referansı. Anında arama ve filtreleme.
- Hex Görüntüleyici Arama, ofset gezinme ve sanal kaydırma ile dosya içeriklerini hex dump formatında görüntüleyin
- MIME Türü Sorgulama Dosya uzantısına göre MIME türlerini anında bulun veya MIME türüne göre uzantıları arayın. 1000+ girişi içeren ücretsiz çevrimiçi referans.
- Ekran Çözünürlüğü Kontrolü Ekran çözünürlüğü, viewport boyutu, DPI ve renk derinliğini gerçek zamanlı algılar.