JSX VS HTML: le differenze

Mettiamo da parte per un momento la nostra app e vediamo degli esempi di differenze tra JSX e codice HTML tradizionale. JSX viene trasformato in linguaggio JavaScript da React e, per questo, porta delle limitazioni.

Commenti

Come abbiamo visto, usiamo le parentesi tonde per passare da linguaggio JavaScript a JSX e le parentesi graffe per passare da JSX a linguaggio JavaScript. Se vogliamo inserire commenti in JSX, possiamo usare la sintassi HTML:

function MyComponent() {
  const message = "Hello!"

  return (
    <div className="MyComponent">
      <!-- Commento -->
      <p>{message}</p>
    </div>
  )
}

Il commento HTML, però, apparirà in pagina! Sarà visibile tramite l’inspector del browser e farà parte in tutto e per tutto del codice HTML della nostra applicazione. Se, invece, vogliamo inserire un commento che non apparirà in pagina, possiamo “passare in modalità JavaScript” e usare la sintassi JavaScript:

function MyComponent() {
  const message = "Hello!";

  return (
    <div className="MyComponent">
      {/* Commento */}
      <p>{message}</p>
    </div>
  );
}

Tag senza chiusura

Nel linguaggio HTML, ci sono tag che si aprono e si chiudono (<div></div>, <p></p>) e tag che, invece, non si chiudono (<input>, <img>) perché non possono avere contenuti.

In HTML, per i tag che non si chiudono, utilizziamo la sintassi <tag> (intendiamo dire che utilizziamo il nome del tag tra le parentesi angolari, ad esempio <img>).

In JSX, dobbiamo chiudere tutti i tag vuoti sul posto, scrivendo per esempio <img /> o <input />. La buona notizia è che possiamo chiudere qualsiasi tag, per cui, se vogliamo creare un div vuoto, possiamo scrivere <div />.

Fragment

React non permette a un componente di restituire più di un elemento, perché trasforma JSX in JavaScript e, come sappiamo, una funzione JavaScript non può restituire più di un valore.

In JSX abbiamo un tag particolare, chiamato Fragment, che si rappresenta con <></>. Questo tag viene utilizzato per ottenere un elemento unico senza aggiungere elementi che potrebbero cambiare il significato semantico o funzionale di quello che stiamo facendo. Per esempio:

function MyComponent() {
  // Errore!
  return (
    <p>Look, a message!</p>
    <p>And another message!</p>
  );
}

Nell’esempio soprastante, il componente MyComponent ha due radici, che sono i due paragrafi. Potremmo inserire un div che circondi i due paragrafi:

function MyComponent() {
  return (
    <div>
      <p>Look, a message!</p>
      <p>And another message!</p>
    </div>
  );
}

ma il div potrebbe non avere nessuna utilità (semantica o funzionale) se non quella di rispettare la regola di React. Per risolvere questa situazione, utilizziamo un Fragment:

function MyComponent() {
  // Corretto!
  return (
    <>
      <p>Look, a message!</p>
      <p>And another message!</p>
    </>
  );
}

Attributi

In linguaggio HTML, i tag non sono altro che marcatori che possono essere configurati tramite coppie attributo-valore:

<input
  type="password"
  id="password"
  name="password"
  placeholder="Your password"
  disabled
/>

In questo esempio, l’attributo type cambia l’aspetto dell’input, con il valore password che, in particolare, fa sì che ciò che viene scritto al suo interno non sia visibile.

In JSX, funziona allo stesso modo, ma dato che gli attributi vengono trasformati in proprietà di oggetti JavaScript, abbiamo qualche eccezione:

• class diventa className (perché class in linguaggio JavaScript ha un significato diverso).
• Tutti gli attributi tranne quelli che iniziano per aria- o data- vengono trasformati in camelCase (per esempio onClick, onSubmit, className stesso).

Va prestata particolare attenzione agli attributi booleani, ad esempio disabled, che può essere vero, falso o inesistente. Basta inserire il nome dell’attributo per ottenere un valore true, mentre non inserirlo non vuol dire false ma undefined. Per esempio:

function MyComponent() {
  return (
    <>
      <button /> {/* disabled === undefined */}
      <button disabled /> {/* disabled === true */}
      <button disabled={true} /> {/* disabled === true */}
      <button disabled={false} /> {/* disabled === false */}
    </>
  );
}

Il nostro consiglio in questo caso è riassumibile in un concetto molto semplice: quando si ha tra le mani una variabile booleana, va usata. Se, invece, vuoi che l’attributo sia sempre true, non devi dargli alcun valore. Di contro, se vuoi che sia sempre false, devi esplicitamente assegnargli il valore false:

function myComponent() {
  const myBoolean = true;

  return (
    <>
      <button disabled={myBoolean} /> {/* eredita il valore di myBoolean */}
      <button disabled /> {/* sempre vero */}
      <button disabled={false} /> {/* sempre falso */}
    </>
  );
}

È sempre una tentazione quella di usare valori non booleani per questo tipo di attributi, perché nel linguaggio JavaScript esistono i valori “truthy” – come le stringhe non vuote o i numeri diversi da zero – e quelli “falsy”, come le stringhe vuote, zero, null e undefined.

Ma in quel caso è un po’ come tendere una trappola a sé stessi e a chi lavora o lavorerà a quel codice. Se vuoi convertire un valore non booleano in un booleano, puoi usare il leggendario “bang bang” (!!value) o, per una sicurezza maggiore, la funzione Boolean (Boolean(value)).

Approfondimento: gli attributi che cominciano per data- e aria- mantengono la loro forma originale per ragioni storiche.

Consiglio utile: se dovessi trovarti a convertire codice HTML tradizionale in JSX, puoi farlo in automatico usando un convertitore.