Como usar HTML para JSX
React foi criado por Jordan Walke no Facebook em 2011, apresentado internamente como FaxJS, e aberto ao público no JSConf de maio de 2013. A primeira reação da comunidade foi de ceticismo e, em muitos casos, rejeição aberta. JSX — a sintaxe que mistura HTML dentro de JavaScript — parecia uma heresia. A separação de HTML, CSS e JavaScript em arquivos diferentes era um princípio quase sagrado do desenvolvimento web desde os anos 2000. Colocar marcação dentro de funções JavaScript parecia um passo atrás de décadas de boas práticas.
A reviravolta foi rápida. Depois de poucos meses com React em produção, a maioria dos desenvolvedores concluiu que separar HTML de JS era uma separação de tecnologias — não de preocupações reais. Um componente de botão tem markup, estilo e comportamento, e ter tudo num único arquivo de componente tornava o código mais fácil de manter do que três arquivos separados em sincronia. JSX ganhou o debate pragmático. Hoje é raro encontrar um projeto React sem JSX como padrão, e o formato influenciou Solid.js, Preact, Qwik e outros frameworks.
O conversor desta página resolve o problema prático de migrar templates HTML existentes para JSX. As mudanças são sistemáticas: `class` vira `className` (porque `class` é palavra reservada em JavaScript), `for` em labels vira `htmlFor`, atributos multi-palavra como `tabindex` e `maxlength` viram camelCase (`tabIndex`, `maxLength`), estilos inline passam de string para objeto JavaScript, comentários HTML viram expressões JSX, e tags void como `<img>` recebem fechamento explícito `<img />` porque JSX segue regras de XML bem-formado.
Exemplo
<div class="box" tabindex="0">
<img src="/a.png" alt="">
<!-- ok -->
</div>Perguntas frequentes
Para que serve esta ferramenta?
Ela roda 100% no seu navegador: útil para validar, formatar ou converter dados no dia a dia de desenvolvimento.
Meus dados são enviados a algum servidor?
O processamento é feito localmente via JavaScript. Não armazenamos o conteúdo que você cola nas caixas de texto.
Posso usar em produção ou para dados reais?
Use por sua conta e risco. Para segredos (senhas, tokens), prefira ambientes controlados e políticas da sua empresa. E lembre sempre de revisar os conteúdos gerados. Nunca confie cegamente nas coisas que vê na internet.