One of the great things about React is its flexible component system. Once you get a hang of it, you can break up your application into reusable components and include them all over your project.

React的一大优点是其灵活的组件系统。 一旦掌握了这些技巧，就可以将应用程序分解为可重用的组件，并将其包含在整个项目中。

The problem is that there are a few gotchas that make working with components difficult for those new to React.

问题是，有一些陷阱使React新手很难使用组件。

For example, say you have the following component, mainIntro.js:

例如，假设您具有以下组件mainIntro.js ：

const mainIntro = props => (<div id="quote-box"><h1> Hunter x Hunter Quotes </h1><div id="text">"When I say it doesn't hurt me, that means I can bear it."</div><div id="author">- Killua Zoldyck</div><button id="new-quote"> Next Quote </button><a href="#" id="tweet-quote" target="_blank"> Tweet this quote </a></div>
)export default mainIntro;

And want to import it into App.js:

并希望将其导入App.js ：

import mainIntro from './components'class App extends React.Component{render(){return(<mainIntro />);}
}const mainNode = document.getElementById("quoter");
ReactDOM.render(<App />,mainNode);

But mainIntro isn't loading for some reason. Let's take a closer look at what's happening.

但是mainIntro由于某种原因未加载。 让我们仔细看看发生了什么。

命名组件 (Naming your components)

For anyone familiar with Object Oriented Programming, it's common convention to name each class with an uppercase letter. For example, a class to describe a person would be called Person to indicate that it's a class.

对于熟悉面向对象编程的任何人来说，通常的约定是用大写字母命名每个类。 例如，一个描述一个人的类将被称为Person以表明它是一个类。

In React, which uses JSX rather than plain JavaScript, the first letter of a tag indicates what kind of element it is. Uppercase first characters are used to specify React components, so mainIntro should instead be called MainIntro:

在使用JSX而不是普通JavaScript的React中，标签的第一个字母表示元素的种类。 大写的第一个字符用于指定React组件，因此mainIntro应该改为MainIntro ：

const MainIntro = props => (<div id="quote-box"><h1> Hunter x Hunter Quotes </h1><div id="text">"When I say it doesn't hurt me, that means I can bear it."</div><div id="author">- Killua Zoldyck</div><button id="new-quote"> Next Quote </button><a href="#" id="tweet-quote" target="_blank"> Tweet this quote </a></div>
)export default MainIntro;

While the filename can still be mainIntro.js, it's a good idea to capitalize the first character, too. Later when you scan the contents of the directory, you'll quickly be able to pick out that MainIntro.js contains a component.

尽管文件名仍然可以是mainIntro.js ，但也最好将第一个字符大写。 稍后，当您扫描目录的内容时，您将很快能够发现MainIntro.js包含一个组件。

Now App.js should look like this:

现在App.js应该看起来像这样：

import MainIntro from './components/MainIntro.js';class App extends React.Component{render(){return(<MainIntro />);}
}const mainNode = document.getElementById("quoter");
ReactDOM.render(<App />,mainNode);

如何安装React？ (How is React Installed?)

There are two main ways to use React. First, install and set it up locally, probably through create-react-app. Second, through a CDN.

有两种主要的方法来使用React。 首先，可能通过create-react-app在本地安装并设置它。 第二，通过CDN。

You might have noticed above that the code snippets don't actually include React in the project with import React from'react';. This will throw an error if you're working with React locally.

您可能在上面已经注意到，代码片段实际上并未在从“ import React from'react';的项目中包含import React from'react'; 。 如果您在本地使用React，这将引发错误。

However, if you're using a CDN to load React, it's available globally and you don't need to import it like above.

但是，如果您使用CDN加载React，那么它在全球范围内都是可用的，您不需要像上面那样导入它。

箭头功能 (Arrow Functions)

Before diving into React, it's important to have a solid understanding of JavaScript, particularly ES6 syntax.

在深入研究React之前，对JavaScript特别是ES6语法有扎实的了解非常重要。

Take another look at the MainIntro component:

再看一下MainIntro组件：

const MainIntro = props => (<div id="quote-box"><h1> Hunter x Hunter Quotes </h1><div id="text">"When I say it doesn't hurt me, that means I can bear it."</div><div id="author">- Killua Zoldyck</div><button id="new-quote"> Next Quote </button><a href="#" id="tweet-quote" target="_blank"> Tweet this quote </a></div>
)export default MainIntro;

If you look closely at the first line, you'll notice a syntax error:

如果仔细观察第一行，您会发现语法错误：

const MainIntro = props => (

You're writing a functional component, which are typically simple JavaScript functions that can accept props as an argument and return valid JSX. Of course, the syntax needs to be correct for it to return properly.

您正在编写一个功能组件，这些组件通常是简单JavaScript函数，可以接受props作为参数并返回有效的JSX。 当然，语法必须正确才能正确返回。

Arrow functions can be written in a lot of ways, but for this example, you'll need to add the curly braces ({}) and make sure to return JSX from the component itself:

Arrow函数可以通过多种方式编写，但是对于本示例，您需要添加花括号( {} )，并确保从组件本身返回JSX：

const MainIntro = props => {return (<div id="quote-box">//... rest of the code   </div>);
}

After implementing all the changes mentioned above, your component should now render properly.

完成上述所有更改后，您的组件现在应正确呈现。

Though the main distinction between functional and class components in React used to be that the former was "stateless" while the latter was "statefull", React Hooks have blurred the lines between them. Read more about both components in this overview and this deeper dive into functional components with React Hooks.

尽管React的功能和类组件之间的主要区别以前是前者是“无状态”，而后者是“有状态”，但是React Hooks混淆了它们之间的界线。 在此概述中了解有关这两个组件的更多信息，并通过React Hooks深入了解功能组件 。

翻译自: https://www.freecodecamp.org/news/react-simple-intro-component-not-rendering/