frontend-patterns
Sprawdzone wzorce frontendowe dla React i Next.js — komponenty, zarządzanie stanem, optymalizacja wydajności.
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Zbiór praktycznych wzorców do tworzenia interfejsów w React i Next.js. Nauczysz się, jak budować komponenty przez kompozycję zamiast dziedziczenia, implementować komponenty złożone z kontekstem, zarządzać stanem efektywnie i optymalizować wydajność aplikacji. Każdy wzorzec zawiera przykłady kodu TypeScript pokazujące dobre praktyki i typowe błędy do uniknięcia. Idealne dla programistów chcących pisać czystszy, bardziej utrzymywalny kod frontendowy.
Jak używać
Sklonuj repozytorium lub pobierz folder skills/frontend-patterns z gałęzi głównej. Zawiera on kompletną dokumentację wzorców z przykładami TypeScript.
Przejrzyj sekcję Component Patterns, aby zrozumieć różnicę między kompozycją a dziedziczeniem. Przykład Card pokazuje, jak budować komponenty poprzez łączenie mniejszych, wielokrotnie używalnych części zamiast rozszerzania klas.
Zapoznaj się ze wzorcem Compound Components, który demonstruje użycie React Context do zarządzania stanem między powiązanymi komponentami. Przykład Tabs pokazuje, jak tworzyć komponenty, które współpracują ze sobą bez konieczności przekazywania props'ów przez wiele poziomów.
Zastosuj te wzorce w swoim projekcie React lub Next.js, dostosowując przykłady kodu do swoich potrzeb. Każdy wzorzec zawiera zarówno dobre praktyki (oznaczone ✅) jak i błędy do uniknięcia.
Wróć do dokumentacji, gdy pracujesz nad optymalizacją wydajności lub zarządzaniem stanem — zawiera ona konkretne rozwiązania dla typowych wyzwań w aplikacjach frontendowych.