Kategorie
Archiwum Newslettera

Jak tworzyć katalogi w React.js?

React jest już dojrzałą technologią, jednak wciąż brak mu usystematyzowania konceptów architektonicznych. Wszyscy, którzy wchodzą do Reakta zadają pytanie: Jak mam układać katalogi?

React jest już dojrzałą technologią, jednak wciąż brak mu usystematyzowania konceptów architektonicznych. Wszyscy, którzy wchodzą do Reakta zadają pytanie: Jak mam układać katalogi?

Co na ten temat mówi zespół twórców Reakta? Dan Abramov całkiem poważnie napisał:

move files around until they feel right

Czy tak powinien działać inżynier?

Poniżej przedstawiam trzy podejścia do tworzenia architektury plików w React.js. A tak zwyczajnie, po ludzku: jak tworzyć i układać pliki i foldery w projekcie.

Podejście domenowe

Ile funkcjonalności ma moja aplikacja? Z jakich modeli danych korzysta? Z ilu API korzysta?

Przykładowa odpowiedź:

  • płatności
  • autoryzacja i uwierzytelniania użytkownikami
  • produkty
  • notyfikacje
  • transakcje
  • analiza sprzedaży

Każda pozycja na liście to folder, moja domena. Mogę tu trzymać kod związany z daną domeną, zarówno komponenty – widoki, jak i logikę biznesową danej domeny. Dla przykładu: dla produktów może to być serwis do pobierania produktów z jakiegoś REST API, do tego komponent do wyświetlania listy produktów oraz funkcje filtrujące produkty.
Oto przykładowe rozwiązanie:

Katalogi wg domeny

Podział na strony (pages)

Przeważnie mam jakiś routing. Wtedy każda strona ma swój plik lub katalog. Mogę tu trzymać dosłownie wszystko, co znajduje się na danej stronie. Mogę też zrobić tylko jeden plik z komponentem-kontenerem. Ode mnie zależy, ile i co do niego wrzucę. Co z resztą kodu? Czytaj dalej. Przykładowa odpowiedź dla jakiegoś przykładowego sklepu internetowego.

Katalogi wg routingu

Wszystko jest komponentem

To bardzo swobodne podejście. Tworzę katalog “components” i trzymam tam moje komponenty. Komponentem jest jakaś część aplikacji, której wydzielenie do osobnego pliku wydaje mi się rozsądne. Każdy komponent ma swój plik. Możesz też utworzyć katalog i podzielić kod komponentu na kilka plików. Możesz tworzyć podkomponenty lub łączyć podobne komponenty w katalogi. Ważne, że wszystko kręci się wokół pojęcia KOMPONENT.

Zobacz jak mogłoby to wyglądać w przykładowej aplikacji:

Katalogi komponentów

Różne kombinacje

Ale co kiedy moja aplikacja nie ma wyklarowanej żadnej z tych struktur? Co jeśli jest na tyle duża, że jedno podejście wydaje się za proste? Nic nie stoi na przeszkodzie, aby użyć kilku z powyższych metod na raz. Jednak staram się, żeby w jednym katalogu obowiązywała zawsze tylko jedna z tych zasad. Jeśli potrzebujesz nowego podziału, utwórz nowy folder. Foldery możesz zagnieżdżać i na każdym stopniu zagnieżdżenia trzymać się innego stylu.

Katalogi mieszane podejścia

Moje dobre praktyki tworzenia i układania plików lub katalogów

  • Staram się nie zagnieżdżać katalogów bardziej niż 3-4 poziomy w głąb.
  • Nie tworzę sztucznych podziałów
  • Duża liczba plików w jednym katalogu to nie błąd
  • Nie zapominam o spójnym nazewnictwie
  • Myślę rozsądnie o nazwach, tak jakby musiały już takie zostać na zawsze
  • Zawsze staram się utrzymać jak najprostszą strukturę
  • Nie dzielę kodu na osobne pliki, jeśli nie mam dużo kodu