4. Základy Reactu

React je založen na komponování uživatelského rozhraní z menších, opakovaně použitelných komponent. V této kapitole se podíváme na základy tvorby prvních komponent, jejich vzájemnou komunikaci prostřednictvím props a na práci s vnitřním stavem (state).

4.1 První komponenty

Funkční komponenty

React podporuje dva základní typy komponent: funkční a (dříve) třídní. V moderním vývoji se dnes prakticky vše točí kolem funkčních komponent a React Hooks.

1. Funkční komponenta je v podstatě JavaScriptová funkce, která přijímá vstupní data (props) a vrací JSX (uživatelské rozhraní).
2. Hooks (např. useState, useEffect) umožňují práci se stavem a vedlejšími efekty (fetch, manipulace s DOM) uvnitř funkčních komponent.

Příklad jednoduché funkční komponenty:

function Welcome() {
  return <h1>Ahoj, světe!</h1>;
}

export default Welcome;

Props – předávání dat

• Props (properties) slouží k předávání dat do komponent. Jsou to vlastnosti, které komponenta získá jako parametr. V případě funkční komponenty se jedná o argument funkce, obvykle popsaný jako objekt:

function HelloUser(props) {
  return <p>Hello, {props.name}!</p>;
}

// Použití v rodičovské komponentě:
<HelloUser name="Alice" />

1. Jednosměrný tok dat: Data plynou od rodičovské komponenty k dceřiné.
2. Neměnnost props: V komponentě nelze props měnit. Slouží pouze ke čtení (z hlediska Reactu jsou to "read-only").

Renderování a komponentní strom

• Renderování v Reactu znamená převod popisu UI (JSX) na virtuální DOM, který se poté efektivně zobrazí v prohlížeči. Ve chvíli, kdy má rodičovská komponenta dceřinou komponentu (child component), vzniká tzv. komponentní strom.

1. Rodič může předávat data dceři (pomocí props).
2. Dceřiná komponenta může vykreslovat další (vnořené) komponenty atd.
3. React provádí diff mezi virtuálním DOMem před a po změně, aby minimalizoval úpravy skutečného DOMu.

4.2 Stav a data v Reactu

State – vnitřní stav komponenty

• State (stav) je mechanismus, díky kterému komponenta uchovává a spravuje vlastní data, která se mohou v čase měnit. Změna stavu vyvolá nový re-render komponenty, při kterém React vykreslí aktuální verzi uživatelského rozhraní.

• Funkční komponenta využívá např. hook useState:

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times.</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

### Imutabilita a aktualizace stavu

• Imutabilita znamená, že se stávající objekty nemění – při změně se vytváří nová hodnota. V Reactu je tento přístup důležitý pro výkon i předvídatelnost aplikace.

const [state, setState] = useState(initialState);
setState((prevState) => ({
  ...prevState,
  newProperty: newValue,
}));

• Příklad: Pokud máme pole a chceme do něj přidat nový prvek, místo toho, abychom měnili původní pole, vytvoříme nové:

#### Proč je imutabilita důležitá?

• Výkon: Porovnání starého a nového stavu (v rámci shouldComponentUpdate, PureComponent, nebo React.memo) lze provádět efektivně, protože se stav nemění „na místě“.

• Předvídatelnost: Pokud nikdy neupravujete stav přímo, je snazší sledovat, kde a kdy dochází ke změnám (např. pomocí debug nástrojů).