React Native ile ilgili her ne kadar %50 üzerinde bir mesafeye henüz ulaşamamış olsamda hem kendi notlarımı canlı tutmak hemde türkçe kaynak yaratmak adına birşeyler yazmaya çalışacağım.

Bu yazımızda React Native ile kodlama tarafına geçiş ve kod tarafını biraz tanımaya çalışacağız tabi bunu yaparken React Native resmi sayfasını baz alacağız ve girişimizi her dilde olduğu gibi merhaba dünya yada ingilizce deyişiyle hello world olarak yapacağız.

React Native nedir ve kurulumu ile ilgili yazıyı bir önceki yazımda (React Native) yazmıştım. Linki takip ederek okuyabilirsiniz.

Merhaba Dünya yazmak için kullanacağımız kod yapısı aşağıdadır.

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

class MerhabaDunyaApp extends Component {
  render() {
    return (
      <Text>Merhaba dünya!</Text>
    );
  }
}

AppRegistry.registerComponent('MerhabaDunyaApp', () => MerhabaDunyaApp);

Şimdi kod yapısını inceleyecek olursak öncelikle react’i compontent/bileşen olarak import ediyoruz.

React’i import ederken görmüş olduğunuz gibi react kütüphanesini kullandık fakat bir alt satırdaki import tarafında ise text ve appregistry özelliklerini react native tarafından çağırmış olduk. Android yada eclipse üzerinden örnek vermek gerekecek olursa textView’i çağırmamı gibi bir durum. Java tarafında bunları import.widget.TextView şeklinde projeye çağırırken react native tarafında bu yapımız bu hale dönüşüyor.

Sonrasında tıpki javada olduğu gibi sınıfımızı çağırıyoruz. Bunun için Class MerhabaDunyaApp kullandık. Hemen altında ise render işlemi yapıyoruz.
Render kodumuzdan gelen return’e aslında tüm javascript frameworklerinden, programlama dillerinden alışkınız. Return sonrası ; yerine gelen ( ile burada return özelliğinin içine giriş yapmış oluyoruz, burada ; kullanmamız durumunda geri dönüş durumu olacak ve render’a sürekli boş element gönderimi yapmış olacaktık.
Return içerisinde ise <Text> elementi ile beraber yazımızı yazdık. Html içerisinde ki p gibi düşünelim.

React ile oluşturduğumuz MerhabaDunyaApp Component/Bileşinini ise register component ile birlikte bir bileşen olarak kayıt etmiş olduk.

React Native syntax ve kuralları ile ilgili daha detaylı bir anlatım yapmayı planlıyorum ama bunu anlatıp başkasına yazdırırsam daha anlaşılır gibi olacak diye de düşünmüyor değilim 🙂

Comments

  1. aga şu amk kodları niye 8px bi sik görünüyor.
    El atman dileğiyle.
    Emeğe saygı. Eline sağlık. Ama önerimi dikkate alırsan sevinirim.

    Teşekkürler kolay gelsin

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir