İlk Bileşeniniz

Bileşenler: Kullanıcı arayüzü yapı taşları

Web’de HTML, yerleşik <h1> ve <li> gibi elemanlar ile zengin yapılandırılmış belgeler oluşturmanıza olanak tanır:

<article>
  <h1>İlk Bileşenim</h1>
  <ol>
    <li>Bileşenler: Kullanıcı arayüzü yapı taşları</li>
    <li>Bileşeni tanımlama</li>
    <li>Bileşeni kullanma</li>
  </ol>
</article>

Bu biçimlendirme(markup), makaleyi <article>, başlığını <h1> ve sıralı bir liste <ol> halinde (kısaltılmış) içindekiler tablosunu temsil eder. Stil için CSS ve etkileşim için JavaScript ile birleştirilen bu tür biçimlendirme, Web’de gördüğünüz her kullanıcı arayüzü parçasında, her kenar çubuğunda, avatarda, modal’da ve açılır menünün arkasında bulunur.

React, biçimlendirmenizi, CSS’i ve JavaScript’inizi uygulamanız için tekrar kullanabilir kullanıcı arayüzü elemanları olarak kişisel bir “bileşende” toplamanızı sağlar. Yukarıda gördüğünüz içindekiler tablosu kodunu, her sayfada render edilebilecek şekilde bir <TableOfContents /> bileşenine dönüştürebilirsiniz. Bu bileşen arka planda hala aynı <article> ve <h1> gibi HTML elemanlarını kullanmaktadır.

HTML elemanlarında olduğu gibi, bütün bir sayfayı tasarlamak için bileşenleri oluşturabilir, sıralayabilir ve iç içe yerleştirebilirsiniz. Örneğin, şu anda okumakta olduğunuz dökümantasyon sayfası React bileşenleri ile yapılmıştır.

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Dökümantasyon</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

Projeniz büyüdükçe, yaptığınız dizaynların pek çoğunun, geliştirme aşamasını hızlandıracak şekilde zaten yazmış olduğunuz bileşenleri yeniden kullanarak oluşturabileceğini fark edeceksiniz. Yukarıdaki içindekiler tablosu herhangi bir ekrana <TableOfContents /> bileşeni ile eklenilebilir! Hatta React açık kaynak topluluğu tarafından paylaşılan Chakra UI ve Material UI gibi binlerce bileşenle projenize hızlı bir başlangıç yapabilirsiniz.

Bileşeni tanımlama

Geleneksel olarak web sayfaları oluşturulurken, web geliştiricileri içeriklerini tanımladılar ve ardından biraz JavaScript serpiştirerek sayfaları etkileşimli hale getirdiler. Web’de etikeleşimin olsa da olur olmasa da olduğu zamanlarda bu harika bir yaklaşımdı. Ancak şimdi etkileşim birçok site ve tüm uygulamalar için beklenmektedir. React, hala aynı teknolojiyi kullanırken etkileşimi ön sıraya koyar: React bileşeni, biçimlendirme serpiştirebileceğiniz bir JavaScript fonksiyonudur. Aşağıdaki örnekte nasıl olduğunu görelim (aşağıdaki örneği düzenleyebilirsiniz):

Ve işte bir bileşenin nasıl oluşturulacağı:

Adım 1: Bileşeni dışa aktar

export default ön adı standart bir JavaScript sözdizimidir (React’e özel değildir). Bir dosyadaki ana fonksiyonu işaretlemenize izin vererek o fonksiyonu başka dosyalarda içe aktarmanızı sağlar. (İçe aktarmak hakkında daha fazla bilgi için Bileşenleri İçe ve Dışa Aktarma!)

Adım 2: Fonksiyonu tanımlama

function Profile() { } ile Profile adında bir JavaScript fonksiyonu tanımlarsınız.

Adım 3: Biçimlendirme ekle(markup)

Bu bileşen src ve alt özelliklerine sahip bir <img /> elemanı döndürmektedir. <img /> elemanı HTML gibi yazılmıştır ama aslında arka planda JavaScript’tir! Bu sözdizimine JSX denir ve biçimlendirmeyi JavaScript’in içine yerleştirmenize olanak tanır.

Bileşenin ne döndüreceği aşağıdaki bileşende olduğu gibi tek bir satır halinde yazılabilir:

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

Ancak biçimlendirmenizin hepsi return kelimesi ile aynı satırda değilse, biçimlendirmenizin parantez içine almak zorundasınız:

return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

Bileşeni kullanma

Artık Profile bileşenini tanımladığınıza göre, bu bileşeni başka bileşenler içine koyabilirsiniz. Örneğin, birden fazla Profile bileşeni kullanan bir Gallery bileşeni oluşturabilirsiniz:

Tarayıcı ne görür

Baş harflerdeki farklılığa dikkat edin:

• <section> küçük harfle başlıyor, bu yüzden React, bunun bir HTML elemanı olduğu bilir.
• <Profile /> bileşeni büyük P harfi ile başlıyor, bu yüzden React, Profile isimli bileşeni kullanmak istediğimizi bilir.

Hatta Profile bileşeni daha da fazla HTML içermektedir:: <img />. Sonuçta tarayıcı şunu görür:

<section>
  <h1>Muhteşem bilim insanları</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>

Bileşenleri iç içe koymak ve düzenlemek

Bileşenler sıradan JavaScript fonksiyonlarıdır, yani birden fazla bileşeni aynı dosya içinde tutabilirsiniz. Bileşenlerin görece küçük ve birbirleriyle ilişkili olduğu durumlarda bunu yapmak kullanışlıdır. Eğer dosya kalabalık bir hale gelirse, Profile bileşeneni ayrı başka bir dosyaya taşıyabilirsiniz. Bunun nasıl yapılacağını kısa süre içinde içe ve dışa aktarmakla alakalı sayfada öğreneceksiniz.

Profile bileşenleri Gallery bileşeni içinde render edildiğinden—hatta birden fazla kere!—Gallery bileşeninin üst bileşen olduğunu ve her Profile bileşeninin “alt bileşen” olduğunu söyleyebiliriz. Bu React’in büyüsünün bir parçasıdır: bir bileşeni bir kere tanımlayabilirsiniz ve daha sonra bu bileşeni istediğiniz kadar ve istediğiniz yerde kullanabilirsiniz.

export default function Gallery() {
  // 🔴 Asla bir bileşen içinde başka bileşen tanumlamayın!
  function Profile() {
    // ...
  }
  // ...
}

export default function Gallery() {
  // ...
}

// ✅ Bileşeni üst seviyede bildirin
function Profile() {
  // ...
}