Neste artigo
Por que HTML precisa de conversão para React
JSX parece HTML mas segue regras de sintaxe JavaScript. React usa JSX para descrever a estrutura da interface, e embora se pareça com HTML, vários atributos e padrões diferem. Colar HTML bruto em um componente React geralmente resulta em erros de compilação ou comportamento inesperado.
As diferenças mais comuns incluem nomeação de atributos (class vira className, for vira htmlFor), sintaxe de estilos inline (strings viram objetos com propriedades em camelCase), tags auto-fechantes (todo elemento vazio deve se auto-fechar) e nomeação de handlers de evento (onclick vira onClick). Um conversor automatiza essas transformações tediosas.
O que é convertido
O conversor HTML para JSX do CheckTown lida com todas as transformações padrão entre sintaxe HTML e JSX.
- Renomeação de atributos — class para className, for para htmlFor, tabindex para tabIndex, e todos os outros nomes de atributos específicos do React
- Análise de estilos — atributos style inline com strings CSS são convertidos em objetos JavaScript com nomes de propriedades em camelCase e valores de string
- Tags auto-fechantes — elementos como <img>, <br>, <hr> e <input> são convertidos para <img />, <br />, <hr />, <input />
- Atributos booleanos — checked, disabled, readonly são convertidos para seus equivalentes JSX
Experimente gratuitamente — sem cadastro
Converter HTML para JSX →Armadilhas comuns ao converter HTML para JSX
Mesmo com conversão automatizada, existem padrões que requerem atenção manual após a transformação inicial.
- Comentários HTML são convertidos para a sintaxe de comentários JSX — verifique se comentários aninhados não causam problemas
- Atributos SVG como stroke-width e fill-opacity usam camelCase em JSX (strokeWidth, fillOpacity) — verifique conteúdo com muito SVG
- Manipuladores de eventos inline com strings JavaScript (onclick="alert()") precisam de conversão manual para manipuladores JSX com arrow functions
- Entidades HTML podem precisar de conversão para caracteres Unicode ou expressões JSX
Perguntas frequentes
A conversão é 100% precisa para todo HTML?
O conversor lida com precisão com o mapeamento padrão de atributos HTML-JSX, parsing de estilos e tags auto-fechantes. No entanto, padrões complexos como handlers de evento JavaScript inline, scripts embutidos ou atributos não padrão podem exigir ajustes manuais após a conversão.
Posso converter templates HTML com dados dinâmicos?
O conversor trabalha com marcação HTML estática. Sintaxe de template de outros frameworks (como *ngFor do Angular ou v-for do Vue) será preservada mas não funcionará no React. Você precisa converter manualmente diretivas de template para expressões JSX.
O conversor lida com dangerouslySetInnerHTML?
Não. O conversor transforma estrutura HTML em estrutura JSX. Se você precisar renderizar strings HTML brutas dentro do React, usaria dangerouslySetInnerHTML manualmente. O conversor é projetado para migração estrutural, não para injeção HTML em tempo de execução.