CONTATTACI

Guide per aspiranti programmatori

Programmatore che esamina react al microscopio
Lezione 5 / 41

Valori primitivi in JSX

Abbiamo creato il nostro primo componente, costituito da un elemento div che contiene un paragrafo p, e abbiamo applicato dello stile tramite linguaggio CSS.

Fin’ora, però, abbiamo trattato JSX come se fosse codice HTML tradizionale. È ora di mischiarvi un po’ di linguaggio JavaScript!

Cominciamo con qualcosa di semplice: estraiamo il nostro messaggio (“Hello React!”), inseriamolo in una costante e iniettiamo la costante nel valore di ritorno della funzione.

Spoiler alert: mentre per passare da JavaScript a JSX usiamo parentesi tonde, per passare da JSX a JavaScript usiamo parentesi graffe.

 

/* File: src/App.jsx */

function App() {
  const message = "Hello React!";

  return (
    <div className="App">
      <p>{message}</p>
    </div>
  );
}

Il codice, in realtà, si spiega da solo, ma proviamo a spiegarlo ugualmente: abbiamo creato una costante, che abbiamo chiamato message, in cui abbiamo inserito il messaggio “Hello React!”. La costante è stata poi iniettata nella parte di JSX che la funzione restituisce, tramite l’utilizzo di parentesi graffe ({message}), chiamato Curly Brackets o Bracket Interpolation. Se ci pensi, non è molto diverso dall’utilizzo di string template e template literals in JavaScript, in cui possiamo usare la sintassi ${} per scrivere cose come:

 

const name = "Andrea";
const greeting = `Hello, my name is ${name}!`;

Invece di una stringa abbiamo JSX e invece di ${} usiamo {}.

Vediamo come i differenti tipi nativi di JavaScript vengono interpretati in JSX:

  • Stringhe (string): vengono iniettate, come abbiamo appena visto
  • Numeri (number): vengono trasformati in stringhe, in base 10, e poi iniettati
  • Booleani (boolean): non vengono stampati (diventano stringhe vuote).
  • null: rappresenta l’assenza di contenuto
  • undefined: non viene stampato (diventa una stringa vuote). 

Importante: da un punto di vista pratico, null, true, false e undefined provocano lo stesso risultato in JSX, cioè un’assenza di contenuto. Tuttavia, la convenzione vuole che, in React, solo null rappresenti l’assenza di contenuto. Utilizzare true, false o undefined come contenuto in JSX è, quindi, sbagliato.

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.