To skondensowane szkolenie wprowadza w świat React bez zbędnego przedłużania. Poznasz najnowszy React wraz z trendami takimi jak Context i Hooks, w tym useState i useEffect. Omówimy komponenty na funkcjach i klasach, props, state, zdarzenia oraz metody lifecycle. Nauczysz się wyświetlać zawartość warunkowo, pracować z pętlami, formularzami i trasami. Dopełnieniem są nowoczesne techniki JavaScript i stylowanie z CSS Grid, Flex i media queries.

Start: od strony WWW do Create react app

Zaczynasz od solidnego startu: najpierw dodasz bibliotekę React do istniejącej strony internetowej lub aplikacji webowej. Dzięki temu zobaczysz, jak w prosty sposób osadzić React tam, gdzie już masz gotowy kod. Następnie uruchomisz projekt od zera z użyciem narzędzia Create react app. Poznasz strukturę plików i sposób uruchamiania aplikacji. Ten etap daje ogląd dwóch ścieżek pracy: integracji z zastanym projektem oraz rozpoczęcia zupełnie nowej aplikacji, co ułatwia dalszą naukę i porównanie podejść.

Komponenty, props i state

Poznasz dwa sposoby tworzenia interfejsu: komponenty na funkcjach i na klasach. Wyjaśnimy różnice między nimi i to, kiedy które podejście bywa wygodniejsze. Przećwiczysz przekazywanie danych do komponentów za pomocą props oraz przechowywanie danych lokalnie w stanie komponentu. Zobaczysz, jak strukturą komponentów budować czytelny interfejs, a także jak planować przepływ danych, aby uniknąć chaosu. Omówimy także metody lifecycle, czyli momenty, w których komponent reaguje na zmiany i może wykonać dodatkowe działania.

Hooks i React Context

Nowy rozdział to praca z najnowszymi trendami w React: Hooks oraz Context. Zaczniesz od useState, aby tworzyć i aktualizować stan w komponentach funkcyjnych. Następnie useEffect pokaże, jak reagować na zmiany, wykonywać efekty i porządkować kod bez użycia klas. React Context posłuży do współdzielenia danych między wieloma komponentami bez potrzeby przekazywania props na każdym poziomie. Dzięki temu uprościsz komunikację w aplikacji i zyskasz czytelny, spójny przepływ informacji.

Zdarzenia, formularze, trasy

W kolejnej części skupisz się na interakcji. Nauczysz się obsługi zdarzeń, aby reagować na działania użytkownika. Pokażemy, jak tworzyć formularze, zbierać dane i aktualizować stan na podstawie wpisów. Zajmiemy się też wyświetlaniem zawartości warunkowo oraz budowaniem list przy użyciu pętli, aby dynamicznie prezentować informacje. Dopełnieniem są trasy (routes), czyli podział aplikacji na widoki i nawigacja między nimi, co pozwala porządkować rozbudowane interfejsy.

Nowoczesny JavaScript i style

Równolegle utrwalisz nowoczesne techniki JavaScript, które przyspieszają pracę z React. Przećwiczysz operator trójkowy oraz popularne funkcje map, filter i reduce, a także składnię EcmaScript 6, w tym spread operator i arrow functions. Zobaczysz, jak te narzędzia upraszczają kod komponentów. Będziesz też pracować ze stylami: CSS Grid i Flex ułatwią układ, a media queries pozwolą dopasować widok do różnych ekranów. Zwieńczeniem całości jest praktyczna, pełna aplikacja zbudowana w drugiej części kursu.