20 Ağustos 2020

React-Native 5 – Proje Kurulumu

ile Turan Yunus

Herkese Selam,

React-Native ile bir kaç bir şeye değindikten sonra proje kurulumu için kolları sıvayalım.

İlk olarak projemizi aşağıdaki kod ile oluşturalım.

npx react-native init LearnReactNative

Projeyi yükledikten sonra beni karşılayan dosya yapısı

Genellikle ugraştıgımız klasörleri anlattım. Diğer dosyalarada işimiz düşerse anlatırım ama şu anlık kafa karışıklığına gerek yok.

android : Native Android tarafındaki değişikliklerimiz burada mevcuttur

iOS : Native iOS tarafındaki değişikliklerimiz burada mevcuttur

node_modules : Projemizin npm paketlerinin tutulduğu alandır.

package.json – package-lock.json : Uygulamanının npm paketlerinin yönetildiği ve uygulama içinde kullanılan paketlerle ilgili bilgileri barındırır. Uygulamaya dahil ettiğimiz tüm paketlerin bilgisi bu alanda mevcuttur. React Native javascript kodları da node_modules altında yer almaktadır ve javascript kodlarının çalıştırılması sırasında buradan okunmaktadır.

.flowconfig :  bu dosya facebook tarafından geliştirilen statik kod analiz aracı olan Flow için ayar dosyasıdır.

watchmanconfig : Projemizin javascript kısımındaki kodlardaki değişimleri dinleyip değişiklikleri yüklemelerini sağlayan watchman uygulamasına ait konfigürasyon dosyasıdır.

App.js – index.js :  React Native uygulaması her uygulamada olduğu gibi önceden belirlenmiş bir noktadan başlar. React-Native ise index.js içinde başlayıp App.js’i import etmiştir. Bizim işlemlerimiz genellikle App.js tarafında yürüyecektir.

index.js

Aşağıdaki app.js ile ilgili görüntüde uygulamayı ilk indirdiğimizde içinde var olan bir kod onun için ilk halini attım. Sonradan tamamen silip kendi kodlarımızla app.js’i şekillendireceğiz. 

App.js

Bu yazımı burada bitiyorum bundan sonraki yazılarımda güzel bir proje çıkaracağız.