JavaScript Uzmanı Olmayanlar İçin React-Native Anlatımı

Bu yazi hala yapim asamasindadir, buldugunuz eksiklikleri pull request acarak giderebilir ya da issue girerek bildirebilirsiniz.

React Facebook tarafindan ortalara atilmis bir javascript kutuphanesi. MVC desenli tasarimlarda V (View) katmanini olusturdugu soylense de redux gibi kutuphanelerle birlestiginde basli basina bir calisma tasarim semasina sahip oldugunuz soyleniyor. Bu yazida sifirdan baslayarak react native ile bir uygulama gelistirmeye calisacagiz.

Okumadan Once:

Hedef isletim sistemim Android, gelistirme yaptigim isletim sistemi ise OSX olacak. Bu yuzden ornegin IOS icin gelistirme yapmak istiyorsaniz bu yazi bir yere kadar yeterli olacaktir. Gelistirme yaptiginiz sistemde NodeJS, NPM, Watchman ve Homebrew kurulu olmalidir. Eger kurulu degillerse asagidaki komutlari kullanarak yukleyebilirsiniz:

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew install nodejs watchman

Getirileri:

1. JSX adinda bir markup dili getiriyor, bunu kullanmak zorunlu olmasa da siddetle tavsiye edilmekte. Ha HTML yerine kullanilmasi avantajli mi? Tartisilir.
2. Components - React bir web sayfasi ya da uygulamayi tasarlarken HTML etiketleri olarak degil de gorunum bilesenleri tasarlamanizi sagliyor. Ne faydasi var diyecek olursaniz, bilesenler bir kere duzgun tasarlandiktan sonra farkli projelerde kullanilabiliyorlar. Ornegin hesap makinesi adinda buyuk bir bilesen yaparsaniz bunu yaptiginiz farkli farkli uygulamalara takabiliyorsunuz.
3. Cift Tarafli Veri Akisi: React componentlerin veriden yola cikarak gosterimini, ayni zamanda da verinin componentlerin durumuyla guncellenmesini saglayabiliyor. Bunu flux adinda bir kutuphane ile yapiyor.

Avantajlari:

1. React ile ilgili donen cay kahve muhabbetlerinde bile soylenir ama ben yine de burada tekrar edeyim: React web sayfalarini render ederken gercek DOM'u degil de kendi salan DOM'unu kullaniyor ve burada guncellemeleri degisiklikleri yaptiktan sonra gercek DOM'a bu degisiklikleri aktariyor. Bu da muazzam bir performans artisi demek.
2. React sunucu ve istemci tarafinda kullanilabiliyor. React ile hazirladiginiz componentler sonradan render edilmek zorunda degil.
3. Component ve veri tipleri javascript kodunun okunabilirligini arttiriyor.

Sinirlamalari:

1. React sadece view katmanini temsil ettigi icin gelistirme ortaminizi tamamlamak adina baska kutuphanelere ihtiyac duyabiliyorsunuz. React'in kullandigi JSX markup dili bazi gelistiricilere acayip gozukebiliyor.

GELISTIRME ORTAMININ KURULMASI

Simdiye kadar yaptigim denemelerde gelistirme ortaminin kurulmasi bana gelistirme yapmanin en zor kismiymis gibi geldi. Zira Android SDK'nin ve SDK icerisinde bulunmasi gereken paketlerin kurulumunu anlatan birden falza dokuman var.

ADIM 1 - GLOBAL GEREKLI PAKETLERIN KURULMASI:

Oncelikle babel pakedini kurmaniz gerekiyor. Bu paket javascript yazarken ES6 standardini kullanabilmenizi sagliyor. ES6 standardi ile yazdiginiz javascript kodunun eger broser desteklemiyor ise downgrade edilmis bir versionunu compile ediyor. Artik modern javascript yazmak icin babel kullanmak zorunlu gibi bir sey.

$ npm install -g babel babel-cli react-native-cli

