10. diel - Spustenie React aplikácie a práce so stavom Nové

V minulej lekcii, Prevod frontendu do Reactu a TypeScriptu pomocou Codexu , sme pomocou Codexu previedli frontend portálu EnergoSun do Reactu a TypeScriptu. Pripravili sme vývojové prostredie, vytvorili nový projekt pomocou Vite a overili jeho zostavenie.

V tomto tutoriále kurzu vývoja aplikácií s AI spustíme frontend portálu EnergoSun vytvorený v React a TypeScript a overíme jeho vzhľad i správanie. Na výslednom projekte si vysvetlíme, ako React pracuje s komponentmi, ako TypeScript popisuje štruktúru dát a ako pomocou stavu aplikácie meníme jej obsah. Nakoniec pridáme prepínanie testovacích užívateľov podľa ich roly.

Behové prostredie

Doteraz sme pracovali prevažne so statickými dokumentmi. Teraz ale vytvárame skutočný program, ktorý na svoje fungovanie potrebuje behové prostredie. Samotná React aplikácia beží vo webovom prehliadači. Pri vývoji ale využívame aj Node.js, pomocou ktorého spúšťame nástroj Vite. Ten sprístupní aplikáciu na lokálnej adrese a umožňuje priebežne zobrazovať zmeny v zdrojovom kóde. Potrebné nástroje už máme pripravené, teraz teda spustíme vývojový server, aby sme sa na našu aplikáciu mohli pozrieť.

Možno vám pripadá, že sa všetko začína komplikovať. To je ale prirodzené. Aj obyčajný sendvičovač sa skladá z desiatok súčiastok a moderný automobil obsahuje kilometre kabeláže a súčiastok má okolo 30 000. Softvér nie je iný. AI nám dnes dokáže veľkú časť aplikácie vytvoriť, ale aby sme ju dokázali používať, upravovať a opravovať, musíme aspoň základne rozumieť tomu, z čoho sa skladá a ako funguje. Nasledujúci výklad vám práve tento základ poskytne.

Spustenie React aplikácie

Zostavenie nám potvrdilo, že sa projekt spracuje bez chyby. Teraz aplikáciu sami otvoríme a skontrolujeme jej vzhľad a správanie.

Vývojový server môžeme nechať spustiť Codexom. V takom prípade nemusíme príkazy zadávať ručne. Codexu napríklad napíšeme:

...koniec náhľadu článku...
Pokračuj ďalej