JSX - JavaScript + HTML

JSX es una extensión de JavaScript que permite escribir markup similar a HTML dentro del código JS. No es obligatorio (React se puede usar sin JSX) pero hace el código enormemente más legible: puedes ver la estructura visual directamente en la lógica. Babel o el compilador de React transforma el JSX a llamadas React.createElement() automáticamente.

JSX tiene diferencias importantes con HTML: class se llama className (porque class es palabra reservada en JS), los eventos usan camelCase (onClick, onChange, onSubmit), los estilos se pasan como objetos JavaScript, y cada componente debe devolver un solo elemento raíz (o un Fragment <>...</> vacío para evitar divs innecesarios). Las expresiones JS dentro de JSX van entre llaves {}.

// JSX - parece HTML pero es JavaScript
const elemento = <h1>Hola Mundo</h1>;

// Expresiones JavaScript dentro de {}
const nombre = "Ana";
const edad = 25;
const elemento2 = (
  <div>
    <h1>Hola, {nombre}!</h1>
    <p>Tienes {edad} años</p>
    <p>Naciste en {2024 - edad}</p>
  </div>
);

// Atributos en JSX
// HTML: class, for, onclick
// JSX: className, htmlFor, onClick (camelCase)
const boton = (
  <button
    className="btn-primario"
    onClick={() => alert("¡Clic!")}
    disabled={false}
  >
    Clic aquí
  </button>
);

// Condicional con ternario
const esMayor = true;
const mensaje = (
  <p>{esMayor ? "Mayor de edad" : "Menor de edad"}</p>
);

// Renderizado condicional con &&
const mostrarAlerta = true;
const alerta = (
  <div>
    {mostrarAlerta && <p>¡Atención!</p>}
  </div>
);

// Lista con map
const frutas = ["manzana", "pera", "uva"];
const lista = (
  <ul>
    {frutas.map((fruta, index) => (
      <li key={index}>{fruta}</li>
    ))}
  </ul>
);