Gratulujeme!

Gratulujeme, vaše kartičky fungují a jste na konci kurzu Reactu! Aplikace si načte slovíčka ze souboru, otáčí kartičky, prochází balíček, počítá, co umíte, přidává a kontroluje vlastní slovíčka, všechno si pamatuje i na příště a nechá vás procvičovat to, co ještě neumíte. A celé jste to postavili sami.

Poslední vylepšení. Slovíčka, která umíte, z kartiček zmizela, a tak by bylo hezké je někde vidět. Ukažte je v seznamu pod tlačítky. Seznam se spočítá stejně jako kProcviceni, jen s opačnou podmínkou, a map() z něj udělá prvky li, každý s vlastním klíčem:

const nauceneSlovicka = balicek.filter((slovicko) =>
    naucene.includes(slovicko.id),
);

<ul className="naucena">
    {nauceneSlovicka.map((slovicko) => (
        <li key={slovicko.id}>
            {slovicko.anglicky}: {slovicko.cesky}
        </li>
    ))}
</ul>

Jestli chcete, dejte nad seznam nadpis, třeba Slovíčka, která umíte, a ukažte obojí, jen když seznam není prázdný: nauceneSlovicka.length > 0 && …, ne nauceneSlovicka.length && …, které by ukázalo 0.

Co jste se naučili. Každá část kurzu si ve vaší aplikaci našla místo:

• Komponenty: aplikace se skládá z komponent App, Karticka a FormularSlovicka, každá je ve vlastním souboru a propojují je export default a import.
• JSX: HTML přímo v JavaScriptu, s className a hodnotami ve složených závorkách.
• Props: Karticka dostává slovíčko a překlad, FormularSlovicka funkci onPridat.
• Seznamy a podmínky: filter(), map() s klíčem, podmíněný operátor pro stranu a třídu kartičky a return v podmínce pro načítání, pro chybu i pro konec.
• Události: onClick, onChange a onSubmit s preventDefault().
• Stav: jestli je kartička otočená, index, slovíčka a to, co umíte. Pole ve stavu se nikdy nemění na místě.
• Formuláře: řízená textová pole, která kontrolují, co napíšete, a ukazují chybovou zprávu.
• Sdílený stav: slovíčka žijí v App, která formuláři dá funkci na přidání slovíčka. Balíček, pozice, skóre i kartičky k procvičení se počítají, neukládají.
• Efekty: fetch() v efektu načte slovicka.json, s Načítám… a chybovou zprávou.
• Vlastní hooky: useLocalStorage si pamatuje, co umíte, a všechny hooky jsou na začátku komponenty.

React ve vlastním počítači. Ve cvičeních za vás náš web dělal to, co ve vašem počítači dělá nástroj Vite (francouzsky „rychlý“, čte se „vít“): převedl JSX na JavaScript a propojil soubory. Právě tak se skutečné projekty v Reactu obvykle zakládají. Potřebujete Node.js (stáhněte si verzi LTS), se kterým přijde i npm, program na instalaci balíčků (hotových programů a knihoven), a terminál (příkazový řádek). Otevřete terminál ve složce, kde má projekt být, a spusťte:

npm create vite@latest karticky

Vite se zeptá na pár otázek. Zvolte framework React a variantu JavaScript. Když nabídne, že projekt hned nainstaluje a spustí, odpovězte No, abyste to mohli udělat sami. U ostatních otázek stačí odpověď, kterou navrhne. Pak přejděte do nové složky, nainstalujte balíčky a projekt spusťte:

cd karticky
npm install
npm run dev

npm install stáhne React, Vite a to, co potřebují, do složky node_modules. npm run dev spustí vývojový server Vite a vypíše adresu vaší aplikace, http://localhost:5173/. Otevřete ji v prohlížeči. Kdykoli uložíte soubor, stránka se sama aktualizuje. Server běží, dokud ho v terminálu nezastavíte klávesami Ctrl+C.

Soubory projektu jsou rozložené stejně jako soubory cvičení, jen JavaScript je ve složce src. Zkopírujte do projektu svou aplikaci:

