ToolDeck

Convertitore HTML in JSX

Converti HTML in JSX per React — class→className, stili stringa→oggetti

Prova un esempio

Input HTML

Output JSX

Esegue in locale · Sicuro per incollare segreti
L'output JSX apparirà qui…

Cos'è la conversione da HTML a JSX?

La conversione da HTML a JSX è il processo di trasformazione del markup HTML standard in sintassi JSX che i componenti React possono renderizzare. JSX è simile all'HTML ma segue le convenzioni di denominazione e le regole di JavaScript. Attributi come class diventano className, for diventa htmlFor, e le stringhe di stile inline vengono sostituite con oggetti JavaScript. Queste modifiche sono necessarie perché JSX viene compilato in chiamate a React.createElement(), dove i nomi degli attributi devono corrispondere ai nomi delle proprietà dell'API DOM anziché ai nomi degli attributi HTML.

La mappatura tra gli attributi HTML e le prop JSX è definita dalla documentazione degli elementi DOM di React. React usa il camelCase per gli attributi composti da più parole (tabindex diventa tabIndex, maxlength diventa maxLength) perché gli identificatori JavaScript non possono contenere trattini. I tag autochiudenti come <img>, <br> e <input> devono includere uno slash finale in JSX (<img />) poiché JSX segue le regole XML, dove ogni tag deve essere chiuso esplicitamente.

htmlToJsxContent.whatBody3

Perché usare un convertitore HTML in JSX?

Rinominare manualmente gli attributi e riscrivere le stringhe di stile su decine di elementi HTML è lento e soggetto a errori. Un convertitore gestisce ogni trasformazione in una sola operazione, permettendoti di incollare HTML da qualsiasi sorgente e ottenere JSX valido in pochi secondi.

Conversione istantanea
Incolla qualsiasi frammento HTML e ottieni subito l'output JSX. Il convertitore gestisce class, for, style, event handler, attributi booleani e tag autochiudenti in un unico passaggio.
🔒
Elaborazione privacy-first
Tutta la conversione avviene localmente nel tuo browser. Il tuo HTML non lascia mai la pagina, quindi puoi convertire in sicurezza markup contenente codice interno, endpoint API o contenuti sensibili.
📋
Nessun account o configurazione
Apri la pagina e inizia a convertire. Nessun login richiesto, nessun pacchetto npm da installare, nessuna fase di build da configurare. Funziona su qualsiasi dispositivo con un browser moderno.
🔧
Copertura completa degli attributi
Converte tutte le mappature standard da attributi HTML a JSX, inclusi className, htmlFor, tabIndex, readOnly, autoComplete e oltre 20 altri. Gestisce anche la rinomina degli event handler da onclick a onClick.

Casi d'uso del convertitore HTML in JSX

Frontend developer: migrazione di template
Quando si porta una pagina HTML o un componente esistente in un progetto React, incolla il markup nel convertitore invece di cercare manualmente gli attributi class e for su centinaia di righe.
Backend engineer: incorporare email HTML
I template di posta elettronica sono scritti in HTML semplice. Per renderizzarli all'interno di una dashboard di amministrazione React o di un componente di anteprima, converti l'HTML in JSX valido per evitare errori di sintassi con className e style.
DevOps: conversione di widget per dashboard
Le dashboard di monitoraggio usano spesso frammenti HTML per widget personalizzati. Converti questi in JSX quando li integri in una piattaforma di strumenti interni basata su React come Retool o un pannello di amministrazione personalizzato.
QA engineer: riprodurre segnalazioni di bug
Quando una segnalazione di bug include output HTML grezzo, convertilo in JSX per renderizzarlo rapidamente all'interno di un test harness React o di una storia Storybook per l'ispezione visiva e il debug.
Designer: prototipazione da mockup HTML
Strumenti di design come Figma esportano HTML/CSS. Converti il markup esportato in JSX per inserirlo direttamente in un prototipo React senza dover ripulire manualmente gli attributi.
Studente: imparare la sintassi React
Confronta l'input HTML con l'output JSX fianco a fianco per capire quali attributi cambiano e perché. Vedere la trasformazione rende le convenzioni di denominazione di React più facili da memorizzare rispetto alla sola lettura della documentazione.

