CONTATTACI

Guide per aspiranti programmatori

Programmatore che esamina react al microscopio
Lezione 6 / 41

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.

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.