Co jsme se dnes naučili
1. Úvod do React
- ✅ Co je React a proč vznikl
- ✅ Historie a vývoj React
- ✅ Kdo React vyvíjí (Meta/Facebook)
- ✅ Základní principy a výhody, které React přináší
2. Problémy s vanilla JavaScript
- ❌ Ruční manipulace s DOM jsou lehce náročnější
- ❌ Složitá práce se stavem aplikace - složité udržování konzistence stavů atd.
- ❌ Duplikace kódu
- ❌ Imperativní přístup
- ❌ Těžko udržovatelné - musíme udržovat celou codebase
3. React
- ✅ Deklarativní přístup
- ✅ Komponentní architektura
- ✅ Automatická aktualizace UI
- ✅ Uni-directional data flow
4. Bundlery a JSX
- ✅ Co jsou bundlery (Vite, Webpack, RsBuild)
- ✅ Výhody Vite (rychlost, HMR, zero-config)
- ✅ JSX syntax a jeho výhody
- ✅ Přepis automatu do JSX
Klíčové koncepty React
Deklarativní přístup
// Místo: "Co chceme zobrazit a jak provést aktualizaci DOMu"
// Říkáme jen: "Co chceme zobrazit"
<div className="display">{getStatusText()}</div>Komponenty
// Rozdělujeme UI na znovupoužitelné části
const DisplayStatusText = ({ status, currentDrink }) => {
return <div className="display">{getStatusText(status, currentDrink)}</div>;
}Reaktivita
// UI se automaticky aktualizuje při změně stavu (reaguje na změnu stavu)
const [state, setState] = useState({ status: 'ready' });
// Změna stavu → automatická aktualizace UIUni-directional data flow
Data prochází od rodičovského prvku dolů, předávaná pomocí props.
// Props -> Parent -> Child -> podkomponenta -> UI
const Parent = (props) => {
return <div>
<ChildElement props={props} />
</div>
}Užitečné zdroje:
Dotazy a diskuse
Máte nějaké dotazy k dnešní lekci? Nebo chcete diskutovat o něčem konkrétním?
Možná témata pro diskuzi:
- Problémy s instalací Vite
- Otázky k JSX syntaxi
- Nápady na CV projekt
- Obecné dotazy k React
Děkujeme za pozornost! Uvidíme se příští týden na lekci o komponentách a JSX! 🚀