Series for React Architecture

React Örnek Proje Mimarisi — 1 (Project Structure)

React Sadece View yani (Presentation) kısmından sorumlu ise, MVC yapılardaki Controller ve Model işlevleri React Projelerinde Nasıl Gerçekleşiyor ?

Onur Dayıbaşı

Published in

Frontend Development With JS

5 min readNov 19, 2020

Bir önceki yazımda React UI Mekaniklerinde aşağıdaki konuyu anlatmıştım.

React Sanal DOM Ağacında, Uzak Bileşenleri Redux üzerinden Nasıl Konuştururuz ?

Ama bu konuyu anlatırken Redux örneklerinde Neden Bileşenleri(Component) , Container sarmaladığını ve Bileşenlerin Redux ile konuşması sırasında Container arada Proxy görevi gördüğünü anlatmamıştım. Bu yazıda React Örnek Proje mimarisine değinerek burada Container kullanırken neyi hedeflediğimizi anlatmaya çalışacağım.

1. Örnek Bir React Projesinin Mantıksal Bileşenleri

Peki biz ilk React UI Mechanics React Geliştirme Ortamının oluşturulmasını anlatırken bu yapılar oluşmuyor mu ? Yani aşağıdaki komutla

npx create-react-app react-setup

React ile büyük ve orta ölçekli projeler için ihtiyaç duyduğumuz diğer mantıksal yapılar oluşmuyor. Çünkü React bir View katmanı bu işlevi başarılı bir şekilde gerçekleştiriyor .Çevresinde oluşan ekosistem ile bu View yapısına Ek Mantıksal yapılarak ekleyerek Proje ortamımızı oluşturmak gerekiyor. Yukarda bahsettiğim kısımları mantıksal soyutlama aynı zamanda bir klasör yapısı olarak düşünebilirsiniz.

App: Application Main ve Routing’e Göre İlgili Fragment Renderlemekten sorumlu gerçekleştirimleri modülleri tutan klasör

Utils: Her türlü klasörden erişilebilecek, state tutmayan, yardımcı fonksiyonlar Örn Websocket, Fetch, vb String, Object, Array …

Store: Redux Store (reducers, actions, constants). Bu konuyu Flux Mimarisinde Deetaylı Olarak anlatmıştım.

History: Tarayıcıda sayfalar arası geçerken veya uygulama içerisindeki sayfalar arasında gezinmelerdeki tarihçeyi tutar ve buna ileri/geri komuları ile erişebilmenizi sağlar.

View : React UI bileşenleri. Amacı ekrana UI elemanları çizdirip, kullanıcıdan gelen etkileşimleri yakalamak

Container: Component Wrapper , tüm Router, Store, Utils bağlantı logic tutup bileşene bu bağlantıları çağırabilmesi için API sunar.

2. Bu Mimari Yapı Nasıl Çalışacak ?

Önceki Yazılım Mimari Nedir ? yazımın 3 ve 4 kısmında bahsettiğim gibi Mimarinin yapısal ve davranışsal olarak anlatmak lazım ki daha iyi anlaşılsın. Peki Bu React Mimarisi Nasıl bir yapıda ? UI Mechanics yazı serisindeki Foo üzerinden devam edersek . Yukarıdaki bahsettiğim mantıksal bileşenler aşağıdaki şekilde iletişim kurar.

Services: Resimdeki çizimde en altta bulunan Utils, Store (AppState), History (Tarayıcı Tarihçesi) tutulduğunu bir servislerin olduğu React Bileşen, Container, bu yapıları kullandığı veya Observer mantığı ile buralarda olan değişikliklerden tetiklendiğini görebilirsiniz.
View : FooFragment, FooForm, FooTree UI bileşenleri. FooTree FooForm bileşeni FooFragment içerisinde bulunuyor. FooFragment bir Page ve Page daha ufak parçası olabilir Fragment async olarak yüklenmesi sayfalar
Containers: Bişenlerin sadece UI göstermek ve Kullanıcı Etkileşimlerinin alarak business mantıklarını gerçekleştirmesini sağlayarak dış bağımlılık lardan soyutlamayı sağlayan çevreleyici katman. Bu konuyu bu yazımda örnek ile anlatmıştım
App ve Routing : Tüm servisleri(Redux, Router vs..) uygulamanın en başında oluşturup tüm bileşen yapılarına inject eden, Tarayıcıdaki URL göre ilgili Fragment leri veya Sayfayı ve bunun içerisindeki bileşenleri çekip Virtual DOM içerisine ekleyip renderlenmesini sağlayan kısımdır.

3. Assembler (index.js)

Bir React projenin index.js kısmına baktığımızda Assembler işlemini gerçekleştirdiğini görürüz.

Sırası ile anlatırsak ;

Libs (Kütüphaneler) : React, ReactDOM, React-Router, , History, React-Redux
Our Codes (Bizim Kodlar): Store yani Uygulamamızın State yöneten kısım ve View bileşenleri
ReactDOM.render iç içe React Redux, Router ve en içtete View(App) bileşenin verildiğini görebilirsiniz. Bu iç içe verme sırasında bazı prop örneğin State ve BrowserHistory

4. Container + Component Yapısı

Bir önceki örnek yazımda DooView,FooView ve SooView için Container oluşturmuştuk

Peki bu bileşenler Redux vs bağlantı kurmayı nasıl gerçekleştiriyor. Bunun biraz arka planını araştıralım.

FooTreeContainer = withRouter(connect(mapStateToProps, mapDispatchToProps)(FooTree));

Yukardaki resimde görüleceği gibi bizim UI Bileşeniniz dış dünya ile haberleşirken

Bileşen Dışarıya Şu Komutları Göndermek İsteyebilir;

Sunucudan Veri çekilmesini isteyebilir (Fetching Data)
Başka bir bileşen göster/gizle vb komutlar göndermek isteyebilir.
History objesi üzerinden URL güncellemek isteyebilir.

Bileşen Dışarıdan Şu Bilgileri Almak İsteyebilir ;

Store herhangi bir şekilde güncellenen State verisi
History objesinde URL değişimler
vb…

Yukarıda görüleceği gibi Bileşenimizi Pure(Saf) UIBileşeni, Test edilebilir, kolayca tekrar kullanabilir olarak geliştirmek istiyorsak bu Container yapısı bizim çok işimize yarar.

Olaylara biraz daha yakından bakalım. FooTreeContainer ve FooTreeComponent bileşenine biraz daha yakından bakalım

Yukarıdaki resimde de görüleceği gibi FooTreeComponent bileşeni sadece React yani View biliyor. Yani bileşenin hiç bir şekilde Redux, Router vs bağlantısı yok Peki ;

Dispatcher üzerinden Action tetiklemeyi
Router ve History Objeleri üzerinden URL erişmeyi ve Güncellemeyi
App State verisine erişmeyi

nasıl sağlıyor ? . Cevabı props ve delegation yöntemi sayesinde. Aslında bu bağlantıları gerçekleştiren Containers ve bu sayede bileşen yapımız çok temiz sadece UI işleri ile uğraşan bir yapıda kalabiliyor.

Tekrar Bir Soru Soralım ?

Containers React-Redux , React-Router bağlantıya nasıl sağladı ?

High Order Components kavramının nasıl çalıştığını ilerleyen konuda detaylı bir şekilde anlatacağım. Ama Fonksiyonel Programlamada High Order Functions hatırlayacağınız gibi

Argümanlarında 1 yada 1 den fazla function referansını parametre olarak alan veya return değerini geriye fonksiyon olarak dönen fonksiyonlara High Order Functions denir.

Kısaca Argümanlarında bir veya birden fazla bileşeni alıp, geriye Bileşen dönen ve bu kapsama sırasında bu bileşenlere ekstra güçler kazandırmayı sağlayan Mekanizmadır diyebiliriz.

5. App + Routing

App Routing aslında çok detaylı bir konu. Burada kısaca bahsedersek. App içerisinde Routing sayfasında hangi URL ona göre eşleştirme işlemleri yapılarak sunucudan bu parçalar async olarak yüklenir ve VDOM içerisine eklenerek bu yeni yüklenen kısmın renderlenmesi sağlanır. Diğer önceki kısımlarda VDOM çıkarılır. Bu sayede SPA (Single Page App) uygulamada sayfa geçişleri tek ekran içerisinde yapılabilir.

6. Store

Store konusunu daha önceden Flux Mimarisi konusunda Redux ile Sync ve Async işlemlerde nasıl gerçekleştireceğini anlatmıştım. (Yazıya bu linkten ulaşılabilir)