20.1. ¿Que son los Props de React?

 Los Props (abreviatura de "properties" o propiedades) en React son un mecanismo para pasar datos de un componente padre a un componente hijo. Son de solo lectura y hacen que los componentes sean reutilizables y dinámicos.

Características clave:

1. Flujo unidireccional

Los props solo fluyen de padre a hijo, nunca al revés.

2. Inmutables

El componente hijo no puede modificar los props que recibe.

3. Pueden ser cualquier tipo de dato

• Strings, números, booleanos

• Arrays y objetos

• Funciones (para comunicación hijo → padre)

• Elementos React

• Otros componentes

Ejemplo básico:

jsx

// Componente padre

function App() {

  const nombre = "Ana";

  const edad = 25;

  

  return <Saludo nombre={nombre} edad={edad} />;

}

// Componente hijo

function Saludo(props) {

  return <h1>Hola {props.nombre}, tienes {props.edad} años</h1>;

}

Sintaxis moderna con desestructuración:

// Con desestructuración en parámetros

function Saludo({ nombre, edad, ciudad = "Madrid" }) {

  return (

    <div>

      <h1>Hola {nombre}</h1>

      <p>Edad: {edad} | Ciudad: {ciudad}</p>

    </div>

  );

}

// Uso

<Saludo nombre="Carlos" edad={30} />

<Saludo nombre="Laura" edad={28} ciudad="Barcelona" />

Props especiales:

children

Contenido entre las etiquetas de apertura y cierre:

function Tarjeta({ children }) {

  return <div className="tarjeta">{children}</div>;

}

// Uso

<Tarjeta>

  <h2>Título</h2>

  <p>Contenido aquí</p>

</Tarjeta>

Props con spread operator:

const datos = { nombre: "Juan", edad: 30, ciudad: "Madrid" };

<Saludo {...datos} />

Buenas prácticas:

1. Nombres descriptivos: usuario en lugar de u

2. Validación con PropTypes (o TypeScript):

jsx

import PropTypes from 'prop-types';

Saludo.propTypes = {

  nombre: PropTypes.string.isRequired,

  edad: PropTypes.number,

  ciudad: PropTypes.string

};

3. Valores por defecto:

jsx

Saludo.defaultProps = {

  ciudad: "Desconocida"

};

// O mejor con desestructuración:

function Saludo({ ciudad = "Desconocida" }) { ... }

Comunicación entre componentes:

jsx

// Padre pasa función como prop

function Padre() {

  const manejarClick = () => console.log("Hijo hizo click");

  

  return <Hijo onAction={manejarClick} />;

}

// Hijo ejecuta función recibida por props

function Hijo({ onAction }) {

  return <button onClick={onAction}>Haz click</button>;

}

Diferencias clave Props vs Estado:

Props	Estado
Pasados desde fuera	Definido dentro del componente
Inmutables	Mutables con setState/useState
De padre a hijo	Local al componente
Hacen al componente reusable	Hacen al componente dinámico

Los props son fundamentales en React porque permiten crear componentes reutilizables, mantener un flujo de datos predecible y construir interfaces complejas a partir de componentes simples.