Tworzenie interaktywnych aplikacji internetowych w React - techniki zaawansowane

Program szkolenia

1. 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.

• łówne założenia React
• Przygotowanie środowiska pracy
• “Hello world” w React
• React Developer Tools


2. Elementy renderowalne

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

• 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


3. Komponenty

Komponenty to jedna z najważniejszych rzeczy w React. W tej części przypomnimy sobie podstawy związane z komponentami.

• Komponenty funkcyjne kontra klasowe
• Props
• Komponent jako pure function
• Stan komponentu
• Inicjalizacja stanu komponentu
• Aktualizacja stanu komponentu


4. Cykl życia komponentu

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

• Inicjalizacja - constructor()
• Renderowanie - render()
• Zamontowanie - componentDidMount()
• Aktualizacja
• componentDidUpdate()
• shouldComponentUpdate()
• static getDerivedStateFromProps
• Odmontowanie - componentWillUnmount()


5. Komponenty zaawansowane

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.

• Komponenty wyższego rzędu - Higher-Order Components
• Sprawdzanie typów - PropTypes
• Komunikacja komponentów : dziecko - rodzic oraz rodzeństwo


6. 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


7. 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
   
   
8. 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


9. Warsztat końcowy

Na koniec zaczynamy pracę nad praktycznym połączeniem całej dotychczasowej wiedzy - tworząc konkretny projekt.