React - podstawy

React 16 z najnowszymi trendami: React Context i React Hooks. W tym: useEffect i useState, events, metodach lifecycle, warunkowe wyświetlanie, pętle, formularze

4.0(4)

99% pozytywnych recenzji

Stworzony przez Krystian Czekalski

35,4 zł

40 % taniej

59.00 zł

To najniższa cena z ostatnich 30 dni!

30 dni gwarancji zwrotu pieniędzy

Rozpocznij teraz za darmo, zapłać do 30 dni

Polska obsługa i faktura

Masz pytania dotyczące tego szkolenia ?

Zadaj pytanie autorowi

Odkryj powiązane tematy

React

W cenie szkolenia otrzymasz

calendar_clockBezterminowy dostęp

licenseCertyfikat ukończenia

currency_exchange30 dni gwarancji zwrotu

headset_micWsparcie autora

forumDostęp do grupy dyskusyjnej

database_uploadRegularne aktualizacje

W skrócie

Skondensowany kurs React po polsku – maksimum treści w krótkim czasie.

Context, Hooks (useState, useEffect) oraz różnice między komponentami.

Praktyka: props, state, zdarzenia, formularze, trasy i renderowanie warunkowe.

Od dodania React do strony po Create react app i pełną aplikację.

Dlaczego warto wybrać to szkolenie

Kurs jest skondensowany i skoncentrowany na tym, by przekazać jak najwięcej w krótkim czasie. Uczysz się po polsku, bez zbędnego przedłużania, w oparciu o najnowszy React.

Poznasz Context i Hooks, różnice między komponentami na funkcjach i klasach, props i state, zdarzenia, formularze oraz trasy. Na koniec złożysz zdobytą wiedzę w praktyczną, pełną aplikację.

Szybkie tempo bez lania wody – Skondensowana forma pozwala poznać React w krótkim czasie.
Najnowsze praktyki – Context i Hooks: useState i useEffect w praktyce.
Komponenty od A do Z – Funkcyjne i klasowe, props, state, lifecycle oraz zdarzenia.
Od teorii do aplikacji – Najpierw podstawa, potem kompletna, praktyczna aplikacja.

Czego się nauczysz?

1
Dodanie React do istniejącej stronyZobaczysz, jak wpiąć bibliotekę React do już działającej witryny.
2
Start z Create react appUruchomisz nowy projekt i poznasz podstawową strukturę aplikacji.
3
Komponenty funkcyjne i klasoweZrozumiesz różnice i zastosowania obu podejść na prostych przykładach.
4
Props i statePrzekazywanie danych i zarządzanie stanem w komponentach React.
5
Hooks: useState i useEffectTworzenie stanu i reakcja na zmiany bez użycia klas.
6
React ContextUdostępnianie danych wielu komponentom bez przekazywania ich łańcuchem.
7
Zdarzenia i lifecycleObsługa zdarzeń użytkownika i omówienie metod cyklu życia komponentów.
8
Renderowanie warunkowe i pętleWyświetlanie zawartości warunkowo oraz iterowanie list.
9
Formularze i trasy (routes)Praca z danymi z formularzy i nawigacja między widokami w aplikacji.
10
Nowoczesny JS i stylemap, filter, reduce, operator trójkowy, spread i arrow functions; CSS Grid, Flex, media query.

Zobacz więcej Zobacz mniej

Dla kogo jest to szkolenie

Osób, które chcą szybko poznać podstawy React.
Programistów JavaScript przechodzących na React.
Studentów uczących się frontendu na praktycznych przykładach.
Tych, którzy chcą zrozumieć Hooks i Context.
Tworzących aplikacje od zera w Create react app.
Dodających React do istniejącej strony WWW.
Chcących uporządkować props, state i lifecycle.
Szukających podstaw formularzy, tras i renderowania warunkowego.

Wymagania

Nie określono wymagań wstępnych.

Opis szkolenia

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.

Zobacz więcej Zobacz mniej