A conversão de HTML para JSX é o processo de transformar marcação HTML padrão em sintaxe JSX que os componentes React podem renderizar. JSX é semelhante ao HTML, mas segue as convenções e regras de nomenclatura do JavaScript. Atributos como class se tornam className, for se torna htmlFor, e strings de estilo inline são substituídas por objetos JavaScript. Essas mudanças são necessárias porque JSX compila para chamadas React.createElement(), onde os nomes dos atributos devem corresponder aos nomes de propriedade da API do DOM, e não aos nomes de atributos HTML.
O mapeamento entre atributos HTML e props JSX é definido pela documentação de elementos DOM do React. O React usa camelCase para atributos compostos (tabindex vira tabIndex, maxlength vira maxLength) porque identificadores JavaScript não podem conter hifens. Tags de fechamento automático como <img>, <br> e <input> precisam incluir uma barra no final em JSX (<img />) pois JSX segue as regras XML, onde toda tag deve ser fechada explicitamente.
htmlToJsxContent.whatBody3
Por que usar um conversor de HTML para JSX?
Renomear atributos manualmente e reescrever strings de estilo em dezenas de elementos HTML é lento e sujeito a erros. Um conversor aplica todas as transformações de uma vez, permitindo que você cole HTML de qualquer fonte e obtenha JSX válido em segundos.
⚡
Conversão instantânea
Cole qualquer trecho HTML e obtenha a saída JSX imediatamente. O conversor trata class, for, style, manipuladores de evento, atributos booleanos e tags de fechamento automático em uma única passagem.
🔒
Processamento com privacidade
Toda a conversão é executada localmente no seu navegador. Seu HTML nunca sai da página, então você pode converter com segurança marcação contendo código interno, endpoints de API ou conteúdo sensível.
📋
Sem conta nem configuração
Abra a página e comece a converter. Nenhum login necessário, nenhum pacote npm para instalar, nenhuma etapa de build para configurar. Funciona em qualquer dispositivo com um navegador moderno.
🔧
Cobertura completa de atributos
Converte todos os mapeamentos padrão de atributos HTML para JSX, incluindo className, htmlFor, tabIndex, readOnly, autoComplete e mais de 20 outros. Também trata a renomeação de manipuladores de evento como onclick para onClick.
Casos de uso do conversor HTML para JSX
Desenvolvedor frontend: migrando templates
Ao mover uma página ou componente HTML existente para um projeto React, cole a marcação no conversor em vez de procurar manualmente atributos class e for em centenas de linhas.
Engenheiro backend: incorporando e-mails HTML
Templates de e-mail são criados em HTML puro. Ao renderizá-los dentro de um painel administrativo React ou componente de preview, converta o HTML para JSX válido para evitar erros de sintaxe em className e style.
DevOps: convertendo widgets de dashboard
Dashboards de monitoramento frequentemente usam trechos HTML para widgets personalizados. Converta-os para JSX ao integrá-los em uma plataforma de ferramentas internas baseada em React, como Retool ou um painel administrativo personalizado.
QA: reproduzindo relatórios de bug
Quando um relatório de bug inclui saída HTML bruta, converta-a para JSX para renderizá-la rapidamente dentro de um harness de testes React ou story do Storybook para inspeção visual e depuração.
Designer: prototipando a partir de mockups HTML
Ferramentas de design como o Figma exportam HTML/CSS. Converta a marcação exportada para JSX para inserí-la diretamente em um protótipo React sem a necessidade de limpar atributos manualmente.
Estudante: aprendendo a sintaxe do React
Compare a entrada HTML com a saída JSX lado a lado para entender quais atributos mudam e por quê. Ver a transformação torna as convenções de nomenclatura do React mais fáceis de memorizar do que ler a documentação sozinha.
Referência de mapeamento de atributos HTML para JSX
A tabela abaixo lista os atributos HTML que mudam quando convertidos para JSX. Atributos não listados aqui (id, src, href, alt, placeholder, etc.) permanecem inalterados porque seus nomes HTML já correspondem aos nomes de propriedade da API do DOM.
Atributo HTML
Prop JSX
Observações
class
className
Reserved word in JavaScript
for
htmlFor
Reserved word in JavaScript
tabindex
tabIndex
camelCase convention
readonly
readOnly
camelCase convention
maxlength
maxLength
camelCase convention
minlength
minLength
camelCase convention
cellpadding
cellPadding
camelCase convention
cellspacing
cellSpacing
camelCase convention
rowspan
rowSpan
camelCase convention
colspan
colSpan
camelCase convention
enctype
encType
camelCase convention
autocomplete
autoComplete
camelCase convention
autofocus
autoFocus
camelCase convention
autoplay
autoPlay
camelCase convention
contenteditable
contentEditable
camelCase convention
crossorigin
crossOrigin
camelCase convention
novalidate
noValidate
camelCase convention
allowfullscreen
allowFullScreen
camelCase convention
spellcheck
spellCheck
camelCase convention
http-equiv
httpEquiv
Hyphen removed, camelCase
onclick
onClick
Event handler camelCase
onchange
onChange
Event handler camelCase
onsubmit
onSubmit
Event handler camelCase
Conversão de estilo inline: HTML vs JSX
Estilos inline são a parte mais propensa a erros na conversão de HTML para JSX, pois tanto o formato do valor quanto os nomes das propriedades mudam:
Atributo style em HTML
Uma string de declarações CSS separadas por ponto e vírgula. Os nomes de propriedade usam kebab-case (background-color, font-size, border-radius). Os valores são sempre strings, incluindo valores numéricos com unidades.
Um objeto JavaScript com nomes de propriedade em camelCase (backgroundColor, fontSize, borderRadius). Valores de string são colocados entre aspas. Valores numéricos sem unidade (lineHeight, opacity, zIndex, flexGrow) podem ser números simples.
Estes exemplos mostram como converter HTML para JSX de forma programática em diferentes linguagens e ambientes. Cada um aborda a renomeação de atributos, conversão de estilos e tratamento de tags de fechamento automático.
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>
}
Perguntas frequentes
Qual é a diferença entre HTML e JSX?
JSX é uma extensão de sintaxe para JavaScript usada pelo React. É parecido com HTML, mas compila para chamadas React.createElement(). As principais diferenças são: class vira className, for vira htmlFor, estilos inline usam objetos JavaScript em vez de strings CSS, e todas as tags devem ser fechadas explicitamente (incluindo elementos vazios como <img />). JSX também permite embutir expressões JavaScript dentro de chaves.
Por que o React usa className em vez de class?
A palavra 'class' é uma palavra reservada em JavaScript. Como JSX compila para chamadas de função JavaScript, usar 'class' como nome de prop causaria um erro de sintaxe. O React escolheu 'className' porque corresponde ao nome da propriedade da API do DOM (element.className) que o JavaScript já usa para ler e definir classes CSS em elementos do DOM.
Preciso converter HTML para JSX manualmente?
Não. Você pode usar um conversor online como esta ferramenta, ou automatizar com bibliotecas como htmltojsx (npm) ou html-react-parser. Para migrações em larga escala, ferramentas como codemod ou jscodeshift podem transformar bases de código inteiras. A conversão manual só é prática para pequenos trechos de algumas linhas.
Como os estilos inline são tratados em JSX?
Em JSX, o atributo style aceita um objeto JavaScript, não uma string CSS. Os nomes de propriedade usam camelCase (backgroundColor em vez de background-color). Os valores são strings por padrão, mas certas propriedades numéricas como lineHeight, opacity e zIndex aceitam números simples sem unidades. As chaves duplas em style={{ color: 'red' }} não são sintaxe especial: as chaves externas são uma expressão JSX e as chaves internas são um objeto literal JavaScript.
Posso usar comentários HTML em JSX?
Não. Comentários HTML (<!-- comentário -->) não são válidos em JSX. Use comentários de bloco JavaScript dentro de chaves: {/* comentário */}. Este conversor trata a transformação automaticamente. Comentários JSX devem estar dentro de um elemento pai, não no nível superior do retorno de um componente.
Quais atributos HTML permanecem iguais em JSX?
A maioria dos atributos HTML mantém seus nomes originais em JSX. Exemplos comuns incluem id, src, href, alt, type, name, value, placeholder, disabled, hidden e todos os atributos data-* e aria-*. Apenas atributos cujo nome HTML difere do nome de propriedade da API do DOM precisam mudar: class para className, for para htmlFor, e atributos compostos que passam de letras minúsculas para camelCase.
dangerouslySetInnerHTML é o mesmo que converter HTML para JSX?
Não. dangerouslySetInnerHTML ignora a renderização do React e injeta HTML bruto diretamente no DOM, o que representa risco de vulnerabilidades XSS. Converter HTML para JSX produz elementos React reais que passam pelo virtual DOM do React e são seguros por padrão. Use a conversão HTML para JSX para marcação estática que você controla. Use dangerouslySetInnerHTML apenas quando precisar renderizar HTML confiável de uma fonte externa que não pode ser convertida para JSX.