Quais atributos são renomeados?

Todos os que o React renomeia: `class` / `for` / `tabindex` / `readonly` / `maxlength` / `contenteditable` / `spellcheck` / `autocomplete` / `autofocus` / `enctype` / `crossorigin` / `srcset` / `rowspan` / `colspan` / `usemap` / `datetime`, mais cada handler de evento `on…`. Atributos `aria-` e `data-` ficam em kebab-case.

E se meu style inline tem variáveis CSS?

Propriedades que começam com `--` são citadas como chaves string (`'--accent': 'blue'`) pra sobreviver ao JSX. Propriedades com prefixo de vendor como `-webkit-…` também são citadas.

Executa meu JavaScript ou avalia scripts?

Não. O parser é um pequeno scanner manual — tags ` ` passam como texto igual a qualquer outro elemento. A conversão é puramente em nível de string.

Conversor HTML → JSX

Desenvolvimento

Conversor feito à mão que reescreve as tarefas chatas de portar HTML pra um componente React: renomeação de atributos (`class`, `for`, `tabindex`, etc.), capitalização de handlers de evento inline (`onclick → onClick`), auto-fechamento de tags void (`<br>` → `<br />`), comentários HTML pra comentários JSX, e conversão opcional de `style="color: red; font-size: 14px"` pra um objeto literal `style={{ color: 'red', fontSize: '14px' }}`.

—

Envolver em fragmento <>Converter strings style pra objetosAuto-fechar tags void (<br />, <img />, …)

HTML

JSX

<>
  <div className="container">
    <label htmlFor="email">Email</label>
    <input type="email" id="email" required />
    <button onClick="submit()" tabIndex="0" style={{ color: '#fff', backgroundColor: 'rebeccapurple', fontSize: '14px' }}>
      Send
    </button>
    {/* footer */}
    <p className="muted">By signing up you agree to our <a href="/terms">terms</a>.</p>
  </div>
</>

Valores de atributo string entre aspas ficam como strings; se precisar de expressão JS, mude no JSX depois de copiar.

Como usar

Cole um snippet HTML.
Alterne a opção wrap-in-fragment se você quer uma raiz única pra um componente React.
Copie o JSX pro arquivo do seu componente.

Perguntas frequentes

Quais atributos são renomeados?: Todos os que o React renomeia: `class` / `for` / `tabindex` / `readonly` / `maxlength` / `contenteditable` / `spellcheck` / `autocomplete` / `autofocus` / `enctype` / `crossorigin` / `srcset` / `rowspan` / `colspan` / `usemap` / `datetime`, mais cada handler de evento `on…`. Atributos `aria-` e `data-` ficam em kebab-case.
E se meu style inline tem variáveis CSS?: Propriedades que começam com `--` são citadas como chaves string (`'--accent': 'blue'`) pra sobreviver ao JSX. Propriedades com prefixo de vendor como `-webkit-…` também são citadas.
Executa meu JavaScript ou avalia scripts?: Não. O parser é um pequeno scanner manual — tags `<script>` passam como texto igual a qualquer outro elemento. A conversão é puramente em nível de string.