Entrevista · Fundamentos
JSX
¿Qué es JSX y en qué se convierte?
JSX es azúcar sintáctica sobre React.createElement. El navegador no lo entiende — un compilador (Babel/SWC) lo transforma a llamadas de función JS antes de ejecutarse.
Lo que hace el compilador
<Button color="red">Click</Button> se convierte en React.createElement(Button, { color: "red" }, "Click"). JSX no es magia — es una forma más legible de crear objetos que describen nodos del árbol de UI.
JSX no es HTML
Las diferencias clave: className en vez de class, htmlFor en vez de for, eventos en camelCase (onClick), y style acepta objetos JS en lugar de strings. Además, todos los elementos deben cerrarse — incluyendo <br /> y <img />.
Tropiezos comunes
- 01Desde React 17 ya no es necesario importar React para usar JSX — el nuevo transform lo inyecta automáticamente.
- 02Las expresiones dentro de {} deben ser expresiones JS válidas, no statements. No puedes poner un if directamente — usa ternario o &&.
- 03Un componente debe retornar un único elemento raíz. Usa <></> (Fragment) para envolver varios elementos sin agregar nodos extra al DOM.
¿Fue útil?
Inicia sesión para dar feedback