摘要：調用組件，并且把作為傳遞進去。警告組件的名字最好都是大寫字母開頭的。舉個例子，表示一個標簽，但表示一個組件并且要求是一個閉合標簽。組件能引用他們的組件作為他們的輸出。警告組件必須返回一個根組件。讓我們把這個組件切割成更小的組件。

下面是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 ，描述元素應該怎么顯示在屏幕。

函數以及類組件

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

定義組件最簡單的方法就是寫一個Javascript函數：

function Welcome(props) {
  return 
Hello, {props.name}
;
}

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 
Hello, {this.props.name}
;
  }
}

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.

現在，我們會因為函數式而使用它。

渲染組件

Previously, we only encountered React elements that represent DOM tags:
以前，我們只鼓勵用React element來表示dom 標簽：

const element = 
;

However, elements can also represent user-defined components:

然而，elements同樣用來表示用戶定義的組件：

const element = ;

When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. We call this object "props".

當React遇到一個element表示用戶定義的組件的時候，React會把JSX里面的屬性作啊一個對象傳遞到組件中。我們通常叫這個對象為props。

For example, this code renders "Hello, Sara" on the page:

例如，下面的代碼渲染了"Hello, Sara"在頁面上：

function Welcome(props) {
  return 
Hello, {props.name}
;
}

const element = ;
ReactDOM.render(
  element,
  document.getElementById("root")
);

打開試試
Let"s recap what happens in this example:
讓我們來看看這段代碼做了些什么:

We call ReactDOM.render() with the element.

我們調用了ReactDOM.render()并且把 作為第一個element傳進去了。

2.React calls the Welcome component with {name: "Sara"} as the props.

React 調用Welcome組件，并且把 {name: "Sara"} 作為props傳遞進去。

3.Our Welcome component returns a

Hello, Sara

我們的Welcome組件返回了一個a

Hello, Sara

4.React DOM efficiently updates the DOM to match

Hello, Sara

React DOM 高效的把

Hello, Sara

Caveat:
警告：
Always start component names with a capital letter.
組件的名字最好都是大寫字母開頭的。
For example, 
 represents a DOM tag, but  represents a component and requires Welcome to be in scope.
舉個例子， 
表示一個DOM標簽，但 表示一個組件并且要求是一個閉合標簽。

Components can refer to other components in their output.
組件能引用他們的組件作為他們的輸出。

This lets us use the same component abstraction for any level of detail.
這會讓我們相同的組件抽象更多的細節

A button, a form, a dialog, a screen: in React apps, all those are commonly expressed as components.
在React的應用中，一個組件，一個表單，一個彈出框，一個界面都被稱為組件。

For example, we can create an App component that renders Welcome many times:
例如，我們創建了一個將 Welecom組件 渲染多次的組件。

function Welcome(props) {
  return 
Hello, {props.name}
;
}

function App() {
  return (
    

      
      
      
    
  );
}

ReactDOM.render(
  ,
  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 
 to contain all the  elements.

警告:
組件必須返回一個根組件。這就是我們為什么要用一個
去包住所有的。

提取組件

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

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

For example, consider this Comment component:
舉個例子：思考一下 Comment 組件:

function Comment(props) {
  return (
    

      

        
        

          {props.author.name}
        
      
      

        {props.text}
      
      

        {formatDate(props.date)}
      
    
  );
}

打開試試

It accepts author (an object), text (a string), and date (a date) as props, and describes a comment on a social media website.

上面的組件接收作者（object）， text(字符串),并且日期(date)作為它們的props，并且作為在社交媒體網站上的評論組件。

This component can be tricky to change because of all the nesting, and it is also hard to reuse individual parts of it. Let"s extract a few components from it.

因為所有的東西都被嵌套了，所以這個組件要改變就很棘手，并且也很難重用其中的一部分。讓我們把這個組件切割成更小的組件。

First, we will extract Avatar:
首先，我們先切割Avatar組件：

function Avatar(props) {
  return (
    
  );
}

The Avatar doesn"t need to know that it is being rendered inside a Comment.
這個Avatar不需要知道它被Comment組件渲染出來。

This is why we have given its prop a more generic name: user rather than author.
這就是為什么我們給組件prop一個更通用的名字： user 比 author好。

We recommend naming props from the component"s own point of view rather than the context in which it is being used.

我們要求命名組件的props的時候，要從組件自身的視圖出發，而不是他所被使用的內容上。

We can now simplify Comment a tiny bit:

我們現在可以簡化評論組件：

function Comment(props) {
  return (
    

      

        
        

          {props.author.name}
        
      
      

        {props.text}
      
      

        {formatDate(props.date)}
      
    
  );
}

Next, we will extract a UserInfo component that renders an Avatar next to user"s name:

我們將切割成一個渲染Avatar組件 的UserInfo組件，并且包含user名字。

function UserInfo(props) {
  return (
    

      
      

        {props.user.name}
      
    
  );
}

This lets us simplify Comment even further:

我們更進一步看看這個簡化了的組件:

function Comment(props) {
  return (
    

      
      

        {props.text}
      
      

        {formatDate(props.date)}
      
    
  );
}

打開試試

Extracting components might seem like grunt work at first, but having a palette of reusable components pays off in larger apps.

剛開始切割組件可能看起來像麻煩的工作，但對于一個大型的應用來說，擁有一個可重用的組件是一個回報很高的事情。

A good rule of thumb is that if a part of your UI is used several times (Button, Panel, Avatar), or is complex enough on its own (App, FeedStory, Comment), it is a good candidate to be a reusable component.

一個好的經驗法則是如果你UI中某些組件被重用了多次（如Button, Panel, Avatar）,或者對于一個自身就足夠復雜的組件（App, FeedStory, Comment）來說，將它們作為可重用的組件是一個好的選擇。

Props 是只可讀取的

Whether you declare a component as a function or a class, it must never modify its own props. Consider this sum function:

無論你聲明一個函數組件或者是一個類組件,它都不能修改他們的props.思考一下下面的相加函數:

function sum(a, b) {
  return a + b;
}

Such functions are called "pure" because they do not attempt to change their inputs, and always return the same result for the same inputs.

像這樣的函數，我們稱為純函數，因為他們不要視圖改變他們的輸入，并且總是返回同樣的輸出通過輸入同樣的參數。

In contrast, this function is impure because it changes its own input:

與此形成鮮明對比的是，這個函數是不純的，因為他改變了自身的參數的值：

function withdraw(account, amount) {
  account.total -= amount;
}

React is pretty flexible but it has a single strict rule:

React是非常靈活的，但是它有一個嚴格的準則：

All React components must act like pure functions with respect to their props.
所有的React Components 必須要想純函數那樣去接受他們的props。

Of course, application UIs are dynamic and change over time.

當然，應用的UI是動態的并且經常變化的。

In the next section, we will introduce a new concept of "state".

在下一章，我們將會介紹一個新的該你那"state"。

State allows React components to change their output over time in response to user actions, network responses, and anything else, without violating this rule.

State允許React的組件多次改變它們的輸出來響應用戶的操作，網絡的請求或者別的都不會違背這個準則。