Szkolenia React

Poznaj ogólny program szkolenia z wykorzystaniem TypeScript. Po ustaleniu zakresu szkolenia z konkretną grupą, program jest odpowiednio modyfikowany.

Dzień 1: Start w React

1. Start i konfiguracja (Vite lub Webpack)
2. Po co korzystać z komponentów?
3. JSX vs transpilacja vs kompilacja
4. Sposoby stylowania aplikacji
5. Stan komponentów
6. DOM & Virtual DOM
7. Struktura projektu – dobre praktyki
   1. Podział domenowy, atomic design, pages
   2. Barrels
   3. Exports / default exports
8. Events
   1. Dostępne eventy
   2. Synthetic events
   3. Przekazywanie handlerów do komponentów podrzędnych napisanych w TS
9. Hooks
10. Contexts

Dzień 2: Komponenty w React

1. Contexts cd.
   1. Context provider hook pattern
2. Kompozycja komponentów
3. Tworzenie szablonu aplikacji za pomocą komponentów
4. Komponenty kontrolowane, komponenty niekontrolowane
5. Refy
6. Przepływ danych
7. Cykl życia komponentów
8. Obsługa formularzy – jak rozdzielić odpowiedzialność komponentów
   1. Narzędzia typu react-hook-form
9. Testowanie
   1. Tutaj w zależności od potrzeb: snapshot testing, testowanie black box za pomocą testing library, jest.mock, storybook testing

Dzień 3: React i komunikacja API

1. Kontynuacja tematów z dnia 2 (o ile będzie taka potrzeba).
2. Komunikacja z REST API
   1. fetch i axios – dobre praktyki
   2. Kiedy warto korzystać z Redux’a z przykładami redux-toolkit i RTK Query
3. Własne usługi, sposoby pobierania i przechowywania danych
4. Error handling – błędy API i błędy UI
   1. Error boundaries
   2. Obsługa błędów odpowiedzi z serwera
5. Własna biblioteka do API
6. Hierarchia komponentów i rozdzielenie odpowiedzialności
7. Kontenery i komponenty funkcyjne

Dzień 4: Optymalizacja i popularne antywzorce React

1. Komponenty wyższego rzędu (HoC) – omówienie
2. Compound Components
3. Włane Hooki
4. Render props
5. Popularne antywzorce
6. Dobre praktyki
7. Optymalizacja i dobre praktyki:
   • Memo
   • useMemo
   • useCallback

Dzień 5: Dobre praktyki w React

• Dobre praktyki i antywzorce w React
• Redux (Redux toolkit, RTK Query), dobre praktyki (kiedy używać/nie używać, co trzymać, czego nie)
• E2E testing (Cypress, Playwright), nagrywanie/generowanie scenariuszy
• formularze z react-hook-form, praktyki
• przekazywanie konfiguracji (dla różnych środowisk, jak DEV/STAGING/PROD)
• filtrowanie danych (backed vs fronted), różne podejścia do tematu
• Hook useReducer – dobre praktyki