9.3-Tutorial de Componentes React con Props -SSS

Tutorial Sencillo de Componentes React con Props

Ejemplo 1: Componente Saludo (simple)

Componente Padre: App.js

jsx

function App() {

return (

<div>

</div>

);

}

Componente Hijo: Saludo.js

jsx

function Saludo(props) {

return (

<div style={{

border: '1px solid gray',

padding: '10px',

margin: '10px',

borderRadius: '5px'

}}>

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

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

</div>

);

}

Ejemplo 2: Componente Producto (con objeto)

Componente Padre: App.js

function App() {

const producto1 = {

nombre: "Laptop",

precio: 800,

stock: true

};

const producto2 = {

nombre: "Mouse",

precio: 25,

stock: false

};

return (

<div>

</div>

);

}Componente Hijo: Producto.js

function Producto(props) {

return (

<div style={{

border: '1px solid blue',

padding: '15px',

margin: '10px',

borderRadius: '8px'

}}>

<h4>{props.producto.nombre}</h4>

<p>Precio: ${props.producto.precio}</p>

<p>Stock: {props.producto.stock ? "Disponible" : "Agotado"}</p>

</div>

);}

Ejemplo 3: Componente Lista (con array)

Componente Padre: App.js

function App() {

const tareas = ["Estudiar React", "Hacer ejercicio", "Leer un libro"];

const amigos = ["Juan", "María", "Pedro"];

return (

<div>

</div>

);

} Componente Hijo: Lista.js

function Lista(props) {

return (

<div style={{

border: '1px solid green',

padding: '15px',

margin: '10px',

borderRadius: '8px'

}}>

<h3>{props.titulo}</h3>

<ul>

{props.items.map((item, index) => (

))}

</ul>

</div>

);}

Ejemplo 4: Desestructuración de Props

Componente Padre: App.js

jsx

function App() {

return (

<div>

<Perfil

nombre="Luis"

profesion="Programador"

experiencia={3}

</div>

);

}

Componente Hijo: Perfil.js

jsx

// Usando desestructuración

function Perfil({ nombre, profesion, experiencia }) {

return (

<div style={{

border: '1px solid purple',

padding: '15px',

margin: '10px',

borderRadius: '8px'

}}>

<h3>{nombre}</h3>

<p>Profesión: {profesion}</p>

<p>Experiencia: {experiencia} años</p>

</div>

);

}

Ejemplo 5: Props por Defecto

Componente Padre: App.js

function App() {

return (

<div>

<Boton /> {/* Usará valores por defecto */}

</div>

);

}

Componente Hijo: Boton.js

function Boton({ texto = "Click", color = "blue", tamanio = "normal" }) {

const estilo = {

padding: tamanio === "grande" ? "15px 30px" : "10px 20px",

backgroundColor: color,

color: "white",

border: "none",

borderRadius: "5px",

margin: "5px",

cursor: "pointer"

};

return <button style={estilo}>{texto}</button>;

}

DUDA 1: ¿Qué es `const saludar = (nombre) => { ... }`?

Explicación simple:

const saludar = (nombre) => {
  alert(`Hola ${nombre}`);
};

Esto SÍ define una función. Piensa en const saludar como un nombre para la función. Es equivalente a:

function saludar(nombre) {
  alert(`Hola ${nombre}`);
}

Analogía:

`const saludar` = "Voy a guardar algo en una caja llamada 'saludar'"
`= (nombre) => { alert(...) }` = "Lo que guardo es una función que recibe 'nombre' y muestra alerta"

Cómo se puede usar:

// Opción 1: Llamarla directamente
saludar("Juan");  // Muestra: "Hola Juan"

// Opción 2: Pasar la función como referencia
const miFuncion = saludar;  // Guarda la función en otra variable
miFuncion("Ana");          // Muestra: "Hola Ana"

📌 DUDA 2: ¿Por qué a veces se usa `() => saludar("Mundo")` y a veces `saludar`?

Esta es la clave para entender React. Hay dos casos diferentes:

CASO A: Cuando la función NO necesita parámetros

// En el padre
const mostrarMensaje = () => {
  alert("¡Hola!");
};

// En el return
<Accion 
  accion={mostrarMensaje}  // ← SIN paréntesis, SIN arrow function adicional
  texto="Saludar" 
