Por qué JSX difiere de HTML
JSX es una extensión de sintaxis para JavaScript que se parece a HTML pero sigue convenciones de nomenclatura de JavaScript. Como class y for son palabras reservadas en JavaScript, React usa className y htmlFor en su lugar. Los estilos inline deben ser objetos JavaScript con propiedades camelCase en vez de cadenas CSS. Entender estas diferencias es esencial.
Transformaciones clave de atributos
Las transformaciones más comunes incluyen class a className, for a htmlFor, tabindex a tabIndex y onclick a onClick. Los estilos inline cambian de cadenas a objetos donde los nombres de propiedades usan camelCase: background-color se convierte en backgroundColor. Los atributos booleanos como disabled y checked funcionan sin valores explícitos en JSX.
Etiquetas auto-cerradas en JSX
HTML permite elementos vacíos como img, br e input sin etiquetas de cierre ni barras finales. JSX requiere que todos los elementos se cierren explícitamente; los elementos vacíos deben usar sintaxis auto-cerrada con barra diagonal como <img /> y <br />. Este requisito estricto asegura que el analizador JSX construya correctamente el árbol de componentes.
Mejores prácticas después de la conversión
Después de convertir HTML a JSX, revisa la salida buscando valores hardcodeados que deberían ser props o variables de estado. Extrae patrones JSX repetidos en componentes reutilizables. Reemplaza nombres de clase estáticos con expresiones dinámicas usando template literals o bibliotecas como clsx para mejor mantenibilidad.
