Convertitore HTML in JSX

Che cos'è questo strumento?

Questo strumento online gratuito converte il HTML standard in sintassi JSX valida per l'uso con React. È il modo più veloce per rifattorizzare il codice HTML esistente in componenti pronti per applicazioni front-end moderne.

Come usare

1. Incolla o digita il tuo HTML nell'editor.
2. Clicca su Converti per generare il codice JSX.
3. Scarica, copia o condividi il tuo JSX convertito istantaneamente.

Accedi con Google o GitHub per salvare le tue conversioni e accedervi in qualsiasi momento.

Che cos'è JSX?

JSX (JavaScript XML) è un'estensione della sintassi per JavaScript utilizzata in React per definire i componenti dell'interfaccia utente in modo dichiarativo. JSX ti permette di scrivere tag simili a HTML direttamente nel tuo codice JavaScript.

A differenza dell'HTML tradizionale, JSX utilizza regole speciali (come className invece di class) e supporta l'inserimento di espressioni JavaScript all'interno di parentesi graffe.

Esempio di JSX di base:

const element = (
  <h1 className="greeting">
    Ciao, mondo!
  </h1>
);
    

Scopri di più nella documentazione ufficiale di React.

Esempio HTML vs JSX

HTML

<div>
  <div class="awesome" style="border: 1px solid red">
    <label for="name">Inserisci il tuo nome: </label>
    <input type="text" id="name" />
  </div>
  <p>Inserisci il tuo HTML qui</p>
</div>
    

JSX Convertito

<div>
  <div className="awesome" style={{ border: '1px solid red' }}>
    <label htmlFor="name">Inserisci il tuo nome: </label>
    <input type="text" id="name" />
  </div>
  <p>Inserisci il tuo HTML qui</p>
</div>