Lekce 0.10 · JavaScript pro React

JS vzory, které v Reactu potkáš všude

Seznamy přes map, podmínky v JSX, funkce v onClick, aktualizace stavu a closures v komponentách.

Než začneme: React je hlavně JavaScript

Řádek tasks.map((t) => (t.id === id ? { ...t, done: !t.done } : t)) na první pohled vypadá jako zaklínadlo z Reactu. Přitom v něm React vůbec není: šipková funkce, ternár, spread objektu a metoda pole. Všechno z předchozích lekcí.

Tahle lekce je most mezi JavaScriptem a Reactem. Projdeme si, kde přesně se jednotlivé kousky JS v komponentách objevují – a ty pak v dalších lekcích poznáš na první pohled. Nemusíš ještě rozumět Reactu do hloubky; useState a JSX podrobně vysvětlí lekce 1 a 2. Tady jde o JavaScript kolem nich.

1. Komponenta je funkce, props jsou objekt

// Komponenta = obyčejná funkce (s velkým písmenem), která vrací JSX
function Greeting(props) {
  return <h1>Ahoj, {props.name}!</h1>
}

// Destrukturace parametru (lekce 0.3) + výchozí hodnota (lekce 0.2)
function Greeting({ name, greeting = 'Ahoj' }) {
  return <h1>{greeting}, {name}!</h1>
}

// Použití: atributy se posbírají do JEDNOHO objektu props
<Greeting name="Jana" />                 // props = { name: 'Jana' }
<Greeting name="Petr" greeting="Čau" />  // props = { name: 'Petr', greeting: 'Čau' }

Rest a spread u props

// Vytáhni, co potřebuješ, a zbytek pošli dál
function Button({ variant = 'primary', ...rest }) {
  return <button className={`btn btn-${variant}`} {...rest} />
}

<Button variant="ghost" onClick={save} disabled>Uložit</Button>
// rest = { onClick: save, disabled: true, children: 'Uložit' } → všechno dostane <button>

2. JSX: okno do JavaScriptu

Složené závorky v JSX jsou okno, kterým vložíš výraz – cokoli, co má hodnotu. Příkazy (if, for, const) dovnitř nepatří, ty se píšou nad return.

function Price({ amount, discount }) {
  // ✅ Příkazy a mezivýpočty nad return
  const final = amount - discount
  const isFree = final <= 0

  return (
    <p>
      {final} Kč                                  {/* proměnná */}
      {amount * 1.21} Kč s DPH                    {/* výpočet */}
      {formatPrice(final)}                        {/* volání funkce */}
      {isFree ? 'Zdarma!' : `Cena: ${final} Kč`}  {/* ternár, šablona */}
      {/* {if (isFree) …} ❌ if není výraz */}
    </p>
  )
}

// Šablonový řetězec pro složené CSS třídy
<li className={`task ${done ? 'task-done' : ''} ${urgent ? 'task-urgent' : ''}`}>

// Objekt se styly – vnější { } je okno do JS, vnitřní { } je objekt
<div style={{ color: 'red', fontSize: 14 }}>

3. Seznamy: map, filter a key

V JSX není for. Seznam se vykreslí tak, že pole dat přes map převedeš na pole prvků – React umí pole prvků vykreslit:

const fruits = ['jablko', 'hruška', 'švestka']

<ul>
  {fruits.map((fruit) => <li key={fruit}>{fruit}</li>)}
</ul>
// map vrátí [<li>jablko</li>, <li>hruška</li>, <li>švestka</li>]

function TodoList({ todos, query }) {
  // filter nad return – odvozená data
  const visible = todos.filter((t) => t.title.toLowerCase().includes(query.toLowerCase()))

  if (visible.length === 0) return <p>Nic nenalezeno.</p>   // early return pro prázdný stav

  return (
    <ul>
      {visible.map((todo) => (
        <li key={todo.id}>                 {/* key: stabilní id z dat */}
          {todo.title}
        </li>
      ))}
    </ul>
  )
}

4. Podmíněné vykreslení

Chci…	Zápis
dvě varianty	`{isLoggedIn ? <Profile /> : <Login />}`
něco, nebo nic	`{hasError && <ErrorBox />}`
nic nevykreslit vůbec	`if (!user) return null`
loading / chyba / data	early return pro každý stav
variantu podle hodnoty	`{ICONS[status]}`

