El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

Introducción

En React, los componentes son la base de la construcción de interfaces de usuario. Para que estos componentes sean reutilizables y dinámicos, necesitan una forma de recibir datos. Aquí es donde entran en juego las "props" (abreviatura de "properties"). Las props permiten pasar datos desde un componente padre a un componente hijo, haciendo que los componentes sean más flexibles y modulares.

Conceptos Clave

Props: Son objetos que contienen información que se pasa desde un componente padre a un componente hijo.
Inmutabilidad: Las props son inmutables, lo que significa que no pueden ser modificadas por el componente que las recibe.
Reutilización de Componentes: Las props permiten que los componentes sean reutilizables con diferentes datos.

Ejemplo Básico

Paso 1: Crear un Componente Padre

Primero, crearemos un componente padre que pasará datos a un componente hijo.

// App.js
import React from 'react';
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting name="Juan" />
      <Greeting name="María" />
    </div>
  );
}

export default App;

Paso 2: Crear un Componente Hijo

Ahora, crearemos el componente hijo que recibirá las props.

// Greeting.js
import React from 'react';

function Greeting(props) {
  return <h1>Hola, {props.name}!</h1>;
}

export default Greeting;

Explicación del Código

Componente Padre (App.js):
- Importamos el componente Greeting.
- Usamos el componente Greeting dos veces, pasando diferentes valores para la prop name.
Componente Hijo (Greeting.js):
- El componente Greeting recibe las props como un argumento.
- Utiliza props.name para mostrar un saludo personalizado.

Props con Desestructuración

Para hacer el código más limpio, podemos desestructurar las props directamente en los parámetros de la función.

// Greeting.js
import React from 'react';

function Greeting({ name }) {
  return <h1>Hola, {name}!</h1>;
}

export default Greeting;

Props por Defecto

Podemos definir valores por defecto para las props en caso de que no se pasen desde el componente padre.

// Greeting.js
import React from 'react';

function Greeting({ name = "Invitado" }) {
  return <h1>Hola, {name}!</h1>;
}

export default Greeting;

Validación de Props con PropTypes

Para asegurarnos de que las props recibidas son del tipo correcto, podemos usar la biblioteca prop-types.

Instalación

npm install prop-types

Uso

// Greeting.js
import React from 'react';
import PropTypes from 'prop-types';

function Greeting({ name }) {
  return <h1>Hola, {name}!</h1>;
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

export default Greeting;

Ejercicio Práctico

Ejercicio

Crea un componente llamado UserCard que reciba las siguientes props:
- username (string)
- age (number)
- isAdmin (boolean)
El componente debe mostrar un mensaje que incluya el nombre de usuario, la edad y si el usuario es administrador o no.

Solución

// UserCard.js
import React from 'react';
import PropTypes from 'prop-types';

function UserCard({ username, age, isAdmin }) {
  return (
    <div>
      <h2>Usuario: {username}</h2>
      <p>Edad: {age}</p>
      <p>{isAdmin ? "Administrador" : "Usuario Regular"}</p>
    </div>
  );
}

UserCard.propTypes = {
  username: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
  isAdmin: PropTypes.bool.isRequired,
};

export default UserCard;

// App.js
import React from 'react';
import UserCard from './UserCard';

function App() {
  return (
    <div>
      <UserCard username="Juan" age={30} isAdmin={true} />
      <UserCard username="María" age={25} isAdmin={false} />
    </div>
  );
}

export default App;

Conclusión

Las props son una herramienta fundamental en React para pasar datos entre componentes. Entender cómo funcionan y cómo utilizarlas correctamente es crucial para construir aplicaciones React eficientes y modulares. En este módulo, hemos cubierto los conceptos básicos de las props, cómo pasarlas y validarlas, y cómo hacer que los componentes sean más reutilizables y robustos.

Props: Pasando Datos a Componentes

Introducción

Conceptos Clave

Ejemplo Básico

Paso 1: Crear un Componente Padre

Paso 2: Crear un Componente Hijo

Explicación del Código

Props con Desestructuración

Props por Defecto

Validación de Props con PropTypes

Instalación

Uso

Ejercicio Práctico

Ejercicio

Solución

Conclusión

Curso de React

Módulo 1: Introducción a React

Módulo 2: Componentes de React

Módulo 3: Trabajando con Eventos

Módulo 4: Conceptos Avanzados de Componentes

Módulo 5: Hooks de React

Módulo 6: Enrutamiento en React

Módulo 7: Gestión del Estado

Módulo 8: Optimización del Rendimiento

Módulo 9: Pruebas en React

Módulo 10: Temas Avanzados

Módulo 11: Proyecto: Construyendo una Aplicación Completa