VS Code İle React Native - Kurulum

Öncelerinde Android için Java – Kotlin ve iOS için Objective-C - Swift ile mobil yazılım geliştirirken son yıllarda bir işi bir kez yapmak başlığı altında çıkılan bu yolda yeni teknolojiler, yeni yapılar ve yeni yaklaşımlar karşımıza çıkmaktadır.

React Native, Ionic, Xamarin gibi cross platform mobil uygulama geliştirme dillerinden sonra aramıza katılan ve adından çokça sık söz ettiren bir programlama dili haline geldi. Günümüzde ise 2018 yılı itibariyle Google tarafından geliştirilen Flutter ile zorlu bir mücadele geçirmektedir.

React Native Nedir?

React Native için kısaca 2015 yılında Facebook tarafından üretilen, cross-platform mobil uygulama geliştirme olanağı sağlayan bir frameworktür diyebiliriz.

Cross-Platform: Tek bir dil ile geliştirilen mobil uygulamanın; hem Android, hem iOS, hem Windows vb. ortamında build edilmesine imkan tanıyan frameworklerdir. React Native’de bunlardan biri. Kendine özgü bir mobil uygulama uzantısı yok, uygulamayı geliştiriyorsunuz ve Android için .apk, iOS için .ipa uzantılarını alıyorsunuz. Android ortamına uygulama geliştirirken karşılaşacağınız hatalar Java hataları, iOS ortamına uygulama geliştirirken karşılaşacağınız hatalar Objective-C hataları. Ama kodlarken kullanacağınız dil React.

Neden React Native?

•      Facebook gibi büyük bir destekçisi var, altyapı geliştirmeleri yapıyor.

•      Uygulama geliştirme süresi native uygulama geliştirmeye göre kısadır.

•      Açık kaynaktır, bileşen tabanlıdır, herkes tarafından paket geliştirilebilir.

Native Nedir?

Native uygulama yazılırken platformun sağladığı dil ve IDE ile geliştirme yapılabiliniyor. Navite iOS yazacak iseniz, Apple tarafından sunulan Swift veya Objective C dillerini kullanmanız ve IDE olarak da Xcode kullanmanız gerekiyor. Ancak Native Adrodid uygulama yazacak iseniz de, Google tarafından sunulan Kotlin veya Java dillerinde yazmanız ve IDE olarak da Android Studio kullanılması gerekiyor

Nasıl Çalışır?

Kendine has bir dil formatı (JSX) olan React Native bizlere tek bir dil üzerinden kodlama yapabilme ve geliştirilen uygulamanın bir çok platformda çalışma olanağını sunuyor dedik. Geliştiricilere bu desteği sağlayan React Native, cihaz ile arayüz arasında bir köprü görevi görerek geliştirilen mobil uygulamaların sorunsuzca çalışmasını sağlıyor. Siz geliştirme ortamında bir bileşen tanımlıyorsunuz (örneğin; <Text>) ve React Native ilgili ortamda o bileşenin karşılığı ne ise (Android’de TextView, iOS’da UIView) sizin yerinize oluşturuyor. Bunun için de yazılan React (yani Javascript) kodlarını native dile (Java, Objective-C .. vs) çevirirken “babel” adı verilen bir yapı devreye giriyor.

Kurulum

React Native kurulumdan başlayarak, örnek uygulamalara kadar destek verdiği bir web sitesi bulunmaktadır.

Ayrıca bilgisayarınıza kurmanız gereken uygulamalar ve paketler:

1- NodeJs

2- Visual Studio Code

3- Mac için Xcode ve Android Studio.

4- Linux ve Windows için Android Studio

Android Studio yapılandırması ile ilgili ortam değişkeni ekle ve emülatör ekleme için Flutter derslerimi inceleyebilirsiniz.

ANDROID_HOME Ortam Değişkenini Ekleme

https://codeks.org/makaleDetay/android-home-ortam-degiskenini-ekleme/13

Android Studio'da AVD Manager İle Emülatör ( Sanal Mobil Cihaz ) Ekleme

https://codeks.org/makaleDetay/android-studioda-avd-manager-ile-emulator-sanal-mobil-cihaz-ekleme/18

Sanallaştırma Sorunu ve Çözümü

https://codeks.org/makaleDetay/sanallastirma-sorunu-ve-cozumu/15

Kurulum tamamlandıktan sonra uygulama oluşturma ve çalıştırma işlemini iki şekilde gerçekleştiriyoruz.

1. Yöntem

Npm üzerinden VS Code terminalden

react-native CLI komut arayüzünü aşağıdaki kod ile indirelim.

npm -g install react-native-cli

Uygulama oluşturma;

create-react-project mywebapp

cd mywebapp

veya

react-native init mymobileapp

cd mymobileapp

Uygulama çalıştırma;

Web uygulaması için

npm start

Mobile uygulama için

Android için:

react-native run-android

IOS için:

react-native run-ios

2. Yöntem

React Native artık 0.60 versiyonundan sonra Node paketleri içerisinde default olarak gelmekte. Bu sebepten ötürü artık “react-native-cli”ye ihtiyaç duymadan “npx” kullanarak proje oluşturabiliyor, react-native komutlarını girebiliyoruz.

Uygulama oluşturma;

Web uygulaması için

npx create-react-project mywebapp

cd mywebapp

Mobile uygulama için

npx react-native init mymobileapp

cd mymobileapp

Uygulama çalıştırma;

Web uygulaması için

npm start

Mobile uygulama için

Android için:

npx react-native run-android

IOS için:

npx react-native run-ios