React kurz

Tri a pol až štvordňový workshop, na ktorom sa naučíte pracovať v React-e, manažovať stav aplikácie cez kontext alebo Redux, routovanie riešiť cez React Router a ako bonus si ukážeme aj základy práce v MUI.

• Základné informácie
• Forma školenia
• Obsah školenia
• Požiadavky na účastníkov
• Miesto školenia
• Cena

Základné informácie

Môj React kurz je koncipovaný pre programátorov, ktorí už majú znalosti programovania v JavaScripte a chceli by sa naučiť React. Naučím vás všetko podstatné k tomu, aby ste hneď po skončení kurzu vedeli efektívne vytvárať Single Page aplikácie v React-e s routovaním na strane frontendu a s manažmentom aj rozsiahleho stavu.

Snažím sa držať krok s dobou, takže budeme písať funkcionálne komponenty namiesto triednych, ako bundler použijeme vite namiesto webpack-u, budeme používať veľa hookov, React Router bude vo verzii 6 a na udržiavanie stavu aplikácie použijeme Redux Toolkit.

Ako bonus si ukážeme komponentovú knižnicu MUI, ktorá stojí na design systéme Material Design, ale je mimoriadne flexibilná a prispôsobiteľná a viete pomocou nej implementovať aj vlastný design systém.

Forma školenia

Školenie robím vo forme workshopu, čo znamená, že od uchádzačov vyžadujem, aby mali k dispozícii vlastný notebook a počas školenia budú programovať. Zvyčajne najskôr vysvetlím nejakú teóriu, ukážem príklad, ktorý si odpíšu a potom zadávam úlohu, ktorú musia vypracovať. Počas ich práce chodím pomedzi nich a s každým konzultujem postup a navrhnuté riešenie.

Úlohy zadávam tak, aby ich vypracovanie nezaberalo dlhý čas. Zároveň sa snažím pôsobiť prívetivo a skôr ako partner pri programovaní, než učiteľ, aby som nevytváral účastníkom stres. Koniec koncov je cieľom sa niečo naučiť a nie je to súťaž o najrýchlejšie alebo najlepšie riešenie.

Obsah školenia

• Deň 1
  • Veľmi stručné vysvetlenie princípov, na ktorých React stojí
  • Vytvorenie projektu (pomocou vite)
  • Čo je to komponenta, čo je to a ako funguje JSX a tvorba prvých komponent
  • Spracovanie eventov v React-e
  • Hooks
  • useState podrobne
  • useEffect podrobne
  • Stručne o ostatných hookoch
• Deň 2
  • Správa stavu aplikácie pomocou kontextu
  • Vlastný Context Provider
  • Používanie useContext hooku
  • Väčšia úloha: tvorba vlastného routera na precvičenie si všetkých doteraz naučených znalostí + tvorba vlastných hookov
  • Predstavenie React Router (v6) a jeho použitie namiesto vlastného riešenia
  • Hooky pre React Router
• Deň 3
  • Čo je to stav aplikácie
  • Predstavenie patternu Flux pre správu stavu
  • Redux a jeho filozofia
  • Názvoslovie: store, state, akcia, reducer, selector
  • useSelector hook
  • Preskúšanie si práce v čistom Redux-e (immutable state, reducer, akcie, action creator, re-ducks)
  • Redux Toolkit (RTK)
  • Čo je to slice a ako vyzerá
  • Ako funguje immutable state v RTK (immer)
  • Prepis aplikácie z predchádzajúceho dňa zo stavu držanom v kontexte do Redux-u pomocou RTK
  • Ukážka Redux Dev Tools
  • Čo to je thunk?
  • Ako riešiť podobajúce sa asynchrónne operácie (createAsyncThunk)?
  • Ako generovať hodnoty (id, náhodné hodnoty...) mimo reducera (prepare)
  • Veľmi krátko o RTK Query a React Query
• Deň 4
  • Predstavenie komponentovej knižnice MUI, čo to je, aké komponenty obsahuje, kde hľadať dokumentáciu
  • Použitie fontsource na inštaláciu fontov
  • Štýlovanie pomocou styled
  • Stručne o tom, ako funguje spacing
  • Prispôsobovanie si témy
  • Prepojenie MUI a React Router
  • Vyskúšanie použitia AppBar komponentu

Požiadavky na účastníkov

• Znalosť programovania v JavaScript-e (nový JS od verzie ES2015)
• Vlastný notebook alebo počítač
• Nainštalovaný Node (lokálne alebo v docker kontajneri)

Miesto školenia

Vo vašej firme alebo online.

Cena

Nie som platca DPH, takže táto sa k cene nebude nepripočítavať.

* Pokiaľ bude školenie mimo rozumnej dostupnosti z Bratislavy, tak si k cene môžem navyše účtovať aj nejakú adekvátnu sumu ako náhradu za výdavky na cestovanie a/alebo ubytovanie. O tejto skutočnosti vás upozorním a dohodneme sa dopredu.