react中创建一个组件

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!

在几乎每个网站上，您都将观看共享社交媒体帐户的信息，以供访问者关注。 在本文中，我们将在React中创建一个Social Follow组件！

For a deeper dive, check out !

要进行更深入的了解，请查看“ ！

TLDR (TLDR)

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

创建一个React应用，包括Font Awesome库，并使用社交图标。 检查 。

( )

To get started, we are going to use 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 . You can obviously use your local environment instead. Regardless, I'll spell out the steps to work with both!

首先，我们将使用 ，这是一个用于搭建React应用程序的好工具。 作为参考，我将从称为的在线环境/编辑器内部进行此操作。 您显然可以使用本地环境来代替。 无论如何，我将阐明同时使用两者的步骤！

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

如果您正在本地设置上运行，请运行以下命令来生成并启动您的React应用。

npx create-react-app my-appcd my-appnpm start

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

或者，可以在“代码沙箱 ”内部单击“ 创建沙箱 ”。

Then, choose React.

然后，选择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 React App提供了一个实时重载服务器，因此，如果我添加一些乱码并保存文件，它将自动反映在浏览器中。

( )

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.

在您的“ src ”中创建一个名为SocialFollow 。* js的新文件。 *这将是一个功能组件，因此您需要导入React，然后导出您的函数。 您可以粘贴以下代码。

import React from "react";export default function SocialFollow() {
       return (    
    
      
     
Social Follow
    
    
  );}

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.

然后，要显示该组件，我们可以在。* js *文件索引中导入并使用它。 您可以使用以下命令导入新创建的组件。

import SocialFollow from "./SocialFollow"

Then use it in your App component by including this.

然后通过包含它在您的App组件中使用它。

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

如果再次查看您的应用程序，则应该在屏幕上看到“社交关注”文本输出。

查找并安装真棒字体NPM软件包 (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 has great support for React components!

Font Awesome对React组件有很好的支持！

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

我们从NPM开始介绍我们将要使用的 。 该链接会将您带到**“ @ fortawesome / react - fontawesome” **包的页面。

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 /React -fontawesome

• @fortawesome/fontawesome-svg-core

  @ fortawesome / fontawesome - SVG - 核心

• @fortawesome/free-brands-svg-icons

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

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

在“代码沙箱”中，它们为您提供了一个GUI，用于安装软件包。 您可以通过单击“ 添加依赖项 ”来打开此GUI。

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.

现在我们已经安装了正确的软件包，我们可以开始使用它们了。 我们需要的东西包括从React称为FontAwesomeIcon - * fontawesome *包。

In the SocialFollow.js add this import.

在SocialFollow.js中添加此导入。

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.

然后，我们可以从免费 - 品牌 -svg- 图标包中包含我们将使用的社交图标。 还有其他，但我们将使用YouTube，Facebook，Twitter和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.

首先，为YouTube添加一个图标。 我们将使用一个带有其内部FontAwesomeIcon组件的计划锚标记（适当设置href属性）。 然后，此FontAwesomeIcon组件将接受faYouTube图标作为道具。 我还将大小设置为比默认值大一些。

The code will look like this.

该代码将如下所示。

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.

注意，我添加了两个类，“ youtube”和“ social”。 我们将使用“社交”类为所有社交图标设置样式，然后使用更具体的类名“ youtube”为每个图标赋予适当的颜色。 如果您检查浏览器，它将看起来像这样。 不用担心，我们会尽快修复颜色。

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

现在，您可以添加其余的图标。

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

再次查看您的浏览器，它们都应该出现。

Now, let's make them prettier!

现在，让他们变得更漂亮！

( )

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.

我们能够显示所有社交图标，但是现在我们需要对它们进行一些样式设置。 有很多样式化React组件的方式。 我将把辩论再留一天。 我将仅通过编辑现有样式来使其简单。 css文件。

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.

让我们从为图标容器提供背景和一些填充开始。 如果您以前从未这样做过，请在“社交关注”组件中为父div分配一个类名“ social-container”。

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

然后，在styles.css文件中，添加几行以为其提供浅灰色背景和一些填充。

/_ 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!

我用黑色离开了instagram。 它的徽标不是一种纯色，所以我认为黑色还可以。 再次打开您的应用程序，现在看起来应该不错。 图标是适当的颜色，具有一定的间距，并且看起来很棒！

( )

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!

React中的组件之所以令人惊叹，是因为重用它们非常容易。 现在，您已经创建了“社会关注”组件，可以将其移动到站点上的任何位置或完全移动到另一个站点。 希望这可以帮助您在React上有所作为，并促进营销！

翻译自:

react中创建一个组件