Lekce 12 - Propojení Reactu s backendovým API pomocí Codexu Nové
V minulé lekci, Backendové API v Node.js a Expressu pomocí Codexu, jsme si vysvětlili rozdělení webové aplikace na frontend a backend a vytvořili API v Node.js, TypeScriptu a Expressu.
V tomto tutoriálu kurzu vývoje aplikací s
AI propojíme React frontend portálu EnergoSun s
backendovým API vytvořeným v Node.js,
TypeScriptu a Expressu. Pomocí
Codexu upravíme aplikaci tak, aby požadavky nenačítala ze
svého lokálního souboru, ale získávala je ze serveru pomocí funkce
fetch(). Komunikaci potom ověříme ve vývojářských
nástrojích prohlížeče a vyzkoušíme také chování aplikace při
nedostupném backendu.
Propojení Reactu s API
Backend už dokáže poskytovat seznam požadavků i jejich detail. React proto můžeme změnit z aplikace pracující s lokálními ukázkovými daty na klienta backendového API.
Po úpravě bude frontend posílat backendu požadavky na konkrétní data a následně zobrazovat získané odpovědi. Bude potřebovat znát pouze adresu příslušného endpointu a podobu dat, která backend vrací.
Codexu zadáme:
Uprav současný React frontend tak, aby načítal data z vytvořeného API. Přehled požadavků načítej z GET /api/requests. Detail požadavku načítej z GET /api/requests/:id. V přehledu umožni otevřít detail každého požadavku. V detailu zobrazuj skutečný stav vybraného požadavku. Přidej jednoduchý stav načítání a zprávu pro případ, že API není dostupné.
Po dokončení změn projdeme upravené soubory.
...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í.
305 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 propojíme React s API v Node.js, TypeScriptu a Expressu, načteme data pomocí funkce fetch() a ověříme komunikaci v panelu Network.
