Apa yang Saya Pelajari Tentang React dari Membangun Pagelyze

Membangun Pagelyze mengubah pandangan saya tentang React. Saya berhenti hanya melihat teori dan mulai melihat arsitektur produk.

Pagelyze adalah alat audit situs web. Ini bukan sekadar aplikasi latihan kecil. Ia menangani laporan audit, logika penilaian, dan dasbor. Karena hal ini, saya harus menjawab satu pertanyaan:

Apakah kode ini akan tetap bersih seiring berkembangnya produk?

Hook seperti useState atau useEffect itu penting. Namun, itu bukan segalanya. Anda bisa saja menggunakan sintaks modern tetapi tetap memiliki kode berantakan yang harus dikelola. Masalahnya biasanya terletak pada tanggung jawab.

Dalam pengaturan yang buruk, satu file menangani segalanya, mulai dari memuat data hingga menampilkan hasil. Hal ini akan gagal saat Anda melakukan penskalaan.

Cara yang lebih baik adalah membagi komponen berdasarkan tujuannya:

  • AuditSummary
  • LeadCheckPanel
  • EvidenceList
  • ServiceRecommendationCard
  • ReportActions

Setiap bagian memiliki satu tugas. Anda dapat mengubah desain kartu tanpa merusak logika data Anda.

Berhentilah bertanya apakah Anda harus menggunakan Redux atau Context. Bertanyalah siapa yang membutuhkan state tersebut.

  • State UI lokal: tab dan modal
  • State formulir: URL dan validasi
  • State server: laporan dan pemindaian
  • State global: profil pengguna dan izin

Custom hook harus merepresentasikan perilaku. Mereka tidak boleh hanya memindahkan kode yang berantakan ke file yang berbeda. Hook yang baik mengambil data sehingga komponen halaman hanya bertugas mengoordinasikan tampilan layar.

Strukturkan folder Anda berdasarkan fitur:

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

Routing lebih dari sekadar URL. Ini adalah perjalanan pengguna. Seorang pengguna berpindah dari landing page ke audit gratis, lalu ke laporan, dan akhirnya ke permintaan layanan. Routing yang baik akan memandu mereka ke langkah berikutnya.

Bangunlah dengan kejelasan. Temukan hambatan. Perbaiki bagian spesifik tersebut.

Praktik terbaik React adalah tentang pengambilan keputusan. Anda memutuskan apa yang dimiliki sebuah komponen. Anda memutuskan di mana state berada. Anda memutuskan apakah sebuah rute membantu pengguna.

Pagelyze adalah ujian saya. Saya tidak sedang menguji apakah saya bisa membangun sebuah layar. Saya sedang menguji apakah saya bisa menjaga produk tetap bersih seiring pertumbuhannya.

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