Pular para o conteúdo
🛠️ToolsShed

HTML to JSX

Converta marcação HTML para sintaxe JSX para React. Transforma atributos, estilos em linha e elementos vazios automaticamente.

Conversões aplicadas:

  • class → className
  • for → htmlFor
  • style="..." → style={{...}}
  • Elementos vazios (br, hr, img, input) auto-fechados
  • Comentários HTML convertidos para {/* */}

Sobre esta ferramenta

HTML to JSX é um conversor que transforma marcação HTML padrão em sintaxe JSX válida para uso em aplicações React. Ao construir componentes React, desenvolvedores frequentemente precisam converter trechos de HTML para formato JSX, o que requer alterar nomes de atributos (class para className), manipular estilos inline de forma diferente (string para objeto) e adaptar elementos void. Esta ferramenta automatiza essas transformações, economizando tempo e reduzindo erros de conversão manual.

Para usar a ferramenta, cole seu código HTML na caixa de entrada e clique em "Converter". O conversor gera instantaneamente uma saída JSX válida que você pode copiar diretamente em seus componentes React. Ele lida com conversões comuns, como manipuladores de eventos HTML (onclick para onClick), atributos booleanos (checked, disabled), atributos de dados e nomes de classe CSS. Os casos de uso típicos incluem migrar modelos HTML existentes para React, integrar trechos HTML de terceiros ou gerar rapidamente JSX de componentes a partir de mockups.

O conversor funciona inteiramente no seu navegador sem upload para servidor, então seu código permanece privado. Tenha em mente que modelos dinâmicos complexos ou lógica de renderização condicional ainda podem exigir ajustes manuais após a conversão. Para componentes com gerenciamento de estado intrincado ou lógica personalizada, o JSX gerado serve como ponto de partida sólido que você pode refinar ainda mais.

Perguntas Frequentes

Implementação de Código

import re

def html_to_jsx(html: str) -> str:
    jsx = html
    # class -> className
    jsx = re.sub(r'\bclass=', 'className=', jsx)
    # for -> htmlFor
    jsx = re.sub(r'\bfor=', 'htmlFor=', jsx)
    # HTML comments to JSX
    jsx = re.sub(r'<!--(.*?)-->', r'{/*\1*/}', jsx, flags=re.DOTALL)
    # Self-close void elements
    void_elements = ['area','base','br','col','embed','hr','img','input',
                     'link','meta','param','source','track','wbr']
    for tag in void_elements:
        jsx = re.sub(
            rf'<{tag}(\s[^>]*)?>',
            lambda m: m.group(0)[:-1] + ' />' if not m.group(0).endswith('/>') else m.group(0),
            jsx, flags=re.IGNORECASE
        )
    return jsx

html = '<div class="container"><br><img src="x.png" alt=""></div>'
print(html_to_jsx(html))
# <div className="container"><br /><img src="x.png" alt="" /></div>

Comments & Feedback

Comments are powered by Giscus. Sign in with GitHub to leave a comment.