İlk bileşen

Bir fonksiyonel bileşen yazıp ekranda göstermeyi öğrenirsin.

İlk bileşen

Bir React bileşeni, büyük harfle başlayan ve JSX döndüren bir fonksiyondur. Örneğin function App() { return <h1>Merhaba</h1>; } basit bir bileşendir.

Bileşen adının büyük harfle başlaması şarttır: App bir bileşen, app bir HTML etiketi sayılır. Bu yüzden React adlandırma için PascalCase kullanır.

Bileşeni başka dosyada kullanmak için export default App; ile dışa aktarırsın. İçe aktaran taraf import App from './App'; yazar.

JSX nedir?

JSX, JavaScript içine HTML benzeri sözdizimi yazmaya olanak veren bir React eklentisidir. return <h1>Merhaba</h1>; satırı aslında React.createElement(...) çağrısına derlenir, ama JSX sayesinde bunu doğrudan yazarsın.

JSX'te süslü parantez { } içine herhangi bir JavaScript ifadesi koyabilirsin: return <h1>{name}</h1>; gibi. Bu, arayüz ile veriyi tek yerde birleştirir.

JSX bir şablon dili değildir; tam JavaScript'tir. Bu yüzden if, map ve diğer JS özelliklerini doğrudan kullanabilirsin.

Uygulama Bir Banner bileşeni yaz

Aşağıdaki iskeleti tamamla. Banner adında bir fonksiyon yaz; <header> içinde <h1>Hos geldin</h1> döndürsün ve dışa aktarılsın.

Örnek çözümü göster

function Banner() {
  return <header><h1>Hos geldin</h1></header>;
}

export default Banner;

Kendini test et

Bileşen adı neden büyük harfle başlamalı?
- Büyük harf daha hızlı çalışır
- Sadece bir stil kuralı, işlevi yok
- React büyük harfle başlayanları bileşen sayar, küçükleri HTML etiketi sayar
- Çünkü JavaScript büyük harf ister
Cevabı göster

React büyük harfle başlayanları bileşen sayar, küçükleri HTML etiketi sayar — Büyük harfle başlayan adlar bileşen, küçük harfle başlayanlar HTML etiketi sayılır.

PascalCase adlandırma

Bir React bileşeni ____ adında bir fonksiyon olmalı; küçük harf HTML etiketi sayılır.

Cevabı göster

Bir React bileşeni App adında bir fonksiyon olmalı; küçük harf HTML etiketi sayılır.

Sözdizimi parçalarını eşleştir

function App

Bileşen tanımı
return <h1>

JSX döndürme
export default

Dışa aktarma
{name}

İfade yerleştirme

Sıradaki ders: Özet - React girişi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler