In the two previous articles we looked at functional components.

在前两篇文章中，我们介绍了功能组件。

Although the React team seems like they want to move away from class-based components, they’re still here. As a side note, I like and prefer class components. We’ve touched on class components in the Deeper Intro article.

尽管React团队似乎希望摆脱基于类的组件，但他们仍然在这里。 作为附带说明，我喜欢并喜欢类组件。 我们已经在“ 更深入的介绍”文章中介绍了类组件。

A class based component is a class that extends React.Component and contains a render() method that returns a JSX element. We can convert functional components into class components pretty easily.

基于类的组件是扩展React.Component的类，并包含一个返回JSX元素的render()方法。 我们可以很容易地将功能组件转换为类组件。

Let’s create a class component that lists a movie where Jim Carrey was awesome. We’ll start by creating a Sonic.js file inside of our src/components directory. If you haven’t seen Sonic yet, I highly recommend it (especially if you have kids).

让我们创建一个类组件，其中列出了Jim Carrey很棒的电影。 我们将从在src / components目录内创建一个Sonic.js文件开始。 如果您还没有看到Sonic ，我强烈推荐您(特别是如果您有孩子的话)。

Just like with functional components, we need to import React.

就像功能组件一样，我们需要导入React。

import React from 'react';

The class will extend React.Component and will contain a render() method that returns an element. The render() method is a life-cycle method (we’ll look at life-cycle methods in later articles). The render() life-cycle method is a required method meaning that each time that you create a class component, that component will need to have the render() method.

该类将扩展React.Component并将包含一个返回元素的render()方法。 render()方法是生命周期方法(我们将在后面的文章中介绍生命周期方法)。 render()生命周期方法是必需的方法，这意味着每次创建类组件时，该组件都将需要具有render()方法。

Just like functional components, class components will need to be exported so that they can be rendered later on. The importing process is the same as with functional components. We’ll import the class component inside of the App component and render it.

与功能组件一样，类组件也需要导出，以便以后可以呈现。 导入过程与功能组件相同。 我们将把类组件导入App组件内部并进行渲染。

Make sure you have your development server running: npm start.

确保您的开发服务器正在运行： npm start 。

Since we don’t know how to pass arguments yet to class components, to display an additional movie by Jim Carrey, you’ll have to create a new component. So, create the component Mask.js in src/components, import it into App and render it below <Sonic />.

由于我们尚不知道如何将参数传递给类组件，因此要显示Jim Carrey的其他影片，您必须创建一个新组件。 因此，在src / components中创建组件Mask.js ，将其导入App并在<Sonic />下呈现。

You might have noticed that we’re importing a class component into the App functional component. Yes, you can do that. You can also import functional components into class components. We’re going to be looking at passing arguments to components in the next article since we don’t want to keep creating individual components for each movie that Jim Carrey has appeared in.

您可能已经注意到，我们正在将类组件导入到App功能组件中。 是的，你可以这样做。 您也可以将功能组件导入类组件。 由于我们不想继续为Jim Carrey出演的每部电影创建单独的组件，因此我们将在下一篇文章中讨论将参数传递给组件。