NOT: Bagzi yerlerde React Native ES2015 standardini kullaniyor gibi bir seyler okuyabilirsiniz. ES2015, ES6'nin draft hali yani ES6 standardinin bitirilmeden onceki halini ifade ediyor.

ADIM 2 - ANDROID SDK'NIN KURULUMU:

Yazacaginiz uygulamalarin telefonda ya da bir telefon emulatorunde calistirilmasi gerekiyor. Eger yazdigimiz kodlarin sonucunu sanal ya da degil bir Android makine uzerinde gormek istiyorsaniz (benim senaryomda istiyoruz) Android SDK'nin kurulumunu yapmamiz gerekiyor.

brew tap caskroom/cask
$ brew cask install android-sdk

Brew guzel alet, Android SDK'nin ciplak haliyle kurulumunu yaptik. Ardindan yapmamiz gereken sey ise ANDROID_HOME ortam degerinin set edilmesi. Bu deger Android SDK'yi kurdugunuz yer olmali.

Unix sisteminizde asagidaki satiri (eger yoksa) ~/.bashrc, ~/.bash_profiel ya da fish kullaniyorsaniz adini hatirlamadigim baska bir dosya icine yazmaniz gerekiyor:

export ANDROID_HOME=/usr/local/share/android-sdk

Burada tekrar hatirlatmamda fayda var verdigimiz yolun SDK'nin kurulu oldugu yeri gostermesi gerekiyor. Kontrol edip yolu ona gore gerekiyorsa degistirin.

Bu degiskeni dogru olarak degistirdiyseniz asagidaki komutun ciktisi sunun gibi olmalidir:

$ ls $ANDROID_HOME
INSTALL_RECEIPT.json add-ons              build-tools
extras               platforms            sources
temp                 README               bin
etc                  platform-tools       samples
system-images        tools

Bu asamadan sonra SDK icin cesitli paketlerin yuklenmesi gerekiyor. React Native'in kendi dokumantasyonu bu konuda biraz eski, su an baktigimda Android Studio kurmaya, oradan gorsel arabirim uzerinden cesitli kutuphaneleri elle yuklemeye yonlendiriyor ama bunlara gerek olmadigini gordum. Eger Android SDK dogru bir sekilde kuruldu ve tanimlandiyda ilk calistirma sirasinda React Native gerekli paketleri kuruyor.

ADIM 3 - TELEFONUN TANITILMASI

Bu islem basit, Android telefonunuzun once gelistirici modunu acacak. Sonra da USB den bilgisayariniza baglayacaksiniz. Bu islemleri yaptiktan sonra su komutu verdiginizde sunun gibi bir cikti gormelisiniz:

$ adb devices
List of devices attached

TELEFON MODELI

Eger telefonunuz bu listede gozukmuyorsa emin olmaniz gereken seyler sunlar.

1. Telefonunuz USB ile bagli olmali.
2. Telefonunuz sadece sarj ya da fotograf makinesi modunda degil MTP modunda bagli olmali.
3. Telefonunuzun gelistirici secenekleri acik olmali.
4. Gelistirici secenekleri icerisindeki USB uzerinden hata ayiklama secenegi acik olmali.

Eger butun bunlari sagladiysaniz ve yine de bilgisayariniz bir cihaz gormuyorsa, telefonunuzu bilgisayarinizdan ayirin, adb servisini oldurun, telefonunuzu takin ve tekrar adb devices komutunu verin. Benim telefonum USB kablosu her cikarildiginda USB Uzerinden Hata Ayiklama secenegini kapatiyor, eger cikar tak yaptiysaniz hata ayiklamanin hala acik oldugundan emin olun.

Bu arada sanal bir Android makine olusturup bunun uzerinde gelistirme yapmak da mumkun ancak ben bu sekilde, gercek bir telefon uzerinde calismayi daha mantikli buldum. Sanal makine icin -zaten gercegi varken- CPU, disk alani, RAM harcamak, gelistirme yaparken surekli tab yaparak ya da pencereleri hizalamaya calisarak sanal makineyi takip etmektense bilgisayarin yanina telefonunuzu koymak ve degisiklikleri oradan takip etmek cok daha mantikli geldi bana.

