Conversor de HTML para JSX: grátis, roda no seu navegador | We.Inc
Cole HTML e receba JSX válido: class vira className, for vira htmlFor, strings de style viram objetos, tags vazias são fechadas, além de comentários, eventos e um wrapper de componente. Nada é enviado.
Conversor de HTML para JSX
Cole o HTML à esquerda e este conversor escreve o JSX à direita enquanto você digita: class vira className, for vira htmlFor, estilos inline viram objetos em camelCase, tags vazias como img e input são autofechadas, comentários vão para dentro de chaves e vários elementos de nível superior ganham um fragment. A conversão roda só no seu navegador.
O que muda entre HTML e JSX
HTML
JSX
Por quê
class="box"
className="box"
class é uma palavra reservada em JavaScript
for="email"
htmlFor="email"
for também é uma palavra reservada
style="font-weight: bold"
style={{ fontWeight: 'bold' }}
style recebe um objeto com chaves em camelCase
<img src="a.png">
<img src="a.png" />
Toda tag precisa ser fechada
onclick="go()"
onClick={go}
Eventos são em camelCase e recebem uma função
data-id="7", aria-label="Close"
data- e aria- mantêm os hifens
Copiar um trecho de um template, de um editor de e-mail ou de um pacote de ícones para um componente React costuma quebrar por causa de uma dúzia de pequenas diferenças. Esta ferramenta aplica as regras que o React documenta para JSX, explica cada mudança que fez e pode envolver o resultado em um componente com nome, pronto para colar.
Cole ou digite HTML na caixa de entrada. A saída em JSX é atualizada a cada tecla.
Se quiser, digite um nome de componente para envolver a saída em um function component exportado.
Leia a lista de mudanças abaixo da saída; cada nota explica uma reescrita feita pelo conversor.
Copie o JSX para o arquivo do seu componente e troque os handlers de evento vazios por funções de verdade.
Código onclick inline não pode rodar como JSX. O conversor o mantém como comentário dentro de um handler vazio para você mover para uma função.
Campos de formulário com value viram defaultValue, o que os mantém editáveis. Troque para value com onChange se quiser um input controlado.
Ícones SVG muitas vezes têm stroke-width e fill-rule; eles são renomeados automaticamente para strokeWidth e fillRule.
O React adiciona px a números em um objeto style, mas este conversor mantém cada valor como a string original para ser exato.
Perguntas frequentes
Por que o React usa className em vez de class?
O JSX é compilado para JavaScript, onde class é uma palavra reservada. Por isso o React chama a prop de className. O mesmo raciocínio transforma o atributo for do label em htmlFor.
Atributos data- e aria- mudam no JSX?
Não. A documentação do React observa que, por razões históricas, os atributos aria-* e data-* são escritos exatamente como no HTML, com hifens. A maioria dos outros atributos com várias palavras vira camelCase.
Como escrevo estilos inline em JSX?
Passe um objeto para style com nomes de propriedades em camelCase, por exemplo style={{ fontWeight: 'bold', marginTop: 8 }}. O React adiciona px a números simples na maioria das propriedades. As chaves externas abrem uma expressão JavaScript e as internas são o objeto.
Por que recebo um erro sobre múltiplos elementos raiz?
Um componente só pode retornar um elemento. Envolva os elementos irmãos em um elemento pai ou em um fragment vazio, escrito <> e </>. O conversor faz isso por você quando o HTML tem mais de um nó de nível superior.
O meu HTML é enviado para algum lugar?
Não. A conversão é JavaScript puro rodando nesta página. Nada do que você cola é enviado ou armazenado.
As três regras por trás de toda conversão
A própria introdução do React ao JSX resume as diferenças em três regras: retornar um único elemento raiz, fechar todas as tags e escrever a maioria dos nomes de atributos em camelCase. Quase tudo o que o conversor faz é uma dessas três.
As exceções são as palavras reservadas e as famílias com hífen. class e for são renomeados porque o JavaScript os reserva, enquanto os atributos aria- e data- mantêm a grafia do HTML.
O que ainda precisa de uma pessoa
Scripts inline e strings de handlers de evento são código, não marcação, então precisam ser reescritos como funções no seu componente. O conversor os sinaliza em vez de tentar adivinhar.
Blocos repetidos, como itens de lista, costumam ficar melhores como um array mapeado para JSX. Depois de converter, procure elementos irmãos copiados e colados e transforme-os em dados mais uma chamada a map.
Renomeações de atributos que o conversor aplica
Atributo HTML para prop JSX
HTML
JSX
className
htmlFor
tabIndex
readOnly
maxLength
colspan / rowspan
colSpan / rowSpan
autoComplete
srcSet
crossOrigin
value em input
defaultValue
checked em input
defaultChecked
strokeWidth
fillRule
viewBox
Handlers de evento inline como onclick viraram handlers vazios em camelCase; mova o código para uma função.
value em um campo de formulário virou defaultValue, então o campo continua editável sem um handler onChange.
checked virou defaultChecked pelo mesmo motivo.
selected em um option foi removido; defina defaultValue no select.
O doctype foi removido; JSX não tem doctype.
A entrada tinha mais de um elemento de nível superior, então foi envolvida em um fragment.
Conversor
O exemplo abaixo é convertido ao vivo; troque-o pelo seu próprio HTML.
Nome do componente (opcional)
Copiar JSX
Mudanças feitas
Só foram necessárias as renomeações padrão.
O conteúdo de <{tag}> foi envolvido em um template literal para que as chaves fiquem literais.