HTML a JSX
Pega HTML y obtén JSX válido para React, con los atributos renombrados, los estilos convertidos a objeto y las etiquetas cerradas.
Cambios aplicados
Las diferencias entre HTML y JSX
| HTML | JSX | Motivo |
|---|---|---|
| class | className | Palabra reservada de JavaScript |
| for | htmlFor | Palabra reservada de JavaScript |
| style="color:red" | style={{color:"red"}} | JSX espera un objeto |
| tabindex | tabIndex | Los atributos van en camelCase |
| onclick | onClick | Eventos en camelCase |
| <br> | <br /> | Toda etiqueta debe cerrarse |
| <!-- … --> | {/* … */} | Comentario dentro de expresión |
La regla del elemento raíz único
Un componente JSX debe devolver un solo elemento. Si tu HTML tiene varios elementos al mismo nivel, hay que envolverlos. La forma moderna es el fragmento, que agrupa sin añadir ningún nodo extra al documento:
<>
<h1>Título</h1>
<p>Párrafo</p>
</>La alternativa antigua era envolver en un div, pero eso ensucia el árbol del documento y puede romper diseños con flexbox o grid, donde importa la relación directa entre padre e hijo.
Preguntas frecuentes
class es una palabra reservada de JavaScript y JSX se compila a llamadas de función. Lo mismo pasa con for, que se convierte en htmlFor. style en JSX no acepta una cadena sino un objeto, con las propiedades en camelCase. La conversión lo transforma automáticamente. class se admite tal cual. Esta utilidad se ejecuta enteramente en tu equipo con JavaScript. Lo que escribes o pegas no se envía a ningún servidor, no se guarda y no queda registrado en ninguna parte.
Utilidades relacionadas
¿Buscas una app para instalar?
80+ Apps Markdown
El directorio más completo en español. Filtra por plataforma, precio y uso.