Lekce 10 - Spuštění React aplikace a práce se stavem Nové
V minulé lekci, Převod frontendu do Reactu a TypeScriptu pomocí Codexu, jsme pomocí Codexu převedli frontend portálu EnergoSun do Reactu a TypeScriptu. Připravili jsme vývojové prostředí, vytvořili nový projekt pomocí Vite a ověřili jeho sestavení.
V tomto tutoriálu kurzu vývoje aplikací s AI spustíme frontend portálu EnergoSun vytvořený v Reactu a TypeScriptu a ověříme jeho vzhled i chování. Na výsledném projektu si vysvětlíme, jak React pracuje s komponentami, jak TypeScript popisuje strukturu dat a jak pomocí stavu aplikace měníme její obsah. Nakonec přidáme přepínání testovacích uživatelů podle jejich role.
Běhové prostředí
Doteď jsme pracovali převážně se statickými dokumenty. Nyní ale vytváříme skutečný program, který ke svému fungování potřebuje běhové prostředí. Samotná React aplikace běží ve webovém prohlížeči. Při vývoji ale využíváme také Node.js, pomocí kterého spouštíme nástroj Vite. Ten zpřístupní aplikaci na lokální adrese a umožňuje průběžně zobrazovat změny ve zdrojovém kódu. Potřebné nástroje již máme připravené, nyní tedy spustíme vývojový server, abychom se na naši aplikaci mohli podívat.
Možná vám připadá, že se vše začíná komplikovat. To je ale přirozené. I obyčejný toustovač se skládá z desítek součástek a moderní automobil obsahuje kilometry kabeláže a součástek má kolem 30 000. Software není jiný. AI nám dnes dokáže velkou část aplikace vytvořit, ale abychom ji dokázali používat, upravovat a opravovat, musíme alespoň základně rozumět tomu, z čeho se skládá a jak funguje. Následující výklad vám právě tento základ poskytne.
Spuštění React aplikace
Sestavení nám potvrdilo, že se projekt zpracuje bez chyby. Teď aplikaci sami otevřeme a zkontrolujeme její vzhled a chování.
Vývojový server můžeme nechat spustit Codexem. V takovém případě nemusíme příkazy zadávat ručně. Codexu například napíšeme:
...konec náhledu článku...
Pokračuj dál
Došel jsi až sem a to je super! Věříme, že ti první lekce ukázaly něco nového a užitečného.
Chceš v kurzu pokračovat? Přejdi do prémiové sekce.
roční PŘEDPLATNÉ
1 082 Kč
měsíčně, placeno ročně (12 984 Kč)14 000+ lekcí, cvičení a testů
6 000+ ti zůstane napořád
Neomezený přístup ke všem aktuálním
i připravovaným kurzům.
Koupit pouze tento kurz
Získej okamžitý přístup ke kurzu bez
časového omezení.
260 Kč
Obsah článku spadá pod licenci Premium II, koupí článku souhlasíš s Provozními podmínkami.
- Přístup k jednotlivým lekcím dle způsobu pořízení.
- Kvalitní znalosti v oblasti IT.
- Dovednosti, které ti pomohou získat vysněnou a dobře placenou práci.
Popis článku
Požadovaný článek má následující obsah:
V tutoriálu spustíme React aplikaci pomocí Vite, prozkoumáme komponenty a TypeScript, s Codexem přidáme přepínání uživatelů a dokončíme migraci.