/>

¿Por qué?

mostrarMensaje ya es una función lista para ejecutar
No necesita parámetros adicionales
Solo pasamos la referencia (el "teléfono" de la función)

CASO B: Cuando la función SÍ necesita parámetros

// En el padre
const saludar = (nombre) => {
  alert(`Hola ${nombre}`);
};

// En el return
<Accion 
  accion={() => saludar("Mundo")}  // ← CON arrow function que envuelve
  texto="Saludar" 
/>

¿Por qué la arrow function extra?

saludar("Mundo") → Ejecuta inmediatamente (¡ERROR!)
() => saludar("Mundo") → Crea una nueva función que, cuando se ejecute, llamará a saludar("Mundo")

🎯 Comparación Visual:

// EJEMPLO 1: Sin parámetros
const saludarSimple = () => {
  alert("¡Hola Mundo!");
};

// En el return → PASO DIRECTO
<Accion accion={saludarSimple} />

// EJEMPLO 2: Con parámetros
const saludarConNombre = (nombre) => {
  alert(`Hola ${nombre}`);
};

// En el return → ENVOLVIENDO CON ARROW FUNCTION
<Accion accion={() => saludarConNombre("Mundo")} />

🔍 Entendiendo la Diferencia con Ejemplos:

Ejemplo 1: Lo que NO debes hacer (ERROR COMÚN)

// ❌ MAL: Se ejecuta inmediatamente al renderizar
<Accion accion={saludar("Mundo")} />
// Esto muestra la alerta INMEDIATAMENTE al cargar la página

// ✅ BIEN: Se crea una función que se ejecutará después
<Accion accion={() => saludar("Mundo")} />
// Esto muestra la alerta SOLO cuando hagan clic

Ejemplo 2: Alternativa correcta

// También podrías hacer esto:
const saludarMundo = () => {
  saludar("Mundo");
};

// Y luego pasar la referencia
<Accion accion={saludarMundo} />

🧠 Regla Muy Simple para Recordar:

// Si tu función original NO tiene parámetros:
<Componente funcion={nombreFuncion} />

// Si tu función original SÍ tiene parámetros:
<Componente funcion={() => nombreFuncion(parametro)} />

🎮 Ejemplo Práctico para Entender:

Imagina estas funciones:

// Función A: No necesita información adicional
const encenderLuz = () => {
  console.log("Luz encendida");
};

// Función B: Necesita saber QUÉ luz encender
const encenderLuzEspecifica = (nombreLuz) => {
  console.log(`Encendiendo: ${nombreLuz}`);
};

Cómo las pasarías a un botón:

// Botón 1: Solo encender (sin especificar cuál)
<Boton 
  accion={encenderLuz}  // ← Directo, no necesita preparación
  texto="Encender"
/>

// Botón 2: Encender luz específica
<Boton 
  accion={() => encenderLuzEspecifica("Sala")}  // ← Prepara la llamada
  texto="Encender luz de Sala"
/>

📚 Resumen Final:

`const miFuncion = () => { ... }` → Sí define una función
`miFuncion` → Es la referencia a la función (se pasa cuando no hay parámetros)
`() => miFuncion(param)` → Crea una nueva función que llama a la original con parámetros
`miFuncion(param)` → Ejecuta inmediatamente (generalmente ERROR en React)

💡 Ejercicio Mental:

Si vieras esto:

<Accion 
  accion={saludar} 
  texto="Saludar" 
/>

¿Cómo tendría que estar definida saludar?

const saludar = () => {
  // ¿Qué pondrías aquí?
};

Respuesta: Tendría que ser una función que NO requiera parámetros, por ejemplo:

const saludar = () => {
  alert("¡Hola a todos!");
};

Componente Padre: AppSaludo.js

function AppSaludo() {
  const saludar = (nombre) => {
    alert(`Hola ${nombre}`);
  };

  return (
    <div>
      <Accion 
        accion={() => saludar("Mundo")} 
        texto="Saludar" 
      />
    </div>
  );
}

Componente Hijo: Accion.js

