Czego nauczyło mnie budowanie Pagelyze o React

Budowanie Pagelyze zmieniło moje spojrzenie na React. Przestałem skupiać się na teorii, a zacząłem patrzeć na architekturę produktu.

Pagelyze to narzędzie do audytu stron internetowych. To nie jest mała aplikacja ćwiczeniowa. Obsługuje raporty audytowe, logikę oceniania i pulpity nawigacyjne. Z tego powodu musiałem odpowiedzieć na jedno pytanie:

Czy ten kod pozostanie czysty wraz ze wzrostem produktu?

Hooki takie jak useState czy useEffect są ważne. Ale to nie wszystko. Możesz używać nowoczesnej składni i wciąż mieć bałagan do utrzymania. Problemem jest zazwyczaj odpowiedzialność.

W złej konfiguracji jeden plik zajmuje się wszystkim – od ładowania danych po wyświetlanie wyników. Przy skalowaniu takie podejście zawodzi.

Lepszym sposobem jest podział komponentów według przeznaczenia:

  • AuditSummary
  • LeadCheckPanel
  • EvidenceList
  • ServiceRecommendationCard
  • ReportActions

Każdy element ma jedno zadanie. Możesz zmienić wygląd karty, nie psując logiki danych.

Przestań pytać, czy powinieneś użyć Redux czy Context. Zapytaj, kto potrzebuje stanu.

  • Stan UI lokalny: karty i modale
  • Stan formularza: adresy URL i walidacja
  • Stan serwera: raporty i skany
  • Stan globalny: profil użytkownika i uprawnienia

Custom hooki powinny reprezentować zachowanie. Nie powinny jedynie przenosić niechlujnego kodu do innego pliku. Dobry hook pobiera dane, dzięki czemu komponent strony zajmuje się jedynie koordynacją ekranu.

Strukturyzuj foldery według funkcjonalności:

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

Routing to coś więcej niż tylko adresy URL. To ścieżka użytkownika. Użytkownik przechodzi od strony lądowania do darmowego audytu, potem do raportu, a na końcu do zapytania o usługę. Dobry routing prowadzi go do kolejnego kroku.

Buduj z jasnością. Znajdź wąskie gardło. Napraw ten konkretny element.

Dobre praktyki w React sprowadzają się do decyzji. Decydujesz, czym zarządza komponent. Decydujesz, gdzie znajduje się stan. Decydujesz, czy dana trasa pomaga użytkownikowi.

Pagelyze to mój test. Nie testuję tego, czy potrafię zbudować ekran. Testuję, czy potrafię utrzymać produkt w czystości wraz z jego rozwojem.

Źródło: https://dev.to/prazink/what-building-pagelyze-taught-me-about-react-best-practices-5fhb