Funcionamiento de Props en React de una aplicación de contactos
Los Props se refieren a las propiedades las cuales cumplen un rol importante en el proceso de desarrollo de una aplicación o página web. Los componentes son los bloques de construcción de React y estos componentes usan Props para mejorar su funcionalidad y poder reutilizar el código.
Para enseñaros como utilizar Props en React, lo vamos a aplicar en una aplicación de contactos.
En primer lugar os enseñamos una tarjeta de contacto,
donde contiene información, como su nombre, la foto , el número de teléfono y su correo electrónico.
Lo hemos guardado en nuestro componente llamado index.js. Allí mostramos la página.
El código de esta tarjeta de contacto es bastante sencillo, por lo que vemos es un simple código de HTML.
Cada etiqueta guarda su información. Por ejemplo estamos viendo que en la etiqueta img, contiene un src que es la ruta para mostrar la imagen que queremos.
En nuestro componente Tarjeta, llamamos a la función Tarjeta, donde tenemos que poner como parámetro la propiedad Props : Tarjeta(props).
Con está propiedad, podemos guardar la información o dato y le podemos llamar usando sus atributos, y también tienen que estar entre corchetes : {props.img} en este caso estamos llamando al atributo que contiene la imagen.
Despúes en el index, podemos llamar a nuestro componente, y le ponemos como etiqueta. En cada atributo guardamos la información que querremos
En el código siguiente, podemos comparar con el anterior HTML sencillo que hemos creado al principio, y con el componente Tarjeta que contiene la propiedad Props vemos que cada uno es similar y contiene la misma información y dato.
Pero hay uno que tiene bastante código y es más complejo sin utilizar el Props, y el otro tiene poco código , está organizado y es más sencillo.
Aunque el código es distinto pero el resultado es el mismo, vemos que la primera tarjeta de contacto de Luis Enrique es de HTML y la segunda tarjeta es con el componente Props.
Pero qué pasaría si tuviéramos una lista de contactos, y en la cual está guardado en un array.
Sería muy complicado hacer muchos HTML como el primer apartado.
A continuación, vemos el código de Array que contienen varios contactos.
Podemos utilizar el Props para poder organizarlo, hacerlo más sencillo y ordenarlo.
Para poder llamar a los Arrays, debemos llamar por posiciones que tiene en ese Array.
En código, vemos que llamamos al Array contactos, después indicamos la posición y por último queremos la información , indicando su atributo.
Siempre es importante que cuando llamamos a la propiedad Props , este entre llaves {}.
Si comparamos con el código de HTML, en vez de este sencillo código, lo hubiérmaos hecho bastante largo.
Al final este es el resultado de nuestro código:
Autor/a: Xiang Zhou Xiang
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma
Centro: Tajamar
Año académico: 2022-2023
Código / recursos utilizados / Otros datos de interés: