React Native Kurulumu
Herkese merhabalar;
Bu yazımızda react native kurulumunu yapmaya çalışacağız.
React Native için Choco ve Jdk Kurulumu
İlk adımda choco indirelim buraya tıklayarak choco’nun resmi sitesinde kurulumu yapabilirsiniz.Choco indirmek için windows’da powershell yönetici olarak çalıştırın ve aşağıdaki kodu çalıştırın.
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString(‘https://chocolatey.org/install.ps1‘))
2. Adımda buraya tıklayarak choco yardımı ile node.js ve jdk kurulumunu yapalım.
choco install -y nodejs.install openjdk8
Android Studio Kurulumu
3.Adımda Android studio indireceğiz onuda buraya tıklayarak indirebilirsiniz.Android studio’yu sadece sdk için indiriceğiz.Çalışmalarımızı vs code üzerinden yapıcağız.
Yukarıdaki görsel android studionun ilk başladığında karşımıza çıkan menüdür.Buradan configure kısmına gelelim ve Sdk Manager kısmına tıklayalım.Benim şahsi ayarlarım aşağıdaki görselde yer alıyor.
Sdk Tools için yaptığım konfigürasyonları da aşağıya bırakıyorum.
Şimdi bu kısımdan sonra windows kullanıcılar için environment variables kısmında path tamamlamamız lazım.
Buradan ANDROİD_HOME isimli bir environment değişkeni tanımlıcağız ve path olarak android studio’nun sdkları indirdiği yeri vericeğiz.
Daha sonra vs code’de çalışmak için System Variables ⇒ Path kısmına aşağıdaki görselde select olarak gösterilen emulator path’ini vericeğiz.Bunu vs code çalışanlar yapsın android studio için gerek yok.
Daha sonra Avd Manager kısmından kullanacağımız cihazları yükleyelim aşağıdaki görselde pixel3a isimli cihaz indirilmiştir.
Şimdi vs code geçelim ve basit bir uygulama oluşturup emulator ümüzde görelim.
Vs Code ile React Şahlanısı
Şimdi ben burada iki adet emulator vm ‘si kullanıyorum.Birisi android studio’nun vm’leri diğeride genymotion ikisini de çalışabilirsiniz.Ben genymotion seviyorum daha hızlı.
Vs Code Eklentileri
Genymotion için aşağıdaki görselde gerekli ayarlamaları yapın.Birincisi genymotion un localdeki path’i ikincisi ise virtualbox için localde yer alan path
Bu iki eklentiyi baştan vs code kuralım.Android ios Emulator için bazı ayarlar yapıcağız.Görselde yer alan setting ikonuna tıklayın.Search kısmına emulator yazın ve aşağıdaki görselde yer alan ayarlamaları yapın.
Şimdi react native için cli indircez.Bunun için node.js bilgisayarınızda kurulu olması gerekiyor.
Npm install -g react-native-cli
daha sonra react-native init AppName kodunu çalıştırarak uygulamamızın oluşmasını bekleyelim.Aşağıdaki görseli inceleyiniz.
Genymotion Ayarları
Şimdi genymotion ayarlarına geçelim.
Bu adımda genymotion ayarlarından android studio kısmında indirdiğimiz sdk’nın yolunu vereceğiz.
Herşey tamam ise vs code tarafında oluşturduğumuz uygulamaya dönelim.Burada vs code indirdiğimiz eklentiler sonucu bize bir icon getirecek.
Telefon iconuna basalım ve karşımıza aşağıdaki gibi bir menü açılcak.
Burada 2. Cold boot seçeneğine tıklarsak;
Yukarıdaki gibi cihazlarımız gelicek.Herhangi bir cihazını çalıştırın ve ardından terminale npm start diyerek anlık olarak emulatorde uygulamanızı kaldırabilirsiniz.
Genymotion ise;
Ctrl+ Shift + P tuşuna bastığınızda açılır menüye genymotion yazdığınızda ;
Genymotion üzerindeki cihazlarınız karşınıza çıkar.
Buradan cihazını seçin ve react uygulamasını çalıştırın.
Son
Umarım faydalı bir yazı olmuştur.Herkese iyi çalışmalar.