1. O Que E JSX

JSX (JavaScript XML) e uma extensao de sintaxe para JavaScript usada pelo React que permite escrever estruturas similares a HTML diretamente no codigo JavaScript. Apesar de ser muito parecido com HTML visualmente, JSX tem regras proprias que refletem as convencoes do JavaScript — e essas diferencas precisam ser convertidas ao migrar codigo HTML para um projeto React.

O JSX e transpilado por ferramentas como Babel ou o compilador TypeScript para chamadas JavaScript puras (como React.createElement), portanto nao e HTML real — e uma abstração sobre a API do React.

2. Principais Diferencas do HTML

As principais mudancas ao converter HTML para JSX sao:

• class → className: class e uma palavra reservada no JavaScript, entao JSX usa className para o atributo de classes CSS.
• for → htmlFor: O atributo for em elementos <label> torna-se htmlFor no JSX.
• Tags void auto-fechadas: Tags como <br>, <img> e <input> devem ser auto-fechadas: <br />, <img />.
• Comentarios: <!-- comentario --> torna-se {`{/* comentario */}`}.
• Elemento raiz unico: Todo JSX deve ter um elemento raiz. Para multiplos elementos, use <></> (Fragment).

3. Eventos e Atributos Especiais

Os atributos de eventos HTML usam camelCase no JSX:

• onclick → onClick
• onchange → onChange
• onsubmit → onSubmit
• tabindex → tabIndex

Atributos data-* e aria-* sao preservados como estao, pois o React os suporta diretamente com a sintaxe de hifens.

"Nossa ferramenta cobre mais de 50 mapeamentos de eventos HTML para seus equivalentes React camelCase, incluindo eventos de toque, ponteiro, drag-and-drop, composicao e midia."

4. Estilos Inline em JSX

Em HTML, estilos inline sao strings: style="color:red;font-size:14px". Em JSX, sao objetos JavaScript: style={{'{{'}}color: 'red', fontSize: '14px'{{'}}'}}.

As regras de conversao sao:

• Propriedades CSS com hifens viram camelCase: font-size → fontSize, background-color → backgroundColor.
• Prefixos vendor como -webkit-transform viram WebkitTransform.
• Os valores permanecem como strings.

5. Componentes Funcionais

A opcao "Componente funcional" da ferramenta envolve o JSX gerado em um componente React exportado:

• O nome do componente deve comecar com letra maiuscula (convencao do React para distinguir de tags HTML).
• A opcao "Fragment wrapper" adiciona <></> para envolver multiplos elementos raiz sem adicionar um no extra ao DOM.
• O componente gerado usa a sintaxe de funcao moderna (export default function), compativel com qualquer projeto React atual.

6. Perguntas Frequentes

A conversao e perfeita para qualquer HTML?

A ferramenta cobre as conversoes mais comuns e relevantes para o uso pratico do dia a dia. HTMLs muito complexos com sintaxes nao padronizadas podem requerer ajustes manuais adicionais.

A ferramenta converte JavaScript inline nos atributos?

Os valores dos atributos de eventos sao preservados como strings entre aspas. Para transformar em funcoes React (onClick={handler}), e necessario editar manualmente apos a conversao.

Posso usar o resultado diretamente no meu projeto?

Sim, para a maioria dos casos. O JSX gerado segue as convencoes padrao do React e pode ser colado diretamente em arquivos .jsx ou .tsx. Para projetos TypeScript, pode ser necessario adicionar tipos as props.

O codigo HTML e enviado para algum servidor?

Nao. Toda a conversao acontece inteiramente no seu navegador via JavaScript. Nenhum dado e transmitido ou armazenado externamente.