docs: translate glossary

Author: ivan-ha

content/docs/nav.yml

@@ -103,7 +103,7 @@
     - id: javascript-environment-requirements
       title: JS Environment Requirements
     - id: glossary
-      title: Glossary
+      title: 術語表
 - title: Hooks (New)
   isOrdered: true
   items:

content/docs/reference-glossary.md

@@ -1,43 +1,43 @@
 ---
 id: glossary
-title: Glossary of React Terms
+title: React 術語表
 layout: docs
 category: Reference
 permalink: docs/glossary.html
 
 ---
 
-## Single-page Application {#single-page-application}
+## 單頁應用程式 {#single-page-application}
 
-A single-page application is an application that loads a single HTML page and all the necessary assets (such as JavaScript and CSS) required for the application to run. Any interactions with the page or subsequent pages do not require a round trip to the server which means the page is not reloaded.
+單頁應用程式會載入一個 HTML 頁面和其他所需要的資源（例如 JavaScript 和 CSS），之後在頁面或後續頁面上的互動都不需要往返伺服器，這表示該頁面不會被重新載入。
 
-Though you may build a single-page application in React, it is not a requirement. React can also be used for enhancing small parts of existing websites with additional interactivity. Code written in React can coexist peacefully with markup rendered on the server by something like PHP, or with other client-side libraries. In fact, this is exactly how React is being used at Facebook.
+縱使你可以用 React 來建立單頁應用程式，但這不是必需的。React 也可以被用在現有網站的一小部分以增強交互性。用 React 編寫的代碼可以與伺服器 render (例如 PHP) 的 markup 或其他客戶端 library 完美兼容。事實上，React 在 Facebook 中也是這樣使用的。
 
-## ES6, ES2015, ES2016, etc {#es6-es2015-es2016-etc}
+## ES6，ES2015，ES2016，等 {#es6-es2015-es2016-etc}
 