Tabella di riferimento degli attributi HTML→JSX

La tabella seguente elenca gli attributi HTML che cambiano quando vengono convertiti in JSX. Gli attributi non elencati qui (id, src, href, alt, placeholder, ecc.) rimangono invariati perché i loro nomi HTML corrispondono già ai nomi delle proprietà dell'API DOM.

Attributo HTMLProp JSXNote
classclassNameReserved word in JavaScript
forhtmlForReserved word in JavaScript
tabindextabIndexcamelCase convention
readonlyreadOnlycamelCase convention
maxlengthmaxLengthcamelCase convention
minlengthminLengthcamelCase convention
cellpaddingcellPaddingcamelCase convention
cellspacingcellSpacingcamelCase convention
rowspanrowSpancamelCase convention
colspancolSpancamelCase convention
enctypeencTypecamelCase convention
autocompleteautoCompletecamelCase convention
autofocusautoFocuscamelCase convention
autoplayautoPlaycamelCase convention
contenteditablecontentEditablecamelCase convention
crossorigincrossOrigincamelCase convention
novalidatenoValidatecamelCase convention
allowfullscreenallowFullScreencamelCase convention
spellcheckspellCheckcamelCase convention
http-equivhttpEquivHyphen removed, camelCase
onclickonClickEvent handler camelCase
onchangeonChangeEvent handler camelCase
onsubmitonSubmitEvent handler camelCase

Conversione degli stili inline: HTML vs JSX

Gli stili inline sono la parte più soggetta a errori nella conversione da HTML a JSX perché cambiano sia il formato del valore sia i nomi delle proprietà:

Attributo style in HTML
Una stringa di dichiarazioni CSS separate da punto e virgola. I nomi delle proprietà usano il kebab-case (background-color, font-size, border-radius). I valori sono sempre stringhe, inclusi i valori numerici con unità.
<div style="background-color: #fff;
  font-size: 14px;
  margin-top: 10px;">
Prop style in JSX
Un oggetto JavaScript con nomi di proprietà in camelCase (backgroundColor, fontSize, borderRadius). I valori stringa sono tra virgolette. I valori numerici senza unità (lineHeight, opacity, zIndex, flexGrow) possono essere numeri semplici.
<div style={{
  backgroundColor: '#fff',
  fontSize: '14px',
  marginTop: 10
}}>

Esempi di codice

Questi esempi mostrano come convertire HTML in JSX a livello di codice in diversi linguaggi e ambienti. Ognuno copre la rinomina degli attributi, la conversione degli stili e la gestione dei tag autochiudenti.

JavaScript (DOM API)
// Simple attribute conversion using string replacement
function htmlToJsx(html) {
  return html
    .replace(/\bclass=/g, 'className=')
    .replace(/\bfor=/g, 'htmlFor=')
    .replace(/\btabindex=/g, 'tabIndex=')
    .replace(/<!--([\s\S]*?)-->/g, '{/*$1*/}')
}

htmlToJsx('<div class="box" tabindex="0"><!-- note --></div>')
// → '<div className="box" tabIndex="0">{/* note */}</div>'
JavaScript (html-react-parser)
import parse from 'html-react-parser'

// Parse HTML string into React elements (handles all JSX rules)
const element = parse('<div class="card"><img src="photo.jpg" alt="Photo"></div>')
// Returns: React.createElement('div', { className: 'card' },
//   React.createElement('img', { src: 'photo.jpg', alt: 'Photo' }))

// With custom element replacement
const options = {
  replace(domNode) {
    if (domNode.name === 'img') {
      return <OptimizedImage src={domNode.attribs.src} alt={domNode.attribs.alt} />
    }
  }
}
const custom = parse('<img src="photo.jpg" alt="Photo">', options)
Python (BeautifulSoup)
from bs4 import BeautifulSoup
import re

ATTR_MAP = {
    'class': 'className', 'for': 'htmlFor',
    'tabindex': 'tabIndex', 'readonly': 'readOnly',
    'maxlength': 'maxLength', 'autocomplete': 'autoComplete',
}

def html_to_jsx(html: str) -> str:
    """Convert HTML attribute names to JSX equivalents."""
    for html_attr, jsx_attr in ATTR_MAP.items():
        html = re.sub(rf'\b{html_attr}=', f'{jsx_attr}=', html)
    # Convert HTML comments to JSX comments
    html = re.sub(r'<!--(.*?)-->', r'{/*\1*/}', html)
    return html

print(html_to_jsx('<label for="email" class="field">Email</label>'))
# → '<label htmlFor="email" className="field">Email</label>'
Go
package main

import (
    "fmt"
    "strings"
)

var attrMap = map[string]string{
    "class=":    "className=",
    "for=":      "htmlFor=",
    "tabindex=": "tabIndex=",
    "readonly":  "readOnly",
}

func htmlToJSX(html string) string {
    result := html
    for old, new := range attrMap {
        result = strings.ReplaceAll(result, old, new)
    }
    // Convert comments
    result = strings.ReplaceAll(result, "<!--", "{/*")
    result = strings.ReplaceAll(result, "-->", "*/}")
    return result
}

func main() {
    html := `<div class="wrapper"><input readonly tabindex="1"></div>`
    fmt.Println(htmlToJSX(html))
    // → <div className="wrapper"><input readOnly tabIndex="1"></div>
}

Domande frequenti

Qual è la differenza tra HTML e JSX?
JSX è un'estensione sintattica di JavaScript usata da React. Ha un aspetto simile all'HTML ma viene compilato in chiamate a React.createElement(). Le differenze principali sono: class diventa className, for diventa htmlFor, gli stili inline usano oggetti JavaScript invece di stringhe CSS, e tutti i tag devono essere chiusi esplicitamente (inclusi gli elementi vuoti come <img />). JSX permette anche di incorporare espressioni JavaScript tra parentesi graffe.
Perché React usa className invece di class?
La parola 'class' è una parola chiave riservata in JavaScript. Poiché JSX viene compilato in chiamate a funzioni JavaScript, usare 'class' come nome di prop causerebbe un errore di sintassi. React ha scelto 'className' perché corrisponde al nome della proprietà dell'API DOM (element.className) che JavaScript usa già per leggere e impostare le classi CSS sugli elementi DOM.
Devo convertire HTML in JSX manualmente?
No. Puoi usare un convertitore online come questo strumento, oppure automatizzare con librerie come htmltojsx (npm) o html-react-parser. Per migrazioni su larga scala, strumenti come codemod o jscodeshift possono trasformare interi codebase. La conversione manuale è pratica solo per piccoli frammenti di poche righe.
Come vengono gestiti gli stili inline in JSX?
In JSX, l'attributo style accetta un oggetto JavaScript, non una stringa CSS. I nomi delle proprietà usano il camelCase (backgroundColor invece di background-color). I valori sono stringhe per impostazione predefinita, ma alcune proprietà numeriche come lineHeight, opacity e zIndex accettano numeri semplici senza unità. Le doppie parentesi graffe in style={{ color: 'red' }} non sono una sintassi speciale: le parentesi esterne sono un'espressione JSX e quelle interne sono un oggetto JavaScript letterale.
Posso usare i commenti HTML in JSX?
htmlToJsxContent.a5
Quali attributi HTML rimangono invariati in JSX?
La maggior parte degli attributi HTML mantiene il nome originale in JSX. Esempi comuni includono id, src, href, alt, type, name, value, placeholder, disabled, hidden e tutti gli attributi data-* e aria-*. Solo gli attributi il cui nome HTML differisce dal nome della proprietà dell'API DOM devono cambiare: class in className, for in htmlFor, e gli attributi composti da più parole che passano da minuscolo a camelCase.
dangerouslySetInnerHTML equivale a convertire HTML in JSX?
No. dangerouslySetInnerHTML aggira il rendering di React e inietta HTML grezzo direttamente nel DOM, il che comporta rischi di vulnerabilità XSS. Convertire HTML in JSX produce elementi React effettivi che passano attraverso il DOM virtuale di React e sono sicuri per impostazione predefinita. Usa la conversione HTML in JSX per markup statico che controlli. Usa dangerouslySetInnerHTML solo quando devi renderizzare HTML attendibile da una sorgente esterna che non può essere convertita in JSX.