Komponenta¶

Jak již bylo řečeno, komponenty jsou základní stavební kámen React aplikací. Komponenty by měly dodržovat single responsibility principle - pokud je komponenta moc složitá a dělá moc věcí, je k zamyšlení, zda se nedá rozlámat do více nezávislých komponent. Definitivně je nutné se vyvarovat návrhu "božských komponent", které dělají všechno.

Každá komponenta má svůj lifecycle. Je to podobné jako aktivitě v nativních android/ios aplikacích. Popis zde je pouze výtažek z oficiální dokumentace, pro více detailu ofiko dokumentace: (TODO viz -> reactjs).
Existují tři hlavní fáze:

• Mounting

Množina metod, která se volá, když je komponenta "mountována", tedy její obsah je vepsán do DOMu. Od Reactu 16+ a nástupu funkcionálního paradigmatu jsou tyto funkce de facto nahrazeny hooky (useEffect), který je volán ve stejných momentech jako původní metody nad objekty. S vyjímkou metody render(), kterou musí každá komponenta obsahovat a vrací samotný JSX kód.

• Updating

Stav, kdy je komponenta aktualizována (překreslena). Komponenta je aktualizována, pokud dojde ke změně v jejím state (stavu) nebo v jejích props (vlastnotech).

• Unmouting

Stav, kdy je komponenta odebrána z DOMu. Obsahuje pouze jednu metodu, ta se zavolá před samotným odebráním. Ve funkcionálním paradigmatu se opět zavolá useEffect hook.

Následující code snippet reprezentuje triviální komponentu - HTML tlačítko.

//samotny import knihovny
import React from "react";
//Komponenta reprezentujici tlacitko v HTML
const Button = (props:{ className:string, text:string, id:string})=>{

    //trida, kterou tlacitko dostane - pro chyceni CSS pravidel
    const className = props.className;
    //text, ktery v sobe tlacitko bude mit
    const text = props.text;
    // identifikator elementu
    const id = props.id;
    //samotne vraceni tlacitka v JSX syntaxi (babel provadi preklad)
    return (
    <button type={"submit"} className={className} id={id}>{text}</button>
    )
}

//Modulove orientovane - vyexportujeme celou funkci, aby komponentu bylo mozne pouzit
export default Button;