20. ¿Que son los Props de React?

 

Tutorial 20: ¿Qué son los Props de React?

🎯 Objetivo

Aprender a pasar información entre componentes usando props en React.

---

📖 Introducción a los Props

¿Qué son los Props?

Los props (propiedades) son la forma que tiene React de pasar información de un componente padre a un componente hijo.

Analogía sencilla: Imagina que los props son como parámetros que le pasas a una función, pero en el mundo de los componentes React.

---

🎭 Ejemplo Visual: Flujo de Props

text

  ┌─────────────────┐

   │     App.js      │   ← Componente PADRE

   │  (tiene nombre) │

   └────────┬────────┘

            │ Pasa el nombre como prop

            ▼

   ┌─────────────────┐

   │   Saludar.js    │   ← Componente HIJO

   │  (usa el nombre)│

   └─────────────────┘

---

🔍 Problema sin Props

Situación: Tenemos un componente Saludar que debe decir "Hola [nombre]", pero el nombre está en App.js

Sin props - NO FUNCIONA:

jsx

// Saludar.js

function Saludar() {

    return <h1>Hola ???</h1>; 

    // ¿Cómo accedo al nombre si está en App.js?

}

---

✅ Solución: Usando Props

Paso 1: Componente Padre (App.js) - ENVÍA props

jsx

// App.js

import React from "react";

import Saludar from "./components/Saludar";

function App() {

    const nombreUsuario = "Agustín Navarro";

    

    return (

        <div className="App">

            {/* Pasamos el nombre como prop llamado "nombre" */}

            <Saludar nombre={nombreUsuario} />

            

            {/* También podemos pasar otros valores */}

            <Saludar nombre="María López" />

            <Saludar nombre="Carlos Ruiz" />

        </div>

    );

}

export default App;

Paso 2: Componente Hijo (Saludar.js) - RECIBE props

jsx

// Saludar.js

import React from "react";

// El parámetro "props" contiene todas las propiedades que recibimos

function Saludar(props) {

    return (

        <div>

            {/* Accedemos al prop "nombre" */}

            <h1>Hola {props.nombre}</h1>

        </div>

    );

}

export default Saludar;

Resultado en pantalla:

text

Hola Agustín Navarro

Hola María López

Hola Carlos Ruiz

---

🎨 Ejemplo Completo con Múltiples Props

App.js (Padre)

jsx

// App.js

import React from "react";

import Usuario from "./components/Usuario";

function App() {

    return (

        <div>

            {/* Pasamos MÚLTIPLES props */}

            <Usuario 

                nombre="Ana García" 

                edad={28} 

                ciudad="Madrid"

                esPremium={true}

            />

            

            <Usuario 

                nombre="Pedro Sánchez" 

                edad={35} 

                ciudad="Barcelona"

                esPremium={false}

            />

        </div>

    );

}

Usuario.js (Hijo)

jsx

// Usuario.js

import React from "react";

function Usuario(props) {

    return (

        <div style={{ border: "1px solid #ccc", padding: "10px", margin: "10px" }}>

            <h2>Nombre: {props.nombre}</h2>

            <p>Edad: {props.edad} años</p>

            <p>Ciudad: {props.ciudad}</p>

            <p>Tipo: {props.esPremium ? "Usuario Premium" : "Usuario Básico"}</p>

        </div>

    );

}

export default Usuario;

---

🚀 Desestructuración de Props (Forma Moderna)

En lugar de usar props.nombre, podemos desestructurar:

jsx

// Saludar.js - Forma DESESTRUCTURADA

function Saludar({ nombre, edad, ciudad }) {

    return (

        <div>

            <h1>Hola {nombre}</h1>

            <p>Tienes {edad} años</p>

            <p>Vives en {ciudad}</p>

        </div>

    );

}

App.js correspondiente:

<Saludar nombre="Laura" edad={25} ciudad="Valencia" />

---

🎭 Ejemplo del Diagrama: Cadena de Props

  ┌─────────────────────┐

   │       App.js        │

   │  nombre="Agustín"   │

   └──────────┬──────────┘

              │

              ▼

   ┌─────────────────────┐

   │     Saludar.js      │

   │  Recibe: nombre     │

   │  Pasa: nombre       │

   └──────────┬──────────┘

              │

              ▼

   ┌─────────────────────┐

   │  MensajeFinal.js    │

   │  Recibe: nombre     │

   │  Muestra mensaje    │

   └─────────────────────┘

