Wzorce rozwoju React

Opanuj rozwój React z asystą AI używając sprawdzonych wzorców i przepływów pracy dla Cursor i Claude Code. Te przepisy obejmują wszystko od tworzenia komponentów po zarządzanie stanem, testowanie i optymalizację wydajności.

Szybka konfiguracja projektów React

Inicjalizacja projektu React z asystą AI

Cursor

1. Otwórz Cursor i utwórz nowy projekt
2. Otwórz tryb Agent (Cmd/Ctrl + I)
3. Prompt: “Użyj Context7 aby pobrać najnowszą dokumentację Vite. Utwórz nowy projekt React TypeScript z Vite, Tailwind CSS i konfiguracją testową używając aktualnych najlepszych praktyk”
4. Włącz tryb YOLO aby pozwolić Cursor uruchomić wszystkie polecenia konfiguracji automatycznie
5. Przejrzyj wygenerowaną strukturę projektu i pliki konfiguracyjne

Claude Code

1. Przejdź do katalogu projektów
2. Uruchom claude aby uruchomić Claude Code
3. Włącz Figma MCP jeśli używasz projektów: claude mcp add figma --transport sse http://127.0.0.1:3845/sse
4. Użyj: “Użyj Context7 aby pobrać najnowszą dokumentację Vite i Vitest. Utwórz nowy projekt React TypeScript z Vite, Tailwind CSS, vitest do testowania i właściwą strukturę folderów podążając za aktualnymi najlepszymi praktykami”
5. Claude wykona wszystkie niezbędne polecenia i utworzy strukturę projektu
6. Uruchom /init aby utworzyć plik CLAUDE.md z wytycznymi specyficznymi dla React

Konfiguracja kontekstu AI dla React

Konfiguracja integracji Figma

.mcp.json

