6-Tabla de Conceptos sobre Props en React

 

Tabla de Conceptos sobre Props en React

Concepto	Explicación	Ejemplo
Definición	Datos pasados de un componente padre a un hijo. Son de solo lectura (read-only).	<Saludo nombre="Juan" />
Tipos de Props	Pueden ser: strings, números, booleanos, arrays, objetos, funciones, componentes, etc.	<Usuario edad={30} activo={true} datos={{id: 1}} />
Destructuración	Extraer props directamente en los parámetros del componente.	function Hijo({ nombre }) { return <p>{nombre}</p>; }
Children Prop	Contenido anidado dentro de un componente (accesible con props.children).	<Boton>Click aquí</Boton> → props.children = "Click aquí"
PropTypes	Validar el tipo de las props (requiere librería prop-types).	Usuario.propTypes = { nombre: PropTypes.string.isRequired }
Default Props	Valores predeterminados si una prop no es proporcionada.	Usuario.defaultProps = { pais: "México" }
Props como Funciones	Permiten comunicación hijo → padre (ej: ejecutar una función del padre).	<Hijo onChange={(valor) => console.log(valor)} />
Spread en Props	Pasar múltiples props dinámicamente usando el operador ....	<Hijo {...datosUsuario} />
Props y Re-render	Un componente se re-renderiza si sus props cambian.	Si <Contador count={5} /> recibe count={6}, se actualiza.
Props vs State	Props: datos externos (inmutables). State: datos internos (mutables).	props.nombre (recibido) vs const [nombre, setNombre] = useState("")

Casos de Uso Comunes

1. Comunicación Padre → Hijo:

   jsx

   Copy

   Download

   function Padre() {
     return <Hijo mensaje="Hola desde el padre" />;
   }
   function Hijo({ mensaje }) {
     return <p>{mensaje}</p>;
   }

2. Comunicación Hijo → Padre (con función):

   jsx

   Copy

   Download

   function Padre() {
     const handleClick = () => alert("Hijo clickeado!");
     return <Hijo onClick={handleClick} />;
   }
   function Hijo({ onClick }) {
     return <button onClick={onClick}>Click</button>;
   }

3. Children para composición:

   jsx

   Copy

   Download

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

---

Errores Frecuentes

• Modificar Props: No hacer props.nombre = "nuevo" (son inmutables).

• Olvidar PropTypes: Útil para depurar en proyectos grandes.

• Props innecesarias: Evitar pasar props que no usa el componente hijo ("prop drilling").

Aquí tienes ejemplos completos y ejecutables para cada concepto de la tabla, organizados en un formato claro:

---

1. Pasando propiedades entre componentes

jsx

Copy

Download

// Padre
function App() {
  return <Hijo texto="Hola Mundo" numero={42} />;
}

// Hijo
function Hijo({ texto, numero }) {
  return (
    <div>
      <p>{texto}</p>  {/* Muestra "Hola Mundo" */}
      <p>Número: {numero}</p>  {/* Muestra 42 */}
    </div>
  );
}

---

2. Pasando variables entre componentes

jsx

Copy

Download

// Padre
function App() {
  const nombre = "Ana";
  const edad = 25;
  return <Usuario nombre={nombre} edad={edad} />;
}

// Hijo
function Usuario({ nombre, edad }) {
  return <p>{nombre} tiene {edad} años</p>;
}

---

3. Pasando objetos entre componentes

jsx

Copy

Download

// Padre
function App() {
  const producto = {
    nombre: "Laptop",
    precio: 999.99,
    stock: true
  };
  return <Card item={producto} />;
}

// Hijo
function Card({ item }) {
  return (
    <div>
      <h3>{item.nombre}</h3>
      <p>Precio: ${item.precio}</p>
      <p>{item.stock ? "Disponible" : "Agotado"}</p>
    </div>
  );
}

---

4. Pasando funciones entre componentes

jsx