function UserPanel({ user, isLoading, error }) {
  // early return – každý stav vyřídit a skončit (lekce 0.6)
  if (isLoading) return <p>Načítám…</p>
  if (error) return <p className="error">{error}</p>
  if (!user) return null                           // null = nic nevykreslit

  return (
    <div>
      <h2>{user.name}</h2>
      {user.isAdmin && <span>Admin</span>}         {/* && s booleanem */}
      {user.messages.length > 0 && (               {/* ✅ porovnání, ne holé číslo */}
        <span>{user.messages.length} zpráv</span>
      )}
      <p>{user.bio ?? 'Bez popisu'}</p>            {/* ?? pro výchozí text */}
      <p>{user.address?.city}</p>                  {/* ?. pro volitelné údaje */}
    </div>
  )
}

Ukázka

JavaScript uvnitř komponenty

Co vidíš: Malý katalog. V kódu (tlačítko Kód) najdeš filter, map s key, ternár, &&, šablonový řetězec pro CSS třídu, slovník ikon a reduce na součet – všechno okomentované.

Vyzkoušej:

Piš do vyhledávání – seznam se filtruje, součet cen se přepočítává.
Zaškrtni Jen skladem: druhý filter v řetězu.
Napiš nesmysl, třeba „xyz“. Ternár přepne na hlášku „Nic nenalezeno“.
Otevři kód a najdi každý vzor z lekcí 0.4–0.6.

Co z toho plyne: Komponenta je z velké části obyčejný JavaScript: data se připraví nad return (filter, reduce) a v JSX se jen poskládají (map, ternár, &&).

Načítám interaktivní část…

5. Události: funkce jako hodnota

Do onClick se předává funkce, kterou React zavolá při kliknutí (lekce 0.2) – ne výsledek jejího zavolání:

function handleClick() {
  alert('Kliknuto!')
}

<button onClick={handleClick}>OK</button>             // ✅ předáš funkci
<button onClick={handleClick()}>OK</button>           // ❌ zavoláš ji HNED při vykreslení
<button onClick={() => remove(todo.id)}>×</button>    // ✅ potřebuješ argument → obal do šipky
<button onClick={remove(todo.id)}>×</button>          // ❌ smaže se při vykreslení!

Objekt události

// React předá obsluze objekt události
<input onChange={(e) => setName(e.target.value)} />        // text z inputu (vždy string!)
<input type="checkbox" onChange={(e) => setOn(e.target.checked)} />
<input type="number" onChange={(e) => setAge(Number(e.target.value))} />   // převod (lekce 0.1)

function handleSubmit(e) {
  e.preventDefault()        // formulář by jinak znovu načetl stránku
  // …
}
<form onSubmit={handleSubmit}>

Callback od rodiče

// Rodič předá funkci jako prop (konvence: on…), dítě ji zavolá (konvence: handle…)
function TodoItem({ todo, onToggle, onDelete }) {
  return (
    <li>
      <input type="checkbox" checked={todo.done} onChange={() => onToggle(todo.id)} />
      {todo.title}
      <button onClick={() => onDelete(todo.id)}>×</button>
    </li>
  )
}

<TodoItem todo={todo} onToggle={handleToggle} onDelete={handleDelete} />

6. Stav: destrukturace a neměnné aktualizace

const [count, setCount] = useState(0)
// useState vrací pole [hodnota, funkce na změnu] – destrukturace pole (lekce 0.3)
// jména si volíš sám; konvence je x / setX

Stav se nikdy nemění přímo. Vždy předáš novou hodnotu – u objektů a polí nový objekt nebo nové pole (celá lekce 0.9):

setCount(count + 1)                                   // číslo
setName(e.target.value)                               // text
setUser({ ...user, name: 'Eva' })                     // objekt – spread
setTodos([...todos, newTodo])                         // přidat
setTodos(todos.filter((t) => t.id !== id))            // odebrat
setTodos(todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t)))   // změnit jednu

todos.push(newTodo)    // ❌ mutace – React změnu nepozná
setTodos(todos)        // ❌ pořád totéž pole

Updater: funkce místo hodnoty

setCount(count + 1)          // nová hodnota spočítaná z count v TOMHLE renderu
setCount((c) => c + 1)       // funkce: „vezmi aktuální hodnotu a přičti 1“

setTodos((prev) => [...prev, newTodo])   // totéž pro pole

Proč existují dvě podoby? Kvůli closures – viz další kapitola.

7. Closures v komponentách: každý render je snímek

