JSX ile İşaretleme (Markup) Yazma

JSX, bir JavaScript dosyası içinde HTML benzeri biçimlendirme (markup) yazmanıza olanak tanıyan bir JavaScript söz dizimi uzantısıdır. Bileşen yazmanın başka yolları olsa da çoğu React geliştiricisi, JSX’in sağladığı kolaylığı tercih eder ve çoğu kod tabanı (codebase) bunu kullanır.

Bunları öğreneceksiniz

React neden biçimlendirmeyi, render ile birleştirir?
JSX’in HTML’den farkı nedir?
JSX ile veri nasıl gösterilir?

JSX: Biçimlendirmeyi JavaScript’e dönüştürme

Web; HTML, CSS ve JavaScript üzerine inşa edilmiştir. Uzun yıllar boyunca web geliştiricileri, içeriği HTML’de, tasarımı CSS’te ve mantığı JavaScript’te -genellikle ayrı dosyalarda- tuttular! İçerik, HTML içinde tanımlanırken sayfanın mantığı, JavaScript’te ayrı olarak saklanıyordu:

HTML markup with purple background and a div with two child tags: p and form. — HTML

Three JavaScript handlers with yellow background: onSubmit, onLogin, and onClick. — JavaScript

Ancak Web daha etkileşimli hale geldikçe mantık, içeriğin önüne geçti. HTML’den JavaScript sorumluydu! İşte bu nedenle React’te render mantığı ve biçimlendirme aynı yerde (bileşenlerde) birlikte bulunur.

Önceki HTML ve JavaScript örneklerinin birlikte kullanıldığı React bileşeni. isLoggedIn fonksiyonunu çağıran sarı ile vurgulanan bölüm Sidebar fonksiyonudur. Mor renkle vurgulanan işlevin içinde, daha önceki p etiketi ve bir sonraki şemada gösterilen bileşene referans veren bir Form etiketi bulunur. — `Sidebar.js` React bileşeni

Önceki HTML ve JavaScript örneklerinin birlikte kullanıldığı React bileşeni. Sarı renkle vurgulanmış onClick ve onSubmit yöneticilerini içeren bölüm, Form fonksiyonudur. Bu fonksiyondan sonra, mor renkle vurgulanmış HTML gelir. HTML, her biri onClick prop'una sahip girdilerden oluşan bir form öğesini içerir. — `Form.js` React bileşeni

Bir butonun render mantığını ve biçimlendirmesini bir arada tutmak, her değişiklikte birbirleriyle senkronize kalmalarını sağlar. Aksine, butonun biçimlendirmesi ve kenar çubuğunun biçimlendirmesi gibi birbiriyle ilgisi olmayan ayrıntılar, birbirinden izole edilir. Böylece herhangi birinin tek başına değiştirilmesi daha güvenli hale gelir.

Her React bileşeni; React’ın, tarayıcıda render ettiği bazı işaretlemeler içerebilen bir JavaScript fonksiyonudur. React bileşenleri, bu işaretlemeyi temsil etmek için JSX adı verilen bir söz dizimi uzantısı kullanır. JSX, HTML’e çok benzer ancak biraz daha katı kurallara sahiptir ve dinamik verileri gösterebilir. Bu konuyu anlamanın en etkili yolu, birkaç HTML’i JSX’e dönüştürerek uygulamalı olarak pratik yapmaktır.

Not

JSX ve React, iki ayrı kavramdır. Bunlar çoğunlukla birlikte kullanılır. Ancak, bunları bağımsız olarak da kullanabilirsiniz. JSX bir söz dizimi uzantısıdır, React ise bir JavaScript kütüphanesidir.

HTML’i JSX’e Dönüştürme

Elinizde (tamamen geçerli) bir HTML olduğunu varsayalım:

<h1>Hedy Lamarr's Todos</h1>
<img
  src="https://i.imgur.com/yXOvdOSs.jpg"
  alt="Hedy Lamarr"
  class="photo"
