Focus mode

React Native

React ve React Native Temelleri


JSX


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>


Component


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.


Styling


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.



Custom Component


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>
  );
};


VS


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?


🔧


Comments

You need to enroll in the course to be able to comment!