12. diel - Prepojenie Reactu s backendovým API pomocou Codexu Nové
V minulej lekcii, Backendové API v Node.js a Expresse pomocou Codexu , sme si vysvetlili rozdelenie webovej aplikácie na frontend a backend a vytvorili API v Node.js, TypeScripte a Expresse.
V tomto tutoriále kurzu vývoja aplikácií s
AI prepojíme React frontend portálu EnergoSun s
backendovým API vytvoreným v Node.js,
TypeScripte a Expresse. Pomocou
Codexu upravíme aplikáciu tak, aby požiadavky nenačítala
zo svojho lokálneho súboru, ale získavala ich zo servera pomocou funkcie
fetch(). Komunikáciu potom overíme vo vývojárskych nástrojoch
prehliadača a vyskúšame aj správanie aplikácie pri nedostupnom
backende.
Prepojenie Reactu s API
Backend už dokáže poskytovať zoznam požiadaviek aj ich detail. React preto môžeme zmeniť z aplikácie pracujúcej s lokálnymi ukážkovými dátami na klienta backendového API.
Po úprave bude frontend posielať backendu požiadavky na konkrétne dáta a následne zobrazovať získané odpovede. Bude potrebovať poznať iba adresu príslušného endpointu a podobu dát, ktoré backend vracia.
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í zmien prejdeme upravené súbory.
...koniec náhľadu článku...
Pokračuj ďalej
Došiel si až sem a to je super! Veríme, že ti prvé lekcie ukázali niečo nového a užitočného.
Chceš v kurze pokračovať? Prejdi do prémiovej sekcie.
ročné PREDPLATNÉ
44 €
mesačne, platené ročne (528 €)14 000+ lekcií, cvičení a testov
6 000+ ti zostane navždy
Neobmedzený prístup ku všetkým aktuálnym
aj pripravovaným kurzom.
Kúpiť iba tento kurz
Získaj okamžitý prístup ku kurzu bez
časového obmedzenia.
13 €
Obsah článku spadá pod licenciu Premium II, kúpou článku súhlasíš s Prevádzkovými podmienkami.
- Prístup k jednotlivým lekciám podľa spôsobu obstarania.
- Kvalitné znalosti v oblasti IT.
- Zručnosti, ktoré ti pomôžu získať vysnívanú a dobre platenú prácu.
Popis článku
Požadovaný článok má nasledujúci obsah:
V tutoriále prepojíme React s API v Node.js, TypeScripte a Expresse, načítame dáta pomocou funkcie fetch() a overíme komunikáciu v paneli Network.
