Conversor HTML para 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

1. Cole ou digite seu HTML no editor.
2. Clique em Converter para gerar o código JSX.
3. 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>