React (webový framework)

React
Logo
Základné informácie
Autor	Jordan Walke
Vývojár	Meta and community
Vyvinutý v	JavaScript
Typ softvéru	Webový framework
Licencia	MIT
Dátum prvého vydania	29.05.2013
Pozri aj Informačný portál

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.

<div id="myReactApp"></div>

<script type="text/babel">
  function Greeter(props) {
    return <h1>{props.greeting}</h1>
  }
  var App = <Greeter greeting="Hello World!" />;
  ReactDOM.render(App, document.getElementById('myReactApp'));
</script>

Funkcia Greeter je React komponentom, ktorý prijíma vlastnosť greeting. Premenná App je inštanciou Greeter kde je greeting nastavená na 'Hello World!'. Metóda ReactDOM.render potom vykresli náš Greeter komponent v DOM elemente s id myReactApp. Výsledok bude zobrazený vo webovom prehliadači:

<div id="myReactApp">
  <h1>Hello World!</h1>
</div>

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(<Greeter greeting="Hello World!" />, 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) => <div>Hello, {props.name}!</div>;

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 use (z angl. „use”, v preklade „použi“). Napr.:

• useState()
• useEffect()

Komponenty založené na triede

Komponenty založené na triedach sú deklarované pomocou ES6 tried. Komponenta definovaná triedou musí implementovať aspoň funkciu render(), 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 (
      <ChildComponent color={this.state.color} />
    );
  }
}

Rozšírením základadnej triedy React.Component zdedí komponenta napríklad vlastnosť state ukladajúcu stav komponenty, metódu setState, 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.

• shouldComponentUpdate umožňuje vývojárovi zabrániť zbytočnému opätovnému vykresleniu komponentu vrátením hodnoty false, ak sa vykreslenie nevyžaduje.
• componentDidMount sa volá, keď sa komponent „pripojí“ (komponent bol vytvorený v užívateľskom rozhraní, často jeho prepojením s uzlom DOM). To sa bežne používa na spustenie asynchrónneho načítania údajov zo vzdialeného zdroja pomocou volania API.
• componentWillUnmount sa volá bezprostredne pred rozbitím alebo „odpojením“ komponentu. Toto sa bežne používa na vyčistenie závislostí, ktoré sa neodstránia jednoducho odpojením komponentu (napr. odstránením všetkých setInterval(), ktoré súvisia s komponentom).
• render je najdôležitejšia metóda životného cyklu a jediná požadovaná v ktorejkoľvek súčasti. Spravidla sa volá vždy, keď sa aktualizuje stav komponentu, čo by sa malo prejaviť v užívateľskom rozhraní.

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 (
      <div>
        <p>Header</p>
        <p>Content</p>
        <p>Footer</p>
      </div>
    );
  }
}

Vnorené prvky

Viacero prvkov na rovnakej úrovni musí byť zabalených do jedného React prvku, ako je napríklad do prvku <div> zobrazeným vyššie; do fragmentu vymedzený tágom <Fragment> alebo v jeho skrátenej podobe <>, alebo musia byť vrátený v poli.

Atribúty

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.

JavaScriptové výrazy

JavaScript výrazy (ale nie výroky) je možné používať vo vnútri JSX ohraničené zloženými zátvorkami {}:

<h1>{10+1}</h1>

Vyššie uvedený príklad vykreslí:

<h1>11</h1>

Podmienené vyhlásenia

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 { i === 1 ? 'true' : 'false' } vykreslí reťazec 'true' pretože i sa rovná 1.

class App extends React.Component {
  render() {
    const i = 1;
    return (
      <div>
        <h1>{ i === 1 ? 'true' : 'false' }</h1>
      </div>
    );
  }
}

Vyššie uvedené vykreslí:

<div>
  <h1>true</h1>
</div>

Funkcie a JSX je možné použiť v podmienkach:

class App extends React.Component {
  render() {
    const sections = [1, 2, 3];
    return (
      <div>
        {sections.length > 0 && sections.map(n => (
            /* 'key' (kľúč) sa používa na sledovanie prvkov zoznamu a ich zmien */
            /* Každý 'key' musí byť jedinečný */
            <div key={"section-" + n}>Section {n}</div>
        ))}
      </div>
    );
  }
}

Vyššie uvedené vykreslí:

<div>
  <div>Section 1</div>
  <div>Section 2</div>
  <div>Section 3</div>
</div>

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 <canvas>, 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 useState, useContext, useReducer a useEffect . Ďalšie sú zdokumentované v príručke „Hooks API“. useState, useReducer a useEffect, 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.

1. Háky by sa mali volať iba na najvyššej úrovni (nie vo vnútri slučiek alebo if príkazov).
2. Háky by sa mali volať iba z funkčných React komponentov, nie z bežných funkcií alebo komponentov založených na triedach

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 INCREMET_COUNTER. 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.

 

Vonkajšie odkazy

• Oficiálny web

Zdroj

Tento článok je čiastočný alebo úplný preklad článku React (JavaScript library) na anglickej Wikipédii.