Props en componentes react

En React, los props (abreviatura de "properties") son un mecanismo para pasar datos de un componente padre a un componente hijo. Los props permiten que los componentes sean dinámicos y reutilizables, ya que pueden recibir información externa para personalizar su comportamiento o su presentación.

⏺️ Características clave de los props:

• Inmutabilidad: Los props son solo de lectura en el componente hijo. El componente hijo no puede modificarlos directamente, pero puede usarlos para renderizar contenido o realizar lógica.
• Datos unidireccionales: Los props siguen el flujo de datos unidireccional, es decir, siempre se pasan del componente padre al componente hijo.
• Personalización: Permiten que un componente hijo sea más flexible y personalizable al recibir diferentes valores de un componente padre.

Prerrequisitos

• Instalación react se explica a detalle como instar y configurar un entono de trabajo para react.
• Estructura de un proyecto React    Conocer los archivos principales, index.js, App.js, carpetas, etc.
• JSX  Sintaxis básica, reglas JSX, expresiones, fragmentos (<> </>).
• En el post de componentes en React se dan los primeros pasos para crear un componente.

📜 ¿Cómo se usan los props en React?

Para entender como usar los props, vamos a realizar el siguiente ejemplo:

1️⃣​ Procedemos a crear un proyecto react como lo realizamos en Instalar React

npm create vite@latest

Donde seleccionamos:

> npx
> create-vite
|
o  Project name:
|  practicas-react
|
o  Select a framework:
|  React
|
o  Select a variant:
|  TypeScript

Por ultimo, ejecutamos

cd practicas-react
npm install
npm run dev

Vamos a crear un directorio llamado components en el directorio src donde vamos a realizar lo siguiente

2️⃣ Crearemos el siguiente componente Parent.tsx dentro de components, en donde vamos a pasar los props como atributos en el tsx

export default function Parent() {
  return (
    <div>
      <Child name="Juan" age={30} />
    </div>
  )
}

Ahora crearemos el componente Child.tsx el cual recibirá los props como un objeto, estos se pueden acceder directamente dentro del componente como parámetros de la función o como propiedades del objeto props:

export default function Child(props) {
  return (
    <div>
      <p>Mi nombre es {props.name} y tengo {props.age} años.</p>
    </div>
  );
}

O utilizando la desestructuración de objetos para hacer que el código sea más limpio:

export default function Child({ name, age }:{ name: string, age:number }) {
  return (
    <div>
      <p>Mi nombre es {name} y tengo {age} años.</p>
    </div>
  );
}

Colocamos en App.tsx el componente Parent.tsx y comprobamos en el navegador que se visualice la información.

import './App.css'
import Child from './components/Child'

function App() {
  
  return (
    <div>
      <h1>Bienvenido a mi aplicación</h1>
      <Child name="Juan" age={30}/>
    </div>
  )
}

export default App

¿Cómo organizar los props en un proyecto de React?

La organización de los props depende de la complejidad de tu aplicación y del diseño de los componentes.

⏺️ Uso de la Desestructuración

Cuando pasas muchos props a un componente, puedes desestructurarlos directamente en la función del componente para hacerlo más limpio y legible.

function Card({ title, description, imageUrl }) {
  return (
    <div className="card">
      <img src={imageUrl} alt={title} />
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}

⏺️ Definición de propTypes para validación

Si tienes componentes complejos o un equipo de trabajo, puedes usar la librería prop-types para definir los tipos y la obligatoriedad de los props, lo que ayuda a la documentación y el debugging.

import PropTypes from 'prop-types';

function Card({ title, description, imageUrl }) {
  return (
    <div className="card">
      <img src={imageUrl} alt={title} />
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}

Card.propTypes = {
  title: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
  imageUrl: PropTypes.string.isRequired,
};

⏺️ Utilizar defaultProps para valores por defecto

Si algunos props no se pasan desde el componente padre, puedes usar defaultProps para asignarles un valor por defecto.

Card.defaultProps = {
  title: 'Título por defecto',
  description: 'Descripción por defecto',
  imageUrl: 'https://via.placeholder.com/150',
};

⏺️ Evitar pasar demasiados props

Si un componente hijo recibe una cantidad muy grande de props, es posible que esté manejando demasiadas responsabilidades. En ese caso, sería una buena práctica mover parte de esa lógica a un componente más pequeño o considerar el uso de Context API o Redux para manejar el estado global.

⏺️ Agrupar props relacionados en un objeto

Si varios props están relacionados, puedes pasarlos como un objeto para hacer el código más limpio. Esto puede ser útil cuando trabajas con muchos datos en un solo componente.

⏺️ Pasar funciones como props

Puedes pasar funciones como props a los componentes hijos para manejar eventos o actualizar el estado del componente padre. Esto es útil para la comunicación entre componentes padres e hijos.

function Parent() {
  const handleClick = () => {
    console.log('¡Botón clickeado!');
  };
  return <Child onClick={handleClick} />;
}

function Child({ onClick }) {
  return <button onClick={onClick}>Haz clic aquí</button>;
}