>
<ul>
    <li>Invent new traffic lights
    <li>Rehearse a movie scene
    <li>Improve the spectrum technology
</ul>

Ve bunu bileşeninize koymak istiyorsunuz:

export default function TodoList() {
  return (
    // ???
  )
}

Olduğu gibi kopyalayıp yapıştırırsanız çalışmayacaktır:

Fork

export default function TodoList() {
  return (
    // This doesn't quite work!
    <h1>Hedy Lamarr's Todos</h1>
    <img
      src="https://i.imgur.com/yXOvdOSs.jpg"
      alt="Hedy Lamarr"
      class="photo"
    >
    <ul>
      <li>Invent new traffic lights
      <li>Rehearse a movie scene
      <li>Improve the spectrum technology
    </ul>

Bunun nedeni JSX’in HTML’den daha katı ve fazla kurala sahip olmasıdır! Yukarıdaki hata mesajları, biçimlendirmeyi düzeltmeniz için size yol gösterecektir. Hatayı çözmek için aşağıdaki kılavuzu da takip edebilirsiniz.

Not

Çoğu zaman, React’ın ekrandaki hata mesajları, sorunun nerede olduğunu bulmanıza yardımcı olacaktır. Takıldığınız yerde onları okuyun!

JSX Kuralları

1. Tek bir kök eleman döndürür

Bileşenden birden fazla öğe döndürmek için bunları, tek bir ana etiketle sarın

Örneğin, <div> kullanabilirsiniz:

<div>
  <h1>Hedy Lamarr's Todos</h1>
  <img
    src="https://i.imgur.com/yXOvdOSs.jpg"
    alt="Hedy Lamarr"
    class="photo"
  >
  <ul>
    ...
  </ul>
</div>

Eğer fazladan bir <div> eklemek istemezseniz <> and </> kullanabilirsiniz:

<>
  <h1>Hedy Lamarr's Todos</h1>
  <img
    src="https://i.imgur.com/yXOvdOSs.jpg"
    alt="Hedy Lamarr"
    class="photo"
  >
  <ul>
    ...
  </ul>
</>

Bu boş etiket, Fragment olarak adlandırılır. Fragment’lar, tarayıcı HTML ağacında, herhangi bir iz bırakmadan, öğeleri gruplandırmanıza olanak tanır.

Derinlemesine İnceleme

Neden birden fazla JSX etiketinin sarılması gerekiyor?

JSX, HTML gibi görünür ancak arka planda JavaScript nesnelerine dönüştürülür. Bir fonksiyondan iki nesneyi, bir diziye sarmadan döndüremezsiniz. Bu, iki JSX etiketini başka bir etikete veya bir Fragment’e sarmadan neden döndüremediğinizi de açıklar.

2. Tüm etiketleri kapatın

JSX, etiketlerin bariz bir şekilde kapatılmasını gerektirir: <img> gibi kendiliğinden kapanan etiketler, <img /> bu şekilde kapatılmalıdır.<li>oranges gibi etiketler<li>oranges</li> şeklinde sarmalanmalıdır.

Hedy Lamarr’ın fotoğraf ve liste öğeleri bu şekilde kapatılmıştır:

<>
  <img
    src="https://i.imgur.com/yXOvdOSs.jpg"
    alt="Hedy Lamarr"
    class="photo"
   />
  <ul>
    <li>Invent new traffic lights</li>
    <li>Rehearse a movie scene</li>
    <li>Improve the spectrum technology</li>
  </ul>
</>

3. camelCase her şey çoğu şey!

JSX, JavaScript’e dönüşür ve JSX’te yazılan özellikler JavaScript nesnelerinin anahtarları haline gelir. Kendi bileşenlerinizde, genellikle bu özellikleri, değişken olarak okumak isteyeceksiniz. Ancak JavaScript’in değişken adları konusunda sınırlamaları vardır. Örneğin, adları tire içeremez veya class gibi rezerve edilmiş sözcükler olamaz.

Bu nedenle, React’te, birçok HTML ve SVG özellikleri camelCase ile yazılır. Örneğin, stroke-width yerine strokeWidth. class rezerve edilmiş sözcük olduğu için React’te, bunun yerine ilgili DOM özelliğinden sonra className yazarsınız:

<img
  src="https://i.imgur.com/yXOvdOSs.jpg"
  alt="Hedy Lamarr"
  className="photo"
/>

Tüm bu nitelikleri DOM bileşeni prop’ları listesinde bulabilirsiniz. Eğer yanlış yaparsanız endişelenmeyin-React tarayıcı konsoluna, yanlışınızı düzeltmeniz için bir mesaj yazdıracaktır.

Tuzak

Tarihi nedenlerden dolayı, aria-* ve data-* özellikleri HTML’de olduğu gibi tire ile yazılır.

Uzman Tavsiyesi: JSX Dönüştürücü Kullanın

Mevcut biçimlendirmede, tüm bu özellikleri dönüştürmek can sıkıcı olabilir! Mevcut HTML ve SVG’nizi JSX’e çevirmek için bir dönüştürücü kullanmanızı öneririz. Dönüştürücüler pratikte çok kullanışlıdır. Yine de kendi başınıza rahatça JSX yazabilmeniz için neler olup bittiğini anlamakta fayda vardır.

İşte final sonucunuz:

Fork

export default function TodoList() {
  return (
    <>
      <h1>Hedy Lamarr's Todos</h1>
      <img
        src="https://i.imgur.com/yXOvdOSs.jpg"
        alt="Hedy Lamarr"
        className="photo"
      />
      <ul>
        <li>Invent new traffic lights</li>
        <li>Rehearse a movie scene</li>
        <li>Improve the spectrum technology</li>
      </ul>
    </>
  );
}

Özet

Artık JSX’in neden var olduğunu ve bileşenlerde nasıl kullanılacağını biliyorsunuz:

React bileşenleri, birbirleriyle ilişkili oldukları için render mantığını biçimlendirme ile birlikte gruplandırır.
JSX, birkaç farkla HTML’e benzer. Eğer ihtiyacınız olursa dönüştürücü kullanabilirsiniz.
Hata mesajları, genellikle biçimlendirmenizi düzeltmeniz için size doğru yolu gösterecektir.

Bazı problemleri deneyin

Problem 1 / 1:
Aşağıdaki HTML’i JSX’e dönüştürün

Bu HTML bir bileşene eklenmiş ancak geçerli bir JSX değildir. Bunu düzeltiniz:

Fork

export default function Bio() {
  return (
    <div class="intro">
      <h1>Welcome to my website!</h1>
    </div>
    <p class="summary">
      You can find my thoughts here.
      <br><br>
      <b>And <i>pictures</b></i> of scientists!
    </p>
  );
}

Elle mi yoksa dönüştürücü kullanarak mı yapacağınız size kalmış!

PreviousBileşenleri İçe ve Dışa Aktarma

NextJSX içinde Süslü Parantezlerle JavaScript

JSX ile İşaretleme (Markup) Yazma

Bunları öğreneceksiniz

JSX: Biçimlendirmeyi JavaScript’e dönüştürme

Not

HTML’i JSX’e Dönüştürme

Not

JSX Kuralları

1. Tek bir kök eleman döndürür

Derinlemesine İnceleme

Neden birden fazla JSX etiketinin sarılması gerekiyor?

2. Tüm etiketleri kapatın

3. camelCase her şey çoğu şey!

Tuzak

Uzman Tavsiyesi: JSX Dönüştürücü Kullanın

Özet

Bazı problemleri deneyin

Problem 1 / 1: Aşağıdaki HTML’i JSX’e dönüştürün

Problem 1 / 1:
Aşağıdaki HTML’i JSX’e dönüştürün