react-component-patterns

Zestaw wytycznych architektonicznych dla nowoczesnych komponentów React. Nauczysz się pisać komponenty funkcyjne z hooks, unikać prop drilling, stosować composition zamiast dziedziczenia i organizować kod zgodnie z best practices. Skill obejmuje standardy nazewnictwa, strukturę importów, obsługę błędów przez Error Boundaries oraz anti-patterns, których należy unikać. Idealne dla zespołów chcących utrzymać spójność i skalowalnośc kodu React.

1. Zainstaluj skill w swoim projekcie React, dodając go do konfiguracji agenta lub środowiska deweloperskiego, w którym pracujesz z plikami JSX i TSX.
2. Podczas pisania komponentów stosuj wytyczne dotyczące funkcyjnych komponentów — używaj wyłącznie hooks, nigdy klas. Destrukturyzuj props w parametrach funkcji i definiuj je za pomocą interfejsów TypeScript.
3. Organizuj kod zgodnie z zasadą composition — przekazuj zawartość przez prop children zamiast stosować dziedziczenie. Unikaj prop drilling, korzystając z Context API lub bibliotek takich jak Zustand.
4. Przestrzegaj konwencji nazewnictwa: komponenty w PascalCase, hooki z prefiksem use*. Eksportuj tylko named exports, nie default exports.
5. Strukturyzuj importy w kolejności: wbudowane moduły, biblioteki zewnętrzne, komponenty wewnętrzne, style. Utrzymuj komponenty małe (poniżej 250 linii), jeden komponent na plik.
6. Unikaj anti-patternów: nie definiuj komponentów wewnątrz innych komponentów, nie używaj indeksów jako kluczy w listach, nie pisz handlersów inline. Zamiast tego wyciągaj statyczne obiekty i JSX poza komponent, aby uniknąć niepotrzebnych renderowań.