İlk bileşen
- React kursu
- Başlangıç
- Ders 3/84
- 4 dk
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.
Başlangıç kodu
// Banner bileşenini buraya yazÖrnek çözüm
function Banner() {
return <header><h1>Hos geldin</h1></header>;
}
export default Banner;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 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 Doğru cevap
- Çünkü JavaScript büyük harf ister
Açıklama: Büyük harfle başlayan adlar bileşen, küçük harfle başlayanlar HTML etiketi sayılır.
2 PascalCase adlandırma
Bir React bileşeni ____ adında bir fonksiyon olmalı; küçük harf HTML etiketi sayılır.Bir React bileşeni App adında bir fonksiyon olmalı; küçük harf HTML etiketi sayılır.Açıklama: PascalCase (App) bileşen, camelCase (app) HTML etiketi sayılır.
3 Sözdizimi parçalarını eşleştir
| Kavram | Anlamı |
|---|---|
function App |
Bileşen tanımı |
return <h1> |
JSX döndürme |
export default |
Dışa aktarma |
{name} |
İfade yerleştirme |