Tworzenie aplikacji w React i Redux

Najbliższe terminy tego szkolenia
Skuteczność
Program szkolenia
- Podstawy ES6
Zanim zaczniemy tworzyć naszą aplikację, przypomnimy sobie pokrótce podstawy ES6
- Let i const
- Fat arrow function
- Klasy
- Spread/rest operator
- Template string
- Import i export
- React - Wstęp
React re-start, czyli przypomnienie podstawowych założeń, instalacja odpowiednich narzędzi i szybkie wyświetlenie hello world na potwierdzenie, że jesteśmy gotowi do pracy
- Główne założenia React
- Przygotowanie środowiska pracy
- “Hello world” w React
- React Developer Tools
- JSX
JSX to rozszerzenie JavaScript, które umożliwia tworzenie elementów DOM za pomocą składni przypominającej HTML.
- Podstawy JSX
- Wyrażenia
- Atrybuty
- Inne elementy renderowalne (Portals, React.Fragments)
- Klucze
- Komponenty
Komponenty to jedna z najważniejszych rzeczy w React. W tej części dowiemy się czym są, jak je tworzyć i jak się nimi biegle posługiwać.
- Czym jest komponent?
- Komponenty funkcyjne
- Komponenty klasowe
- Komponenty funkcyjne kontra klasowe
- Props
- Komponent jako pure function
- Cykl życia komponentu
- State
- Eventy
Tworzenie eventów w React jest bardzo proste czego dowiemy się w tej części. Dodatkowo eventy w React mają jeszcze jedną ciekawą właściwość - pomagają w komunikacji pomiędzy komponentami.
- Rodzaje eventów
- Tworzenie eventów - bindowanie i this
- Arrow function jako metoda eventu
- Inline arrow function jako metoda eventu
- Przekazywanie argumentów do eventów
- Przekazywanie eventów do komponentów dzieci
- Warunkowe renderowanie
Czym jest instrukcja warunkowa if, wie każdy kto chociaż trochę poznał podstawy programowania, ale w tej części skupimy się na kilku prostych zasadach dotyczących warunkowego renderowania lub blokowania elementów i komponentów.
- Instrukcja warunkowa if
- Operator warunkowy
- Logiczny operator &&
- Blokowanie wyświetlania komponentów
- Formularze
Formularze to bardzo przyjemny rozdział w React, a to dzięki spójności w tworzeniu i obsłudze elementów formularza.
- Komponenty kontrolowane
- Jedyne źródło prawdy (single source of truth )
- Input
- Select
- Textarea
- Obsługa wielu elementów formularza
- Komponenty niekontrolowane
- Atrybut ref
- Domyślne wartości elementów formularzy
- Komponenty kontrolowane
- Kompozycja
W dokumentacji Reacta jest napisane, że programiści podczas tworzenia Facebooka nigdy nie musieli korzystać ze standardowego dziedziczenia. W każdej sytuacji kompozycja sprawdzała się idealnie. W tej części porozmawiamy na temat kompozycji.
- Kompozycja kontra dziedziczenie
- props.children
- React Router
Dzięki bibliotece React Router będziemy mogli serwować odpowiednie komponenty pod określonymi adresami. Dowiemy się również w jaki sposób przekazywać parametry z adresu URL do komponentów.
- Instalacja potrzebnych paczek
- Routing podstawy
- Generowanie strony 404
- Linki
- Zagnieżdżanie ścieżek
- Przekazywanie parametrów
- Redux
Redux pozwala nam zarządzać stanem aplikacji. W tej części poznamy sposoby na takie zarządzanie dzięki implementacji architektury Flux w postaci Reduxa.
- Architektura Flux
- Czym jest Redux?
- Redux i React
- Głupie i mądre komponenty czyli Presentational and Container Components
- Tworzenie i obsługa akcji
- Reducery
- Store
- Przepływ danych w aplikacji
- Integracja z React Router
- Testowanie
Testowanie komponentów React-owych oraz samego Reduxa nie jest takie oczywiste. W tej części poznamy odpowiednie narzędzia, które sprawią, że testowanie będzie czystą przyjemnością
- Instalacja odpowiednich narzędzi (Jest & Enzyme)
- Przykładowa aplikacja React & Redux do testowania
- Struktura testów
- Testowanie komponentów
- Warsztat końcowy
Na koniec zaczynamy pracę nad praktycznym połączeniem całej dotychczasowej wiedzy - tworząc konkretny projekt.
Opis szkolenia
Szkolenie odbywa się na żywo z udziałem trenera. Nie jest to forma kursu video!- znają JavaScript w stopniu co najmniej średnio-zaawansowanym
- znają w stopniu podstawowym HTML i CSS
- Pisały testy automatyczne do kodu
- chciałyby zgłębić wiedzę w zakresie zaawansowanych technik tworzenia interaktywnych aplikacji
- JavaScript - poziom średnio-zaawansowany
- podstawy HTML i CSS
- podstawy React
- podstawy testowania automatycznego

Sprawdź, co mówią o nas ci, którzy nam zaufali
Trenerzy kategorii JavaScript





