Converter HTML para JSX React Online
Transforme HTML em JSX válido para React e Next.js. Gratuito, no seu navegador, sem upload de arquivos.
Por que usar este conversor
HTML para JSX sem erros de sintaxe
Privacidade total
A conversão acontece completamente no seu navegador com JavaScript puro. Seu código nunca sai do seu dispositivo.
Transformações completas
Aplicamos todas as conversões necessárias: atributos, estilos, eventos, tags void e comentários. Sem etapas manuais.
Compatível com React e Next.js
O JSX resultante é válido para React 16+, Next.js 12+ e qualquer framework baseado em React como Gatsby ou Remix.
Instantâneo
A conversão acontece em milissegundos sem chamadas a servidores. Cole e copie, sem esperar.
Como funciona
Três passos, sem complicação
Cole seu HTML
Cole o código HTML que você quer converter no campo de entrada. Pode ser documentos HTML completos ou fragmentos.
Conversão automática
O conversor aplica todas as transformações necessárias: class para className, for para htmlFor, estilos inline para objeto JS e tags void com auto-fechamento.
Copie o JSX resultante
Copie o JSX pronto para usar diretamente nos seus componentes React ou Next.js.
Perguntas frequentes
Ficou com dúvidas?
As principais transformações são: class para className (class é uma palavra reservada em JS), for para htmlFor (for também é reservada), estilos inline convertidos de string CSS para objeto JavaScript com propriedades em camelCase, tags void com auto-fechamento (br para br /, img para img /, input para input /) e comentários HTML convertidos para comentários JSX no formato de bloco entre chaves.
React e Next.js exigem JSX porque os componentes são escritos em JavaScript. JSX é um açúcar sintático sobre React.createElement(). Quando compilado pelo Babel ou pelo compilador do Next.js, cada tag JSX é convertida em chamadas de funções JavaScript, tornando impossível usar palavras reservadas do JS como class ou for como atributos.
Em HTML: style com cor vermelha e fonte de 16 pixels. Em JSX: o mesmo como objeto JavaScript com as propriedades em camelCase. Propriedades CSS em kebab-case são convertidas para camelCase (font-size vira fontSize, background-color vira backgroundColor) e os valores são convertidos para strings ou números JavaScript.
Os event handlers em HTML usam letras minúsculas (onclick, onchange, onsubmit). No JSX eles são convertidos para camelCase: onclick vira onClick, onchange vira onChange, onsubmit vira onSubmit, onmouseover vira onMouseOver. O valor muda de uma string de código JS para uma referência a uma função.
Elementos void em HTML são tags sem conteúdo nem tag de fechamento: br, img, input, hr, meta, link. No JSX, o XML exige que todos os elementos sejam explicitamente fechados, então devem ser escritos com barra antes do fechamento. Sem o auto-fechamento, o compilador JSX lançará um erro de sintaxe.
História do JSX no React (Facebook 2013), diferenças entre HTML e JSX, migração de templates HTML para componentes React e fluxo de trabalho de desenvolvimento Next.js
O JSX (JavaScript XML) foi introduzido pelo Facebook em 2013 junto com o React como uma extensão de sintaxe do JavaScript que permite escrever estruturas semelhantes ao HTML diretamente no código JS. Embora o React possa ser usado opcionalmente sem JSX por meio de chamadas diretas a React.createElement(), o JSX rapidamente se tornou o padrão de fato porque melhora enormemente a legibilidade do código de componentes. O Babel e, posteriormente, o compilador SWC do Next.js transformam o JSX em JavaScript puro durante o processo de build.
As diferenças entre HTML e JSX resultam do fato de o JSX operar no contexto do JavaScript. A mais importante: class é uma palavra reservada em JavaScript (para definir classes ES6), então o React escolheu className como atributo equivalente. Da mesma forma, for é uma palavra reservada (para loops), então o atributo do label é escrito como htmlFor. Estilos inline exigem um objeto JavaScript em vez de uma string CSS porque é mais seguro em contexto JS e permite interpolação de variáveis. As propriedades CSS são escritas em camelCase porque o hífen é o operador de subtração em JavaScript.
Migrar templates HTML estáticos para componentes React é um caso de uso frequente: designers ou desenvolvedores que trabalham com HTML puro precisam integrar seus designs em projetos Next.js ou Create React App. O processo manual é tedioso e propenso a erros, especialmente com HTML complexo contendo muitos atributos de estilo, event handlers e elementos void. Ferramentas automáticas de conversão de HTML para JSX aceleram significativamente esse processo de migração em projetos de qualquer escala.