From 076f83b3613a2b81f72a8f96392d67cb861eaf36 Mon Sep 17 00:00:00 2001
From: Vincent Lin <bugtender@gmail.com>
Date: Wed, 13 Feb 2019 15:39:52 +0800
Subject: [PATCH 1/5] docs(zh-hant): Translate Components and Props

---
 content/docs/components-and-props.md | 98 ++++++++++++++--------------
 content/docs/nav.yml                 |  2 +-
 2 files changed, 50 insertions(+), 50 deletions(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 4b3bbb6e6..1f86ad5e0 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -1,6 +1,6 @@
 ---
 id: components-and-props
-title: Components and Props
+title: 元件與 Props
 permalink: docs/components-and-props.html
 redirect_from:
   - "docs/reusable-components.html"
@@ -16,13 +16,13 @@ prev: rendering-elements.html
 next: state-and-lifecycle.html
 ---
 
-Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components. You can find a [detailed component API reference here](/docs/react-component.html).
+元件使你可以將 UI 拆分成獨立且可復用的程式碼，並且專注於各別程式碼的思考。本章節旨在介紹元件的相關概念，你也可以在此參閱[詳細的 API 文件](/docs/react-component.html)。
 
-Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.
+概念上來說，元件就像是 JavaScript 的函式，它接收任意的參數（稱之為 "props"）並且回傳描述畫面的 React 元素。
 
-## Function and Class Components {#function-and-class-components}
+## 函式元件與類別元件{#function-and-class-components}
 
-The simplest way to define a component is to write a JavaScript function:
+定義元件最簡單的方法即是撰寫一個 Javascript 函式：
 
 ```js
 function Welcome(props) {
@@ -30,9 +30,9 @@ function Welcome(props) {
 }
 ```
 
-This function is a valid React component because it accepts a single "props" (which stands for properties) object argument with data and returns a React element. We call such components "function components" because they are literally JavaScript functions.
+此函式是一個符合規範的 React 元件，因為它接受一個 "props"（指屬性 properties）物件並回傳一個 React 元素。我們稱之為函式元件（function components），因為它本身就是一個 JavaScript functions。
 
-You can also use an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) to define a component:
+同樣的，你也可以使用 [ES6 類別](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) 來定義元件：
 
 ```js
 class Welcome extends React.Component {
@@ -42,27 +42,27 @@ class Welcome extends React.Component {
 }
 ```
 
-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](/docs/state-and-lifecycle.html). Until then, we will use function components for their conciseness.
+我們將會在[下一個章節]((/docs/state-and-lifecycle.html))探討 class 所擁有的額外特性，但在那之前，我們會使用函式元件來保持簡潔。
 
-## Rendering a Component {#rendering-a-component}
+## 描繪一個元件 {#rendering-a-component}
 
-Previously, we only encountered React elements that represent DOM tags:
+在此之前，我們只見過這種相當於 DOM 標籤的 React 元素：
 
 ```js
 const element = <div />;
 ```
 
-However, elements can also represent user-defined components:
+不過，React 元素也可以是使用者自定義的元件：
 
 ```js
 const element = <Welcome name="Sara" />;
 ```
 
-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 元素為使用者定義的元件時，它會將 JSX 所接收的屬性作為一個物件傳遞給元件，這一個物件被稱為 "props"。
 
-For example, this code renders "Hello, Sara" on the page:
+舉例來說，這段程式碼會在頁面上繪製出 "Hello, Sara"：
 
 ```js{1,5}
 function Welcome(props) {
@@ -76,26 +76,26 @@ ReactDOM.render(
 );
 ```
 
