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”.