Introduzione a JSX

  • 1 minuto

React usa una sintassi speciale denominata JavaScript XML (JSX). JSX consente di integrare codice HTML (o componenti personalizzati eventualmente creati) e JavaScript in un singolo file o persino in una singola riga di codice. Usando JSX, è possibile affidarsi alla sintassi JavaScript per la logica. Visual Studio Code fornisce IntelliSense per i file JSX, quindi è uno strumento utile per lavorare con React.

Nota

JSX si basa sul linguaggio XML (Extensible Markup Language). La sintassi del linguaggio XML è simile a HTML. In molti casi si potrebbe persino non notare alcuna differenza. Tuttavia, il linguaggio XML pone due importanti restrizioni sulla sintassi:

  • Tutti gli elementi devono essere inseriti all'interno di un elemento padre.
  • Tutti gli elementi devono essere chiusi.

Il processo di compilazione

I browser non supportano JSX in modo nativo. Il codice JavaScript e HTML deve quindi essere generato dai file JSX per poter essere visualizzato in un browser. Le attività necessarie possono essere eseguite da diversi bundler e altri strumenti, tra cui Webpack, Parcel e Snowpack. Si userà Snowpack perché non richiede codice o script aggiuntivi.

Componenti

Lo sviluppo in React è basato sui componenti. I componenti sono unità autonome di visualizzazione e di lavoro. Possono essere riutilizzati nell'applicazione. Usarli per suddividere logicamente l'applicazione in blocchi (o componenti) più piccoli.