Tradizionalmente, gli sviluppatori hanno separato il markup e la logica in file distinti, utilizzando l’HTML per la struttura e i CSS per lo stile e scrivendo poi JavaScript per gestire le interazioni e la manipolazione dei dati.

Ma se ci fosse un modo per combinare queste tecnologie, semplificando il processo di sviluppo e rendendo più facile la costruzione di interfacce utente complesse? È qui che entra in gioco JSX.

In questo articolo scoprirete cos’è JSX, come funziona e perché è importante per costruire interfacce utente dinamiche nello sviluppo web.

Esploriamo questa tecnologia rivoluzionaria in modo più dettagliato.

Cos’è JSX?

JSX (JavaScript XML) è un’estensione della sintassi di JavaScript che permette agli sviluppatori di scrivere codice simile all’HTML all’interno di un file JavaScript. È stata sviluppata da Meta (ex Facebook).

La sintassi di JSX assomiglia all’HTML, con tag di apertura e chiusura, attributi ed elementi annidati.

Ad esempio, potreste scrivere il seguente codice JSX per rendere un semplice elemento di intestazione:

const heading = <h1>Hello, JSX!</h1>;

Questo codice sembra HTML, ma è JavaScript. La parola chiave const crea una nuova variabile chiamata heading e il valore di questa variabile è il risultato dell’espressione JSX.

Come funziona JSX?

JSX viene trasformato in normale JavaScript prima di essere eseguito nel browser. Questa trasformazione avviene tramite uno strumento chiamato transpiler. Il transpiler più popolare per JSX è Babel.

Babel trasforma il codice JSX in una serie di chiamate di funzione. Queste chiamate di funzione sono equivalenti al codice HTML scritto in JSX. Il browser può quindi eseguire il codice JavaScript risultante.

Ad esempio, il seguente codice JSX:

const element = <h1>Hello, world!</h1>;

viene trasformato nel seguente codice JavaScript:

const element = React.createElement("h1", null, "Hello, world!");

Questa trasformazione permette agli sviluppatori di scrivere codice con una sintassi familiare e facile da leggere, pur sfruttando la potenza e la flessibilità di JavaScript.

JSX e React

JSX è parte integrante di React e consente agli sviluppatori di scrivere il markup e la logica di questi componenti in un unico file.

Ecco un semplice esempio di codice JSX in un componente React:

import React from 'react';

function Greet() {
  return <h1>Hello World!</h1>;
}

export default Greeting;

In questo esempio, abbiamo un componente funzionale chiamato Greet che rende un elemento h1 con un messaggio di saluto.

Il compilatore di React trasformerà questo codice in codice JavaScript ottimizzato che potrà essere eseguito dal browser, consentendo al componente di essere visualizzato sullo schermo.

Ecco come il compilatore React trasformerebbe il componente Greet:

import React from 'react'

function Greet() {
  return React.createElement("h1", {}, "Hello, World!")
}

In questo codice, il codice JSX è stato trasformato in una chiamata a React.createElement che crea la stessa struttura e lo stesso contenuto del codice JSX originale.

Questo è ciò che accade dietro le quinte quando React compila il codice JSX, consentendone l’esecuzione da parte del browser. Tuttavia, il codice trasformato potrebbe essere meno leggibile del codice JSX originale.

Nella versione 17 di React è stata introdotta una nuova funzione di trasformazione JSX che importa automaticamente funzioni speciali dai nuovi punti di ingresso del pacchetto React, consentendo agli sviluppatori di utilizzare JSX senza dover importare React all’inizio dei propri file.

// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('h1', { children: 'Hello world' });
}

Usare le espressioni JavaScript con JSX

In JSX, le espressioni JavaScript possono essere incorporate direttamente nel markup per generare contenuti in modo dinamico. Questo permette agli sviluppatori di utilizzare il codice JavaScript per calcolare valori, eseguire operazioni e renderizzare in modo condizionato il contenuto dei loro componenti JSX.

Questo esempio mostra come utilizzare due espressioni JavaScript all’interno di JSX:

import React from 'react';

const MyComponent = () => {
  const name = 'John';
  const age = 30;

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
      <p>Next year, you will be {age + 1} years old.</p>
      {age >= 18 && <p>You are an adult.</p>}
    </div>
  );
};

export default MyComponent;

In questo esempio, le espressioni JavaScript {name}, {age}, {age + 1} e {age >= 18 && <p>You are an adult.</p>} sono utilizzate per rendere dinamicamente il contenuto in base ai valori delle variabili nome ed età.

Usare i CSS con JSX

I CSS possono essere applicati ai componenti JSX in vari modi, ad esempio con stili in linea, file CSS separati o librerie CSS-in-JS. Gli stili in linea sono definiti direttamente all’interno del markup JSX utilizzando gli oggetti JavaScript, mentre i file CSS separati o le librerie CSS-in-JS consentono uno stile esterno e modulare dei componenti.

Questo esempio mostra come applicare gli stili in linea definiti con un oggetto JavaScript agli elementi utilizzando l’attributo style in JSX:

import React from 'react';

const MyComponent = () => {
  const styles = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px'
  };

  return (
    <div style={styles}>
      <h1>Hello, World!</h1>
      <p>This is a component with inline styles.</p>
    </div>
  );
};