function Accion({ accion, texto }) {
  return (
    <button 
      onClick={accion}
      style={{
        padding: "10px 20px",
        margin: "10px",
        backgroundColor: "green",
        color: "white",
        border: "none",
        borderRadius: "5px"
      }}
    >
      {texto}
    </button>
  );
}

Componente Padre: AppCalculo.js

function AppCalculo() {
  const sumar = (a, b) => {
    return a + b;
  };

  const multiplicar = (a, b) => {
    return a * b;
  };

  return (
    <div>
      <Resultado 
        calcular={() => sumar(5, 3)} 
        titulo="Sumar 5 + 3" 
      />
      <Resultado 
        calcular={() => sumar(10, 7)} 
        titulo="Sumar 10 + 7" 
      />
    </div>
  );
}

Componente Hijo: Resultado.js

function Resultado({ calcular, titulo }) {
  return (
    <div style={{
      border: '1px solid orange',
      padding: '15px',
      margin: '10px',
      borderRadius: '8px'
    }}>
      <h4>{titulo}</h4>
      <p>Resultado: {calcular()}</p>
    </div>
  );
}

Ejemplo 6: Props con Funciones

Componente Padre: App.js

function App() {

const saludar = (nombre) => {

alert(`Hola ${nombre}`);

};

const sumar = (a, b) => {

return a + b;

};

return (

<div>

<Accion

accion={() => saludar("Mundo")}

texto="Saludar"

<Resultado

calcular={() => sumar(5, 3)}

titulo="Sumar 5 + 3"

</div>

);}

Componente Hijo: Accion.js

function Accion({ accion, texto }) {

return (

<button

onClick={accion}

style={{

padding: "10px 20px",

margin: "10px",

backgroundColor: "green",

color: "white",

border: "none",

borderRadius: "5px"

}}

{texto}

</button>

);}

Componente Hijo: Resultado.js

jsx

function Resultado({ calcular, titulo }) {

return (

<div style={{

border: '1px solid orange',

padding: '15px',

margin: '10px',

borderRadius: '8px'

}}>

<h4>{titulo}</h4>

<p>Resultado: {calcular()}</p>

</div>

);

}

Ejemplo Completo: Tienda Simple

Componente Padre: App.js

function App() {

const productos = [

{ id: 1, nombre: "Camiseta", precio: 20, stock: true },

{ id: 2, nombre: "Pantalón", precio: 40, stock: true },

{ id: 3, nombre: "Zapatos", precio: 60, stock: false }

];

const agregarAlCarrito = (productoNombre) => {

console.log(`Añadido: ${productoNombre}`);

};

return (

<div>

<h2>Tienda Online</h2>

{productos.map((producto) => (

<ProductoTienda

key={producto.id}

producto={producto}

onAgregar={agregarAlCarrito}

))}

</div>

);

}

Componente Hijo: ProductoTienda.js

function ProductoTienda({ producto, onAgregar }) {

const estilo = {

border: '1px solid #ddd',

padding: '15px',

margin: '10px',

borderRadius: '8px',

backgroundColor: producto.stock ? 'white' : '#f8f8f8'

};

return (

<h3>{producto.nombre}</h3>

<p>Precio: ${producto.precio}</p>

<p>Estado: {producto.stock ? "✅ Disponible" : "❌ Agotado"}</p>

<button

onClick={() => onAgregar(producto.nombre)}

disabled={!producto.stock}

style={{

padding: '8px 16px',

backgroundColor: producto.stock ? 'blue' : 'gray',

color: 'white',

border: 'none',

borderRadius: '4px',

cursor: producto.stock ? 'pointer' : 'not-allowed'

}}

{producto.stock ? 'Agregar al carrito' : 'Sin stock'}

</button>

</div>

);

}

Resumen Sencillo

// 1. Props básicas

// 2. Con objeto

// 3. Con array

// 4. Con función

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

// 5. Desestructuración

function Componente({ texto, numero }) {

return <p>{texto} - {numero}</p>;

}

// 6. Valores por defecto

function Componente({ texto = "Default" }) {

return <p>{texto}</p>;

}

Este tutorial simplificado te muestra los conceptos esenciales de props en React sin CSS complejo ni demasiados elementos. Cada ejemplo tiene su componente padre e hijo claramente separados.

Buscar este blog

1-Aprende React JS desde Cero | +7 Proyectos reales