Kurz REACT - Praktický úvod do Reactu bez předchozích znalostí v Brně

Seznámení s Reactem

• Jak nainstalovat React a nastavit vývojové prostředí? (Node.js, create-react-app)
• Proč je React tak populární? (komponentový přístup, virtuální DOM, ekosystém knihoven)
• Vysvětlení klíčových pojmů – komponenty, state, props, lifecycle metody
• Jednoduchý „Hello World“ projekt pro pochopení základů Reactu
• Nejčastější otázky začátečníků: Jak spouštět projekt, opravovat chyby a spravovat balíčky?

Tvorba interaktivní React hry

• Základy návrhu herní logiky: matematické příklady pro děti (do 10 nebo 20)
• Generování otázek a zobrazení více možností (8 variant) na obrazovce
• Mechanika odměn (ovoce za správnou odpověď, džus po pěti ovocích)
• Reakce na kliknutí uživatele a validace výsledku (správná nebo nesprávná odpověď)
• Responzivní design a testování hry na různých zařízeních (tablet, mobil, PC)

Připojení hry k externímu API (PHP backend)

• Jak funguje HTTP komunikace v Reactu (fetch, axios)?
• Napojení na předem připravené API v PHP – přehled endpointů a formát dat (JSON)
• Čtení a zapisování herních statistik (např. počet bodů, úspěšnost dětí) do databáze
• Řešení chybových stavů – co dělat, když server neodpovídá?
• Základy zabezpečení komunikace a ochrany dat (CORS, tokeny, typické scénáře)

Pokročilejší prvky Reactu pro moderní web

• Správa stavu aplikace (useState, useEffect) – tipy pro interaktivní hru
• Refaktoring kódu do menších komponent a práce s vlastními hooky
• Optimalizace výkonu (memoizace komponent, lazy loading, code splitting)
• SEO u Single Page Aplikací – jak zajistit lepší indexaci
• Přehled užitečných knihoven a nástrojů (React Router, styled-components, Redux atd.)

Nasazení a další rozvoj React aplikace

• Základní způsoby nasazení React projektu
• Jak propojit React aplikaci s CI/CD (základy a doporučené nástroje)
• Údržba kódu a verzování (Git, pravidelné aktualizace závislostí)
• Tipy pro další rozšiřování hry (přidání žebříčku, různé úrovně obtížnosti)
• Kde pokračovat? Nejčastější React témata – TypeScript, server-side rendering, Next.js