Fonksiyonel bileşen

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.

Örnek çözümü göster

function Greeting() {
  return (
    <Text>Merhaba</Text>
  );
}

function App() {
  return (
    <Greeting />
  );
}

Kendini test et

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>; }
Cevabı göster

function Greeting() { return <Text>Merhaba</Text>; } — Bileşen adı büyük harfle başlar ve süslü parantez içine JSX döndürür.

Bileşen çağrısı

function Greeting() { return <Text>Merhaba</Text>; }

function App() {
  return (____);
}

Cevabı göster

function Greeting() { return <Text>Merhaba</Text>; }

function App() {
  return (<Greeting />);
}

Bileşen parçalarını eşleştir

function

Tanım
return

Dönüş
<Greeting />

Çağrı
Greeting

Bileşen adı

Sıradaki ders: Props

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler