Scalability için bir modüler Reaksiyon Yerli Proje Yapısını Nasıl Oluşturun

Neden bir Modüler Reaksiyon Yerli Yapısı Scalability için Temeldir

Bir Reaksiyon Yerlisi uygulaması, sadece temiz kod yazmaktan daha fazlasını gerektirir. Uygulamanız özellikler, takım büyüklüğü ve kullanıcı tabanında büyürken, ilk klasör düzenlemesi, sürekli gelişim hızı için bir şişe veya katalizör olabilir. modüler bir mimari - kodbase'in her yerde bağımsız olarak bölünmüştür, kendi kendine bağlı modüller - denetimli yapı olmadan gelen karmaşıklığı ele alır.

[FONT:0]Bağımsız gelişim[[Dönetici: 1) – Takımlar birbirlerinin tolere adım atmadan ayrı modüllerde çalışabilirler.
[[Düzücüler ve uygulamalarla ilgili olarak kullanılabilirlik[Dönetici:0)[Döneticiler, kancalar ve hizmetler özel yerlerde yaşarlar.
[FONT:0]Isolated testing[[DÜDÜT:1) – Her modülü izolasyonda test edilebilir, regresyonların patlama yarığını azaltılabilir.
[FONT:0] Yeni desenlerin gerçekleştirilmesi[[Dönetici: 1 ) – Tek bir modül yeniden yazılması veya bir modüle dahil olmak, tüm uygulamayı yeniden yazmaktan çok daha az risklidir.
[FONT:0]Clear mental modelleri[Dönetici: 1) Uygulamanın tüm kodbase okumadan önce daha hızlı gemide yeni mühendisler.

Bu makalede, bir üretim destekli proje yapısıyla yürüyeceğiz, her bir dizinin sorumluluğunu açıklayacağız ve Reaksiyon Yerli uygulamanızı birkaç ekranın ötesinde büyütülebilir hale getiren kalıpları tartışacağız.

Bir Modüler Reaksiyon Yerli Mimarisinin Temelleri

klasörün düzenine girmeden önce, birkaç rehberlik prensibi oluşturmak yardımcı olur. Bu onets, bir dosyayı nerede yerle ilgili ve işlevselliği nasıl açığa çıkaracağınıza dair her karara bilgi vermeli.

Endişelerin Ayrılığı

Her modül tek, iyi tanımlanmış bir iş olmalıdır. Örneğin, aİLFLT:0) sadece kullanıcı ile ilgili uç noktaları için API aramalarını ve veri dönüşümünü ele almalı; UI'yi asla oluşturmamalıdır. Benzer şekilde, aİLFLT:1, sadece sunum ve düzeni ele almalı, bu ayrımı yapabilmek için önemsiz hale getirmeli veya istenmeyen yan etkiler olmadan bir bileşeni yeniden tasarlamalıdır.

Encapsulation

Modüller minimum kamu yüzeyi alanı ortaya çıkarmalı. İç yardım işlevleri, alt sorumlular veya sadece bir modül içinde ilgili olan devlet yönetim kalıpları özel tutulacaktır (örneğin, alt bir kongreye yerleştirmek veya onları isimlendirmek). Bu, baskı yapmadan ve tüketicileri bozmadan içsel ayrıntıları değiştirmenize izin verir.

Açıklama : Explicit Dependencies

Küresel tektonlara veya kapalı ithalata güvenmek yerine (her yerden sadece ithal etmek gibi), modüler bir yapı bağımlılıkların açık enjeksiyonunu teşvik eder - Reakt Context, Redux mağazası veya basit fonksiyon parametreleri aracılığıyla. Bu, kodu test etmek ve neden daha kolay hale getirir.

Sözleşmede Yeterlik

Her takım tercihleri olsa da, bir kongreyi (gömülme, ihracat stili) seçtiğinizde, bunu sürekli olarak uygulamak zorundasınız.

Önerilen Proje Yapısı: Derin Dive

Aşağıdaki yapı, bir avuç ekrandan üç dijital özellik modüle kadar değişen üretim reaktörü üretime karşı savaşılmıştır. ölçeklendirme yeteneği ile basitleşir. TypeScript codebase - eğer aynı ilkeleri uygularsanız.

my-react-native-app/
├── assets/
│ ├── fonts/
│ ├── images/
│ └── lottie/
├── src/
│ ├── components/ # Reusable UI primitives
│ ├── screens/ # Top-level route components
│ ├── navigation/ # Navigation configuration & linking
│ ├── services/ # API clients, data-fetching logic
│ ├── state/ # Global state (Redux, Zustand, etc.)
│ ├── hooks/ # Custom React hooks
│ ├── utils/ # Pure utility functions & constants
│ ├── types/ # TypeScript interfaces & enums
│ ├── config/ # Environment variables, feature flags
│ └── theme/ # Colors, typography, spacing tokens
├── tests/ # Integration & end-to-end tests
├── app.json
├── package.json
└── tsconfig.json

Her bir dizinin amacını ve içeridekileri inceleyelim.

[[Düzücükler: Reusable UI Building Blocks

Bu klasör belirli bir ekrana veya özellike bağlı olmayan bileşenler tutar. Örnekler, uygulama iş mantığından haberdar olmadan, [[Üyetim: 16.Üye ait bir reklama eklediğinizden, [[Üye Olmayanlar İçin Tıklayınız.)

Ortak bir hata tüm olası UI parçaları düz bir şekilde boşaltıyor: Kütüphane büyüdükçe, ilgili bileşenleri alt katlara göz önünde bulundurun:

[Üye Tarihi: 16. ayet: · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
[FONT: 15) - Giriş alanları, çekboxlar, radyo düğmeleri.
[FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=)

Her bir bileşen kendi test dosyasına sahip olmalıdır (örneğin, [[Düzge: 5) ve muhtemelen görsel regresyon testi için bir Storybook hikayesi.

[FONT=) – Top-Level Page Bileşenler

Ekranlar, doğrudan navigasyon defterinizde rotalara haritalayan bileşenlerdir.Her ekran, yeniden kullanılabilir bileşenlerin ve burada karmaşık iş mantığını koymak için özelleştirilmiş bileşenlerden oluşur:0) Ekran klasörüne (veya bir ortak konumlanmışFLT:19 serisine) göre ayarlanmalıdır.

Naming Kongre: [[Dönem:))), [[Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye

[FONT: 9) – LoginScreen, RegisterScreen, ForgotPasswordScreen
[FONT=FONT=) – MainScreen, AnalyticsScreen, ReportsScreen

[FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=I)

Burada, Reaktöre yığınınızı, sekmenizi, çekmecenizi ve yapılandırma yapılandırmalarını ayarlarsınız. Ekranlardan ayrı bir navigasyon akışı değiştirmenize izin verir (örneğin, bir modal navigatoru takas etmek) herhangi bir ekran koduna dokunmadan.

[FONT: 9)) - Üst düzey navigator hangi yığına göstereceğine karar verir (daha doğrusu).
[Üye: 27/44] - The alt sekme bar.
[FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=I=FONT=I=FONT=I=FONT=I=I=FONT=I=I=I=I=I=FONT=I=I=I=I=I=I=I=I=I=I=I=I=I=I=I=I=I=I=I=I=I=I=I=I=I=))
[FONT: 29) – Dış bileşenler için navigasyon konteynerine bir reçet (örneğin, hizmetlerde).

Uygulamanız bildirimleri veya evrensel bağlantıların derin bağlantısını desteklerse, bu klasör rota haritası için tek gerçek kaynağıdır.

[FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=

Hizmetler dış sistemlerle tüm iletişim kurmak: REST APIs, GraphQL, yerelStorage, bildirim kaydı, vb. Bir hizmet genellikle parametreleri ve geri dönüş vaatlerini alan bir dizi işlevdir.

[FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=
[FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=
[FONT: 9) – takip et, kullanıcıyı tanımlayın.

Hizmetler, Reaktör veya herhangi bir UI kodu ithal etmemelidir. Bununla birlikte, yardımcı fonksiyonlarını www.DÜDÜ'den indirebilirsiniz) ve türlerden yararlanılabilir.Bu, saf ünite testleri ile test edilebilir ve entegrasyon testlerinde alay etmek kolaylaşır.

Veri toplama için, birçok takım şimdi Retrep Sorgulama veya arka plan yeniden değerlendirmeyi yöneten Refetching'i kullanmayı tercih ediyor.Bu durumlarda, sorgu kancalarını içerideki 03:36T:36'da yerleştirebilirsiniz.

[FONT=FONT=)

Bu rehber, seçilmiş küresel devlet çözümünüzü tutuyor: Redux mağazası, Redux Toolkit dilimleri, Zustand mağazaları veya Re Mix atomları. Her mağaza dilim veya bağlam sağlayıcıyı kendi dosyada tutun, alan adı Redux Toolkit:

[FONT: 9) - Konsiyon, kök azaltıcı.
(Allah’a) yemin ederim.
[FONT]
[FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=)

Reakt Context kullanıyorsanız, sağlayıcılarınız ve bağlam kancaları burada yerleştirin. Küresel devlet izole edilmiş olarak UI mantığının devlet mantığıyla karıştırılmasını engeller.

[FONT][/FONT][/FONT=)

Özel kancalarda kullanılabilir devletli mantık. örnekler:

(Allah’a) yemin ederim.
[FONT: 9) (Uygulamanın ön planda olup olmadığını takip edin / ⁇ )
(Allah’a) yemin ederim.
[FONT]
[Üye ve hizmet aramaları)

Tek bir ekrana özel olan Hooks, bu ekranla birlikte oturmalıdır, küresel olarakİLETİŞMEK İÇİNDE değil.

[FONT: 9) - Saf Utilities & Constants

Bu klasör saf, eyaletsiz olan işlevleri veya sabitleri içerir ve Reaktif veya herhangi bir uygulama durumuna bağlı değildir. Örneğin:

[FONT]
[FONT=FONT][/FONT][/FONT][/FONT][/FONT][/FONT][/FONT/FONT/FONT/FONT/FONT/FONT/FONT/FONT/FONT/FONT/FONT/FONT/FONT/FONT/FONT/FONT/FONT/FONT/FONT/FONT/FONT/FONT/FONT/FONT/FONT/FONT/FONT)
(Allah’a) yemin ederim.
[FONT=FONT][/FONT=FONT=FONT=IFONT|API baz URL, timeout values, özellik bayrak anahtarları)

Bu küçük ve amaçlı yerleşik olmayan dosyaların tutulması.Eğer bir avuç yardımcıdan daha fazlasını bulursanız, onları ayrı dosyalara ayır.

[FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=

TypeScript arayüzlerinizi, tip aliaslarınızı ve burada enumları merkezileştirin. Common examples:

[FONT: {8}Her bir navigator için parametre listeleri.
[FONT: {17}| Kullanıcı, KullanıcıProfile, Kullanıcı Yollarını Bırakır.
[FONTD: 16) – jejitasyon türleri.
[FONT: 38) - özel marka özel türleri.

Tipler için tek bir gerçek kaynağı kullanarak tutarsızlıkları önler ve arka uç şema değişiklikleri sırasında çok daha kolay hale getirir.

[FONT:60] – Orta ve Not; Özel Bayraklar

Reaksiyon Yerli uygulamaları genellikle çevrede farklı konfigürasyona ihtiyaç duyar (gelişme, üretim). Buradaki mantığı tutun, genellikle ESFLT:61 veya çevre değişkenlerini kullanın. Örnek yapı:

[Ködün:62]
[Bin: 63)
[FONT:64] - gelişmiş özelliklerde erişilebilir / ayırt edilebilir bir görüntü.

[FONT: 65] – Tasarım Hediyeleri veamp; Theming

Bir tema dosyası renkler, tipografi, spacing, gölgeler ve uç noktaları için sürekli ihracat yapar. Birçok takım bu jetleri tüketmiş veya aşağıdakiler için aşağıdaki linkleri kullanın.In accessibility, provide both a light and dark mode partition. Örnek:66.

[Kırk: 68)
[69. ayet: 69)
[70]
[FONT:71] – varsayılan tema nesnesi.

[FONT:72]

Tüm statik dosyaların, koşullu veya zamanında ithal edildiği gibi. Bu, fontlar, görüntüler, Lottie animasyonları, JSON dosyaları ve benzer. kaynak türü tarafından teslim edilmesi, paketlerinizi doğru bir şekilde çözmenize yardımcı olur.

[FONT:73] – İntegra & E2E Testler

Birim testleri test ettikleri koda bir sonraki yaşamalıdır (örneğin, ESFLT:74). entegrasyon ve son test dosyaları burada aittir.Detox veya Appium for E2E, ve farklı kullanıcı yolculukları için test profilleri oluşturun.Reusability için alt katlayıcılar.

Uygulamada Yapıyı Uygulamayı Uygulayın

Şimdi teoriyi anlıyorsunuz, burada yeni veya mevcut bir Reaks Yerli projesinde bu yapıyı kurmak için pratik bir adım adım adım yaklaşımı.

Adım 1: Kater Ağacı Başlayın

Terminalinizi veya IDE'yi kullanarak dizin yapısını oluşturun. Yeni bir proje için, ESRAT:75. önce, varsayılan olarak silinir:76). ve yeniden yaratılır: importİLRAT:77).

[FONT=0)React Navigation[[[Dönetici:0) ve aİLFLT:78) için ilk ekran rotalarınızı tanımlayın. Bugün sadece bir ekranınız varsa, navigasyon iskeleti büyümeyi sağlayacaktır.

Adım 3: Tema ve Constants oluşturun

Herhangi bir bileşen yazmadan önce, tasarım belirteçlerinizi [[FONTD:80) ve sabitleri inurFLT:81) oluşturun. Bu, her geliştiricinin günden itibaren tutarlı değerleri kullanmasına olanak sağlar.

Adım 4: Bir Reusable Bitirme

Basit bir bileşen seçin:82) ve bunu [[Dint:83|Demek. test dosyasını yazın ve bir yer sahibi ekran içinde kullanın. Bu, inşa hattınızın klasör yapısıyla çalıştığını doğrular.

Adım 5: Bir Servis Katmanı Oluştur

Uygulamanız bir API ile iletişim kurarsa, a Domain-specific service (e.g., [[123|) ile ilgili olarak yapılandırılır.

Adım 6: Devlet Yönetimi Ekle

Bir devlet aracına karar verin (Redux Toolkit, Zustand, vs.) ve onu arandır.

Adım 7: Refaksiyon Varing Code Gradually

Mevcut bir projenizi migratingseniz, dosyaları bir seferde bir dizi hareket ettirin (me, sabitler, hizmetler) Standart testlerinizi yeşil tutmak ve bir hafta boyunca bir yedek almak daha iyidir.

Büyük ölçekli uygulamalar için Gelişmiş Bakışlar

Ekibiniz ve kodbase 20-30 geliştiricilerinin ötesinde büyürken, temel tabaka tabanlı yapı bir desteğe ihtiyaç duyabilir. İşte büyük Reaksiyon Yerli uygulamaları tarafından kullanılan modeller.

Özel Temel Modüller (Yaklaşık Katlayıcılar)

Teknik rol (komponent, hizmet, ekran) ile ayrıştırılması yerine, bir iş alanı ile ilgili her dosyayı tek üst düzey bir klasöre ile ilişkilendirebilirsiniz. Örnek: Örnek:

src/
 features/
 auth/
 components/
 screens/
 services/
 state/
 hooks/
 types/
 profile/
 components/
 screens/
 services/
 state/
 hooks/
 types/
 shared/
 components/
 utils/
 hooks/

Bu yaklaşım her özelliği tamamen yapılandırılmış ve daha kolay bir şekilde şekillendirir. özellikler gerçekten bağımsız olduğunda ve ayrı takımlar tarafından geliştirilebilir. alt tarafı, paylaşılan parçalar hakkında disipline edilmemiş olsa da bazı fikre yol açabilir.

Paylaşılan Kütüphanelerle Monorepos

Birden fazla Reaksiyon Yerli uygulamalarını (müşteri-ışıma, yönetici, beyaz-label) koruyorsanız, tasarım sisteminiz için tek bir gerçek kaynağı düşünün.The Place shared Reaction Native components, kancalar ve hizmetler in aİLFLT:94.) Bu, her iki uygulamanın da satış yaptığı kütüphaneyi kullanarak, tasarım sisteminiz için modüler yapıyı kullanarak bir uygulamanız için bir gerçek kaynağına sahip olabilir.

Kod Bölünme & Lazy Yükleniyor

Reaksiyon Yerlisi, dinamik ithalatları en-kut-kut-box'ı desteklemez, ancak 444FLT:96 gibi kütüphaneler yardımcı olabilir. Ekranlarınızı yapılandırın, böylece her ekran ayrı bir tembel yüklenmiş modüldür. Bu, ilk paket boyutunu azaltır ve büyük uygulamalar için başlangıç süresini artırır.

Uzun Süreli Koruma için En İyi Uygulamalar

En iyi klasör yapısı bile disiplinsiz alışkanlıklar olmadan başarısız olacaktır. Bu uygulamaları günlük iş akışınıza entegre edin.

[FONT=0)[FONT=0))[FONT=0)))))))))))))))))))))))))))))))Enjektif devreler için bir ürün asla bir parçaya taşımamalıdır.
[FONT:0) Kod ile birlikte testler yaz[[Dönetici: 1 ) - Her modülün klasörü bir aritme veya bir ko-lokasyon dosyasına sahip olmalıdır.Test hizmetleri izolasyonda test kancaları ile test etmek:101).
[FONT:0) Netliklere bağlı kalın[Dönetici:0)))[Döneticileri açık bir şekilde belgelenmiş durumda.Eğer bir ekranın kapalı küresel sağlayıcılarına güvenmekten kaçının.Eğer bir ekranın auth durumuna ihtiyacı varsa, bunu açıkça belgelenmiş bir bağlamdan veya belgelenmiş bir şekilde aktarın.
[FONT:0)Use TypeScript katı modu [[Döntgen: 1) SeturFLT:102) Bu, speratif sorunlarla karşılaşır ve modül sınırlarının doğru tiplerini teşvik eder.
[FONT:0) Yapının sağlığını çeyrek olarak gözden geçirebilirsiniz) – Özellikler ek olarak, klasörleri alt üst katlara bölmek veya yeni bir özellik modülü çıkarmak için çok büyük bir bütçe zamanı fark edebilirsiniz.
[FONT:0) Sözleşmelerinizi[[Döneticileri)[[Döneticileri) saklı tutar.[0] Yeni ekip üyeleri bunu takdir edecektir.

Daha fazla okuma için, [[0)Ana Sayfa Ana Sayfa Ana Sayfa (Dönetici) ► (Dönetici) ve TurboModules (proje yapısı hakkında doğrudan bilgi sahibi olmasa da, altta platformunu anlamayın. Ayrıca bakınız:2Redux Toolkit Belgeleri).

Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç

modüler bir Rekreasyon Yerli proje yapısı gümüş bir mermi değildir - yukarıda açıklanan temel katman tabanlı bir düzenle başlayın ve test etmek için çaba gerektirir ve talep ettiğiniz gibi daha hızlı, daha güvenli bir şekilde yeniden faktörleme, daha az bir araya gelme çatışmaları ve uygulamanızı ölçeklendirme yeteneğiniz - size teşekkür eder.