React II.

Anotace:

Pro tvorbu škálovatelných SPA či JavaScriptových aplikací je lepší držet stav a provádět logiku mimo samotný React, který výborně řeší View vrstvu aplikace. Ukážeme si jak řešit state management aplikace.

Jedním z řešení je knihovna Redux od společnosti Facebook, která je postavena na architektuře Flux.
Právě knihovna Redux si tímto problémem umí poradit velmi účelně. Také se podíváme Reactu trochu více pod pokličku. S tím si projdeme i vylepšenou verzi Reduxu a to je Redux Toolkit.

Dále se naučíme pokročilé techniky (RenderProps, HoC, ReactHooks) v Reactu a nahlédneme na funkcionální paradigma, aby bylo jasné, kde se React inspiroval. 

Najdeme odpověď na otázku: “co je to server-side rendering?”.

Do hloubky projdeme React Hooks API. K získávání dat si ukážeme knihovnu React-query a SWR.

Naučíme se testovat komponenty a moduly unit testy.

Představíme si nejlepší framework postavený na Reactu a to Next.js a napíšeme si s jeho pomocí aplikaci s použitím Reduxu.

Témata:

• Server-side rendering
• React pro pokročilé
• Redux + Redux Toolkit
• Data fetching – React Query, SWR
• Unit testy
• Next.js framework
• Vývoj aplikace

Co se na školení naučíte:

V rámci kurzu si napíšeme kompletní SPA aplikaci v React + Redux postavených na frameworku Next.js. 

Pro komunikaci s okolním světem si ukážeme middleware knihovny jako je redux-thunk, redux-observable nebo redux-saga. Kód si otestujeme knihovnou Jest pro psaní jednotkových a integračních testů. 

Projdeme si důkladněji i Next.js framework a ukážeme si, jak jej využívat pro lokální vývoj i ostrý provoz.  Nakonec si ukážeme build aplikace a její nasazení na server.

Pro koho je školení určeno:

Školení je určeno pro programátory, kteří mají alespoň základní znalosti Reactu a chtějí na jeho základě začít stavět plnohodnotné aplikace.

Požadované vstupní znalosti:

• Znalost JavaScriptu na pokročilé úrovni
• Základy HTML, CSS
• Znalost Reactu

Osnova kurzu:

• Úvod
  • Představení osnovy

  Funkcionální okénko

  • Okénko do funkcionálního paradigmatu

  Server-side rendering

  • Ukázka principu
  • Ukázka kódu

  React pro pokročilé

  • React Portals
  • React Profiler
  • RenderProps
  • Higher-order komponenty
  • Pokročilé React Hooks
  • Optimalizace renderování komponent
  • CSS styly v React aplikacích
  • Testování aplikace v Jest

  Redux

  • Flux architektura / Redux architektura
  • Redux Toolkit
  • Redux – HoC + Hooks
  • Redux middlewary (Redux-thunk, Redux-observable, Redux-saga)
  • Představení vývojových doplňků do prohlížečů pro React či Redux
  • Unit testing Reduxu

  Next.js

  • Představení frameworku Next.js
  • Data fetching
  • Vlastnosti
  • Práce s pages a router
  • Build + deployment

  Aplikace

  • V návaznosti na kurz React I budeme překlápět již hotovou aplikaci do Reduxu
  • Případně si napíšeme novou aplikaci s Reduxem
  • Ukážeme si i integraci s Next.js frameworkem

Martin Krištof, Front-end developer a Expert na React

Martin v oboru působí téměř deset let a postupem času se profiloval spíše do světa JavaScriptu, kde se stal expertem na React.js. Studium vysoké školy dokončil kombinovanou formou, aby mohl být v kontaktu s realitou a mohl tak navázat teoretické znalosti na praxi.

V posledních letech se věnuje především tvorbě front-endové částí webových aplikací, ale má přesah do back-endu, který hojně využívá k lepší prezentaci a pochopení. Aktuálně mimo jiné působí jako full-stack vývojář v Heureka Group, kde má na starost posun firmy na poli front-endu a JavaScriptu.