Szkolenie React z Copilotem

Konfiguracja środowiska

• VS Code + GitHub Copilot + Copilot Chat
• Instalacja, aktywacja, integracja z repozytorium
• Praca z prompty w kontekście pliku, folderu, projektu
• Bezpieczne użycie Copilota: testy, linting, kontrola jakości

Zasady pracy z AI

• Prompt engineering i context engineering
• Vibe coding – nie zastępstwo, ale współpraca z AI jako partnerem
• AI-driven process: draft → refine → verify → integrate
• Filary pracy z Copilot: spójność, jakość, bezpieczeństwo

Copilot i Copilot Chat w praktyce

• Jak działa Copilot (model kontekstowy, autouzupełnianie, agent)
• Copilot Chat – praca w kontekście kodu, repozytorium, terminala
• Praca z Agentami i narzędziami Model Context Protocol
• Typy promptów: Implement, Explain, Refactor, Add tests, Improve performance
• Generowanie kodu, testów i dokumentacji z Copilot
• Refaktoryzacja i weryfikacja kodu z pomocą Copilot Chat

Konfiguracja i środowisko

• Node.js i NPM – wersjonowanie, uruchamianie skryptów
• EcmaScript 2015+ (ES6+) i najważniejsze konstrukcje
• TypeScript w kontekście Reacta
  • Typowanie propsów, stanu, funkcji i hooków
  •  Unie, typy generyczne, typy mapowane w praktyce
  •  Generowanie i inferowanie typów
• Automatyczne generowanie konfiguracji i struktury projektu
• React i Virtual DOM – architektura i zasady renderowania
• JSX – składnia, zasady interpolacji i typowanie elementów JSX

Komponenty

• Model mentalny kompozytu aplikacji, podział na komponenty
• Własności komponentu i ich typowanie
• Spójny stylowania dla Copilot’a (CSS Modules, Utility First, Tokens)
• Renderowanie warunkowe i zawężanie typów
• Obsługa i typowanie zdarzeń użytkownika
• Stan własny i stan pochodny komponentu
• Komunikacja pomiędzy komponentami – przekazywanie zdarzeń i danych
• Cykl życia komponentu i jego odwzorowanie w hookach
• Wizualizacja danych w React – Diagramy, wykresy, itp.

React Hooks

• Czym są hooki i jak działają – model reaktywny
• useState – stan lokalny, niemutowalność i rerenderowanie
• useEffect – efekty uboczne i cleanup
• useMemo, useCallback – optymalizacja renderowania
• useRef – referencje do elementów mutowalnych i DOM
• Custom hooks – refaktoryzacja logiki poza komponent
• Typowe pułapki i dobre praktyki
• Linters i prompts do weryfikacji poprawności hooków

Komunikacja z serwerem

• Model Asynchroniczności i Promises (async/await)
• Pobieranie danych z JSON REST API
• Typowanie API, Generowanie typów (np. FastAPI Swagger)
• Obsługa błędów i stanów ładowania
• Autentykacja i autoryzacja (tokeny, headers, interceptory)
• Ograniczanie liczby zapytań z debounce i AbortController
• Konteksty i centralne zarządzanie zapytaniami z React Query
• Custom hook do komunikacji z API
• Konteksty, prompty i szablony do pracy z API

Nawigacja SPA

• Zasady działania SPA (Single Page Application)
• Instalacja i konfiguracja React Router
• Komponenty: Router, Link, Outlet, Navigate
• HashRouter vs BrowserRouter (pushState API)
• Przekazywanie parametrów i stanów pomiędzy trasami
• React Router hooks: useNavigate, useParams, useLocation
• Dobre praktyki nawigacji i organizacji routingu
• Generowanie struktury nawigacji

Publikacja aplikacji

• Build – Generowanie paczki produkcyjnej
• Środowiska – Różnice między buildem developerskim a produkcyjnym
• Czynniki wpływające na wydajność i czas ładowania
• Optymalizacja rozmiaru paczki: code splitting, lazy loading
• Automatyzacja deploymentu z AI – wprowadzenie do CI/CD
• Podsumowanie