Cómo crear un componente de seguimiento social en React

Introducción

Cuando estás creando un sitio web, a menudo querrás compartir tus cuentas de redes sociales para que los visitantes las sigan. En este tutorial, crearás un componente de seguimiento social en React, utilizando los íconos de redes sociales proporcionados por Font Awesome.

Cuando hayas terminado, tendrás un componente que se verá así:

Prerrequisitos

• Node.js instalado localmente, lo cual puedes hacer siguiendo Cómo instalar Node.js y crear un entorno de desarrollo local

Paso 1: Creación del proyecto

Para comenzar, utilizará Create React App, que es una excelente herramienta para desarrollar aplicaciones React.

Abra una nueva terminal y ejecute el siguiente comando para generar una nueva aplicación React llamada my-app:

npx create-react-app my-app

Cambie a la aplicación e inicie el servidor:

cd my-app
npm start

Para incluir los íconos, utilizarás un paquete llamado react-font-awesome, que proporciona soporte Font Awesome para React.

Necesitarás estos tres paquetes:

• @fortawesome/react – fuente maravillosa
• @fortawesome/fontawesome – svg – núcleo
• @fortawesome/free – marcas – svg – iconos

Instálelos con el siguiente comando:

npm install --save @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons

Esto instala los tres paquetes y los agrega como dependencias de desarrollo en su package.jsonarchivo.

Ya tienes configurado tu proyecto. Ahora vamos a construir el componente.

Paso 2: Creación del componente de redes sociales

Crea un nuevo archivo en tu srccarpeta llamado SocialFollow.js.

nano src/SocialFollow.js

Este será un componente funcional, por lo que deberá importar React y luego exportar su función. Agregue el siguiente código al archivo:

fuente/SocialFollow.js

import React from "react";export default function SocialFollow() {  return (    div      h3Social Follow/h3    /div  );}

Guarde el archivo.

Luego, para visualizar este componente, impórtelo y utilícelo en el App.jsarchivo. Abra el archivo en su editor:

nano src/App.js

Agregue este código en la parte superior del archivo para importar el componente recién creado:

fuente/App.js

import SocialFollow from "./SocialFollow"

Luego agrega el SocialFollowcomponente dentro de la returnfunción, justo encima de la divetiqueta de cierre:

fuente/App.js

      /header      SocialFollow /    /div

Si vuelves a mirar tu solicitud, verás el texto “Seguimiento social” en la parte inferior de la pantalla.

Ahora que tenemos nuestro componente listo, necesitamos actualizarlo con íconos de redes sociales reales.

Paso 3: Cómo usar los íconos de Font Awesome

Has instalado Font Awesome y su compatibilidad con React, pero para usarlo debes incluirlo FontAwesomeIcondesde el react-fontawesomepaquete.

Ábrelo src/SocialFollow.jsen tu editor y agrega esta importación en la parte superior del archivo:

fuente/SocialFollow.js

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

Incluya los íconos sociales que necesite del free-brands-svg-iconspaquete. Para este ejemplo, utilice los íconos de YouTube, Facebook, Twitter e Instagram. Agregue estas importaciones al archivo:

fuente/SocialFollow.js

import {  faYoutube,  faFacebook,  faTwitter,  faInstagram} from "@fortawesome/free-brands-svg-icons";

Ahora, agrega el ícono de YouTube. Usaremos una aetiqueta de ancla ( ) con el hrefatributo configurado de manera adecuada y colocaremos un FontAwesomeIconcomponente dentro de ella. Este FontAwesomeIconcomponente aceptará el faYouTubeícono como propiedad.

Añade este código al componente:

fuente/SocialFollow.js

 div      h3Social Follow/h3      a href="https://www.youtube.com/c/jamesqquick"        className="youtube social"        FontAwesomeIcon icon={faYoutube} size="2x" /      /a/div

Usamos un tamaño más grande (2x) y agregamos youtubeclases social. Aplicaremos estilo a todos los íconos sociales usando la clase “social” y luego le daremos el color apropiado a cada uno usando el nombre de clase más específico.

Añade el resto de los íconos usando el mismo enfoque:

fuente/SocialFollow.js

      a href="https://www.youtube.com/c/jamesqquick"        className="youtube social"        FontAwesomeIcon icon={faYoutube} size="2x" /      /a      a href="https://www.facebook.com/learnbuildteach/"        className="facebook social"        FontAwesomeIcon icon={faFacebook} size="2x" /      /a      a href="https://www.twitter.com/jamesqquick" className="twitter social"        FontAwesomeIcon icon={faTwitter} size="2x" /      /a      a href="https://www.instagram.com/learnbuildteach"        className="instagram social"        FontAwesomeIcon icon={faInstagram} size="2x" /      /a

Ahora, hagamos que los íconos se vean más atractivos.

Paso 4: Dar estilo al componente

Podemos mostrar todos nuestros íconos sociales, pero ahora necesitamos darles estilo. Para ello, agregaremos estilos al src/App.cssarchivo asociado con el componente de la aplicación.

Abra este archivo en su editor:

nano src/App.css

Empecemos por darle un fondo y algo de relleno al contenedor de nuestros iconos. En el App.cssarchivo, agrega un par de líneas para darle un fondo gris claro y algo de relleno.

fuente/Aplicación.css

.social-container {  background: #eee;  padding: 25px 50px;}

Ahora, vamos a darle estilo a todos los íconos dándoles un poco de espacio y agregando una transición para que puedas agregar un efecto sutil al pasar el mouse. Establece displayesto inline-blockcomo no puedes transformar un elemento en línea:

a.social {  margin: 0 1rem;  transition: transform 250ms;  display: inline-block;}

Luego, agrega el efecto de desplazamiento, que hará que cada ícono se mueva ligeramente hacia arriba cuando pases el cursor:

a.social:hover {  transform: translateY(-2px);}

Por último, dale los colores adecuados a los iconos. Añade este código:

a.youtube {  color: #eb3223;}a.facebook {  color: #4968ad;}a.twitter {  color: #49a1eb;}a.instagram {  color: black;}

Usaremos el color negro para Instagram, ya que su logotipo no es de un solo color. Abre la aplicación y verás que los íconos tienen el color adecuado y están espaciados:

Conclusión

Los componentes de React son muy útiles porque se pueden reutilizar. Ahora que ha creado el componente Social Follow, puede moverlo a cualquier lugar de su sitio o a otro sitio.