HTML, DOM a JavaScript
📖 Stručná historie webů - HTML, CSS, JS
- První webové stránky vznikaly od roku 1990 a obsahovaly pouze základní strukturu v HTML – byly to statické stránky.
- Úplně první web spustil Tim Berners-Lee v roce 1990. Obsahoval hlavně textové odkazy a základní informace, které si vyměňovali především vědci.
- Postupem času se web stal běžným prostředkem pro sdílení informací s širokou veřejností. Přibyly nové prvky jako odkazy, obrázky, videa, zvuky nebo jednoduché interaktivní prvky.
- Příkladem jednoduchého statického webu může být tento ukázkový web.
Načítání standardního HTML
- Uživatel zavolá URL adresu webu.
- Požadavek je nasměrován na server pomocí HTTP protokolu a DNS serverů.
- Server odpoví odesláním HTML, CSS a JS souborů.
- Prohlížeč dostane v odpovědi HTML strukturu, ze které vytvoří tzv. DOM (Document Object Model), stromovou strukturu, podle které bude stránku vykreslovat.
- V HTML narazí na CSS a JS soubory, takže na server pošle požadavky na tyto soubory a ty si načte.
- DOM strukturu doplní o CSS styly a JS kód, který bude stránku interaktivní.
- Vykreslí stránku uživateli.
DOM (Document Object Model)
- DOM (Document Object Model) je struktura, která reprezentuje HTML stránku.
- Obsahuje HTML elementy, atributy, textové uzly atd.
- Je reprezentován objektem v JavaScriptu, kterým můžeme manipulovat.
- Každá změna na DOM je výpočetně náročná. Při každé změne prohlížeč může překreslit celou stránku, což je výpočetně náročná operace.
🤔 Co je React a proč vznikl?
Stav aplikace
- Stav aplikace jsou data, která se mohou v životě aplikace měnit.
- Na tomto stavu závisí, jak bude aplikace vypadat nebo jak se bude chovat, ovlivňují výpočty atp.
- Např. Automat na kafe má stav, který se může měnit. Přidáme minci, automat vypočte celkovou hodnotu vložených mincí (stav).
Historie Reactu
React byl vytvořen ve společnosti Meta (dříve Facebook):
- Autor: Jordan Walke
- Problém: Složitost správy stavu v rozsáhlých aplikacích
- Řešení: Deklarativní přístup k UI
Pojem “Reaktivita” v IT obecně
V IT existuje zavedený pojem ⚡Reaktivita.
-
Reaktivnísystém neustále běží a monitoruje změny v datech (nebo jiných zdrojích), přijímá požadavky a reaguje na ně. -
Když se něco změní, systém to zjistí a podle toho přizpůsobí další části aplikace a provede případné akce, bez nutnosti psát dodatečný kód.
-
Je to jako v tabulkovém procesoru, kde změna jedné buňky automaticky aktualizuje buňky a přepočty na ní závislé.
-
Tento přístup usnadňuje tvorbu dynamických a interaktivních aplikací, které se přizpůsobují novým vstupům plynule a okamžitě.
Proč React vznikl?
Jsou to zejména tyto problémy klasického JavaScript přístupu:
- Složitá správa stavu v aplikaci a aktualizace UI
- Složitá udržovatelnost aplikace
- Duplikace kódu a stavů aplikace
Složitá správa stavu
Manualní manipulace se stavem v DOMu jsou náročné, neefektivní a mohou vést k nekonzistenci stavu.
// Tradiční přístup
const button = document.getElementById('myButton');
const counter = document.getElementById('counter');
// Ukládáme data přímo do DOM prvku
button.addEventListener('click', function() {
counter.textContent = parseInt(counter.textContent) + 1;
});Manipulace se stavem uloženým v JS jsou nepatrně lepší, ale stále neefektivní a mohou vést k nekonzistenci stavu, pokud budeme stav chtít používat na více místech.
// Lepší přístup - zapouzdření stavu do JavaScript proměnných
let count = 0;
button.addEventListener('click', function() {
count = count + 1;
button.textContent = count;
button2.textContent = count;
});
// pokud klikne na druhé tlačítko, tak se stav změní, ale na prvním tlačítku se to nezobrazí, musíme vždy upravit oba prvky.
button2.addEventListener('click', function() {
count = count + 1;
button.textContent = count;
button2.textContent = count;
button3.textContent = count;
button4.textContent = count;
//...
});React sleduje stav obsahu (proměnné) a automaticky upraví všechny prvky, které jsou na něm závislé.
Hooks nám pomohou řešit stav v Reactu. Tady je pro ukázku jak to může vypadat. Příští lekci se o nich dozvíš podrobněji.
// React přístup
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>Increment {count}</button>
<button onClick={() => setCount(count - 1)}>Decrement {count}</button>
<button onClick={() => setCount(0)}>Reset {count}</button>
<p>Count: {count}</p>
</div>
);
}Další problémy s údržbou aplikace, které React řeší
- Imperativní kód (kód, kde říkáme co chceme dělat s každou maličkostí) je ve větším měřítku těžko čitelný a nepřehledný
- Časté chyby při aktualizaci UI (např. při změně stavu)
- Nutnost aktualizovat stav na více místech
- Duplikace kódu
Kdo vyvíjí React?
- Meta (Facebook): Hlavní vývojář
- React je Open Source: Přispívají do něj lide z celého světa
- Velké společnosti: Netflix, Airbnb, Instagram, WhatsApp, …
💬 Otázky k diskuzi
Jdi na Discord - #react-podzim-2025 a napiš tam odpovědi na tyto otázky.
- Máš zkušenosti s JavaScript?
- Zkoušel jsi už nějaký framework?
- Co tě na React nejvíce zajímá?
- Jaké máš očekávání od kurzu?
- Máš nějaké cíle po dosažení tohoto kurzu?
📝 Shrnutí
💡 React je tedy JavaScript knihovna s těmito vlastnostmi:
- ✅ Komponentní:
- UI je rozdělená na menší znovupoužitelné části.
- ✅ 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.