Wat het bouwen van Pagelyze me leerde over React

Het bouwen van Pagelyze heeft mijn kijk op React veranderd. Ik stopte met het bestuderen van de theorie en begon me te richten op productarchitectuur.

Pagelyze is een tool voor website-audits. Het is geen klein oefenproject. Het verwerkt auditrapporten, scoring-logica en dashboards. Daarom moest ik één vraag beantwoorden:

Blijft deze code schoon naarmate het product groeit?

Hooks zoals useState of useEffect zijn belangrijk. Maar dat is niet het hele verhaal. Je kunt moderne syntaxis gebruiken en nog steeds een puinhoop hebben om te onderhouden. Het probleem is meestal verantwoordelijkheid.

In een slechte opzet regelt één bestand alles, van het laden van gegevens tot het tonen van resultaten. Dit loopt spaak zodra je schaalt.

Een betere manier is om componenten op te splitsen op basis van hun doel:

  • AuditSummary
  • LeadCheckPanel
  • EvidenceList
  • ServiceRecommendationCard
  • ReportActions

Elk onderdeel heeft één taak. Je kunt het ontwerp van een kaart aanpassen zonder je datalogica te breken.

Stop met jezelf afvragen of je Redux of Context moet gebruiken. Vraag je af wie de state nodig heeft.

  • Lokale UI-state: tabs en modals
  • Form-state: URL's en validatie
  • Server-state: rapporten en scans
  • Globale state: gebruikersprofiel en permissies

Custom hooks moeten gedrag vertegenwoordigen. Ze moeten niet alleen rommelige code naar een ander bestand verplaatsen. Een goede hook haalt gegevens op, zodat de page-component alleen het scherm coördineert.

Structureer je mappen op basis van features:

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

Routing is meer dan alleen URL's. Het is de gebruikersreis. Een gebruiker gaat van een landingspagina naar een gratis audit, dan naar een rapport en uiteindelijk naar een serviceaanvraag. Goede routing begeleidt hen naar de volgende stap.

Bouw met helderheid. Vind de bottleneck. Los dat specifieke onderdeel op.

React best practices gaan over beslissingen. Jij bepaalt wat een component bezit. Jij bepaalt waar de state leeft. Jij bepaalt of een route de gebruiker helpt.

Pagelyze is mijn test. Ik test niet of ik een scherm kan bouwen. Ik test of ik een product schoon kan houden naarmate het groeit.

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