01. React - Hello World

Co je REACT?

React je deklarativní, efektivní a flexibilní knihovna jazyka JavaScript pro vytváření uživatelských rozhraní. Umožňuje sestavit složité uživatelské rozhraní z malých a izolovaných částí kódu nazvaných "komponenty".

Zkuste si hned napsat následující kód.

GitHub

Všimněte si připojených JS souborů. V ukázce jsou soubory *.development.js, které jsou určeny pro vývoj. Pokud chceme ušetřit místo připojíme soubory *.production.min.js. Dále si všimněte napsaného programového kódu. Ten nevyužívá žádné další knihovny pro interpretaci JS kódu. Níže je uveden příklad, který využívá jinou formu zápisu pomoci BABEL. Hovoříme o JSX zápisu.

GitHub

Lze říci, že JSX zápis lze interpretovat jako React.createElement(). Tímto způsobem lze zapisovat JS kód bez nutnosti použití dalších knihoven.

Příklady zápisu:

<h1>Hello Word</h1>

zapíšeme jako

React.createElement('h1', null, 'Hello World')

Zápis s atributy

<div onClick={this.props.clickHandler} data={this.state.data}>
  Click Me!
</div>

se zapíše

React.createElement('div', {
                      'onClick': this.props.clickHandler, 
                      'data': this.state.data
                    }, 
                    'Click Me!')

Vnořené prvky

<div>
  <h1>Hello World</h1>
  <a>Click Me!</a>
</div>

se interpretují

React.createElement('div', null, 
  React.createElement('h1', null, 'Hello World')
  React.createElement('a', null, 'Click Me!')
)

Přestože jsou výše uvedeny příklady, ve kterých je JS kód zapisován přímo do HTML souboru, tak v reálných projektech se využívá toho, že se JS kód rozděluje do samostatného souboru, který se pak do stránky připojuje. Takže vše co je ve značkách < script > ... < /script > se může umístit například do souboru apps.js.

GitHub

Obsah souboru apps.js obsahuje veškerý kód, který byl mezi značkami < script > ... < /script >

GitHub

Všimněte si, že značky pomocí, kterých je připojený soubor apps.js obsahují atribut type=text/babel. Pokud by tento atribut nebyl přidán, tak při využití JSX by skript hlásil chybu.