Ako funguje React?

React je knižnica JavaScriptu na vytváranie používateľských rozhraní.

Hlavné princípy a mechanizmy React zahŕňajú:

1. Prístup založený na komponentoch: Používateľské rozhranie je rozdelené na nezávislé, znovu použiteľné komponenty. Každá komponenta má stav (state) a vlastnosti (props), ktoré určujú jej správanie a vzhľad.

2. Virtuálne DOM: React vytvára ľahkú reprezentáciu stromu DOM v pamäti (virtuálne DOM). Pri zmenách dát (stav alebo vlastnosti) React zostavuje nové virtuálne stromové DOM.

3. Algoritmus porovnávania stromov (Diffing): React porovnáva nové virtuálne stromové DOM s predchádzajúcim. Tento proces sa nazýva "diffing". Algoritmus rýchlo nájde rozdiely medzi stromami.

4. Reconciliation (Zladenie): Na základe nájdených rozdielov React vypočíta minimálny súbor operácií potrebných na aktualizáciu skutočného DOM.

5. Aktualizácia skutočného DOM: React aplikuje tieto minimálne zmeny na skutočný DOM, čím minimalizuje nákladné operácie manipulácie s DOM a zlepšuje výkon.

6. Jednosmerný tok dát: Dáta v React sa zvyčajne prenášajú zhora nadol, od rodičovských komponentov k deťom, cez vlastnosti (props). To uľahčuje sledovanie zmien a ladenie.

7. JSX: Rozšírenie syntaxe JavaScriptu, ktoré umožňuje opis štruktúry UI pomocou syntaxe podobnej HTML, priamo v JavaScript kóde. JSX sa kompiluje na bežné volania funkcií React (napr. React.createElement).

// Príklad jednoduchého React komponentu
function WelcomeMessage(props) {
  return <h1>Ahoj, {props.name}!</h1>;
}

// Použitie komponentu
const element = <WelcomeMessage name="Svet" />;