To jest krótki przewodnik po regułach, których używam do organizowania komponentów podczas tworzenia aplikacji React. Odkryłem, że posiadanie dobrze zdefiniowanego systemu pomaga nie tylko w organizacji, ale także pomaga lepiej określić, w jaki sposób komponenty do siebie pasują i zmaksymalizować możliwość ponownego wykorzystania w całym kodzie.

Zdecydowanie sprawdź rozszerzoną wersję tego artykułu, jeśli interesuje Cię przykładowy kod, przykładowe repozytorium i więcej informacji na temat projektowania atomowego.

Zawartość

• Struktura aplikacji
• Zasady atomów
• Zasady cząsteczek
• Zasady organizmów
• Zasady szablonów
• Zasady stron
• Zasady tras

Kiedy początkowo tworzę aplikację React, umieszczam cały kod w /srcfolderze. /src/componentsFolder posiada wszystkie React komponenty podzielone na pięć kategorii: Atomic projekt atomów, cząsteczek, organizmów, szablonów i stron. Dogodnie są one już w porządku alfabetycznym od najmniejszego elementu pojęciowego do największego!

/routesFolderu (co może być nazwane inaczej, jak w Next.js gdzie byłoby również nazwać pages) polecam utrzymanie oddzielone od /components/pagesw celu oddzielnego kodu strona UI z kodem aplikacji routingu.

/..
--/node_modules
--/public
--/src
--|-/components
--|-|-/atoms
--|-|-/molecules
--|-|-/organisms
--|-|-/templates
--|-|-/pages
--|-/routes
--|-/styles
--|-/utility
--|-/etc...

Zasady atomów

Atom to podstawowy składnik, jak ogólny charakter może być. Pomyśl o przyciskach, danych wejściowych lub sformatowanym tekście tytułu:

• Nie powinien tworzyć innych komponentów/wykorzystuje tylko elementy natywne lub komponenty specyficzne dla frameworka, podobne do elementów natywnych
• Może mieć własne znaczniki i style
• Potrafi utrzymać swój własny stan wewnętrzny
• Nie powinien być ściśle powiązany z określonymi obszarami interfejsu użytkownika lub logiki
• Nie należy bezpośrednio uzyskiwać dostępu do aplikacji (lub wyższego poziomu)
• Nie powinien mieć żadnych skutków ubocznych niezwiązanych z interfejsem użytkownika/układem
• Nie należy wdrażać żadnej logiki biznesowej specyficznej dla aplikacji

Te cząsteczki węgla tworzy się tworzyć bardziej złożone składnik z własnym znaczników i stylizacji dodaje się do mieszanki. Bardzo podobne do atomów, ale wymyśl coś w rodzaju elementu formularza wielokrotnego użytku z komunikatami wejściowymi, etykietami i walidacją błędów lub kartą produktu z tytułem, podtytułem i obrazem:

• Składa się z jednego lub więcej atomów
• Może mieć własne znaczniki i style
• Potrafi utrzymać swój własny stan wewnętrzny
• Nie powinien być ściśle powiązany z określonymi obszarami interfejsu użytkownika lub logiki
• Nie należy bezpośrednio uzyskiwać dostępu do aplikacji (lub wyższego poziomu)
• Nie powinien mieć żadnych skutków ubocznych niezwiązanych z interfejsem użytkownika/układem
• Nie należy wdrażać żadnej logiki biznesowej specyficznej dla aplikacji

Organizm jest gdzie logika biznesowa z aplikacji zaczyna wychodzić. Mogą odpowiadać określonej funkcji lub sekcji aplikacji. Mogą być również ogólnie stosowane, ale ściśle powiązane z logiką aplikacji. Pobieranie danych i odczytywanie/zapisywanie do stanu aplikacji powinno odbywać się przede wszystkim tutaj (lub alternatywnie na poziomie strony). Może to być cały formularz, część karty zakupowej lub profil użytkownika:

• Jest bardziej złożony, składa się z wielu atomów i/lub cząsteczek i/lub innych organizmów
• Może mieć własne znaczniki i style
• Może pobierać dane specyficzne dla aplikacji
• Potrafi wdrożyć logikę biznesową specyficzną dla aplikacji
• Może być podłączony do stanu aplikacji (lub wyższego poziomu)
• Może być ściśle powiązany z określonym obszarem (UI i/lub logiką) aplikacji
• Można organizować w podfoldery według logicznej kategoryzacji (funkcja, strona itp.)

Szablon jest sposób, aby upewnić się, że na stronach swojej aplikacji są spójne. Zajmują się tworzeniem układu i ułatwiają określenie, dokąd należy skierować określone obszary treści lub funkcjonalności. Istnieje wiele sposobów tworzenia szablonów. Wolę mieć jeden komponent, który przyjmuje inne komponenty jako rekwizyty i umieszcza te potomne rekwizytów w znacznikach specyficznych dla układu:

• Ułatwia rozmieszczenie wielu organizmów
• Może mieć własne znaczniki i style.
• Może akceptować i przekazywać rekwizyty zgodnie z wymaganiami.
• Nie należy uzyskiwać dostępu do stanu aplikacji (lub wyższego poziomu)
• Nie powinien mieć żadnych skutków ubocznych niezwiązanych z interfejsem użytkownika/układem
• Nie należy wdrażać żadnej logiki biznesowej specyficznej dla aplikacji

Te strony są ostatnim elementem układanki Atomowej projektu, a każdy z nich będzie stanowić szablon konkretnego. Preferuję bardzo proste komponenty strony, ale mogą być bardziej złożone, jeśli wolisz proste trasy ( patrz następna sekcja ). Najprościej rzecz ujmując, strona po prostu implementuje szablon, przypisując odpowiednie dzieci do odpowiednich rekwizytów szablonu:

• Implementuje określony szablon
• Może pobierać dane specyficzne dla aplikacji
• Potrafi wdrożyć logikę biznesową specyficzną dla aplikacji
• Może być podłączony do stanu aplikacji (lub wyższego poziomu)
• Nie powinien mieć własnych znaczników i stylów

Wreszcie trasy , choć nie są częścią Atomic Design per-se, są nadal ważne do przemyślenia w React. Oprócz obsługi routingu w Twojej witrynie, trasy mogą przejąć dowolne obowiązki, których strony mogą nie wdrażać. . Jeden lub drugi składnik Page lub Route powinien być stosunkowo prosty, a drugi powinien obsługiwać wszelkie złożoności związane z pobieraniem danych, logiką biznesową, stanem aplikacji i tak dalej.

• Powinien obsługiwać rzeczy, które nie są obsługiwane przez strony
• Może pobierać dane aplikacji (jeśli nie zostało to zrobione w Pages)
• Może zaimplementować logikę biznesową specyficzną dla aplikacji (jeśli nie jest to wykonywane w Pages)
• Może być podłączony do stanu aplikacji (lub wyższego poziomu) (jeśli nie zostało to zrobione w Pages)
• Nie powinien mieć żadnych komponentów specyficznych dla interfejsu użytkownika
• Nie powinien mieć własnych znaczników i stylów

Ponownie, jeśli chcesz dokładniej przyjrzeć się, jak to działa w praktyce, przeczytaj to dalej !

Śledź mnie na Twitterze @BenjaminWFox, aby uzyskać więcej informacji o technologii, przywództwie i innych treściach i skontaktuj się z wszelkimi przemyśleniami lub pytaniami!

Pierwotnie opublikowany na https://benjaminwfox.com .