React

React změnil způsob, jakým vývojáři přemýšlejí o tvorbě webů. Namísto manipulace s celou stránkou jako v jQuery, React rozděluje uživatelské rozhraní na malé, samostatné a znovupoužitelné kousky zvané komponenty.

Každá část webu (tlačítko, formulář, navigační lišta) je v Reactu samostatná komponenta. Tyto komponenty lze do sebe vkládat, kombinovat je a používat opakovaně napříč celou aplikací.

Jedná se o největší technickou inovaci Reactu. Místo toho, aby React při každé změně překresloval celou skutečnou webovou stránku (což je pomalé), vytvoří si v paměti její lehkou kopii.

1. Dojde ke změně dat.
2. React vypočítá rozdíl mezi starým a novým virtuálním DOMem (tzv. **diffing**).
3. Pouze ty části, které se skutečně změnily, jsou následně aktualizovány v prohlížeči.

React používá speciální syntaxi, která umožňuje psát HTML kód přímo uvnitř JavaScriptu. Díky tomu je kód velmi přehledný a snadno se v něm pracuje s logikou.

Data v Reactu proudí vždy shora dolů (od rodičovských komponent k potomkům). To usnadňuje hledání chyb a dělá aplikaci předvídatelnější.

• Rychlost: Díky virtuálnímu DOMu jsou aplikace extrémně svižné i při velkém množství dat.
• Znovupoužitelnost: Jednou napsané komponenty (např. stylové tlačítko) můžete použít v deseti různých projektech.
• Ekosystém: Existuje obrovské množství doplňků, komunitní podpory a hotových řešení.
• React Native: Znalost Reactu vám umožní vyvíjet i nativní mobilní aplikace pro iOS a Android.

Od verze 16.8 používá React tzv. Hooks (háčky), které umožňují používat stav a další funkce bez psaní složitých tříd. Nejpoužívanější jsou:

• useState: Pro uchování dat, která se mění (např. text v políčku).
• useEffect: Pro provádění „vedlejších účinků“, jako je načítání dat z API po načtení stránky.

import React, { useState } from 'react';

function Pocitadlo() {
  const [pocet, setPocet] = useState(0);

  return (
    <div>
      <p>Klikli jste {pocet} krát</p>
      <button onClick={() => setPocet(pocet + 1)}>
        Klikni mě
      </button>
    </div>
  );
}

Zajímavost: React původně vyvolal vlnu kritiky, protože míchal HTML a JS (v JSX), což se tehdy považovalo za „špatnou praxi“. Čas ale ukázal, že tento přístup je pro vývoj uživatelských rozhraní mnohem efektivnější, a dnes ho napodobuje většina konkurence.

Zpět na Architekturu