Componentes y Props

Los componentes son las piezas con las que construyes la UI en React, como bloques de LEGO. Un componente es una función que recibe props (propiedades) como parámetros y devuelve JSX. Puedes componer componentes dentro de otros componentes para crear interfaces complejas a partir de piezas simples y reutilizables.

Las props son la forma en que un componente padre pasa datos a sus hijos. Son de solo lectura: un componente hijo nunca debe modificar sus props. Si necesitas que el hijo comunique algo al padre, el padre pasa una función callback como prop y el hijo la llama. Este flujo unidireccional (padre a hijo) hace el comportamiento de la app predecible.

// Componente funcional
function Tarjeta({ titulo, descripcion, imagen, onClick }) {
  return (
    <div className="tarjeta" onClick={onClick}>
      <img src={imagen} alt={titulo} />
      <h2>{titulo}</h2>
      <p>{descripcion}</p>
    </div>
  );
}

// Props con valores por defecto
function Boton({ texto = "Clic", color = "azul", disabled = false, onClick }) {
  return (
    <button
      className={`btn btn-${color}`}
      disabled={disabled}
      onClick={onClick}
    >
      {texto}
    </button>
  );
}

// Props.children - contenido entre etiquetas
function Contenedor({ children, titulo }) {
  return (
    <section>
      <h2>{titulo}</h2>
      <div className="contenido">
        {children}
      </div>
    </section>
  );
}

// Uso
function App() {
  return (
    <Contenedor titulo="Mis Tarjetas">
      <Tarjeta
        titulo="React"
        descripcion="Librería de UI"
        imagen="/react.png"
        onClick={() => console.log("clic en React")}
      />
      <Boton texto="Guardar" color="verde" />
    </Contenedor>
  );
}