Desenvolvedor

Conversor de HTML para JSX

Converta HTML para React JSX — class para className, strings de estilo para objetos, tags auto-fechantes e atributos camelCase.

HTML

JSX

<div className="container" id="main">
  <h1 className="title" style={{ color: "red", fontSize: "24px" }}>Hello World</h1>
  <form action="/submit" onSubmit={handleSubmit(event)}>
    <label htmlFor="name">Name:</label>
    <input type="text" id="name" className="input-field" maxLength="50" readOnly />
    <input type="checkbox" defaultChecked />
    <button type="submit" disabled onClick={handleClick()}>Submit</button>
  </form>
  <img src="photo.jpg" alt="Photo" className="image" />
  <br />
  {/* This is a comment */}
  <table>
    <tr>
      <td colSpan="2" rowSpan="1">Cell</td>
    </tr>
  </table>
  <p tabIndex="0">Focusable paragraph</p>
</div>

Caracteres de Entrada: 623Caracteres de Saída: 658

Sobre o Conversor de HTML para JSX

O Conversor de HTML para JSX transforma código HTML em React JSX válido. Converte class para className, for para htmlFor, strings de estilo inline para objetos de estilo e normaliza tags auto-fechantes e atributos camelCase.

Explorar todas as ferramentas de Desenvolvedor

Como Usar

Cole seu HTML no painel esquerdo. A saída JSX aparece instantaneamente à direita. Copie o resultado com o botão Copiar.

Casos de Uso Comuns

Migrar HTML estático para componentes React
Converter trechos de design para JSX
Corrigir automaticamente class para className e a capitalização dos atributos
Colar marcação em JSX sem edições manuais
Prototipagem rápida de UI a partir de mockups HTML

Como Usar Conversor de HTML para JSX Faça uma pausa e jogue jogos grátis no navegador

Todas as Publicações

c/tools_html-to-jsx0

Ver Tudo Criar Publicação