ASWI - Pokročilé softwarové inženýrství » ASWI 2023 » Vylepšení funkcí a rozhraní frameworku SPADe (Pícha) - PRO_grammers.

h1. 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.

<pre><code class="react">

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;

</code></pre>