React (webový framework)

z Wikipédie, slobodnej encyklopédie
Skočit na navigaci Skočit na vyhledávání
React
React-icon.svg
Logo
Základné informácie
AutorJordan Walke
VývojárFacebook and community
Vyvinutý vJavaScript
Typ softvéruWebový framework
LicenciaMIT
Dátum prvého vydania29.05.2013

Computer n screen.svg Pozri aj Informačný portál

React (tiež známy ako React.js alebo ReactJS) je open-source frontendová knižnica JavaScriptu [1] na vytváranie používateľských rozhraní alebo komponentov používateľského rozhrania. Udržuje ho Facebook a komunita jednotlivých vývojárov a spoločností. [2] [3] [4] 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[5].

Základné použitie[upraviť | upraviť zdroj]

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[upraviť | upraviť zdroj]

Komponenty[upraviť | upraviť zdroj]

Kód reakcie 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 „vlastnosti“: [6]

ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));

Dva primárne spôsoby deklarovania komponentov v Reacte sú prostredníctvom funkčných komponentov a komponentov založených na triedach.

Funkčné komponenty[upraviť | upraviť zdroj]

Funkčné komponenty sú deklarované funkciou, ktorá vracia JSX hodnotu.

const Greeting = (props) => <div>Hello, {props.name}!</div>;

Komponenty založené na triede[upraviť | upraviť zdroj]

Komponenty založené na triedach sú deklarované pomocou ES6 tried.

class ParentComponent extends React.Component {
  state = { color: 'green' };
  render() {
    return (
      <ChildComponent color={this.state.color} />
    );
  }
}

Virtuálny DOM[upraviť | upraviť zdroj]

Ďalšou pozoruhodnou vlastnosťou je použitie virtuálneho 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. [7] 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[upraviť | upraviť zdroj]

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[upraviť | upraviť zdroj]

JSX alebo JavaScript XML je rozšírenie syntaxe jazyka JavaScript. [8] 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. [9] [10]

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. [11] 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. [12] Toto spracovanie sa zvyčajne vykonáva počas procesu zostavovania softvéru pred nasadením aplikácie.

Architektúra nad rámec HTML[upraviť | upraviť zdroj]

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>, [13] a Netflix a PayPal používajú univerzálne načítavanie na vykreslenie identického HTML na serveri aj na klientovi. [14] [15]

React háky[upraviť | upraviť zdroj]

Háky sú funkcie, ktoré vývojárom umožňujú „zaháknuť sa“ do stavu a životného cyklu vo funkčnom komponente. [16] Háky v komponentoch založených na triedach nefungujú – ich zámerom je, naopak, zbaviť sa tried. [17]

React poskytuje niekoľko zabudovaných hákov ako useState, [18] useContext, useReducer a useEffect . [19] Ďalšie sú zdokumentované v príručke „Hooks API“. [20] useState, useReducer a useEffect, ktoré sú najpoužívanejšie, slúžia na kontrolu stavu a vedľajších účinkov.

Pravidlá hákov[upraviť | upraviť zdroj]

Existujú pravidlá hákov [21], 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 [22], ktoré môžu volať iné háky.

Bežné idiómy[upraviť | upraviť zdroj]

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[upraviť | upraviť zdroj]

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. [23] 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. [24]

Flux možno považovať za variant pozorovateľského vzoru. [25]

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. [26] Sklady, ktoré sa dajú považovať za modely, sa môžu meniť len reakciami na akcie prijaté od dispečera.

Budúci vývoj[upraviť | upraviť zdroj]

Stav projektu je možné sledovať prostredníctvom blogu vývojárov. [27] React poskytuje návod, ako prispieť zmenami. [28] 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. [29] 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[upraviť | upraviť zdroj]

React vytvoril Jordan Walke, softvérový inžinier z Facebooku, ktorý vydal prvý prototyp Reactu s názvom „FaxJS“. [30] 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. [31] 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. [32]

26. septembra 2017 bol pre verejnosť uvedený React 16.0. [33]

16. februára 2019 bol pre verejnosť uvedený React 16.8. [34] Vo vydaní boli predstavené React háky. [35]

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. [36]

