react-patterns
Wzorce i zasady React dla aplikacji produkcyjnych – hooki, composition, TypeScript
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Umiejętność zawierająca nowoczesne wzorce budowania aplikacji React. Dowiedz się, kiedy stosować hooki, jak organizować komponenty według odpowiedzialności, oraz jakie rozwiązania wybrać do zarządzania stanem – od prostych useState po zaawansowane Zustand czy Redux Toolkit. Zawiera też praktyczne porady dotyczące React 19, composition patterns i best practices z TypeScript.
Jak używać
Zainstaluj umiejętność react-patterns w swoim środowisku Claude lub kompatybilnym agencie. Umiejętność wymaga dostępu do narzędzi Read, Write, Edit, Glob i Grep do pracy z plikami projektów React.
Kiedy pracujesz nad komponentem, zapytaj się o odpowiedni wzorzec – na przykład "Jaki typ komponentu powinienem użyć do tego ekranu?" lub "Kiedy wyodrębnić custom hook?". Umiejętność podpowie Ci, czy potrzebujesz Server Component, Client Component, Presentational czy Container Component.
Przy zarządzaniu stanem opisz złożoność Twojego problemu. Umiejętność pomoże Ci wybrać między useState, Context, React Query/SWR, a zaawansowanymi rozwiązaniami jak Zustand czy Redux Toolkit.
Jeśli pracujesz z hookami, zapytaj o reguły i wzorce – na przykład kiedy wyodrębnić useLocalStorage, useDebounce, useFetch czy useForm. Umiejętność wyjaśni, kiedy każdy z nich ma sens.
Dla React 19 pytaj o nowe hooki takie jak useActionState, useOptimistic czy use – umiejętność pokaże, jak je stosować i jakie korzyści daje nowy compiler.
Stosuj composition patterns – compound components, render props czy custom hooks – zamiast dziedziczenia. Umiejętność podpowie, jak elastycznie budować komponenty poprzez composition.