Conversor de HTML para JSX
Converta HTML para a sintaxe de template JSX
O que é esta ferramenta?
Esta ferramenta online gratuita converte HTML padrão em sintaxe JSX válida para uso com React. É a maneira mais rápida de refatorar código HTML existente em componentes prontos para aplicações modernas de front-end.
Como usar
- Cole ou digite seu HTML no editor.
- Clique em Converter para gerar o código JSX.
- Baixe, copie ou compartilhe seu JSX convertido instantaneamente.
Faça login com Google ou GitHub para salvar suas conversões e acessá-las a qualquer momento.
O que é JSX?
JSX (JavaScript XML) é uma extensão de sintaxe para JavaScript usada no React para definir componentes de UI de forma declarativa. JSX permite que você escreva tags semelhantes a HTML diretamente no seu código JavaScript.
Ao contrário do HTML tradicional, o JSX usa regras especiais (como className
em vez de class
) e suporta a inserção de expressões JavaScript dentro de chaves.
Exemplo básico de JSX:
const element = (
<h1 className="greeting">
Olá, mundo!
</h1>
);
Saiba mais na documentação oficial do React.
Exemplo de HTML vs JSX
HTML
<div>
<div class="awesome" style="border: 1px solid red">
<label for="name">Digite seu nome: </label>
<input type="text" id="name" />
</div>
<p>Digite seu HTML aqui</p>
</div>
JSX Convertido
<div>
<div className="awesome" style={{ border: '1px solid red' }}>
<label htmlFor="name">Digite seu nome: </label>
<input type="text" id="name" />
</div>
<p>Digite seu HTML aqui</p>
</div>