¿Qué atributos se renombran?

Todos los que React renombra: `class` / `for` / `tabindex` / `readonly` / `maxlength` / `contenteditable` / `spellcheck` / `autocomplete` / `autofocus` / `enctype` / `crossorigin` / `srcset` / `rowspan` / `colspan` / `usemap` / `datetime`, más cada handler de evento `on…`. Los atributos `aria-` y `data-` quedan en kebab-case.

¿Y si mi estilo inline tiene variables CSS?

Las propiedades que empiezan con `--` se citan como claves string (`'--accent': 'blue'`) así sobreviven al JSX. Las propiedades con prefijo de vendor como `-webkit-…` también se citan.

¿Ejecuta mi JavaScript o evalúa scripts?

No. El parser es un pequeño scanner hecho a mano — los tags ` ` pasan como texto igual que cualquier otro elemento. La conversión es puramente a nivel de string.

Conversor HTML → JSX

Desarrollo

Conversor hecho a mano que reescribe las tareas aburridas de portar HTML a un componente React: renombrar atributos (`class`, `for`, `tabindex`, etc.), capitalizar handlers de eventos inline (`onclick → onClick`), auto-cerrar tags void (`<br>` → `<br />`), comentarios HTML a comentarios JSX, y conversión opcional de `style="color: red; font-size: 14px"` a un objeto literal `style={{ color: 'red', fontSize: '14px' }}`.

—

Envolver en fragmento <>Convertir strings style a objetosAuto-cerrar 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>
</>

Los valores de atributo string entre comillas quedan como strings; si necesitas una expresión JS, cámbiala en el JSX tras copiar.

Cómo usar

Pega un snippet HTML.
Conmuta la opción wrap-in-fragment si quieres una sola raíz para un componente React.
Copia el JSX al archivo de tu componente.

Preguntas frecuentes

¿Qué atributos se renombran?: Todos los que React renombra: `class` / `for` / `tabindex` / `readonly` / `maxlength` / `contenteditable` / `spellcheck` / `autocomplete` / `autofocus` / `enctype` / `crossorigin` / `srcset` / `rowspan` / `colspan` / `usemap` / `datetime`, más cada handler de evento `on…`. Los atributos `aria-` y `data-` quedan en kebab-case.
¿Y si mi estilo inline tiene variables CSS?: Las propiedades que empiezan con `--` se citan como claves string (`'--accent': 'blue'`) así sobreviven al JSX. Las propiedades con prefijo de vendor como `-webkit-…` también se citan.
¿Ejecuta mi JavaScript o evalúa scripts?: No. El parser es un pequeño scanner hecho a mano — los tags `<script>` pasan como texto igual que cualquier otro elemento. La conversión es puramente a nivel de string.