DOM, ShadowDOM, transpilace kódu, JSX, toolchain, funkcionální komponenty, javascript v prohlížeči

Co je React

React je open-source JavaScriptová knihovna pro tvorbu uživatelských rozhraní. Vytvořila ho firma Meta (tehdá Facebook), poprvé vydaná v roce 2013. Aktuální verze je React 19 (stabilní od prosince 2024).

Klíčové vlastnosti

Komponentový přístup: aplikace je strom znovupoužitelných komponent
Deklarativní: popisuješ jak má UI vypadat pro daný stav, ne jak ho měnit
Virtual DOM: optimalizace překreslování (do React 18, dnes částečně nahrazené)
Unidirectional data flow: data tečou od rodiče k potomkům přes props

Use cases

Typ aplikace	Vhodné?
SPA (Single Page Application)	Klasické use case
Webové aplikace s komplexním UI	Ideální
Statické weby (blog, portfolio)	Spíš použij Astro / Hugo
Mobilní aplikace	React Native (jiná knihovna, podobné API)
Desktop aplikace	Electron + React

JavaScript v prohlížeči

Tři pilíře webu (rekapitulace):

Technologie	Účel
HTML	Struktura a sémantika obsahu
CSS	Vizuální prezentace
JavaScript	Logika, interaktivita, komunikace se serverem

JS Engine

Každý prohlížeč má JavaScript engine, který parsuje a vykonává JS:

Prohlížeč	JS Engine
Chrome, Edge, Opera	V8 (Google)
Firefox	SpiderMonkey (Mozilla)
Safari	JavaScriptCore (Nitro) (Apple)

Event loop a asynchronnost

JavaScript je single-threaded (jedno vlákno), ale dokáže být asynchronní díky event loopu: dlouhé operace (síťové requesty, timery) se vykonávají mimo hlavní vlákno a callback se zařadí do fronty, až jsou hotové.

console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');

// Output: 1, 4, 3, 2
// Synchronní kód → microtasks (Promise) → macrotasks (setTimeout)

Co JS v prohlížeči umí