React-Native Klasör Yapısı ve Mimari
Herkese merhaba, bu yazıda React-Native klasör yapısı ve mimarisinden bahsedeceğim. React-Native’e yeni başlayanlar için yardımcı olabileceğini düşünüyorum. Gözlemlediğim ve tecrübe ettiğim kadarıyla bu ve benzeri standartlara uygun şekilde kodlamaya alışırsanız sektörde çok daha rahat edeceğinizi söyleyebilirim. Hazırsanız başlayabiliriz :)
Yeni bir React-Native projesi oluşturduğunuzda saf proje dizini aşağıdaki gibi görünecektir.
Bu yapıları kısaca inceleyecek olursak;
“_tests_” klasörü adından anlaşılacağı üzere projemize ait testlerin yer aldığı dizindir. Burada istersek kendi test dosyalarımızı da oluşturabiliriz.
React-Native’in çalışma mantığına çok girmeyeceğim ama bildiğiniz üzere bir React-Native projesi oluşturduğumuz zaman arkaplanda hem android hem de ios için native uygulamalar oluşturulur ve bridge mantığıyla yazdığımız js kodları bu native uygulamalarla asenkron olarak haberleşir. Yani bir React-Native projesinde native bir özellik, kütüphane yazmak istediğimizde bu klasörleri kullanabiliriz, normal bir native uygulama dizin yapısından bir farkı yoktur.
Projeyi derlerken veya projeyi güncellerken belirli paketlere, kütüphanelere ihtiyaç duyulmaktadır. Tüm bu yapılar “node_modules” dizini altında yer almaktadır.
“.buckconfig”, Android uygulaması için build sürümü ve maven repo url’ini barındırmaktadır.
“.eslintrc.js” dil formatını düzgün bir şekilde kullanmamızı, korumamızı sağlayan bir yapıdır. Clean code prensiplerine uymamıza olanak sağlar.
“.flowconfig” bizim projemizdeki veri akışlarını, dosya dizinlerini takip eden bir yapıdır.
“.gitignore” ve “.gitattributes” projemizi github’a yükleyeceğimiz zaman çalışan dosyalardır. İçerisinde, hangi dosya veya dizinlerin yüklenmeyeceği gibi yapılandırmalar yer alır.
“.prettierrc.js” adından da anlaşılacağı üzere kodumuzun daha düzgün bir formatta görünmesini (hizalama, boşlukları ayarlama vb.) sağlayan bir yapıdır.
“.watchmanconfig” projenin development aşamasında yapılan değişikliklerin ekrana anında yansıması için kullanılan watchman plugin’ine ait dosyaları içermektedir.
“Package.json” dosyası sürüm, bağımlılıklar, komut dosyaları vb. gibi projemizle ilgili meta verileri içerir. Bir React-Native projesi oluşturduğumuzda package.json dosyası aşağıdaki gibi görünecektir. Projemize npm veya yarn ile eklediğimiz kütüphaneler “dependencies” altında listelenecektir.
Bu dosya ve klasörler hakkında daha detaylı bilgi için burayı inceleyebilirsiniz. Biz devam edelim :)
Proje dizin yapısı oluşturmak için yaygın olarak kullanılan iki yöntem var bunlar tür bazlı gruplama ve özellik bazlı gruplama olarak adlandırılıyor.
Tür bazlı gruplamada benzer türdeki dosyalar aynı dizinde yer almaktadır (components, styles vb.), özellik bazlı gruplamada ise dosyalar yaptıkları işe göre ayrılmaktadır (bir login ekranı için oluşturulan dizin içerisinde components, styles, actions gibi ilgili dosyaların olması gibi).
Her ne kadar iki farklı yöntemmiş gibi görünse de birini kullanırken diğerini kullanamazsın gibi bir durum söz konusu değil. Ben de bana daha kolay ve kullanışlı geldiği için ikisini harmanlayarak kullanıyorum. Gelin şimdi tek tek klasörlerin içeriğini inceleyelim :)
- src / assets
Bu dizinde, uygulamamızın localinde bulunan görselleri (background, logo vb.) veya svg, png vb. formatta kullandığımız iconları saklayabiliriz.
- src / components
Birden çok view’da kullanabileceğimiz custom componentlerimizi oluşturabiliriz. Bu componentlere ait dosyaları görseldeki gibi tek bir dizin altında toplayabiliriz. “index.js” dosyasında export ettiğimiz componentleri dışarıda herhangi bir yerde components klasörü üzerinden kolayca import ederek kullanabiliriz. Her bir component için tek tek yol tanımlamaktansa bu şekilde bir kullanım clean code açısından oldukça faydalıdır.
- src / config
İsminden de anlaşılacağı üzere bu dizini projemizin yapılandırması olarak görebiliriz. Projede kullanılan statik verileri bu dizinde saklayabiliriz. Kullanılacak renkler, yazı tipleri, url’ler ve çok daha fazlası…
- src / containers
Bu dizin screens olarak da adlandırılabilir, burada uygulamamızın ekranları yer alıyor diyebiliriz. Bu dizin altında ekranlarımızı da kendi içerisinde klasörleyebiliriz. Örneğin “LogIn.js” dosyasında custom componentlerimizi de kullanarak tasarladığımız kullanıcı arayüzümüz yer almakta. “LogInContainer.js” de ise UI ile kullanıcı etkileşimleri sonucu veya arkaplanda gerçekleşmesini istediğimiz fonksiyonları yazabiliriz.
- src / helper
Bu dizin util ve helper sınıflarını içerir. Sık kullanacağımız string formatlama, tarih dönüşümü gibi basit fonksiyonlarımızı bu dizinde tanımlayabiliriz.
- src / routes
Bu dizin, proje içerisindeki tüm yönlendirmelerin tanımlandığı kısımdır.
Bu makalede anlattığım örnek bir projeye de buradan ulaşabilirsiniz. Umarım faydalı bir içerik olmuştur, okuduğunuz için teşekkür ederim görüşmek üzere :)
Yararlandığım Kaynaklar:
