Props

Las props (abreviatura de propiedades) son objetos de JavaScript que pasan datos de un componente padre a un componente hijo en React. Las props permiten que los componentes sean reutilizables y configurables, ya que pueden recibir datos dinámicos y comportarse de manera diferente según los datos proporcionados. Aquí tienes una explicación detallada junto con varios ejemplos:

1. Pasando props a un componente: Las props se pasan a un componente como atributos en su JSX. Por ejemplo:

   const MiComponente = (props) => {
       return <h1>Hola, {props.nombre}!</h1>;
   }
   
   const App = () => {
       return <MiComponente nombre="Juan" />;
   }
   

   En este ejemplo, la prop nombre se pasa al componente MiComponente con el valor "Juan".

2. Accediendo a props dentro del componente: Dentro de un componente funcional, puedes acceder a las props directamente como propiedades del objeto props. Por ejemplo:

   const MiComponente = (props) => {
       return <h1>Hola, {props.nombre}!</h1>;
   }
   

   Aquí, props.nombre accede al valor de la prop nombre.

3. Pasando múltiples props: Puedes pasar múltiples props a un componente separándolas por espacio en su JSX. Por ejemplo:

   const MiComponente = (props) => {
       return (
           <div>
               <h1>{props.saludo}</h1>
               <p>{props.mensaje}</p>
           </div>
       );
   }
   
   const App = () => {
       return (
           <MiComponente
               saludo="¡Hola!"
               mensaje="¡Bienvenido a mi aplicación!"
           />
       );
   }
   

4. Propiedades dinámicas: Las props pueden contener valores dinámicos, incluyendo variables y expresiones JavaScript. Por ejemplo:

   const nombre = "María";
   
   const MiComponente = (props) => {
       return <h1>Hola, {props.nombre}!</h1>;
   }
   
   const App = () => {
       return <MiComponente nombre={nombre} />;
   }
   

   Aquí, la prop nombre se establece dinámicamente utilizando la variable nombre.

5. Props en componentes de clase: En los componentes de clase, puedes acceder a las props utilizando this.props. Por ejemplo:

   class MiComponente extends React.Component {
       render() {
           return <h1>Hola, {this.props.nombre}!</h1>;
       }
   }
   

   Aquí, this.props.nombre accede al valor de la prop nombre.

En resumen, las props son una forma de pasar datos de un componente padre a un componente hijo en React. Permiten que los componentes sean configurables y reutilizables al recibir datos dinámicos y comportarse de manera diferente según los datos proporcionados.

https://fullstackopen.com/es/part1/introduccion_a_react#props-pasar-datos-a-componentes

https://www.w3schools.com/react/react_props.asp

https://react.dev/learn/passing-props-to-a-component