Lekce 12 - Ekosystém Reactu - TypeScript
V předchozí lekci, Client-side routing, jsme si ukázali client-side routing v Reactu pomocí knihovny React Router.
V následujícím tutoriálu pokročilého Reactu se budeme zabývat kontrolou datových typů s využitím TypeScriptu. Ukážeme si, jak TypeScript využít pro efektivní definování typů v React komponentách, správu stavu a předávání props.
TypeScript
TypeScript je nadstavbou JavaScriptu. Rozšiřuje ho o statické typování, třídy, rozhraní a další věci známé z OOP. Podrobné informace máme v kurzu TypeScript.
Použití TypeScriptu v Reactu si ukážeme na aplikaci Task Manager.
Založení projektu Task Manager
V pracovní složce si otevřeme terminál a spustíme příkaz pro
vytvoření aplikace. Pokud se rozhodneme použít interaktivní konfiguraci,
tak jako programovací jazyk zvolíme TypeScript namísto JavaScriptu. V
případě přímého zadání parametrů zvolíme šablonu
react-ts namísto react:
Vytvoření aplikace:
npm create vite task_manager -- --template react-ts
Vytvořila se nám složka task_manager/. Přesuneme se do ní,
nainstalujeme závislosti a projekt spustíme na lokálním serveru:
Spuštění projektu: cd task_manager npm install npm run dev
Po vytvoření projektu Task Manager a nastavení TypeScriptu je na první
pohled vidět, že soubory mají koncovku .tsx místo obvyklé
.ts. Tato změna umožňuje použití syntaxe JSX i v TypeScriptu.
V IDE si otevřeme soubor src/App.tsx a uvidíme standardní obsah
React aplikace:
...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.
Koupit tento kurz
Před koupí tohoto článku je třeba koupit předchozí díl
Obsah článku spadá pod licenci Premium, koupí článku souhlasíš se smluvními podmínkami.
- Neomezený a trvalý přístup k jednotlivým lekcím.
- 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 pokročilého Reactu se naučíme používat TypeScript. Tím zajistíme především kontrolu datových typů.
Kredity získáš, když podpoříš naši síť. To můžeš udělat buď zasláním symbolické částky na podporu provozu nebo přidáním obsahu na síť.
