React Native — Mobil Uygulama Geliştirme!

 

Mobil tarafta IOS cihazlara uygulama geliştirmek için Objective C veya Swift, Android tabanlı telefonlara ise java dili ile native uygulamalar geliştirebiliyoruz.

Bunun yanında, gelişen javascript kütüphaneleri de mobil uygulama geliştirmeye imkan sağlar oldu. Bu yazımızda da bu kütüphanelerin en popüler olanından yani React Native’den bahsedeceğiz.

React Native facebook tarafından sunulan bir mobil uygulama geliştirme çatısıdır. React ile geliştirdiğiniz kod derlenme aşamasında IOS ve Android tarafında native kodlara çevrilir. Böylece tek kod ile birden çok platforma mobil uygulama geliştirebilirsiniz.

Neden React Native ’ı seçmeliyim ?

• React native gerçekten native’dir.
• Uygulamlarınızı uzaktan güncelleme imkanı sağlar.
• Facebook gibi büyük bir destekçisi var
• Web tabanlı uygulama geliştiriciler için öğrenme süreci kısadır.
• Uygulama geliştirme süresi native’e göre kısadır.

Component Yaşam Döngüsü

React native ‘de uygulama performansını arttırmak için component methodlarının doğru kullanımı oldukça önemlidir.

1-Constructor

Başlangıç state ’lerini tanımladığımız alandır. Sayfa ilk yüklendiğinde buraya düşer.

2-componentWillMount

Component ekranı yerleştirilmeden render ’dan önce çalışmaktadır. State set etmek için uygun değildir. Çünkü setState çağırıldığından sayfa sürekli render edecektir.

3-render

Sayfa üzerinde bulunan tüm UI komponentlerin hepsi bu alanda bulunur. Bir component ‘in çalışması için diğer methodlar zorunlu değildir fakat render olmadan component çalışmaz.

4-componentDidMount

Ekranda gösterilmesini istediğiniz component’ ler çalıştıktan sonra bu method çalışır. Yani render ’dan hemen sonra çalışmaktadır.

5-componentWillUpdate

Sayfada state ve props ’un her güncellenmesinde bu method çalışır. Bu nedenle setState kullanımı sakıncalıdır sayfa loop’a düşer.

6-componentDidUpdate

Bu methodun componentWillUpdate dan tek farkı render ’dan sonra çalışmasıdır. Diğer tüm özellikleri aynıdır.

7-componentWillUnmount

Bu method component ‘in sonlanmasından hemen önce çalışır. Bu alanda bağlantıların kesilmesi, cache ‘in temizlenmesi gibi işlemlerin yapılması uygundur.

8-componentDidCatch(error, info)

Javascript hatalarında bu method tetiklenir. Log’lama yapılması için uygun bir alandır.

Evet component yaşam döngüsünü tanıdığımıza göre ortam kurulumlarına geçebiliriz.

Ortam Kurulumları

Öncelikle aşağıdaki uygulamaları ve paketleri yüklemeniz gerekmektedir. Bu kurulumlar, işletim sisteminize göre farklılık göstermektedir.

1-NodeJs

2- Brew

3- Mac için Xcode ve Android Studio.

4- Linux ve Windows için Android Studio

5- Npm üzerinden react-native CLI (npm -g install react-native-cli)

Bunların yanında güçlü bir IDE olan Visual Studio Code ‘ u kullanmanızı öneririm.

Örnek Uygulama

Evet örnek bir uygulama ile React Native’ e giriş yapalım. Öncelikle boş bir klasör ekleyerek projemizi oluşturalım.

react-native init {ProjectName}

Bu komutu çalıştırdığınız dizinde, verdiğiniz proje adı ile bir klasör oluşturulacak.

Bu klasöre girerek uygulamamızı çalıştıralım. (Bilgisayarınızda ilgili emulator ‘un yüklü olduğuna emin olunuz.)

// IOS için
npm start
react-native run-ios
// ANDROID için
npm start
react-native run-android

Evet herşey yolunda ise aşağıdaki gibi uygulamamız başlamış olacak.

Evet oluşturduğumuz proje dizinine göz atacak olursak. Uygulamamızın başladığı App.js dosyasına kodlarımızı yazacağız. Kodu derlediğimiz zaman IOS ve Android klasörlerine native olarak kodlar otomatik eklenmiş olacak.

App.js içinde aşağıdaki değişikliği yapalım.

Uygulamanızı birden fazla component yaparak modüler hale getirebilirsiniz. Örnek olarak bir component neler içeriyor inceleyelim.

Bir class oluşturarak react component’ den extend ediyoruz. Component içinde ekranı render eden bir blok mevcut. Ayrıca StyleSheet ekleyerek mobil ekrandaki objelere style ‘ ekleyebilirsiniz.

Uygulamayı başlatalım.

npm start
react-native run-ios

Bu basit uygulamanın çıktısı aşağıdaki gibidir.