React Native Proje Bileşenleri
Önceki yazılarımızda React Native’in ne olduğunu ve nasıl kurulduğunu detaylıca anlatmıştık. Şimdi ise bir React Native projesini daha iyi anlamak ve yönetebilmek için temel proje bileşenleri ve proje dizininde yer alan dosyalar nelerdir, ne işe yararlar onu anlatalım.
Uzun bir yazı olacak, fakat bitirdiğinizde bir React Native projesinin yapısını kavramış olacaksınız. Hazırsanız başlayalım! 🏃♂️🏃♀️🏃♂️🏃♀️
Bir React Native projesi nelerden oluşur?
Bu sorunun cevabını hiç uzatmadan örnek bir proje dizinini inceleyerek verelim.
“testPROJECT” adında oluşturduğumuz projemizin dizini görseldeki gibi. Bu dizinde projemizin sağlıklı çalışmasını sağlayan config, json ve diğer formatlarda dosyalar mevcut. Dizinde bir çok dosya var fakat bizim dikkat etmemiz ve üzerinde durmamız gereken, yazıda da inceleyeceğimiz ana üç başlık; android, ios ve node_modules. Sırasıyla bunları inceleyelim.
android
Şekilde görülen dizinimiz temel anlamda bir Android projesi dizini. React Native’den bahsettiğimiz yazımızda ilgili framework’ün kendine has bir uygulama uzantı formatı olmadığını ve yazdığımız komutları Android ve iOS formatına çevirdiğini söylemiştik. İşte bu operasyonları gerçekleştirmek için gerekli platform dizinlerinden “android”, şekildeki gibi.
Sırasıyla inceleyecek olursak; android>app dizinimiz Android uygulamamızın kendine has kaynak dosyalarını içerir. “app” dizini dışındaki Android dosyaları ise Android tarafının genel yönetim (config, build, gradle vs.) dosyalarını barındırır. Bu dizinde bir çok dosya ve dizin mevcut fakat biz bizim için önemli olanlarını inceleyelim.
android>app>build uygulamamızı derlediğimiz (debug) ve çıktı aldığımız (release) dosyalarını barındırır. Aldığımız çıktılar bu dizindeki output klasöründe saklanır. Bu klasörde alınan çıktıların kaydını tuttuğu “log” ve çıktı dosyalarını sakladığı “apk” klasörleri bulunur. React Native yeni versiyonu ile .apk (Android application PacKage) yerine .aab (Android Application Bundle) formatını getirmiş durumda. Bu format önceki versiyona (apk) kıyasla daha dinamik bir uygulama sistemi sunuyor. Çok detaya inip yazıyı şişirmek istemiyorum, merak edenler için buraya link bırakayım.
android>app>src>main>java… dizininde ise bizi en çok ilgilendiren MainActivity.java ve MainApplication.java dosyaları. Bu dosyalar Android tarafında gerçekleşecek işlemlerin belirtildiği dosyalardır. MainActivity.java dosyası adından da anlaşılacağı gibi temel uygulama işlemlerini (uygulamanın ismini belirtme gibi), MainApplication.java dosyası da uygulamaya React tarafından yüklenen kütüphanelerin Android tarafına bildirildiği ve bağlandığı dosyadır. React Native’in 0.60 sürümünden önce yüklenen herhangi bir npm paketinin Android tarafınca “tanınması” için linkleme işlemi (react-native link paketAdı) yapmak gerekiyordu. Bu işlem bahsedilen java dosyalarına kullanılacak kütüphanelerin bağlanması anlamına gelmekte. Bazı paketler linkleme komutuyla bağlantıları sağlarken, bazı paketler manuel olarak linkleme ihtiyacı gerektiriyor. Manuel durumlarda bu java dosyalarına (çoğunlukla MainApplication.java) müdahale ederek gerekli kütüphanenin çağırılması ve uygulamya dahil edilmesi gibi işlemleri gerçekleştiriyoruz. Daha doğrusu gerçekleştiriyorduk. Ne mutlu ki React’ın yeni sürümündeki autolinking sayesinde bu işlem otomatik olarak gerçekleştiriliyor ve sadece paketi yükleyip keyfimize bakıyoruz ☕
android>app>src>main>res dizini ve altındaki hdpi klasörleri, uygulamamızın splash screen ve logo arayüzlerinin bulunduğu bölümdür. Uygulamamıza logo tasarladığımızda ya da splash screen eklemek istediğimizde bu dizin üzerinden aktiviteleri gerçekleştiriyoruz. Ayrıca hdpi klasörlerinin önündeki “xxx” terimleri eklediğiniz splash screen ve logoların cihazlara göre otomatik olarak boyutlandırılmasını sağlamakta.
android>app>src>main dizinimizde bulunan AndroidManifest.xml dosyamız Android cihazlarının uygulamamızı tanımasında kullanılan dosyadır. Bu dosyada uygulamamız hakkındaki temel bilgiler, talep edilen izinler vb. işlemler bulunur. Misal, herhangi bir Android uygulaması bir cihazın internet bağlantısını kullanmak isterse bu xml dosyasında;
<uses-permission android:name=”android.permission.INTERNET” />
eğer kamerayı kullanmak isterse;
<uses-permission android:name=”android.permission.CAMERA” />
gibi satırları bulundurur. (Evet, tahmin edebileceğiniz gibi Play Store’dan bir uygulama indirdiğinizde “… uygulaması kameranıza erişmek istiyor” uyarısı buradan geliyor) Bu ve bunun gibi bilgiler bu dosyada saklanır ve uygulama bir Android cihazında çalışacağı zaman bu bilgiler okunarak işlemler gerçekleştirilir.
android>app>build.gradle dosyası projemizin kök mimari bilgilerini içerir. Projemiz Android mimarisi üzerinde React aracılığıyla çalışacağı için bu iki yapı arasında kurulacak bağlantıları ve kaynak mimari bilgileri bu dosyada saklanır. Örnek vermek gerekirse;
React Native’in önceki sürümlerinde geliştirilen projeler, cihazlar üzerinde JavaScriptCore(JSCore) motoru aracılığıyla derleniyordu. JSCore, geliştirilen React Native uygulamalarının ilgili platformda derlenmesine olanak sağlayan bir motor. Fakat framework’ümüzün 0.60 sürümü ile aramıza “Hermes” motoru katıldı. Hermes Facebook tarafından geliştirilen, şimdilik sadece Android platformuna yönelik, JSCore gibi açık kaynaklı bir motor ve ondan iki kat daha hızlı. Eğer biz uygulamamızda Hermes motorunu kullanmak istersek bahsettiğimiz build.gradle dosyasında enableHermes:true değişikliğini yapmamız yeterli. Bu tarzda kaynak değişiklikler bu dosyamız üzerinden gerçekleştiriliyor.
android>build.gradle dosyası ise android tarafının daha kapsamlı, genel bilgilerin tutulduğu kısımdır. Uygulamamızın destekleneceği SDK versiyonları ve kullanacağı bağımlılıklar gibi bilgiler burada tutulur.
Bu arada “gradle” bir geliştirme sistemi. Java bazında scriptler yazılabilmesine olanak sağlayan ve bunları uygulamaya dahil eden bir yapı. Bilginiz olsun.
ios
Tıpkı Android tarafında olduğu gibi iOS tarafı için de kaynak kodlarımız ios klasöründe tutulmakta. iOS bölümünde genel olarak projeler xCode kullanılarak derlendiği için proje dizininde sadece kök dosyalar bulunmakta.
Şahsen iOS tarafında detaylıca derleme ve geliştirme fırsatım olmadığı için detaya inemeyeceğim. Test edebildiğim zaman yazının bu kısmını sizler için güncelleyeceğim ✌
node_modules & package.json / package-lock.json
Ve geldik en önemli kısıma. node_modules bölümü projemizin beyni ve kalbi diyebiliriz. Çünkü bu klasör içerisinde kullandığımız kütüphaneler yer alıyor. Hatta framework’ümüz “react” ve “react-native” bile burada bulunmakta. Daha önce nodeJS ile çalışmamışsanız doğal olarak bu yapının React ile geldiğini düşünebilirsiniz. Fakat tam tersi, React bu yapı sayesinde geliyor.
İyi dinleyin.
Bir React Native projesi oluşturduğunuzda temel olarak React, React Native ve bunlara bağlı paketlerin içinde bulunduğu bir nodeJS projesi oluşturmuş olursunuz. Android ya da iOS üzerinde derleme gerçekleştirdiğinizde React aracılığıyla nodeJS server üzerinde ilgili paketleri çalıştırırsınız. Projeye herhangi bir paket yüklediğinizde ilgili paket node_modules klasöründe saklanır ve o paketi proje içerisinde bir nodeJS modülü olarak kullanırsınız. Yani çalıştığımız ortam temel olarak bir nodeJS projesidir ve bu projenin kaynak kütüphaneleri node_modules klasöründe saklanmaktadır. React yapısı bu projenin üzerine kurulmaktadır.
Projemizde kullanılan paketlerin neler olduğunu, hangi sürümde olduklarını ve projemizin bilgilerini (ismi, versiyonu vs..) bize bildiren dosya ise package.json dosyasıdır.
Projemizin içerisinde şu anda temel olarak “react” ve “react-native” paketleri bulunmakta. Eğer biz npm üzerinden herhangi bir paket indirirsek bu paket “dependencies” başlığı altında ilgili paket adı ve sürümü ile yer alır. Örneğin “react-native-axios” paketini projemize kurarsak;
npm install react-native-axios
Yüklediğimiz paket ile package.json dosyamız bu şekilde güncellenmiş olur.
package.json dışında bu isme benzer diğer bir dosyamız package-lock.json
package.json projemiz ile alakalı minimum seviyede bilgileri içerir. Temel kütüphanelerin ve temel paketlerin bilgilerini barındırır.
package-lock.json dosyası ise node_modules’ün altında bulunan (bulunması gereken) tüm paketlerin (mevcut sürümlerini hafızasında kilitleyerek) bilgilerini saklar. Bu sayede projemize gerekli paketler bu dosya üzerinden okunarak doğru sürümleriyle indirilebilir. Biz bir React Native projesi oluşturduğumuzda gerekli tüm paketler indirilip yüklendiği zaman bu dosyaya mevcut sürümleri ile saklanır. Yeni bir paket yüklediğimizde de o paketi kaldırmadığımız sürece package ve package-lock dosyalarında saklanacaktır. Doğal olarak bu dosya verdiğimiz örnekteki axios paketini de hafızasına alır.
Eğer siz de şu an bir test projesi açtıysanız proje dizinine gidip node_modules klasörünü silin. Projeyi çalıştırmak istediğinizde alacağınız uyarı şu olacaktır;
Demin bahsettiğimiz gibi, projemiz temel anlamıyla bir nodeJS projesi ve ana modülleri bulamadığı için bizden yüklememizi talep ediyor. npm install dersek package-lock.json dizininde belirtilen bütün paketleri ilgili sürümleri ile yükleyerek node_modules klasörünü oluşturacaktır. Bu işlemden sonra projemiz tekrardan derlenebilir durumda olur.
Projemiz, temelinde nodeJS yapısı olsa da bir React Native framework’ü projesi ve elbette saf bir nodeJS projesinden oldukça farklı. Bu başlığın üzerinde özellikle durmamın sebebi projemizin nasıl ve ne olarak çalıştığını anlayabilmemiz. Çünkü yeri geldiğinde kullandığımız paketleri kaynak kodlarına inerek değiştirmemiz (override) etmemiz gerekebilir. Bu manada paket kullanımının ne olduğunu bilmemiz iyi olacaktır.
index.js & App.js
Biliyorsunuz ki projemizi derlemek istediğimizde “react-native run-…..” komutunu giriyoruz. Bu komut proje dizininde “index.js” dosyasının işaret ettiği derleme dosyasını çalıştırır. Genel olarak script bazlı projelerin run komutları index.js dosyalarını hedef alarak derlenir. Projemizin bu dosyasını incelersek;
Dahil edilen ilk modül React Native’in AppRegistry modülü. Bu arkadaş JS formatında yazdığımız kodların, hedef platformlarda uygulama bazında derlenip çalıştırılma izinlerini sağlar. En altta registerComponent metodu da bu işlemin hangi uygulama için gerçekleştirileceğini belirtir. Bu komut derlendiğinde belirtilen platformda belirtilen uygulama için başvuru gerçekleştirir. Aldığı parametreyi incelersek App adında bir dosyayı dahil ettiğiniz görebiliriz.
App.js dosyası yeni açtığımız bir projenin varsayılan olarak gelen ilk (başlangıç) sayfasıdır. index.js şimdilik bu dosyayı hedef aldığından, App.js dosyası projemizin ana dosyası konumundadır. Bu dosyayı inceleyecek olursak;
Sizde bu dosyanın içeriği daha farklı olabilir, ben çok fazla kafa karıştırmaması açısından olabildiğince yalın bir şekilde düzenledim dosyayı.
Biz ne zaman projeyi derlemek istersek React Native ilk olarak index.js dosyasına gider, çalıştırılacak ilk dosyanın hangisi olduğunu okur ve projeyi o dosya üzerinden derler.
Peki biz App.js dosyasını silip ve kendimizce yeni bir başlangıç dosyası oluşturabilir miyiz?
Zaten öyle yapacağız ! 🕺
Projemize ilk olarak src (source) klasörünü ekleyelim ve içerisine MyApp.js adında bir dosya oluşturalım. Siz Türkçe karakter kullanmadığınız sürece istediğiniz adı verebilirsiniz.
Çok fazla uzatmadan basitçe MyApp dosyamızın içini doldurup index.js dosyasına gidelim.
Biliyorsunuz önceden index.js dosyamız çalıştırılmak üzere “App” dosyasını hedef alıyordu. Şimdi ise biz kendi oluşturduğumuz dosyamızı import ettik ve başlangıç olarak registerComponent’e gönderdik. Projemizi tekrar derlediğimiz zaman kendi oluşturduğumuz dosyamız bize merhaba diyecek!
Böylece projemizi istediğimiz dosyadan dizinden başlatabiliriz.
Sonuç
React Native ile ilgili proje dizini ve bileşenleri hakkında anlatacaklarım şimdilik bu kadar. Artık proje dizinimizde bulunan dosyaların ne işe yaradıklarını, onları ne zaman kullanmamız gerektiğini ve projemizin nasıl bir yapı üzerinde çalıştığını biliyoruz. Böylelikle geliştireceğimiz projelere önceye nazaran daha fazla hakim olabileceğiz! 💪
Uzun bir yazı oldu fakat umarım sizler için de faydalı bir yazı olmuştur. Başka konuları da bu yazıya dahil etmek istiyordum fakat kafaları çok şişirip, karıştırmadan, yazıyı da daha fazla uzatmadan tek bir başlığa odaklanmak istedim.
Esen kalın dostlar, sevgilerle! (deranzo!) 👍
The significant problems we face cannot be solved by the same level of thinking that created them.
- Albert Einstein