{
  "mcpServers": {
    "figma": {
      "type": "sse",
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

Utwórz pliki kontekstu aby pomóc AI zrozumieć twoje wzorce React:

.cursor/rules/react-patterns.md

# Zasady rozwoju React

## Standardy komponentów
- Używaj komponentów funkcyjnych z TypeScript
- Preferuj named exports dla komponentów
- Utrzymuj komponenty poniżej 150 linii
- Wyodrębniaj niestandardowe hooki dla ponownego użycia logiki

## Zarządzanie stanem
- Używaj React Query/TanStack Query dla stanu serwera
- Zustand dla globalnego stanu po stronie klienta
- Stan lokalny z useState dla danych specyficznych dla komponentu

## Wymagania testowe
- Pisz testy dla wszystkich komponentów używając vitest i @testing-library/react
- Minimum 80% pokrycia dla logiki biznesowej
- Testuj interakcje użytkownika, nie szczegóły implementacji

Wzorce rozwoju komponentów

Tworzenie nowych komponentów

Z projektu

Scenariusz: Konwertuj projekt Figma na komponent React

Używając serwera Figma MCP:

# Włącz Figma MCP w swojej aplikacji desktop Figma
# Preferencje > Enable Dev Mode MCP Server

# Dodaj Figma MCP do Claude Code
claude mcp add figma --transport sse http://127.0.0.1:3845/sse

# Lub dodaj do Cursor
# Ustawienia > MCP > Dodaj serwer > URL: http://127.0.0.1:3845/sse

Przepływ pracy Cursor z Figma MCP:

1. Wybierz komponent w Figma (z uruchomionym serwerem MCP)
2. W Cursor: “Używając serwera Figma MCP, wygeneruj komponent React z mojego obecnego wyboru Figma. Użyj TypeScript i Tailwind CSS”
3. AI użyje get_code aby pobrać dokładną strukturę projektu
4. Przejrzyj wygenerowany komponent z właściwymi tokenami projektu

Alternatywny przepływ pracy ręczny:

1. Zrób zrzut ekranu projektu Figma
2. Przeciągnij obraz do czatu Cursor
3. Prompt: “Utwórz komponent React na podstawie tego projektu. Użyj TypeScript, Tailwind CSS do stylowania i zrób go responsywnym”
4. Przejrzyj wygenerowany komponent
5. Zapytaj: “Dodaj właściwe typy TypeScript i zrób komponent wielokrotnego użytku z props”

Przepływ pracy Claude Code:

1. Zapisz zrzut ekranu projektu w swoim projekcie
2. Odwołaj się do niego: “Spójrz na design.png i utwórz komponent React, który pasuje do tego projektu. Użyj TypeScript, Tailwind CSS i upewnij się, że jest w pełni responsywny”
3. Claude przeanalizuje obraz i wygeneruje komponent
4. Kontynuuj: “Dodaj historie Storybook dla tego komponentu z różnymi stanami”

Z wymagań

Scenariusz: Zbuduj komponent tabeli danych z sortowaniem i filtrowaniem

Przykładowy prompt:

Utwórz komponent DataTable wielokrotnego użytku z tymi funkcjami:
- TypeScript z właściwymi generics dla typu danych wiersza
- Sortowanie kolumn (kliknij nagłówek aby sortować)
- Filtrowanie tekstu dla każdej kolumny
- Paginacja z konfigurowalnym rozmiarem strony
- Stany ładowania i pustej tabeli
- Użyj Tailwind CSS do stylowania
- Zrób go dostępnym z właściwymi etykietami ARIA

Przepływ pracy ulepszania:

1. Wygeneruj podstawowy komponent
2. Wyodrębnij tokeny projektu: “Używając Figma MCP, pobierz wszystkie zmienne projektu (kolory, odstępy, typografia) używane w tym komponencie”
3. Dodawaj funkcje stopniowo: “Dodaj selekcję wierszy z kolumną checkbox”
4. Optymalizuj: “Dodaj wirtualizację dla dużych zestawów danych używając @tanstack/react-virtual”
5. Testuj: “Napisz kompleksowe testy dla logiki sortowania i filtrowania”

Refaktoryzacja komponentów klasowych do hooków

Podejście trybu Agent Cursor:

Mam komponent klasowy w UserProfile.tsx, który musi być konwertowany na komponent funkcyjny z hookami.
Proszę:
1. Konwertuj wszystkie metody lifecycle na useEffect
2. Konwertuj stan na useState
3. Wyodrębnij złożoną logikę do niestandardowych hooków
4. Zachowaj całą istniejącą funkcjonalność
5. Aktualizuj testy aby działały z nową implementacją

Notatka

💡 Wskazówka: Używaj funkcji checkpoint Cursor przed większą refaktoryzacją. To pozwala bezpiecznie eksperymentować i cofnąć się w razie potrzeby.

Przepisy zarządzania stanem

Konfiguracja store Zustand

Przykład promptu Cursor

# Najpierw pobierz najnowsze wzorce Zustand
Użyj Context7 aby pobrać dokumentację Zustand i najlepsze praktyki

# Następnie utwórz store podążając za aktualnymi wzorcami
Utwórz store Zustand do zarządzania uwierzytelnianiem użytkownika z:
- Danymi profilu użytkownika
- Akcjami login/logout
- Persist do localStorage
- Typy TypeScript dla całego stanu i akcji
- Selektory dla często dostępnych danych
- Integracja DevTools

Integracja React Query

Przepis Claude Code:

# Najpierw pobierz najnowszą dokumentację React Query
Użyj Context7 aby pobrać dokumentację TanStack Query dla v5

# Następnie implementuj na podstawie aktualnych najlepszych praktyk
Skonfiguruj React Query w naszej aplikacji z:
1. Skonfiguruj QueryClient z sensownymi domyślnymi ustawieniami
2. Utwórz niestandardowe hooki dla naszych endpointów API
3. Dodaj optymistyczne aktualizacje dla mutacji
4. Implementuj właściwą obsługę błędów
5. Skonfiguruj wzorce unieważniania zapytań

Integracja systemu projektowego

Używanie Figma Code Connect

# PRD: Integruj system projektowy Figma z codebase React
# Plan: Użyj Figma Code Connect do mapowania komponentów

"Używając Figma MCP z włączonym Code Connect:
1. Pobierz mapowania code connect dla komponentów systemu projektowego
2. Wygeneruj komponenty React, które używają naszej istniejącej biblioteki komponentów
3. Wyodrębnij i zastosuj tokeny projektowe konsekwentnie"

# Przykładowy przepływ pracy
"Wybierz komponent Button w Figma i wygeneruj kod React, który:
- Używa naszego istniejącego komponentu Button z '@/components/ui'
- Stosuje właściwy wariant na podstawie właściwości Figma
- Używa naszego systemu tokenów projektowych dla kolorów i odstępów"

Wyodrębnianie tokenów projektowych

// Użyj Figma MCP aby wyodrębnić tokeny projektowe
"Używając Figma MCP get_variable_defs:
1. Wylistuj wszystkie tokeny kolorów używane w wybranym projekcie
2. Wylistuj tokeny odstępów i typografii
3. Wygeneruj plik konfiguracji motywu"

// Przykładowe wyjście
export const theme = {
  colors: {
    primary: {
      blue: '#1D4ED8', // Z Figma: Primary/Blue
      dark: '#1E40AF'  // Z Figma: Primary/Dark
    },
    neutral: {
      gray90: '#1A1A1A' // Z Figma: Neutral/Gray90
    }
  },
  spacing: {
    sm: '8px',   // Z Figma: Spacing/S
    md: '16px',  // Z Figma: Spacing/M
    lg: '24px'   // Z Figma: Spacing/L
  }
};

Zaawansowane wzorce

Optymalizacja wydajności

1. Identyfikuj problemy wydajnościowe

   • Cursor: “Analizuj MyComponent.tsx pod kątem potencjalnych problemów wydajnościowych i zasugeruj optymalizacje”
   • Claude Code: “Przejrzyj cały katalog components i zidentyfikuj komponenty, które mogłyby skorzystać z React.memo, useMemo lub useCallback”

2. Implementuj optymalizacje

   Optymalizuj komponent ProductList:
   - Dodaj React.memo z właściwą funkcją porównania
   - Użyj useMemo dla kosztownych kalkulacji
   - Implementuj wirtualizację dla listy
   - Dodaj lazy loading dla obrazów

3. Weryfikuj ulepszenia

   • Generuj testy wydajności
   • Dodaj markery React DevTools Profiler
   • Utwórz benchmarki dla krytycznych ścieżek
   • Użyj Context7 aby pobrać najnowsze wzorce optymalizacji React

Biblioteka niestandardowych hooków

Budowanie kolekcji niestandardowych hooków:

Przepływ pracy Cursor

1. Utwórz nowy plik: src/hooks/index.ts
2. Prompt Agent: “Utwórz kolekcję przydatnych niestandardowych hooków dla naszej aplikacji React zawierającą useDebounce, useLocalStorage, useFetch, useIntersectionObserver i useMediaQuery. Zawieraj typy TypeScript i komentarze JSDoc”
3. Dla każdego hooka zapytaj: “Dodaj kompleksowe testy dla hooka useDebounce”

Przepływ pracy Claude Code

1. Użyj trybu planowania: /think Utwórz dobrze zorganizowaną bibliotekę niestandardowych hooków
2. Wykonaj: “Utwórz niestandardowe hooki w oddzielnych plikach pod src/hooks/ z właściwymi eksportami, typami TypeScript, testami i dokumentacją”
3. Wygeneruj przykłady użycia: “Utwórz stronę showcase hooków demonstrującą każdy niestandardowy hook”

Wzorce testowania

Strategia testowania komponentów

Przepis testowania

// Prompt Cursor/Claude Code:
Napisz kompleksowe testy dla komponentu UserDashboard:
1. Testuj stany ładowania
2. Testuj stany błędów
3. Testuj pomyślne renderowanie danych
4. Testuj interakcje użytkownika (kliknięcia, przesyłanie formularzy)
5. Testuj wymagania dostępności
6. Mockuj wywołania API właściwie
7. Używaj najlepszych praktyk @testing-library/react

Testowanie integracji

Testowanie interakcji między komponentami:

Utwórz testy integracji dla przepływu checkout:
- Testuj cały przepływ od koszyka do płatności
- Mockuj odpowiedzi API dla różnych scenariuszy
- Testuj odzyskiwanie po błędach
- Weryfikuj właściwe aktualizacje stanu między komponentami
- Testuj stany ładowania między krokami

Wzorce React Native

Rozwój komponentów wieloplatformowych

Biblioteka współdzielonych komponentów:

# PRD: Potrzebuję komponentu przycisku wieloplatformowego
# Plan: Użyj Context7 aby zbadać wzorce React Native Web
# Todo:
1. Użyj Context7 aby pobrać dokumentację React Native dla komponentów wieloplatformowych
2. Utwórz komponent Button, który działa zarówno w React web, jak i React Native:
   - [ ] Użyj współdzielonego pliku typów
   - [ ] Utwórz implementacje specyficzne dla platform
   - [ ] Eksportuj z wspólnego pliku index
   - [ ] Zawieraj właściwe stylowanie dla każdej platformy
   - [ ] Dodaj historie Storybook dla web
   - [ ] Dodaj przykłady dla React Native

Typowe pułapki i rozwiązania

Unikanie nadmiernego renderowania

Wzorzec diagnozy i naprawy:

1. Identyfikuj: “Znajdź komponenty w naszej aplikacji, które mogą się niepotrzebnie re-renderować”
2. Analizuj: “Dodaj console.logs lub integrację React DevTools Profiler aby śledzić renderowania”
3. Napraw: “Implementuj właściwą memoizację i podnoszenie stanu gdzie potrzeba”
4. Weryfikuj: “Utwórz testy aby upewnić się, że liczba renderowań pozostaje optymalna”

Zarządzanie efektami ubocznymi

Najlepsze praktyki useEffect:

Przejrzyj wszystkie hooki useEffect w katalogu components/ i:
1. Upewnij się o właściwe tablice zależności
2. Dodaj funkcje czyszczenia gdzie potrzeba
3. Zidentyfikuj efekty, które powinny być zamiast tego obsługiwane przez zdarzenia
4. Podziel złożone efekty na mniejsze, skoncentrowane
5. Dodaj komentarze wyjaśniające dlaczego każdy efekt jest niezbędny

Optymalizacja wdrożenia i buildu

Konfiguracja buildu produkcyjnego

Lista kontrolna optymalizacji:

Przygotuj naszą aplikację React do produkcji:
1. Skonfiguruj code splitting z React.lazy
2. Skonfiguruj właściwe tree shaking
3. Optymalizuj rozmiar pakietu z dynamicznymi importami
4. Skonfiguruj właściwe nagłówki cache'owania
5. Skonfiguruj granice błędów
6. Dodaj monitorowanie wydajności
7. Utwórz skrypt analizy pakietu

Następne kroki

• Eksploruj wzorce Vue.js dla alternatywnych podejść frameworka
• Sprawdź wzorce Next.js dla aplikacji React full-stack
• Naucz się o wzorcach testowania dla kompleksowego zapewnienia jakości

Wskazówka

Pamiętaj aby zawsze przeglądać kod React wygenerowany przez AI pod kątem:

• Właściwego zarządzania zależnościami w hookach
• Zgodności z dostępnością
• Implikacji wydajnościowych
• Względów bezpieczeństwa (zapobieganie XSS)
• Wielokrotnego użycia komponentów