JSX: JavaScript-uitbreiding en gebruiksvoorbeelden

Wat is JSX?

JSX (JavaScript XML) — een syntaxuitbreiding voor JavaScript, voor het eerst geïntroduceerd in React in 2013. Het stelt ontwikkelaars in staat om de structuur van de gebruikersinterface op een declaratieve manier te beschrijven, waarbij opmaak en logica in één bestand worden gecombineerd.

Vóór de komst van JSX gebruikten ontwikkelaars tekstsjablonen (Mustache, Handlebars) of maakten ze handmatig DOM-elementen via document.createElement. Beide benaderingen hadden nadelen: tekstsjablonen werden niet op types gecontroleerd en handmatige DOM-creatie was omslachtig en foutgevoelig.

React koos een andere weg — het inbedden van opmaak direct in de code. Deze beslissing veroorzaakte discussie in de gemeenschap, maar werd na verloop van tijd een standaard. Tegenwoordig wordt JSX niet alleen in React gebruikt, maar ook in SolidJS, Preact, Qwik en zelfs in Vue via plug-ins.

Basis syntax van JSX

Een JSX-element ziet eruit als een HTML-tag, maar wordt direct in JavaScript ingebed. Elk element wordt getranspileerd naar een aanroep van React.createElement met drie argumenten: het type element, het props-object en de onderliggende elementen. Eén root-element — een verplichte regel: een JSX-expressie moet één parent-element of fragment retourneren.

import React from 'react';

// Basis JSX - enkel root-element
const element = (
  <div className="app">
    <h1>Hello, World!</h1>
    <p>Welcome to React</p>
  </div>
);

Fragmenten voor groepering

Wanneer geen extra DOM-knooppunt nodig is, gebruik dan React.Fragment of de korte syntax <></>. Fragmenten maken geen echt DOM-element, maar groeperen alleen onderliggende knooppunten. Dit is vooral handig in tabellen en lijsten, waar een extra wrapper de HTML-structuur zou verstoren.

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

Expressies en variabelen in JSX

Elke JavaScript-expressie wordt in JSX ingesloten via accoladen { }. Binnenin kunnen variabelen, functieaanroepen, ternaire operatoren en arraymethoden worden gebruikt. Conditioneel renderen wordt uitgevoerd via de ternaire operator of logische 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>
  );
}

De belangrijkste beperking — binnen accoladen kunnen alleen expressies worden gebruikt, geen instructies. if/else, for, switch kunnen niet worden gebruikt — alleen de ternaire operator, logische operatoren en arraymethoden. Functieaanroepen, inclusief pijlfuncties, zijn toegestaan.

Verschillen tussen JSX en HTML

JSX lijkt visueel op HTML, maar heeft fundamentele verschillen. Attributen worden in camelCase geschreven — className in plaats van class, onClick in plaats van onclick, tabIndex in plaats van tabindex. Dit komt doordat JSX wordt getranspileerd naar JavaScript, waar een koppelteken in de eigenschapsnaam niet is toegestaan.

Nog een belangrijk verschil — zelfsluitende tags. In HTML kunnen sommige tags (br, hr, input) ongesloten blijven. In JSX moeten alle zelfsluitende tags een sluitende schuine streep hebben: <br />, <input />. SVG-attribuutnamen worden ook geconverteerd naar camelCase: strokeWidth, fillOpacity.

Hoe JSX wordt getranspileerd naar JavaScript

Browsers begrijpen JSX niet direct. Vóór uitvoering gaat JSX-code door een transpiler — Babel, TypeScript of esbuild. Elk JSX-element wordt omgezet in een aanroep van createElement of jsx/runtime.

Transformatie via Babel

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

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

Sinds React 17 is er een nieuwe JSX-transformatie verschenen die geen import van React vereist. Automatische import van jsx-runtime maakt het mogelijk om componenten te schrijven zonder import React from 'react'. Babel en TypeScript ondersteunen deze transformatie via de instelling {"runtime": "automatic"}.

JSX buiten React: Solid, Preact, Vue

Hoewel JSX wordt geassocieerd met React, gebruiken andere frameworks het ook. SolidJS gebruikt JSX met compilatie naar echte DOM-knooppunten, zonder Virtual DOM. Preact — een lichtgewicht alternatief voor React met volledige ondersteuning voor JSX. Vue ondersteunt JSX via @vue/babel-plugin-jsx, hoewel de primaire sjabloon template is.

Het belangrijkste verschil — semantiek van expressies. In React worden JSX-expressies bij elke render uitgevoerd. In SolidJS wordt JSX eenmalig gecompileerd en worden updates gevolgd via signalen. Dit beïnvloedt de prestaties: SolidJS heeft geen Virtual DOM en reconciliatie nodig, dus JSX-rendering is sneller.

In TypeScript wordt JSX ondersteund op taalniveau. Bestanden met de extensie .tsx verwerken automatisch JSX-syntax. Typering van props — een van de belangrijkste voordelen van TypeScript + JSX: de IDE geeft verwachte attributen, callback-types en verplichte props aan.

Beste praktijken voor werken met JSX

Schrijf JSX-code die gemakkelijk te lezen en te onderhouden is. Haal complexe expressies naar aparte variabelen of functies — dit verbetert de leesbaarheid en maakt het mogelijk om logica apart van de opmaak te testen. Gebruik fragmenten in plaats van onnodige div-wrappers.

De inspringregel — houd inspringing aan voor geneste elementen. Elk nestniveau — één inspringniveau. De sluitende tag moet op het niveau van de openende tag staan. Gebruik regeleinden voor lange attributen.

Vermijd inline pijlfuncties in props, als ze bij elke render worden gemaakt. Wikkel in zulke gevallen de callback in useCallback of plaats de functie buiten de component. Deel complexe componenten op in kleinere — elke component moet verantwoordelijk zijn voor één logische eenheid van de interface.