react创建自定义组件_如何在React中创建自定义组件

react创建自定义组件

The author selected Creative Commons to receive a donation as part of the Write for DOnations program.

作者选择了创用CC来接受捐赠，这是Write for DOnations计划的一部分。

介绍 (Introduction)

In this tutorial, you’ll learn to create custom components in React. Components are independent pieces of functionality that you can reuse in your application, and are the building blocks of all React applications. Often, they can be simple JavaScript functions and classes, but you use them as if they were customized HTML elements. Buttons, menus, and any other front-end page content can all be created as components. Components can also contain state information and display markdown.

在本教程中，您将学习在React中创建自定义组件 。 组件是可以在应用程序中重用的独立功能，并且是所有React应用程序的构建块。 通常，它们可以是简单的JavaScript函数和类 ，但是您可以像使用自定义HTML元素一样使用它们。 按钮，菜单和任何其他前端页面内容都可以创建为组件。 组件还可以包含状态信息和显示减价。

After learning how to create components in React, you’ll be able to split complex applications into small pieces that are easier to build and maintain.

在学习了如何在React中创建组件之后，您将能够将复杂的应用程序拆分为更易于构建和维护的小块。

In this tutorial, you’ll create a list of emojis that will display their names on click. The emojis will be built using a custom component and will be called from inside another custom component. By the end of this tutorial, you’ll have made custom components using both JavaScript classes and JavaScript functions, and you’ll understand how to separate existing code into reusable pieces and how to store the components in a readable file structure.

在本教程中，您将创建一个表情符号列表，将在单击时显示其名称。 表情符号将使用自定义组件构建，并将从另一个自定义组件内部调用。 在本教程结束时，您将使用JavaScript类和JavaScript函数制作自定义组件，并且您将了解如何将现有代码分成可重用的片段，以及如何将组件存储在可读的文件结构中。

先决条件 (Prerequisites)

• You will need a development environment running Node.js; this tutorial was tested on Node.js version 10.20.1 and npm version 6.14.4. To install this on macOS or Ubuntu 18.04, follow the steps in How to Install Node.js and Create a Local Development Environment on macOS or the Installing Using a PPA section of How To Install Node.js on Ubuntu 18.04.

  您将需要一个运行Node.js的开发环境； 本教程已在Node.js 10.20.1版和npm 6.14.4版上进行了测试。 要将其安装在macOS或Ubuntu 18.04上，请遵循如何在macOS上安装Node.js并创建本地开发环境中的步骤，或如何在Ubuntu 18.04上安装Node.js的 使用PPA安装部分中的步骤 。

• You will need to be able to create apps with Create React App. You can find instructions for installing an application with Create React App at How To Set Up a React Project with Create React App.

  您将需要能够使用Create React App创建应用程序 。 您可以在如何使用创建React App 设置React项目中找到有关使用Create React App安装应用程序的说明。

• You will be using JSX syntax, which you can learn about in our How To Create Elements with JSX tutorial.

  您将使用JSX语法，您可以在我们的“ 如何使用JSX创建元素”教程中了解该语法。

• You will also need a basic knowledge of JavaScript, which you can find in How To Code in JavaScript, along with a basic knowledge of HTML and CSS. A good resource for HTML and CSS is the Mozilla Developer Network.

  您还将需要JavaScript的基本知识，以及HTML和CSS的基本知识，这些知识可以在JavaScript的How To Code中找到。 Mozilla开发人员网络是HTML和CSS的良好资源。

第1步—设置React项目 (Step 1 — Setting Up the React Project)

In this step, you’ll create a base for your project using Create React App. You will also modify the default project to create your base project by mapping over a list of emojis and adding a small amount of styling.

在这一步中，您将使用创建React App为您的项目创建基础。 您还将通过映射表情符号列表并添加少量样式来修改默认项目以创建基础项目。

First, create a new project. Open a terminal, then run the following command:

首先，创建一个新项目。 打开一个终端，然后运行以下命令：

• npx create-react-app tutorial-03-component

  npx create-react-app 教程-03-组件

Once this is finished, change into the project directory:

完成此操作后，进入项目目录：

• cd tutorial-03-component

  cd 教程03-组件

Open the App.js code in a text editor:

在文本编辑器中打开App.js代码：

• nano src/App.js
  纳米src / App.js

Next, take out the template code created by Create React App, then replace the contents with new React code that displays a list of emojis:

接下来，取出由Create React App创建的模板代码，然后将内容替换为显示表情符号列表的新React代码：

tutorial-03-component/src/App.js

tutorial-03-component / src / App.js

import React from 'react';
import './App.css';

const displayEmojiName = event => alert(event.target.id);
const emojis = [
  {
    emoji: '😀',
    name: "test grinning face"
  },
  {
    emoji: '🎉',
    name: "party popper"
  },
  {
    emoji: '💃',
    name: "woman dancing"
  }
];

function App() {
  const greeting = "greeting";
  const displayAction = false;
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      {displayAction && <p>I am writing JSX</p>}
      <ul>
        {
          emojis.map(emoji => (
            <li key={emoji.name}>
              <button
                onClick={displayEmojiName}
              >
                <span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>
              </button>
            </li>
          ))
        }
      </ul>
    </div>
  )
}

export default App;

This code uses JSX syntax to map() over the emojis array and list them as <li> list items. It also attaches onClick events to display emoji data in the browser. To explore the code in more detail, check out How to Create React Elements with JSX, which contains a detailed explanation of the JSX.

此代码使用JSX语法在emojis 数组上进行map()并将其列为<li>列表项。 它还附加onClick 事件，以在浏览器中显示表情符号数据。 要更详细地探索代码，请查看如何使用JSX创建React Elements ，其中包含有关JSX的详细说明。

Save and close the file. You can now delete the logo.svg file, since it was part of the template and you are not referencing it anymore:

保存并关闭文件。 现在，您可以删除logo.svg文件，因为它是模板的一部分，并且不再引用它：

• rm src/logo.svg
  rm src / logo.svg

Now, update the styling. Open src/App.css:

现在，更新样式。 打开src/App.css ：

• nano src/App.css
  纳米src / App.css

Replace the contents with the following CSS to center the elements and adjust the font:

用以下CSS替换内容以使元素居中并调整字体：

tutorial-03-component/src/App.css

tutorial-03-component / src / App.css

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

button {
    font-size: 2em;
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
}

ul {
    display: flex;
    padding: 0;
}

li {
    margin: 0 20px;
    list-style: none;
    padding: 0;
}

This uses flex to center the main <h1> and list elements. It also removes default button styles and <li> styles so the emojis line up in a row. More details can be found at How to Create React Elements with JSX.

这使用flex将主要<h1>和list元素居中。 它还会删除默认的按钮样式和<li>样式，以便表情符号连续排成一行。 可以在如何使用JSX创建React Elements中找到更多详细信息。

Save and exit the file.

保存并退出文件。

Open another terminal window in the root of your project. Start the project with the following command:

在项目的根目录中打开另一个终端窗口。 使用以下命令启动项目：

• npm start
  npm开始

After the command runs, you’ll see the project running in your web browser at http://localhost:3000.

命令运行后，您将在Web浏览器中的http://localhost:3000看到正在运行的项目。

Leave this running the entire time you work on your project. Every time you save the project, the browser will auto-refresh and show the most up-to-date code.

在您处理项目的整个过程中，都要一直运行。 每次保存项目时，浏览器都会自动刷新并显示最新代码。

You will see your project page with Hello, World and the three emojis that you listed in your App.js file