React (webový framework)

Následná ukázka je triviální příklad použití Reactu s HTML a JavaScriptem:

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

<script type="text/babel">
  class Greeter extends React.Component { 
    render() { 
      return <h1>{this.props.greeting}</h1>
    } 
  } 

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

Třída Greeter je reactí komponenta, která přijímá propertu greeting. Metoda ReactDOM.render vytváří instanci komponenty Greeter, nastavuje propertu greeting na hodnotu 'Hello World' a vkládá renderovanou koponentu jako potomka DOM prvku s id myReactApp.

Tato ukázka se ve webovém prohlížeči zobrazí jako následující:

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

V roce 2011 se vývojáři na Facebooku začali potýkat s problémy s údržbou kódu. Vzhledem k tomu, že aplikace Facebook Ads má stále větší počet funkcí, potřeboval tým více lidí, aby fungovala bezchybně. Rostoucí počet členů týmu a funkcí aplikací je jako společnost zpomalil. Postupem času se jejich aplikace stávala obtížně ovladatelnou, protože čelili spoustě kaskádových aktualizací.[5]

React byl nasazen na Facebook News Feed v roce 2011 a později na Instagram v roce 2012. V roce 2013 nastal čas, aby se React stal otevřeným zdrojem, a během JS ConfUS, který se konal od 29. do 31. května, představil Jordan Walke React světu.[6] Byl ovlivněn XHP, knihovnou komponent HTML pro PHP. React v0.13 byl vydán v březnu 2015. Tato verze Reactu měla uvítanou novou funkci, kterou byla podpora tříd ES6. Ve stejném měsíci vydání React v0.13 byl světu představen React Native.

K vytvoření React webové je potřeba Node.js a NPM. Samotné vytvoření se provede příkazem:

$ npm install create-react-app
$ create-react-app <project-name>

Alternativou může být příkaz npx create-react-app <project-name> který provede vytvoření celého projektu a konfiguraci s tím spojenou. Npx je nástroj pro běh balíčků, který je dodáván s npm 5.2+. [7]

Pro spuštění stačí uvnitř složky s projektem opět zadat příkaz npm start . Příkaz npm start spustí aplikaci v rámci lokálního serveru standardně na adrese http://localhost:3000/ a otevře je ve výchozím prohlížeči.

Při navrhování React aplikací začínáme tím, že si musíme aplikaci rozkouskovat do jednotlivých komponent. V Reactu je možné vytvořit komponentu pomocí třídy anebo pomocí funkcí. Jde o předpřipravené prvky jako je například text, tlačítko nebo textové pole, které univerzálně fungují na všech podporovaných platformách. Kromě těchto základních komponentů lze definovat vlastní komponenty, nebo importovat komponenty tvořené komunitou.

Nejjednodušší způsob, jak definovat komponentu, je napsat funkci JavaScriptu:

function Welcome(props){
    return <h1>Hello, {props.name}</h1>;
}

K definování komponenty lze také použít třídu ES6:

class Welcome extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>
    }
}

Komponenty mohou v sobě obsahovat další komponenty. Z menších komponent můžeme poskládat složitější komponenty. Například můžeme vytvořit komponentu App, ve která se další komponenta Welcome vykreslí několikrát:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

JSX neboli JavaScript XML je rozšíření syntaxe jazyka JavaScript. Podobný vzhled jako HTML, JSX poskytuje způsob, jak strukturovat vykreslování komponent pomocí syntaxe známé mnoha vývojářům. Komponenty React jsou obvykle psány pomocí JSX, i když nemusí být (komponenty mohou být také psány v čistém JavaScriptu).

Příklad kódu JSX:

class App extends React.Component {
  render() {
    return (
      <div>
        <p>Header</p>
        <p>Content</p>
        <p>Footer</p>
      </div>
    );
  }
}

