Desenvolvedor / React

Conversor de HTML para JSX

Converta HTML em JSX para React: class para className, estilos inline para objetos, elementos vazios fechados, chaves e comentários escapados, com opção de envolver o resultado em um componente.

Conversor de HTML para JSX: O HTML é analisado em elementos, portanto os atributos são renomeados para React (class, for, tabindex, readonly, maxlength e outros), os estilos se tornam objetos com chaves em camelCase, e elementos vazios como <br> e <img> são fechados. Chaves e sinais de menor e maior no texto são escapados, comentários se tornam {/* */}, e os valores de formulários se tornam defaultValue e defaultChecked para que os campos continuem editáveis. A saída das páginas de teste é compilada como TSX. Roda 100% localmente no seu navegador, sem enviar nenhum arquivo para o servidor.

Categoria: Ferramentas para desenvolvedores
Execuções: No seu navegador
Custo: Grátis · sem cadastro
Disponibilidade: Pronto para usar

HTML para JSXProcessamento local

Roda inteiramente no seu navegador

HTML

<div class="card" style="margin-top: 8px; background-color: #fff">
  <label for="email">Email</label>
  <input id="email" type="email" placeholder="you@example.com" required>
  <button onclick="send()" tabindex="0">Send</button>
  <!-- footer -->
  <p>Price: {price} &gt; 0</p>
</div>

Envolver em um componente

Removido onclick="send()" em <button>: escreva como uma função, como onClick={() => …}.

JSX

<div className="card" style={{ marginTop: "8px", backgroundColor: "#fff" }}>
  <label htmlFor="email">Email</label>
  <input id="email" type="email" placeholder="you@example.com" required />
  <button tabIndex="0">Send</button>
  {/* footer */}
  <p>Price: {"{"}price{"}"} &gt; 0</p>
</div>

Os atributos são renomeados para React (class para className, for para htmlFor, tabindex para tabIndex), os estilos se tornam objetos, os elementos vazios e void são fechados, os comentários se tornam {/* */} e os valores dos formulários se tornam defaultValue para que os campos continuem editáveis.

Depois da conversão

Transforme marcações repetidas em componentes que recebem props, substitua o texto fixo por variáveis entre chaves e mova os estilos inline para classes CSS ou para seu sistema de estilos, pois os objetos de estilo são recriados a cada renderização.

Para ícones SVG, SVG para JSX cria um componente que repassa as props; para remover comentários e espaços em branco extras primeiro, use o minificador de HTML.

Diferenças que costumam causar problemas

JSX precisa de um único elemento raiz, portanto, vários elementos são envolvidos em um fragmento (<>…</>). Todo elemento deve ser fechado, os nomes dos atributos usam camelCase e o texto que contém { ou } deve ser escrito como {"{"}, algo que o conversor faz por você.

Como usar

Cole o HTML, de um único elemento a uma seção inteira de uma página.
Opcionalmente, envolva o resultado em um componente nomeado.
Copie o JSX e reescreva os manipuladores de eventos inline listados nos avisos.

Privacidade e limitações

O HTML é convertido no seu navegador e nunca é enviado para um servidor.

Ferramentas relacionadas

Perguntas frequentes

Por que os atributos onclick são removidos?

No HTML, eles são strings de código; no React, precisam ser funções. O conversor lista cada um para que você possa reescrevê-lo, por exemplo, onclick="save()" como onClick={save}.

Por que value se torna defaultValue?

Um atributo value no React torna o campo controlado, portanto não é possível digitar nele sem um manipulador onChange; defaultValue define o texto inicial e mantém o campo editável.

A ferramenta processa SVG?

Sim: atributos SVG como stroke-width se tornam strokeWidth. Para transformar um arquivo SVG inteiro em um componente, a ferramenta SVG para JSX adiciona props.

Ferramenta grátis · no seu navegador execuções · não precisa de conta