====== Framework React a moderní frontend ======

**React** je deklarativní a efektivní knihovna pro tvorbu uživatelských rozhraní. Ačkoliv je často nazýván frameworkem, technicky jde o knihovnu zaměřenou na zobrazení (View). Jeho hlavní silou je rychlost a schopnost spravovat složité aplikace pomocí komponent.

===== 1. Klíčové koncepty Reactu =====

==== Komponenty (Components) ====
Aplikace v Reactu je složena z malých, nezávislých částí. Každé tlačítko, menu nebo formulář může být samostatnou komponentou, kterou lze použít na více místech.


==== Virtual DOM ====
React si udržuje lehkou kopii skutečného dokumentu (DOM) v paměti. Když se data změní, React porovná virtuální verzi s tou skutečnou a aktualizuje **pouze ty části**, které se skutečně změnily. To dělá React extrémně rychlým.


==== JSX (JavaScript XML) ====
React používá speciální syntaxi, která umožňuje psát HTML kód přímo uvnitř JavaScriptu.
<code>
const Pozdrav = () => {
  return <h1>Ahoj z Reactu!</h1>;
};
</code>

---

===== 2. State a Props (Stav a Vlastnosti) =====

Aby byly komponenty dynamické, používá React dva druhy dat:

  * **Props (Properties):** Data, která komponenta přijímá "shora" od svého rodiče (podobně jako parametry funkce). Jsou neměnná.
  * **State (Stav):** Data, která si komponenta spravuje sama uvnitř. Když se změní stav, komponenta se automaticky překreslí.

---

===== 3. Hooky (Hooks) =====

Zavedeny v roce 2019, hooky umožňují používat stav a další funkce Reactu v jednoduchých funkcích (namísto složitých tříd).

  * **useState:** Pro ukládání dat v komponentě.
  * **useEffect:** Pro provádění "vedlejších účinků" (např. načítání dat z [[it:sw:rest_api|API]] po načtení stránky).

---

===== 4. Moderní Frontend Ekosystém =====

React sám o sobě řeší jen zobrazení. Pro kompletní webovou aplikaci se obvykle doplňuje o:

^ Nástroj ^ Účel ^
| **Next.js** | Framework postavený na Reactu pro lepší SEO a výkon (Server-Side Rendering). |
| **React Router** | Správa navigace mezi stránkami bez restartu prohlížeče. |
| **Tailwind CSS** | Moderní způsob stylování přímo v HTML/JSX. |
| **Redux / Context API** | Správa globálního stavu aplikace (např. přihlášený uživatel). |

---

===== 5. Proč se učit React? =====

  * **Obrovský trh práce:** Většina moderních firem hledá React vývojáře.
  * **Komunita:** Existují tisíce hotových komponent, které můžete jen stáhnout a použít.
  * **React Native:** S nabytými znalostmi můžete psát i nativní mobilní aplikace pro iOS a Android.

----
//Související články://
  * [[it:sw:javascript|Základy JavaScriptu]]
  * [[it:sw:typescript|TypeScript: Bezpečnější vývoj v Reactu]]
  * [[it:sw:rest_api|Komunikace s API přes REST]]

//Tagy: {{tag>programming react javascript frontend web-development components}}//