Conversor de HTML para JSX

Como Usar o Conversor de HTML para JSX

Cole seu codigo HTML na area de entrada e clique em Converter para JSX. A ferramenta transforma seu HTML em JSX valido, convertendo atributos, fechando elementos void, transformando estilos inline e tratando comentarios. O painel de estatisticas mostra quantas alteracoes foram feitas e os tamanhos em caracteres da entrada e da saida. Use o botao Copiar para copiar a saida JSX diretamente no arquivo do seu componente React.

Esta ferramenta e essencial para desenvolvedores React que estao migrando templates HTML existentes para componentes React, copiando trechos HTML de ferramentas de design ou convertendo prototipos HTML estaticos em aplicacoes React dinamicas. Em vez de alterar manualmente cada atributo e elemento, o conversor realiza todas as transformacoes automaticamente em um clique.

Entendendo JSX e Componentes React

JSX e a sintaxe que torna o desenvolvimento React produtivo. Ela permite escrever codigo de interface que se parece com HTML, mas na verdade e JavaScript. Quando voce escreve <div className="container"> em JSX, a ferramenta de build do React transforma isso em uma chamada de funcao React.createElement('div', {className: 'container'}). Isso significa que JSX segue as regras do JavaScript, nao do HTML, e por isso certos atributos e padroes precisam mudar.

A diferenca mais importante e que JSX usa convencoes de nomenclatura JavaScript para atributos. Como class e for sao palavras reservadas em JavaScript, elas se tornam className e htmlFor respectivamente. Todos os atributos de manipuladores de eventos usam camelCase: onclick se torna onClick, onchange se torna onChange, e onsubmit se torna onSubmit. Essas mudancas de nomenclatura sao consistentes e previsiveis.

Regras de Conversao de Atributos

Alem de class e for, varios outros atributos HTML tem nomes diferentes em JSX. O atributo tabindex se torna tabIndex. Os atributos colspan e rowspan se tornam colSpan e rowSpan. O atributo crossorigin se torna crossOrigin. Atributos booleanos como checked, disabled e readonly funcionam da mesma forma, mas readonly se torna readOnly em JSX. Atributos data (data-*) e atributos ARIA (aria-*) sao as excecoes e permanecem inalterados em JSX.

Transformacao de Estilos Inline

Estilos inline em HTML usam uma string CSS: style="color: red; font-size: 16px; background-color: blue". JSX requer um objeto JavaScript com nomes de propriedades em camelCase: style={{color: 'red', fontSize: '16px', backgroundColor: 'blue'}}. O conversor realiza essa transformacao automaticamente, convertendo propriedades CSS hifenizadas para camelCase e envolvendo os valores em um objeto literal JavaScript. Valores numericos para propriedades baseadas em pixels podem omitir a unidade 'px' em JSX.

Elementos Auto-Fechados

HTML permite que elementos void como <img>, <br>, <hr> e <input> sejam escritos sem uma barra de fechamento. JSX exige que todos os elementos sejam explicitamente fechados, seja com uma tag de fechamento ou uma barra de auto-fechamento. O conversor garante que todos os elementos void sejam devidamente auto-fechados: <img> se torna <img />, <br> se torna <br />, e assim por diante. Isso e obrigatorio em JSX e causara um erro de compilacao se omitido.

Perguntas Frequentes

O que e JSX?

JSX e uma extensao de sintaxe JavaScript usada no React que permite escrever codigo semelhante a HTML em arquivos JavaScript. Usa atributos em camelCase e exige o fechamento de todos os elementos.

Por que converter HTML para JSX?

HTML e JSX tem diferencas sutis, mas importantes, nos nomes de atributos, sintaxe de estilos, fechamento de elementos e comentarios. A conversao manual e tediosa e propensa a erros.

Quais atributos mudam?

class se torna className, for se torna htmlFor, tabindex se torna tabIndex, manipuladores de eventos se tornam camelCase, e readonly se torna readOnly. Atributos data e ARIA permanecem inalterados.

Como os estilos sao tratados?

Estilos em string CSS se tornam objetos JavaScript com propriedades em camelCase. "font-size: 16px" se torna {fontSize: '16px'}.

A ferramenta trata comentarios?

Sim. Comentarios HTML <!-- comentario --> se tornam comentarios JSX {/* comentario */} envolvidos em chaves com sintaxe de comentario de bloco.