Ortam Kurulumları
Öncelikle aşağıdaki uygulamaları ve paketleri yüklemeniz gerekmektedir. Bu kurulumlar, işletim sisteminize göre farklılık göstermektedir.
1-NodeJs
2- Brew
Alttaki kod parçacığını bir Terminal penceresine yapıştırın.(MacOs/Linux)
1 |
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)" |
3- Mac için Xcode ve Android Studio.
4- Linux ve Windows için Android Studio
5- Npm üzerinden react-native CLI
1 |
npm install -g react-native-cli |
“yarn” paket yükleyici ile çalışılmasını tavsiye ederim.
1 |
brew install yarn |
Bunların yanında güçlü bir IDE olan Visual Studio Code ‘ u kullanmanızı öneririm.
Önerdiğim eklentiler:
react-native-snippet // react native kodlarının otomatik tamamlanması için
material-icon-theme // dosya dizinini daha anlaşılır kılmak için
color-highlight // renk kodlarını görsel olarak kod üzerinde görmek için
React Native ile mobil uygulama başlatma
Evet örnek bir uygulama ile React Native’ e giriş yapalım. Öncelikle boş bir klasör ekleyerek projemizi oluşturalım.
1 |
react-native init {ProjectName} |
Bu komutu çalıştırdığınız dizinde, verdiğiniz proje adı ile bir klasör oluşturulacak.
Proje dizinine ilk baktığımızda bizi aşağıdaki dosya/dizinler karşılıyor:
-
tests: Facebook’un JavaScript test aracı olan Jest ile test edilecek ilgili bileşenler bu kısımda yer alıyor.
-
android/ios: Sırasıyla Android ve iOS platformları için ayrı ayrı proje dosyaları burada tutuluyor.
-
node_modules: Projenin bağımlı olduğu ilgili npm paketlerini barındırıyor.
-
.buckconfig: Facebook’un Buck isimli build sistemi ile ilgili yapılandırma dosyası olan .buckconfig, Android uygulaması için build sürümü ve maven repo url’ini barındırıyor.
-
.flowconfig: Yine Facebook’un Flow isimli statik tip konrolcüsü ile ilgili yapılandırma dosyası olan .flowconfig, React Native projesi ile ilgili çeşitli yapılandırma ayarlarını içeriyor.
-
.gitattributes/.gitignore: Git versiyon kontrol sistemi ile ilgili yapılandırma dosyaları.
-
.watchmanconfig: Facebook’un Watchman isimli dosya izleme aracı ile ilgili yapılandırma ayarlarını tutar.
-
App.js: Örnek bir React Native uygulama dosyasıdır.
-
app.json: Uygulama ile ilgili manifest dosyasıdır.
-
index.js: Uygulamanın başlangıç noktasıdır diyebiliriz. İlgili bileşenler ve başlangıç bileşeni burada belirtilir.
-
package.json: proje ile ilgili bağımlılıkların npm’e belirtildiği yapılandırma dosyasıdır. Proje adı, versiyonu, lisans bilgisi ve diğer ilgili ayarlar burada tutulur.
Uygulama dosyası App.js olarak yer alıyor. React Native de temelinde bir React projesi olduğu için bu dosyayı da incelediğimizde bir React projesi ile hemen hemen aynı yapıda olduğunu görüyoruz. Tek fark HTML bileşenleri olan <div> ve <p> elemanlarının yerini, Android ve iOS karşılıkları olacak şekilde <View> ve <Text> bileşenleri almakta. Bu bileşenlerin kullanımının da React projesi ile hemen hemen aynı şekilde bulunuyor.
Projemizi başlatmak için şu 2 komut işimizi görecektir.
1 |
watchman watch-del-all |
Üstteki komut ile daha önce başlatılmış ancak kapatılmamış proje var ise onu sonlandırmak için kullanılıyor.
1 |
react-native start --reset-cache |
Projemiz başlatıldı artık sanal cihazlarda çalıştırmaya uygun.
İlk Yorumu Siz Yapın