JSX nedir?
- React Native kursu
- Başlangıç
- Ders 7/116
- 4 dk
JSX sözdizimini ve JavaScript içinde HTML benzeri yazımı öğrenirsin.
JSX nedir?
JSX, JavaScript içine HTML benzeri sözdizimi gömmenin bir yoludur. React Native'de ekranları tanımlamak için kullanılır. Bir <View> etiketi aslında bir fonksiyon çağrısına derlenir.
JSX'te etiketler büyük harfle başlar (View, Text); küçük harfle başlayanlar HTML olarak algılanır ve React Native'de çalışmaz.
Her açılış etiketinin bir kapanış etiketi olmalı ya da <View /> biçiminde kendini kapanmalıdır.
JSX ilkeleri
JSX yazarken üç temel ilkeyi unutmamalısın. Birincisi: bir bileşen tek bir kök etiket döndürmelidir. Birden fazla paralel etiket varsa onları bir <View> içine alırsın.
İkincisi: her açılış etiketinin bir kapanışı olmalıdır. Üçüncüsü: bileşen adları her zaman büyük harfle başlar; bu sayede React onları HTML etiketlerinden ayırt eder.
Bu üç ilke, JSX'in temelini oluşturur.
Uygulama İlk JSX'ini yaz
App bileşeni yaz; <View> kök etiketi içinde <Text>Merhaba JSX</Text> döndürsün.
Başlangıç kodu
// App bileşenini yaz
function App() {
return null;
}Örnek çözüm
function App() {
return (
<View>
<Text>Merhaba JSX</Text>
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Hangisi geçerli JSX'tir?
- <view><text>Merhaba</text></view>
- <View><Text>Merhaba</Text></View>
- <View><Text>Merhaba</View></Text>
- <View Text=Merhaba /> Doğru cevap
Açıklama: Etiketler büyük harfle ve doğru iç içe kapatılmalı.
2 JSX ilkelerini eşleştir
| Kavram | Anlamı |
|---|---|
Tek kök |
Tek üst etiket |
Kapanış |
Her açılışın olmalı |
Büyük harf |
Bileşen adlarında |
Süslü parantez |
İfade gömmek için |
3 Text açılış etiketi
<View>
____>Merhaba</Text>
</View><View>
<Text>Merhaba</Text>
</View>Açıklama: Text etiketi <Text ile başlar.