HTML'den JSX'e (React)

Nasıl çalışır?

Hazır bir HTML parçasını React projesine taşırken her class'ı className'e, her for'u htmlFor'a çevirmek ve style dizelerini nesneye dönüştürmek zaman alır; bir tanesini unutmak da konsolda uyarıya yol açar. HTML'i sol panele yapıştırın, JSX sağ panelde oluşur. Örneğin <p style="color: #7a3; font-size: 14px"> satırı <p style={{ color: '#7a3', fontSize: '14px' }}> olur, <br> ise <br /> olarak kendini kapatır. SVG'deki stroke-width gibi tireli adlar strokeWidth olur; data- ve aria- ile başlayanlar React onları tireli beklediği için olduğu gibi kalır. onclick gibi olay öznitelikleri onClick olur ve içindeki kod bir fonksiyonun içine alınır. Sonuç satırı kaç etiketin işlendiğini ve kaç öznitelik adının değiştiğini söyler.

Bu araç html to jsx, html to jsx converter, html to react aramalarıyla da biliniyor.

JSX nedir?

JSX, React bileşenlerinde arayüzü HTML'e benzeyen bir yazımla anlatmaya yarayan JavaScript ekidir. Tarayıcı JSX'i doğrudan okumaz; Babel ya da TypeScript derleyicisi onu React.createElement çağrılarına çevirir. Görünüşü HTML'e benzese de kuralları JavaScript'tendir: öznitelik adları DOM özelliklerinin adını taşır, her etiket kapanmak zorundadır, süslü parantez ifade başlatır.

className ve htmlFor nedir?

class ve for, JavaScript'te ayrılmış kelimelerdir; biri sınıf tanımlar, öbürü döngü başlatır. JSX de JavaScript olduğu için React bu iki özniteliği DOM'daki karşılıklarının adıyla ister: className ve htmlFor. HTML'den kopyalanan kodda class yazılı kalırsa React 17'den beri uyarı verip yine de çalışır; ama eski sürümlerde ve bazı araçlarda sınıf sessizce kaybolur.

HTML ile JSX arasındaki fark nedir?

HTML bir işaretleme dilidir; tarayıcı onu hoşgörüyle okur, kapanmamış etiketi tamamlar, öznitelik adında büyük küçük harf ayırmaz. JSX ise JavaScript'in içinde yazılan bir sözdizimidir ve bir derleyiciden geçer: her etiket kapanır, öznitelik adları camelCase yazılır, style bir dize değil nesnedir, süslü parantezin içinde JavaScript çalışır. Görünüş benzer, ama kurallar JavaScript'in kurallarıdır.

Hangi dönüşümler yapılıyor?

Aşağıdaki liste aracın uyguladığı kuralları toplar. Hepsi React'in DOM öznitelik adlarına dayanır; listede olmayan bir öznitelik olduğu gibi aktarılır.

• class → className, for → htmlFor
• tabindex, readonly, maxlength, colspan gibi adlar camelCase: tabIndex, readOnly
• style="a-b: c" → style={{ aB: 'c' }}; -webkit- önekli özellik WebkitX olur
• br, img, input, hr gibi boş etiketler ve içeriği olmayan öğeler kendini kapatır
• Yorumlar {/* … */} biçimine girer; doctype atılır
• Metindeki { } ve > işaretleri JSX'te hata verdiği için kaçırılır
• pre içindeki boşluk ve satır sonları dize olarak korunur

Form alanları ve olaylar

React'te bir input'a value yazarsanız alan salt okunur olur; kullanıcı yazamaz, konsola da uyarı düşer. Bu yüzden araç input ve select'teki value'yu defaultValue'ya, checked'ı defaultChecked'a çevirir. textarea'nın içindeki metin de defaultValue olur. Alanı durumla (state) yöneteceksiniz, bunları sonradan value ve onChange ile değiştirin.

HTML'de onclick="gonder()" bir dizedir; React'te ise olay bir fonksiyon ister. Araç kodu onClick={(event) => { gonder(); }} biçiminde bir ok fonksiyonuna sarar. Kodun içindeki this artık öğeyi göstermez; this kullanıyorsanız onu event.currentTarget ile değiştirin.

Sık sorulanlar

Çıktı neden bazen <> ile başlıyor?

Bir React bileşeni tek bir kök öğe döndürmek zorundadır. Bileşen biçimini seçtiğinizde HTML'inizde birden fazla üst düzey öğe varsa araç onları <> … </> ile, yani React Fragment ile sarar. Fragment sayfaya ek bir etiket eklemez.

Metnimdeki { } işaretleri neden {'{'} oldu?

JSX'te süslü parantez JavaScript ifadesi başlatır. Metinde düz süslü parantez kalsaydı derleyici hata verirdi. Araç onları dize olarak yazar; sayfada yine { ve } görünür. Aynı sebeple > işareti &gt; olur.

TypeScript (TSX) dosyasında da kullanabilir miyim?

Evet. Üretilen JSX, TSX dosyasında da geçerlidir. Yalnızca olay fonksiyonlarındaki event parametresine tür vermeniz gerekebilir; bu, projenizin tsconfig ayarına bağlıdır.

Kodum bir sunucuya gönderiliyor mu?

Hayır. HTML ayrıştırıcısı ve JSX yazıcısı tarayıcınızda çalışır; yapıştırdığınız kod bu sayfadan çıkmaz.