İçeriğe geç

React Native Projeye Başlarken

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)

3- Mac için Xcode ve Android Studio.

4- Linux ve Windows için Android Studio

5- Npm üzerinden react-native CLI

“yarn” paket yükleyici ile çalışılmasını tavsiye ederim.

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.

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.

Üstteki komut ile daha önce başlatılmış ancak kapatılmamış proje var ise onu sonlandırmak için kullanılıyor.

Projemiz başlatıldı artık sanal cihazlarda çalıştırmaya uygun.

Tarih:React Native

İlk Yorumu Siz Yapın

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir