React Native'i Anlamak : Components, JSX, State, Props, React || Ders-1

React Native'yi anlamak için bazı temel kalıplara hakim olmamız gerekir. Bunlar : Temel react Konseptleri, JSX, Componentler, 'state' ve 'props' yapılarıdır.

Örnek bir kodu inceleyelim :

import React, { Component } from 'react';

import { Text, View } from 'react-native';



export default class HelloWorldApp extends Component {

  render() {

    return (

      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>

        <Text>Hello world!</Text>

      </View>

    );

  }

}

1-Kodumuz 'import' kısmı ile başlıyor. Bize lazım olan bileşenleri burada dahil ediyoruz.


2-export kısmını Javascript'ten hatırlayacaksınız( bilmiyorsanız ES6 ile gelen bir yenilik öğrenip sonra buraya gelmenizi tavsiye ederim).$#ecmaScript 6 Class yapısı.
 --> Burada olan olayı basitçe açıklamak gerekirse: Mobil app yaparken blok blok yapılar oluştururuz. Bu bloklar bizim uygulamamızı oluşturan bileşenlerdir. Ancak bu blokları hop diye javascript bloğu oluşturduğumuz gibi oluşturamayız. O yüzden mobil uygulama için temel özellikleri taşıyan Component sınıfından yeni bloklar oluştururuz. Component mana olarak bileşen demektir. Yani component denilen class temel özellikleri taşıyorken biz de üstüne yeni classlar oluşturarak istediğimiz extra özellikleri koyarız. Burada

HellowworldApp 

bizim yeni component'imizdir. Ekran da hemen hemen görüdüğümüz  her şeycomponentlerden oluşur.

 3- Text ve View
-->Text ve View React Native tarafından oluşturulmuş componentlerdir.<View> için HTML'deki div veya span diyebiliriz. Text'te yazı yazmak için kullanılır.

4-<View style={{Stiller Burada}}
. İşte React native ile gelen bir güzellik daha. CSS bildiğiniz gibi React Native de nasıl stil vereceğenizi de öğrenmiş oluyorsunuz. Tabiki kullanımı arasında bazı farklılıklar var. Örneğin Css deki '

margin-left

'React Native'de '

marginLeft

' oluyor gibi..