Creating A Social Follow Component in React

Celý článek

On almost every website, you're going to watch to share your Social Media accounts for visitors to follow. In this article, we are going to create a Social Follow component in React!

For a deeper dive, check out Using Font Awesome 5 with React!

TLDR

Create a react app, include Font Awesome libraries, and use the social icons. Check out the finished product.

Create The Project

To get started, we are going to use Create React App which is a great tool for scaffolding React applications. For reference, I am going to be doing this from inside of an online environment/editor called Code Sandbox. You can obviously use your local environment instead. Regardless, I'll spell out the steps to work with both!

If you are running on your local setup, run the following commands to generate and start your React app.

npx create-react-app my-app
cd my-app
npm start

Alternatively, inside of Code Sandbox, you can click "Create Sandbox".

Then, choose React.

After creating your app in Code Sandbox, your app will be automatically started. Alternatively, if you are running on your local machine and followed the commands above, yours should be running as well.

Create React App supplies a live reloading server, so if I were to add some gibberish text and save the file, it should automatically be reflected in the browser.

Create Your Follow Component

Ok, we've got our application created and running. Now, the fun stuff!

Create a new file in your "src" called SocialFollow.js. This will be a functional component so you'll need to import React and then export your function. You can paste in the following code.

import React from "react";

export default function SocialFollow() {
  return (
    <div>
      <h3>Social Follow</h3>
    </div>
  );
}

Then, to get this component to be displayed, we can import and use it in the index.js file. You can import the newly created component with the following.

import SocialFollow from "./SocialFollow"

Then use it in your App component by including this.

<SocialFollow/>

If you look at your application again, you should see the "Social Follow" text being output on the screen.

Find and Install the Font Awesome NPM Packages

Now that we have our component stubbed out, we need to update it with actual Social Media icons. For these icons, we are going to use Font Awesome 5.

Font Awesome has great support for React components!

Le't start on NPM for the documentation of the packages we are going to use. That link will take you to the page for the "@fortawesome/react-fontawesome" package.

Scroll down a bit more and you'll see references to a few different packages and installation notes.

We are going to need to use three packages.

• @fortawesome/react-fontawesome

• @fortawesome/fontawesome-svg-core

• @fortawesome/free-brands-svg-icons

In your local environment, you'll need to install these by running

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

In Code Sandbox, they give you a GUI to use for installing packages. You can open this GUI by clicking "Add Dependency".

Here's a screenshot of me adding one package. The process for the second two is the exact same.

Use the Font Awesome Icons

Now that we have the right packages installed, we can start to use them. We need to include something called FontAwesomeIcon from the react-fontawesome package.

In the SocialFollow.js add this import.

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

Then, we can include the social icons we will use from the free-brands-svg-icons package. There are others, but we are going to use YouTube, Facebook, Twitter, and Instagram.

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

Let's start by adding one icon for YouTube. We are going to use a plan anchor tag (set the href property appropriately) with a FontAwesomeIcon component inside of it. This FontAwesomeIcon component will then accept the faYouTube icon as a prop. I also set the size to be a bit bigger than default.

The code will look like this.

 <a
    href="https://www.youtube.com/c/jamesqquick"
    className="youtube social"
 >
    <FontAwesomeIcon icon={faYoutube} size="2x" />
 </a>

Notice, I added two classes, "youtube" and "social". We will style all of the social icons using the "social" class, and then give the appropriate coloring to each one using the more specific class name, "youtube" in this case. If you check your browser, it will look like this. Don't worry we will fix the coloring shortly.

Now, you we can add the rest of our icons.

<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>

Take a look again at your browser, and they should all show up.

Now, let's make them prettier!

Style The Component

We are able to display all of our social icons, but now we need to style them a bit. There are tons of ways of styling React components. I'll leave that debate for another day. I'll keep it simple by just editing the existing styles.css file.

Let's start by giving a background and some padding to the container of our icons. If you didn't before, give a class name of "social-container" to the parent div in the Social Follow component.

Then, in the styles.css file, add a couple of lines to give it a light grey background and some padding.

/_ SOCIAL STUFF _/
.social-container {
  background: #eee;
  padding: 25px 50px;
}

Now, let's style all of the icons by giving them some breathing room. Additionally, add a transition so that we can add a subtle hover effect. Lastly, I changed the display to be inline-block. I learned this the hard way, but you cannot transform an inline element.

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

Then, add the hover effect.

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

Now, your icons should be a little spaced out and have a nice hover effect. The last thing we need to do is give the appropriate colors to the icons.

a.youtube {
  color: #eb3223;
}

a.facebook {
  color: #4968ad;
}

a.twitter {
  color: #49a1eb;
}

a.instagram {
  color: black;
}

I left instagram with a black color. It's logo is not one solid color, so I figured black was ok. Open your app one more time, and it should look pretty good now. The icons are the appropriate color, have some spacing, and look great!

Recap

Components in React are amazing because of how easy it is to reuse them. Now that you have your Social Follow component created, you can move it around to any spot on your site or to another site altogether. Hopefully this helped give you some practice with React as well as a marketing boost!