Fonksiyonel bileşen
- React Native kursu
- Başlangıç
- Ders 13/116
- 4 dk
Fonksiyonel bileşen tanımlamayı öğrenirsin.
Fonksiyonel bileşen
React Native'de bir bileşen, JSX döndüren bir JavaScript fonksiyonudur. Buna fonksiyonel bileşen denir. Fonksiyon adı her zaman büyük harfle başlar.
Örnek: function Greeting() { return <Text>Merhaba</Text>; }. Burada Greeting bir bileşendir; tıpkı View veya Text gibi kullanılabilir.
Bir bileşeni kullanmak için onu bir JSX etiketi gibi yazar: <Greeting />. Bu, fonksiyonu çağırır ve döndürdüğü JSX'i ekrana koyar.
Bileşeni kullanma
Tanımladığın bileşeni başka bir bileşenin içinde JSX etiketi olarak kullanırsın. Etiket adı, fonksiyon adıyla birebir aynı olmalıdır.
Örneğin Greeting bileşenini App içinde kullanmak için: function App() { return <Greeting />; }.
Bu, bileşenin yeniden kullanılabilir olmasını sağlar. Bir kez yazarsın, birçok yerde kullanırsın.
Uygulama Greeting bileşeni yaz
Bir Greeting bileşeni yaz; <Text>Merhaba</Text> döndürsün. Sonra App bileşeni içinde <Greeting /> çağrısı yapsın.
Başlangıç kodu
// Greeting bileşenini yaz
// App içinde çağır
function App() {
return null;
}Örnek çözüm
function Greeting() {
return (
<Text>Merhaba</Text>
);
}
function App() {
return (
<Greeting />
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Hangisi geçerli bir fonksiyonel bileşendir?
- function greeting() { return <Text>Merhaba</Text>; }
- <Greeting />
- function Greeting() return <Text>Merhaba</Text>;
- function Greeting() { return <Text>Merhaba</Text>; } Doğru cevap
Açıklama: Bileşen adı büyük harfle başlar ve süslü parantez içine JSX döndürür.
2 Bileşen çağrısı
function Greeting() { return <Text>Merhaba</Text>; }
function App() {
return (____);
}function Greeting() { return <Text>Merhaba</Text>; }
function App() {
return (<Greeting />);
}Açıklama: <Greeting /> bileşeni çağırır.
3 Bileşen parçalarını eşleştir
| Kavram | Anlamı |
|---|---|
function |
Tanım |
return |
Dönüş |
<Greeting /> |
Çağrı |
Greeting |
Bileşen adı |