What Building Pagelyze Taught Me About React

Pagelyze'ı inşa etmek React'a bakış açımı değiştirdi. Teoriyi incelemeyi bırakıp ürün mimarisine odaklanmaya başladım.

Pagelyze bir web sitesi denetim aracıdır. Küçük bir uygulama projesi değil; denetim raporlarını, puanlama mantığını ve panelleri (dashboards) yönetiyor. Bu yüzden tek bir soruyu yanıtlamam gerekiyordu:

Ürün büyüdükçe bu kod temiz kalabilecek mi?

useState veya useEffect gibi Hook'lar önemlidir. Ancak hikayenin tamamı bu değil. Modern sözdizimi (syntax) kullansanız bile hala bakımı zor bir karmaşa içinde olabilirsiniz. Sorun genellikle sorumluluk paylaşımıdır.

Kötü bir kurulumda, tek bir dosya verilerin yüklenmesinden sonuçların gösterilmesine kadar her şeyi halleder. Bu yaklaşım ölçeklendikçe başarısız olur.

Daha iyi bir yol, bileşenleri (components) kullanım amaçlarına göre ayırmaktır:

  • AuditSummary
  • LeadCheckPanel
  • EvidenceList
  • ServiceRecommendationCard
  • ReportActions

Her parçanın tek bir görevi vardır. Veri mantığınızı bozmadan bir kart tasarımını değiştirebilirsiniz.

Redux mu yoksa Context mi kullanmalıyım diye sormayı bırakın. State'e kimin ihtiyacı olduğunu sorun.

  • Yerel UI state: sekmeler ve modallar
  • Form state: URL'ler ve doğrulama (validation)
  • Server state: raporlar ve taramalar
  • Global state: kullanıcı profili ve izinler

Custom hook'lar davranışı temsil etmelidir. Sadece karmaşık kodu farklı bir dosyaya taşımak için kullanılmamalıdırlar. İyi bir hook veriyi çeker, böylece sayfa bileşeni (page component) sadece ekranı koordine eder.

Klasörlerinizi özelliklere (feature) göre yapılandırın:

  • features/audit-report/
  • features/lead-rescue/
  • features/dashboard/

Yönlendirme (routing) sadece URL'lerden ibaret değildir. Bu, kullanıcı yolculuğudur. Bir kullanıcı açılış sayfasından ücretsiz bir denetime, ardından bir rapora ve son olarak bir hizmet talebine gider. İyi bir yönlendirme, kullanıcıyı bir sonraki adıma yönlendirir.

Netlikle inşa edin. Darboğazı bulun. Sadece o spesifik kısmı düzeltin.

React en iyi uygulamaları (best practices) kararlarla ilgilidir. Bir bileşenin neye sahip olduğuna siz karar verirsiniz. State'in nerede yaşayacağına siz karar verirsiniz. Bir rotanın kullanıcıya yardımcı olup olmayacağına siz karar verirsiniz.

Pagelyze benim testim. Bir ekran oluşturup oluşturamayacağımı değil, bir ürün büyüdükçe onu temiz tutup tutamayacağımı test ediyorum.

Source: https://dev.to/prazink/what-building-pagelyze-taught-me-about-react-best-practices-5fhb