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!
