Detail kurzu

REACT - od základov k moderným aplikáciám

IT LEARNING SLOVAKIA, s.r.o.

Popis kurzu

JavaScript / EcmaScript, React, SPA, JSX, TypeScript, Virtual DOM, Components, Props, Events, Pure Functions, Side Effects, Hooks, Component State, Mutations, Immutability, Routing, CSS Modules, Styled Components, Bundle tools, CLI tools, Scaffolding, Debugging, Deployment. Ukážku zdrojového kódu príkladu, spoločne napísaného a komplexne vysvetleného počas kurzu si môžete pozrieť tu: https://github.com/nakurze/react Predstavte si, že by ste mohli písať rozsiahle webové aplikácie rovnako efektívne a prehľadne ako tie najlepšie tímy v Silicon Valley. React, najpopulárnejšia JavaScript knižnica súčasnosti, ktorá stojí za gigantmi ako Facebook, Instagram či Airbnb, vám práve toto umožní. V dobe, kedy sa webové aplikácie stávajú čoraz komplexnejšími, React predstavuje revolučný spôsob, ako udržať kód čistý, prehľadný a ľahko rozšíriteľný. Na kurze React sa naučíte nie len teoretické základy, ale hlavne praktické riešenia reálnych situácií. Pochopíte, prečo je React dnes bezkonkurenčne najžiadanejšou technológiou pre vývoj moderných webových aplikácií a prečo sa React developeri tešia nadpriemernému finančnému ohodnoteniu. V záplave často protichodných a zastaralých informácií na internete vám poskytneme jasný, štruktúrovaný prístup k pochopeniu tejto technológie. Prostredníctvom praktických cvičení a živých príkladov sa naučíte vytvárať komponenty, pracovať s TypeScriptom, porozumiete konceptom ako Virtual DOM, Props či React Hooks. Krok za krokom vás prevedieme celým procesom – od založenia projektu, cez debugging, až po jeho nasadenie do produkcie. Nebudeme sa zbytočne zaťažovať komplexnými frameworkami – zameriame sa na čistý React a jeho základné princípy, ktoré sú kľúčové pre vaše budúce napredovanie. Či už ste frontend developer, ktorý chce rozšíriť svoje schopnosti, alebo web dizajnér túžiaci po lepšom pochopení moderných technológií, tento kurz vám poskytne pevné základy pre vašu cestu s Reactom. Po jeho absolvovaní budete schopní samostatne vytvárať React aplikácie, rozumieť best practices v odvetví a budete pripravení na ďalší profesionálny rast v tejto oblasti. Kurz je navrhnutý pre tých, ktorí už majú základné znalosti HTML, CSS a JavaScriptu. Nečakajte však suchú teóriu – spoločne si napíšeme reálne príklady s podrobne okomentovaným kódom, ktoré vám poslúžia ako odrazový mostík pre vaše vlastné projekty. Buďte súčasťou revolúcie v tvorbe webových aplikácií a získajte zručnosti, ktoré sú na trhu práce čoraz žiadanejšie. Ako študijný materiál bude slúžiť oficiálna dokumentácia a účastník si odnáša predovšetkým spoločne napísané príklady s podrobne okomentovaným kódom. Predpoklady pre úspešné zvládnutie kurzu: Základy HTML. Byť schopný vytvoriť a naplniť základným obsahom jednoduchší web – sadu vzájomne prepojených web stránok. Základy CSS. Poznať základné selektory, chápať rozdiel medzi selektorom dieťaťa a selektorom potomka, byť schopný dostať obsah web stránok do jednoduchého layoutu – jednotného rozmiestnenia elementov vo všetkých súvisiacich podstránkach. Základy JavaScript. Poznať premenné, cykly, podmienky, polia a objekty a vedieť s nimi pracovať, funkcie, udalosti, vedieť čo je DOM model a vedieť s ním manipulovať – mazať či meniť existujúce elementy, ich obsah aj štýl, či vedieť pridávať nové.

Obsah kurzu

Úvod
  • Evolúcia vývoja webov / web aplikácií
  • Princípy dnešných moderných web aplikácií
  • HTML5, ESNext, web komponenty, reaktivita
  • Existujúce frontend knižnice a frameworky
  • Prečo práve React
Typy web aplikácií
  • Multi Page, SPA, PWA, Hybrid, ...
  • SSR - generované na backende vs. generované na klientovi
Web komponenty v podaní W3C
  • HTML templates
  • Custom Elements
  • Shadow DOM
Ako do vývoja zapojiť React
  • Inštalácia Node a package manažéra NPM
  • Inštalácia vývojového prostredia VSCode
  • Inštalácia Git a doplnkov do VS Code
  • Ukážka kódu bez použitia bundlingu
  • Skladanie aplikácií pomocou bundle tool
Založenie nového projektu
  • Vite bundler, CLI tools, Scaffolding
  • Vysvetlenie vygenerovanej štruktúry projektu
  • Konfigurácia vývojového prostredia
Web komponenty v podaní React
  • Čo je komponent, čo TypeScript a čo JSX
  • Import a Export komponentov
  • Ako organizovať adresárovú štruktúru projektu
  • Podmienené vykreslenie komponentov
  • Ako na listy – vykreslenie sady komponentov
  • Podmienené vykreslenie komponentov
  • Čo sú Pure Functions a čo sú Side Effects
  • Props - vlastnosti komponentov, ako ich odovzdávať
Rozširujeme schopnosti komponentov
  • Events – reagujeme na zabudované, aj vlastné udalosti
  • Hooks – a prečo nie Class komponenty
  • State – prečo premenná nestačí
  • Routing – ako sa v React SPA „prepína medzi stránkami“
Debugging a Deployment
  • React Developer Tools
  • Kam a ako nasadiť React (SPA) web aplikáciu
Ako ďalej?
  • Ako na CSS v React aplikácii
  • Knižnice hotových štýlov, aj celých komponentov
  • O kurze Základy React – Hooks and State Management
  • Priestor na individuálne otázky
Upozornenie pre online účastníkov

Na kurze si budeme inštalovať viaceré programy. Pokiaľ plánuje online účastník absolvovať kurz na firemnom počítači, mal by vopred požiadať administrátora o pridelenie práv na inštaláciu ďalšieho softvéru.

Hodnotenie




Organizátor