下面是react官方文档的个人翻译，如有翻译错误，请多多指出
原文地址：https://facebook.github.io/re...

components let you splIT the UI into indePEndent, reusable pieces, and think about each piece in isolation.

组件能让你把UI切割成独立的，可重用的部件，并且能让你独立的思考每一个部件。

Conceptually, components are like JavaScript functions.

从概念上看，components 就像Javascript 的函数。

They accept arbitrary inputs (called "PRops") and return React elements describing what should appear on the screen.

他们都允许任意的输入（叫"props"）然后返回React elements ，描述元素应该怎么显示在屏幕。

Functional and Class Components

函数以及类组件

The simplest way to define a component is to write a JavaScript function:

定义组件最简单的方法就是写一个Javascript函数：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

This function is a valid React component because it accepts a single "props" object argument with data and returns a React element.

这个函数是一个合法的React element，因为他接收一个props对象参数并且返回一个React element。

We call such components "functional" because they are literally JavaScript functions.

我们叫这样的组件为函数式组件，因为他们跟Javascipt的函数一样。

You can also use an ES6 class to define a component:

你通常可以使用ES6的class来定义一个组件：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

The above two components are equivalent From React's point of view.

对于React的视图来说，上面这两个组件是等价的。

Classes have some additional features that we will discuss in the next sections.

我们将会在下一章讨论类组件更多的功能。

Until then, we will use functional components for their conciseness.

现在，我们会因为函数式而使用它。

Rendering a Component

渲染组件

Previously, we only encountered React elements that represent DOM tags:
以前，我们只鼓励用React element来表示dom 标签：

const element = <div />;

const element = <Welcome name="Sara" />;

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Typically, new React apps have a single App component at the very top.

技术上来讲，一个新的react 应用只有一个App组件在顶部。

However, if you integrate React into an existing app, you might start bottom-up with a small component like Button and gradually work your way to the top of the view hierArchy.

然而，如果你想把react嵌入到现有的应用中，你可能需要从一个小组件像按钮并且逐渐按你的方式替换更高的结构。

Caveat:

Components must return a single root element. This is why we added a <div> to contain all the <Welcome /> elements.

警告:

组件必须返回一个根组件。这就是我们为什么要用一个<div>去包住所有的<Welcome />。

Extracting Components

提取组件

Don't be afraid to split components into smaller components.

不要害怕把组件切割成更小的组件

For example, consider this Comment component:
举个例子：思考一下 Comment 组件: