Hangi nitelikler yeniden adlandırılır?

class → className, for → htmlFor, tabindex → tabIndex, readonly → readOnly, colspan → colSpan ve tüm standart DOM property ile on* handler’ı için camelCase.

style dizesi nasıl dönüştürülür?

Noktalı virgüllerden parçalanır, her CSS özelliği camelCase yapılır ve sonuç çift süslü ayraçlı JSX nesnesi olarak yazılır. Vendor prefix ve özel özellikler korunur.

data-* ve aria-* değişir mi?

Hayır. JSX ikisini de kebab biçiminde kabul ettiği için dönüştürücü dokunmaz. Yalnızca standart DOM nitelikleri yeniden adlandırılır.

HTML yorumları dönüştürülür mü?

Evet. ifadesi {/* yorum */} olur; böylece niyet korunur ve JSX parser bozulmaz.

Peki script ve inline handler’lar?

Dönüştürücü onclick’i onClick olarak yeniden adlandırır, ancak fonksiyon gövdesi dize olarak kalır. Genelde yayından önce gerçek bir React callback’ine yazılır.

HTML’im bir yere yükleniyor mu?

Hayır. Dönüşüm tamamen bu tarayıcı sekmesinde olur. Toova yapıştırdığınızı görmez — analitik yok, log yok, hiçbir şey yok.

HTML’den JSX’e — class, for, style, handler

HTML → JSX Dönüştürücü

Tasarımdan gizli — tamamen tarayıcınızda çalışır

Sol tarafa HTML yapıştırın, sağ tarafta React’a hazır JSX kopyalayın. Dönüştürücü class’ı className’e, for’u htmlFor’a çevirir; inline style dizelerini camelCase nesneye dönüştürür ve img, input gibi void element’leri kendiliğinden kapatır.

Nitelik ve olay yeniden adlandırması

React, HTML niteliği yerine DOM property adını kullanır: tabindex tabIndex’e, readonly readOnly’ye, colspan colSpan’a dönüşür. Inline handler’lar onclick’ten onClick’e, onmouseover’dan onMouseOver’a ve tüm standart handler’larda aynı şekilde camelCase olur. HTML’e özgü iki yeniden adlandırma class → className ve for → htmlFor’dur çünkü ikisi de JavaScript anahtar kelimesidir.

style dizelerini camelCase nesneye

JSX, inline style’ı obje literal olarak ister ve her CSS özelliği camelCase olmalıdır. padding: 1rem; background-color: #fff dizesi style={{ padding: '1rem', backgroundColor: '#fff' }} olur. Dönüştürücü kebab-case → camelCase, vendor prefix (-webkit-, -moz-, -ms-) ve CSS özel özelliklerini (--brand-color, gerektiğinde dize anahtarıyla) işler.

Gizlilik ve uç durumlar

Dönüşüm bu sekmedeki tek bir JavaScript fonksiyonunda çalışır. HTML’iniz tarayıcıyı terk etmez — müşteri verisi içeren markup’ı taşıdığınızda önemlidir. 14 void element (img, input, br, hr, meta, link, area, base, col, embed, source, track, wbr, param) çıktıda kendiliğinden kapanır. data- ve aria- nitelikleri JSX’te zaten geçerli olduğu için olduğu gibi kalır.

Sıkça Sorulan Sorular

Hangi nitelikler yeniden adlandırılır?: class → className, for → htmlFor, tabindex → tabIndex, readonly → readOnly, colspan → colSpan ve tüm standart DOM property ile on* handler’ı için camelCase.
style dizesi nasıl dönüştürülür?: Noktalı virgüllerden parçalanır, her CSS özelliği camelCase yapılır ve sonuç çift süslü ayraçlı JSX nesnesi olarak yazılır. Vendor prefix ve özel özellikler korunur.
data-* ve aria-* değişir mi?: Hayır. JSX ikisini de kebab biçiminde kabul ettiği için dönüştürücü dokunmaz. Yalnızca standart DOM nitelikleri yeniden adlandırılır.
HTML yorumları dönüştürülür mü?: Evet.  ifadesi {/* yorum */} olur; böylece niyet korunur ve JSX parser bozulmaz.
Peki script ve inline handler’lar?: Dönüştürücü onclick’i onClick olarak yeniden adlandırır, ancak fonksiyon gövdesi dize olarak kalır. Genelde yayından önce gerçek bir React callback’ine yazılır.
HTML’im bir yere yükleniyor mu?: Hayır. Dönüşüm tamamen bu tarayıcı sekmesinde olur. Toova yapıştırdığınızı görmez — analitik yok, log yok, hiçbir şey yok.