Introduzione a JSX

JSX è un’estensione della sintassi JavaScript e produce elementi React con una sintassi molto simile al linguaggio HTML. L’esempio precedente può essere riscritto cosi:

const element = <h1>Hello World!</h1>;
 ReactDOM.render(
   element,
   document.getElementById('root')
 );

Si può usare React senza JSX ma JSX rende React molto più elegante.

Il browser non è in grado di interpretare nativamente questo tipo di sintassi. Per questo motivo, è necessario aggiungere un riferimento a un cosiddetto pre-compilatore, ovvero uno script, da includere nella pagina, capace di trasformare JSX in javascript. Questo pre-compilatore si chiama Babel.

Per poter passare variabili all’interno di JSX si usano le parentesi graffe:

const name = 'Giuseppe Verdi';
 const element = <h1>Hello, {name}</h1>;
 ReactDOM.render(
   element,
   document.getElementById('root')
 );

Qualsiasi codice javascript può essere anch’esso racchiuso all’interno di parentesi graffe in JSX.

function formatName(user) {
   return user.firstName + ' ' + user.lastName;
 }
 const user = {
   firstName: 'Giuseppe',
   lastName: 'Verdi'
 };
 const element = (
   <h1>
     Hello, {formatName(user)}!
    </h1>
 );
 ReactDOM.render(
   element,
   document.getElementById('root')
 );

Provalo su CodePen

Le espressioni JSX diventano normali oggetti JavaScript. Per questo motivo, si  può utilizzare JSX all’interno di Javascript e viceversa:

function getGreeting(user) {
   if (user) {
     return 
Hello, {formatName(user)}!
;
   }
   return Hello, Stranger.
;
 }