React Native CLI Kurulum

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 😀