Lekce 7 - Databázový klient v React - Navigace a přehled záznamů
V minulé lekci, Databázový klient v React - Zprovoznění komunikace s API, jsme zprovoznili komunikaci React klienta s Node.js API a vytvořili jsme si první komponentu, ve které jsme použili tuto komunikaci pro získání záznamů o filmech z databáze.
V dnešním React tutoriálu si vytvoříme navigaci na hlavní stránce, komponentu pro výpis záznamů o osobnostech a také si zdokonalíme způsob odesílání požadavků pomocí Fetch API.
Fetch API helper
V naší aplikaci budeme na mnoha místech odesílat různé druhy
požadavků, ve všech ale budeme odkazovat na
http://localhost:3000
a převádět odpovědi serveru na formát
JSON. Je proto na místě si vytvořit nějaký helper (pomocnou třídu),
který tyto operace bude provádět za nás.
Vytvoříme si složku src/common/
, v níž budeme mít
zdrojové kódy klienta, které budou společně využívat komponenty spojené
jak se záznamy filmů, tak i se záznamy osobností. V této složce
src/common/
si vytvoříme soubor Api.js
a vložíme
do něj následující kód:
...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.
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 JavaScript tutoriálu si vylepšíme odesílání požadavků pomocí Fetch API, vytvoříme React komponentu pro přehled osobností a navigaci na hlavní stránce.
Body 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íť.