-These acronyms all refer to the most recent versions of the ECMAScript Language Specification standard, which the JavaScript language is an implementation of. The ES6 version (also known as ES2015) includes many additions to the previous versions such as: arrow functions, classes, template literals, `let` and `const` statements. You can learn more about specific versions [here](https://en.wikipedia.org/wiki/ECMAScript#Versions).
+這些縮略詞都是指最新版本的 ECMAScript 語言規範標準，而 JavaScript 語言就是它們的一個實現。ES6 版本（也被稱為 ES2015）包含了許多新特性，例如：arrow function，class，樣板字面值，`let` 與 `const` 變數聲明。你可以在[這裏](https://en.wikipedia.org/wiki/ECMAScript#Versions)了解更多版本的新特性。
 
-## Compilers {#compilers}
+## 編譯器 {#compilers}
 
-A JavaScript compiler takes JavaScript code, transforms it and returns JavaScript code in a different format. The most common use case is to take ES6 syntax and transform it into syntax that older browsers are capable of interpreting. [Babel](https://babeljs.io/) is the compiler most commonly used with React.
+JavaScript 編譯器接受 JavaScript 代碼，對其進行轉換並返回不同的格式的 JavaScript 代碼。最常見的使用例子是把 ES6 語法轉換為一些舊瀏覽器能夠辨識的語法。[Babel](https://babeljs.io/) 是 React 上最常用的編譯器。
 
-## Bundlers {#bundlers}
+## 打包工具 {#bundlers}
 
-Bundlers take JavaScript and CSS code written as separate modules (often hundreds of them), and combine them together into a few files better optimized for the browsers. Some bundlers commonly used in React applications include [Webpack](https://webpack.js.org/) and [Browserify](http://browserify.org/).
+打包工具將多個獨立的 JavaScript 及 CSS 模組（通常有數百個）組合成數個文件，針對瀏覽器作出優化。在 React 應用程式常用的打包工具包括 [Webpack](https://webpack.js.org/) 和 [Browserify](http://browserify.org/)。
 
-## Package Managers {#package-managers}
+## 套件管理工具 {#package-managers}
 
-Package managers are tools that allow you to manage dependencies in your project. [npm](https://www.npmjs.com/) and [Yarn](https://yarnpkg.com/) are two package managers commonly used in React applications. Both of them are clients for the same npm package registry.
+套件管理工具是用來管理項目的 dependency。[npm](https://www.npmjs.com/) 和 [Yarn](https://yarnpkg.com/) 都是在 React 上常用的套件管理工具。它們都是使用相同 npm 套件注冊表的客戶端。
 
 ## CDN {#cdn}
 
-CDN stands for Content Delivery Network. CDNs deliver cached, static content from a network of servers across the globe. 
+CDN 即是 內容傳遞網路。CDN 從全球各地的伺服器提供靜態內容的緩存。
 
 ## JSX {#jsx}
 
-JSX is a syntax extension to JavaScript. It is similar to a template language, but it has full power of JavaScript. JSX gets compiled to `React.createElement()` calls which return plain JavaScript objects called "React elements". To get a basic introduction to JSX [see the docs here](/docs/introducing-jsx.html) and find a more in-depth tutorial on JSX [here](/docs/jsx-in-depth.html).
+JSX 是一種 JavaScript 語法的擴展。它跟模板語言類似，但具有 JavaScript 的全部功能。JSX 會被編譯為 `React.createElement()`，然後返回被稱為 React element 的 JavaScript object。JSX 的基本簡介可以參見[這裏](/docs/introducing-jsx.html)，更深入的教程可以參見[這裏](/docs/jsx-in-depth.html)。
 
-React DOM uses camelCase property naming convention instead of HTML attribute names. For example, `tabindex` becomes `tabIndex` in JSX. The attribute `class` is also written as `className` since `class` is a reserved word in JavaScript:
+React DOM 使用 camelCase 來命名 HTML 屬性名稱。例如，`tabindex` 在 JSX 中寫作 `tabIndex`。而 `class` 因為是 JavaScript 中的保留字，所以寫作 `className`：
 
 ```js
 const name = 'Clementine';
@@ -49,25 +49,25 @@ ReactDOM.render(
 
 ## [Elements](/docs/rendering-elements.html) {#elements}
 
-React elements are the building blocks of React applications. One might confuse elements with a more widely known concept of "components". An element describes what you want to see on the screen. React elements are immutable.
+React element 是 React 應用程式的建構模塊。有人可能會將 element 跟更廣為人知的 component 概念混淆。element 描述你在屏幕上看到甚麼。React element 是不可變的。
 
 ```js
 const element = <h1>Hello, world</h1>;
 ```
 
-Typically, elements are not used directly, but get returned from components.
+通常 element 不會被直接使用，而是在 component 中被返回。
 
 ## [Components](/docs/components-and-props.html) {#components}
 
-React components are small, reusable pieces of code that return a React element to be rendered to the page. The simplest version of React component is a plain JavaScript function that returns a React element:
+React component 是一段小，可重複使用的代碼，用來返回一個被 render 在頁面的 React element。最簡單的 React component 是一個普通的 JavaScript function，返回一個 React element。
 
 ```js
 function Welcome(props) {
   return <h1>Hello, {props.name}</h1>;
 }
 ```
 
-Components can also be ES6 classes:
+Component 也可以是 ES6 class：
 
 ```js
 class Welcome extends React.Component {
@@ -77,38 +77,38 @@ class Welcome extends React.Component {
 }
 ```
 
-Components can be broken down into distinct pieces of functionality and used within other components. Components can return other components, arrays, strings and numbers. 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. Component names should also always start with a capital letter (`<Wrapper/>` **not** `<wrapper/>`). See [this documentation](/docs/components-and-props.html#rendering-a-component) for more information on rendering components. 
+Component 可以分解為不同的功能部件，並在其他 component 中使用。Component 可以返回其他 component，array，string 和 number。一個很好的經驗法則是，如果你的 UI 中有一部份被重複使用多次（Button，Panel，Avatar），或自身就足夠複雜（App，FeedStory，Comment），這些都是成為可重複使用 component 的好選擇。Component 的名字必需以大寫字母開始（`<Wrapper/>` **而不是** `<wrapper/>`）。參見[這裏](/docs/components-and-props.html#rendering-a-component)來了解更多 render component 的資料。
 
 ### [`props`](/docs/components-and-props.html) {#props}
 
-`props` are inputs to a React component. They are data passed down from a parent component to a child component.
+`props` 是 React component 的輸入。它們是從父 component 傳遞到子 component 的數據。
 
-Remember that `props` are readonly. They should not be modified in any way:
+請記著 `props` 是只讀的。不應該以任何方式來修改它們。
 
 ```js
-// Wrong!
+// 錯誤!
 props.number = 42;
 ```
 
-If you need to modify some value in response to user input or a network response, use `state` instead.
+如果你需要修改某些數值來反映用戶輸入或網絡響應，請使用 `state` 來代替。
 
 ### `props.children` {#propschildren}
 
-`props.children` is available on every component. It contains the content between the opening and closing tags of a component. For example:
+`props.children` 在每個 component 上都可用。它包含 component 開始至完結標記之間的內容。例如：
 
 ```js
 <Welcome>Hello world!</Welcome>
 ```
 
-The string `Hello world!` is available in `props.children` in the `Welcome` component:
+字串 `Hello world!` 在 `Welcome` component 可以在 `props.children` 中獲取。
 
 ```js
 function Welcome(props) {
   return <p>{props.children}</p>;
 }
 ```
 
-For components defined as classes, use `this.props.children`:
+以 class 定義的 component，使用 `this.props.children`：
 
 ```js
 class Welcome extends React.Component {
@@ -120,47 +120,47 @@ class Welcome extends React.Component {
 
 ### [`state`](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) {#state}
 
-A component needs `state` when some data associated with it changes over time. For example, a `Checkbox` component might need `isChecked` in its state, and a `NewsFeed` component might want to keep track of `fetchedPosts` in its state.
+當一個 component 與其相關的數據會隨時間而改變，就需要 `state`。例如，一個 `Checkbox` component 可能需要 `isChecked` 的 state，而 `NewFeed` component 可能希望追蹤 `fetchedPosts` 在它的 state 中。
 
-The most important difference between `state` and `props` is that `props` are passed from a parent component, but `state` is managed by the component itself. A component cannot change its `props`, but it can change its `state`. To do so, it must call `this.setState()`. Only components defined as classes can have state.
+`state` 和 `props` 最主要的區別是 `props` 是由父 component 傳遞，而 `state` 是由 component 本身管理的。一個 component 不能改變自己的 `props`，但就可以改變自己的 `state`。要改變 state，必需使用 `this.setState()`。只有用 class 定義的 component 才有 state。
 
-For each particular piece of changing data, there should be just one component that "owns" it in its state. Don't try to synchronize states of two different components. Instead, [lift it up](/docs/lifting-state-up.html) to their closest shared ancestor, and pass it down as props to both of them.
+對於每個特定變化的數據，應該只有一個 component「擁有」它在 state 中。不要試圖同步兩個不同 component 的 state。反而，把 [state 提升](/docs/lifting-state-up.html)至最接近它們的共同 ancestor，並把它以 props 的形式傳遞至它們兩個。
 
-## [Lifecycle Methods](/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class) {#lifecycle-methods}
+## [生命週期方法](/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class) {#lifecycle-methods}
 
-Lifecycle methods are custom functionality that gets executed during the different phases of a component. There are methods available when the component gets created and inserted into the DOM ([mounting](/docs/react-component.html#mounting)), when the component updates, and when the component gets unmounted or removed from the DOM.
+生命週期方法是用來在 component 不同階段來執行自訂功能。以下的事件都有生命週期方法：當 component 被建立和加入在 DOM 裏（[mounting](/docs/react-component.html#mounting)），當 component 更新，以及從 DOM 中 unmount 或移除時。
 
- ## [Controlled](/docs/forms.html#controlled-components) vs. [Uncontrolled Components](/docs/uncontrolled-components.html)
+ ## [Controlled](/docs/forms.html#controlled-components) 與 [Uncontrolled Components](/docs/uncontrolled-components.html)
 
-React has two different approaches to dealing with form inputs. 
+React 有兩個不同的方案處理表格輸入。
 
-An input form element whose value is controlled by React is called a *controlled component*. When a user enters data into a controlled component a change event handler is triggered and your code decides whether the input is valid (by re-rendering with the updated value). If you do not re-render then the form element will remain unchanged.
+表格輸入 element 的值是由 React 來控制，就被稱為 *controlled component*。當用戶輸入數據到 controlled component，就會觸發一個 event handler，並且用你的代碼決定輸入是否有效（通過重新 render 更新後的數值）。如果你不重新 render，表格 element 將保持不變。
 
-An *uncontrolled component* works like form elements do outside of React. When a user inputs data into a form field (an input box, dropdown, etc) the updated information is reflected without React needing to do anything. However, this also means that you can't force the field to have a certain value.
+一個 *uncontrolled component* 就像表格 element 一樣在 React 以外工作。當用戶輸入數據到一個表格列（input box，dropdown 等）時，不需要 React 處理任何東西，更新的數據就會被反映出來。但同時這意味著你不能強迫表格列有特定的數值。
 
-In most cases you should use controlled components.
+在大多數的情況下你應用使用 controlled components。
 
 ## [Keys](/docs/lists-and-keys.html) {#keys}
 
-A "key" is a special string attribute you need to include when creating arrays of elements. Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside an array to give the elements a stable identity.
+「key」是一個特別的 string attribute ，你需要在建立 element array 時加上。Key 幫助 React 分辨那個 element 被更改，添加，或已移除。Key 應該放在 array element 的內部，使 element 有一個穩定的標記。
 
-Keys only need to be unique among sibling elements in the same array. They don't need to be unique across the whole application or even a single component.
+Key 只需要在同一個 array 的 sibling element 中是唯一的。它們不需要在整個應用程式或個別 component 中是唯一。
 
-Don't pass something like `Math.random()` to keys. It is important that keys have a "stable identity" across re-renders so that React can determine when items are added, removed, or re-ordered. Ideally, keys should correspond to unique and stable identifiers coming from your data, such as `post.id`.
+不要將類似 `Math.random()` 的值賦予給 key。Key 有一個誇重新 render 都「隱定的標記」是很重要的，這樣 React 才可以確定項目何時被添加，移除，或重新排序。在理想情況下，key 應該對應來自至於數據唯一而穩定的標記，例如 `post.id`。
 
 ## [Refs](/docs/refs-and-the-dom.html) {#refs}
 
-React supports a special attribute that you can attach to any component. The `ref` attribute can be an object created by [`React.createRef()` function](/docs/react-api.html#reactcreateref) or a callback function, or a string (in legacy API). When the `ref` attribute is a callback function, the function receives the underlying DOM element or class instance (depending on the type of element) as its argument. This allows you to have direct access to the DOM element or component instance.
+React 支持一個可以附加到任何 component 的特殊 attribute。Ref attribute 可以是由 [`React.createRef()` function](/docs/react-api.html#reactcreateref) 返回的 object，或一個 callback function，或一個 string (在舊有 API 中)。當 `ref` attribute 是 callback function 時，該 function 接受底層的 DOM element 或 class instance（視乎 element 的類別）作為參數。這使你可以直接訪問 DOM element 或 component instance。
 
-Use refs sparingly. If you find yourself often using refs to "make things happen" in your app, consider getting more familiar with [top-down data flow](/docs/lifting-state-up.html).
+不要過度使用 ref。假若你發現你在應用程式中經常使用 ref 來「實現某些事情」，請考慮對 [由上而下的數據流](/docs/lifting-state-up.html) 更熟悉。
 
 ## [Events](/docs/handling-events.html) {#events}
 
-Handling events with React elements has some syntactic differences:
+在 React element 中處理 event 有一些語法上的不同：
 
-* React event handlers are named using camelCase, rather than lowercase.
-* With JSX you pass a function as the event handler, rather than a string.
+* React 的 event handler 以 camelCase 來名命，而不是小寫。
+* 在 JSX 你需要傳入一個 function 到 event handler，而不是一個 string。
 
 ## [Reconciliation](/docs/reconciliation.html) {#reconciliation}
 
-When a component's props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called "reconciliation".
+當一個 component 的 props 或 stats 改變時，React 通過比較新返回的 element 和之前 render 的來決定是否需要實際的 DOM 更新。當它們不相等時，React 將更新 DOM。這個過程被稱為「reconciliation」。