İlk bileşen
- React Native kursu
- Başlangıç
- Ders 3/116
- 4 dk
View ve Text ile ilk bileşeni yazmayı öğrenirsin.
View ve Text
View, React Native'in en temel konteyner bileşenidir. Bir <div> gibi düşün; içine başka bileşenler koyarsın. Text ise ekranda metin gösterir; tıpkı bir <p> gibi.
Bu ikisi react-native paketinden içe aktarılır: import { View, Text } from 'react-native';.
Bileşen adları her zaman büyük harfle başlar; bu sayede React onları HTML etiketlerinden ayırt eder.
İç içe bileşenler
React Native'de bileşenler iç içe geçebilir. Bir <View> içine başka <View> veya <Text> koyabilirsin. Bu, bileşen ağacının temelidir.
Her açılış etiketinin bir kapanış etiketi olmalıdır. Boş bir etiket ise <View /> gibi kendini kapatan biçimde yazılır.
İç içe geçmiş yapı, ekranı mantıksal parçalara bölmeni sağlar.
Uygulama İç içe bileşen yaz
App bileşeni yaz. <View> içine iki <Text> yerleştir: birincide Başlık, ikincide Açıklama yazsın.
Başlangıç kodu
// İki Text içeren View yaz
function App() {
return null;
}Örnek çözüm
function App() {
return (
<View>
<Text>Başlık</Text>
<Text>Açıklama</Text>
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Kapanış etiketi
<View>
<Text>Merhaba</Text>
____><View>
<Text>Merhaba</Text>
</View>Açıklama: View etiketi </View> ile kapatılır.
2 Text bileşenini View içine nasıl yerleştirirsin?
- <Text><View>Merhaba</View></Text>
- <View><Text>Merhaba</Text></View>
- <View Text>Merhaba</View>
- <View><Text Merhaba /></View> Doğru cevap
Açıklama: Text, View'un içinde yer alır.
3 Bileşenleri eşleştir
| Kavram | Anlamı |
|---|---|
View |
Konteyner |
Text |
Metin |
import |
İçe aktarma |
export |
Dışa aktarma |