react中创建一个组件

介绍 (Introduction)

When you’re building a web site, you’ll often want to share your Social Media accounts for visitors to follow. In this tutorial, you’ll create a Social Follow component in React, using the social media icons provided by Font Awesome.

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

When you’re done, you’ll have a component that looks like this:

完成后，您将拥有一个类似于以下内容的组件：

先决条件 (Prerequisites)

• Node.js installed locally, which you can do by following How to Install Node.js and Create a Local Development Environment

  Node.js本地安装，您可以按照如何安装Node.js并创建本地开发环境来完成

第1步-创建项目 (Step 1 — Creating the Project)

To get started, you’ll use Create React App which is a great tool for scaffolding React applications.

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

Open a new Terminal and run the following command to generate a new React app called my-app:

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

Switch to the app and start the server:

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

To include the icons, you’ll use a package called react-font-awesome, which provides Font Awesome support for React.

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

You’ll need these three packages:

您将需要以下三个软件包：

• @fortawesome/react-fontawesome

  @ fortawesome /React -fontawesome

• @fortawesome/fontawesome-svg-core

  @ fortawesome / fontawesome - SVG - 核心

• @fortawesome/free-brands-svg-icons

  @ fortawesome /免费 - 品牌 - SVG - 图标

Install these with the following command:

使用以下命令安装它们：

This installs all three packages and adds them as development dependencies in your package.json file.

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

You have your project configured. Now let’s build the component.

您已经配置了项目。 现在，我们来构建组件。

第2步-创建社交媒体组件 (Step 2 — Creating the Social Media Component)

Create a new file in your src folder called SocialFollow.js.

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

This will be a functional component, so you’ll need to import React and then export your function. Add the following code to the file:

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

import React from "react";

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

Save the file.

保存文件。

Then, to display this component, import and use it in the App.js file. Open the file in your editor:

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

Add this code at the top of the file to import the newly created component:

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

import SocialFollow from "./SocialFollow"

Then add the SocialFollow component inside of the return function, right above the closing div tag:

然后在return函数内部的div标签右上方添加SocialFollow组件：

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

If you look at your application again, you’ll see the “Social Follow” text at the bottom of the screen.

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

Now that we have our component stubbed out, we need to update it with actual social media icons.

现在我们已经删除了组件，我们需要使用实际的社交媒体图标对其进行更新。

第3步-使用超赞字体图标 (Step 3 — Using the Font Awesome Icons)

You’ve installed Font Awesome and its React support, but to use it, you need to include FontAwesomeIcon from the react-fontawesome package.

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

Open src/SocialFollow.js in your editor and add this import to the top of the file:

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

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

Include the social icons you need from the free-brands-svg-icons package. For this example, use the icons for YouTube, Facebook, Twitter, and Instagram. Add these imports to the file:

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

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

Now add the icon for YouTube. We’ll use an anchor (<a>) tag with the href attribute set appropriately, and we’ll place a FontAwesomeIcon component inside of it. This FontAwesomeIcon component will then accept the faYouTube icon as a prop.

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

Add this code to the component:

将此代码添加到组件：

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

We use a larger size (2x), and add youtube and social classes. 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.

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

Add the rest of the icons using the same approach:

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

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

Now, let’s make the icons look more attractive.

现在，让图标看起来更具吸引力。

步骤4 —样式化组件 (Step 4 — Styling the Component)

We are able to display all of our social icons, but now we need to style them. To do so, we’ll add styles to the src/App.css file associated with the App component.

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

Open this file in your editor:

在编辑器中打开此文件：

Let’s start by giving a background and some padding to the container of our icons. In the App.css file, add a couple of lines to give it a light grey background and some padding.

让我们从为图标容器提供背景和一些填充开始。 在App.css文件中，添加几行以为其赋予浅灰色背景和一些填充。

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

Now, let’s style all of the icons by giving them some breathing room and add a transition so that you can add a subtle hover effect. Set display to inline-block as you cannot transform an inline element:

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

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

Then, add the hover effect, which will make each icon move up slightly when you hover:

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

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

Finally, give the appropriate colors to the icons. Add this code:

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

a.youtube {
  color: #eb3223;
}

a.facebook {
  color: #4968ad;
}

a.twitter {
  color: #49a1eb;
}

a.instagram {
  color: black;
}

We’ll use black for Instagram, as its logo is not one solid color. Open your app and you’ll see that the icons are the appropriate color and have some spacing:

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

结论 (Conclusion)

Components in React are powerful because you can 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.

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

翻译自: https://www.digitalocean.com/community/tutorials/creating-a-social-follow-component-in-react

react中创建一个组件