Referencie[upraviť | upraviť zdroj]

 

  1. React - A JavaScript library for building user interfaces [online]. [Cit. 2021-05-18]. Dostupné online.
  2. KRILL, Paull. React: Making faster, smoother UIs for data-driven Web apps [online]. InfoWorld, 15.05.2014, [cit. 2021-05-18]. Dostupné online.
  3. HEMEL, Zef. Facebook's React JavaScript User Interfaces Library Receives Mixed Reviews [online]. InfoQ, 03.06.2013, [cit. 2021-05-18]. Dostupné online.
  4. DAWSON, Chris. JavaScript’s History and How it Led To ReactJS [online]. TheNewStack, 25.07.2014, [cit. 2021-05-18]. Dostupné online.
  5. How To Make create-react-app work with a Node Back-end API [online]. freeCodeCamp.org, 2017-12-21, [cit. 2021-05-18]. Dostupné online. (po anglicky)
  6. Components and Props [online]. Facebook, [cit. 2021-05-18]. Dostupné online.
  7. Refs and the DOM [online]. Facebook, [cit. 2021-05-18]. Dostupné online.
  8. JSX | XML-like syntax extension to ECMAScript [online]. facebook.github.io, [cit. 2021-05-18]. Dostupné online.
  9. React v16.0 – React Blog [online]. reactjs.org, [cit. 2021-05-18]. Dostupné online. (po anglicky)
  10. React.Component – React [online]. reactjs.org, [cit. 2021-05-18]. Dostupné online. (po anglicky)
  11. React v16.0 – React Blog [online]. reactjs.org, [cit. 2021-05-18]. Dostupné online. (po anglicky)
  12. FISCHER, Ludovico. React for Real: Front-End Code, Untangled. [s.l.] : Pragmatic Bookshelf, 2017-09-06. Google-Books-ID: Tg9QDwAAQBAJ. Dostupné online. ISBN 978-1-68050-448-4. (po anglicky)
  13. Why did we build React? – React Blog [online]. reactjs.org, [cit. 2021-05-18]. Dostupné online. (po anglicky)
  14. ENGINEERING, PayPal. Isomorphic React Apps with React-Engine [online]. Medium, 2018-07-09, [cit. 2021-05-18]. Dostupné online. (po anglicky)
  15. BLOG, Netflix Technology. Netflix Likes React [online]. Medium, 2017-04-19, [cit. 2021-05-18]. Dostupné online. (po anglicky)
  16. Hooks at a Glance – React [online]. reactjs.org, [cit. 2021-05-18]. Dostupné online. (po anglicky)
  17. What the Heck is React Hooks? [online]. 2020-01-16, [cit. 2021-05-18]. Dostupné online. (po anglicky)
  18. Using the State Hook – React [online]. reactjs.org, [cit. 2021-05-18]. Dostupné online. (po anglicky)
  19. Using the Effect Hook – React [online]. reactjs.org, [cit. 2021-05-18]. Dostupné online. (po anglicky)
  20. Hooks API Reference – React [online]. reactjs.org, [cit. 2021-05-18]. Dostupné online. (po anglicky)
  21. Rules of Hooks – React [online]. reactjs.org, [cit. 2021-05-18]. Dostupné online. (po anglicky)
  22. Building Your Own Hooks – React [online]. reactjs.org, [cit. 2021-05-18]. Dostupné online. (po anglicky)
  23. In-Depth Overview | Flux [online]. facebook.github.io, [cit. 2021-05-18]. Dostupné online. (po anglicky)
  24. Release 4.0.0 · facebook/flux [online]. GitHub, [cit. 2021-05-18]. Dostupné online. (po anglicky)
  25. Introduction to Flux - React Exercise [online]. nicholasjohnson.com, [cit. 2021-05-18]. Dostupné online.
  26. The History of React and Flux with Dan Abramov - Three Devs and a Maybe [online]. threedevsandamaybe.com, [cit. 2021-05-18]. Dostupné online.
  27. Introducing Zero-Bundle-Size React Server Components – React Blog [online]. reactjs.org, [cit. 2021-05-18]. Dostupné online. (po anglicky)
  28. How to Contribute – React [online]. reactjs.org, [cit. 2021-05-18]. Dostupné online. (po anglicky)
  29. How to Contribute – React [online]. reactjs.org, [cit. 2021-05-18]. Dostupné online. (po anglicky)
  30. jordwalke/FaxJs [online]. 2021-05-07, [cit. 2021-05-18]. Original-date: 2011-09-19T10:08:48Z. Dostupné online.
  31. Pete Hunt | TXJS 2015 [online]. [Cit. 2021-05-18]. Dostupné online.
  32. acdlite/react-fiber-architecture [online]. 2021-05-18, [cit. 2021-05-18]. Original-date: 2016-07-19T01:15:34Z. Dostupné online.
  33. React v16.0 – React Blog [online]. reactjs.org, [cit. 2021-05-18]. Dostupné online. (po anglicky)
  34. React v16.0 – React Blog [online]. reactjs.org, [cit. 2021-05-18]. Dostupné online. (po anglicky)
  35. Introducing Hooks – React [online]. reactjs.org, [cit. 2021-05-18]. Dostupné online. (po anglicky)
  36. React v17.0 Release Candidate: No New Features – React Blog [online]. reactjs.org, [cit. 2021-05-18]. Dostupné online. (po anglicky)

Vonkajšie odkazy[upraviť | upraviť zdroj]

Zdroj[upraviť | upraviť zdroj]

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