REACT NATIVE ILE PROJENIN BASLATILMASI

Yukaridaki adimlari takip ettikten sonra artik react-native komutu bizim icin calistirilabilir olmali:

$ react-native init ReactHello

Bu komut baya bir indirme yapiyor ve bana cok devasa gozuken bir dizin agaci yaratiyor. Daha hic bir sey yapmadan 22.700 tane dosya olustu proje dizinimin icinde. Bu bana biraz sevimsiz geldi acikcasi ama soguyup birakacak degilim.

$ cd ReactHello
$ ReactHello/ $ ls
__tests__        app.json         index.ios.js     node_modules <-- icinde bi dunya dosya var.
android          index.android.js ios              package.json

Neyse, bu noktada bilmemiz gereken bazi seyler sunlar:

• React Native paket yoneticisi olarak NPM kullaniyor. Dolayisiyla node_modules dizini kurdugumuz, kuracagimiz paketleri barindiriyor.
• "android" ve "ios" dizinleri android ve ios projeleri icin uretilmis kodu barindiriyor. Android Studio ya da XCode kullanarak acip, incelenebilir.
• index.android.js ve index.ios.jsedosyalari bizim kaynak kodumuzun giris noktalari oluyor.

Simdi de bu bos projeyi Android uzerinde calistiralim:

$ react-native run-android

Bu komut baya bir indirme yapacak, daha once kurdugumuz Android SDK uzerine, React Native'in calismasi icin gerekli olan paketleri kuracak. Iyi haber bu islemin sadece 1 defa yapilacak olmasi. Eger sansimiz yerindeyse telefonumuzda sunun gibi bir ekran gormeliyiz:

Bu ekrandayken telefonu salladiginizda karsiniza cesitli gelistirici secenekleri cikacak. Bunlari biraz kurcalayin ne oldugunu anlamaya calisin. Ilerde lazim olacaklar.

Hello World

Simdi yukarda index.android.js ve index.ios.js dosyalarimizin bulundugunu, bunlarin iki farkli cihaz icin uretilmis kodlar oldugunu soylemistik. Simdi bu iki dosyayi sifirlayip bastan yazarak React'in ve React Native'in nasil calistigini biraz inceleyelim. Iki dosyanin da icini bosaltin ve asagidaki satirlari ekleyin:

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

Simdiye kadar sadece kurulumla konfigurasyon ile gecirmistik zamanimizi, simdi ise ilk defa elimizi tasin altina attik ve Javascript yazmaya basladik. React Native Javascript yaziminda ES6 standardini kullaniyor. Yukarodaki kod parcacigindaki import yonergeleri de bu standarda ait yonergeler. Daha once gormediyseniz soyle basitce aciklayayim. 'react' pakedinden React ve Component'i, react-native pakedinden de Text ve AppRegistry dosyalarini import ediyoruz. Eger bir paketten export edilmemis bir seyi import etmeye calisiyorsak bunu kivrimli parantezler icinde yaziyoruz. ES6'daki import yonergeleri icin Mozilla vakfinin dokumanina goz atabilirsiniz.

Bu arada yeri gelmisken soyleyeyim bu yaziyi yazarken-React ortamini incelerken ES6 spesifikasyonuna asina oldum. Neredeyse Javascript cok guzel olmus diyecegim. Dili butun sacmaliklarindan ayiklamislar.ES6 hakkinda daha fazla bilgi sahip olmak icin su ve su sayfalara goz atabilirsiniz. Ayrica bunlari okumak sikici gelirse Ustun Ozgur'un Youtube'da cok guzel bir sunumu var.

Simdi devam edelim ve ilk bilesenimizi (componentimizi ekleyelim). Component dedigimiz sey aslinda bir gosterimi ifade eden sinif. Bu siniflar alt siniflara sahip olabiliyor. Bir hesap makinesi bileseni yaratip, o bilesenin icerisine de tus bilesenlerini koyabiliyoruz mesela.

