State: aplikace, která si pamatuje · Programuj s Martinem

Naučíš se useState – paměť komponent. Aplikace začne reagovat na kliknutí po reactovsku.

Proč obyčejná proměnná nestačí

V Úrovni 2 jsi počítadlo dělal(a) tak, že jsi po kliknutí sám/sama přepsal(a) text tlačítka. React to dělá jinak: ty změníš data a React překreslí obrazovku. Ale musíš mu data svěřit do speciální krabičky, které se říká state (stav) – jinak si změny nevšimne.

Ukaž mi to: počítadlo v Reactu

import { useState } from 'react';

function Pocitadlo() {
  const [pocet, setPocet] = useState(0);

  return (
    <button onClick={() => setPocet(pocet + 1)}>
      Klikáno: {pocet}×
    </button>
  );
}

export default Pocitadlo;

Rozbor toho nejdůležitějšího řádku – const [pocet, setPocet] = useState(0);:

useState(0) – „Reacte, založ mi krabičku s počáteční hodnotou 0.”
pocet – aktuální hodnota v krabičce (jen ke čtení).
setPocet – jediný správný způsob, jak hodnotu změnit. Když zavoláš setPocet(5), React uloží novou hodnotu a sám překreslí všechno, kde se pocet používá.

A onClick={...} je reactovská verze addEventListener("click", ...) – rovnou v JSX.

Všimni si, co v kódu není: žádné getElementById, žádné textContent. Neříkáš jak změnit obrazovku – říkáš co platí (pocet je teď 5) a obrazovka se srovná sama.

Ukaž mi to: state řídí, co je vidět

State nemusí být jen číslo. Schovávací sekce po reactovsku:

import { useState } from 'react';

function Jidelnicek() {
  const [otevreno, setOtevreno] = useState(false);

  return (
    <div>
      <button onClick={() => setOtevreno(!otevreno)}>
        {otevreno ? "Schovat jídelníček ▲" : "Ukázat jídelníček ▼"}
      </button>

      {otevreno && (
        <ul>
          <li>Pondělí: rajská s těstovinami</li>
          <li>Úterý: kuře s rýží</li>
          <li>Středa: buchtičky se šodó</li>
        </ul>
      )}
    </div>
  );
}

Dvě nová kouzla JSX:

podminka ? A : B – zkrácené if/else přímo v HTML: „když je otevřeno, ukaž tohle, jinak tamto”.
podminka && (...) – „vykresli, jen když podmínka platí”. Když je otevreno false, seznam prostě neexistuje.

A !otevreno znamená „opak” – z true udělá false a naopak. Jeden řádek = přepínač.

Teď ty 💪

Přidej do své aplikace dvě věci se state:

Přepínací sekci (true/false state) podle projektu: 🏫 rozbalovací jídelníček · 🙋 „ukaž/schovej moje top hry” · 🌍 rozbalovací seznam zemí · ⚽ rozbalovací soupiska.
Počítadlo nebo hlasování (číselný state): 🏫 hlasování o výlet · 🙋 „kolik lidí mě dnes pozdravilo” · 🌍 počítadlo navštívených zemí · ⚽ ukazatel skóre s tlačítky +1 domácí / +1 hosté (dva state!).

Řešení bonusu: skóre se dvěma state

import { useState } from 'react';

function Skore() {
  const [domaci, setDomaci] = useState(0);
  const [hoste, setHoste] = useState(0);

  return (
    <div className="karta">
      <h3>Sokol Nebovidy {domaci} : {hoste} Lipová</h3>
      <button onClick={() => setDomaci(domaci + 1)}>Gól domácí ⚽</button>
      <button onClick={() => setHoste(hoste + 1)}>Gól hosté 😤</button>
      <button onClick={() => { setDomaci(0); setHoste(0); }}>Nový zápas</button>
    </div>
  );
}

export default Skore;

Komponenta může mít krabiček, kolik chce – každá useState je jedna.

✅

Kontrola: Tvoje aplikace má aspoň dvě interaktivní místa a v kódu nikde není getElementById. Když tenhle myšlenkový obrat („měním data, ne obrazovku”) zvládneš, zvládl(a) jsi na Reactu to nejtěžší.

Co si z téhle lekce odnést

const [hodnota, setHodnota] = useState(pocatek) – paměť komponenty.
Změna jen přes setHodnota(...) – React pak sám překreslí.
V JSX: onClick={...}, podmínky ? : a && řídí, co je vidět.