JSX: cos’è, come funziona e quando usarlo davvero

Pubblicato da

  

JSX è spesso associato automaticamente a React, ma questa associazione rischia di nasconderne la vera natura. In questo articolo vedremo cos’è JSX, come funziona sotto il cofano e perché non è legato a un singolo framework. 

Dopo averne chiarito le basi, analizzeremo vantaggi, limiti e alternative, per capire quando JSX è una scelta efficace e quando invece è meglio evitarlo.

🔗 Ti piace Techelopment? Dai un'occhiata al sito per tutti i dettagli!

Cos’è JSX?

JSX (JavaScript XML) è un’estensione della sintassi JavaScript che consente di scrivere codice con una struttura simile all’HTML direttamente all’interno di file JavaScript. È diventato popolare soprattutto grazie a React, ma il suo utilizzo e il suo significato vanno ben oltre questo framework.

Un esempio classico di JSX è il seguente:

const element = <h1>Ciao mondo</h1>;

A prima vista sembra HTML, ma in realtà non lo è: JSX viene trasformato in chiamate a funzioni JavaScript prima di essere eseguito.


Le basi di JSX

L’idea chiave di JSX è permettere allo sviluppatore di descrivere l’interfaccia utente usando una sintassi dichiarativa e leggibile, mantenendo però tutta la potenza di JavaScript.

Ad esempio:

const nome = "Peter";

const saluto = <h1>Ciao, {nome}!</h1>;

Qui JSX consente di:

  • mescolare markup e logica
  • inserire espressioni JavaScript tramite {}
  • rendere il codice più espressivo rispetto a chiamate annidate a funzioni

JSX non è React (indipendenza da React)

Un punto spesso frainteso è che JSX non è legato a React.

JSX è semplicemente zucchero sintattico per chiamate a funzioni JavaScript. Ad esempio, questo JSX:

<h1>Ciao</h1>

viene trasformato (in React) in qualcosa di simile a:

React.createElement("h1", null, "Ciao");

Ma nulla vieta di usare JSX con:

  • librerie diverse da React
  • funzioni personalizzate
  • framework alternativi come Preact, Solid, Inferno, o persino librerie create ad hoc

Finché esiste una funzione che sa “interpretare” quella struttura, JSX può essere usato.


JSX richiede una fase di compilazione

I browser non capiscono JSX nativamente.

Questo significa che il codice JSX deve essere convertito in JavaScript standard prima di essere eseguito. Questo processo è chiamato transpilazione.

Lo strumento più usato per farlo è Babel, che:

  • prende in input codice JSX
  • lo trasforma in JavaScript compatibile con i browser

Esempio di flusso:

JSX → Babel → JavaScript → Browser

Senza questa fase, il browser genererebbe un errore di sintassi.


Perché usare JSX? I vantaggi principali

JSX offre diversi vantaggi pratici:

1. Codice più leggibile

Scrivere interfacce con una sintassi simile all’HTML è spesso più intuitivo rispetto a lunghe chiamate a funzioni JavaScript.

2. Markup e logica insieme

JSX incoraggia a tenere struttura e comportamento nello stesso posto, evitando separazioni artificiali tra HTML e JS.

3. Espressività

Condizioni, cicli, funzioni e componenti possono essere integrati direttamente nel markup in modo naturale.

Esempio:

{isLoggedIn ? <Dashboard /> : <Login />}

Quando non usare JSX? Gli svantaggi principali

Nonostante i suoi vantaggi, JSX non è sempre la scelta migliore. Esistono scenari in cui il suo utilizzo può risultare superfluo o addirittura controproducente.

1. Necessità di tooling aggiuntivo

JSX richiede sempre una fase di compilazione. In progetti molto semplici o in contesti dove si vuole evitare una build pipeline (ad esempio script rapidi o prototipi minimi), questo può essere un overhead non giustificato.

2. Curva di apprendimento iniziale

Per chi è alle prime armi con JavaScript, JSX può risultare confondente: sembra HTML, ma non lo è davvero. La presenza di regole specifiche (come un solo elemento root o l’uso delle parentesi graffe) può rallentare l’apprendimento.

3. Separazione meno netta delle responsabilità

Anche se per molti è un vantaggio, mescolare markup e logica nello stesso file non è sempre desiderabile. In alcuni team o architetture si preferisce una separazione più tradizionale tra struttura, stile e comportamento.

4. Non ideale senza componenti

JSX dà il meglio di sé in architetture basate su componenti. In applicazioni che non seguono questo modello, l’uso di JSX può risultare artificiale e meno leggibile rispetto a soluzioni più semplici.

In sintesi, JSX è uno strumento potente, ma come ogni strumento va usato nel contesto giusto: non è obbligatorio, né sempre la scelta migliore.


Alternative a React: JSX senza l’intero ecosistema

Sebbene React sia il framework più noto che utilizza JSX, non è l’unica opzione.

Preact, ad esempio, è spesso citato come:

  • alternativa più leggera
  • compatibile con JSX
  • con una API molto simile a React
  • ideale per bundle più piccoli e performance elevate

In questi casi si può continuare a usare JSX senza adottare l’intero ecosistema React (hook complessi, runtime più pesante, ecc.).


Conclusione

JSX non è magia e non è React.
È una scelta sintattica che rende più semplice e naturale descrivere interfacce usando JavaScript.

In sintesi:

  • 🧁 JSX è solo zucchero sintattico
  • ⚙️ richiede una fase di compilazione
  • ↕️ migliora leggibilità ed espressività del codice ma può anche inficiare la separazione tra logica e UI in progetti complessi o con architetture ben strutturate
  • ♻️ può essere usato anche fuori da React, con librerie come Preact o soluzioni personalizzate

Capire questo aiuta a usare JSX in modo più consapevole — e a smettere di considerarlo “qualcosa di strano che fa React” 😊.



Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment