React.createElement a projekt Automat na kafe
🚀 Proč React?
Výhody React
- Populární - používají ho Facebook, Netflix, Airbnb
- Komunitní - obrovská komunita a množství knihoven
- Flexibilní - lze kombinovat s různými technologiemi
- Výkonný - efektivní vykreslování a aktualizace UI
- Pochopitelný - relativně jednoduché základy
Co React řeší?
React vznikl jako řešení problémů s tradičním JavaScript přístupem:
- Ruční manipulace s DOM je náročná a neflexibilní
- Složitá správa stavu aplikace
- Duplicitní kusy kódu
- Dlouhodobě těžko udržovatelné aplikace
Dokumentace
React je velmi dobře dokumentovaný. Když něco není jasné, můžeš zkusit kouknout do dokumentace.
❓ Co je React?
React je JavaScript knihovna pro tvorbu
uživatelských rozhraní(UI = User Interface), zejména webových aplikací.
Knihovna vs Framework
- Knihovna (např. React) = řeší pouze část aplikace (UI)
- Framework (např. Angular) = řeší celý ekosystém aplikace
Výhoda: React je knihovna, která se dá použít v kombinaci s jinými knihovnami.
Základní pojmy
Komponenty- znovupoužitelné části UIJSX- syntax pro psaní HTML v JavaScriptuState- stav komponenty - data na kterých závisí, jak se komponenta zobrazí nebo jak se bude chovatProps- parametry (data) předávané do komponentyVirtual DOM- vlastní React DOM implementace k zefektivnění vykreslování
Hlavní vlastnosti Reactu (už jsme se s nimi setkali dříve)
- ✅ Komponentní:
- UI je rozdělená na menší znovupoužitelné části. [img src=“/images/react-components.png” alt=“React komponenty” style=“max-width: 400px;”]
- ✅ Deklarativní:
- Popiš, co chceš udělat a React to zařídí ve správný čas.
- ✅ Reaktivní:
- Komponenty se automaticky aktualizují (vyrenderují) při změně dat.
- Optimalizace - aktualizují se pouze části UI, které to potřebují.
- ✅ Stavový:
- Lokální stav komponenty je uložen na jednom místě a může být měněn pouze z jednoho místa.
- O globálním stavu někdy příště. :)
- ✅ Uni-directional data flow (jednosměrný tok dat):
- Data tečou jedním směrem (z hlavní komponenty do podkomponent).
- Zvyšuje předvídatelnost chování aplikace a zjednodušuje tím vývoj.