Introducción a React

React es una librería de JavaScript para construir interfaces de usuario mediante componentes componibles.

Conceptos Clave

• Componentes — piezas reutilizables e independientes de la UI
• JSX — extensión de sintaxis que parece HTML
• Props — datos pasados del padre al hijo
• Estado — datos gestionados dentro de un componente
• Hooks — funciones que añaden características a componentes funcionales

Tu Primer Componente

// Un componente funcional retorna JSX
function HolaMundo() {
  return (
    <div className="contenedor">
      <h1>¡Hola, Mundo!</h1>
      <p>Mi primer componente React.</p>
    </div>
  );
}

export default HolaMundo;

Reglas de JSX

// 1. Retornar un único elemento raíz (o usar Fragment)
function Lista() {
  return (
    <>
      <h2>Elementos</h2>
      <ul>
        <li>Primero</li>
        <li>Segundo</li>
      </ul>
    </>
  );
}

// 2. Cerrar todas las etiquetas
const input = <input type="text" />;
const img = <img src="logo.png" alt="Logo" />;

// 3. Usar className en lugar de class
const btn = <button className="btn-primario">Clic</button>;

// 4. Usar camelCase para atributos
const div = <div onClick={manejarClic} tabIndex={0} />;

// 5. Incrustar expresiones con {}
const nombre = "Alice";
const saludo = <h1>¡Hola, {nombre}!</h1>;
const resultado = <p>{2 + 2}</p>; // 4

Props

interface PropsTarjeta {
  titulo: string;
  descripcion: string;
  urlImagen?: string;
  insignia?: "nuevo" | "popular" | "oferta";
}

function Tarjeta({ titulo, descripcion, urlImagen, insignia }: PropsTarjeta) {
  return (
    <div className="tarjeta">
      {urlImagen && <img src={urlImagen} alt={titulo} />}
      {insignia && <span className={`insignia insignia-${insignia}`}>{insignia}</span>}
      <h3>{titulo}</h3>
      <p>{descripcion}</p>
    </div>
  );
}

// Uso
function App() {
  return (
    <Tarjeta
      titulo="React Básico"
      descripcion="Aprende los fundamentos de React"
      insignia="nuevo"
    />
  );
}

Renderizado de Listas

interface Producto {
  id: number;
  nombre: string;
  precio: number;
}

function ListaProductos({ productos }: { productos: Producto[] }) {
  if (productos.length === 0) {
    return <p>No se encontraron productos.</p>;
  }

  return (
    <ul>
      {productos.map(producto => (
        // key debe ser único y estable
        <li key={producto.id}>
          {producto.nombre} — ${producto.precio.toFixed(2)}
        </li>
      ))}
    </ul>
  );
}

Renderizado Condicional

function InsigniaUsuario({ usuario }: { usuario: Usuario | null }) {
  // Retorno temprano
  if (!usuario) return <span>Invitado</span>;

  return (
    <div>
      <span>{usuario.nombre}</span>
      {/* AND lógico */}
      {usuario.esPremium && <span className="insignia">PRO</span>}
      {/* Ternario */}
      {usuario.estaEnLinea ? (
        <span className="punto verde" />
      ) : (
        <span className="punto gris" />
      )}
    </div>
  );
}

Regla clave: La prop key en elementos de lista debe ser única entre hermanos y estable (no uses el índice del array si la lista cambia).