Entrada
Preparando seu ambiente de trabalho…
Como usar
- Cole um fragmento HTML, abra um arquivo UTF-8 ou carregue Exemplo.
- Escolha a indentação e selecione Converter para JSX.
- Revise o markup gerado e copie ou baixe a saída.
Levar markup HTML para React
HTML copiado de um template geralmente precisa de ajustes antes de entrar em JSX. Diferenças comuns incluem className, htmlFor, elementos autocontidos e a forma dos estilos inline.
O conversor trata a estrutura do markup. Estado, callbacks de eventos e lógica da aplicação ainda precisam ser escritos onde o JSX será usado.
Conversão de atributos e estilos
Os atributos HTML são mapeados para React, incluindo className e htmlFor. Nomes comuns de SVG seguem a capitalização usada pelo React.
CSS inline vira um objeto style, e a saída é formatada como JSX. Texto literal é escapado conforme necessário, sem ser tratado como expressão JavaScript.
<label class="field" for="email">Email<input id="email"></label><label className="field" htmlFor="email">Email<input id="email" /></label>Exemplo abreviado da conversão de atributos. A saída completa é formatada e inclui um fragment de envolvimento.
Estrutura e comportamento
O fragmento HTML é analisado antes da conversão. A saída usa um fragment de envolvimento e sintaxe de autofechamento quando apropriado.
Elementos script e atributos de eventos inline são removidos. Isso não converte o comportamento em callbacks React nem torna toda URL ou estilo restante adequado para a aplicação.
Integrar o resultado
Cole o JSX na expressão render ou return de um componente. Reconecte o comportamento manualmente e confira estilos inline, sobretudo fallbacks repetidos e !important, que um objeto style não representa por completo.
Entrada de texto de até 1 MiB. Transformações CSS e HTML são executadas em um worker com limite de 30 segundos. As ferramentas de cores usam sRGB; os estilos gerados são prévias e exigem testes no seu próprio layout.
Perguntas frequentes
Isso cria um componente React completo?
Não. A saída é markup JSX. Acrescente o componente, imports, dados e comportamento no projeto.
O que acontece com scripts e onclick?
Elementos script e atributos de eventos inline são removidos. Seu código não é executado nem traduzido para handlers React.
Por que as chaves no texto continuam como texto?
A entrada é analisada como HTML. Chaves literais são escapadas para JSX, não tratadas como uma expressão a avaliar.
Os estilos inline são convertidos exatamente?
Declarações comuns viram propriedades React. Fallbacks repetidos e !important nem sempre podem ser representados fielmente por um objeto JavaScript.
Posso converter SVG?
Atributos comuns de SVG são mapeados para nomes React. Teste IDs, referências e atributos específicos da aplicação no componente.