Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

14. diel - Prehliadač Pokémonov v React - Detail a typy Nové

V minulej lekcii, Prehliadač Pokémonov v React - Stránkovanie , sme doplnili do našej aplikácie pre prezeranie pokémonov stránkovania, na čo sme použili okrem iného CSS framework Bootstrap.

V React tutoriálu pridáme do nášho prehliadača pokémonov AJAX požiadavku na detail pokémona. Ten potom zobrazíme ako kartu vrátane obrázku:

Detail pokémona vrátane jeho typov - Základy React

Karta pokémona

Ako prvé si vytvoríme novú React komponentu PokemonCard. Ohľadom štýlovania nebudeme vynachádzať koleso a kartu vykreslíme pomocou Bootstrap komponenty card.

CSS štýl karty - PokemonCard.css

Keďže použijeme Bootstrap, budeme pre celú kartu potrebovať len dva jednoduché štýly. Pre tie si v priečinku src/pokemon/ vytvoríme súbor PokemonCard.css.

Uloženie súborov CSS v rovnakej zložke, v ktorej sa nachádzajú zodpovedajúce React komponenty, je bežný prístup. V aplikácii je potom jednoducho vidieť, ktoré štýly používa ktorá komponenta a možno ich ľahšie upravovať.

Do súboru vložíme nasledujúce CSS a uložíme:


 

...koniec náhľadu článku...
Pokračuj ďalej

Vedomosti v hodnote stoviek tisíc získaš za pár korún

Minul 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émiové sekcie.

Obmedzená ponuka: Nauč sa všetko a ušetri

Kúpiť všetky aktuálne dostupné lekcie s funkciou odovzdávanie úloh a certifikátom za exkluzívnu cenu 285 kreditov
Aktuálny stav konta 0 kreditov
Kúpou tohoto výhodného balíčku získaš prístup ku všetkým 19 článkom (16 lekcií, 2 praktické cvičenia, test) s kontrolou a certifikáciou a ešte naviac ušetríš 91 Kč. Ponuka je časovo obmedzená a platí pro všetky lekcie v kurze. Nakúp teraz a získaj limitovanou 24% zľavu.

Obsah článku spadá pod licenciu Premium, kúpou článku súhlasíš so zmluvnými podmienkami.

Čo od nás v ďalších lekciách dostaneš?
  • Neobmedzený a trvalý prístup k jednotlivým lekciím.
  • 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 React tutoriále pridáme do nášho prehliadača pokémonov AJAX požiadavku na detail pokémona. Ten potom zobrazíme ako kartu vrátane obrázku.

Kredity získaš, keď podporíš našu sieť. To môžeš urobiť buď zaslaním symbolickej sumy na podporu prevádzky alebo pridaním obsahu na sieť.

Článok pre vás napísal Daniel Zábojník
Avatar
Autor se věnuje vývoji (a příležitostně navrhování) výjimečných desktopových a mobilních aplikací, grafickému zpracování a všemu co k tomu patří.
Aktivity