¿Qué es React? Componentes y JSX

React: interfaces con componentes

React es una librería para construir interfaces. La idea central: la UI se divide en componentes reutilizables. En React moderno, un componente es simplemente una función que devuelve lo que se debe pintar.

function Bienvenida() {
  return <h1>¡Hola, React!</h1>;
}

• El nombre del componente va en mayúscula (Bienvenida, no bienvenida).
• Devuelve JSX: una sintaxis que parece HTML pero vive dentro de JavaScript.

JSX

JSX te deja escribir marcado dentro de JS. Entre llaves { } puedes incrustar expresiones de JavaScript:

function Saludo() {
  const nombre = "Ana";
  return <h1>Hola, {nombre}</h1>;
}

Reglas clave de JSX:

• Debe devolver un solo elemento raíz. Si necesitas varios, envuélvelos en un <div> (o en un fragmento <>...</>).
• Los atributos van en camelCase: className (no class), onClick.
• Las etiquetas sin cierre se autocierran: <img />, <br />.

function Tarjeta() {
  return (
    <div className="tarjeta">
      <h2>Título</h2>
      <p>Contenido</p>
    </div>
  );
}

En estos ejercicios escribes el componente y lo ves renderizado en la vista previa al instante.