• index.html je přímo ve složce projektu, s <div id="root"> a prvkem script, který načítá /src/main.jsx. Nechte ho, jak je, jen změňte title.
• src/main.jsx vykresluje <App /> stejně jako ten váš, jen importuje ./index.css. Změňte to na ./style.css.
• src/App.jsx je komponenta App. Nahraďte její kód svým a vedle ní do src uložte Karticka.jsx, FormularSlovicka.jsx, useLocalStorage.js a style.css.
• public je pro soubory, které jdou na web tak, jak jsou, a aplikace si o ně říká jejich adresou. Uložte tam slovicka.json a fetch("slovicka.json") ho najde.

Ukázka od Vite má v src ještě App.css, index.css a složku assets. Vaše aplikace je nepoužívá, takže je můžete smazat. A package.json obsahuje seznam balíčků projektu a jeho příkazy, třeba dev a build.

StrictMode. V main.jsx od Vite je <App /> zabalené do StrictMode. (Vite navíc píše texty v jednoduchých uvozovkách a vynechává středníky, což funguje stejně dobře.)

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

StrictMode na stránce nic nezmění. Zapne jen další kontroly během vývoje: React každou komponentu vykreslí dvakrát a každý efekt spustí, uklidí a spustí znovu, jako by se komponenta objevila, zmizela a zase objevila. Efekt bez úklidu tak svou chybu ukáže hned: interval bez clearInterval() by běžel dvakrát. Ze cvičení jsme StrictMode vynechali, protože s ním console.log() v efektu vypíše všechno dvakrát, a to začátečníky mate. Ve svém projektu ho nechte. Vaše aplikace s ním funguje: efekt jen načte slovíčka dvakrát, což ničemu nevadí. Kontroly běží jen při vývoji, v hotové aplikaci ne.

Na internet. npm run build vytvoří hotovou aplikaci ve složce dist: index.html, soubory z public a ve složce assets váš JavaScript a CSS, spojené dohromady a bez JSX, připravené pro prohlížeče. Pomocí npm run preview si ji můžete nejdřív vyzkoušet. dist je obyčejný web, který zvládne jakýkoli webhosting. Na Netlify Drop složku jen přetáhnete na stránku a vaše aplikace dostane adresu na internetu (aby tam zůstala, zaregistrujete se zdarma). Netlify i Vercel si také umí vzít projekt z GitHubu a po každé změně ho samy sestavit.

React Developer Tools je rozšíření pro Chrome, Firefox a Edge. V nástrojích pro vývojáře (F12, na Macu Cmd+Option+I) přidá kartu Components se stromem vašich komponent: klikněte na některou a uvidíte její props, stav i další hooky. Můžete je dokonce měnit a sledovat, co se stane.

Co dál. Pár nápadů:

• Vylepšujte své kartičky. Všechno, co k tomu potřebujete, už znáte: tlačítko, které odebere vlastní slovíčko, kartičky obráceně (nejdřív česky), zamíchání balíčku, ref, který po přidání slovíčka vrátí kurzor do prvního textového pole, nebo několik balíčků (zvirata.json, jidlo.json) s prvkem select a efektem, který načte ten vybraný.
• Dokumentace Reactu na react.dev (anglicky) vysvětluje všechno z tohoto kurzu podrobněji, i s cvičeními, a popisuje každý hook.
• Kontext a useReducer: kontext předá data komponentám hluboko dole, aniž by musela projít props každé komponenty po cestě, a useReducer drží stav s mnoha druhy změn na jednom místě.
• Akce formulářů jsou novinkou Reactu 19: funkce v <form action={…}> dostane data formuláře a useActionState a useFormStatus řeknou, jestli se ještě odesílá a jak to dopadlo.
• React Router dá aplikaci několik stránek s vlastními adresami, třeba / a /slovicka.
• TypeScript popíše, co je v props a ve stavu, a najde spoustu chyb ještě dřív, než aplikaci spustíte. Vite pro něj má variantu TypeScript a naučí vás ho kurz TypeScriptu.
• Next.js je framework postavený na Reactu pro celé weby: stránky v souborech, vykreslování na serveru a načítání dat. Je v něm postavený i tento web.