02. React - Představení JSX

Co se dá říci k následujícímu zápisu:

const element = <h1>Hello, world!</h1>;

Tato syntaxe není ani řetězcem ani HTML tagem.

Jedná se o JSX. Je to rozšířená syntaxe jazyka JavaScript. Je doporučována pro práci s React pro popis uživatelského rozhraní. JSX může připomínat šablonovací jazyk, ale disponuje plnou silou JavaScriptu.

JSX produkuje React "elementy".

Proč JSX?

React zahrnuje skutečnost, že logika vykreslování je neodmyslitelně spojena s jinou logikou uživatelského rozhraní: jak jsou události zpracovávány, jak se stav mění v průběhu času a jak jsou data připravena k zobrazení.

Místo toho, aby docházelo k oddělení  technologie od značek do samostatných souborů, React rozděluje do souborů tzv. komponenty, které obsahují obojí.

React sice nevyžaduje použití JSX, ale většina programátorů to považuje za užitečné, jako vizuální pomůcka při práci s UI uvnitř kódu JavaScriptu. React rovněž umožňuje zobrazovat další užitečné chybové a varovné zprávy.

S tímhle mimochodem, pojďme začít!

Používání výrazů v JSX

V níže uvedeném příkladu, je nadeklarována proměnná pod názvem name, na kterou se v JSX odkazujme pomocí složených závorek.

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

Do složených závorek v JSX můžeme vložit libovolnou proměnnou. Například 2 + 2, user.firstName nebo formatName(user).

V příkladu níže je volána JS funkce formatName(user), která vypíše výsledek do tagu H1.

GitHub

JSX je spíše výrazem

Po kompilaci se výrazy JSX stávají běžnými funkcemi JavaScriptu a vyhodnocují na objekty jazky JS. To znamená, že JSX můžeme použít uvniř příkazů if nebo for, přiřadit je k proměnným, přijmout jako argumenty a vrátit je z funkcí:

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

Specifikace atributů v JSX

Pro běžné řetězce a atributy, můžeme použít uvozovky:

const element = <div tabIndex="0"></div>;

Pro vložení výrazu JavaScriptu v atributu, použijeme složené závorky:

const element = <img src={user.avatarUrl}></img>;

Při vkládání výrazu jazyka JavaScript do atributu, neumisťujte uvozovky kolem složených závorek. Měli byste buď použít uvozovky (pro řetězcové hodnoty) nebo složené závorky (pro výrazy), ale ne oba ve stejném atributu.

Varování:
Vzhledem k tomu, že JSX je blíže k JavaScriptu než ke kódu HTML, React DOM používá camelCase namísto názvů atributů HTML v konvenci pojmenování vlastností. Napříkladv JSX class se stává className a tabindex se stává tabIndex.

Potomci v JSX

Pokud je značka prázdná, můžete ji okamžitě zavřít />, stejně jako v XML:

const element = <img src={user.avatarUrl} />;

Značky JSX mohou obsahovat potomky:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

Prevence injenktážních útoků v JSX

Pro bezpečné vložení uživatelských vstupů v JSX:

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

Ve výchozím nastavení React DOM escapuje před přidáním všechny hodnoty vložených do JSX. Tím zajistíte, že se nikdy nic nemůžete injektovat, co není výslovně napsáno ve vaší aplikaci. Všechno je před vykreslením převedeno na řetězec. Pomáhá to předcházet útokům XSS (skriptování mezi jednotlivými servery).

JSX představuje objekty

Babel kompiluje JSX na volání React.createElement()

Tyto dva příklady jsou totožné:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement() provádí několik kontrol, které pomohou psát chybový kód, ale v podstatě vytváří objekt, jako je tento:

// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

Tyto objekty se nazývají "prvky React". Můžete si je představit jako popis toho, co chcete vidět na obrazovce. React čte tyto objekty a používá je k sestavení DOM a udržuje ji aktuální.