class ReactHello extends Component {
    render() {
        return (
            <Text>Selam, React!</Text>
       )
    }
}

Burada ReactHello sinifi Component ana sinifindan turemekte. Bu syntax'da ES6'nin bir hediyesi bu arada. Neyse, goreceginiz gibi sinifimiz (ya da bilesenimiz) sadece bir render fonksiyonuna sahip, ve bu fonksiyon icerisinde XML benzeri bir yazim dili iceriyor, adi da JSX. Bunun ne oldugunu birazdan anlatacagim biz simdilik devam edelim.

Son olarak yapmamiz gereken sey componentimizin, uygulamamizin ana gorunumu oldugunu belirtmek. Bunun icin soyle bir hareket cekiyoruz.

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

urada uygulamamizin sahip oldugu bileseni uygulamamizin ana bileseni olarak belirlemis oluyoruz. React Native projenin klasor adini projenin ana bilesen ismi olarak kullaniyor. Yani klasor ismimiz 'ReachNaber' olsaydi register ederken:

AppRegistry.registerComponent('ReactNaber', () => ReactHello);

Seklinde kaydedecektik. Neticede uygulamamizin son hali su sekilde olmali:

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

class ReactHello extends Component {
    render() {
        return (
            <Text>Selam, React!</Text>
        )
    }
}

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

imdi uygulamamizi tekrar run komutu vererek calistirabiliriz, ya da hic kapatmadiysak telefonu sallayip, cikan menuden reload edebiliriz. Ekrana selam, React! yazmaktan baska hic bir sey yapamayan rezil uygulamamizin calisiyor olmasi lazim.

JSX

Su return ettigimiz XML benzeri yazim var ya. Bu yazim JSX olarak adlandiriliyor. HTML de degil Javascript de degil. React tarafindan sunulan bir Javascript eki (kutuphane degil). Javascript notasyonuna uymuyor. Bu yuzden de beni biraz rahatsiz etti acikcasi. Bir JSX blogu yazarken aslinda React yazdigimiz kodu sunun gibi bir cevrime sokuyor:

// JSX Kodu:
<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

// Javascript Ciktisi:
React.createElement(MyButton, {color: 'blue', shadowSize: 2}, 'Click Me')

Yani compile edilene kadar editor icinde Javascript, JSX karisik bir syntax goruyorsunuz. Bunun elestirilecek bir kac yonu var. Yillarca tasarim, yazim ve mantigi ayirmaya ugrasmis ve bunu basarmisken boyle bir kod yazmak tarih oncesine donmus gibi hissettiriyor. JSX yazarken dikkat etmeniz ve hep hatirinizda tutmaniz gereken sey calisma asamasina gelindiginde Javascript koduna donusecek bir sey yazdiginiz. Bu yuzden ornegin eger bir degisken kullaniyorsaniz bunun JSX'in icinde bulundugu scope'da tanimli olmasi gerekiyor. Ha evet tam yeri geldi su anda, JSX icerisinde degiskenler ve ifadeler kullanabiliyoruz:

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

class ReactHello extends Component {
    render() {
        let name = 'Mirat';
        return (
            <Text>Selam, React! ben {name} Uc arti bes {3+5} eder.</Text>
        )
    }
}

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

Kullanmak istedigimiz degiskeni ya da ifadeyi {} icerisinde yazmamiz yeterli oluyor.

Kaynaklar:

• https://www.tutorialspoint.com/react_native/
• https://facebook.github.io/react-native/releases/0.23/docs/android-setup.html
• https://kylewbanks.com/articles/react-native-tutorial-part-1-hello-react
• https://facebook.github.io/react-native/docs/getting-started.html
• https://benmccormick.org/2015/09/14/es5-es6-es2016-es-next-whats-going-on-with-javascript-versioning/
• https://www.youtube.com/watch?v=Vp4K03xWsgE
• https://facebook.github.io/react/docs/components-and-props.html
• https://facebook.github.io/react/docs/jsx-in-depth.html

01/2016