Crear un componente photo en React

Autor: | Última modificación: 27 de septiembre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

React es una librería de JavaScript muy poderosa con la que podemos unir código JavaScript con código HTML. Esta librería se diferencia de otras por ser fundamental a la hora de desarrollar SPA o single page application. En este post, te enseñaremos cómo crear un componente photo en React, un objeto personalizado para reemplazar el elemento img de HTML.

¿Qué es un componente photo en React?

En nuestro post sobre crear un sustituto de input en React, hemos hablado de cómo crear componentes propios dentro de nuestro proyecto para reemplazar los elementos HTML por defecto. Esta práctica nos permite personalizar los elementos HTML sin perder sus propiedades, pues encapsula el elemento y le añade las propiedades que necesite cada proyecto.

Entonces, ¿qué es un componente photo en React? Pues es un componente que podemos crear cuando queremos reemplazar el elemento HTML img para acceder siempre al mismo archivo de imagen y pasarle distintas propiedades.

Si eres nuevo en este espacio y no conoces mucho sobre la librería React, te invitamos a consultar su documentación en la página oficial reactjs.org. Además, puedes consultar la sección de desarrollo web de nuestro blog, donde encontrarás mucho contenido sobre esta herramienta.

¿Cómo crear un componente photo en React?

Al igual que con el sustituto de componente input, para crear un componente photo en React lo primero que debemos hacer es crear un archivo nuevo. En nuestro caso, crearemos un archivo Photo.js dentro de nuestra carpeta components, pero tú puedes ordenarlo y llamarlo como quieras. Si, digamos, quieres un componente para las fotos de perfil no modificadas, podrías llamarlo DefaultProfilePhoto.

En este nuevo archivo, insertaremos las siguientes líneas de código:

import React from ‘react’;

import classNames from ‘classnames’;

import defaultPhoto from ‘../../ assets/default_profile.png’;

import ‘./Photo.css’:

const Photo = ({className, …props)}

<img

className = {classNames (‘photo’, classNames)}

src= {defaultphoto}

alt= » «

{…props}

/>

);

export default Photo

Como puedes ver, hemos logrado crear un componente photo en React que siempre lleva al mismo archivo de imagen. Este componente pasa todas las props que recibe (className, …props) al elemento img que tiene dentro. Esto hace que podamos tratar al componente photo directamente como si fuera un img.

De este modo, convertimos este elemento en un componente propio de nuestro proyecto. Esto nos permite reutilizar el componente a lo largo de nuestro código. Además, nos da la flexibilidad de cambiar sus detalles cuando queramos, pues todo lo tendremos en un mismo sitio y se modificará a nivel global.

Más allá de las props, para crear un componente photo en React debemos pasarle el acceso a una imagen determinada. Nosotros hemos hecho esto creando una variable defaultPhoto con la ruta a la imagen png default_profile. También podrías usar este componente y variable para hacer una llamada a la API y obtener la foto que ha elegido el usuario en el formulario.

En las líneas de código de nuestro componente, también existen distintos temas que hemos aprendido en otros posts. Cuando importamos classNames, estamos hablando de la herramienta classnames para React. Además, hemos importado un archivo CSS con el que estilizamos el componente photo a partir de su nombre de clase. Este proceso lo hemos aprendido en nuestro post sobre cargar CSS desde un componente React. Finalmente, hemos exportado el componente usando lo que aprendimos en el post sobre cómo cargar un módulo en JavaScript.

¿Cuál es el siguiente paso?

Después de leer este post, no solo sabes exactamente cómo crear un componente photo en React, sino que también has dado un paso hacia dominar esta poderosa librería JavaScript. El siguiente paso para convertirte en un experto y darle un giro a tu vida es dedicarte por completo a tu aprendizaje. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva en el que aprenderás a dominar JavaScript, HTML, CSS, React, webPack y mucho más. ¡Anímate a solicitar más información e inscríbete para convertirte en un experto del sector IT en muy pocos meses!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!