Introduzione a JSX

Navigazione interna

Puoi dare un'occhiata a questo post, a questa pagina, tornare indietro alla homepage o all'archivio.

Perché JSX?

React riconosce il fatto che la logica di renderizzazione è per sua stessa natura accoppiata con le altre logiche che governano la UI: la gestione degli eventi, il cambiamento dello stato nel tempo, la preparazione dei dati per la visualizzazione.

Invece di separare artificialmente le tecnologie inserendo il codice di markup e la logica in file separati, React separa le responsabilità utilizzando unità debolmente accoppiate chiamate “componenti” che contengono entrambi. Torneremo a parlare dei componenti in una sezione successiva. Se non ti senti ancora a tuo agio ad inserire codice di markup nel JavaScript, questa presentazione dovrebbe riuscire a convincerti.

Attenzione:

Dal momento che JSX è più vicino al JavaScript che all’HTML, React DOM utilizza la convenzione camelCase nell’assegnare il nome agli attributi, invece che quella utilizzata normalmente nell’HTML, e modifica il nome di alcuni attributi.

Ad esempio, class diventa className in JSX e tabindex diventa tabIndex.

Questa strana sintassi con i tag non è né una stringa né HTML.

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')
);

React non obbliga ad utilizzare JSX, ma la maggior parte delle persone lo trovano utile come aiuto visuale quando lavorano con la UI all’interno del codice JavaScript. Inoltre, JSX consente a React di mostrare messaggi di errore e di avvertimento più efficaci.

1. Dichiarativo

   1. React rende la creazione di UI interattive facile e indolore.

   2. Progetta interfacce per ogni stato della tua applicazione.

   3. React aggiornerà efficientemente solamente le parti della UI che dipendono da tali dati.

2. Componenti

3. Imparalo una volta, usalo ovunque

• Un Componente Semplice

  • I componenti React implementano un metodo render.

  • Questo esempio usa una sintassi simile ad XML chiamata JSX.

  • I dati passati in input al componente possono essere acceduti.

• Un Componente Stateful

• Una Applicazione

Crea componenti in isolamento e componili per creare UI complesse.

Incorporare espressioni in JSX

Nell’esempio in basso, dichiariamo una variabile chiamata name e poi la utilizziamo all’interno di JSX racchiudendola in parentesi graffe:

Puoi inserire qualsiasi espressione JavaScript all’interno delle parentesi graffe in JSX. Ad esempio, 2 + 2, user.firstName o formatName(user) sono tutte espressioni JavaScript valide.