Propiedades de los Componentes en React
Atributo es a HTML lo que una Propiedad a un Componente
En html, cuándo creamos una etiqueta esta puede recibir atributos que le indican como funcionar o como mostrarse, por ejemplo las etiquetas input reciben diversos parámetros para transformarse: <input type="text" placeholer="Escribe un texto...">, <input type="password" placeholder="Escribe una contraseña>">, <input type="button" value="dame clic">.
En react, los atributos que son pasados a un componente se llaman Propiedades del Componente, y pueden accederse mediante this.props dentro de cualquier método del componente, incluido el método render.
Imaginemos que para pintar el componente Saludar necesitamos recibir el nombre de la persona que estamos saludando, algo así como <Saludar nombre="Fulano" /> o <Saludar nombre="Sutano" />, de tal forma que el componente base su vista, de acuerdo a las propiedades que recibe como se muestra en el código.
Observa que hemos cambiado el componente Saludar para que en lugar de pintar un <h1>Hola humano :D</h1> pinte un mensaje basado en la propiedad nombre que será recibida desde afuera. Dentro de jsx debemos colocar {} para poder acceder a nuestro código, en este caso usamos {`Hola ${this.props.nombre} :D`}. Recuerda que la cadena de texto `Hola ${...}` va a generar una cadena de la forma "Hola ...", en este caso, sustituimos ${this.props.nombre} con el contenido para que genere la cadena "Hola Fulano :D”.
Revisa el uso de la comilla especial de javascript: https://www.digitalocean.com/community/tutorials/how-to-work-with-strings-in-javascript
Ahora podemos pasar el parámetro nombre="..." al momento de crear el componente en App.
El resultado sería similar a la siguiente imagen.
Por ejemplo, la imagen actual se está pintando siempre con la misma ruta, sin embargo podemos recibir el parámetro url="..." con la url de la imagen para generar una imagen diferente en cada componente. Intenta llegar a los siguiente, colocar en App la etiqueta <Saludar nombre="Fulano" url="http://..." />. El componente debería quedar como sigue.
El resultado será similar al siguiente.
Conclusiones
Es importante aprender correctamente el uso de las propiedades del componente ya que es la forma mediante la cuál otros componentes le solicitan al componente en cuestión cómo debería funcionar. Las propiedades pueden ser divididas en propiedades de estado, propiedades de configuración, propiedades funcionales (o de enlace) y propiedades propagadas como veremos en futuras entregas más avanzadas.
Si te gustó esta entrega no olvides aplaudir y si deseas puedes aportar alguna donación por medio de paypal.
