Imagina que creas un componente UserCard. Si el nombre y la edad están escritos directamente en el código, necesitarías un componente diferente para cada usuario. Eso no es reutilizable — es copiar y pegar disfrazado.
Las props (propiedades) son la forma de pasar datos a un componente. Funcionan exactamente como los argumentos de una función — porque un componente es una función.
Un componente, datos diferentes, resultados diferentes. Esto es reutilización real.
El padre define los datos que quiere pasar.
La forma más común de recibir props es con desestructuración directamente en los parámetros:
También puedes recibir props como objeto y acceder con props.nombre, pero la desestructuración es más limpia.
Puedes pasar cualquier tipo de dato como prop:
Los strings van entre comillas. Todo lo demás va entre llaves {}.
Si una prop no se pasa, su valor es undefined. Puedes definir valores por defecto:
Regla fundamental: nunca modifiques una prop dentro del componente.
Las props fluyen en una sola dirección: del padre al hijo. El hijo lee, nunca escribe. Esto hace que el flujo de datos sea predecible y fácil de razonar.
UserCard.js, modifica el componente para que reciba nombre, edad y emoji como props y los muestreApp.js, usa <UserCard /> al menos 3 veces con datos diferentesLas props son el sistema de comunicación de React. Un componente sin props es una caja negra. Un componente con props es una pieza flexible que se adapta a cualquier contexto.