Conversor HTML para JSX
HTML → JSX// JSX output appears here
Por que converter HTML para JSX?
Ao migrar templates HTML existentes para o React, ou ao copiar mockups para componentes, você precisa converter manualmente class para className, for para htmlFor, e transformar estilos inline de strings para objetos JavaScript. Nosso conversor automatiza todas essas transformações instantaneamente, processando todo o mapeamento de atributos HTML→JSX para que você possa se concentrar na lógica do componente em vez da conversão de sintaxe.
Conversão de atributos
Converte class→className, for→htmlFor, tabindex→tabIndex, maxlength→maxLength e muito mais
Objetos de estilo inline
Transforma style="color: red;" para style={{color: 'red'}} — notação de objeto JS válida para React
Tags autocontidas
Adiciona a barra de fechamento a elementos void: <br> se torna <br />, <input> se torna <input />
Como converter HTML para JSX
Cole o HTML
Cole seu template HTML, exportação do Figma ou qualquer fragmento HTML no painel esquerdo
Conversão automática
O conversor transforma instantaneamente todos os atributos, estilos e elementos void para sintaxe JSX
Copie o JSX
Copie o JSX convertido e cole no bloco render/return do seu componente React
Casos de uso do conversor HTML para JSX
Migração para React
Migre páginas ou templates HTML existentes para componentes React sem conversão manual de atributos
Bootstrap para React
Converta componentes HTML do Bootstrap para JSX para uso com react-bootstrap ou componentes estilizados
Templates de e-mail
Converta templates HTML de e-mail para JSX para renderização com React Email ou bibliotecas similares
CMS para React
Converta templates HTML do WordPress ou CMS tradicionais em estrutura de componente React
Dicas de HTML para JSX
✓ class → className é essencial
class é uma palavra-chave reservada do JavaScript. React requer className para classes CSS. Esquecer isso causa avisos do React e pode gerar comportamento inesperado.
✓ for → htmlFor nas labels
O atributo for em <label> se torna htmlFor no JSX. Esquecer isso quebra a acessibilidade — leitores de tela dependem da associação label-campo.
✓ Atualize handlers de eventos após a conversão
HTML onclick='...' não é convertido automaticamente para JSX. Substitua manualmente os handlers de eventos inline pelo padrão React onClick={handler} após a conversão.
✓ Comentários HTML se tornam comentários JSX
<!-- comentário --> é convertido para {/* comentário */} no JSX. JSX não suporta a sintaxe de comentário HTML dentro do markup JSX.
❓ Perguntas frequentes
Por que React usa className em vez de class?
class é uma palavra-chave reservada em JavaScript (usada para classes ES6). Como JSX é JavaScript, usar class criaria um conflito de sintaxe. React escolheu className para evitar ambiguidade com a palavra-chave class do JavaScript.
Esta ferramenta processa handlers de eventos React?
Não — handlers de eventos HTML como onclick e onsubmit não são convertidos automaticamente para onClick e onSubmit do React porque seus valores (strings JavaScript em HTML) precisam referenciar funções/estado de componentes React. Esses devem ser atualizados manualmente.
Qual é a diferença entre HTML e JSX?
JSX é uma extensão de sintaxe JavaScript que parece HTML mas compila para chamadas React.createElement(). Diferenças: todos os atributos em camelCase, class é className, for é htmlFor, elementos void precisam ser autocontidos, e expressões usam {} em vez de strings.
Por que elementos void precisam ser autocontidos no JSX?
JSX é analisado pelo Babel como sintaxe tipo XML, que exige que todos os elementos sejam corretamente fechados. Elementos void como <br>, <img>, <input> não têm filhos, então devem ser autocontidos com /> em vez de deixar uma tag não fechada.