React es una librería de JavaScript muy popular en el mundo de la programación. Esta librería es principalmente conocida por unir el poder del código JavaScript con el de HTML para crear aplicaciones SPA o single page application. En este post, te enseñaremos cómo crear un botón de like en React de una manera simple, un elemento fundamental para muchas aplicaciones.
¿Qué es un botón de like?
Un botón de like es un elemento muy común en aplicaciones web y mobile, especialmente en proyectos que tienen una dinámica de red social. En estos proyectos, los elementos que permitan algún tipo de interacción entre usuarios es fundamental. Para ello, se utiliza el botón de me gusta, con el que un usuario puede mostrar que un contenido es de su agrado.
Un botón de like puede tener muchas apariencias. Normalmente es un corazón que, cuando se selecciona, cambia de gris a color. Esto es lo que haremos a continuación.
¿Cómo crear un botón de like en React?
Para crear un botón de like en React, al igual que lo hemos hecho con todos los demás elementos en esta librería, primero crearemos un archivo en el que escribamos su código.
Ya que un botón de like es básicamente un componente React con determinadas características y estilos, crearemos un archivo LikeButton.js dentro de la carpeta components. Esta es una carpeta que te recomendamos crear en todos tus proyectos. Las subcarpetas que crees dentro de components quedan a tu juicio. Sin embargo, desde KeepCoding siempre te recomendamos tener un orden claro en tu proyecto, sea cual sea.
Una vez creado el archivo para nuestro botón, deberemos preparar los elementos que lo compondrán. Para crear una versión rudimentaria de este botón, podemos preparar un svg para el botón cuando no tiene un me gusta y otro cuando el botón tiene un me gusta. Ahora que tenemos estos archivos creados, los podemos importar con los nombres que sean más convenientes para nuestro proyecto. Nosotros hemos decidido llamar al corazón gris IconUnliked y al corazón coloreado IconLiked. A continuación, te mostramos las líneas de código que nos permiten importar estos archivos:
import { ReactComponent as IconUnliked } from ‘../../assets/like. svg’;
import { ReactComponent as IconLiked } from ‘../../assets/like_filled. svg’;
Si tienes dudas sobre cómo importar un archivo de este tipo, te invitamos a leer nuestro post sobre insertar un svg en React.
Después de estos archivos, el elemento principal para crear un botón de like en React es una variable const que define cuándo utilizar cada svg. Llamaremos a esta constante Icon. Esta constante tendrá una propiedad isLike que, cuando está presente, llama al archivo IconLiked. Sin embargo, cuando la prop isLike no está presente, llama al archivo IconUnliked.
const Icon = isLike ? IconLiked : IconUnliked;
A continuación, te mostramos las líneas de código que nos permiten crear un botón de like en React:
const LikeButton = ({children, isLike, onLike}) => {
const Icon = isLike ? IconLiked : IconUnliked;
return (
<div
className = {classNames (‘likeButton’, {
‘likeButton-active’: isLike,
})}
onClick={event => {
event.preventDefault ( );
onLike (event);
}}
>
Como puedes ver en las líneas de código anteriores, el componente LikeButton es básicamente un elemento que elige entre los componentes IconLiked y IconUnliked en función de la presencia de la prop isLike.
Una vez tenemos creado nuestro botón en su módulo individual, lo podemos importar al archivo en el que lo necesitemos, usando su nombre y la ruta en la que está ubicado.
import LikeButton from ‘./LikeButton’;
Ahora que tenemos este componente insertado, podemos darle más acciones. En las líneas de código siguientes, hemos definido que el evento onLike se calcula en función de los datos que lleguen de la API. Es decir, en función de la acción que ejecute el usuario.
<div className = “tweet-actions”>
<LikeButton onLike={event => console.log (event)}>
{likes.length || null}
</LikeButton>
</div>
En estas líneas de código, el comando likes.length es una llamada a la longitud de un array ‘likes’. Este comando está preparado para recibir el número de likes que tiene determinado contenido. Entonces, si sustituyes esta sección por, digamos, el número 5, verás este número al lado de tu corazón. Sin embargo, la idea sería preparar tu proyecto para que este array se llene con el número de likes recibidos en realidad.
¿Cuál es el siguiente paso?
Ahora que sabes cómo crear un botón de like en React, ¡es el momento de utilizar esta lógica para los elementos de tus propias aplicaciones web! Si todavía no sabes cómo, no te preocupes, ya que KeepCoding te acompaña en el proceso. Por ello, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás a desarrollar todo tipo de proyectos de programación para la web con lenguajes como JavaScript, JSX, HTML y CSS. ¿A qué esperas para dar el paso que te cambiará la vida? ¡Te esperamos!
