React JS

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

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.

Dvoudenní kurz obsahuje teoretické a především praktické informace o použití knihovny React.js při tvorbě single-page či JavaScriptových aplikací. Knihovna vznikla ve společnosti Facebook v roce 2013 jako open-source projekt. Za tu dobu ušel projekt velkou cestu a v posledních letech se velmi změnil. React je pro tvorbu UI aplikací velmi populární a proto se velmi vyplatí ji znát. Jste-li vývojář, který by rád zavedl React do svého projektu nebo chce postavit novou aplikaci na této technologii, tak si tento kurz nesmíte nechat ujít. V rámci kurzu se seznámíte s mindsetem tvůrců Reactu, jak knihovna funguje a kam se dále bude ubírat. Nebude chybět ani důkladný průzkum React Hooks či Context API. Seznámíte se také s frameworkem Next.js pro React, který nám velmi usnadní práci. V rámci školení si vše budete moci vyzkoušet na praktických ukázkách a po dokončení kurzu budete schopni vytvořit aplikaci a případně ji nasadit na server.

Témata:

•  Charakteristika single-page aplikace
• Zákoutí jazyka JavaScript
• Co přišlo s ES6 (ES2015)?
• Babel kompilátor
• Okénko do funkcionálního paradigmatu
• Charakteristika a filozofie Reactu
• Knihovna JSX a k čemu slouží
• Komponenta v Reactu a její životní cyklus
• Props a State
• Kolekce a key
• Vytvoření vlastní znovu použitelné komponenty
• Porovnání s Vanilla JS a jQuery
• RenderProps
• Higher-order komponenty
• React context API
• React Hooks
• Optimalizace komponent
• Server-side rendering
• Kdy je React vhodné použít a kdy je lepší se mu vyhnout
• Integrace Reactu s ostatními knihovnami
• Kdy si vystačíme pouze s Reactem a kdy je vhodné použít i další
  knihovny
• Aplikace v Reactu, jak zpracovávat formuláře a ošetřovat uživatelské
  chyby
• Jak použít již hotové, volně přístupné komponenty
• Next.js framework
• Požadované vstupní znalosti:
  • Znalost JavaScriptu na základní úrovni
  •  Základy HTML, CSS

Co se na školení naučíte:

V úvodu si charakterizujeme SPA a jaké jsou výhody a nevýhody. Představíme si důležité funkcionality JavaScriptu společně s Babel
kompilátorem. Nahlédneme na funkcionální paradigma, aby bylo jasné, kde se React inspiroval. Popíšeme se filozofii Reactu a jak funguje. Ukážeme jak díky JSX knihovně mohou komponenty psát i kodéři. Neopomeneme ani důležité koncepty pro znovu použitelnost komponent (RenderProps, HoC, React Context API). Do hloubky projdeme nejpoužívanější React Hooks API. K získávání dat si ukážeme knihovnu React-query. Uvidíte nejlepší framework pro tvorbu React aplikací a to Next.js, na kterém si vyvineme první aplikaci.

Osnova kurzu:

• Úvod
  • Jak se SPA chová
  • JavaScript, objekty, funkce, scope
  • Novinky v ES6 a novější
  • Babel
  • Funkcionální paradigma
• React
  • Filozofie Reactu
  • Instalace a spuštění Reactu
  • Syntaxe JSX, potřebné knihovny, vytvoření komponenty
  • Náležitosti komponenty – state a props
  • Životní cyklus komponenty
  • Druhy komponent
  • Kolekce a key
  • Znovu použitelnost komponenty
  • RenderProps
  • React Hooks
  • Higher-order komponenty
  • React Context API
  • Optimalizace renderování komponent
  • Porovnání s jQuery a Vanilla.js
• Ostatní knihovny
  • Jak React spolupracuje s jQuery a dalšími populárními frameworky
  • React-query knihovna pro získávání a uchovávání dat
• Vlastní aplikace v Reactu
  • Napsání plnohodnotné SPA pomocí Next.js frameworku, ukázání komunikace se serverem
  • V rámci aplikace vyvineme přihlašovací formulář a zabezpečenou stránku s přidáváním a výpisem příspěvků na zeď (podobně jako na Facebooku).
  • Nastíníme si jak dál rozvíjet aplikace a jaké frameworky či knihovny je vhodné kombinovat a proč