Nozioni di Base su JSX in React

In React, utilizziamo un'estensione della sintassi di JavaScript chiamata JSX (JavaScript XML) per costruire le interfacce utente. JSX consente di scrivere componenti React che descrivono l'aspetto dell'interfaccia utente. Per fare ciò, React utilizza una sintassi chiamata JSX.

JSX assomiglia all'HTML, ma viene scritto all'interno di JavaScript. Permette di descrivere gli elementi dell'interfaccia utente direttamente nel codice del componente invece di costruirli passo dopo passo con JavaScript.

Anche se JSX sembra HTML, non è HTML. Internamente, JSX viene convertito in JavaScript che React può interpretare. Questo rende JSX sia espressivo che potente, pur rimanendo parte del linguaggio JavaScript.

In JSX, è possibile incorporare espressioni JavaScript direttamente nel markup. Questo rende semplice visualizzare dati dinamici e controllare ciò che appare sullo schermo. Di seguito è riportato lo stesso componente di prima, ora mostrato con JSX:

function Welcome() {
  const name = "React";
  return <h1>Welcome to {name}</h1>;
}

Qui, JSX viene utilizzato per descrivere l'interfaccia utente. La sintassi {name} consente di inserire valori JavaScript nell'interfaccia. React aggiorna automaticamente l'output visualizzato quando i dati cambiano.