Odak modu
React ve React Native Temelleri
React'ın dil formatıdır. Bir nevi Syntatic Sugar yapısıdır aslında. Daha çok okunabilir bir format sunar.
Mesela şu yapıyı;
React.createElement(CatComponent, { name: "Miyavko", isCute: true }, "Meow!");
Şu formatta yazabilmeye olanak sağlar.
<CatComponent name="Miyavko" isCute={true}>
Meow!
</CatComponent>
React dünyasınındaki her bir parça. Değer alabilen, aldığı değerleri işleyebilen özel yapılar.
const RockstarCard = (props) => {
return (
<View style={styles.rockstar}>
<Text> {props.name} is rocking! 🔥 </Text>
</View>
);
};
Mesela burada RockstartCard adında bir component tanımlanmış. Baştan sona bir function olduğu için bu yapılara Functional Component denir. Aldığı props parametresi ise ona gönderilebilen özel değerleri temsil eder.
Bu component'i kullanmak istersek de;
<RockstarCard name="Freddie Mercury" />
şeklinde kullanırız.
React Native Yoga layout yapısını kullanır. Aynı CSS'de olduğu gibi benzer property'ler kullanılarak isimlendirme yapılır.
Mesela;
StyleSheet.create({
backgroundColor: 'red',
padding: 10,
marginTop: 5,
borderRadius: 20
borderWidth: 1
})
yapısı örnek bir stillendirmedir.
React olabildiğince sadece ve yalın bir kod yazmayı hedefler. Karmaşıklığa doğru gidebilecek her bir component yapısı sadeleştirilmelidir. Haliyle okunması gittikçe zorlaşan, yönetilmesi zor bir yapı sezdiğinizde bunu parçalara bölüp kodları ayırmanız gerek. Bu arayüz bileşenleri için de geçerli.
Tekrarlı kullanıma ihtiyaç duyulabilecek bir yapı söz konusuyla burada devreye onu bileşenlere ayırmak giriyor. Kendi yaşam döngüleri olan componentler üzerinden gitmek her zaman karmaşık yapılara kıyasla daha mantıklı bir çözümdür.
const App = () => {
return (
<View style={styles.container}>
<View style={styles.input_container}>
<TextInput
placeholder="Username.."
onChangeText={setUsername}
value={username}
style={styles.input}
/>
<View style={styles.button_container}>
<Icon name="account" size={20}>
<Button title="Username" onPress={handleUsername}/>
</View>
</View>
<View style={styles.input_container}>
<TextInput
placeholder="Email address.."
onChangeText={setEmail}
value={email}
style={styles.input}
/>
<View style={styles.button_container}>
<Icon name="account" size={20}>
<Button title="Send Mail" onPress={handleSendMail}/>
</View>
</View>
<View style={styles.input_container}>
<TextInput
placeholder="Password.."
onChangeText={setPassword}
value={password}
style={styles.input}
/>
<View style={styles.button_container}>
<Icon name="key" size={20}>
<Button title="Send Password" onPress={handlePassword}/>
</View>
</View>
</View>
);
};
const Input = ({value, placeholder, onChangeText, icon, title, onSubmit}) => { <View style={styles.container}> <TextInput placeholder={placeholder} onChangeText={onChangeText} value={value} style={styles.input} /> <View style={styles.buttoncontainer}> <Icon name={icon} size={20}> <Button title={title} onPress={onSubmit}/> </View> </View> } const App = () => { return ( <View style={styles.container}> <Input value={username} placeholder="Username.." onChangeText={setUsername} icon="account" title="Send Username" onSubmit={handleUsername} /> <Input value={email} placeholder="Email address.." onChangeText={setEmail} icon="account" title="Send Mail" onSubmit={handleSendMail} /> <Input value={password} placeholder="Password...." onChangeText={setPassword} icon="key" title="Send Password" onSubmit={handlePassword} /> </View> ); };
Hangisi daha okunabilir?
🔧
Sektörde en çok aranan yazılım becerilerini kazan
Yapay zeka desteği, birebir mentörlük saatleri, canlı dersler ve senin için özel hazırlanmış içeriklerle eksiklerini tamamla, düzenli geri bildirimler al ve öğrenme sürecini en verimli hale getir.
Yunus Emre Kabakcı
Patika+ mezunuPatika+ Fullstack Web Development Bootcamp mezunumuz Yunus Emre,
3 ay içinde Katar’dan aldığı teklif ile, global bir şirket olan Pavo Group’da işe başladı!
“İçerik zenginliği, mentor desteği, ileriye dönük bir network sağlaması ve dünyada en çok tercih edilen frameworkler üzerinden bir eğitim veriyor olması Patika+’ı tercih etmemin temel sebepleri oldu!“
Yorum yapabilmek için derse kayıt olmalısın!