Converter HTML para JSX

Converter HTML para JSX: para que serve

Cole o HTML e a conversão é feita na hora: class e for viram className e htmlFor, atributos como tabindex, maxlength e autocomplete vão para camelCase, style vira objeto, atributos booleanos ficam sem valor, tags vazias ganham a barra e comentários viram {/* */}. Eventos em linha viram funções com o código antigo em comentário.

Atributos data- e aria- ficam como estão, e atributos de SVG também são convertidos. Marque gerar componente para receber a função pronta com o nome escolhido.

Como usar

1. Cole o HTML.
2. Marque gerar componente se quiser a função pronta.
3. Copie o JSX para o seu projeto React.

Quando usar

• Levar modelos HTML para projetos React e Next.js.
• Converter ícones SVG para componentes.
• Adaptar trechos copiados de outros sites.

Perguntas frequentes

O que muda do HTML para o JSX?

class vira className e for vira htmlFor; atributos com hífen ou de eventos ficam em camelCase (tabindex vira tabIndex, onclick vira onClick); style vira um objeto ({{ marginTop: '8px' }}); tags sem fechamento (img, br, input) ganham a barra; comentários viram {/* */}.

Os atributos data- e aria- mudam?

Não. data-* e aria-* continuam iguais no JSX, com hífen.

E o JavaScript dentro de onclick?

O conteúdo dos eventos em linha é convertido para comentário, porque no React o evento recebe uma função. Reescreva a ação como uma função do componente.

SVG funciona?

Sim. Atributos de SVG como stroke-width, fill-rule e xlink:href viram strokeWidth, fillRule e xlinkHref.

É grátis mesmo?

Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.

Ferramentas parecidas