如何在React中创建社交关注组件

介绍

在构建网站时，您通常希望共享您的社交媒体帐户以供访问者关注。在本教程中，您将使用 Font Awesome 提供的社交媒体图标在 React 中创建一个社交关注组件。

完成后，您将拥有一个如下所示的组件：

先决条件

Node.js 安装在本地，可以按照【X57X】如何安装Node.js 并创建本地开发环境【X126X】进行

第 1 步——创建项目

首先，您将使用 Create React App，它是一个很好的搭建 React 应用程序的工具。

打开一个新终端并运行以下命令以生成一个名为 my-app 的新 React 应用程序：

npx create-react-app my-app

切换到应用程序并启动服务器：

cd my-app
npm start

要包含图标，您将使用一个名为 react-font-awesome 的包，它为 React 提供 Font Awesome 支持。

你需要这三个包：

@fortawesome/react-fontawesome
@fortawesome/fontawesome-svg-core
@fortawesome/免费-品牌-svg-图标

使用以下命令安装它们：

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

这将安装所有三个包并将它们作为开发依赖项添加到您的 package.json 文件中。

您已配置项目。现在让我们构建组件。

第 2 步 - 创建社交媒体组件

在您的 src 文件夹中创建一个名为 SocialFollow.js 的新文件。

nano src/SocialFollow.js

这将是一个函数式组件，因此您需要导入 React，然后导出您的函数。将以下代码添加到文件中：

src/SocialFollow.js

import React from "react";

export default function SocialFollow() {
  return (
    <div class="social-container">
      <h3>Social Follow</h3>
    </div>
  );
}

保存文件。

然后，要显示此组件，请在 App.js 文件中导入并使用它。在编辑器中打开文件：

nano src/App.js

在文件顶部添加此代码以导入新创建的组件：

src/App.js

import SocialFollow from "./SocialFollow"

然后在 return 函数中添加 SocialFollow 组件，就在结束 div 标记的正上方：

src/App.js

      </header>
      <SocialFollow />
    </div>

如果您再次查看您的应用程序，您将在屏幕底部看到“社交关注”文本。

现在我们的组件已经被删除了，我们需要用实际的社交媒体图标来更新它。

第 3 步 — 使用 Font Awesome 图标

您已经安装了 Font Awesome 及其对 React 的支持，但要使用它，您需要包含 react-fontawesome 包中的 FontAwesomeIcon。

在编辑器中打开 src/SocialFollow.js 并将此导入添加到文件顶部：

src/SocialFollow.js

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

从 free-brands-svg-icons 包中包含您需要的社交图标。在此示例中，使用 YouTube、Facebook、Twitter 和 Instagram 的图标。将这些导入添加到文件中：

src/SocialFollow.js

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

现在添加 YouTube 的图标。我们将使用锚点 (<a>) 标记，并适当设置 href 属性，并在其中放置一个 FontAwesomeIcon 组件。然后，此 FontAwesomeIcon 组件将接受 faYouTube 图标作为道具。

将此代码添加到组件中：

src/SocialFollow.js

 <div class="social-container">
      <h3>Social Follow</h3>
      <a href="https://www.youtube.com/c/jamesqquick"
        className="youtube social">
        <FontAwesomeIcon icon={faYoutube} size="2x" />
      </a>
</div>

我们使用更大的尺寸（2x），并添加 youtube 和 social 类。我们将使用“social”类设置所有社交图标的样式，然后使用更具体的类名称为每个图标赋予适当的颜色。

使用相同的方法添加其余图标：

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

现在，让我们让图标看起来更有吸引力。

第 4 步 — 设置组件样式

我们能够显示我们所有的社交图标，但现在我们需要对它们进行样式设置。为此，我们将向与 App 组件关联的 src/App.css 文件添加样式。

在编辑器中打开此文件：

nano src/App.css

让我们首先为图标的容器提供背景和一些填充。在 App.css 文件中，添加几行以使其具有浅灰色背景和一些填充。

src/App.css

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

现在，让我们通过给它们一些喘息的空间来设置所有图标的样式并添加一个过渡，以便您可以添加一个微妙的悬停效果。将 display 设置为 inline-block 因为您无法转换内联元素：

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

然后，添加悬停效果，这将使每个图标在悬停时略微向上移动：

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

最后，为图标赋予适当的颜色。添加此代码：

a.youtube {
  color: #eb3223;
}

a.facebook {
  color: #4968ad;
}

a.twitter {
  color: #49a1eb;
}

a.instagram {
  color: black;
}

我们将为 Instagram 使用黑色，因为它的徽标不是一种纯色。打开您的应用程序，您会看到图标颜色合适，并且有一些间距：

结论

React 中的组件非常强大，因为您可以重用它们。现在您已经创建了社交关注组件，您可以将其移动到您网站上的任何位置或完全移动到另一个网站。