React Native Kurulumu

logo_og

Merhaba arkadaşlar,

Facebook tarafından geliştirilen React kütüphanesini kullanarak oluşturulan React Native frameworkü sayesinde native uygulamalar geliştirebiliyoruz. Yani Cordova/Phonegap gibi bir webview üzerinde çalışmıyor bunlar direkt olarak native  bileşenlerden oluşuyor. Bu yazımda react native kurulumu yapacağız ve sadece iOS için anlatacağım. Ama Android için de benzer şekilde geliştirebilirsiniz.

Öncelikle bilgisayarınızda ios için xcode’un kurulu olması gerekli, xcode’u app store’dan indirebilirsiniz. Ayrıca Node.js’in de kurulu olması gerekiyor, nodejs’i buradan indirerek kurunuz.

Dökümantasyonda performans açısından npm3 yerine npm2’nin kullanılmasını tavsiye ediliyor. npm2’ye geçmek isterseniz:

npm install -g [email protected]

npm nedir? derseniz, npm nodejs ile birlikte gelen bir paket yöneticisidir. Daha detaylı bilgi için: https://docs.npmjs.com/

Daha sonra watchman‘ı kurmamız gerekiyor. mac kullananlar şöyle kurabilirler:

brew install watchman

Diğer işletim sistemleri için: https://facebook.github.io/watchman/docs/install.html

Gerekli kütüphaneleri yüklediğimize göre şimdi de react native kütüphanesini yüklüyoruz:

npm install g reactnativecli

Projemizi oluşturmak istediğimiz yerde aşağıdaki komutu çalıştırıyoruz:

reactnative init AwesomeProject

Şöyle bir klasör yapısı ile oluşmuş oluyor.

Ekran Resmi 2016-01-14 22.25.46React kodlarımızı ios için index.ios.js dosyasına yazacağız.
ios klasörünü açtıktan sonra AwesomeProject.xcodeproj
projesini xcode ile açıyoruz. Direkt start butonuna tıklarsanız simulator ile çalıştırabilirsiniz.


Ekran Resmi 2016-01-14 22.34.38
iphone ile çalıştırmak isterseniz cihazı mace bağlayıp yukarıdaki hedef cihaz bölümünden cihazınızı seçin. Benimki şuanda bağlı değil ama siz bağlayınca listede ismini göreceksiniz.

 

Ekran Resmi 2016-01-14 22.36.23

Daha sonra proje ayarlarından general/identity kısmından bundle identifier kutusuna projeniz için benzersiz bir tanımlayıcı isim giriyoruz.

 

Ekran Resmi 2016-01-14 22.43.57

index.ios.js dosyasını açtıktan sonra hello world tarzında bir kod ile karşılacaksınız ben bunu biraz editledim status bar rengini beyaz, arkaplanı grimsi yaptım, texti düzenledim ve bir de image nesnesi ekledim ve aşağıdaki gibi bir sonuç çıktı.

 

Tekrar start butonuna bastığınızda projenizin çalıştığını göreceksiniz. Ayrıca her kodu düzenlediğinizde otomatik olarak cihazda da yenilenmesini istiyorsanız cihazı hafifçe sallayın ve development menüsü açılacak oradan Enable Live Reload ‘ı seçerek uygulamanın anında reload edilmesini sağlayabilirsiniz. Kolay gelsin..