HTML'den JSX'e Dönüştürücü
HTML → JSX// JSX output appears here
HTML Neden JSX'e Dönüştürülür?
Mevcut HTML şablonlarını React'a taşırken class'ı className'e, for'u htmlFor'a ve satır içi stilleri dizelerden JavaScript nesnelerine elle dönüştürmek gerekir. Aracımız bu dönüşümleri anında otomatikleştirerek bileşen mantığına odaklanmanızı sağlar.
Özellik Dönüştürme
class→className, for→htmlFor, tabindex→tabIndex, maxlength→maxLength ve daha fazlası
Satır İçi Stil Nesnesi
style="color:red;"'i style={{color:'red'}}'a dönüştürür — React'ın JS nesnesi gösterimi
Self-Closing Etiketler
Boş öğelere kapanış eğik çizgisi ekler: <br> → <br />, <input> → <input />
3 Adımda HTML'yi JSX'e Dönüştürme
HTML'yi Yapıştırın
HTML şablonunu, Figma dışa aktarımını veya HTML kod parçacığını sol panele yapıştırın
Otomatik Dönüştürme
Dönüştürücü tüm özellikler, stiller ve boş öğeleri anında JSX sözdizimine dönüştürür
JSX'i Kopyalayın
Dönüştürülmüş JSX'i kopyalayıp React bileşeninizin render/return bloğuna yapıştırın
HTML'den JSX'e Dönüştürücü Kullanım Alanları
React'a Geçiş
Özellik manuel dönüşümü olmadan mevcut HTML sayfalarını veya şablonları React bileşenlerine taşıyın
React'ta Bootstrap
Bootstrap HTML bileşenlerini JSX'e dönüştürerek react-bootstrap veya styled-components ile kullanın
E-posta Şablonları
React Email gibi kütüphanelerle işlemek üzere HTML e-posta şablonlarını JSX'e dönüştürün
CMS'den React'a
WordPress veya geleneksel CMS HTML şablonlarını React bileşen yapısına dönüştürün
HTML'den JSX'e Dönüşüm İpuçları
✓ class → className Önemli
class, JavaScript'in ayrılmış anahtar sözcüğüdür. React'ta CSS sınıfları için className kullanılmalıdır. Unutursanız React uyarıları ve beklenmedik davranış oluşur.
✓ label'ın for'u → htmlFor
<label>'ın for özelliği JSX'te htmlFor olur. Unutulursa erişilebilirlik bozulur — ekran okuyucular etiket-alan ilişkilendirmesine dayanır.
✓ Dönüşüm Sonrası Olay İşleyicilerini Güncelleyin
HTML özellik onclick='...' JSX'te otomatik dönüştürülmez. Dönüşüm sonras satır içi olay işleyicilerini React'ın onClick={handler} kalıbıyla elle değiştirin.
✓ HTML Yorumları JSX Yorumuna Dönüşür
<!-- yorum --> JSX'te {/* yorum */}'a dönüştürülür. JSX, JSX etiketleri içinde HTML yorum sözdizimini desteklemez.
❓ Sık Sorulan Sorular
React neden class yerine className kullanıyor?
class, bir JavaScript ayrılmış anahtar sözcüğüdür (ES6 sınıflarında kullanılır). JSX, JavaScript olduğundan class kullanmak sözdizimi çakışmasına yol açar. React, JavaScript'in class ayrılmış sözcüğüyle belirsizliği önlemek için className'i seçti.
Bu araç React olay işleyicilerini işliyor mu?
Hayır — onclick, onsubmit gibi HTML olay işleyicileri React'ın onClick, onSubmit'ine otomatik dönüştürülmez. Bu değerlerin (HTML'deki JavaScript dizeleri) React bileşeninin işlev/durumuna başvurması gerekir. Manuel güncelleme gerekir.
HTML ve JSX arasındaki fark nedir?
JSX, React.createElement() çağrılarına derlenen HTML'ye benzer bir JavaScript sözdizimi uzantısıdır. Temel farklar: tüm özellikler camelCase, class yerine className, for yerine htmlFor, boş öğeler self-closing gerektirir, ifadeler dize değil {} kullanır.
JSX'te boş öğeler neden self-closing gerektiriyor?
JSX, Babel tarafından XML benzeri sözdizimi olarak ayrıştırılır ve tüm öğelerin düzgün kapatılmasını gerektirir. <br>, <img>, <input> gibi boş öğelerin çocukları yoktur; bu nedenle kapatılmamış etiket yerine /> self-closing gerekir.