Component ve JSX

Arayüzü Kutulara Bölün

React'te arayüz, birbirinin içine yerleşen component'lerden oluşur. React dokümanının "Thinking in React" sayfası her işe aynı adımla başlar: tasarımdaki her parçanın etrafına bir kutu çizin ve her kutuya bir isim verin. Bir kutu birden fazla iş yapıyorsa onu daha küçük kutulara bölün.¹

ProductPage
├── SearchBar
└── ProductList
    ├── ProductCard
    └── ProductCard

Bir component, büyük harfle başlayan ve JSX döndüren bir JavaScript fonksiyonudur:²

export function ProductCard() {
  return (
    <article className="product-card">
      <img src="/headphones.jpg" alt="Kablosuz kulaklık" />
      <h2>Kablosuz kulaklık</h2>
    </article>
  );
}

İsim küçük harfle başlarsa React onu <productCard> diye bir HTML etiketi sanar. Ne kadar bölüneceği bir tasarım kararıdır; ölçütler Component ve Kod Organizasyonu rehberinde.

JSX Kuralları

JSX, JavaScript içinde HTML'e benzeyen bir sözdizimidir; build sırasında fonksiyon çağrılarına çevrilir. HTML'den üç farkı vardır:³

Süslü parantez {} içine her JavaScript ifadesi yazılabilir: değişken, fonksiyon çağrısı, ternary. if ya da for gibi deyimler yazılamaz.³

const product = { name: "Kulaklık", price: 1499, inStock: true };

<p className={product.inStock ? "price" : "price muted"}>
  {product.name}: {product.price.toLocaleString("tr-TR")} TL
</p>;

Koşullu Render

Üç yol vardır: if ile erken return, ternary ? : ve &&.⁴

{cartCount > 0 && <Badge count={cartCount} />}
{product.inStock ? <AddToCartButton /> : <p>Stokta yok</p>}

Bir component yükleniyor, boş, hata ve dolu gibi farklı durumlar gösteriyorsa JSX içine koşul yığmayın. TkDodo (Dominik Dorfmeister) her durumu ayrı bir erken return ile yazmayı öneriyor: her if kullanıcının gördüğü bir ekranı temsil eder, yeni durum eklemek diğerlerini bozmaz.⁶

function ProductListView({ status, products }: ProductListViewProps) {
  if (status === "pending") return <ProductListSkeleton />;
  if (status === "error") return <ErrorMessage />;
  if (products.length === 0) return <EmptyState />;

  return <ProductList products={products} />;
}

Liste ve key

Diziyi map ile JSX'e çevirirsiniz. Her elemana bir key verilir:⁷

<ul>
  {products.map((product) => (
    <li key={product.id}>{product.name}</li>
  ))}
</ul>

key, React'in bir sonraki render'da hangi elemanın hangisi olduğunu anlamasını sağlar. Kurallar:⁷

• Veriden gelsin. Veritabanı id'si ya da benzersiz bir slug en iyisidir.

• Kardeşler arasında benzersiz olsun. Başka bir listede aynı key sorun değildir.

• Değişmesin. key={Math.random()} her render'da elemanı sıfırdan oluşturur, state'i kaybeder.

key yalnızca listeler için değildir. Bir component'e farklı bir key verdiğinizde React onu baştan oluşturur; bu, state'i sıfırlamanın en temiz yoludur. State dersinde tekrar göreceksiniz.

Component'ler Saf Olmalı

React'in en önemli kuralı: bir component, aynı props, state ve context ile her seferinde aynı JSX'i döndürmelidir. Render sırasında dışarıdaki bir şeyi değiştirmemelidir.⁸⁹

let renderCount = 0;

function ProductCard({ product }: ProductCardProps) {
  renderCount++; // ❌ dışarıdaki değişkeni değiştiriyor
  product.viewed = true; // ❌ prop'u değiştiriyor
  return <h2>{product.name}</h2>;
}

Neden önemli? React bir component'i ne zaman ve kaç kez render edeceğine kendisi karar verir. Render'ı yarıda kesebilir, tekrar başlatabilir, ekranda görünmeyen bir ağacı önceden hazırlayabilir. Saf olmayan bir component bu durumlarda tutarsız sonuç verir.⁸ Strict Mode'un component'leri iki kez render etmesinin sebebi budur.

Yan etkiler (istek atmak, document.title'ı değiştirmek, analytics) render'da değil, event handler'larda yapılır. Hiçbir event'e bağlanamıyorsa son çare Effect'tir.⁸

Aynı sebepten bir component'i başka bir component'in içinde tanımlamayın. Her render'da yeni bir component tipi oluşur, React alt ağacı sıfırdan kurar ve state kaybolur. eslint-plugin-react-hooks'un static-components kuralı bunu yakalar.¹⁰

Kendin Dene

• Bir ürün sayfası tasarımı açın (herhangi bir e-ticaret sitesi), kutuları çizin ve component ağacını yazın.

• products dizisini boş verin ve {products.length && <ProductList />} ifadesinin ekrana ne bastığını görün; sonra düzeltin.

• Ürün listesine her satırda bir <input> ekleyin, key'i index yapın ve listeyi ters çevirin. Input'taki metin nereye gitti?

• Bir component'te Math.random() ile fiyat üretin. Strict Mode açıkken konsolda iki farklı sonuç görün.

Detaylı Öğrenmek İçin

• Resmi doküman: "Thinking in React"; bir arama tablosunu adım adım component'lere bölüp state'i yerleştirir.¹

• Yazı: Josh W. Comeau'nun yeni başlayanların React'te en sık yaptığı dokuz hata; 0 render'ı, key ve state mutasyonu dahil.⁵

• Yazı: TkDodo'nun composition ve erken return yazısı.⁶

• Resmi doküman: "Keeping Components Pure"; saf component ve yerel mutasyon örnekleri.⁸