Agenda Szkolenia
Program jest podzielony na 12 tematycznych tygodni
Moduł Basic
Tydzień 1
Wprowadzenie
- Start
- Twój cel
- Tematyka
- Narzędzia
- Ustawienia edytora
- Przygotowanie środowiska
- Stworzenie pierwszej aplikacji
- Konfiguracja ESLint
- Konfiguracja testów
- Startujemy projekt
Tydzień 2
Komponenty
- Powitanie
- Po co korzystać z komponentów?
- Stworzenie pierwszego komponentu
- Komponenty funkcyjne
- Czym jest JSX?
- Pisanie HTML w JSX
- Stylowanie
- Komponenty klasowe
- Stan komponentów
Tydzień 3
Struktura aplikacji
- Struktura plików i katalogów
- Struktura plików i katalogów – podział domenowy
- Struktura plików i katalogów – atomic design
- Struktura plików i katalogów – koncepcja stron
- Kompozycja komponentów
- Tworzenie szablonu aplikacji za pomocą komponentów
- Komponenty bezstanowe
- Projekt – listy w JSX
- Projekt – instrukcje warunkowe w JSX
- Projekt – refactor
Tydzień 4
Zdarzenia, refy, bindowanie
- Zdarzenia – wprowadzenie
- Wprowadzenie do Codepen.io
- Zdarzenia
- Bindowanie zdarzeń
- Obsługa stanu komponentu
- Obsługa stanu komponentu – hooki
- Ładowanie danych do stanu za pomocą zdarzeń
- Ładowanie danych do stanu za pomocą zdarzeń – hooki
- Refy
- Refy – hooki
Tydzień 5
Budowa interfejsu
- Komponenty kontrolowane
- Komponenty niekontrolowane
- Dumb components
- Przepływ danych
- Cykl życia komponentów
- Cykl życia komponentów – hooki
- React router
Tydzień 6
Obsługa formularzy
- Tworzenie formularzy
- Przepływ danych
- Rejestrowanie pól
- Walidacja danych
- Warunkowe renderowanie pól
- Zarządzanie stanem formularza
- Wysyłka danych
Moduł Bonusowy
Stylowanie
- Intro
- BEM
- SASS
- Props style
- CSS w JavaScript
- Biblioteka classnames
- Styled-components
- Chakra UI
- Material UI
Moduł Advanced
Tydzień 7
Komunikacja z REST API
Powitanie- Wprowadzenie do CodeSandbox
- Wprowadzenie do REST API
- Jak korzystać z publicznych API?
- Jak korzystać z API w projekcie?
- Interfejs dynamiczny i dane
- Własna biblioteka do API
- Mockowanie żądań do API (MSW)
Tydzień 8
Testowanie aplikacji
- DevTools
- Obsługa błędów i PropTypes
- Error boundaries
- Testowanie zapomocą snapshotów
- Testowanie za pomocą Enzyme
- Test Driven Development
- Testowanie E2E (Cypress.io)
- Testowanie za pomocą testing-library
- Sesja Q&A
Tydzień 9
Wzorce w React
- Composition over inheritance
- Context API
- Komponenty wyższego rzędu (HoC)
- Abstrakcja stanu od widoku
- Compound Components
- Własne hooki
- Render Props
- Popularne antywzorce
Tydzień 10
Optymalizacja
- React Dev Tools i profilowanie
- Profiler API
- Property key – właściwe użycie
- Sterowanie renderowaniem za pomocą shouldComponentUpdate
- Pure components
- React.memo
- useMemo
- useCallback
- React Lazy i Suspense
TYdzień 11
Next.js
- Wprowadzenie do Next.js
- Tworzenie stron
- Przekazywanie danych
- Nawigacja
- Strony dynamiczne
- Pre-rendering i strony statyczne
- Konfiguracja stron
- Szablony
- Optymalizacja pod wyszkukiwarki (SEO)
- Wykorzystanie biblioteki next-seo
- Dynamiczny routing
- Jak przygotować się do pytań na technicznej rozmowie rekrutacyjnej?
TYdzień 12
TypeScript
- Sesja Q&A
- Wprowadzenie do TypeScript
- Wdrożenie TypeScript do projektu i dobre praktyki
- Praca z typami
- Komponenty i typy
- Integracja z API
- Przygotowanie do egzaminu
Moduł dodatkowy
Redux
- Flux i zarządzanie stanem aplikacji
- Własny Redux w aplikacji
- Architektura aplikacji a Redux
- Action creators
- Reducery
- Zarządzanie stanem aplikacji
- Biblioteka react-redux
- Komponent Provider z react-redux
- Funkcja Connect react-redux
- Thunks i redux-thunk
- Redux Dev Tools
- Redux-persist
- Redux-form
- Redux-saga
MODUŁ DODATKOWY
Deployment
- Budowanie projektów pod wykorzystanie produkcyjne
- Eject
- Deployment na GitHub Pages
- Deployment na Heroku
- Deployment na Firebase Hosting
- Deployment na Amplify
- Deployment na Vercel
- Inne destynacje deploymentu
Chcesz zobaczyć wszystkie szczegóły szkolenia? Kliknij tutaj