Szkolenie
Power-up React + Redux

Zapraszamy na 3-dniowe intensywne warsztaty szkoleniowe z Power-up React + Redux.

Piszesz już aplikacje w Reakcie i redux’ie? Zapraszamy na 3-dniowe intensywne warsztaty szkoleniowe z zaawansowanych aspektów związanych z tymi technologiami!

Czego nauczysz się podczas warsztatów?

  • Pisać bardziej wydajny kod w React.js (np. dzięki Pure Components, unikanie niepotrzebnych renderów)
  • Rozwiązywać nietrywialne problemy, jak skomplikowane wyrażenia warunkowe w JSX, reużywalność komponentów (higher order components)
  • Obsługiwać efekty uboczne w reduxie (czystsza architektonicznie komunikacja z backendem)
  • Pisać aplikacje, które są “future-proof”, gotowe na platformy mobilne czy renderowanie po stronie serwera.
  • Poznać najnowsze aspekty i możliwości Reacta
  • Dobrze testować reacta i reduxa.

Dla kogo?

Szkolenie kierujemy do programistów, którzy już piszą aplikacje Reactowe. Umiejętności, które powinieneś mieć przychodząc na warsztaty:

  • React: umiesz stworzyć komponent, zrobić hierarchię / drzewko komponentów i przekazywać dane
  • Redux: umiesz dostarczyć stan do komponentów czy zmienić stan aplikacji przez akcje

 

Agenda

Redux side effects

  • redux-thunk – najprostszy sposób na asynchroniczne akcje 
  • jak dobrze implementować komunikację aplikacji “ze światem zewnętrznym”
  • przechwytywanie akcji – jak wywołać zapytanie do API za pomocą akcji
  • połączenie z routerem – powiadomienie store’a o zmianie ścieżki
  • połączenie z serwisami i asynchroniczność (http, websockety)
  • autoryzacja z użyciem JWT (JSON Web Tokens)

 Redux side effects z redux-saga

  • wstęp do sagi – jak wykorzystać generatory do asynchronicznych akcji
  • porównanie redux-saga z redux-thunk
  • zarządzanie bardziej skomplikowanymi flow side effect’ów (np. akcje zależne od siebie)
  • integracja z zewnętrznym API z użyciem sag
  • łączenie sag – zarządanie równoległymi efektami
  • redux-saga vs redux-observable – dlaczego wybraliśmy sagi?

React patterns

  • Hooks
  • Higher Order Components – kompozycja komponentów jako sposób na zarządzanie złożonością
  • function as child
  •  recompose – przydatna paczka pozwalająca na wielopoziomową kompozycję
  • wyrażenia warunkowe w JSX
  • asynchroniczny setState
  • Event switch – zarządzanie eventami w komponencie
  • Jak zbudować “Provider” z Reduxa – zrozumienie contextu w Reacie
  • Dekoratory

Wydajność react’a

  • jak działa React: Virtual-DOM i reconcilation, React Fiber
  • profilowanie aplikacji pod kątem problemów z wydajnością
  • PureComponent – wydajny komponent w React
  • immutability – jak wpływa na wydajność aplikacji: koszty vs zysk
  • złożone komponenty
  • shouldComponentUpdate – zarządzanie zmianami drzewa komponentów w Reacie
  • antypatterny – np. Bindowanie funkcji w renderze

Progressive Web Apps w react.js

  • co to jest i po co?
  • podział na moduły i dynamiczne ładowanie
  • first load – poprawienie czasu pierwszego ładowania
  • manifest – strona jako aplikacja
  • podejście Offline-first
  • service-workers – javascript w tle
  • lighthouse – narzędzie do analizy zgodności aplikacji z koncepcją PWA

 Server-side rendering

  • First load – poprawienie czasu pierwszego ładowania
  • Next.js – serwer do renderowania Reacta
  • Dostarczenie danych do Reacta po stronie serwera
  • Obsługa routingu po stronie serwera

Silnie typowany React: Flow czy Typescript

  • Typescript vs Flow – dwa sposoby na statyczne typowanie kodu
  • React + TypeScript – przepisanie aplikacji do Typescript czy dodatnie statycznych typów
  • React + Flow – dodanie typów do istniejącej aplikacji

Testowanie react’a przy pomocy Jest i Enzyme

  • Jest – testowanie Reacta
  • Enzyme – tworzenie zmockowanych komponentow (shallow vs mount)
  • Testowanie logiki biznesowej
  • Testowanie komponentów: DOM
  • Testowanie komponentów: Snapshot
  • Testowanie Redux – jak przetestować kontener stanu Reduxa
  • Testowanie Sag

Dodatkowe tematy

  • Stylowanie komponentów – różne podejścia (CSS modules vs styled-components)
  • Animacje – react-transition-group i React Motion
  • MobX – alternatywa do Reduxa

 

100% praktyki

Podczas warszatów pod okiem trenera uczestnicy od podstaw stworzą klon popularnego narzędzia Trello, poznając omawiane narzędzia oraz techniki zaawansowanych aspektów związanych z react.js i redux.
Oprócz aspektów związanych z implementacją, przejdziemy samodzielnie przez przygotowanie środowiska developerskiego, przygotowanie aplikacji do wypuszczenia na produkcję, testowanie oraz deployment.

Informacje praktyczne

Kiedy?
Warsztaty wewnętrzne: termin do indywidualnego ustalenia z Waszym zespołem

Gdzie?
Dowolne miasto w Polsce

Uczestnicy
Od 4 do 12 osób

Kontakt i zapytania ofertowe
Piotr Zwoliński, CEO
[email protected]
Tel: + 48 784 811 497

Trener

Wojciech Kwiatek
LinkedIn

JavaScript team leader, developer, trener i mentor. Ulubione technologie: Angular, React i Vue plus programowanie funkcyjne i reaktywne. Współautor książki “Developing an Angular 2 Edge”.

Pobierz agendę tego szkolenia w formacie PDF:
agenda_szkolenia_developers_peak.pdf

Zainteresowany szkoleniem?
Piotr Zwoliński, CEO
[email protected], tel: + 48 784 811 497