Código completo:

App.js:

jsx

import React from "react";

import Saludar from "./components/Saludar";

function App() {

    return <Saludar nombre="Agustín" />;

}

Saludar.js:

jsx

import React from "react";

import MensajeFinal from "./MensajeFinal";

function Saludar(props) {

    // Recibe nombre de App.js y lo pasa a MensajeFinal

    return <MensajeFinal nombre={props.nombre} />;

}

MensajeFinal.js:

jsx

import React from "react";

function MensajeFinal({ nombre }) {

    return <h2>¡Bienvenido, {nombre}!</h2>;

}

---

📝 Tipos de Valores que Pueden Ser Props

// App.js

function App() {

    return (

        <div>

            {/* STRING */}

            <Componente texto="Hola Mundo" />

            

            {/* NÚMERO (con llaves) */}

            <Componente numero={42} />

            

            {/* BOOLEANO */}

            <Componente activo={true} />

            

            {/* ARRAY */}

            <Componente lista={["manzana", "banana", "naranja"]} />

            

            {/* OBJETO */}

            <Componente usuario={{ nombre: "Ana", edad: 30 }} />

            

            {/* FUNCIÓN */}

            <Componente onClick={() => console.log("Click!")} />

        </div>

    );

}

---

⚠️ Reglas Importantes sobre Props

1. Props son de solo lectura

jsx

// ❌ ERROR: No puedes modificar props

function Componente(props) {

    props.nombre = "Nuevo Nombre"; // ¡ERROR!

    return <h1>{props.nombre}</h1>;

}

2. Props pueden tener valores por defecto

jsx

function Saludar({ nombre = "Invitado" }) {

    return <h1>Hola {nombre}</h1>;

}

// Si no pasamos nombre, mostrará "Hola Invitado"

<Saludar />

3. Props.children - contenido entre etiquetas

jsx

// App.js

<Caja>

    <p>Este contenido es props.children</p>

</Caja>

// Caja.js

function Caja(props) {

    return <div className="caja">{props.children}</div>;

}

---

🎯 Ejercicio Práctico

Crea un sistema de tarjetas de producto:

App.js:

jsx

import Producto from "./components/Producto";

function App() {

    return (

        <div>

            <Producto 

                nombre="Laptop Gamer"

                precio={999.99}

                enStock={true}

                categorias={["Tecnología", "Computadoras"]}

            />

            

            <Producto 

                nombre="Smartphone"

                precio={499.99}

                enStock={false}

                categorias={["Tecnología", "Móviles"]}

            />

        </div>

    );

}

Tu tarea: Crea el componente Producto.js que muestre:

• Nombre en <h2>

• Precio con formato "$999.99"

• Si está en stock (verde) o no (rojo)

• Las categorías como badges

---

📊 Resumen: Flujo de Información con Props

text

DATOS → PROPS → COMPONENTE → INTERFAZ

   ↓         ↓          ↓

App.js → Saludar → Pantalla del usuario

Ventajas de usar Props:

1. Reutilización: Un componente puede usarse con diferentes datos

2. Separación: La lógica y los datos están separados de la presentación

3. Mantenibilidad: Fácil de modificar y depurar

4. Composición: Puedes construir interfaces complejas combinando componentes simples

---

💡 Conceptos Clave

• Props = Propiedades que pasamos a componentes

• Unidireccional: Los datos fluyen de padre a hijo

• Inmutables: No se pueden modificar dentro del componente hijo

• Dinámicos: Pueden contener cualquier tipo de dato

• Obligatorios u opcionales: Puedes definir valores por defecto

---

✅ Conclusión

Los props son el sistema de comunicación entre componentes en React. Permiten que:

• Los componentes sean reutilizables con diferentes datos

• La información fluya desde componentes padres a hijos

• Mantengamos un código limpio y organizado

¡Ahora puedes crear componentes dinámicos que se adaptan a diferentes datos! 🎉

Próximo paso: Aprenderemos sobre el estado (state) para manejar datos que cambian dentro de un componente.