Tworzenie aplikacji z użyciem React

Podczas warsztatów uczestnicy nie tylko poznają kluczowe koncepty Reacta, ale przede wszystkim nauczą się budować aplikacje w sposób zgodny z najlepszymi praktykami rynkowymi. W trakcie pracy warsztatowej przejdziemy przez cały proces - od analizy wymagań, przez projekt architektury komponentów, aż po implementację funkcjonalności oraz zarządzanie stanem. Szczególny nacisk położymy na organizację kodu, reużywalność i optymalizację wydajności. Po zakończeniu szkolenia uczestnicy będą gotowi samodzielnie tworzyć rozbudowane interfejsy użytkownika oraz podejmować świadome decyzje projektowe w nowych i istniejących projektach Reactowych.

Program

Wprowadzenie

  1. Charakterystyka i zasada działania biblioteki
  2. Konfiguracja środowiska i narzędzi deweloperskich
  3. JavaScript / TypeScript w kontekście React
  4. Zasada działania Virtual DOM

Podstawy React

  1. Wprowadzenie do składni JSX
  2. Tworzenie, konfigurowanie i renderowanie komponentów
  3. Zarządzanie stanem i jego współdzielenie
  4. Obsługa zdarzeń
  5. Cykl życia komponentów
  6. Debugowanie błędów i rozwiązywanie problemów

React Hooks

  1. Omówienie mechanizmu działania hooków
  2. Dobre praktyki Hooks i typowe pułapki
  3. Niemutowalne zarządzanie stanem z useState i useReducer
  4. Przykłady prawidłowego użycia useEffect w StrictMode
  5. Praca z mutowalnym stanem z useRef - dobre praktyki
  6. Optymalizacja wydajności dzięki hookom useMemo, useCallback, itp.

React w praktyce

  1. Budowanie złożonych widoków
  2. Stylowanie - przegląd rozwiązań, implementacja motywów
  3. Praca z formularzami
  4. Routing
  5. Dobre praktyki
  6. Komunikacja z backend
  7. Strategie zarządzania stanem

Zaawansowany React

  1. Routing, Meta-Frameworki i NextJS
  2. Form Hooks - stan i walidacja formularzy
  3. Server Components, Server Actions i useOptimistic
  4. Memoizacja i optymalizacja
  5. Suspense i lazy

Praca z wybranym mechanizmem zarządzania stanem aplikacji

  1. React Context: Tworzenie dostawcy kontekstu i jego konsumpcja
  2. React Context:Optymalizacja i dobre pratyki

Redux Toolkit Store (opcja)

  1. Omówienie założeń architektury
  2. Modelowanie niemutowalnego stanu, Reduktory
  3. Actions oraz action creators
  4. Integracja z React, Re-selektory
  5. Kiedy Redux a kiedy Context?
  6. Praca z Redux Dev Tools

MobX Observable (opcja)

  1. Omówienie zasady działania MobX State Tree
  2. Praktyczne zastosowania
  3. Praca z DevTools
  4. Przegląd alternatyw: Jotai vs Zustand vs Recoil

Testowanie (opcja)

  1. Konfiguracja jest/vitest z Testing Library
  2. Przykłady użucia selektorów RTL
  3. Mockowanie zależności z jest
  4. Kiedy i co testować - omówienie