Komponenty využívají states neboli stavy pro data měnící se v průběhu času. Konkrétně by tedy měly být stavy využity pouze v případě, kdy aplikace přijme vstup od uživatele, nebo se obsah mění na základě časovače. Při práci se stavy je běžnou praktikou vytvoření několika bezstavových komponentů, které pouze vykreslují data a mají nad sebou jeden komponent, který stavů využívá a posílá tyto stavy svým potomkům pomocí props. Tento stavový komponent zapouzdřuje veškerou interakční logiku, zatímco se ty bez stavové starají o renderování dat deklarativní cestou.[8]

Prvním krokem k použití stavů je incializace. Ta by měla být provedena v konstruktoru komponentu. Kvůli jednoduchosti je doporučeno používat jako hodnotu stavů booleanovské hodnoty.

class Container extends Component {
    constructor() {
        super();
        this.state = {viditelny: true};
    }
}

Stavy mají k dispozici několik funkcí a proměnných umožňujících jednoduchou manipulaci. Funkci this.setState({ klic: hodnota }) sloužící ke změně stavu, proměnnou this.state.klic sloužící k získání aktuálního stavu a proměnnou prevState.klic k získání předchozího stavu. Proměnná this.state.klic obsahuje aktuální hodnotu stavu a slouží pro předání stavu k dalším operacím, jako je například uložení tohoto stavu do props komponenty.

Zpracování událostí pomocí React elementů je velmi podobné zpracování událostí u prvků DOM. Existuje několik rozdílů v syntaxi: [9]

• React události jsou pojmenovány pomocí camelCase, spíše než malá písmena
• S JSX předáte funkci jako obslužnou rutinu události (event handler), nikoli jako řetězec.

Například HTML:

<button onclick="activateLasers()">
    Activate Lasers
</button>

je mírně odlišný v React:

<button onClick={activateLasers}>
    Activate Lasers
</button>

V React lze vytvořit odlišné komponenty, které zapouzdřují chování. Podmíněné vykreslování v React funguje stejně jako podmínky v JavaScriptu. Příkazy if – else nelze použít uvnitř JSX, ale místo toho lze použít podmíněné výrazy.

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

Ternární operátor je vhodný pro jednoduché podmínky. Pokud by se podmínky více větvily, je lepší zvolit if/else.

function App(props) {
  const podminka = props.hodnotaProps;
  if (podminka) {
    return (
       <div>
         <h1>pravda</h1>
       </div>
     );
  }
  return (
       <div>
         <h1>nepravda</h1>
       </div>
     );
}
ReactDOM.render(
  <App hodnotaProps={true} />,
  document.getElementById('root')
);

Tento příklad vykresluje pravda nebo nepravda v závislosti na hodnotě hodnotaProps props.

Cílem Hooks („háčků“) je zjednodušit tvorbu React aplikací. Umožňují použít state a lifecycle metody ve funkcionálních komponentách. Nahrazují HOC (higher order components) a téměř ve většině případech také render props. React komponenty nejsou nejvhodnější na sdílení kódu, protože jejich hlavním úkolem je vykreslovat UI (uživatelská rozhraní). React Hooks dovolují lepší sdílení kódu napříč aplikací.[10]

Díky useState můžeme používat stav i v rámci funkcionálních komponent. Hook useState očekává parametr, který se stane iniciální hodnotou stavu, která je nastavená pouze poprvé, když je komponenta vytvořena. Hook nám vrátí dvojici, kterou získáme pomocí destrukturalizace. První je aktuální hodnota stavu. Druhá je funkce, kterou můžeme zavolat a předat ji nějakou hodnotu, která se stane novým stavem.[11]

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Tento příklad vykresluje počítadlo. Když kliknete na tlačítko, zvýší se hodnota o jedničku. Jediným argumentem useState je počáteční stav. Ve výše uvedeném příkladu je to 0 protože se počítá od nuly.

V tomto článku byl použit překlad textu z článku React (web framework) na anglické Wikipedii.

• Oficiální web