Was mich der Bau von Pagelyze über React gelehrt hat

Der Bau von Pagelyze hat meine Sicht auf React verändert. Ich habe aufgehört, nur auf die Theorie zu schauen, und angefangen, auf die Produktarchitektur zu achten.

Pagelyze ist ein Tool für Website-Audits. Es ist keine kleine Übungs-App. Es verwaltet Audit-Berichte, Scoring-Logik und Dashboards. Aus diesem Grund musste ich eine Frage beantworten:

Wird dieser Code sauber bleiben, während das Produkt wächst?

Hooks wie useState oder useEffect sind wichtig. Aber sie sind nicht alles. Man kann moderne Syntax verwenden und trotzdem ein Chaos warten müssen. Das Problem ist meistens die Zuständigkeit.

In einem schlechten Setup übernimmt eine einzige Datei alles – vom Laden der Daten bis zur Anzeige der Ergebnisse. Das scheitert, sobald man skaliert.

Ein besserer Weg ist es, Komponenten nach ihrem Zweck zu trennen:

  • AuditSummary
  • LeadCheckPanel
  • EvidenceList
  • ServiceRecommendationCard
  • ReportActions

Jedes Teil hat genau eine Aufgabe. Man kann das Design einer Card ändern, ohne die Datenlogik zu beeinträchtigen.

Hör auf zu fragen, ob du Redux oder Context verwenden solltest. Frag stattdessen, wer den State benötigt.

  • Lokaler UI-State: Tabs und Modals
  • Formular-State: URLs und Validierung
  • Server-State: Berichte und Scans
  • Globaler State: Benutzerprofil und Berechtigungen

Custom Hooks sollten Verhalten repräsentieren. Sie sollten unordentlichen Code nicht einfach nur in eine andere Datei verschieben. Ein guter Hook lädt Daten, sodass die Page-Komponente nur noch die Anzeige koordiniert.

Strukturiere deine Ordner nach Features:

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

Routing ist mehr als nur URLs. Es ist die User Journey. Ein Nutzer geht von einer Landingpage zu einem kostenlosen Audit, dann zu einem Bericht und schließlich zu einer Serviceanfrage. Gutes Routing führt sie zum nächsten Schritt.

Baue mit Klarheit. Finde den Flaschenhals. Behebe genau diesen Teil.

Bei React Best Practices geht es um Entscheidungen. Du entscheidest, was eine Komponente besitzt. Du entscheidest, wo der State lebt. Du entscheidest, ob eine Route dem Nutzer hilft.

Pagelyze ist mein Test. Ich teste nicht, ob ich einen Screen bauen kann. Ich teste, ob ich ein Produkt sauber halten kann, während es wächst.

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