Conversor HTML para JSX
Cole HTML e obtenha JSX React limpo — class torna-se className, os atributos ficam em camelCase, as strings de style tornam-se objetos e as tags fecham-se automaticamente. Funciona inteiramente no seu navegador. Grátis.
Tudo funciona no seu navegador — o seu código nunca sai do seu dispositivo.
1
Sobre Conversor HTML para JSX
O Conversor de HTML para JSX transforma marcação HTML simples em JSX pronto para React em tempo real. Reescreve class para className e for para htmlFor, converte para camelCase os atributos kebab-case e SVG, transforma strings de estilo em linha em objetos de estilo JSX, e autofecha elementos vazios como img e br — exatamente as edições que teria de fazer manualmente.
Cole um excerto, uma secção de página completa, ou marcação exportada de uma ferramenta de design, e o painel JSX atualiza-se enquanto escreve, com realce de sintaxe. Um invólucro opcional transforma a saída num componente de função com nome, para que o resultado se integre diretamente num projeto React sem edição adicional.
O conversor é uma ferramenta de HTML para JSX totalmente do lado do cliente: a sua marcação é transformada por JavaScript no seu navegador e nunca sai do seu dispositivo, o que o torna seguro para usar com modelos proprietários e páginas internas.
Como usar Conversor HTML para JSX
- Cole o seu HTML no painel esquerdo, ou clique em Exemplo para carregar um exemplo.
- Observe o painel JSX atualizar-se instantaneamente enquanto escreve ou edita.
- Ative Envolver num componente e defina um nome de componente se quiser um componente de função pronto a usar.
- Clique em Copiar para obter o JSX, ou em Descarregar para o guardar como Component.jsx.
- Use Limpar para reiniciar ambos os painéis e converter outro excerto.