21. Pasando props básicos entre componentes

 

21. Pasando props básicos entre componentes en React

Introducción

En este tutorial aprenderemos a usar props en React para crear componentes reutilizables y dinámicos. Los props son propiedades que podemos pasar de un componente padre a un componente hijo.

Paso 1: Crear el componente Saludar

Primero, creamos nuestro componente funcional Saludar.js en la carpeta src/components:

jsx

// src/components/Saludar.js

import React from "react";


export default function Saludar() {

    return (

        <div>

            <h2>Hola Agustín</h2>

        </div>

    );

}

Este componente inicialmente muestra un saludo estático.



Paso 2: Usar el componente en App.js

Importamos y usamos nuestro componente en App.js:

jsx

// src/App.js

import React from "react";

import logo from "./logo.svg";

import "./App.css";

import Saludar from "./components/Saludar";


function App() {

    return (

        <div className="App">

            <header className="App-header">

                <img src={logo} className="App-logo" alt="logo" />

                <Saludar />

                <Saludar />

            </header>

        </div>

    );

}


export default App;

En este punto, ambos componentes muestran "Hola Agustín".





Paso 3: Introducir props

Modificamos Saludar.js para aceptar props:

jsx

// src/components/Saludar.js

import React from "react";


export default function Saludar(props) {

    console.log(props);

    return (

        <div>

            <h2>Hola {props.name}</h2>

        </div>

    );

}

IMPORTANTE: Para usar variables en JSX, debemos envolverlas entre llaves {}.

Paso 4: Pasar props desde App.js

Ahora pasamos diferentes nombres a cada componente:

jsx

// src/App.js

function App() {

    return (

        <div className="App">

            <header className="App-header">

                <img src={logo} className="App-logo" alt="logo" />

                <Saludar name="Agustin Navarro Galdon" />

                <Saludar name="Paco" />

            </header>

        </div>

    );

}

Resultado:

  • Primer componente: "Hola Agustin Navarro Galdon"

  • Segundo componente: "Hola Paco"

Paso 5: Añadir más props

Podemos pasar tantas props como necesitemos. Añadamos la edad:

jsx

// src/components/Saludar.js

export default function Saludar(props) {

    console.log(props);

    return (

        <div>

            <h2>Hola {props.name}, tiene {props.edad} años.</h2>

        </div>

    );

}

Paso 6: Pasar múltiples props

jsx

// src/App.js

function App() {

    return (

        <div className="App">

            <header className="App-header">

                <img src={logo} className="App-logo" alt="logo" />

                <Saludar name="Agustin Navarro Galdon" edad="26" />

                <Saludar name="Paco" edad="31" />

            </header>

        </div>

    );

}

Resultado:

  • "Hola Agustin Navarro Galdon, tiene 26 años."

  • "Hola Paco, tiene 31 años."

Paso 7: Ver props en consola

Si revisamos la consola del navegador, veremos que cada instancia del componente recibe un objeto con sus props:

javascript

// Para el primer componente:

{ name: "Agustin Navarro Galdon", edad: "26" }


// Para el segundo componente:

{ name: "Paco", edad: "31" }

Conceptos clave aprendidos

1. Qué son los props

  • Son propiedades que se pasan de un componente padre a un hijo

  • Permiten que los componentes sean reutilizables y dinámicos

  • Llegan al componente como un objeto llamado props

2. Sintaxis para pasar props

jsx

<Componente nombrePropiedad="valor" otraPropiedad="valor2" />

3. Sintaxis para recibir props

jsx

function Componente(props) {

    return <div>{props.nombrePropiedad}</div>;

}


4. Uso de variables en JSX

// Correcto:

<h2>Hola {props.name}</h2>


// Incorrecto (se mostraría literalmente "props.name"):

<h2>Hola props.name</h2>

Ventajas de usar props

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

  2. Dinamismo: Los componentes pueden cambiar su comportamiento según los datos recibidos

  3. Mantenibilidad: Los datos fluyen de forma predecible de padre a hijo

  4. Legibilidad: Es claro qué datos necesita cada componente

Ejercicio práctico

Intenta modificar el componente Saludar para que acepte:

  1. Un prop ciudad que muestre la ciudad de la persona

  2. Un prop profesion que muestre su profesión

  3. Usa todos los props en el saludo final

Conclusión

Los props básicos son la forma más simple de comunicación entre componentes en React. Nos permiten crear componentes genéricos que se especializan según los datos que reciben, lo cual es fundamental para construir aplicaciones escalables y mantenibles.

En el siguiente nivel, aprenderemos a pasar objetos completos, arrays, funciones y otros tipos de datos complejos a través de props

Comentarios

Publicar un comentario

Entradas más populares de este blog

18-Ciclo de Vida de un Componente React

  Ciclo de Vida de un Componente React Fases del Ciclo de Vida: 1. Montaje (Mounting) El componente se crea y se inserta en el DOM. 2. Actualización (Updating) El componente se re-renderiza debido a cambios en props o estado. 3. Desmontaje (Unmounting) El componente se elimina del DOM. Diagrama Completo del Ciclo de Vida- En Componentes de Clase: class MiComponente extends React . Component {    // 1. CONSTRUCTOR (montaje)    constructor ( props ) {      super ( props );      this . state = { contador : 0 };     console . log ( 'constructor' );    } // 2. getDerivedStateFromProps (montaje/actualización)    static getDerivedStateFromProps ( props , state ) {     console . log ( 'getDerivedStateFromProps' );      return null ; // Retorna nuevo estado o null    } // 3. RENDER (montaje/actualización)    render ()...
Leer más

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)...
Leer más

17-Componentes en React-estado

  Componentes en React Concepto Básico Los componentes son los bloques fundamentales de una aplicación en React. Son piezas independientes y reutilizables de código que definen: Cómo debe verse una parte de la UI (estructura HTML) Cómo debe comportarse (lógica y funcionalidad) Analogía Imagina que estás construyendo una casa: Componente = Habitación (cocina, baño, dormitorio) Cada habitación tiene su propio diseño y función Puedes reutilizar el mismo diseño de dormitorio varias veces Juntas todas las habitaciones para formar la casa completa Tipos de Componentes 1. Componentes Funcionales (Recomendados actualmente) javascript // Componente como función function Saludo ( props ) {    return < h1 > Hola , { props . nombre } !</ h1 > ; } // Con arrow function const Boton = ({ texto , onClick }) => {    return < button onClick = { onClick } > { texto } </ button > ; }; 2. Componentes de Clase (Legacy) javascript class Contador...
Leer más