Entendiendo JSX

JSX es una extension de sintaxis que te permite escribir markup similar a HTML dentro de JavaScript.

Sintaxis basica

// JSX se ve como HTML
const elemento = <h1>Hola Mundo</h1>;

// Pero es JavaScript!
// Se convierte en:
const elemento = React.createElement('h1', null, 'Hola Mundo');

Reglas de JSX

1. Un solo elemento raiz

// MAL - multiples elementos raiz
return (
  <h1>Titulo</h1>
  <p>Parrafo</p>
)

// BIEN - envuelto en un div
return (
  <div>
    <h1>Titulo</h1>
    <p>Parrafo</p>
  </div>
)

// MEJOR - Fragment (sin div extra)
return (
  <>
    <h1>Titulo</h1>
    <p>Parrafo</p>
  </>
)

2. Cierra todas las etiquetas

// HTML permite esto
<img src="foto.jpg">
<input type="text">

// JSX requiere cerrar
<img src="foto.jpg" />
<input type="text" />

3. camelCase para atributos

// HTML
<div class="container" onclick="handleClick()">

// JSX
<div className="container" onClick={handleClick}>

Expresiones JavaScript en JSX

Usa llaves {} para insertar JavaScript:

const nombre = "Maria";
const edad = 25;

return (
  <div>
    <h1>Hola {nombre}!</h1>
    <p>Tienes {edad} anos</p>
    <p>En 5 anos tendras {edad + 5}</p>
    <p>Fecha: {new Date().toLocaleDateString()}</p>
  </div>
);

Estilos en JSX

// Estilos inline (objeto JavaScript)
<div style={{ color: 'blue', fontSize: '20px' }}>
  Texto azul
</div>

// Con clases CSS
<div className="mi-clase">
  Usando CSS
</div>