Komponenta je funkce a React ji volá při každém vykreslení znovu. Každé zavolání má vlastní proměnné – vlastní count, vlastní handleClick. Funkce vytvořené v jednom renderu si v batůžku (closure, lekce 0.2) nesou hodnoty z toho renderu. Je to jako fotka: zachycuje stav v okamžiku pořízení.

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

  function addLater() {
    setTimeout(() => {
      setCount(count + 1)    // count je hodnota z renderu, ve kterém se kliklo
    }, 2000)
  }
  // Klikneš 3× rychle za sebou: všechny tři timeouty vidí count = 0 → výsledek 1, ne 3

  function addLaterFixed() {
    setTimeout(() => {
      setCount((c) => c + 1) // React předá aktuální hodnotu → výsledek 3
    }, 2000)
  }
}

Ukázka

Snímek vs. updater

Co vidíš: Počítadlo a dvě tlačítka, která přičtou jedničku až za 2 sekundy – každé jiným způsobem.

Vyzkoušej:

Klikni třikrát rychle na ❌ a počkej. Číslo se zvedne jen o 1: všechny tři timeouty si nesou stejný snímek count.
Vynuluj a klikni třikrát rychle na ✅. Číslo se zvedne o 3: updater dostává vždy aktuální hodnotu.

Co z toho plyne: Když nová hodnota závisí na předchozí a změna se může nakupit (časovače, víc změn za sebou), použij updater setX((prev) => …).

Načítám interaktivní část…

8. Async v obsluze události

Obsluha události může být async funkce – typicky odeslání formuláře (lekce 0.7):

function SignupForm() {
  const [isSending, setIsSending] = useState(false)
  const [error, setError] = useState(null)

  async function handleSubmit(e) {
    e.preventDefault()
    setIsSending(true)
    setError(null)
    try {
      await registerUser({ name, email })   // počkej na server
      alert('Hotovo!')
    } catch (err) {
      setError(err.message)                 // ukaž chybu
    } finally {
      setIsSending(false)                   // v každém případě konec načítání
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      …
      <button disabled={isSending}>{isSending ? 'Odesílám…' : 'Registrovat'}</button>
      {error && <p className="error">{error}</p>}
    </form>
  )
}

Ověř si to

Kvíz Co udělá <button onClick={deleteAll()}>?

Smaže všechno po kliknutíSmaže všechno hned při vykresleníNic, je to chyba syntaxe

Kvíz Proč v JSX nejde napsat {if (x) …}?

React if zakazujeDo { } patří jen výraz s hodnotou, if je příkazif funguje jen v třídách

Kvíz Jak přidáš položku do stavu todos?

todos.push(item)setTodos(todos.push(item))setTodos([...todos, item])todos = [...todos, item]

Kvíz Klikneš 3× rychle na tlačítko s setTimeout(() => setCount(count + 1), 1000). Kolik bude count (start 0)?

310Záleží na rychlosti

Rozcvička

Výzva

Seznam jmen

Rozcvička

Vykresli pole jmen jako seznam a ukaž, kolik jich je.

Zadání (stejný text je v komentáři na začátku souboru)

VÝZVA: Seznam jmen

1. Místo jediného natvrdo napsaného <li> vykresli všechna jména z pole `names`
   přes names.map(…). Každé <li> potřebuje key – tady stačí samotné jméno.
2. Do nadpisu doplň počet jmen: names.length

🧩 Odkud se berou věci, které tu nejsou definované

CSS třídy jako row, stack, card, list, btn, input nebo muted jsou hotové styly kurzu v src/styles.css (row = prvky vedle sebe, stack = pod sebou, card = rámeček, muted = šedý text).

Načítám interaktivní část…

Mám hotovo

Výzva

Nákupní seznam

Střední Bonusová výzva

Komponenta s hotovým stavem a vzhledem, ve které chybí JavaScript: filtrování, počítání, přidání, odškrtnutí a smazání položky. Všechno jsou vzory z této části kurzu.

🔒 Bonusová výzva

Střední a těžké výzvy jsou bonus pro přihlášené. Registrace je zdarma – stačí e-mail, žádné heslo.

Shrnutí

Komponenta je funkce, props jsou objekt – destrukturace, výchozí hodnoty a rest/spread fungují jako u každé funkce.
Do JSX patří výrazy. Příkazy a výpočty nad return, v JSX ternár, &&, map a šablonové řetězce.
Seznam = map na pole prvků s key. Filtruj nad return, prázdný stav ošetři ternárem nebo early returnem.
onClick={fn} předává funkci, onClick={fn()} ji hned volá. S argumentem () => fn(x).
Stav se mění jen setterem a novou hodnotou – spread, filter, map. Nikdy push ani přiřazení.
Každý render je snímek. Funkce si nesou hodnoty ze svého renderu; když se změny kupí, použij updater setX((prev) => …).

Načítám lekci…

💬 Našel jsi chybu, něco ti není jasné, nebo máš nápad? Napiš mi.