JSX: extensia JavaScript și exemple de utilizare

Ce este JSX?

JSX (JavaScript XML) — o extensie de sintaxă pentru JavaScript, introdusă pentru prima dată în React în 2013. Permite dezvoltatorilor să descrie structura interfeței de utilizator într-un stil declarativ, combinând marcajul și logica într-un singur fișier.

Înainte de apariția JSX, dezvoltatorii foloseau șabloane text (Mustache, Handlebars) sau creau manual elemente DOM prin document.createElement. Ambele abordări aveau dezavantaje: șabloanele text nu erau verificate tipologic, iar crearea manuală a DOM era greoaie și predispusă la erori.

React a ales o altă cale — încorporarea marcajului direct în cod. Această decizie a stârnit controverse în comunitate, dar în timp a devenit un standard. Astăzi, JSX este folosit nu numai în React, ci și în SolidJS, Preact, Qwik și chiar în Vue prin pluginuri.

Sintaxa de bază JSX

Un element JSX arată ca o etichetă HTML, dar este încorporat direct în JavaScript. Fiecare element este transpilat într-un apel React.createElement cu trei argumente: tipul elementului, obiectul de props și elementele copil. Un element rădăcină — o regulă obligatorie: expresia JSX trebuie să returneze un element părinte sau un fragment.

import React from 'react';

// JSX de bază - un singur element rădăcină
const element = (
  <div className="app">
    <h1>Hello, World!</h1>
    <p>Welcome to React</p>
  </div>
);

Fragment pentru grupare

Când nu este nevoie de un nod DOM suplimentar, utilizați React.Fragment sau sintaxa scurtă <></>. Fragmentele nu creează un element DOM real, ci doar grupează nodurile copil. Acest lucru este util în special în tabele și liste, unde un înveliș suplimentar ar perturba structura HTML.

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

Expresii și variabile în JSX

Orice expresie JavaScript se încorporează în JSX prin acolade { }. În interior se pot folosi variabile, apeluri de funcții, operatori ternari și metode de array. Randarea condiționată se realizează prin operatorul ternar sau AND logic.

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

Limitarea cheie — în interiorul acoladelor se pot folosi doar expresii, nu instrucțiuni. Nu se pot folosi if/else, for, switch — doar operatorul ternar, operatorii logici și metodele de array. Apelurile de funcții, inclusiv funcțiile săgeată, sunt permise.

Diferențele dintre JSX și HTML

JSX este vizual similar cu HTML, dar are diferențe fundamentale. Atributele se scriu în camelCase — className în loc de class, onClick în loc de onclick, tabIndex în loc de tabindex. Acest lucru se datorează faptului că JSX este transpilat în JavaScript, unde cratima în numele proprietății nu este permisă.

O altă diferență importantă — etichete auto-închise. În HTML, unele etichete (br, hr, input) pot rămâne neînchise. În JSX, toate etichetele auto-închise trebuie să aibă o bară oblică de închidere: <br />, <input />. Numele atributelor SVG sunt de asemenea convertite în camelCase: strokeWidth, fillOpacity.

Cum este transpilat JSX în JavaScript

Browserele nu înțeleg JSX direct. Înainte de execuție, codul JSX trece printr-un transpiler — Babel, TypeScript sau esbuild. Fiecare element JSX se transformă într-un apel createElement sau jsx/runtime.

Transformarea prin Babel

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

// După transpilare
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello'
);

Începând cu React 17, a apărut o nouă transformare JSX care nu necesită importarea React. Importul automat jsx-runtime permite scrierea de componente fără import React from 'react'. Babel și TypeScript suportă această transformare prin setarea {"runtime": "automatic"}.

JSX în afara React: Solid, Preact, Vue

Deși JSX este asociat cu React, și alte framework-uri îl folosesc. SolidJS folosește JSX cu compilare în noduri DOM reale, fără Virtual DOM. Preact — o alternativă ușoară la React cu suport complet pentru JSX. Vue suportă JSX prin @vue/babel-plugin-jsx, deși șablonul său principal este template.

Diferența cheie — semantica expresiilor. În React, expresiile JSX sunt executate la fiecare randare. În SolidJS, JSX este compilat o singură dată, iar actualizările sunt urmărite prin semnale. Aceasta afectează performanța: SolidJS nu necesită Virtual DOM și reconciliere, deci randarea JSX este mai rapidă.

În TypeScript, JSX este suportat la nivel de limbaj. Fișierele cu extensia .tsx procesează automat sintaxa JSX. Tipizarea props — unul dintre avantajele principale ale TypeScript + JSX: IDE sugerează atributele așteptate, tipurile de callback și obligativitatea props.

Cele mai bune practici de lucru cu JSX

Scrieți cod JSX ușor de citit și întreținut. Extrageți expresiile complexe în variabile sau funcții separate — aceasta îmbunătățește lizibilitatea și permite testarea logicii separat de marcaj. Folosiți fragmente în loc de învelișuri div inutile.

Regula indentării — respectați indentarea pentru elementele imbricate. Fiecare nivel de imbricare — un nivel de indentare. Eticheta de închidere trebuie să fie la nivelul celei de deschidere. Pentru atribute lungi, folosiți întreruperea de linie.

Evitați funcțiile săgeată inline în props, dacă sunt create la fiecare randare. În astfel de cazuri, înfășurați callback-ul în useCallback sau scoateți funcția în afara componentului. Împărțiți componentele complexe în altele mai mici — fiecare componentă ar trebui să fie responsabilă pentru o unitate logică a interfeței.