Lekce 7 - Databázový klient v React - Navigace a sdílené konstanty
V minulé lekci, Databázový klient v React - Přehledy filmů a osob, jsme si vytvořili komponentu pro výpis
záznamů o osobnostech a zdokonalili jsme si způsob odesílání požadavků
pomocí funkce fetch()
.
V dnešním React tutoriálu si vytvoříme navigaci na hlavní stránce. Také přidáme sdílené konstanty a další utility funkci.
Vytvoření navigace
Teď když máme hotový přehled filmů i osobností, vytvoříme si
navigační menu v komponentě App
. To nám umožní jednoduše
přepínat mezi zobrazením našich dvou komponent, reprezentujících stránky
s přehledy filmů a osob.
Instalace
react-router-dom
K práci s navigací budeme v React potřebovat knihovnu
react-router-dom
. Přesuneme se proto do složky
client/
v příkazovém řádku a spustíme příkaz:
Windows PowerShell PS C:\Users\sdrac\Dropbox\movie-database\client> npm i react-router-dom@^7.1.3
Přidání navigace do
App.jsx
Nakonec upravíme kód komponenty App
, který si hned
vysvětlíme:
...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 React tutoriálu si vytvoříme navigaci na hlavní stránce. Také přidáme sdílené konstanty a další utility funkci.
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íť.