Jak piszemy Front?

Architektura na Froncie

Wstęp

W przypadku tworzenia komponentów reużywalnych będziemy starać się używać tak zwanego Atomic Design. Czyli podział folderu components na 3 podfoldery:

1. Atoms
2. Molecules
3. Organisms

Dzięki temu będziemy tworzyć naszą własne bibliotekę komponentów(jak np MUI).

W przypadku komponentów których jedynym przeznaczeniem jest bycie użytym na określonej podstronie, należy je umieścić w folderze components> pages/nazwaPage'a/

WAŻNE! Każdy test, typy, utils czy stories starajmy się trzymać jak najbliżej komponentu, który go używa.

Sposób renderowania stron

Zawsze priorytezujmy renderowanie statycznych stron(SSG) w połączeniu z ISR. W innych przypadkach(np profil użytkownika) możemy posłużyć się SSR.

Testy, testy, testy

Starajmy sie testować wszystko co ma sens(czyt:. jeżeli test miałby zawierać to czy komponent Label bez żadnego ifa się renderuje to nie piszmy go.).

Tej samej zasady trzymajmy się w przypadku hooków oraz utilsów.

Za to do każdego komponentu znajdującego się w naszej bibliotece należy dopisywać stories ze Storybooka, gdzie title będzie zaczynało się od nazwy folderu w którym znajduje się komponent.