export default MyComponent;

In questo esempio, le proprietà CSS come backgroundColor, color e padding sono impostate come coppie chiave-valore nell’oggetto styles e i loro valori sono stringhe che rappresentano i valori CSS.

Nota: sebbene gli stili in linea offrano flessibilità e semplicità, è consigliabile utilizzare le classi CSS o le librerie CSS-in-JS per stili più complessi o riutilizzabili in applicazioni più grandi.

6 regole JSX importanti

Quando si scrive del codice JSX, ci sono alcune regole che vanno seguite per assicurarsi che sia valido e facile da leggere.

1. Restituire sempre un singolo elemento root

In JSX, è sempre necessario restituire un singolo elemento root. Ciò significa che tutto il codice JSX deve essere contenuto in un singolo elemento esterno. Ad esempio, questo è un JSX valido:

return (
  <div>
    <h1>Hello World!</h1>
    <p>This is my first React component.</p>
  </div>
)

Ma questo non lo è perché restituisce due elementi invece di uno:

return (
  <h1>Hello World!</h1>
  <p>This is my first React component.</p>
)

Questo è importante da tenere presente quando si convertono i codici HTML in JSX.

2. Usare className invece di class

In HTML, si usa l’attributo class per specificare una classe CSS per un elemento. In JSX, invece, è necessario utilizzare l’attributo className. Ad esempio:

// Good
<div className="my-class">This element has a CSS class.</div>

// Bad
<div class="my-class">This element has a CSS class.</div>

L’utilizzo di className al posto di class è importante ed evita conflitti di denominazione perché class è una parola chiave riservata in JavaScript.

3. Usare le parentesi graffe per le espressioni JavaScript

Quando si ha bisogno di includere un’espressione JavaScript all’interno del proprio codice JSX, è necessario racchiuderla tra parentesi graffe {}. Questo può essere utilizzato per qualsiasi cosa, dalla visualizzazione di dati dinamici al rendering condizionato dei componenti. Ecco un esempio:

// Good
<div>{myVariable}</div>

// Bad
<div>myVariable</div>

È anche possibile eseguire operazioni matematiche all’interno delle parentesi graffe, ad esempio:

<p>The total cost is {25*10}</p>

Inoltre, all’interno delle parentesi graffe, si possono impostare dichiarazioni condizionali utilizzando gli operatori ternari:

<h1>{(x) < 15 ? "Welcome" : "Goodbye"}</h1>

Ecco un esempio migliore con il componente React:

function Greeting() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <h1>Please log in.</h1>
      )}
    </div>
  );
}

In questo esempio, definiamo un componente Greeting. Il componente utilizza l’operatore ternario per rendere condizionatamente un saluto in base al valore di isLoggedIn. Se isLoggedIn è true, il componente rende un elemento h1 con il testo “Welcome back!”. Se isLoggedIn è false, il componente visualizza un elemento h1 con il testo “Please log in”.

4. Usare camelCase per la maggior parte delle cose in JSX

In JSX, è bene usare il camelCase per la maggior parte delle cose, compresi gli attributi, i gestori di eventi e i nomi delle variabili. Questa convenzione è coerente con le convenzioni di denominazione di JavaScript e aiuta a mantenere la leggibilità.

Ad esempio, meglio usare onClick invece di onclick e className invece di class.

// Good
<button onClick={handleClick} className="btn">Click me!</button>

// Bad
<button onclick={handle_click} class="btn">Click me!</button>

5. Chiudere sempre i tag

In JSX, si devono sempre chiudere i tag, anche se non hanno alcun contenuto. Ad esempio:

// Good
<div></div>

// Bad
<div/>

6. Usare i tag auto-chiudenti per gli elementi vuoti

Se si ha un elemento che non ha alcun contenuto, si può utilizzare un tag di chiusura automatica invece di un tag di apertura e chiusura. Ad esempio:

// Good
<img src="my-image.jpg" alt="My Image"/>

// Bad
<img src="my-image.jpg" alt="My Image"></img>

Perché JSX è importante per lo sviluppo web?

JSX è importante per lo sviluppo web perché:

  1. Permette agli sviluppatori di costruire interfacce utente in modo più intuitivo e familiare.
  1. Invece di manipolare direttamente il DOM, gli sviluppatori possono utilizzare JSX per descrivere la struttura della loro interfaccia utente in modo più simile alla scrittura di HTML.
  1. Questo permette uno sviluppo più efficiente e flessibile. Poiché JSX è semplicemente JavaScript, gli sviluppatori possono sfruttare tutte le caratteristiche di JavaScript per creare interfacce utente più complesse e dinamiche.
  1. È una parte importante della libreria React, che è una delle scelte più popolari per la creazione di interfacce utente nello sviluppo web moderno. Se si vuole utilizzare React, è necessario imparare JSX.

Riepilogo

JSX è un’estensione della sintassi di JavaScript che permette agli sviluppatori di scrivere markup simili a quelli di HTML all’interno di un file JavaScript. Questo facilita la creazione di interfacce utente dinamiche e interattive per le applicazioni web.

Abbiamo imparato alcune regole da seguire quando usiamo JSX: seguendo queste regole, potremo scrivere codice pulito, leggibile e manutenibile, coerente con le convenzioni di denominazione di JavaScript.