Conversor de HTML para JSX | Cole HTML e receba JSX pronto para React
Colar HTML puro dentro de um componente React quebra a compilação: class e for são palavras reservadas, os estilos inline são strings em vez de objetos e as tags vazias não se fecham sozinhas. Este conversor reescreve tudo isso em uma única passagem para você levar a marcação para JSX sem corrigir cada erro à mão.
💡 Sobre esta ferramenta
Quem migra uma landing page estática, um trecho exportado de uma ferramenta de design ou um template antigo para React esbarra na mesma parede. JSX se parece com HTML, mas é compilado para JavaScript, então os nomes de atributo que o JavaScript já usa precisam mudar: class vira className e for vira htmlFor. Atributos de evento como onclick precisam ficar em camelCase (onClick), o estilo inline style="color: red" tem que assumir a forma de objeto style={{color: 'red'}} e elementos como <img> ou <br> exigem um /> explícito ou o analisador do React falha.
Esta ferramenta aplica cinco transformações ao que você colar: renomeia os atributos reservados, deixa os manipuladores de evento em camelCase, converte as strings de estilo em objetos, autofecha as tags vazias e reescreve os comentários <!-- --> na sintaxe JSX {/* */}. Copie a saída e cole direto no seu componente.
🧐 Perguntas frequentes
Quais atributos além de class são convertidos?
for para htmlFor, tabindex para tabIndex, maxlength para maxLength, colspan para colSpan, readonly para readOnly e os demais atributos em camelCase que o React espera.
Como os estilos inline são tratados?
Uma string como style="color: red; line-height: 1.5" vira style={{color: 'red', lineHeight: 1.5}}: propriedades CSS com hífen são camelCaseadas, números puros ficam sem aspas e o restante é envolvido como string (um valor com unidade como 14px vira a string '14px').
Ele fecha tags vazias como <input> e <img>?
Sim. Ele detecta os elementos vazios do HTML (img, br, input, hr, meta, link, entre outros) e acrescenta />.
O React vai reclamar se houver vários elementos raiz?
Esta ferramenta só transforma a sintaxe. Se o seu trecho retornar vários elementos irmãos, envolva-os em um fragmento (<>...</>) depois de colar; esse ajuste fica por sua conta.
O que acontece com os comentários?
<!-- nota --> é reescrito na forma JSX válida {/* nota */}.
📚 Por que JSX não pode ser apenas HTML
JSX se parece enganosamente com HTML, mas é açúcar sintático sobre chamadas de função JavaScript. Um empacotador como o Babel compila cada elemento em uma chamada a React.createElement no momento da construção, e é por isso que o navegador nunca vê o JSX diretamente. class fica de fora porque o JavaScript a reserva para declarar classes, e for colide com o laço for. Existem dezenas desses atributos renomeados, e esquecer um único deles gera um aviso confuso em vez de um erro claro, então automatizar as substituições mecânicas elimina uma fonte comum de atrito durante a migração.