JSX: rozšíření JavaScriptu a příklady použití

Co je JSX?

JSX (JavaScript XML) — rozšíření syntaxe pro JavaScript, poprvé představené v Reactu v roce 2013. Umožňuje vývojářům popsat strukturu uživatelského rozhraní deklarativním stylem, kombinujíc značení a logiku v jednom souboru.

Před příchodem JSX používali vývojáři textové šablony (Mustache, Handlebars) nebo ručně vytvářeli DOM elementy pomocí document.createElement. Oba přístupy měly nevýhody: textové šablony nebyly typově kontrolovány a ruční vytváření DOM bylo těžkopádné a náchylné k chybám.

React zvolil jinou cestu — vkládání značení přímo do kódu. Toto rozhodnutí vyvolalo diskusi v komunitě, ale časem se stalo standardem. Dnes je JSX používán nejen v Reactu, ale také v SolidJS, Preact, Qwik a dokonce i ve Vue pomocí pluginů.

Základní syntaxe JSX

JSX element vypadá jako HTML tag, ale je vložen přímo do JavaScriptu. Každý element je transpilován do volání React.createElement se třemi argumenty: typ elementu, objekt props a potomkové elementy. Jeden kořenový element — povinné pravidlo: JSX výraz musí vracet jeden rodičovský element nebo fragment.

import React from 'react';

// Základní JSX - jeden kořenový element
const element = (
  <div className="app">
    <h1>Hello, World!</h1>
    <p>Welcome to React</p>
  </div>
);

Fragmenty pro seskupování

Když není potřeba další DOM uzel, použijte React.Fragment nebo krátkou syntaxi <></>. Fragmenty nevytvářejí skutečný DOM element, pouze seskupují potomkové uzly. To je užitečné zejména v tabulkách a seznamech, kde by dodatečný obal narušil HTML strukturu.

function Columns() {
  return (
    <>
      <td>First</td>
      <td>Second</td>
    </>
  );
}

Výrazy a proměnné v JSX

Jakýkoli JavaScriptový výraz se vkládá do JSX pomocí složených závorek { }. Uvnitř lze použít proměnné, volání funkcí, ternární operátory a metody polí. Podmíněné vykreslování se provádí pomocí ternárního operátoru nebo logického AND.

function Greeting({ name, isLoggedIn }) {
  const items = ['Red', 'Green', 'Blue'];

  return (
    <div>
      {/* Expression with variable */}
      <h1>Hello, {name}</h1>

      {/* Conditional rendering */}
      {isLoggedIn ?
        <p>Welcome back!</p :
        <button>Login</button>
      }

      {/* Render array */}
      <ul>
        {items.map(item =>
          <li key={item}>{item}</li>
        )}
      </ul>
    </div>
  );
}

Klíčové omezení — uvnitř složených závorek lze použít pouze výrazy, ne příkazy. Nelze použít if/else, for, switch — pouze ternární operátor, logické operátory a metody polí. Volání funkcí, včetně šipkových funkcí, je povoleno.

Rozdíly mezi JSX a HTML

JSX je vizuálně podobné HTML, ale má zásadní rozdíly. Atributy se píší v camelCase — className místo class, onClick místo onclick, tabIndex místo tabindex. To je proto, že JSX je transpilován do JavaScriptu, kde pomlčka v názvu vlastnosti není povolena.

Další důležitý rozdíl — samouzavírací tagy. V HTML mohou některé tagy (br, hr, input) zůstat neuzavřené. V JSX musí mít všechny samouzavírací tagy uzavírací lomítko: <br />, <input />. Názvy SVG atributů se také převádějí do camelCase: strokeWidth, fillOpacity.

Jak je JSX transpilován do JavaScriptu

Prohlížeče nerozumí JSX přímo. Před spuštěním prochází JSX kód transpilérem — Babelem, TypeScriptem nebo esbuildem. Každý JSX element se přemění na volání createElement nebo jsx/runtime.

Transformace přes Babel

// Původní JSX
const element = <h1 className="title">Hello</h1>;

// Po transpilaci
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello'
);

Od Reactu 17 se objevila nová JSX transformace, která nevyžaduje import Reactu. Automatický import jsx-runtime umožňuje psát komponenty bez import React from 'react'. Babel a TypeScript podporují tuto transformaci pomocí nastavení {"runtime": "automatic"}.

JSX mimo React: Solid, Preact, Vue

Ačkoli je JSX spojován s Reactem, používají ho i jiné frameworky. SolidJS používá JSX s kompilací do skutečných DOM uzlů, bez Virtual DOM. Preact — lehká alternativa k Reactu s plnou podporou JSX. Vue podporuje JSX přes @vue/babel-plugin-jsx, i když jeho primární šablonou je template.

Klíčový rozdíl — sémantika výrazů. V Reactu se JSX výrazy spouštějí při každém vykreslení. V SolidJS je JSX kompilován jednou a aktualizace jsou sledovány pomocí signálů. To ovlivňuje výkon: SolidJS nevyžaduje Virtual DOM a reconciliaci, takže vykreslování JSX je rychlejší.

V TypeScriptu je JSX podporován na úrovni jazyka. Soubory s příponou .tsx automaticky zpracovávají syntaxi JSX. Typování props — jedna z hlavních výhod TypeScript + JSX: IDE napovídá očekávané atributy, typy callbacků a povinnost props.

Nejlepší postupy práce s JSX

Pište JSX kód, který se snadno čte a udržuje. Vytahujte složité výrazy do samostatných proměnných nebo funkcí — to zlepšuje čitelnost a umožňuje testovat logiku odděleně od značení. Používejte fragmenty místo zbytečných div obalů.

Pravidlo odsazení — dodržujte odsazení pro vnořené elementy. Každá úroveň vnoření — jedna úroveň odsazení. Uzavírací tag by měl být na úrovni otevíracího. Pro dlouhé atributy používejte zalomení řádku.

Vyhněte se inline šipkovým funkcím v props, pokud se vytvářejí při každém vykreslení. V takových případech zabalte callback do useCallback nebo umístěte funkci mimo komponent. Rozdělujte složité komponenty na menší — každá komponenta by měla být zodpovědná za jednu logickou jednotku rozhraní.