Základy práce s komponenty v Reacte

React je JavaScriptová knihovna určená pro tvorbu moderních webových aplikací. Jeho základní stavební jednotkou jsou komponenty. Pochopení jejich fungování je nezbytné pro každého, kdo chce efektivně pracovat s Reactom.

Co jsou komponenty v Reacte?

Komponenty jsou samostatné části uživatelského rozhraní, které lze opakovaně používat v aplikaci. Představte si je jako stavební bloky, ze kterých se skládá celá webová aplikace.

Jaký mají komponenty praktický význam?

Používání komponent umožňuje:

1. Typy komponent v Reacte

V Reacte existují dva základní typy komponent:

1.1. Funkční komponenty

Funkční komponenty jsou jednodušší a využívají se v moderních React aplikacích. Definují se jako JavaScript funkce.

function Pozdrav() { return <h1>Ahoj, svět!</h1>; } Vlastnosti funkčních komponent:

1.2. Třídové komponenty

Třídové komponenty jsou starší forma psaní komponent. Používali se předtím, než byly představeny React Hooky.

class Pozdrav extends React.Component { render() { return <h1>Ahoj, svět!</h1>; } } Vlastnosti třídových komponent:
  • Používají se méně často, ale stále se s nimi můžete setkat.
  • Podporují správu stavu pomocí this.state.

2. Práce s vlastnostmi (props)

Props (properties) jsou data, která jsou přenášena do komponent. Pomocí nich můžeme dynamicky měnit obsah komponent.

Příklad použití props:

function Pozdrav(props) { return <h1>Ahoj, {props.jméno}!</h1>; } export default function App() { return <Pozdrav jméno="Peter" />; }

3. Správa stavu v komponentech

Kromě vlastností props můžeme v Reacte používat i stav k ukládání a aktualizaci dat v rámci komponenty.

Online kurz programovania v Jave

Programovanie nie je ťažké! Kódenie vlastných appiek v nástroji Java je veľká zábava. Do konca leta programujete vy sami alebo vaše bystré deti svoje prvé appky

Prvá hodina zadarmo!

7dňová výzva programovania Webu

Budete vedieť vytvárať pekné weby koncom budúceho týždňa? Áno, dá sa to! Radi vám s tým pomôžeme. Stačí prijať Sedemdňovú výzvu a rezervovať si tento kurz

Prvá hodina zadarmo!

Správa stavu pomocí useState hooku:

import { useState } from "react"; function Pocitadlo() { const [pocet, setPocet] = useState(0); return ( <div> <p>Počet kliknutí: {pocet}</p> <button onClick={() => setPocet(pocet + 1)}>Klikni</button> </div> ); }

4. Životní cyklus komponent

Každý komponent React prochází určitými fázemi, jako je vytvoření, aktualizace a zničení.

Nejčastěji používané metody životního cyklu:

  • componentDidMount – Jmenuje se po prvním vykreslení komponenty.
  • componentDidUpdate – Spustí se po aktualizaci komponenty.
  • componentWillUnmount – Provede se při odstraňování komponent.

V moderních aplikacích se místo těchto metod často používá useEffect hook.

import { useEffect } from "react"; function Komponent() { useEffect(() => { console.log("Komponenta byla vytvořena!"); return () => console.log("Komponenta byla zničena!"); }, []); return <p>Komponenta Reactu</p>; }

Nejčastější otázky

1. Jaký je rozdíl mezi props a state?

Props se přenášejí do komponent a jsou neměnné. State se mění v rámci komponenty.

2. Kdy používat třídové komponenty?

Dnes se většinou používají funkční komponenty. Třídové komponenty se hodí pro práci se starším kódem.

3. Jak efektivně spravovat stav ve složitějších aplikacích?

U větších projektů se doporučuje používat nástroje pro správu stavu, jako například Redux.

Chcete se naučit programovat?

Máte-li zájem o prezenční nebo online školení programování, podívejte se na naši nabídku na www.like-it.sk. Naše kurzy vedou zkušení odborníci, kteří vám pomohou zvládnout základy i pokročilé koncepty programování.

Kurz UML - Základy jazyka UML v nástroji Enterprise Architect

Kurz JAVASE1 - Základy programování v jazyce Java

Jak začít programovat?

Úvod do programování pro každého bez předchozích znalostí.

Stáhněte si náš ebook teď výjimečně zdarma!!!

STÁHNOUT TEĎ
Ebook programovanie

Viac informacií preberáme na kurze:

Kurz REACT - Praktický úvod do Reactu bez predchádzajúcich znalostí

Marián Knězek