Introduzione a JSX

Abbiamo visto il nostro primo esempio in React, vediamo ora come usare JSX.

Cos’è JSX

Con React sono stati introdotti diversi concetti e novità, direttamente o indirettamente legati alla libreria. Il Team React, nella documentazione ufficiale, suggerisce di usare JSX per lo sviluppo delle nostre applicazioni web.

JSX sta per JavaScript eXtension. Si tratta di un’estensione sintattica di Javascript che permette di scrivere la struttura dei vari componenti usando una sintassi simile al linguaggio HTML.

Abbiamo visto nel precedente articolo che, grazie a Babel, la sintassi JSX viene convertita in semplice linguaggio Javascript. In particolare, nell’esempio precedente, abbiamo usato la seguente riga di codice:

const reactElement = <h1>Ciao... Un saluto da React!</h1>;

Il risultato era che, alla variabile reactElement, veniva assegnato un riferimento ad un oggetto Javascript il quale rappresentava un elemento React (React Element).

// Abbiamo eliminato alcune proprietà per semplificare la struttura
const reactElement = {
  type: 'h1',
  props: {
    children: 'Ciao... Un saluto da React!'
  }
};

Ricordiamo che un React Element è un semplice oggetto Javascript che descrive ciò che deve essere mostrato sullo schermo. I React Elements sono una rappresentazione virtuale dei nodi del DOM reale. Fanno parte del DOM virtuale e vengono usati da React per aggiornare il DOM affichè la sua struttura corrisponda a quella definita dai React Elements.

Ritornando al nostro esempio, la parte di codice JSX <h1>Ciao… Un saluto da React!</h1> viene convertita, dietro le quinte, nella seguente chiamata di funzione:

// React.createElement(type, [props], [...children])

const reactElement = React.createElement(
  'h1', 
  null, 
  `Ciao... Un saluto da React!`
);

La funzione React.createElement() restituirà poi un oggetto Javascript come quello mostrato sopra.

In teoria, potremmo definire direttamente un React Element senza usare né JSX né la funzione createElement(), ma utilizzando semplicemente la sintassi degli oggetti Javsacript. In realtà un React Element contiene molte più proprietà di quelle mostrate sopra e scrivere un’intera applicazione, usando solo oggetti Javascript, diventerebbe un lavoro enorme.

Come usare JSX

Oltre al semplice testo, possiamo inserire anche espressioni Javascript all’interno di JSX utilizzando le parentesi graffe.

const azienda = {
  nome: "Ferrari",
  fondatore: "Enzo Ferrari",
  annoDiFondazione: "1947",
  logo: "logo_ferrari.svg"
};

/*  il Team React consiglia di usare delle parentesi tonde ()
*   per racchiudere la sintassi JSX quanndo questa viene 
*   suddivisa su più linee per questioni di orgazizzazione
*   e leggibilità del codice
*/
let reactElement = (
  <p>
    La {azienda.nome} è stata fondata nel {azienda.annoDiFondazione} 
    da {azienda.fondatore}.
  </p>    
);

// oppure possiamo usare una funzione

function formattaTesto(azienda) {
  return 'La ' 
    + azienda.nome
    + ' è stata fondata nel '
    + azienda.annoDiFondazione
    + ' da ' + azienda.fondatore;
}

reactElement = <p>{formattaTesto(azienda)}</p>;

ReactDOM.render(reactElement, document.querySelector('#root'));

Attributi in JSX

Come per il linguaggio HTML, è possibile usare anche in JSX degli attributi. Se l’attributo è di tipo stringa, bisogna racchiuderlo tra virgolette, se si tratta di espressioni Javascript, utilizzeremo invece le parentesi graffe.

// Al contrario del linguaggio HTML, si usa className invece di class
const element1 = <p className="paragrafo--rosso"><p>;

// se il tag è vuoto, si può chiudere immediatamente con />
const element2 = <img src={azienda.logo} />;

Usare JSX all’interno del codice Javascript

Dal momento che JSX viene convertito in un semplice oggetto Javascript, possiamo usare JSX direttamente all’interno del codice Javascript.

function infoAzienda(azienda) {
  if ( azienda 
    && azienda.annoDiFondazione
    && azienda.nome ) {
    /*
    *   Elementi adiacenti devono essere racchiusi in un altro
    *   elemento
    */
    return (
      <div>
          <h1>{azienda.nome}</h1>
          <p>Anno di fondazione: {azienda.annoDiFondazione}</p>
      </div>
    );
  }
  return (
    <p>
      Non sono disponibili sufficienti dati per l'azienda richiesta
    </p>
  );
}

Annidare i tag in JSX

Nell’esempio appena visto abbiamo, all’interno del blocco if, è presente la seguente espressione:

return (
  <div>
    <h1>{azienda.nome}</h1>
    <p>Anno di fondazione: {azienda.annoDiFondazione}</p>
  </div>
);

In JSX è possibile inserire dei tag all’interno di altri, così come facciamo in HTML. Nell’esempio riportato sopra, l’elemento div contiene al suo interno altri due elementi. Fra l’altro, se avessimo omesso il tag div esterno, avremmo ricevuto nella console degli strumenti per sviluppatori il seguente errore:

Uncaught SyntaxError: Inline Babel script: Adjacent JSX elements must be wrapped in an enclosing tag

Nel caso di elementi annidati, JSX ci permette di migliorare la leggibilità e semplificare il codice da scrivere.

Consideriamo, infatti, il seguente esempio scritto in JSX:

<div>
  <h1 className="header">Ferrari 488GTB</h1>
  <img src="ferrari-488GTB.jpg" alt="Ferrari 488GTB rossa" />
</div>

Se volessimo scrivere il codice equivalente usando Javascript, dovremmo scrivere il seguente codice:

React.createElement(
  "div", 
  null, 
  React.createElement(
    "h1", 
    {className: "header"}, 
    "Ferrari 488GTB"
  ),
  React.createElement(
    "img", 
    {src: "ferrari-488GTB.jpg", 
     alt: "Ferrari 488GTB rossa"
    }
  )
);

Risulta evidente che con l’aumentare degl elementi, il codice diventa sempre più difficile da leggere.

Commenti in JSX

All’interno del codice JSX è possibile usare dei commenti; basta racchiudere i commenti fra parentesi graffe. Si possono usare commenti di una singola linea o un blocco di commenti su più linee.

{/* Commento in JSX */}

{/* Commento 
    in JSX 
    su più linee
*/}

Bisogna prestare attenzione all’uso dei commenti in JSX e non inserirli all’interno del codice Javascript. Mettiamo in evidenza la differenza usando l’esempio già visto sopra:

function infoAzienda(azienda) {
  if ( azienda 
       && azienda.annoDiFondazione
       && azienda.nome ) {
    return ( // questo è un commento in Javascript
      // qui devi ancora usare la sintassi dei commenti di Javascript
      <div>{/* Commento su una singola linea in JSX */}
      {/* puoi commentare in JSX, ma solo all'interno della
          sintassi JSX. 
          E puoi usare anche commenti su più linee
          come questo.
      */}
        <h1>{azienda.nome}</h1>
        <p>Anno di fondazione: {azienda.annoDiFondazione}</p>
      </div>
    );
  }
  return (
    <p>
      Non sono disponibili sufficienti dati per l'azienda richiesta
    </p>
  );
}

Per questo articolo è tutto. A partire dal prossimo, inizieremo a parlare dei componenti e scriveremo il nostro primo React Component.