JSX: JavaScript kiterjesztés és használati példák

Mi az a JSX?

JSX (JavaScript XML) — egy szintaxis kiterjesztés a JavaScript-hez, amelyet először a React-ben mutattak be 2013-ban. Lehetővé teszi a fejlesztők számára, hogy deklaratív stílusban írják le a felhasználói felület szerkezetét, kombinálva a jelölést és a logikát egyetlen fájlban.

A JSX megjelenése előtt a fejlesztők szöveges sablonokat (Mustache, Handlebars) használtak, vagy manuálisan hoztak létre DOM elemeket a document.createElement segítségével. Mindkét megközelítésnek voltak hátrányai: a szöveges sablonokat nem ellenőrizték típusok szerint, a manuális DOM létrehozás pedig körülményes és hibákra hajlamos volt.

A React más utat választott — a jelölés közvetlen beágyazását a kódba. Ez a döntés vitát váltott ki a közösségben, de idővel szabvánnyá vált. Ma a JSX nem csak a React-ben használatos, hanem a SolidJS, Preact, Qwik és még a Vue keretrendszerekben is plugin-eken keresztül.

JSX alapszintaxis

A JSX elem úgy néz ki, mint egy HTML tag, de közvetlenül a JavaScript-be van ágyazva. Minden elem egy React.createElement hívássá transpilálódik három argumentummal: az elem típusa, a props objektum és a gyermek elemek. Egy gyökérelem — kötelező szabály: a JSX kifejezésnek egy szülő elemet vagy fragmentet kell visszaadnia.

import React from 'react';

// Alap JSX - egy gyökérelem
const element = (
  <div className="app">
    <h1>Hello, World!</h1>
    <p>Welcome to React</p>
  </div>
);

Fragmentek csoportosításhoz

Amikor nincs szükség további DOM csomópontra, használja a React.Fragment vagy a rövid szintaxist <></>. A fragmentek nem hoznak létre valódi DOM elemet, csak csoportosítják a gyermek csomópontokat. Ez különösen hasznos táblázatokban és listákban, ahol egy extra csomagoló elem megzavarná a HTML szerkezetet.

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

Kifejezések és változók a JSX-ben

Bármely JavaScript kifejezés beágyazható a JSX-be kapcsos zárójeleken keresztül { }. Belül használhatók változók, függvényhívások, ternáris operátorok és tömb metódusok. Feltételes renderelés a ternáris operátoron vagy logikai ÉS-en keresztül történik.

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>
  );
}

A kulcsfontosságú korlátozás — a kapcsos zárójeleken belül csak kifejezések használhatók, nem utasítások. Nem használható if/else, for, switch — csak ternáris operátor, logikai operátorok és tömb metódusok. Függvényhívások, beleértve a nyíl függvényeket, engedélyezettek.

Különbségek a JSX és a HTML között

A JSX vizuálisan hasonlít a HTML-re, de alapvető különbségek vannak. Attribútumok camelCase-ben íródnak — className a class helyett, onClick az onclick helyett, tabIndex a tabindex helyett. Ez azért van, mert a JSX JavaScript-be transpilálódik, ahol a kötőjel a tulajdonság nevében nem megengedett.

Másik fontos különbség — önzáró tag-ek. A HTML-ben néhány tag (br, hr, input) nyitva maradhat. A JSX-ben minden önzáró tagnak rendelkeznie kell záró perjellel: <br />, <input />. Az SVG attribútum nevek is camelCase-re konvertálódnak: strokeWidth, fillOpacity.

Hogyan transpilálódik a JSX JavaScript-be

A böngészők nem értik közvetlenül a JSX-et. Végrehajtás előtt a JSX kód áthalad a transpilálón — Babel, TypeScript vagy esbuild. Minden JSX elem egy createElement vagy jsx/runtime hívássá alakul.

Transzformáció Babellen keresztül

// Eredeti JSX
const element = <h1 className="title">Hello</h1>;

// Transpiláció után
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello'
);

A React 17-től kezdve megjelent egy új JSX transzformáció, amely nem igényli a React importálását. Automatikus import jsx-runtime lehetővé teszi komponensek írását import React from 'react' nélkül. A Babel és a TypeScript támogatja ezt a transzformációt a {"runtime": "automatic"} beállítással.

JSX a React-en kívül: Solid, Preact, Vue

Bár a JSX a React-hez kapcsolódik, más keretrendszerek is használják. SolidJS JSX-et használ valódi DOM csomópontokra fordításával, Virtual DOM nélkül. Preact — könnyűsúlyú alternatíva a React-hez teljes JSX támogatással. Vue támogatja a JSX-et a @vue/babel-plugin-jsx-en keresztül, bár az elsődleges sablonja a template.

A kulcsfontosságú különbség — kifejezések szemantikája. A React-ben a JSX kifejezések minden rendereléskor végrehajtódnak. A SolidJS-ben a JSX egyszer fordul le, és a frissítések jeleken keresztül követhetők. Ez hatással van a teljesítményre: a SolidJS nem igényel Virtual DOM-ot és reconciliációt, így a JSX renderelés gyorsabb.

A TypeScript-ben a JSX nyelvi szinten támogatott. A .tsx kiterjesztésű fájlok automatikusan feldolgozzák a JSX szintaxist. Props-ok típusosítása — a TypeScript + JSX egyik fő előnye: az IDE javasolja a várt attribútumokat, a callback típusokat és a props-ok kötelezőségét.

Legjobb gyakorlatok a JSX munkához

Írjon JSX kódot, amely könnyen olvasható és karbantartható. Emelje ki az összetett kifejezéseket külön változókba vagy függvényekbe — ez javítja az olvashatóságot és lehetővé teszi a logika elkülönített tesztelését a jelöléstől. Használjon fragmenteket a szükségtelen div csomagolók helyett.

A behúzás szabálya — tartsa be a behúzást a beágyazott elemeknél. Minden beágyazási szint — egy behúzási szint. A záró tagnak a nyitó tag szintjén kell lennie. Hosszú attribútumokhoz használjon sortörést.

Kerülje az inline nyíl függvényeket a props-okban, ha minden rendereléskor létrejönnek. Ilyen esetekben csomagolja a callback-et useCallback-be, vagy helyezze a függvényt a komponensen kívülre. Ossza fel az összetett komponenseket kisebbekre — minden komponens egy logikai egységért felelős a felületen.