6.1-20. Props-35. ¿Que son los Props de React?

 

¿Qué son los Props en React y cómo usarlos?

Los props (propiedades) son uno de los conceptos más fundamentales en React. Permiten pasar datos entre componentes y hacer que nuestras aplicaciones sean dinámicas y reutilizables. 🚀

---

¿Para qué sirven los Props?

Imagina que tienes un componente Usuario que muestra información de un usuario. En lugar de escribir el mismo componente varias veces con datos diferentes, puedes pasarle los datos como props y reutilizarlo.

Ejemplo Práctico

🔹 Componente Usuario (recibe props)

jsx

function Usuario(props) {
  return <h1>{props.nombre}</h1>;
}

export default Usuario;

🔹 Uso del componente (pasando props)

jsx

<Usuario nombre="Frank" />  
<Usuario nombre="Frank 1" />  
<Usuario nombre="Frank 2" />  

Resultado:

• "Frank"

• "Frank 1"

• "Frank 2"

---

¿Qué tipos de datos podemos pasar como Props?

✅ Strings ("Frank")
✅ Números ({20})
✅ Booleanos ({true} o {false})
✅ Objetos y Arrays (usuario={{nombre: "Frank", edad: 30}})
✅ Funciones (para manejar eventos)

Ejemplo con diferentes props

jsx

<Usuario 
  nombre="Ana" 
  edad={25} 
  esPremium={true} 
  onLogin={() => console.log("Inició sesión")} 
/>

---

¿Cómo se usan los Props en la vida real?

• Páginas de películas: Pasar el id de una película para mostrar su detalle.

• Carritos de compra: Enviar el precio y cantidad de un producto.

• Redes sociales: Mostrar el nombre, foto y comentarios de un usuario.

---

Conclusión

Los props son la forma en que los componentes de React se comunican y comparten información. Sin ellos, no podríamos crear aplicaciones dinámicas y escalables.

🔹 Ventajas:
✔ Reutilización de componentes (evita código repetido).
✔ Flujo de datos controlado (de padres a hijos).
✔ Fácil mantenimiento (los datos vienen de una sola fuente).

¿Quieres ver un ejemplo más avanzado? En el próximo post exploraremos cómo pasar objetos y funciones como props.

¡Déjanos tus dudas en los comentarios!

¿Qué son los Props en React?

Los props (propiedades) en React son la forma en que pasamos información de un componente a otro. 🚀

¿Para qué sirven los Props?

Imagina que tienes una aplicación con una estructura de componentes como esta:

text

App (Padre)  
└── Saludo (Hijo)  

• App contiene el nombre del usuario (ej: nombre="Agustín").

• Saludo muestra un mensaje como "Hola [nombre]".

Si no le pasamos el nombre como prop, Saludo solo dirá "Hola" sin el nombre. Pero si App le envía el dato, el componente hijo podrá usarlo.

Ejemplo Básico

🔹 App.js (Componente Padre):

jsx

import Saludo from './components/Saludo';

function App() {
  return (
    <div>
      <Saludo nombre="Agustín" />
    </div>
  );
}

export default App;

🔹 Saludo.js (Componente Hijo):

jsx

function Saludo(props) {
  return <h1>Hola {props.nombre}</h1>;
}

export default Saludo;

Resultado:
📌 "Hola Agustín"

---

Características Clave de los Props

✅ Pasan información de padres a hijos (y entre componentes anidados).
✅ Pueden ser cualquier tipo de dato: strings, números, booleanos, objetos, funciones, etc.
✅ Son inmutables (el componente hijo no puede modificarlos directamente).
✅ Pueden fluir a través de múltiples componentes (un hijo puede pasar props a otro hijo).

---

¿Qué más podemos hacer con Props?

🔸 Pasar múltiples props:

jsx

<Saludo nombre="Agustín" apellido="Navarro" />  

🔸 Usar destructuración para mayor claridad:

jsx

function Saludo({ nombre, apellido }) {
  return <h1>Hola {nombre} {apellido}</h1>;
}

🔸 Enviar funciones como props:

jsx

<Saludo saludarUsuario={() => console.log("¡Hola!")} />

---

Conclusión

Los props son esenciales en React porque permiten que los componentes se comuniquen y compartan datos. 📡

En el próximo post veremos cómo pasar props con diferentes tipos de datos y casos de uso avanzados.

¿Tienes dudas? ¡Déjalas en los comentarios!