Základy práce s komponentmi v Reacte

React je JavaScriptová knižnica určená na tvorbu moderných webových aplikácií. Jeho základnou stavebnou jednotkou sú komponenty. Pochopenie ich fungovania je nevyhnutné pre každého, kto chce efektívne pracovať s Reactom.

Čo sú komponenty v Reacte?

Komponenty sú samostatné časti používateľského rozhrania, ktoré je možné opakovane používať v aplikácii. Predstavte si ich ako stavebné bloky, z ktorých sa skladá celá webová aplikácia.

Aký majú komponenty praktický význam?

Používanie komponentov umožňuje:

Opakovateľnosť kódu – Komponenty môžeme používať na viacerých miestach v aplikácii.
Modularitu – Kód je prehľadný a organizovaný.
Jednoduchšiu údržbu – Zmeny v jednom komponente sa prejavia všade, kde sa používa.

1. Typy komponentov v Reacte

V Reacte existujú dva základné typy komponentov:

1.1. Funkčné komponenty

Funkčné komponenty sú jednoduchšie a využívajú sa v moderných React aplikáciách. Definujú sa ako JavaScript funkcie.

function Pozdrav() {
    return <h1>Ahoj, svet!</h1>;
}

Vlastnosti funkčných komponentov:

Jednoduché a ľahko čitateľné.
Využívajú React Hooky na správu stavu.
Sú preferované pre väčšinu nových projektov.

1.2. Triedové komponenty

Triedové komponenty sú staršia forma písania komponentov. Používali sa predtým, než boli predstavené React Hooky.

class Pozdrav extends React.Component {
    render() {
        return <h1>Ahoj, svet!</h1>;
    }
}

Vlastnosti triedových komponentov:

Používajú sa menej často, ale stále sa s nimi môžete stretnúť.
Podporujú správu stavu pomocou this.state.

2. Práca s vlastnosťami (props)

Props (properties) sú údaje, ktoré sa prenášajú do komponentov. Pomocou nich môžeme dynamicky meniť obsah komponentov.

Príklad použitia props:

function Pozdrav(props) {
    return <h1>Ahoj, {props.meno}!</h1>;
}

export default function App() {
    return <Pozdrav meno="Peter" />;
}

3. Správa stavu v komponentoch

Okrem vlastností props môžeme v Reacte používať aj stav na ukladanie a aktualizáciu dát v rámci komponentu.

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 pomocou 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 komponentov

Každý React komponent prechádza určitými fázami, ako je vytvorenie, aktualizácia a zničenie.

Najčastejšie používané metódy životného cyklu:

componentDidMount – Volá sa po prvom vykreslení komponentu.
componentDidUpdate – Spustí sa po aktualizácii komponentu.
componentWillUnmount – Vykoná sa pri odstraňovaní komponentu.

V moderných aplikáciách sa namiesto týchto metód často používa useEffect hook.

import { useEffect } from "react";

function Komponent() {
    useEffect(() => {
        console.log("Komponent bol vytvorený!");
        return () => console.log("Komponent bol zničený!");
    }, []);

    return <p>Komponent Reactu</p>;
}

Najčastejšie otázky

1. Aký je rozdiel medzi props a state?

Props sa prenášajú do komponentov a sú nemenné. State sa mení v rámci komponentu.

2. Kedy používať triedové komponenty?

Dnes sa väčšinou používajú funkčné komponenty. Triedové komponenty sa hodia na prácu so starším kódom.

3. Ako efektívne spravovať stav v zložitejších aplikáciách?

Pri väčších projektoch sa odporúča používať nástroje na správu stavu, ako napríklad Redux.

Chcete sa naučiť programovať?

Ak máte záujem o prezenčné alebo online školenie programovania, pozrite si našu ponuku na www.like-it.sk. Naše kurzy vedú skúsení odborníci, ktorí vám pomôžu zvládnuť základy aj pokročilé koncepty programovania.

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