Lekce 19 - Fragmenty v Reactu
V předchozí lekci, Mutace a dotazy v GraphQL s knihovnou Apollo, jsme si rozšířili znalosti GraphQL a vyzkoušeli jsme si práci s daty prostřednictvím dotazů a mutací s využitím knihovny Apollo.
V dnešním tutoriálu pokročilého Reactu se seznámíme s fragmenty a ukážeme si, jak pomocí nich dokážeme optimalizovat React kód.
Co je to fragment
V Reactu jsou fragmenty jednoduchým způsobem, jak sdružovat a znovu
používat části uživatelského rozhraní. Fragmenty jsou jakýmsi obalem,
který umožňuje seskupit více komponent do jednoho celku bez nutnosti
vytvářet další nadřazený HTML element, třeba <div>
.
Tím se zabrání vložení zbytečných nebo nežádoucích HTML elementů do
DOM struktury.
Proč potřebujeme fragmenty
React nedovoluje vrátit vícero prvků najednou. Následující kód by proto v Reactu nefungoval:
return ( <h1>První element</h1> <p>Druhý element</p> )
Je to limitace JSX, která ale vůbec není překvapující. Jako ekvivalent si představme následující kód v klasickém JavaScriptu. Ani ten nebude fungovat:
...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 tutoriálu pokročilého Reactu si vysvětlíme, jak použít v Reactu fragmenty, co přesně jsou a proč jsou užitečné pro psaní čistého kódu.
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íť.