Prečo boli vytvorené knižnice ako React a aké problémy riešia?

Knihovny ako React boli vytvorené na zjednodušenie vývoja interaktívnych používateľských rozhraní (UI). Riešia rad problémov, ktoré vznikajú pri tvorbe zložitých webových aplikácií:

1. Správa stavu (State Management):

   • Zložité webové aplikácie majú veľa dynamických dát. Správa ich zmien a synchronizácia medzi rôznymi časťami rozhrania je zložitá pri použití čistého JavaScriptu.
   • React ponúka deklaratívny prístup k správe stavu. Popisujete, ako by mal UI vyzerať v určitom stave, a React sa stará o aktualizáciu DOM.

2. Manipulácia s DOM (DOM Manipulation):

   • Priama manipulácia s DOM je pomalá a ťažko sledovateľná, najmä pri veľkom množstve zmien.
   • React používa virtuálny DOM. Vytvára ľahkú reprezentáciu DOM v pamäti. Pri zmene stavu React porovnáva virtuálny DOM s predchádzajúcim stavom, nachádza minimálne zmeny (diffing) a efektívne aktualizuje len tie časti reálneho DOM, ktoré sa zmenili (reconciliation). To výrazne zvyšuje výkon.

3. Opätovné použitie komponentov (Component Reusability):

   • Elementy UI (tlačidlá, navigačné panely, formuláre atď.) sa často opakujú v aplikácii. Bez komponentného prístupu je potrebné kód duplikovať.
   • React umožňuje rozdeľovať UI na malé, znovupoužiteľné a nezávislé komponenty. Každá komponenta inkapsuluje svoju logiku a štruktúru, čo robí kód modulárnejším, ľahšie udržiavateľným a zrozumiteľnejším.

4. Architektonická zložitosť (Architectural Complexity):

   • Ako aplikácia rastie, bez jasnej štruktúry sa kód stáva "špagetovým", čo sťažuje vývoj, testovanie a škálovanie.
   • React poskytuje komponentovo orientovanú architektúru, ktorá napomáha organizácii kódu a rozdeľovaniu zodpovedností.

5. Deklaratívne programovanie (Declarative Programming):

   • Tradičné imperatívne programovanie DOM vyžaduje jasne uviesť každý krok zmeny UI.
   • React umožňuje popísať želaný stav UI v danom momente. Hovoríte čo chcete vidieť, nie ako. To zjednodušuje písanie kódu a robí ho predvídateľnejším.

6. Vývoj veľkých a zložitých aplikácií:

   • React poskytuje nástroje na tvorbu škálovateľných aplikácií s veľkými tímami vývojárov. Komponentový prístup a jasná štruktúra robia spoluprácu efektívnejšou.

Príklad komponenty v React:

// Príklad jednoduchého funkčného komponentu v React
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // Použitie hooku stavu

  return (
    <div>
      <p>Počítadlo: {count}</p> {/* Zobrazenie stavu */}
      <button onClick={() => setCount(count + 1)}>
        Zvýšiť
      </button> {/* Handler udalosti, ktorý mení stav */}
    </div>
  );
}

// Export komponenty na použitie v iných častiach aplikácie
export default Counter;

Porovnanie priamej manipulácie s DOM a React:

Aspekt	Priama manipulácia s DOM	React
Správa UI	Imperatívne (krok za krokom)	Deklaratívne (popis stavu)
Výkon	Môže byť pomalé pri veľkých zmenách	Optimalizované cez Virtual DOM
Opätovné použitie	Nízke	Vysoké (cez komponenty)
Údržba	Nízka pri veľkých projektoch	Vysoká (vďaka štruktúre)
Správa stavu	Rukou, ťažké synchronizovať	Zabudované mechanizmy (state, hooks)