Szkolenie React

React 19 to nie ten sam React, którego uczono kilka lat temu. Akcje, nowe hooki do formularzy i React Compiler zmieniają sposób pisania komponentów, a większość danych w aplikacji to dziś stan serwera, nie globalny store.

Na szkoleniu budujesz jedną aplikację od pustego projektu. Dowiesz się, gdzie trzymać który stan, i zobaczysz, że w wielu projektach globalny store nie jest w ogóle potrzebny. Jeśli Twój zespół go potrzebuje, możesz dobrać czwarty dzień z Redux Toolkit.

Program

3 dni (+ 1 dzień z modułem Redux Toolkit)

• Start projektu
  • Vite, TypeScript, struktura katalogów
  • React DevTools
• JSX
  • Wyrażenia, warunki i listy w markupie
  • Stylowanie: CSS Modules, klasy warunkowe
• Komponenty
  • Propsy, stan lokalny, komunikacja rodzic - dziecko
  • Kompozycja i children
  • Typowanie propsów i zdarzeń w TypeScript
• Hooki
  • useState, useEffect, useRef
  • Kiedy useEffect nie jest potrzebny
  • Własne hooki
• Stan aplikacji
  • Stan lokalny, współdzielony i pobierany z serwera
  • Kontekst (useContext) i jego ograniczenia
  • Kiedy sięgnąć po bibliotekę do stanu globalnego
• Pobieranie danych
  • TanStack Query: zapytania, mutacje, cache
  • Stany ładowania i błędów: Suspense i error boundaries
  • API use: odczyt Promise i kontekstu
• Formularze w React 19
  • Akcje, useActionState i useFormStatus
  • Optymistyczny interfejs z useOptimistic
• Routing
  • React Router 8 w trybie deklaratywnym: trasy, parametry, zagnieżdżenia
  • Ochrona tras
• Wydajność
  • React Compiler: włączenie w Vite i kiedy nie potrzebujesz już memo, useMemo i useCallback
  • Lazy loading i dzielenie kodu
• Nowe API Reacta 19.2 i 19.3
  • useEffectEvent: zdarzenia w efektach bez nieaktualnych domknięć
  • <ViewTransition>: animowane przejścia między widokami
• Testowanie
  • Vitest i React Testing Library
  • Testy komponentów i hooków
• Moduł opcjonalny: stan globalny w Redux Toolkit (+1 dzień)
  • Kiedy Redux ma sens, a kiedy wystarczy stan serwera i kontekst
  • Store, slice, akcje i reducery
  • Selektory i useSelector
  • Asynchroniczność: createAsyncThunk i RTK Query
  • Redux DevTools
  • Testy slice’ów i komponentów podłączonych do store’a

Testy omawiam szerzej na szkoleniu Testy w React, a dalszym krokiem po tym szkoleniu jest Next.js.

Dla kogo?

• Dla programistów JavaScript, którzy zaczynają pracę z Reactem.
• Dla programistów Angulara lub Vue, którzy przechodzą na Reacta.
• Dla osób, które znają starszego Reacta i chcą nadrobić React 19. Zapytaj o wariant 2-dniowy bez modułów Start projektu, JSX i Komponenty.
• Dla zespołów, które porządkują zarządzanie stanem w aplikacji (z modułem Redux Toolkit).

Co musisz umieć?

• Programować w JavaScript: funkcje, obiekty, tablice, async/await.
• Znać podstawy HTML i CSS.
• TypeScriptu nie musisz znać, podstawy typowania poznasz w trakcie.

Czego się nauczysz?

• Zbudujesz aplikację w React i TypeScript od pustego projektu.
• Rozdzielisz stan na lokalny, współdzielony i pobierany z serwera.
• Pobierzesz dane z API przez TanStack Query z cache i obsługą błędów.
• Obsłużysz formularze akcjami React 19 z optymistycznym interfejsem.
• Zbudujesz nawigację w React Router z chronionymi trasami.
• Ograniczysz zbędne renderowania React Compilerem i podzielisz kod lazy loadingiem.
• Użyjesz nowych API Reacta: useEffectEvent i <ViewTransition>.
• Napiszesz testy komponentów w Vitest i Testing Library.
• Z modułem opcjonalnym: zaprojektujesz store w Redux Toolkit i podłączysz go do komponentów.

Trener

Piotr Kowalski

W branży IT od 2008 roku. Od 2014 jest mentorem dla wielu developerów. Jako trener spędził na sali szkoleniowej kilka tysięcy godzin, a na LinkedIn ma 52 rekomendacje. Każde jego szkolenie to dawka solidnej wiedzy oraz humoru.

Więcej na stronie "O mnie"