JSX

Un'introduzione a JSX

Se hai mai implementato un'app Web con il framework "React.js", potresti aver notato che la sintassi per scrivere i componenti React.js sembra leggermente diversa dall'altro codice Javascript. Sebbene per lo più gli stessi, i componenti di React sono descritti tramite parentesi speciali, le parentesi angolari sinistra e destra. Assomigliano proprio alla sintassi per XML, l'"Extensible Markup Language". In React.js, questa sintassi è chiamata allo stesso modo "JSX", che significa "Javascript XML".

L'obiettivo principale di questa sintassi è semplificare la scrittura del codice React. Il codice JSX non può essere interpretato dalle JVM, quindi deve essere compilato in codice Javascript reale prima dell'uso, un'attività tipicamente svolta da bundler come Babel o Webpack.

Il codice React che probabilmente non hai mai scritto

Ciò significa effettivamente che è molto probabile che tu non abbia mai scritto componenti React.js così "veri" che vengono generati dal tuo codice JSX. Ma non preoccuparti, questo può essere fatto facilmente senza troppi problemi. In effetti, puoi persino scrivere un'applicazione Web React completa senza mai usare JSX. Il seguente frammento di codice mostra come appare un vero componente React.js con solo Javascript.

// A common JSX-element.

<Header title="Lorem ipsum" variant="primary">
  I am a subtitle
</Header>

//
// ...
//

// After the compilation step:

React.createElement(
  Header,
  {title: 'Lorem ipsum', variant: "primary"},
  'I am a subtitle'
);

Puoi anche provarlo nel tuo browser, senza installare alcun software! Basta scorrere fino alla fine di questa pagina per utilizzare il collegamento nell'addendum.

Utilizzo di JSX per semplificare il codice

Come puoi vedere, il vantaggio principale della sintassi JSX è rendere il codice relativo all'interfaccia utente più semplice da scrivere e più facile da distinguere dalle altre parti dell'applicazione, poiché la sintassi simile a XML fornisce una chiara indicazione del dominio del codice.

Un'altra grande caratteristica di JSX è che diventa un'espressione solo dopo la fase di compilazione. Puoi quindi usarlo nelle istruzioni if-else o persino memorizzare il suo risultato in una variabile. E poiché i componenti di React.js possono contenere espressioni come figli stessi, sei in grado di scrivere codice dell'interfaccia utente altamente componibile!

Un'importazione predefinita per ogni file JSX

Potresti aver notato che ogni file JSX in vari tutorial, guide e molto probabilmente anche il tuo codice ha l'importazione predefinita dalla libreria React inclusa, anche se potresti non chiamare mai direttamente questa variabile importata. Il motivo è che dopo la fase di compilazione, ogni espressione JSX diventa una chiamata "React.createElement", come hai visto nell'esempio di codice prima. Pertanto è necessario avere la variabile "React" dall'importazione predefinita inclusa nell'ambito di ogni file.

Sembra HTML, ma non lo è

Un vincolo chiave durante la codifica nella sintassi JSX è la notazione del nome del componente. Affinché il bundler identifichi correttamente i tuoi componenti, devono essere univoci rispetto ai tag HTML standard, poiché la sintassi sembra la stessa.

// 1. A valid example.
function Header(props){
  return (
    <div>
      <h1>{props.title}</h1>
      {props.children}
    </div>
  );
}

// 2. Invalid, only uppercase for React elements.
function header(props){
  return (
    // ...
  );
}

// 3. Invalid, only uppercase 
// when calling React components.
function Page(props){
  // Notice the invalid 'layout':
  return (
    <div style={{ margin: 12 }}>
      <layout>{/* ... */}</layout/>
    </div>
  );
}

È quindi necessario codificare gli elementi JSX sempre in maiuscolo, il che significa che la prima lettera deve essere maiuscola.

La variante dattiloscritta

Potresti aver notato che molti progetti utilizzano anche TSX come suffisso del file per i file dei componenti React.js. Questa è solo un'estensione del JSX originale per essere compatibile con Typescript. I file TSX consentono di scrivere codice Typescript insieme ai componenti di notazione JSX.

solo l'inizio

Questo articolo ha fornito una semplice introduzione a JSX per la codifica dei componenti di React. Il vantaggio principale è una sintassi molto concisa che sembra naturale in un ambiente web. Puoi scrivere elementi altamente componibili con pochissimo codice, che senza dubbio è un fattore chiave dell'attuale stato famoso e popolare di React. Se sei curioso, ci sono molte altre guide dettagliate ed eccellenti del team di React sul loro sito, i collegamenti sono nell'addendum alla fine di questa pagina.