Tworzenie aplikacji w React i Redux

Program szkolenia

1. 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
   
   
2. 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
   
   
3. 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
   
   
4. 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
   
   
5. 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
   
   
6. 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
   
   
7. 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
   
   
8. 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
   
   
9. 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
   
   
10. 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
    
    
11. 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
    
    
12. Warsztat końcowy

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