Introduzione a JSX

Considera questa dichiarazione di variabile:

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

Questa strana sintassi con i tag non è né una stringa né HTML.

È chiamata JSX, ed è un’estensione della sintassi JavaScript. Ti raccomandiamo di utilizzarla con React per descrivere l’aspetto che dovrebbe avere la UI (User Interface, o interfaccia utente). JSX ti potrebbe ricordare un linguaggio di template, ma usufruisce di tutta la potenza del JavaScript.

JSX produce “elementi React”. Studieremo il modo in cui gli elementi vengono renderizzati nel DOM nella prossima sezione. Qui sotto troverai le nozioni fondamentali di JSX, sufficienti per iniziare ad utilizzarlo.

Perché JSX?

React riconosce il fatto che la logica di renderizzazione è per sua stessa natura accoppiata con le altre logiche che governano la UI: la gestione degli eventi, il cambiamento dello stato nel tempo, la preparazione dei dati per la visualizzazione.

Invece di separare artificialmente le tecnologie inserendo il codice di markup e la logica in file separati, React separa le responsabilità utilizzando unità debolmente accoppiate chiamate “componenti” che contengono entrambi. Torneremo a parlare dei componenti in una sezione successiva. Se non ti senti ancora a tuo agio ad inserire codice di markup nel JavaScript, questa presentazione dovrebbe riuscire a convincerti.

React non obbliga ad utilizzare JSX, ma la maggior parte delle persone lo trovano utile come aiuto visuale quando lavorano con la UI all’interno del codice JavaScript. Inoltre, JSX consente a React di mostrare messaggi di errore e di avvertimento più efficaci.

Detto questo, incominciamo!

Incorporare espressioni in JSX

Nell’esempio in basso, dichiariamo una variabile chiamata name e poi la utilizziamo all’interno di JSX racchiudendola in parentesi graffe:

const name = 'Giuseppe Verdi';const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

Puoi inserire qualsiasi espressione JavaScript all’interno delle parentesi graffe in JSX. Ad esempio, 2 + 2, user.firstName o formatName(user) sono tutte espressioni JavaScript valide.

Nell’esempio in basso, includiamo il risultato della chiamata ad una funzione JavaScript, formatName(user), in un elemento <h1>.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Giuseppe',
  lastName: 'Verdi'
};

const element = (
  <h1>
    Hello, {formatName(user)}!  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

Provalo su CodePen

Abbiamo suddiviso il codice JSX su più linee per renderlo più leggibile. Sebbene non sia obbligatorio, se segui questa pratica ti consigliamo di racchiudere il codice in parentesi per evitare i problemi che possono derivare dall’inserimento automatico dei punto e virgola.

JSX è un’Espressione

Dopo la compilazione, le espressioni JSX diventano normali chiamate a funzioni JavaScript che producono oggetti JavaScript.

Questo significa che puoi utilizzare JSX all’interno di istruzioni if e cicli for, assegnarlo a variabili, utilizzarlo come argomento di una funzione e restituirlo come risultato di una funzione:

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;  }
  return <h1>Hello, Stranger.</h1>;}

Specificare gli Attributi con JSX

Puoi utilizzare le virgolette per valorizzare gli attributi con una stringa:

const element = <div tabIndex="0"></div>;

Puoi anche utilizzare le parentesi graffe per includere un’espressione JavaScript in un attributo:

const element = <img src={user.avatarUrl}></img>;

Non aggiungere le virgolette attorno alle parentesi graffe quando includi un’espressione JavaScript in un attributo. Dovresti utilizzare o le virgolette (per le stringhe) o le parentesi graffe (per le espressioni), ma mai entrambe nello stesso attributo.

Attenzione:

Dal momento che JSX è più vicino al JavaScript che all’HTML, React DOM utilizza la convenzione camelCase nell’assegnare il nome agli attributi, invece che quella utilizzata normalmente nell’HTML, e modifica il nome di alcuni attributi.

Ad esempio, class diventa className in JSX e tabindex diventa tabIndex.

Specificare Figli in JSX

Se un tag è vuoto, puoi chiuderlo immediatamente con />, come in XML:

const element = <img src={user.avatarUrl} />;

I tag JSX possono contenere figli:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

JSX Previene gli Attacchi di Iniezione del Codice

Utilizzare l’input degli utenti in JSX è sicuro:

const title = response.contenutoPotenzialmentePericoloso;
// Questo è sicuro:
const element = <h1>{title}</h1>;

React DOM effettua automaticamente l’escape di qualsiasi valore inserito in JSX prima di renderizzarlo. In questo modo, garantisce che non sia possibile iniettare nulla che non sia esplicitamente scritto nella tua applicazione. Ogni cosa è convertita in stringa prima di essere renderizzata. Questo aiuta a prevenire gli attacchi XSS (cross-site-scripting).

JSX Rappresenta Oggetti

Babel compila JSX in chiamate a React.createElement().

Questi due esempi sono identici:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement() effettua alcuni controlli per aiutarti a scrivere codice senza bug, ma fondamentalmente crea un oggetto come questo:

// Nota: questa struttura è semplificata
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

Questi oggetti sono chiamati “elementi React”. Puoi pensare a loro come a descrizioni di ciò che vuoi vedere sullo schermo. React legge questi oggetti e li utilizza per costruire il DOM e tenerlo aggiornato.

Esploreremo la renderizzazione degli elementi React nel DOM nella prossima sezione.

Consiglio:

Ti raccomandiamo di indicare “Babel” come linguaggio nel tuo editor preferito, in modo che il codice ES6 ed il codice JSX siano entrambi evidenziati correttamente.