Converti HTML in JSX React Online
Trasforma l'HTML in JSX valido per React e Next.js. Gratis, nel tuo browser, senza caricare file.
Perche usare questo convertitore
HTML in JSX senza errori di sintassi
Privacy totale
La conversione avviene interamente nel tuo browser con JavaScript puro. Il tuo codice non lascia mai il tuo dispositivo.
Trasformazioni complete
Applichiamo tutte le conversioni necessarie: attributi, stili, eventi, tag void e commenti. Nessun passaggio manuale.
Compatibile con React e Next.js
Il JSX risultante e valido per React 16+, Next.js 12+ e qualsiasi framework basato su React come Gatsby o Remix.
Istantaneo
La conversione avviene in millisecondi senza chiamate al server. Incolla e copia, senza attese.
Come funziona
Tre passaggi, senza complicazioni
Incolla il tuo HTML
Incolla il codice HTML che vuoi convertire nel campo di input. Possono essere documenti HTML completi o frammenti.
Conversione automatica
Il convertitore applica tutte le trasformazioni necessarie: class in className, for in htmlFor, stili inline in oggetto JS e tag void auto-chiudenti.
Copia il JSX risultante
Copia il JSX pronto all'uso direttamente nei tuoi componenti React o Next.js.
FAQ
Hai delle domande?
Le principali trasformazioni sono: class in className (class e una parola riservata in JS), for in htmlFor (for e anch'essa riservata), stili inline convertiti da stringa CSS in oggetto JavaScript con proprieta in camelCase, tag void auto-chiudenti (br in br /, img in img /, input in input /) e commenti HTML convertiti in commenti JSX con la sintassi parentesi graffe slash asterisco.
React e Next.js richiedono JSX perche i componenti sono scritti in JavaScript. JSX e zucchero sintattico sopra React.createElement(). Quando viene compilato da Babel o dal compilatore Next.js, ogni tag JSX viene convertito in chiamate a funzioni JavaScript, rendendo impossibile l'uso di parole riservate JS come class o for come attributi.
In HTML: style con color red e font-size 16px. In JSX: oggetto style con color red e fontSize 16px. Le proprieta CSS in kebab-case vengono convertite in camelCase (font-size diventa fontSize, background-color diventa backgroundColor), e i valori vengono convertiti in stringhe o numeri JavaScript.
I gestori di eventi in HTML usano il minuscolo (onclick, onchange, onsubmit). In JSX vengono convertiti in camelCase: onclick diventa onClick, onchange diventa onChange, onsubmit diventa onSubmit, onmouseover diventa onMouseOver. Il valore passa da una stringa di codice JS a un riferimento a funzione.
Gli elementi void in HTML sono tag senza contenuto ne tag di chiusura: br, img, input, hr, meta, link. In JSX, XML richiede che tutti gli elementi siano esplicitamente chiusi, quindi devono essere scritti come br /, img / e simili. Senza auto-chiusura, il compilatore JSX generera un errore di sintassi.
Storia di React JSX (Facebook 2013), differenze tra HTML e JSX, migrazione da template HTML a componenti React, flusso di lavoro nello sviluppo Next.js
JSX (JavaScript XML) e stato introdotto da Facebook nel 2013 insieme a React come estensione della sintassi JavaScript che consente di scrivere strutture simili all'HTML direttamente nel codice JS. Sebbene React possa essere usato facoltativamente senza JSX tramite chiamate dirette a React.createElement(), JSX e rapidamente diventato lo standard de facto perche migliora notevolmente la leggibilita del codice dei componenti. Babel e successivamente il compilatore SWC di Next.js trasformano JSX in JavaScript puro durante il processo di build.
Le differenze tra HTML e JSX derivano dal fatto che JSX opera nel contesto JavaScript. Le piu importanti: class e una parola riservata in JavaScript (per definire le classi ES6), quindi React ha scelto className come attributo equivalente. Analogamente, for e una parola riservata (per i cicli), quindi l'attributo del tag label si scrive come htmlFor. Gli stili inline richiedono un oggetto JavaScript invece di una stringa CSS perche e piu sicuro nel contesto JS e consente l'interpolazione di variabili. Le proprieta CSS sono scritte in camelCase perche il trattino e l'operatore di sottrazione in JavaScript.
La migrazione di template HTML statici a componenti React e un caso d'uso frequente: designer o sviluppatori che lavorano con HTML puro devono integrare i loro design in progetti Next.js o Create React App. Il processo manuale e tedioso e soggetto a errori, specialmente con HTML complesso che contiene molti attributi di stile, gestori di eventi ed elementi void. Gli strumenti automatizzati di conversione da HTML a JSX accelerano notevolmente questo processo di migrazione in progetti di qualsiasi scala.