Copy

Download

// Padre
function App() {
  const handleClick = () => alert("Función ejecutada desde el hijo!");
  return <Boton alHacerClick={handleClick} />;
}

// Hijo
function Boton({ alHacerClick }) {
  return <button onClick={alHacerClick}>Click aquí</button>;
}

---

5. Props por defecto (Default Props)

jsx

Copy

Download

// Componente
function Mensaje({ texto }) {
  return <h1>{texto}</h1>;
}

// Valor por defecto
Mensaje.defaultProps = {
  texto: "Este es un mensaje predeterminado"
};

// Uso (si no se pasa "texto"):
<Mensaje />  {/* Muestra "Este es un mensaje predeterminado" */}

---

6. Children como Prop

jsx

Copy

Download

// Componente contenedor
function Caja({ children }) {
  return (
    <div style={{ border: "2px solid blue", padding: "1rem" }}>
      {children}
    </div>
  );
}

// Uso:
<Caja>
  <h2>Título</h2>
  <p>Contenido dentro de la caja</p>
</Caja>

---

7. PropTypes

jsx

Copy

Download

import PropTypes from 'prop-types';

// Componente
function Alumno({ nombre, calificacion }) {
  return <p>{nombre}: {calificacion}/10</p>;
}

// Validación
Alumno.propTypes = {
  nombre: PropTypes.string.isRequired,
  calificacion: PropTypes.number
};

// Uso válido:
<Alumno nombre="María" calificacion={9} />

// Uso inválido (mostrará advertencia en consola):
<Alumno nombre="Pedro" calificacion="10" />  // "10" es string, no number

---

8. Spread Operator en Props

jsx

Copy

Download

// Padre
function App() {
  const usuario = {
    id: 1,
    nombre: "Laura",
    email: "laura@example.com"
  };
  return <Perfil {...usuario} />;
}

// Hijo
function Perfil({ id, nombre, email }) {
  return (
    <div>
      <p>ID: {id}</p>
      <p>Nombre: {nombre}</p>
      <p>Email: {email}</p>
    </div>
  );
}

---

9. Props Dinámicas

jsx

Copy

Download

// Padre
function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <Contador valor={count * 10} />  {/* Valor dinámico */}
      <button onClick={() => setCount(count + 1)}>Incrementar</button>
    </div>
  );
}

// Hijo
function Contador({ valor }) {
  return <p>Valor calculado: {valor}</p>;
}

---

10. Destructuración de Props

jsx

Copy

Download

// Componente con destructuración
function TarjetaPost({ titulo, contenido, autor }) {
  return (
    <article>
      <h2>{titulo}</h2>
      <p>{contenido}</p>
      <small>Por: {autor}</small>
    </article>
  );
}

// Uso:
<TarjetaPost 
  titulo="Aprendiendo React" 
  contenido="Props son fundamentales" 
  autor="Carlos" 
/>

---

Bonus: Ejemplo Integrado

jsx

Copy

Download

function App() {
  const [likes, setLikes] = useState(0);
  const usuario = {
    nombre: "React Developer",
    nivel: "intermedio"
  };

  const aumentarLikes = () => setLikes(likes + 1);

  return (
    <Perfil 
      {...usuario}  // Spread operator
      likes={likes}
      onLike={aumentarLikes}  // Función
    >
      <p>Este es el contenido children</p>
    </Perfil>
  );
}

function Perfil({ nombre, nivel, likes, onLike, children }) {
  return (
    <div>
      <h1>{nombre}</h1>
      <p>Nivel: {nivel}</p>
      <button onClick={onLike}>Likes: {likes}</button>
      <div>{children}</div>
    </div>
  );
}

Perfil.defaultProps = {
  nivel: "principiante"
};

Perfil.propTypes = {
  nombre: PropTypes.string.isRequired,
  likes: PropTypes.number
};

¿Necesitas que explique algún ejemplo en más detalle? 😊