简介
当你建立一个网站时，你通常会想要分享你的社交媒体账号，以供访问者关注。在本教程中，您将使用Font Awesom.)提供的社交媒体图标在Reaction中创建一个Social Follow组件
完成后，您将拥有一个如下所示的组件：
前提条件
- 本地安装node.js，可按照如何安装node.js并创建本地开发Environment
第一步-创建工程
要开始使用，您将使用Create Reaction App，这是一个很好的搭建Reaction应用程序的工具。
打开一个新的终端，运行以下命令，生成一个名为my-app的新反应应用：
1npx create-react-app my-app
切换到应用程序并启动服务器：
1cd my-app
2npm start
要包括这些图标，您将使用一个名为react-font-awesome，的包，该包为Reaction提供字体强大的支持。
你需要这三个包：
- @fortawous/reaction -** fontawous**
- @fortawous/Fontawous -** SVG** -** core** @fortawesome/free -* brands** -** svg** -** icons**
使用以下命令安装这些命令：
1npm install --save @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons
这将安装所有三个包，并将它们作为开发依赖项添加到您的Package.json文件中。
您已经配置了您的项目。现在，让我们构建组件。
第二步-创建社交媒体组件
在src文件夹中创建一个名为SocialFollow.js的新文件。
1nano src/SocialFollow.js
这将是一个功能组件，因此您将需要导入、反应，然后导出您的功能。将以下代码添加到文件中：
1[label src/SocialFollow.js]
2import React from "react";
3
4export default function SocialFollow() {
5 return (
6 <div class="social-container">
7 <h3>Social Follow</h3>
8 </div>
9 );
10}
保存文件。
然后，要显示该组件，请将其导入并在App.js文件中使用。在您的编辑器中打开该文件：
1nano src/App.js
在文件顶部添加以下代码以导入新创建的组件：
1[label src/App.js]
2import SocialFollow from "./SocialFollow"
然后将SocialFollow组件添加到return函数内部，就在关闭的div标签的正上方：
1[label src/App.js]
2 </header>
3 <SocialFollow />
4 </div>
如果你再次查看你的应用程序，你会在屏幕底部看到Social Follow文本。
现在我们已经完成了组件的制作，我们需要用实际的社交媒体图标更新它。
第三步-使用字体强大的图标
您已经安装了Font Awesome及其Reaction支持，但要使用它，您需要包含Reaction-Fontawesome包中的FontAwesomeIcon。
在您的编辑器中打开src/SocialFollow.js，并将此导入添加到文件顶部：
1[label src/SocialFollow.js]
2import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
从free-brands-svg-icons包中包含你需要的社交图标。在本例中，使用YouTube、Facebook、Twitter和Instagram的图标。将这些导入添加到文件中：
1[label src/SocialFollow.js]
2import {
3 faYoutube,
4 faFacebook,
5 faTwitter,
6 faInstagram
7} from "@fortawesome/free-brands-svg-icons";
现在添加YouTube的图标。我们将使用一个适当设置了href属性的锚(<a>)标签，并在其中放置一个FontAwesomeIcon组件。然后，这个FontAwesomeIcon组件将接受faYouTube图标作为道具。
将此代码添加到组件：
1[label src/SocialFollow.js]
2 <div class="social-container">
3 <h3>Social Follow</h3>
4 <a href="https://www.youtube.com/c/jamesqquick"
5 className="youtube social">
6 <FontAwesomeIcon icon={faYoutube} size="2x" />
7 </a>
8</div>
我们使用更大的尺寸(2倍)，并增加了youtube和Social类。我们将使用Social类设置所有社交图标的样式，然后使用更具体的类名为每个图标赋予适当的颜色。
使用相同的方法添加其余图标：
1[label src/SocialFollow.js]
2
3 <a href="https://www.youtube.com/c/jamesqquick"
4 className="youtube social">
5 <FontAwesomeIcon icon={faYoutube} size="2x" />
6 </a>
7 <a href="https://www.facebook.com/learnbuildteach/"
8 className="facebook social">
9 <FontAwesomeIcon icon={faFacebook} size="2x" />
10 </a>
11 <a href="https://www.twitter.com/jamesqquick" className="twitter social">
12 <FontAwesomeIcon icon={faTwitter} size="2x" />
13 </a>
14 <a href="https://www.instagram.com/learnbuildteach"
15 className="instagram social">
16 <FontAwesomeIcon icon={faInstagram} size="2x" />
17 </a>
现在，让我们让这些图标看起来更有吸引力。
第四步-设置组件样式
我们能够显示我们所有的社交图标，但现在我们需要设置它们的样式。为此，我们将在与App组件关联的src/App.css文件中添加样式。
在您的编辑器中打开此文件：
1nano src/App.css
让我们首先为图标容器提供一个背景和一些填充。在App.css文件中，添加几行代码，使其具有浅灰色背景和一些填充。
1[label src/App.css]
2
3.social-container {
4 background: #eee;
5 padding: 25px 50px;
6}
现在，让我们设计所有图标的样式，给它们一些喘息的空间，并添加一个过渡，这样您就可以添加一种微妙的悬停效果。无法转换inline元素，请将display设置为inline-block：
1a.social {
2 margin: 0 1rem;
3 transition: transform 250ms;
4 display: inline-block;
5}
然后，添加悬停效果，这将使每个图标在您悬停时略微向上移动：
1a.social:hover {
2 transform: translateY(-2px);
3}
最后，为图标赋予适当的颜色。添加此代码：
1a.youtube {
2 color: #eb3223;
3}
4
5a.facebook {
6 color: #4968ad;
7}
8
9a.twitter {
10 color: #49a1eb;
11}
12
13a.instagram {
14 color: black;
15}
我们将对Instagram使用黑色，因为它的标志不是纯色的。打开你的应用程序，你会看到图标的颜色合适，并且有一些间距：
结论
Reaction中的组件功能强大，因为您可以重复使用它们。现在您已经创建了您的Social Follow组件，您可以将其移动到您站点上的任何位置或完全移动到另一个站点。