Principiantereact
Sintaxis JSX (HTML en JavaScript)
Aprende a escribir la curiosa sintaxis JSX de React que mezcla HTML directamente dentro de JavaScript.
¿Qué es JSX?
JSX significa JavaScript XML. Es una extensión de sintaxis que te permite escribir etiquetas HTML dentro de tu código JavaScript. Por debajo, compiladores como Babel transforman esto en código puro JS (
React.createElement()).Inyectar JavaScript en JSX
La regla de oro del JSX: cualquier cosa entre llaves
{} será evaluada como código JavaScript puro. Puedes poner variables, cálculos o expresiones ternarias, pero no declaraciones (como if o for).jsx
1const nombre = "Juan";
2const edad = 25;
3
4// Podemos inyectar variables directamente
5const elemento = <h1>Hola, me llamo {nombre} y el próximo año tendré {edad + 1} años.</h1>;Diferencias clásicas con HTML
Como JSX es JS y no HTML real, algunas palabras cambian porque están reservadas en JavaScript:
-
class pasa a ser className.
- for pasa a ser htmlFor.
- Todos los atributos van en *camelCase* (ej: tabIndex, onClick).