Tworzenie interaktywnych aplikacji internetowych w React

Program szkolenia

1. Podstawy ES6

Zanim poznamy React musimy przypomnieć sobie kilka spraw związanych z JavaScript w wersji ES6.

• Let i const
• Fat arrow function
• Klasy
• Spread/rest operator
• Template string
• Import i export


2. React - Wstęp

W tej części przygotujemy odpowiednie narzędzia, tak, aby wydajniej pracować z Reactem.

• Czym jest React?
• Główne założenia React
• Przygotowanie środowiska pracy
• Pierwsza aplikacja 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.

• Czym jest JSX?
• Podstawy JSX
• Wyrażenia
• Atrybuty


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
• Props
• Cykl życia komponentu
• State


5. Hooks

Hooks to nowy dodatek w React 16.8. Dzięki nim możemy korzystać z cyklu życia komponentu w komponencie funkcyjnym.

• Czym są Hooks?
• State Hook
• Effect Hook
• Inne
• Ważne zasady podczas korzystania z Hooks


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


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


8. Listy i klucze

Tworzenie np. elementów listy ul w pętli to bardzo ułatwia pracę, ale jest to również wyzwanie dla algorytmów Reacta. W tej części poznamy kilka ciekawostek dotyczących renderowania i optymalizacji.

• Generowanie elementów i komponentów w pętli
• Jak React renderuje elementy?
• Klucze


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


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


11. React i dane asynchroniczne

Jak zaktualizować naszą aplikację o asynchroniczne dane? W tej części poznamy prosty fetch.

• fetch
• componentDidMount()


12. Warsztat końcowy + dodatkowe narzędzia

Na koniec zaczynamy pracę nad praktycznym połączeniem całej dotychczasowej wiedzy - tworząc konkretny projekt. Skorzystamy tu z wielu przydatnych narzędzi, które ułatwią nam pracę.