React (webový framework)

React (tiež známy ako React.js alebo ReactJS) je open-source frontendová knižnica JavaScriptu na vytváranie používateľských rozhraní alebo komponentov používateľského rozhrania. Udržuje ho Meta (predtým Facebook) a komunita jednotlivých vývojárov a spoločností. React je možné použiť, ako základňu pri vývoji jednostránkových alebo mobilných aplikácií. React sa však zaoberá iba správou stavu a vykreslením tohto stavu do modelu DOM, takže vytváranie aplikácií React zvyčajne vyžaduje použitie ďalších knižníc na smerovanie a tiež aj pre určité funkcie na strane klienta. 
Základné použitie.
Nasleduje základný príklad použitia React v HTML s JSX a JavaScript.
&lt;div id="myReactApp"&gt;&lt;/div&gt;
&lt;script type="text/babel"&gt;
 function Greeter(props) {
 return &lt;h1&gt;{props.greeting}&lt;/h1&gt;
 var App = &lt;Greeter greeting="Hello World!" /&gt;;
 ReactDOM.render(App, document.getElementById('myReactApp'));
&lt;/script&gt;
Funkcia codice_1 je React komponentom, ktorý prijíma vlastnosť codice_2. Premenná codice_3 je inštanciou codice_1 kde je codice_2 nastavená na codice_6. Metóda codice_7 potom vykresli náš codice_1 komponent v DOM elemente s id codice_9.
Výsledok bude zobrazený vo webovom prehliadači:
&lt;div id="myReactApp"&gt;
 &lt;h1&gt;Hello World!&lt;/h1&gt;
&lt;/div&gt;
Dôležité vlastnosti.
Komponenty.
React kód je vytvorený z entít nazývaných komponenty. Komponenty je možné vykresliť do konkrétneho prvku v DOM pomocou knižnice React DOM. Pri vykresľovaní komponentu je možné odovzdať hodnoty známe ako „props“ (z angl. "properties", v preklade "vlastnosti"): 
ReactDOM.render(&lt;Greeter greeting="Hello World!" /&gt;, document.getElementById('myReactApp'));
Dva primárne spôsoby deklarovania komponentov v Reacte sú prostredníctvom komponentov založených na funkciách, alebo triedach.
Funkcionálne komponenty.
Funkcionálne komponenty sú deklarované funkciou, ktorá vracia hodnotu predstavujúcu tzv. React element, tu zapísanou pomocou syntaxe JSX.
const Greeting = (props) =&gt; &lt;div&gt;Hello, {props.name}!&lt;/div&gt;;
Na rozdiel od komponent založených na triedach, vo funkcionálnych komponentách môže vývojár používať tzv. „hooks“ – funckie, ktoré umožňujú komponente prístup k stavu aplikácie, resp. k definovaniu vedľajších efektov. Tieto funkcie majú zaužívané názvy začínajúce slovom codice_10 (z angl. „use”, v preklade „použi“). Napr.: 
Komponenty založené na triede.
Komponenty založené na triedach sú deklarované pomocou ES6 tried. Komponenta definovaná triedou musí implementovať aspoň funkciu codice_13, ktorá vráti React element, podobne ako návratová hodnota funkcionálnych komponent zmieňovaná vyššie.
class ParentComponent extends React.Component {
 state = { color: 'green' };
 render() {
 return (
 &lt;ChildComponent color={this.state.color} /&gt;
Rozšírením základadnej triedy codice_14 zdedí komponenta napríklad vlastnosť codice_15 ukladajúcu stav komponenty, metódu codice_16, umožňujúcu reaktívnu zmenu tohto stavu a metódy životného cyklu komponenty.
Virtuálny DOM.
React vytvára v pamäti cache dátovej štruktúry, počíta výsledné rozdiely, a potom efektívne aktualizuje DOM prehliadača. Tento proces sa nazýva zosúladenie (angl. "reconcilation"). To umožňuje programátorovi písať kód, akoby sa pri každej zmene vykreslila celá stránka, zatiaľ čo knižnice React vykresľujú iba tie pod-komponenty, ktoré sa skutočne zmenili. Toto selektívne vykresľovanie poskytuje výrazné zvýšenie výkonu. Šetrí námahu pri prepočítavaní CSS štýlov, rozloženia stránky a vykresľovanie celej stránky. 
Metódy životného cyklu.
Metódy životného cyklu používajú formu zaháknutia (angl. "hooking"), ktorá umožňuje vykonávanie kódu v stanovených bodoch počas života komponentu.
JSX.
JSX alebo JavaScript XML je rozšírenie syntaxe jazyka JavaScript. Podobným vzhľadom ako HTML JSX poskytuje spôsob štruktúrovania komponentov pomocou syntaxe známej mnohým vývojárom. Komponenty React sa zvyčajne píšu pomocou JSX, aj keď to tak nemusí byť (komponenty môžu byť tiež napísané v čistom JavaScripte). JSX je podobný inému rozšíreniu syntaxi vytvorený Facebookom pre PHP s názvom XHP.
Príklad kódu JSX:
class App extends React.Component {
 render() {
 return (
 &lt;div&gt;
 &lt;p&gt;Header&lt;/p&gt;
 &lt;p&gt;Content&lt;/p&gt;
 &lt;p&gt;Footer&lt;/p&gt;
 &lt;/div&gt;
Viacero prvkov na rovnakej úrovni musí byť zabalených do jedného React prvku, ako je napríklad do prvku codice_22 zobrazeným vyššie; do fragmentu vymedzený tágom codice_23 alebo v jeho skrátenej podobe codice_24, alebo musia byť vrátený v poli. 
JSX poskytuje celý rad atribútov určených na zrkadlenie tých, ktoré poskytuje HTML. Komponentu možno tiež odovzdať vlastné atribúty. Všetky atribúty dostane komponent ako vlastnosti.
JavaScript výrazy (ale nie výroky) je možné používať vo vnútri JSX ohraničené zloženými zátvorkami codice_25:
&lt;h1&gt;{10+1}&lt;/h1&gt;
Vyššie uvedený príklad vykreslí:
&lt;h1&gt;11&lt;/h1&gt;
Príkazy „if-else“ nemožno vo vnútri JSX použiť, ale namiesto nich je možné použiť podmienené výrazy. Nasledujúci príklad codice_26 vykreslí reťazec codice_27 pretože codice_28 sa rovná 1.
class App extends React.Component {
 render() {
 const i = 1;
 return (
 &lt;div&gt;
 &lt;h1&gt;{ i === 1 ? 'true' : 'false' }&lt;/h1&gt;
 &lt;/div&gt;
Vyššie uvedené vykreslí:
&lt;div&gt;
 &lt;h1&gt;true&lt;/h1&gt;
&lt;/div&gt;
Funkcie a JSX je možné použiť v podmienkach:
class App extends React.Component {
 render() {
 const sections = [1, 2, 3];
 return (
 &lt;div&gt;
 {sections.length &gt; 0 &amp;&amp; sections.map(n =&gt; (
 /* 'key' (kľúč) sa používa na sledovanie prvkov zoznamu a ich zmien */
 /* Každý 'key' musí byť jedinečný */
 &lt;div key={"section-" + n}&gt;Section {n}&lt;/div&gt;
 &lt;/div&gt;
Vyššie uvedené vykreslí:
&lt;div&gt;
 &lt;div&gt;Section 1&lt;/div&gt;
 &lt;div&gt;Section 2&lt;/div&gt;
 &lt;div&gt;Section 3&lt;/div&gt;
&lt;/div&gt;
Kód napísaný v JSX vyžaduje konverziu pomocou nástroja, ako je Babel, aby ho webové prehliadače pochopili. Toto spracovanie sa zvyčajne vykonáva počas procesu zostavovania softvéru pred nasadením aplikácie.
Architektúra nad rámec HTML.
Základná architektúra Reactu sa uplatňuje aj mimo vykresľovania HTML v prehliadači. Napríklad Facebook má dynamické grafy, ktoré sa vykresľujú do codice_29, a Netflix a PayPal používajú univerzálne načítavanie na vykreslenie identického HTML na serveri aj na klientovi. 
React háky.
Háky sú funkcie, ktoré vývojárom umožňujú „zaháknuť sa“ do stavu a životného cyklu vo funkčnom komponente. Háky v komponentoch založených na triedach nefungujú – ich zámerom je, naopak, zbaviť sa tried. 
React poskytuje niekoľko zabudovaných hákov ako codice_30, codice_31, codice_32 a codice_33 . Ďalšie sú zdokumentované v príručke „Hooks API“. codice_30, codice_32 a codice_33, ktoré sú najpoužívanejšie, slúžia na kontrolu stavu a vedľajších účinkov.
Pravidlá hákov.
Existujú pravidlá hákov , ktoré popisujú charakteristický kódový vzor. Je to moderný spôsob narábania so stavom v Reacte.
Aj keď tieto pravidlá nemožno za behu vynútiť, je možné nakonfigurovať nástroje na analýzu kódu, ako napríklad „lintery", ktoré počas vývoja odhalia veľa chýb. Pravidlá platia tak pre použitie hákov, ako aj pre implementáciu vlastných hákov , ktoré môžu volať iné háky.
Bežné idiómy.
React sa nepokúša poskytnúť úplnú „knižnicu“. Je navrhnutý špeciálne pre vytváranie používateľských rozhraní, a preto nezahŕňa veľa nástrojov, ktoré niektorí vývojári považujú za potrebné na zostavenie aplikácie. To umožňuje výber ľubovoľných knižníc, ktoré vývojár uprednostňuje pri vykonávaní úloh, ako je vykonávanie sieťového prístupu alebo lokálne ukladanie údajov. Postupným dozrievaním knižnice sa objavili bežné vzorce používania.
Jednosmerný tok údajov.
Na podporu konceptu jednosmerného toku dát React (ktorý môže byť v kontraste s obojsmerným tokom AngularJS) bola vyvinutá architektúra Flux, ako alternatíva k populárnej architektúre model-view-controller. Flux obsahuje "akcie," ktoré sa odosielajú centrálnym "dispečerom" do "skladu" a zmeny v sklade sa propagujú späť do zobrazenia. Pri použití s Reactom sa toto šírenie dosahuje prostredníctvom vlastností komponentov. Od svojej koncepcie Flux bol nahradený knižnicami, ako Redux a MobX. 
"Flux" možno považovať za variant pozorovateľského vzoru. 
Komponent React v rámci architektúry "Flux" by nemal priamo upravovať žiadne vlastnosti, ktoré mu boli odovzdané, ale mali by mu byť odovzdané funkcie spätného volania ("callbacky"), ktoré vytvárajú "akcie" odoslané dispečerom na úpravu skladu. Akcia je objekt, ktorého zodpovednosťou je opísať, čo sa stalo: napríklad akcia navýšenia hodnoty počítadla, ktorá obsahuje novú hodnotu počítadla a typ codice_37. Sklady, ktoré sa dajú považovať za modely, sa môžu meniť len reakciami na akcie prijaté od dispečera.
Budúci vývoj.
Stav projektu je možné sledovať prostredníctvom blogu vývojárov. React poskytuje návod, ako prispieť zmenami. Menšie zmeny sa aplikujú priamo "pull requestmi" na hlavný repozitár, kým zmeny so silnejším dopadom prechádzajú prv cez "RFC (request for comments)" proces. Toto umožňuje komunite React poskytovať spätnú väzbu o nových potenciálnych funkciách, experimentálnych API a vylepšeniach syntaxe JavaScriptu.
História.
React vytvoril Jordan Walke, softvérový inžinier z Facebooku, ktorý vydal prvý prototyp Reactu s názvom „FaxJS“. Ovplyvnil ho XHP, knižnica komponentov HTML pre PHP. Prvýkrát bol nasadený na spravodajský kanál Facebooku v roku 2011 a neskôr na Instagrame v roku 2012. Zdrojový kód bol otvorený na JSConf US v máji 2013. 
React Native, ktorý umožňuje natívny vývoj pre systémy Android, iOS a UWP (Universal Windows Platform) pomocou aplikácie React, bola oznámený na Facebookovej konferencií React Conf vo februári 2015 a zdrojový kód bol otvorený v marci 2015.
18. apríla 2017 Facebook oznámil React Fiber, nový hlavný algoritmus knižnice React na vytváranie používateľských rozhraní. React Fiber sa mal stať základom všetkých budúcich vylepšení a vývoja funkcií knižnice React. 
26. septembra 2017 bol pre verejnosť uvedený React 16.0. 
16. februára 2019 bol pre verejnosť uvedený React 16.8. Vo vydaní boli predstavené React háky. 
10. augusta 2020 tím React oznámil prvého kandidáta na vydanie pre React v17.0, ktorý je pozoruhodný, ako prvé väčšie vydanie bez väčších zmien v rozhraní API pre vývojárov React.