Introducción
En React, props (abreviatura de propiedades) son una forma de pasar datos de un componente padre a un componente hijo. Son como "argumentos" para una función en JavaScript, pero en este caso, se usan para personalizar y controlar los componentes.

¿Qué son las Props?

Las props son un objeto que contiene datos o funciones que el componente recibe como parámetros. Son de solo lectura, lo que significa que un componente no puede cambiar las props que recibe.

¿Cómo se usan las Props?

Se pasan como atributos en la etiqueta del componente.

1// Componente padre
2import React from "react";
3
4function App() {
5  return (
6    <div>
7      <Saludo nombre="María" />
8      <Saludo nombre="Juan" />
9    </div>
10  );
11}
12
13// Componente hijo
14function Saludo(props) {
15  return <h1>¡Hola, {props.nombre}!</h1>;
16}
17
18export default App;

1<div id="app"></div>

1import React, { useState } from "https://cdn.skypack.dev/react";
2import ReactDOM from "https://cdn.skypack.dev/react-dom";
3
4function Contador() {
5  // Definimos una variable de estado "contador" inicializada en 0
6  const [contador, setContador] = useState(0);
7
8  return (
9    <div>
10      <p>Contador: {contador}</p>
11      <button onClick={() => setContador(contador + 1)}>Incrementar</button>
12    </div>
13  );
14}
15
16function App(){
17  return <Contador/>
18}
19
20ReactDOM.render(<App />, document.getElementById('app'));

Explicación

1. En el componente padre App, pasamos nombre como una prop al componente Saludo.
2. En el componente hijo Saludo, usamos props.nombre para acceder al valor de la prop.

El resultado será:

¡Hola, María!
¡Hola, Juan!

Props con Objetos y Funciones

También podemos pasar objetos, arrays o funciones como props.

1function App() {
2  const usuario = { nombre: "Carlos", edad: 25 };
3  const mostrarMensaje = () => alert("Hola desde la función!");
4
5  return (
6    <div>
7      <Perfil datos={usuario} saludar={mostrarMensaje} />
8    </div>
9  );
10}
11
12function Perfil(props) {
13  return (
14    <div>
15      <p>Nombre: {props.datos.nombre}</p>
16      <p>Edad: {props.datos.edad}</p>
17      <button onClick={props.saludar}>Saludar</button>
18    </div>
19  );
20}
21
22export default App;

Explicación

1. Pasamos el objeto usuario como prop datos y la función mostrarMensaje como prop saludar.
2. En el componente Perfil, usamos props.datos.nombre, props.datos.edad y ejecutamos la función props.saludar al hacer clic en el botón.

Desestructuración de Props

Para hacer el código más limpio, podemos desestructurar las props.

1function Perfil({ datos, saludar }) {
2  return (
3    <div>
4      <p>Nombre: {datos.nombre}</p>
5      <p>Edad: {datos.edad}</p>
6      <button onClick={saludar}>Saludar</button>
7    </div>
8  );
9}

Esto elimina la necesidad de escribir props. cada vez. El resultado será el mismo.

Props por Defecto

Podemos definir valores predeterminados para las props si no se pasan desde el componente padre.

1function Saludo({ nombre = "Invitado" }) {
2  return <h1>¡Hola, {nombre}!</h1>;
3}
4
5function App() {
6  return (
7    <div>
8      <Saludo />
9      <Saludo nombre="Ana" />
10    </div>
11  );
12}
13
14export default App;

Resultado

¡Hola, Invitado!
¡Hola, Ana!

Validación de Props con prop-types

Para asegurarnos de que las props son del tipo correcto, usamos la librería prop-types.

1. Instala la librería:

   1npm install prop-types

2. Usa prop-types en el componente:

1import PropTypes from "prop-types";
2
3function Saludo({ nombre, edad }) {
4  return (
5    <div>
6      <h1>¡Hola, {nombre}!</h1>
7      <p>Edad: {edad}</p>
8    </div>
9  );
10}
11
12Saludo.propTypes = {
13  nombre: PropTypes.string.isRequired,
14  edad: PropTypes.number,
15};
16
17export default Saludo;

• string.isRequired: nombre debe ser una cadena y es obligatorio.
• number: edad debe ser un número, pero es opcional.

Conclusión

Las props son esenciales en React porque permiten que los componentes sean reutilizables y dinámicos. Con ellas, puedes pasar datos y controlar el comportamiento de tus componentes de manera sencilla y eficiente.