Hali hazırda React.js kullanıyorsunuz ve mobil uygulama geliştirmeye merakınız var veya hem Android hem de İOS cihazlar için mobile uygulamalar geliştirmek mi istiyorsunuz, işte React Native tam size göre ama önce nasıl kurulur bunu öğrenmemiz gerekli.
React Native kurulumunu yapmadan önce eğer İOS geliştirme yapmak istiyorsanız sadece macOS üzerinde çalıştırabilirsiniz ancak korkmaya gerek yok online emulatörler yanımızda. Kurulum için temel araçlar aynı olsa da her işletim sisteminde farklılık gösterebiliyor.
Geliştirme Araçları
- NodeJS
- Java (Android)
- XCode (İOS)
- Python (Windows)
- React Native Cli
- Android Studio
- Android SDK
Windows bir makinede çalıştığımdan dolayı Windows üzerinde kurulumu gerçekleştireceğiz.
1. Geliştirme Araçları Kurulumu
NodeJS
https://nodejs.org/en/#download adresini kullanarak son sürümü yüklüyoruz.
Java
React Native resmi sayfası jdk8 öneriyor. Bu yüzden http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html adresinden jdk8 sürümünü kuruyoruz.
Python
Windows üzerinde kullanım için React Native resmi sayfası Python2 öneriyor. Bu yüzden https://www.python.org/downloads/ adresinden Python2 veya en son sürümü yükleyebilirsiniz.
React Native Cli
React Native projelerimizi oluşturmak ve çalıştırmak için konsolu kullanacağız. Global bir şekilde Npm’e kurulumu aşağıdaki komutla gerçekleştiriyoruz.
npm install -g react-native-cli
Android Studio
https://developer.android.com/studio/install.html adresinden Android Studio kurulumunu gerçekleştiriyoruz.
2. Android SDK Kurulumu
Android SDK kurulumu eğer Android Studio ile birlikte yapılmadıysa veya güncel sürüm değilse en güncel sürümü yüklememiz gerekiyor.
File → Settings
Appearance and Behavior → System
Settings → Android SDK
yolunu izleyerek sdk kurulumu gerçekleştirebiliriz.

3. Ortam Değişkenlerine Ekleme
React Native araçları, uygulamaları yerel kodla oluşturmak için bazı ortam değişkenlerinin ayarlanmasını gerektiriyor.
Windows Denetim Masasında Sistem ve Güvenlik altındaki Sistem bölmesini açın , ardından Ayarları değiştir seçeneğine tıklayın. Gelişmiş sekmesini ve tıklayın ortam değişkenleri sekmesine tıklayın. Android SDK’nızın yolunu gösteren yeni bir kullanıcı değişkeni oluşturmak için Yeni seçeneğini tıklayın.

4. Android Emülatörü Kullanma
Android uygulamalarınızı emülatör olmadan kendi cihazınızda da geliştirebilirsiniz ancak farklı cihazlarda denemek istiyorsanız kullanmanızı öneririz. Eğer amd işlemci kullanıyorsanız https://android-developers.googleblog.com/2018/07/android-emulator-amd-processor-hyper-v.html adresinden detaylı kurulumu yapabilirsiniz veya farklı bir emülatör deneyebilirsiniz. Genymotion bireysel kullanım önerimizdir.
Tools → Android → AVD Manager yolunu izleyerek emülatör yönetim dialogunu açıyoruz.

Create Virtual Device butonuna tıkıyoruz ve kurmak istediğimiz cihazı seçiyoruz. Eğer kurulum tamamlandıysa sağ tarafta bulunan Actions sekmesinin altındaki yeşil butona tıklıyoruz.

5. Yeni Proje Oluşturulması
Her şey yolundaysa React Native projemizi oluşturmaya başlıyoruz. Komut istemini kullanarak projeyi oluşturmak istediğimiz dizine gidiyoruz ve aşağıdaki komutu çalıştırıyoruz.
react-native init codeninja

Ve son adıma geldik artık projemizi çalıştırabiliriz.
C:\>cd codeninja C:\>react-native run-android
Bu adımda proje native olarak derlenencek, bir apk oluşturacak ve emülatörümüze kurulumu yapılacaktır. Eğer daha önce yaptığımız ayarlarda bir sorun yoksa emülatör ekranı ve çıktı şu şekilde olacaktır.

React Native ile ilk uygulamanızı oluşturmuş oldunuz. Artık bir Cross Platform mobil geliştiricisiniz tebrikler 🙂
Bonus ( React 2020 Video Tutorial Serisi )
Kurulum işlemlerimiz bittiğine göre artık React Native serüvenine başlayabilirsiniz. React Native React.js ile aynı kod temelini paylaştığı için bu seriden de React.js bilginizi geliştirip, sektöre uygun temiz kodlama yapabilirsiniz 🙂
Bir sonraki yazımda React Native UI Component Kütüphanelerini incelemeye çalışacağım.
Bir sonraki yazıda görüşmek üzere, gününüz güzel dileğiyle 😀
Eline sağlık onur. Çok faydalı bir yazı olmuş.Devamını bekliyoruz
Aramıza hoşgeldin, ellerine sağlık 🙂