Softonic

Convertitore HTML a JSX

Passaggio 1 / 2

Converte: class in className, for in htmlFor, gli stili inline in oggetti JSX, autochiude i tag void e rimuove i commenti HTML.

Converti in JSX

Il JSX sembra HTML finché non lo è più: class è className, for è htmlFor, style è un oggetto e non una stringa, e ogni tag vuoto deve chiudersi da solo. Incolla HTML e questo convertitore produce JSX che compila al primo tentativo, così puoi portare una pagina di marketing in un componente React senza passare i prossimi dieci minuti a inseguire errori del compilatore.

Come convertire HTML in JSX

  1. 1

    Incolla HTML

    Il markup di un componente, o un frammento di pagina completo.

  2. 2

    Converti

    Lo strumento rinomina attributi come `class`, `for` e `readonly` nella grafia JSX e trasforma gli stili inline in oggetti.

  3. 3

    Rivedi il JSX

    L'output è pronto da incollare in un file `.jsx` o `.tsx`.

  4. 4

    Copia e incolla

    Il codice usa espressioni su una sola riga, quindi si adatta bene dentro un componente esistente.

Ogni differenza da HTML a JSX che conta

Il JSX non è HTML. È un’espressione JavaScript che si compila in chiamate React.createElement(), quindi i nomi degli attributi seguono le convenzioni di JavaScript.

Il convertitore applica automaticamente le rinomine più comuni. L’elenco completo qui sotto è il riferimento che ti serve quando scrivi JSX a mano.

Rinomine degli attributi

HTML JSX Note
class className class è riservato in JS
for htmlFor for è riservato
tabindex tabIndex camelCase
readonly readOnly camelCase
contenteditable contentEditable camelCase
stroke-width (SVG) strokeWidth camelCase
xlink:href xlinkHref Namespace a due punti appiattiti
aria-label aria-label ARIA mantiene i trattini
data-* data-* Gli attributi data mantengono i trattini

Attributo style

HTML: style="color: red; padding: 10px"

JSX: style={{ color: 'red', padding: 10 }}

I valori numerici senza unità diventano pixel; tieni le stringhe per percentuali e valori senza unità come flex.

Elementi vuoti auto-chiusi

HTML tollera <br> e <input> senza tag di chiusura. JSX richiede <br /> e <input />, ogni elemento deve essere chiuso esplicitamente.

Commenti

I commenti HTML (<!-- -->) non sono validi nei corpi JSX. Questo convertitore li rimuove; se vuoi conservare una nota, scrivila tu come {/* Commento a blocco JavaScript */}.

Attributi booleani

HTML: <input checked> (o <input checked="checked">)

JSX: <input checked={true} /> o semplicemente <input checked />. Non passare mai la stringa “true”.

Vie di fuga

  • I frammenti HTML non affidabili possono essere renderizzati con dangerouslySetInnerHTML={{ __html: ... }}, volutamente brutto per scoraggiarne l’uso.
  • Gli attributi data-* personalizzati restano invariati; gli attributi non standard vengono passati ma possono attivare avvisi di React in modalità sviluppo.

Domande frequenti

Gli attributi SVG come stroke-width devono essere in camelCase (strokeWidth) in JSX e ogni tag deve auto-chiudersi. Il convertitore auto-chiude i tag void dentro l’SVG e mette in camelCase i nomi delle proprietà nelle stringhe di stile, ma non rinomina gli attributi SVG; cambia stroke-width in strokeWidth a mano. Per le icone singole, l’approccio più pulito è salvare l’icona come file SVG e importarla come componente tramite svgr.

Sì, sia JSX che TSX usano className. L’unica eccezione è dentro dangerouslySetInnerHTML, dove la stringa HTML grezza mantiene class perché viene inserita tale e quale nel DOM.

No. L’output è solo il frammento JSX, senza wrapper export default function né annotazioni di tipo. Incollalo nel tuo file .jsx o .tsx e aggiungi tu props, tipi e wrapper. class viene comunque convertito in className, che è esattamente ciò che TSX si aspetta.

Vengono passati senza modifiche. Il convertitore non rinomina i gestori di eventi, quindi cambia onclick in onClick e sostituisci il valore stringa con una funzione vera, per esempio onClick={() => doThing()}. Dovrai definire doThing nello scope del tuo componente.

Strumenti correlati

Riferimento Tabella ASCII

Tabella ASCII completa da 0 a 127 con decimale, esadecimale, ottale, binario e riferimento numerico HTML per ogni carattere, inclusi i codici di controllo come NUL, LF e DEL.

Riferimento ai caratteri HTML

Elenco ricercabile delle entità HTML, dei loro codici nominati e numerici, e copia con un clic per caratteri e simboli speciali.

Generatore di lettere casuali

Genera lettere A-Z casuali. Scegli la quantità, usa maiuscole, minuscole o un mix, e applica il risultato a giochi, spunti o attività in classe.

Riferimento scorciatoie da tastiera

Cerca le scorciatoie predefinite documentate di VS Code, Chrome e Bash con GNU Readline su macOS, Windows e Linux.

Trova nome colore

Trova il colore CSS standard con nome più vicino a un valore HEX, RGB o HSL usando la differenza CIEDE2000.

Formatter HTML

Formatta HTML localmente nel browser con rientri di due o quattro spazi. L’HTML non viene caricato né validato.

Strumento disponibile in altre lingue