Convertitore da HTML a JSX
HTML → JSX// JSX output appears here
Perché convertire HTML in JSX?
Quando si migrano template HTML esistenti in React, o si copiano mockup in componenti, bisogna convertire manualmente class in className, for in htmlFor e gli stili inline da stringhe a oggetti JavaScript. Il nostro convertitore automatizza tutte queste trasformazioni all'istante, gestendo l'intera mappatura degli attributi HTML→JSX così puoi concentrarti sulla logica del componente invece che sulla conversione della sintassi.
Conversione degli attributi
Converte class→className, for→htmlFor, tabindex→tabIndex, maxlength→maxLength e molti altri
Oggetti di stile inline
Trasforma style="color: red;" in style={{color: 'red'}} — notazione oggetto JS valida per React
Tag autochiudenti
Aggiunge la barra di chiusura agli elementi void: <br> diventa <br />, <input> diventa <input />
Come convertire HTML in JSX
Incolla l'HTML
Incolla il tuo template HTML, l'esportazione di Figma o qualsiasi frammento HTML nel pannello sinistro
Conversione automatica
Il convertitore trasforma istantaneamente tutti gli attributi, gli stili e gli elementi void in sintassi JSX
Copia il JSX
Copia il JSX convertito e incollalo nel blocco render/return del tuo componente React
Casi d'uso del convertitore da HTML a JSX
Migrazione a React
Migra pagine o template HTML esistenti in componenti React senza conversione manuale degli attributi
Bootstrap verso React
Converti componenti HTML di Bootstrap in JSX per l'uso con react-bootstrap o componenti stilizzati
Template email
Converti template HTML email in JSX per il rendering con React Email o librerie simili
CMS verso React
Converti template HTML di WordPress o CMS tradizionali nella struttura dei componenti React
Suggerimenti da HTML a JSX
✓ class → className è essenziale
class è una parola chiave riservata di JavaScript. React richiede className per le classi CSS. Dimenticarla causa avvisi di React e può causare comportamenti imprevisti.
✓ for → htmlFor sulle label
L'attributo for su <label> diventa htmlFor in JSX. Dimenticarla rompe l'accessibilità — i lettori di schermo dipendono dall'associazione label-campo.
✓ Aggiorna i gestori di eventi dopo la conversione
HTML onclick='...' non viene convertito automaticamente in JSX. Sostituisci manualmente i gestori di eventi inline con il pattern React onClick={handler} dopo la conversione.
✓ I commenti HTML diventano commenti JSX
<!-- commento --> viene convertito in {/* commento */} in JSX. JSX non supporta la sintassi dei commenti HTML all'interno del markup JSX.
❓ Domande frequenti
Perché React usa className invece di class?
class è una parola chiave riservata in JavaScript (usata per le classi ES6). Poiché JSX è JavaScript, usare class creerebbe un conflitto di sintassi. React ha scelto className per evitare ambiguità con la parola chiave class di JavaScript.
Questo strumento gestisce i gestori di eventi React?
No — i gestori di eventi HTML come onclick e onsubmit non vengono convertiti automaticamente in onClick e onSubmit di React perché i loro valori (stringhe JavaScript in HTML) devono fare riferimento a funzioni/stato dei componenti React. Questi devono essere aggiornati manualmente.
Qual è la differenza tra HTML e JSX?
JSX è un'estensione della sintassi JavaScript che assomiglia all'HTML ma viene compilata in chiamate React.createElement(). Differenze chiave: tutti gli attributi in camelCase, class è className, for è htmlFor, gli elementi void devono autochiudersi, e le espressioni usano {} invece delle stringhe.
Perché gli elementi void devono autochiudersi in JSX?
JSX viene analizzato da Babel come sintassi tipo XML, che richiede che tutti gli elementi siano correttamente chiusi. Gli elementi void come <br>, <img>, <input> non hanno figli, quindi devono autochiudersi con /> invece di lasciare un tag non chiuso.