React Native nedir? #1

React Native nedir?

• React Native Facebook bünyesinde geliştirilmeye devam eden farklı platformlar için javascript dilinde native uygulama yazmayı sağlayan bir araçtır.
• Geliştirme aşaması web uygulamaları geliştirmeyi sağlayan React ile tamamen aynıdır.
• Çapraz platform desteği sayesinde bir mobil uygulamada ihtiyaç duyulacak olan componentleri hazır olarak sunar.
• JSX desteği ile HTML kullanma kolaylığında arayüz kodu yazabilmeyi sağlar.

• Component yapısı sayesinde uygulamayı istediğiniz kadar parçalayabilir ve farklı alanları farklı componentlere bölerek kod okunabilirliğini arttırmaya ve karmaşıklığı azaltmaya yardımcı olur.
• Android ve Ios platformları için native paketleri kurduktan sonra sadece react-native link paket-adi komutunu çalıştırarak android ve ios klasörlerinde paketler için gerekli düzenlemelerin otomatik yapılmasını sağlayabilirsiniz.
• npm üzerinden ihtiyacınız olan paketi indirip kolayca kullanabilirsiniz.
• Babel desteği sayesinde daha etkili javascript yazabilirsiniz. https://github.com/hemanth/es-next
• Hot reload ile yaptığınız kod değişikliğini simülatörde anında görebilirsiniz.

Kurulum

Kurulum için sisteminizde node, npm ve geliştirme yapacağınız platformun geliştirme ortamının kurulu olması gerekli.

Node ve npm kurulumunu nvm aracı yapabilirsiniz.

https://github.com/creationix/nvm

~Ios

Ios için geliştirme sadece MacOS üzerinde yapılabiliyor.

Brew ile watchman aracını indirin.

brew install watchman

Watchman Facebook tarafından geliştirilen ve dosya değişikliklerini izlemeyi sağlayan bir araç.

Sisteminizde brew kurulu değilse https://brew.sh/ adresinden indirebilirsiniz.

Uygulamayı derlemek ve simulatör üzerinde deneyebilmek için Xcode u indirmelisiniz. Iphone yada ipod cihazınız varsa ve uygulamanızı cihaz üzerinde denemek istiyorsanız indirdiğiniz Xcode versiyonu ve cihazınızın ios versiyonu arasında uyum olmasına dikkat etmenizi öneririm.

Xcode indirmesini tamamladıktan sonra Preferences sekmesine tıklayıp açılan pencerede Components sekmesinden simülatörü indirin.

~Android

Android  platformu için MacOS, Linux ve Windows farketmeksizin her ortamda geliştirme yapılabiliyor.

Android Studio ile tüm gerekli indirmeleri yapabilirsiniz. Terminal ile geliştirme ortamı için gerekli araçların kurulumunu yapabilirsiniz ancak kolay ve kullanışlı olması açısından Android Studio kullanmanızı öneririm.

Kurulumu tamamladıktan sonra Tools/Android/SDK Manager sekmesine tıklayarak açılan pencerede Appearance & Behavior → System Settings → Android SDK sekmesinden gerekli sdkları yükleyin.

Npm ile React Native komut aracını indirelim.

npm i -g react-native-cli

Ve yeni bir proje oluşturalım.

react-native init demoproject

demoproject klasöründe uygulama için gerekli dosyalar oluşturuldu.

__tests__ klasörü içerisinde uygulama ios ve android için iki farklı test dosyası var. Componentler için bu dosyalara test yazıp çalıştırabilirsiniz.

android klasörü Android platformu için gerekli native araçların tanımlandığı ve keystore tanımlamalarının yapılacağı klasör.

ios klasörü Ios platformu için gerekli native araçların tanımlandığı klasör.

index.android.js ve index.ios.js dosyaları uygulamanın çalıştırıldığı platforma göre kullanılacak olan dosyalar.

node_modules npm üzerinden indirilen paketlerin bulunduğu klasör.

package.json gerekli paketlerin tutulduğu dosya.

yarn.lock dosyası yakın zamanda bir grup Facebook geliştiricisi tarafından duyurulan javascript için geliştirilmiş yarn paket yönetim sisteminin oluşturduğu dosya. Paket indirme,güncelleme ve silme durumlarında değişerek mevcut paketlerin versiyonlarını saklar.

Sisteminize yarn kurulumunu yapmak için https://yarnpkg.com/en/docs/install adresini ziyaret edebilirsiniz.

⌘+m ile geliştirme ayarlarını açabilirsiniz. Enable Hot Reloading butonuna tıklarsanız dosyalarda yaptığınız kod değişikliği simülatöre direkt yansır.

~Ios için geliştirme ortamını çalıştırma

Uygulamayı aşağıdaki komut ile çalıştırabilir yada uygulamanın bulunduğu klasörde ios/demoproject.xcodeproj dosyasına tıklayarak Xcode u açabilir ve Run butonuna tıklayarak uygulamayı simülatör üzerinde çalıştırabilisiniz.

react-native run-ios

~Android için geliştirme ortamını çalıştırma

Android simülatör için android avd ile bir cihaz oluşturabilir yada genymotion kullanabilirsiniz. Kullandığınız sistem performansına bağlı olarak android avd iyi performans vermeyebilir. Genymotion ile simülatörden daha iyi performans alabilirsiniz.

react-native run-android

run-ios ve run-android komutları paket servisini başlatır ve uygulama kodları localhost:8081 adresi üzerinden alır. Aşağıdaki gibi bir hata almanız durumunda servis başlatılmamış yada hata vermiş olabilir. Servisi aşağıdaki komut ile başlatıp Reload JS butonuna tıklayarak hatayı düzeltebilirsiniz.

react-native start

Sonraki yazıda görüşmek üzere.