Kurs programisty React

Lekcja 1 • Klasy i prototypy

Wprowadza składnię klas, dziedziczenie i łańcuch prototypów. Zapewnia kontekst do zrozumienia klasowych komponentów React i metod cyklu życia.

Lekcja 2 • Promisy i async/await

Wyjaśnia wykonywanie asynchroniczne, łączenie promisów i składnię async/await. Przygotowuje uczniów do pobierania danych wewnątrz komponentów React.

Lekcja 3 • Podstawy składni ES6

Obejmuje let/const, funkcje strzałkowe, literały szablonowe i destrukturyzację. Te wzorce pojawiają się w każdej bazie kodu React.

Lekcja 4 • Moduły i import/export

Uczy eksportów nazwanych i domyślnych, rozwiązywania modułów i oczekiwań bundlera. Bezpośrednio umożliwia organizację plików komponentów w projektach React.

Lekcja 1 • Konfiguracja projektu React

Przeprowadza przez szkieletowanie projektu z Vite i Create React App, strukturę folderów i korzystanie z serwera deweloperskiego. Uczniowie wychodzą z działającym lokalnym środowiskiem.

Lekcja 2 • Czym jest React i dlaczego

Wyjaśnia wirtualny DOM, deklaratywny interfejs i miejsce React w ekosystemie front-endu. Ustanawia koncepcyjne podstawy dla całej dalszej pracy z React.

Lekcja 3 • Renderowanie list i warunków

Obejmuje renderowanie list z kluczami i wzorce renderowania warunkowego. Są to najczęstsze techniki dynamicznego interfejsu w React.

Lekcja 4 • Składnia JSX i reguły

Obejmuje transpilację JSX, osadzanie wyrażeń i reguły specyficzne dla JSX, takie jak className i tagi samozamykające. Łączy JSX z JavaScriptem, do którego jest kompilowany.

Lekcja 1 • Podnoszenie stanu w górę

Wyjaśnia współdzielenie stanu między komponentami rodzeństwa poprzez przeniesienie go do wspólnego rodzica. Wzmacnia zasadę jednokierunkowego przepływu danych.

Lekcja 2 • Niemutowalne aktualizacje stanu

Omawia, dlaczego React wymaga niemutowalnych aktualizacji i jak je stosować do obiektów i tablic. Zapobiega typowym błędom spowodowanym bezpośrednią mutacją.

Lekcja 3 • Sterowane komponenty formularzy

Uczy sterowanych pól wejściowych, gdzie stan React określa wartości formularza. Umożliwia niezawodną walidację formularzy i obsługę wysyłania.

Lekcja 4 • Podstawy hooka useState

Wyjaśnia inicjalizację stanu, funkcję setter i wyzwalacze ponownego renderowania. useState jest głównym narzędziem do lokalnej interaktywności w komponentach funkcyjnych.

Lekcja 1 • Funkcje czyszczące

Uczy zwracania funkcji czyszczących do anulowania subskrypcji i timerów. Zapobiega wyciekom pamięci w długo żyjących komponentach.

Lekcja 2 • Mechanika hooka useEffect

Obejmuje składnię efektu, tablicę zależności i czas wykonania. Uczniowie zyskują precyzyjną kontrolę nad tym, kiedy efekty są uruchamiane.

Lekcja 3 • Omówienie cyklu życia komponentu klasowego

Mapuje componentDidMount, componentDidUpdate i componentWillUnmount na odpowiedniki useEffect. Przygotowuje uczniów do czytania starszych baz kodu.

Lekcja 4 • Zrozumienie efektów ubocznych

Definiuje efekty uboczne w React i wyjaśnia, dlaczego muszą być izolowane od renderowania. Motywuje potrzebę użycia useEffect.

Lekcja 1 • useMemo i useCallback

Wyjaśnia memoizację wartości i funkcji, aby zapobiec niepotrzebnym przeliczeniom i ponownym renderowaniom. Wprowadza myślenie o optymalizacji wydajności.

Lekcja 2 • useContext dla współdzielonych danych

Uczy tworzenia i korzystania z kontekstu, aby uniknąć przeciągania właściwości. Łączy się ze wzorcami globalnego stanu wprowadzonymi w rozdziale o zarządzaniu stanem.

Lekcja 3 • useReducer dla złożonego stanu

Wprowadza wzorzec reduktora do zarządzania logiką stanu z wieloma akcjami. Przygotowuje uczniów do myślenia w stylu Redux w obrębie jednego komponentu.

Lekcja 4 • useRef i DOM

Obejmuje useRef do dostępu do DOM i przechowywania zmiennych wartości przez renderowania. Umożliwia zarządzanie fokusem, animacje i integrację z bibliotekami zewnętrznymi.

Lekcja 1 • Nawigacja i linki

Uczy Link, NavLink i programowej nawigacji z useNavigate. Umożliwia zarówno deklaratywne, jak i imperatywne wzorce nawigacji.

Lekcja 2 • Konfiguracja i podstawy React Router

Obejmuje komponenty BrowserRouter, Routes i Route do definiowania drzewa nawigacji aplikacji. Ustanawia deklaratywny model routingu.

Lekcja 3 • Zagnieżdżone trasy i layouty

Wyjaśnia zagnieżdżone drzewa Route i komponent Outlet dla współdzielonych layoutów. Zmniejsza duplikację layoutów na powiązanych stronach.

Lekcja 4 • Chronione trasy i strażnicy uwierzytelniania

Implementuje strażników tras, którzy przekierowują nieuwierzytelnionych użytkowników. Stosuje wiedzę o kontekście i routingu razem w realistycznym wzorcu.

Lekcja 1 • Podstawy Redux Toolkit

Wprowadza store, slice i reduktory Redux Toolkit jako nowoczesne podejście do Redux. Zastępuje rozwlekłe klasyczne wzorce Redux.

Lekcja 2 • Wybór odpowiedniego rozwiązania stanu

Porównuje stan lokalny, Context, Redux i Zustand pod kątem złożoności i przypadku użycia. Wyposaża uczniów w podejmowanie decyzji architektonicznych w rzeczywistych projektach.

Lekcja 3 • Context API na dużą skalę

Rozszerza wzorce useContext na stan całej aplikacji z wieloma kontekstami i optymalizacjami wydajności. Omawia, kiedy Context jest wystarczający.

Lekcja 4 • Odczytywanie i zapisywanie stanu Redux

Obejmuje hooki useSelector i useDispatch do interakcji komponentów ze store. Umożliwia komponentom odczytywanie fragmentów i wysyłanie akcji.

Lekcja 1 • Budowanie i wdrażanie aplikacji React

Przeprowadza przez proces budowania produkcyjnego, konfigurację środowiska i wdrażanie na platformy hostingu statycznego. Kończy pełny cykl programowania.

Lekcja 2 • Techniki optymalizacji wydajności

Obejmuje React.memo, leniwe ładowanie i dzielenie kodu w celu zmniejszenia rozmiaru pakietu i kosztu renderowania. Bezpośrednio poprawia postrzeganą przez użytkownika wydajność.

Lekcja 3 • Testowanie komponentów React

Wprowadza React Testing Library i Jest do testów jednostkowych i integracyjnych. Obejmuje renderowanie, zapytania i symulację interakcji użytkownika.

Lekcja 4 • Granice błędów i odporność

Uczy klasowych granic błędów i zastępczych interfejsów, aby zapobiec całkowitym awariom aplikacji. Dodaje odporność produkcyjną do drzew komponentów.