-[](codepen://components-and-props/rendering-a-component)
+[在 CodePen 上試試看吧！](codepen://components-and-props/rendering-a-component)
 
-Let's recap what happens in this example:
+讓我們來複習一下這個例子發生了什麼事：
 
-1. We call `ReactDOM.render()` with the `<Welcome name="Sara" />` element.
-2. React calls the `Welcome` component with `{name: 'Sara'}` as the props.
-3. Our `Welcome` component returns a `<h1>Hello, Sara</h1>` element as the result.
-4. React DOM efficiently updates the DOM to match `<h1>Hello, Sara</h1>`.
+1. 我們對 `<Welcome name="Sara" />` 這個元素調用了 `ReactDOM.render()`。
+2. React 以 `{name: 'Sara'}` 作為 props 傳入 `Welcome` 元件並呼叫。
+3. `Welcome` 元件回傳了 `<h1>Hello, Sara</h1>` 元素作為返回值。
+4. React DOM 高效率的將 DOM 更新為 `<h1>Hello, Sara</h1>`。
 
->**Note:** Always start component names with a capital letter.
+>**注意：** 元件的字首須為大寫字母
 >
->React treats components starting with lowercase letters as DOM tags. For example, `<div />` represents an HTML div tag, but `<Welcome />` represents a component and requires `Welcome` to be in scope.
+>React 會將小寫字母開頭的組件視為原始 DOM 標籤，舉例來說，`<div />` 就會被視為是 HTML 的 div 標籤，但是 `<Welcome />` 則是一個元件，而且需要在作用域中使用 `Welcome`。
 >
->To learn more about the reasoning behind this convention, please read [JSX In Depth](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized).
+>想要了解更多此約定背後的原因，請參閱 [JSX In Depth](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized) 章節。
 
-## Composing Components {#composing-components}
+## 組合元件{#composing-components}
 
-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:
+舉例來說，我們可以建立一個繪製多次 `Welcome` 的 `App` 元件：
 
 ```js{8-10}
 function Welcome(props) {
@@ -118,15 +118,15 @@ ReactDOM.render(
 );
 ```
 
-[](codepen://components-and-props/composing-components)
+[在 CodePen 上試試看吧！](codepen://components-and-props/composing-components)
 
-Typically, new React apps have a single `App` component at the very top. 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 應用程式都有一個最高層級的 `App` 元件。然而，如果你將 React 結合至現存的應用程式中，你可能需要使用項 `Button` 這樣的小元件，並由下往上，逐步應用到畫面的最高層級。
 
-## Extracting Components {#extracting-components}
+## 抽取元件 {#extracting-components}
 
-Don't be afraid to split components into smaller components.
+別害怕將 component 分成更小的 component。
 
-For example, consider this `Comment` component:
+舉例來說，我們看這個 `Comment` 的 component：
 
 ```js
 function Comment(props) {
@@ -152,13 +152,13 @@ function Comment(props) {
 }
 ```
 
-[](codepen://components-and-props/extracting-components)
+[在 CodePen 上試試看吧！](codepen://components-and-props/extracting-components)
 
-It accepts `author` (an object), `text` (a string), and `date` (a date) as props, and describes a comment on a social media website.
+它接受 `author` (一個物件)、`text` (一個字串)、還有 `date` (一個日期) 作為它的 props。它的作用是在一個社交網站上繪製一個 comment。
 
-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` 分離出來：
 
 ```js{3-6}
 function Avatar(props) {
@@ -171,11 +171,11 @@ function Avatar(props) {
 }
 ```
 
-The `Avatar` doesn't need to know that it is being rendered inside a `Comment`. This is why we have given its prop a more generic name: `user` rather than `author`.
+這個 `Avatar` 並不需知道他會被繪製在 `Comment` 中。這是為什麼我們給他一個更為一般的名字： `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:
+現在我們可以稍微簡化 `Comment`：
 
 ```js{5}
 function Comment(props) {
@@ -198,7 +198,7 @@ function Comment(props) {
 }
 ```
 
-Next, we will extract a `UserInfo` component that renders an `Avatar` next to the user's name:
+接下來，我們將 `UserInfo` 元件也分離出來，它會在使用者名稱旁邊繪製 `Avatar` 元件：
 
 ```js{3-8}
 function UserInfo(props) {
@@ -213,7 +213,7 @@ function UserInfo(props) {
 }
 ```
 
-This lets us simplify `Comment` even further:
+讓我們將 `Comment` 更加簡化：
 
 ```js{4}
 function Comment(props) {
@@ -231,13 +231,13 @@ function Comment(props) {
 }
 ```
 
-[](codepen://components-and-props/extracting-components-continued)
+[在 CodePen 上試試看吧！](codepen://components-and-props/extracting-components-continued)
 
-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 are Read-Only {#props-are-read-only}
+## Props 的唯獨性 {#props-are-read-only}
 
-Whether you declare a component [as a function or a class](#function-and-class-components), it must never modify its own props. Consider this `sum` function:
+不管你使用[函式或是類別來宣告元件](#function-and-class-components)，都絕不能修改自己的props。例如這個 sum 函式：
 
 ```js
 function sum(a, b) {
@@ -245,9 +245,9 @@ function sum(a, b) {
 }
 ```
 
-Such functions are called ["pure"](https://en.wikipedia.org/wiki/Pure_function) because they do not attempt to change their inputs, and always return the same result for the same inputs.
+像這樣的函式是[純函數](https://en.wikipedia.org/wiki/Pure_function)的，因為他們並沒有改變輸入，而且相同的輸入總是回傳一樣的結果。
 
-In contrast, this function is impure because it changes its own input:
+相反地，這個函式並非純函數，因為它更改了它的參數：
 
 ```js
 function withdraw(account, amount) {
@@ -255,8 +255,8 @@ function withdraw(account, 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 元件都必須像純函數函式一般保護他的 props**
 
-Of course, application UIs are dynamic and change over time. In the [next section](/docs/state-and-lifecycle.html), we will introduce a new concept of "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.
+當然，應用程式的 UI 是動態的，而且總是隨著時間改變。在[下個章節](/docs/state-and-lifecycle.html)，我們會介紹一個新的概念 "state"。State 可以在不違反上述規則的前提下，讓 React 元件隨使用者操作、網路回應、或是其他方式改變輸出內容。
diff --git a/content/docs/nav.yml b/content/docs/nav.yml
index 4d4a7571f..f9d52cedc 100644
--- a/content/docs/nav.yml
+++ b/content/docs/nav.yml
@@ -18,7 +18,7 @@
     - id: rendering-elements
       title: Rendering Elements
     - id: components-and-props
-      title: Components and Props
+      title: 元件與 Props
     - id: state-and-lifecycle
       title: State and Lifecycle
     - id: handling-events

From ee9badcf4f7e192ce61055ec9dbc467b6e07638c Mon Sep 17 00:00:00 2001
From: Vincent Lin <bugtender@gmail.com>
Date: Fri, 15 Feb 2019 12:39:42 +0800
Subject: [PATCH 2/5] docs(zh-hant): Apply suggestions and update translation

---
 content/docs/components-and-props.md | 64 ++++++++++++++--------------
 content/docs/nav.yml                 |  2 +-
 2 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 1f86ad5e0..ac1e6e969 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -1,6 +1,6 @@
 ---
 id: components-and-props
-title: 元件與 Props
+title: Components 與 Props
 permalink: docs/components-and-props.html
 redirect_from:
   - "docs/reusable-components.html"
@@ -16,13 +16,13 @@ prev: rendering-elements.html
 next: state-and-lifecycle.html
 ---
 
-元件使你可以將 UI 拆分成獨立且可復用的程式碼，並且專注於各別程式碼的思考。本章節旨在介紹元件的相關概念，你也可以在此參閱[詳細的 API 文件](/docs/react-component.html)。
+Component 使你可以將 UI 拆分成獨立且可復用的程式碼，並且專注於各別程式碼的思考。本章節旨在介紹 component 的相關概念，你也可以在此參閱[詳細的 API 文件](/docs/react-component.html)。
 
-概念上來說，元件就像是 JavaScript 的函式，它接收任意的參數（稱之為 "props"）並且回傳描述畫面的 React 元素。
+概念上來說，component 就像是 JavaScript 的函式，它接收任意的參數（稱之為「props」）並且回傳描述畫面的 React 元素。
 
-## 函式元件與類別元件{#function-and-class-components}
+## Function Components 與 Class Components {#function-and-class-components}
 
-定義元件最簡單的方法即是撰寫一個 Javascript 函式：
+定義 component 最簡單的方法即是撰寫一個 Javascript 函式：
 
 ```js
 function Welcome(props) {
@@ -30,9 +30,9 @@ function Welcome(props) {
 }
 ```
 
-此函式是一個符合規範的 React 元件，因為它接受一個 "props"（指屬性 properties）物件並回傳一個 React 元素。我們稱之為函式元件（function components），因為它本身就是一個 JavaScript functions。
+此函式是一個符合規範的 React component，因為它接受一個「props」（指屬性 properties）物件並回傳一個 React 元素。我們稱之為 function component，因為它本身就是一個 JavaScript functions。
 
-同樣的，你也可以使用 [ES6 類別](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) 來定義元件：
+同樣的，你也可以使用 [ES6 Class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) 來定義 component：
 
 ```js
 class Welcome extends React.Component {
@@ -42,11 +42,11 @@ class Welcome extends React.Component {
 }
 ```
 
-上述兩種元件的在 React 中是同等的。
+上述兩種 component 的在 React 中是同等的。
 
-我們將會在[下一個章節]((/docs/state-and-lifecycle.html))探討 class 所擁有的額外特性，但在那之前，我們會使用函式元件來保持簡潔。
+我們將會在[下一個章節]((/docs/state-and-lifecycle.html))探討 class 所擁有的額外特性，但在那之前，我們會使用 function component 來保持簡潔。
 
-## 描繪一個元件 {#rendering-a-component}
+## Render 一個 component {#rendering-a-component}
 
 在此之前，我們只見過這種相當於 DOM 標籤的 React 元素：
 
@@ -54,15 +54,15 @@ class Welcome extends React.Component {
 const element = <div />;
 ```
 
-不過，React 元素也可以是使用者自定義的元件：
+不過，React 元素也可以是使用者自定義的 component：
 
 ```js
 const element = <Welcome name="Sara" />;
 ```
 
-當 React 元素為使用者定義的元件時，它會將 JSX 所接收的屬性作為一個物件傳遞給元件，這一個物件被稱為 "props"。
+當 React 元素為使用者定義的 component 時，它會將 JSX 所接收的屬性作為一個物件傳遞給 component，這一個物件被稱為「props」。
 
-舉例來說，這段程式碼會在頁面上繪製出 "Hello, Sara"：
+舉例來說，這段程式碼會在頁面上 render 出「Hello, Sara」：
 
 ```js{1,5}
 function Welcome(props) {
@@ -81,21 +81,21 @@ ReactDOM.render(
 讓我們來複習一下這個例子發生了什麼事：
 
 1. 我們對 `<Welcome name="Sara" />` 這個元素調用了 `ReactDOM.render()`。
-2. React 以 `{name: 'Sara'}` 作為 props 傳入 `Welcome` 元件並呼叫。
-3. `Welcome` 元件回傳了 `<h1>Hello, Sara</h1>` 元素作為返回值。
+2. React 以 `{name: 'Sara'}` 作為 props 傳入 `Welcome` component 並呼叫。
+3. `Welcome` component 回傳了 `<h1>Hello, Sara</h1>` 元素作為返回值。
 4. React DOM 高效率的將 DOM 更新為 `<h1>Hello, Sara</h1>`。
 
->**注意：** 元件的字首須為大寫字母
+>**注意：** Component 的字首須為大寫字母
 >
->React 會將小寫字母開頭的組件視為原始 DOM 標籤，舉例來說，`<div />` 就會被視為是 HTML 的 div 標籤，但是 `<Welcome />` 則是一個元件，而且需要在作用域中使用 `Welcome`。
+>React 會將小寫字母開頭的組件視為原始 DOM 標籤，舉例來說，`<div />` 就會被視為是 HTML 的 div 標籤，但是 `<Welcome />` 則是一個 component，而且需要在作用域中使用 `Welcome`。
 >
->想要了解更多此約定背後的原因，請參閱 [JSX In Depth](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized) 章節。
+>想要了解更多關於此慣例的原因，請參閱 [JSX In Depth](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized) 章節。
 
-## 組合元件{#composing-components}
+## 組合 component {#composing-components}
 
-元件可以在輸出中引用其他元件。我們可以在任何層次中抽象化相同的元件，按鈕、表單、對話框、甚至是整個畫面，在 React 應用程式中都將以元件的方式呈現。
+Component 可以在輸出中引用其他 component。我們可以在任何層次中抽象化相同的 component，按鈕、表單、對話框、甚至是整個畫面，在 React 應用程式中都將以 component 的方式呈現。
 
-舉例來說，我們可以建立一個繪製多次 `Welcome` 的 `App` 元件：
+舉例來說，我們可以建立一個 render 多次 `Welcome` 的 `App` component：
 
 ```js{8-10}
 function Welcome(props) {
@@ -120,9 +120,9 @@ ReactDOM.render(
 
 [在 CodePen 上試試看吧！](codepen://components-and-props/composing-components)
 
-通常來說，每個 React 應用程式都有一個最高層級的 `App` 元件。然而，如果你將 React 結合至現存的應用程式中，你可能需要使用項 `Button` 這樣的小元件，並由下往上，逐步應用到畫面的最高層級。
+通常來說，每個 React 應用程式都有一個最高層級的 `App` component。然而，如果你將 React 結合至現存的應用程式中，你可能需要使用像 `Button` 這樣的小型 component，並由下往上，逐步應用到畫面的最高層級。
 
-## 抽取元件 {#extracting-components}
+## 抽取 component {#extracting-components}
 
 別害怕將 component 分成更小的 component。
 
@@ -154,9 +154,9 @@ function Comment(props) {
 
 [在 CodePen 上試試看吧！](codepen://components-and-props/extracting-components)
 
-它接受 `author` (一個物件)、`text` (一個字串)、還有 `date` (一個日期) 作為它的 props。它的作用是在一個社交網站上繪製一個 comment。
+它接受 `author` (一個物件)、`text` (一個字串)、還有 `date` (一個日期) 作為它的 props。它的作用是在一個社交網站上 render 一則評論。
 
-這個元件可能因為太多的巢狀關係而難以更動，而且也難以復用獨立的部分。讓我們把一些元件從中分離吧。
+這個 component 可能因為太多的巢狀關係而難以更動，而且也難以復用獨立的部分。讓我們把一些 component 從中分離吧。
 
 首先, 我們將 `Avatar` 分離出來：
 
@@ -171,9 +171,9 @@ function Avatar(props) {
 }
 ```
 
-這個 `Avatar` 並不需知道他會被繪製在 `Comment` 中。這是為什麼我們給他一個更為一般的名字： `user` 而不是 `author`.
+這個 `Avatar` 並不需知道他會被 render 在 `Comment` 中。這是為什麼我們給他一個更為一般的名字： `user` 而不是 `author`.
 
-我們建議從元件的角度為 props 命名，而不是它的使用情境。
+我們建議從 component 的角度為 props 命名，而不是它的使用情境。
 
 現在我們可以稍微簡化 `Comment`：
 
@@ -198,7 +198,7 @@ function Comment(props) {
 }
 ```
 
-接下來，我們將 `UserInfo` 元件也分離出來，它會在使用者名稱旁邊繪製 `Avatar` 元件：
+接下來，我們將 `UserInfo` component 也分離出來，它會在使用者名稱旁邊 render `Avatar` component：
 
 ```js{3-8}
 function UserInfo(props) {
@@ -233,11 +233,11 @@ function Comment(props) {
 
 [在 CodePen 上試試看吧！](codepen://components-and-props/extracting-components-continued)
 
-在一開始，將元件分離出來可能是一件繁重的工作，但是在較大的應用程式中，建構可復用的元件是非常值得。以經驗來說，如果一個 UI 中有一部分會被重複使用很多次（`Button`、`Panel`、`Avatar`），或者它足夠複雜到自成一個元件（`App`、`FeedStory`、`Comment`），那它就適合被抽出作為一個可復用的元件。
+在一開始，將 component 分離出來可能是一件繁重的工作，但是在較大的應用程式中，建構可復用的 component 是非常值得。以經驗來說，如果一個 UI 中有一部分會被重複使用很多次（`Button`、`Panel`、`Avatar`），或者它足夠複雜到自成一個 component（`App`、`FeedStory`、`Comment`），那它就適合被抽出作為一個可復用的 component。
 
 ## Props 的唯獨性 {#props-are-read-only}
 
-不管你使用[函式或是類別來宣告元件](#function-and-class-components)，都絕不能修改自己的props。例如這個 sum 函式：
+不管你使用[函式或是 Class 來宣告 component](#function-and-class-components)，都絕不能修改自己的 props。例如這個 sum 函式：
 
 ```js
 function sum(a, b) {
@@ -257,6 +257,6 @@ function withdraw(account, amount) {
 
 React 是很彈性的，但有一條嚴格的規定：
 
-**所有的 React 元件都必須像純函數函式一般保護他的 props**
+**所有的 React component 都必須像純函數函式一般保護他的 props**
 
-當然，應用程式的 UI 是動態的，而且總是隨著時間改變。在[下個章節](/docs/state-and-lifecycle.html)，我們會介紹一個新的概念 "state"。State 可以在不違反上述規則的前提下，讓 React 元件隨使用者操作、網路回應、或是其他方式改變輸出內容。
+當然，應用程式的 UI 是動態的，而且總是隨著時間改變。在[下個章節](/docs/state-and-lifecycle.html)，我們會介紹一個新的概念「state」。State 可以在不違反上述規則的前提下，讓 React component 隨使用者操作、網路回應、或是其他方式改變輸出內容。
diff --git a/content/docs/nav.yml b/content/docs/nav.yml
index f9d52cedc..260021518 100644
--- a/content/docs/nav.yml
+++ b/content/docs/nav.yml
@@ -18,7 +18,7 @@
     - id: rendering-elements
       title: Rendering Elements
     - id: components-and-props
-      title: 元件與 Props
+      title: Components 與 Props
     - id: state-and-lifecycle
       title: State and Lifecycle
     - id: handling-events

From 753fc3f4971a80f9ccec9d656be82c919b20e0f9 Mon Sep 17 00:00:00 2001
From: Vincent Lin <bugtender@gmail.com>
Date: Fri, 15 Feb 2019 20:09:37 +0800
Subject: [PATCH 3/5] docs(zh-hant): Apply suggestions and use function
 everywhere

---
 content/docs/components-and-props.md | 36 ++++++++++++++--------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index ac1e6e969..cd49d6401 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -18,11 +18,11 @@ next: state-and-lifecycle.html
 
 Component 使你可以將 UI 拆分成獨立且可復用的程式碼，並且專注於各別程式碼的思考。本章節旨在介紹 component 的相關概念，你也可以在此參閱[詳細的 API 文件](/docs/react-component.html)。
 
-概念上來說，component 就像是 JavaScript 的函式，它接收任意的參數（稱之為「props」）並且回傳描述畫面的 React 元素。
+概念上來說，component 就像是 JavaScript 的 function，它接收任意的參數（稱之為「props」）並且回傳描述畫面的 React 元素。
 
-## Function Components 與 Class Components {#function-and-class-components}
+## Function Component 與 Class Component {#function-and-class-components}
 
-定義 component 最簡單的方法即是撰寫一個 Javascript 函式：
+定義 component 最簡單的方法即是撰寫一個 Javascript function：
 
 ```js
 function Welcome(props) {
@@ -30,7 +30,7 @@ function Welcome(props) {
 }
 ```
 
-此函式是一個符合規範的 React component，因為它接受一個「props」（指屬性 properties）物件並回傳一個 React 元素。我們稱之為 function component，因為它本身就是一個 JavaScript functions。
+此 function 是一個符合規範的 React component，因為它接受一個「props」（指屬性 properties）物件並回傳一個 React 元素。我們稱之為 function component，因為它本身就是一個 JavaScript functions。
 
 同樣的，你也可以使用 [ES6 Class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) 來定義 component：
 
@@ -46,7 +46,7 @@ class Welcome extends React.Component {
 
 我們將會在[下一個章節]((/docs/state-and-lifecycle.html))探討 class 所擁有的額外特性，但在那之前，我們會使用 function component 來保持簡潔。
 
-## Render 一個 component {#rendering-a-component}
+## Render 一個 Component {#rendering-a-component}
 
 在此之前，我們只見過這種相當於 DOM 標籤的 React 元素：
 
@@ -80,10 +80,10 @@ ReactDOM.render(
 
 讓我們來複習一下這個例子發生了什麼事：
 
-1. 我們對 `<Welcome name="Sara" />` 這個元素調用了 `ReactDOM.render()`。
+1. 我們對 `<Welcome name="Sara" />` 這個元素呼叫了 `ReactDOM.render()`。
 2. React 以 `{name: 'Sara'}` 作為 props 傳入 `Welcome` component 並呼叫。
 3. `Welcome` component 回傳了 `<h1>Hello, Sara</h1>` 元素作為返回值。
-4. React DOM 高效率的將 DOM 更新為 `<h1>Hello, Sara</h1>`。
+4. React DOM 有效的將 DOM 更新為 `<h1>Hello, Sara</h1>`。
 
 >**注意：** Component 的字首須為大寫字母
 >
@@ -91,7 +91,7 @@ ReactDOM.render(
 >
 >想要了解更多關於此慣例的原因，請參閱 [JSX In Depth](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized) 章節。
 
-## 組合 component {#composing-components}
+## 組合 Component {#composing-components}
 
 Component 可以在輸出中引用其他 component。我們可以在任何層次中抽象化相同的 component，按鈕、表單、對話框、甚至是整個畫面，在 React 應用程式中都將以 component 的方式呈現。
 
@@ -122,9 +122,9 @@ ReactDOM.render(
 
 通常來說，每個 React 應用程式都有一個最高層級的 `App` component。然而，如果你將 React 結合至現存的應用程式中，你可能需要使用像 `Button` 這樣的小型 component，並由下往上，逐步應用到畫面的最高層級。
 
-## 抽取 component {#extracting-components}
+## 抽取 Component {#extracting-components}
 
-別害怕將 component 分成更小的 component。
+別害怕將 component 拆分成更小的 component。
 
 舉例來說，我們看這個 `Comment` 的 component：
 
@@ -171,7 +171,7 @@ function Avatar(props) {
 }
 ```
 
-這個 `Avatar` 並不需知道他會被 render 在 `Comment` 中。這是為什麼我們給他一個更為一般的名字： `user` 而不是 `author`.
+這個 `Avatar` 並不需知道他會被 render 在 `Comment` 中。這是為什麼我們給他一個更為一般的名字：`user` 而不是 `author`。
 
 我們建議從 component 的角度為 props 命名，而不是它的使用情境。
 
@@ -198,7 +198,7 @@ function Comment(props) {
 }
 ```
 
-接下來，我們將 `UserInfo` component 也分離出來，它會在使用者名稱旁邊 render `Avatar` component：
+接下來，我們將 `UserInfo` component 也抽離出來，它會在使用者名稱旁邊 render `Avatar` component：
 
 ```js{3-8}
 function UserInfo(props) {
@@ -233,11 +233,11 @@ function Comment(props) {
 
 [在 CodePen 上試試看吧！](codepen://components-and-props/extracting-components-continued)
 
-在一開始，將 component 分離出來可能是一件繁重的工作，但是在較大的應用程式中，建構可復用的 component 是非常值得。以經驗來說，如果一個 UI 中有一部分會被重複使用很多次（`Button`、`Panel`、`Avatar`），或者它足夠複雜到自成一個 component（`App`、`FeedStory`、`Comment`），那它就適合被抽出作為一個可復用的 component。
+在一開始，將 component 抽離出來可能是一件繁重的工作，但是在較大的應用程式中，建構可復用的 component 是非常值得。以經驗來說，如果一個 UI 中有一部分會被重複使用很多次（`Button`、`Panel`、`Avatar`），或者它足夠複雜到自成一個 component（`App`、`FeedStory`、`Comment`），那它就適合被抽出作為一個可復用的 component。
 
-## Props 的唯獨性 {#props-are-read-only}
+## Props 是唯讀的 {#props-are-read-only}
 
-不管你使用[函式或是 Class 來宣告 component](#function-and-class-components)，都絕不能修改自己的 props。例如這個 sum 函式：
+不管你使用 [function 或是 class 來宣告 component](#function-and-class-components)，都絕不能修改自己的 props。例如這個 sum function：
 
 ```js
 function sum(a, b) {
@@ -245,9 +245,9 @@ function sum(a, b) {
 }
 ```
 
-像這樣的函式是[純函數](https://en.wikipedia.org/wiki/Pure_function)的，因為他們並沒有改變輸入，而且相同的輸入總是回傳一樣的結果。
+像這樣的 function 是 [Pure function](https://en.wikipedia.org/wiki/Pure_function) 的，因為他們並沒有改變輸入，而且相同的輸入總是回傳一樣的結果。
 
-相反地，這個函式並非純函數，因為它更改了它的參數：
+相反地，這個 function 並非 Pure function，因為它更改了它的參數：
 
 ```js
 function withdraw(account, amount) {
@@ -257,6 +257,6 @@ function withdraw(account, amount) {
 
 React 是很彈性的，但有一條嚴格的規定：
 
-**所有的 React component 都必須像純函數函式一般保護他的 props**
+**所有的 React component 都必須像 Pure function 一般保護他的 props**
 
 當然，應用程式的 UI 是動態的，而且總是隨著時間改變。在[下個章節](/docs/state-and-lifecycle.html)，我們會介紹一個新的概念「state」。State 可以在不違反上述規則的前提下，讓 React component 隨使用者操作、網路回應、或是其他方式改變輸出內容。

From 967a6b8ff63a36f8e7a084467f69a83ff61c6e6b Mon Sep 17 00:00:00 2001
From: Vincent Lin <bugtender@gmail.com>
Date: Fri, 15 Feb 2019 20:16:52 +0800
Subject: [PATCH 4/5] docs(zh-hant): Keep element and fix reusable in zh-hant

---
 content/docs/components-and-props.md | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index cd49d6401..697b357b3 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -16,9 +16,9 @@ prev: rendering-elements.html
 next: state-and-lifecycle.html
 ---
 
-Component 使你可以將 UI 拆分成獨立且可復用的程式碼，並且專注於各別程式碼的思考。本章節旨在介紹 component 的相關概念，你也可以在此參閱[詳細的 API 文件](/docs/react-component.html)。
+Component 使你可以將 UI 拆分成獨立且可複用的程式碼，並且專注於各別程式碼的思考。本章節旨在介紹 component 的相關概念，你也可以在此參閱[詳細的 API 文件](/docs/react-component.html)。
 
-概念上來說，component 就像是 JavaScript 的 function，它接收任意的參數（稱之為「props」）並且回傳描述畫面的 React 元素。
+概念上來說，component 就像是 JavaScript 的 function，它接收任意的參數（稱之為「props」）並且回傳描述畫面的 React element。
 
 ## Function Component 與 Class Component {#function-and-class-components}
 
@@ -30,7 +30,7 @@ function Welcome(props) {
 }
 ```
 
-此 function 是一個符合規範的 React component，因為它接受一個「props」（指屬性 properties）物件並回傳一個 React 元素。我們稱之為 function component，因為它本身就是一個 JavaScript functions。
+此 function 是一個符合規範的 React component，因為它接受一個「props」（指屬性 properties）物件並回傳一個 React element。我們稱之為 function component，因為它本身就是一個 JavaScript functions。
 
 同樣的，你也可以使用 [ES6 Class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) 來定義 component：
 
@@ -42,25 +42,25 @@ class Welcome extends React.Component {
 }
 ```
 
-上述兩種 component 的在 React 中是同等的。
+上述兩種 component 在 React 中是同等的。
 
 我們將會在[下一個章節]((/docs/state-and-lifecycle.html))探討 class 所擁有的額外特性，但在那之前，我們會使用 function component 來保持簡潔。
 
 ## Render 一個 Component {#rendering-a-component}
 
-在此之前，我們只見過這種相當於 DOM 標籤的 React 元素：
+在此之前，我們只見過這種相當於 DOM 標籤的 React element：
 
 ```js
 const element = <div />;
 ```
 
-不過，React 元素也可以是使用者自定義的 component：
+不過，React element 也可以是使用者自定義的 component：
 
 ```js
 const element = <Welcome name="Sara" />;
 ```
 
-當 React 元素為使用者定義的 component 時，它會將 JSX 所接收的屬性作為一個物件傳遞給 component，這一個物件被稱為「props」。
+當 React element 為使用者定義的 component 時，它會將 JSX 所接收的屬性作為一個物件傳遞給 component，這一個物件被稱為「props」。
 
 舉例來說，這段程式碼會在頁面上 render 出「Hello, Sara」：
 
@@ -80,9 +80,9 @@ ReactDOM.render(
 
 讓我們來複習一下這個例子發生了什麼事：
 
-1. 我們對 `<Welcome name="Sara" />` 這個元素呼叫了 `ReactDOM.render()`。
+1. 我們對 `<Welcome name="Sara" />` 這個 element 呼叫了 `ReactDOM.render()`。
 2. React 以 `{name: 'Sara'}` 作為 props 傳入 `Welcome` component 並呼叫。
-3. `Welcome` component 回傳了 `<h1>Hello, Sara</h1>` 元素作為返回值。
+3. `Welcome` component 回傳了 `<h1>Hello, Sara</h1>` 這個 element 作為返回值。
 4. React DOM 有效的將 DOM 更新為 `<h1>Hello, Sara</h1>`。
 
 >**注意：** Component 的字首須為大寫字母
@@ -156,7 +156,7 @@ function Comment(props) {
 
 它接受 `author` (一個物件)、`text` (一個字串)、還有 `date` (一個日期) 作為它的 props。它的作用是在一個社交網站上 render 一則評論。
 
-這個 component 可能因為太多的巢狀關係而難以更動，而且也難以復用獨立的部分。讓我們把一些 component 從中分離吧。
+這個 component 可能因為太多的巢狀關係而難以更動，而且也難以複用獨立的部分。讓我們把一些 component 從中分離吧。
 
 首先, 我們將 `Avatar` 分離出來：
 
@@ -171,7 +171,7 @@ function Avatar(props) {
 }
 ```
 
-這個 `Avatar` 並不需知道他會被 render 在 `Comment` 中。這是為什麼我們給他一個更為一般的名字：`user` 而不是 `author`。
+這個 `Avatar` 並不需知道它會被 render 在 `Comment` 中。這是為什麼我們給他一個更為一般的名字：`user` 而不是 `author`。
 
 我們建議從 component 的角度為 props 命名，而不是它的使用情境。
 
@@ -233,7 +233,7 @@ function Comment(props) {
 
 [在 CodePen 上試試看吧！](codepen://components-and-props/extracting-components-continued)
 
-在一開始，將 component 抽離出來可能是一件繁重的工作，但是在較大的應用程式中，建構可復用的 component 是非常值得。以經驗來說，如果一個 UI 中有一部分會被重複使用很多次（`Button`、`Panel`、`Avatar`），或者它足夠複雜到自成一個 component（`App`、`FeedStory`、`Comment`），那它就適合被抽出作為一個可復用的 component。
+在一開始，將 component 抽離出來可能是一件繁重的工作，但是在較大的應用程式中，建構可複用的 component 是非常值得。以經驗來說，如果一個 UI 中有一部分會被重複使用很多次（`Button`、`Panel`、`Avatar`），或者它足夠複雜到自成一個 component（`App`、`FeedStory`、`Comment`），那它就適合被抽出作為一個可複用的 component。
 
 ## Props 是唯讀的 {#props-are-read-only}
 

From b2c6dfb0c7f7e76bd9843bc51ffb1c8d78c91998 Mon Sep 17 00:00:00 2001
From: Chloe Lin <chloewjlin@gmail.com>
Date: Mon, 18 Feb 2019 20:16:56 +0800
Subject: [PATCH 5/5] Update content/docs/components-and-props.md

Co-Authored-By: bugtender <bugtender@users.noreply.github.com>
---
 content/docs/components-and-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 697b357b3..498656f76 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -30,7 +30,7 @@ function Welcome(props) {
 }
 ```
 
-此 function 是一個符合規範的 React component，因為它接受一個「props」（指屬性 properties）物件並回傳一個 React element。我們稱之為 function component，因為它本身就是一個 JavaScript functions。
+此 function 是一個符合規範的 React component，因為它接受一個「props」（指屬性 properties）物件並回傳一個 React element。我們稱之為 function component，因為它本身就是一個 JavaScript function。
 
 同樣的，你也可以使用 [ES6 Class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) 來定義 component：