CONTATTACI

Guide per aspiranti programmatori

Programmatore che esamina react al microscopio
Lezione 4 / 41

Che cos’è JSX?

In React, una delle caratteristiche fondamentali è l’uso di JSX, una sintassi che permette di scrivere codice simile a HTML all’interno di JavaScript. JSX sta per JavaScript XML e consente di “mischiare” HTML e JavaScript in modo intuitivo, facilitando la creazione di interfacce utente complesse.

Vediamolo scrivendo il nostro primo componente React! Se hai seguito la parte di creazione dell’app, dovresti avere un file che si chiama App.jsx e contiene una funzione:

 

// File: src/App.jsx

function App() {
  return null;
}

In React, ogni componente è una funzione che restituisce JSX o null.
JSX sta per JavaScript Extention e permette di “mischiare” HTML e JavaScript seguendo le dovute convenzioni (lo vedremo nelle prossime sezioni.); null in JSX significa “nessun contenuto”.

I componenti React sono distinti dalle funzioni JavaScript native e dagli elementi HTML dal fatto che il loro nome inizia con una lettera maiuscola. I file che contengono componenti React possono essere distinti dai file nativi JavaScript tramite l’estensione .jsx

Vite crea il file App.jsx, mentre Create React App lo chiama App.js, ma possiamo rinominare il file creato da Create React App in App.jsx.

In questo momento, App è un componente che restituisce “nessun contenuto” e, di conseguenza, vediamo una pagina vuota. Proviamo a modificare il valore restituito dal componente App:

 

// File: src/App.jsx

function App() {
  return <p>Hello React!</p>;
}

Prova a testare questo codice, cosa succede?
Esatto, abbiamo il paragrafo “Hello React!”!

Nel file App.jsx c’è anche questa riga:

// File: src/App.jsx

import "./App.css";

Vedremo come funzionano import ed export nelle prossime sezioni, ma possiamo già dire che la riga di cui sopra sta importando il file App.css, che viene trattato proprio come codice CSS. Possiamo provare allora a impostare lo stile del nuovo paragrafo restituito da App:

 

/* File: src/App.css */

p {
  background-color: #ddd;
  border-radius: 8px;
  margin-left: auto;
  margin-right: auto;
  max-width: 45em;
  padding: 1em;
  width: 90vw;
}

*immagine*

Questo, sarà il risultato con il CSS applicato.

Attenzione: a differenza di altri framework, in cui è possibile isolare il codice CSS così che si applichi solo ad un componente, nella libreria React tutto il codice CSS viene applicato a tutti i componenti. Questo significa che, se creassimo un secondo componente, diverso da App, che contiene un paragrafo, lo stile che abbiamo dato a <p> sarebbe applicato anche al paragrafo contenuto in quel componente.

Per rimediare a questo problema, possiamo includere il nostro paragrafo in un <div>, che rappresenta il contenitore del nostro componente App. In React, è molto comune creare un contenitore per i componenti, che abbia una classe con lo stesso nome del componente stesso:

 

// File: src/App.jsx

function App() {
  return (
    <div className="App">
      <p>Hello React!</p>
    </div>
  );
}
/* File: src/App.css */

.App p {
  background-color: #ddd;
  border-radius: 8px;
  margin-left: auto;
  margin-right: auto;
  max-width: 45em;
  padding: 1em;
  width: 90vw;
}

Due cose da notare, che rivedremo nelle prossime sezioni:

  1. In React, usiamo className al posto del classico class del linguaggio HTML. Questo succede perché, dietro le quinte, React converte JSX in JavaScript e class, in JavaScript, è una parola soggetta a restrizioni.
  2. Abbiamo circondato la parte di JSX (il valore restituito dalla funzione/componente App) tra parentesi tonde. Questo serve a tracciare un confine tra JavaScript e JSX. Se state usando Prettier con l’impostazione di VS Code “formatOnSave”, ci penserà l’estensione ad aggiungere le parentesi quando servono, in ogni caso una buona regola è: “ogni volta che una parte di JSX occupa più di una riga, va circondata da parentesi tonde”.

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.