Toolverse
Wszystkie skille

react-dev

autor: davila7

Typowane komponenty React z gwarancjami na etapie kompilacji

Instalacja

Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.

Instalacja

Szybkie info

Autor
davila7
Kategoria
Frontend
Wyświetlenia
23

O skillu

Skill do budowania komponentów React z TypeScriptem. Obejmuje bezpieczne wzorce dla React 18–19, generyczne komponenty, poprawne typowanie event handlerów, hooków i integrację routerów (TanStack Router, React Router). Wspiera nowe funkcje React 19: Actions, Server Components i hook use(). Użyj go, gdy pracujesz nad typowanymi komponentami, obsługą zdarzeń, formularzami lub migracją na React 19.

Jak używać

  1. Aktywuj skill react-dev w swoim projekcie React z TypeScriptem, gdy planujesz budować komponenty, implementować hooki lub pracować z routingiem. Skill automatycznie zasugeruje się w kontekście React TypeScript, React 19 lub Server Components.

  2. Dla komponentów z referencjami: w React 19 przekaż ref jako zwykłą właściwość zamiast używać forwardRef. Zdefiniuj typ props zawierający opcjonalny ref i rozpakuj go w funkcji komponentu.

  3. Przy obsłudze formularzy: zastąp useFormState na useActionState, który zwraca krotkę [state, formAction, isPending]. Przekaż formAction do atrybutu action formularza.

  4. Dla asynchronicznych danych: użyj hook use() do rozpakowania Promise lub kontekstu wewnątrz komponentu. Komponent zawiesi się do czasu rozwiązania Promise.

  5. Typuj event handlery precyzyjnie: dla onClick użyj React.MouseEvent, dla onChange w input użyj React.ChangeEvent. Generyczne komponenty deklaruj z ograniczeniami typu, np. .

  6. Przy integracji routera: skonsultuj się ze skill'm w kontekście TanStack Router lub React Router, aby uzyskać wzorce typowania dla parametrów trasy i nawigacji.

Podobne skille