What Building Pagelyze Taught Me About React

Membina Pagelyze telah mengubah pandangan saya terhadap React. Saya berhenti melihat teori dan mula melihat seni bina produk.

Pagelyze ialah alat audit laman web. Ia bukan sekadar aplikasi latihan yang kecil. Ia mengendalikan laporan audit, logik pemarkahan, dan papan pemuka. Disebabkan ini, saya perlu menjawab satu soalan:

Adakah kod ini akan kekal bersih apabila produk berkembang?

Hook seperti useState atau useEffect adalah penting. Tetapi itu bukan segalanya. Anda boleh menggunakan sintaks moden tetapi masih mempunyai kod yang berselerak untuk diselenggara. Masalahnya biasanya adalah tanggungjawab.

Dalam tetapan yang buruk, satu fail mengendalikan segalanya daripada memuatkan data sehingga memaparkan keputusan. Ini akan gagal apabila anda melakukan penskalaan.

Cara yang lebih baik adalah dengan membahagikan komponen mengikut tujuan:

  • AuditSummary
  • LeadCheckPanel
  • EvidenceList
  • ServiceRecommendationCard
  • ReportActions

Setiap bahagian mempunyai satu tugas. Anda boleh mengubah reka bentuk kad tanpa merosakkan logik data anda.

Berhenti bertanya sama ada anda patut menggunakan Redux atau Context. Tanya siapa yang memerlukan state tersebut.

  • Local UI state: tab dan modal
  • Form state: URL dan pengesahan
  • Server state: laporan dan imbasan
  • Global state: profil pengguna dan kebenaran

Custom hook sepatutnya mewakili tingkah laku. Ia tidak seharusnya sekadar memindahkan kod yang berselerak ke fail yang berbeza. Hook yang baik mengambil data supaya komponen halaman hanya menyelaraskan paparan skrin.

Strukturkan folder anda mengikut ciri:

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

Routing bukan sekadar URL. Ia adalah perjalanan pengguna. Seorang pengguna bermula dari laman pendaratan ke audit percuma, kemudian ke laporan, dan akhirnya ke pertanyaan perkhidmatan. Routing yang baik membimbing mereka ke langkah seterusnya.

Bina dengan kejelasan. Cari punca kesesakan (bottleneck). Baiki bahagian khusus tersebut.

Amalan terbaik React adalah tentang keputusan. Anda memutuskan apa yang dimiliki oleh sesuatu komponen. Anda memutuskan di mana state disimpan. Anda memutuskan sama ada sesuatu laluan (route) membantu pengguna.

Pagelyze adalah ujian saya. Saya bukan sedang menguji sama ada saya boleh membina skrin. Saya sedang menguji sama ada saya boleh mengekalkan produk yang bersih apabila ia berkembang.

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