Convertitore da HTML a JSX
Convertitore gratuito da HTML a JSX online. Incolla l'HTML e ottieni subito JSX pulito per React: className, htmlFor, stili camelCase, tag autochiudenti e commenti sicuri, tutto nel browser.
Cosa fa il convertitore da HTML a JSX?
Trasforma normale markup HTML in JSX che React può renderizzare. Incolla l'HTML nell'area di input e il JSX equivalente appare nel pannello di output, aggiornato mentre scrivi con un breve debounce.
Quali attributi vengono rinominati?
class diventa className, for diventa htmlFor, tabindex diventa tabIndex, e gli altri attributi con trattino come maxlength, colspan o stroke-width vengono convertiti nei nomi camelCase di React. Gli attributi data-* e aria-* restano invariati.
Come viene convertito l'attributo style?
Una stringa CSS come style="background-color: red; font-size: 12px" diventa un oggetto JavaScript: style={{backgroundColor:'red', fontSize:'12px'}}, con ogni proprietà CSS in camelCase e il valore tra virgolette.
Come sono gestiti gli elementi void?
Gli elementi che non possono avere figli — img, br, input, hr, meta, link e altri — vengono normalizzati alla sintassi autochiudente: <img> diventa <img />, come richiede JSX. Anche div e span vuoti si chiudono allo stesso modo.
Cosa succede ai commenti HTML?
Vengono convertiti in commenti JSX: <!-- nota --> diventa {/* nota */}. Qualsiasi sequenza che chiuderebbe il commento in anticipo viene neutralizzata così che il codice generato compili sempre.
Come sono trattate entità e caratteri speciali?
Le entità come & o © vengono decodificate in caratteri reali, poi graffe e angolari vengono ri-escapati in forma sicura per JSX, così il testo con { } o < viene reso correttamente senza rompere il componente.
A cosa serve l'opzione componente funzione?
Avvolge il markup convertito in un modello pronto all'uso: function Component() { return ( ...il tuo JSX... ) } invece di JSX nudo. Attivala per incollare lo snippet direttamente in un file React.
Il mio HTML viene caricato da qualche parte?
No. Il parsing avviene interamente nel browser con il DOMParser integrato. Nulla viene inviato a server, quindi puoi convertire markup privati e lo strumento funziona anche offline.
Come usare Convertitore da HTML a JSX
Converti HTML normale in React JSX pronto all'uso senza lasciare il browser. Tutto viene analizzato localmente con il DOMParser integrato — il tuo markup non viene mai caricato.
- Incolla il tuo HTML nell'editor di sinistra; il risultato JSX compare a destra e si aggiorna mentre digiti (antirimbalzo di 300 ms).
- Scegli la larghezza dell'indentazione in "Rientro" — 2 o 4 spazi per livello di annidamento.
- Attiva "Componente funzione" per avvolgere l'output in function Component() { return ( ... ) }, pronto da incollare in un file React.
- Usa Copia per prendere il risultato, Esempio per caricare un campione, o Pulisci per ricominciare.
class, for e tabindex diventano className, htmlFor e tabIndex, le stringhe di style diventano oggetti camelCase e gli elementi void come img o br vengono emessi auto-conclusivi — esattamente ciò che JSX si aspetta.
Strumenti correlati
- Abbellitore HTML Formatta e abbellisci il codice HTML istantaneamente. Converti HTML minificato in codice pulito e leggibile. Strumento online gratuito, senza registrazione.
- Codice in Immagine Converti frammenti di codice in immagini condivisibili con evidenziazione sintassi, temi personalizzati e decorazioni finestra. 100% privacy, tutto nel tuo browser.
- Verifica Hash Calcola e verifica hash MD5, SHA-1, SHA-256, SHA-512 localmente
- Calcolatrice Chmod Calcolatrice chmod online gratuita per visualizzare e calcolare i permessi dei file Linux con caselle di controllo. Converti istantaneamente tra notazione numerica (755, 644) e simbolica (rwxr-xr-x). Supporta permessi speciali come setuid, setgid, sticky bit.
- Tabella ASCII Riferimento completo per la codifica dei caratteri ASCII con codici decimali, esadecimali, ottali, binari, entità HTML e descrizioni. Ricerca e filtro istantanei.
- Visualizzatore Hex Visualizza i contenuti dei file in formato hex dump con ricerca, navigazione offset e scorrimento virtuale
- Ricerca Tipi MIME Trova instantly i tipi MIME per estensione file o cerca estensioni per tipo MIME. Riferimento online gratuito con oltre 1000 voci.
- Verifica risoluzione schermo Rileva risoluzione schermo, dimensione viewport, DPI e profondità colore in tempo reale.