Tworzenie interaktywnych aplikacji internetowych w React - techniki zaawansowane

Najbliższe terminy tego szkolenia
Skuteczność
Program szkolenia
- React - Wstęp
- łówne założenia React
- Przygotowanie środowiska pracy
- “Hello world” w React
- React Developer Tools
- Elementy renderowalne
- Wstęp - co możemy renderować w React 16.x?
- React bez JSX
- JSX - Wyrażenia
- JSX- Zaawansowane atrybuty (style, value, contenteditable, dangerouslySetInnerHTML)
- React.Fragment
- Portals
- Komponenty
- Komponenty funkcyjne kontra klasowe
- Props
- Komponent jako pure function
- Stan komponentu
- Inicjalizacja stanu komponentu
- Aktualizacja stanu komponentu
- Cykl życia komponentu
- Inicjalizacja - constructor()
- Renderowanie - render()
- Zamontowanie - componentDidMount()
- Aktualizacja
- componentDidUpdate()
- shouldComponentUpdate()
- static getDerivedStateFromProps
- Odmontowanie - componentWillUnmount()
- Komponenty zaawansowane
- Komponenty wyższego rzędu - Higher-Order Components
- Sprawdzanie typów - PropTypes
- Komunikacja komponentów : dziecko - rodzic oraz rodzeństwo
- React Router
- 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
- Instalacja odpowiednich narzędzi (Jest & Enzyme)
- Przykładowa aplikacja React & Redux do testowania
- Struktura testów
- Testowanie komponentów
- Warsztat końcowy
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.
Korzystanie z React-a bez JSX jest możliwe, tylko po co? W tej części przypomnimy podstawy JSX oraz dowiemy się jakie elementy można renderować w React v 16.x w porównaniu do wersji 15.x
Komponenty to jedna z najważniejszych rzeczy w React. W tej części przypomnimy sobie podstawy związane z komponentami.
Wiemy już czym jest cykl życia komponent, dlatego w tej części omówimy dokładniej odpowiednie metody cyklu życia z uwzględnieniem nowych zmian w React 16.x
Podczas tworzenia aplikacji niejednokrotnie przyda nam się wiedza jak rozszerzyć komponent o nowe możliwości dzięki HOC. W tej części także poznamy sposób na sprawdzanie typów, przekazywanych do komponentów jako props oraz wykorzystamy zdobytą wiedzę ćwicząc na praktycznych przykładach komunikację pomiędzy komponentami.
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.
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ą
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,
- miały już styczność z Reactem
- 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
- Testowanie - poziom podstawowy
- podstawy HTML i CSS
- podstawy React

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





