From 3807d673d3fff7b5a20d9348611bcf70fe483a3e Mon Sep 17 00:00:00 2001
From: Zero Cho <itszero@gmail.com>
Date: Sun, 10 Feb 2019 14:46:52 -0800
Subject: [PATCH 1/8] [homepage] initial translation

---
 .../a-component-using-external-plugins.js     |  8 ++++----
 .../a-component-using-external-plugins.md     |  4 ++--
 content/home/examples/a-simple-component.js   |  4 ++--
 content/home/examples/a-simple-component.md   |  6 +++---
 content/home/examples/a-stateful-component.js |  2 +-
 content/home/examples/a-stateful-component.md |  4 ++--
 content/home/examples/an-application.js       |  6 +++---
 content/home/examples/an-application.md       |  4 ++--
 content/home/marketing/component-based.md     |  6 +++---
 content/home/marketing/declarative.md         |  6 +++---
 .../marketing/learn-once-write-anywhere.md    |  6 +++---
 src/components/LayoutFooter/Footer.js         | 20 +++++++++----------
 src/components/LayoutHeader/DocSearch.js      |  4 ++--
 src/components/LayoutHeader/Header.js         |  6 +++---
 src/pages/index.js                            | 12 +++++------
 15 files changed, 49 insertions(+), 49 deletions(-)

diff --git a/content/home/examples/a-component-using-external-plugins.js b/content/home/examples/a-component-using-external-plugins.js
index 09868cfbb..cc19b1529 100644
--- a/content/home/examples/a-component-using-external-plugins.js
+++ b/content/home/examples/a-component-using-external-plugins.js
@@ -2,7 +2,7 @@ class MarkdownEditor extends React.Component {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
-    this.state = { value: 'Hello, **world**!' };
+    this.state = { value: '吃飽沒, **小明**？' };
   }
 
   handleChange(e) {
@@ -17,16 +17,16 @@ class MarkdownEditor extends React.Component {
   render() {
     return (
       <div className="MarkdownEditor">
-        <h3>Input</h3>
+        <h3>輸入</h3>
         <label htmlFor="markdown-content">
-          Enter some markdown
+          輸入一些 Markdown 內容
         </label>
         <textarea
           id="markdown-content"
           onChange={this.handleChange}
           defaultValue={this.state.value}
         />
-        <h3>Output</h3>
+        <h3>輸出</h3>
         <div
           className="content"
           dangerouslySetInnerHTML={this.getRawMarkup()}
diff --git a/content/home/examples/a-component-using-external-plugins.md b/content/home/examples/a-component-using-external-plugins.md
index a8c35bbd6..71468ea3b 100644
--- a/content/home/examples/a-component-using-external-plugins.md
+++ b/content/home/examples/a-component-using-external-plugins.md
@@ -1,7 +1,7 @@
 ---
-title: A Component Using External Plugins
+title: 使用外部程式的元件
 order: 3
 domid: markdown-example
 ---
 
-React is flexible and provides hooks that allow you to interface with other libraries and frameworks. This example uses **remarkable**, an external Markdown library, to convert the `<textarea>`'s value in real time.
+React 提供了 hooks 讓你可以靈活的運用其他的函式庫和框架。這個範例使用了 **remarkable**，一個外部的 Markdown 函式庫來即時處理 `<textarea>` 的內容。
diff --git a/content/home/examples/a-simple-component.js b/content/home/examples/a-simple-component.js
index 90c31b960..03ead74cc 100644
--- a/content/home/examples/a-simple-component.js
+++ b/content/home/examples/a-simple-component.js
@@ -2,13 +2,13 @@ class HelloMessage extends React.Component {
   render() {
     return (
       <div>
-        Hello {this.props.name}
+        吃飽沒, {this.props.name}？
       </div>
     );
   }
 }
 
 ReactDOM.render(
-  <HelloMessage name="Taylor" />,
+  <HelloMessage name="小明" />,
   document.getElementById('hello-example')
 );
\ No newline at end of file
diff --git a/content/home/examples/a-simple-component.md b/content/home/examples/a-simple-component.md
index d791856d4..87ef5f413 100644
--- a/content/home/examples/a-simple-component.md
+++ b/content/home/examples/a-simple-component.md
@@ -1,9 +1,9 @@
 ---
-title: A Simple Component
+title: 簡單的元件
 order: 0
 domid: hello-example
 ---
 
-React components implement a `render()` method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by `render()` via `this.props`.
+React 元件需要實做 `render()` 函式，這個函式接受輸入的資料並回傳需要顯示的內容。這個範例使用了 JSX，一個類似 XML 的語法。傳入給元件的輸入資料可以透過 `this.props` 在 `render()` 函式中存取。
 
-**JSX is optional and not required to use React.** Try the [Babel REPL](babel://es5-syntax-example) to see the raw JavaScript code produced by the JSX compilation step.
+**使用 React 並不一定要使用 JSX。** 試試看 [Babel REPL](babel://es5-syntax-example) 來了解由 JSX 編譯步驟產生的原始 JavaScript 程式碼。
diff --git a/content/home/examples/a-stateful-component.js b/content/home/examples/a-stateful-component.js
index 25d5a9145..046e390dd 100644
--- a/content/home/examples/a-stateful-component.js
+++ b/content/home/examples/a-stateful-component.js
@@ -21,7 +21,7 @@ class Timer extends React.Component {
   render() {
     return (
       <div>
-        Seconds: {this.state.seconds}
+        {this.state.seconds} 秒
       </div>
     );
   }
diff --git a/content/home/examples/a-stateful-component.md b/content/home/examples/a-stateful-component.md
index a68ab0a51..244f942ec 100644
--- a/content/home/examples/a-stateful-component.md
+++ b/content/home/examples/a-stateful-component.md
@@ -1,7 +1,7 @@
 ---
-title: A Stateful Component
+title: 有狀態的元件
 order: 1
 domid: timer-example
 ---
 
-In addition to taking input data (accessed via `this.props`), a component can maintain internal state data (accessed via `this.state`). When a component's state data changes, the rendered markup will be updated by re-invoking `render()`.
+除了接受輸入資料外（透過 `this.props` 存取），一個元件也可以維護自身的狀態（透過 `this.state` 存取）。當一個元件的狀態資訊改變的時候，產生的標記語法將會透過重新呼叫 `render()` 自動更新。
diff --git a/content/home/examples/an-application.js b/content/home/examples/an-application.js
index 43f777dc2..9ea727778 100644
--- a/content/home/examples/an-application.js
+++ b/content/home/examples/an-application.js
@@ -9,11 +9,11 @@ class TodoApp extends React.Component {
   render() {
     return (
       <div>
-        <h3>TODO</h3>
+        <h3>待辦事項</h3>
         <TodoList items={this.state.items} />
         <form onSubmit={this.handleSubmit}>
           <label htmlFor="new-todo">
-            What needs to be done?
+            有什麼要做的？
           </label>
           <input
             id="new-todo"
@@ -21,7 +21,7 @@ class TodoApp extends React.Component {
             value={this.state.text}
           />
           <button>
-            Add #{this.state.items.length + 1}
+            儲存第 {this.state.items.length + 1} 個事項
           </button>
         </form>
       </div>
diff --git a/content/home/examples/an-application.md b/content/home/examples/an-application.md
index 227d0621b..92286f6aa 100644
--- a/content/home/examples/an-application.md
+++ b/content/home/examples/an-application.md
@@ -1,7 +1,7 @@
 ---
-title: An Application
+title: 一個應用程式
 order: 2
 domid: todos-example
 ---
 
-Using `props` and `state`, we can put together a small Todo application. This example uses `state` to track the current list of items as well as the text that the user has entered. Although event handlers appear to be rendered inline, they will be collected and implemented using event delegation.
+透過靈活運用 `props` 跟 `state`，我們可以寫一個很簡易的待辦事項 App。這個範例使用 `state` 保存目前所有的待辦事項以及使用者目前輸入的文字。雖然這些事件處理函式像是直接寫在程式碼中，實際上 React 內部會自動收集他們並透過 event delegation 實做。
diff --git a/content/home/marketing/component-based.md b/content/home/marketing/component-based.md
index aeb3c4de2..0b4df552d 100644
--- a/content/home/marketing/component-based.md
+++ b/content/home/marketing/component-based.md
@@ -1,8 +1,8 @@
 ---
-title: Component-Based
+title: 元件式開發
 order: 1
 ---
 
-Build encapsulated components that manage their own state, then compose them to make complex UIs.
+首先實做一個自我獨立的元件，然後活用他們建立複雜的使用者界面。
 
-Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
+因為元件的邏輯是用 JavaScript 寫的而不是使用其他樣板語言，你可以輕鬆的在你的程式中傳遞複雜的資料而不需使用 DOM。
\ No newline at end of file
diff --git a/content/home/marketing/declarative.md b/content/home/marketing/declarative.md
index c3b651902..6198da4ff 100644
--- a/content/home/marketing/declarative.md
+++ b/content/home/marketing/declarative.md
@@ -1,8 +1,8 @@
 ---
-title: Declarative
+title: 宣告式
 order: 0
 ---
 
-React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
+React 讓實做互動式的使用者界面變得一點也不痛苦。 你只要在你的應用程式中為每個情境設計一個簡單的 View ，React 就為在資料變更時自動有效率的只更新並重繪有異動的元件。
 
-Declarative views make your code more predictable and easier to debug.
+宣告式的 View 讓你更容易預測你的程式的行為，同時也較為容易除錯。
\ No newline at end of file
diff --git a/content/home/marketing/learn-once-write-anywhere.md b/content/home/marketing/learn-once-write-anywhere.md
index 009edf5bc..f54be8c7a 100644
--- a/content/home/marketing/learn-once-write-anywhere.md
+++ b/content/home/marketing/learn-once-write-anywhere.md
@@ -1,8 +1,8 @@
 ---
-title: Learn Once, Write Anywhere
+title: 學習一次，四處可通
 order: 2
 ---
 
-We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.
+我們並不強制要求你使用特定的架構，所以你可以在 React 中開發新的功能而不需要重寫原有的程式碼。
 
-React can also render on the server using Node and power mobile apps using [React Native](https://facebook.github.io/react-native/).
+React 也可以透過 Node 在伺服器上預先執行，甚至也能透過 [React Native](https://facebook.github.io/react-native/) 使用在手機應用程式中。
diff --git a/src/components/LayoutFooter/Footer.js b/src/components/LayoutFooter/Footer.js
index bca76aac6..08f75fb11 100644
--- a/src/components/LayoutFooter/Footer.js
+++ b/src/components/LayoutFooter/Footer.js
@@ -60,7 +60,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             },
           }}>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
-            <MetaTitle onDark={true}>Docs</MetaTitle>
+            <MetaTitle onDark={true}>文件</MetaTitle>
             {sectionListDocs.map(section => {
               const defaultItem = section.items[0];
               return (
@@ -73,7 +73,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             })}
           </FooterNav>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
-            <MetaTitle onDark={true}>Channels</MetaTitle>
+            <MetaTitle onDark={true}>溝通管道</MetaTitle>
             <ExternalFooterLink
               href="https://github.com/facebook/react"
               target="_blank"
@@ -90,19 +90,19 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
               href="https://discuss.reactjs.org"
               target="_blank"
               rel="noopener">
-              Discussion Forum
+              討論區
             </ExternalFooterLink>
             <ExternalFooterLink
               href="https://discord.gg/0ZcbPKXt5bZjGY5n"
               target="_blank"
               rel="noopener">
-              Reactiflux Chat
+              Reactiflux 聊天室
             </ExternalFooterLink>
             <ExternalFooterLink
               href="https://dev.to/t/react"
               target="_blank"
               rel="noopener">
-              DEV Community
+              DEV 社群
             </ExternalFooterLink>
             <ExternalFooterLink
               href="https://www.facebook.com/react"
@@ -118,7 +118,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             </ExternalFooterLink>
           </FooterNav>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
-            <MetaTitle onDark={true}>Community</MetaTitle>
+            <MetaTitle onDark={true}>社群</MetaTitle>
             {sectionListCommunity.map(section => (
               <FooterLink
                 to={`/community/${section.items[0].id}.html`}
@@ -128,11 +128,11 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             ))}
           </FooterNav>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
-            <MetaTitle onDark={true}>More</MetaTitle>
-            <FooterLink to="/tutorial/tutorial.html">Tutorial</FooterLink>
+            <MetaTitle onDark={true}>其他</MetaTitle>
+            <FooterLink to="/tutorial/tutorial.html">教學</FooterLink>
             <FooterLink to="/blog/">Blog</FooterLink>
             <FooterLink to="/acknowledgements.html">
-              Acknowledgements
+              致謝
             </FooterLink>
             <ExternalFooterLink
               href="https://facebook.github.io/react-native/"
@@ -179,7 +179,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
               color: colors.subtleOnDark,
               paddingTop: 15,
             }}>
-            Copyright © 2018 Facebook Inc.
+            © 2018 Facebook Inc 版權所有
           </p>
         </section>
       </div>
diff --git a/src/components/LayoutHeader/DocSearch.js b/src/components/LayoutHeader/DocSearch.js
index b31505917..149f8d9f1 100644
--- a/src/components/LayoutHeader/DocSearch.js
+++ b/src/components/LayoutHeader/DocSearch.js
@@ -104,8 +104,8 @@ class DocSearch extends Component<{}, State> {
           }}
           id="algolia-doc-search"
           type="search"
-          placeholder="Search docs"
-          aria-label="Search docs"
+          placeholder="文件搜尋"
+          aria-label="文件搜尋"
         />
       </form>
     ) : null;
diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js
index 55743a7c1..2ae708b42 100644
--- a/src/components/LayoutHeader/Header.js
+++ b/src/components/LayoutHeader/Header.js
@@ -115,17 +115,17 @@ const Header = ({location}: {location: Location}) => (
           }}>
           <HeaderLink
             isActive={location.pathname.includes('/docs/')}
-            title="Docs"
+            title="文件"
             to="/docs/getting-started.html"
           />
           <HeaderLink
             isActive={location.pathname.includes('/tutorial/')}
-            title="Tutorial"
+            title="教學"
             to="/tutorial/tutorial.html"
           />
           <HeaderLink
             isActive={location.pathname.includes('/community/')}
-            title="Community"
+            title="社群"
             to="/community/support.html"
           />
           <HeaderLink
diff --git a/src/pages/index.js b/src/pages/index.js
index bc2d732fd..3eb436640 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -51,7 +51,7 @@ class Home extends Component {
     return (
       <Layout location={location}>
         <TitleAndMetaTags
-          title="React &ndash; A JavaScript library for building user interfaces"
+          title="React &ndash; 用來實做使用者界面的 JavaScript 函式庫"
           ogUrl={createOgUrl('index.html')}
         />
         <div css={{width: '100%'}}>
@@ -134,7 +134,7 @@ class Home extends Component {
                         fontSize: 30,
                       },
                     }}>
-                    A JavaScript library for building user interfaces
+                    用來實做使用者界面的 JavaScript 函式庫
                   </p>
                   <Flex
                     valign="center"
@@ -149,12 +149,12 @@ class Home extends Component {
                       <ButtonLink
                         to="/docs/getting-started.html"
                         type="primary">
-                        Get Started
+                        了解更多
                       </ButtonLink>
                     </CtaItem>
                     <CtaItem>
                       <ButtonLink to="/tutorial/tutorial.html" type="secondary">
-                        Take the Tutorial
+                        入門教學
                       </ButtonLink>
                     </CtaItem>
                   </Flex>
@@ -286,12 +286,12 @@ class Home extends Component {
               <Flex valign="center">
                 <CtaItem>
                   <ButtonLink to="/docs/getting-started.html" type="primary">
-                    Get Started
+                    了解更多
                   </ButtonLink>
                 </CtaItem>
                 <CtaItem>
                   <ButtonLink to="/tutorial/tutorial.html" type="secondary">
-                    Take the Tutorial
+                    入門學習
                   </ButtonLink>
                 </CtaItem>
               </Flex>

From 39a58c4855f83c418556c8860764a1526ab99b9b Mon Sep 17 00:00:00 2001
From: Zero Cho <itszero@gmail.com>
Date: Sun, 10 Feb 2019 14:51:38 -0800
Subject: [PATCH 2/8] remove hooks

---
 content/home/examples/a-component-using-external-plugins.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/home/examples/a-component-using-external-plugins.md b/content/home/examples/a-component-using-external-plugins.md
index 71468ea3b..0688874d3 100644
--- a/content/home/examples/a-component-using-external-plugins.md
+++ b/content/home/examples/a-component-using-external-plugins.md
@@ -4,4 +4,4 @@ order: 3
 domid: markdown-example
 ---
 
-React 提供了 hooks 讓你可以靈活的運用其他的函式庫和框架。這個範例使用了 **remarkable**，一個外部的 Markdown 函式庫來即時處理 `<textarea>` 的內容。
+React 元件可以靈活的運用其他的函式庫和框架。這個範例使用了 **remarkable**，一個外部的 Markdown 函式庫來即時處理 `<textarea>` 的內容。

From 75f0df139bd5035895198e1c19a171590e5e4ba4 Mon Sep 17 00:00:00 2001
From: Zero Cho <itszero@gmail.com>
Date: Sun, 10 Feb 2019 14:55:48 -0800
Subject: [PATCH 3/8] update the stateful dom section

---
 content/home/marketing/component-based.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/home/marketing/component-based.md b/content/home/marketing/component-based.md
index 0b4df552d..a9231d7b6 100644
--- a/content/home/marketing/component-based.md
+++ b/content/home/marketing/component-based.md
@@ -5,4 +5,4 @@ order: 1
 
 首先實做一個自我獨立的元件，然後活用他們建立複雜的使用者界面。
 
-因為元件的邏輯是用 JavaScript 寫的而不是使用其他樣板語言，你可以輕鬆的在你的程式中傳遞複雜的資料而不需使用 DOM。
\ No newline at end of file
+因為元件的邏輯是用 JavaScript 寫的而不是使用其他樣板語言，你可以輕鬆的在你的程式中傳遞複雜的資料而不需將其藏在 DOM 之中。
\ No newline at end of file

From c1454e18536ab87eb24046786089b02bc2157f97 Mon Sep 17 00:00:00 2001
From: Zero Cho <itszero@gmail.com>
Date: Mon, 11 Feb 2019 19:55:53 -0800
Subject: [PATCH 4/8] =?UTF-8?q?=E5=AF=A6=E5=81=9A=20->=20=E5=AF=A6?=
 =?UTF-8?q?=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index 3eb436640..24861a638 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -51,7 +51,7 @@ class Home extends Component {
     return (
       <Layout location={location}>
         <TitleAndMetaTags
-          title="React &ndash; 用來實做使用者界面的 JavaScript 函式庫"
+          title="React &ndash; 用來實作使用者界面的 JavaScript 函式庫"
           ogUrl={createOgUrl('index.html')}
         />
         <div css={{width: '100%'}}>
@@ -134,7 +134,7 @@ class Home extends Component {
                         fontSize: 30,
                       },
                     }}>
-                    用來實做使用者界面的 JavaScript 函式庫
+                    用來實作使用者界面的 JavaScript 函式庫
                   </p>
                   <Flex
                     valign="center"

From 1cd855334bcdfe9f105082ceb7db160793f9864a Mon Sep 17 00:00:00 2001
From: Zero Cho <itszero@gmail.com>
Date: Thu, 14 Feb 2019 21:08:46 -0800
Subject: [PATCH 5/8] update translation according to the glossary

---
 content/home/examples/a-component-using-external-plugins.md | 4 ++--
 content/home/examples/a-simple-component.md                 | 4 ++--
 content/home/examples/a-stateful-component.md               | 4 ++--
 content/home/examples/an-application.md                     | 2 +-
 content/home/marketing/component-based.md                   | 4 ++--
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/content/home/examples/a-component-using-external-plugins.md b/content/home/examples/a-component-using-external-plugins.md
index 0688874d3..2b63de9ae 100644
--- a/content/home/examples/a-component-using-external-plugins.md
+++ b/content/home/examples/a-component-using-external-plugins.md
@@ -1,7 +1,7 @@
 ---
-title: 使用外部程式的元件
+title: 使用外部程式的 Component
 order: 3
 domid: markdown-example
 ---
 
-React 元件可以靈活的運用其他的函式庫和框架。這個範例使用了 **remarkable**，一個外部的 Markdown 函式庫來即時處理 `<textarea>` 的內容。
+React component 可以靈活的運用其他的函式庫和框架。這個範例使用了 **remarkable**，一個外部的 Markdown 函式庫來即時處理 `<textarea>` 的內容。
diff --git a/content/home/examples/a-simple-component.md b/content/home/examples/a-simple-component.md
index 87ef5f413..9a0ba4bf7 100644
--- a/content/home/examples/a-simple-component.md
+++ b/content/home/examples/a-simple-component.md
@@ -1,9 +1,9 @@
 ---
-title: 簡單的元件
+title: 簡單的 Component
 order: 0
 domid: hello-example
 ---
 
-React 元件需要實做 `render()` 函式，這個函式接受輸入的資料並回傳需要顯示的內容。這個範例使用了 JSX，一個類似 XML 的語法。傳入給元件的輸入資料可以透過 `this.props` 在 `render()` 函式中存取。
+React component 需要實做 `render()` function，這個函式接受輸入的資料並回傳需要顯示的內容。這個範例使用了 JSX，一個類似 XML 的語法。傳入給元件的輸入資料可以透過 `this.props` 在 `render()` function 中存取。
 
 **使用 React 並不一定要使用 JSX。** 試試看 [Babel REPL](babel://es5-syntax-example) 來了解由 JSX 編譯步驟產生的原始 JavaScript 程式碼。
diff --git a/content/home/examples/a-stateful-component.md b/content/home/examples/a-stateful-component.md
index 244f942ec..3fc48ae83 100644
--- a/content/home/examples/a-stateful-component.md
+++ b/content/home/examples/a-stateful-component.md
@@ -1,7 +1,7 @@
 ---
-title: 有狀態的元件
+title: Stateful Component
 order: 1
 domid: timer-example
 ---
 
-除了接受輸入資料外（透過 `this.props` 存取），一個元件也可以維護自身的狀態（透過 `this.state` 存取）。當一個元件的狀態資訊改變的時候，產生的標記語法將會透過重新呼叫 `render()` 自動更新。
+除了接受輸入資料外（透過 `this.props` 存取），一個 Component 也可以保存自身的 state（透過 `this.state` 存取）。當一個 component 的 state 改變的時候，產生的標記語法將會透過自動重新呼叫 `render()` 更新。
diff --git a/content/home/examples/an-application.md b/content/home/examples/an-application.md
index 92286f6aa..529bf5a9d 100644
--- a/content/home/examples/an-application.md
+++ b/content/home/examples/an-application.md
@@ -4,4 +4,4 @@ order: 2
 domid: todos-example
 ---
 
-透過靈活運用 `props` 跟 `state`，我們可以寫一個很簡易的待辦事項 App。這個範例使用 `state` 保存目前所有的待辦事項以及使用者目前輸入的文字。雖然這些事件處理函式像是直接寫在程式碼中，實際上 React 內部會自動收集他們並透過 event delegation 實做。
+透過靈活運用 `props` 跟 `state`，我們可以寫一個很簡易的待辦事項 App。這個範例使用 `state` 保存目前所有的待辦事項以及使用者目前輸入的文字。雖然這些 event handler 像是直接寫在程式碼中，實際上 React 內部會自動收集他們並透過 event delegation 實做。
diff --git a/content/home/marketing/component-based.md b/content/home/marketing/component-based.md
index a9231d7b6..2fba3558a 100644
--- a/content/home/marketing/component-based.md
+++ b/content/home/marketing/component-based.md
@@ -3,6 +3,6 @@ title: 元件式開發
 order: 1
 ---
 
-首先實做一個自我獨立的元件，然後活用他們建立複雜的使用者界面。
+首先實做一個自我獨立的 component，然後活用他們建立複雜的使用者界面。
 
-因為元件的邏輯是用 JavaScript 寫的而不是使用其他樣板語言，你可以輕鬆的在你的程式中傳遞複雜的資料而不需將其藏在 DOM 之中。
\ No newline at end of file
+因為 component 的邏輯是用 JavaScript 寫的而不是使用其他樣板語言，你可以輕鬆的在你的程式中傳遞複雜的資料而不需將其藏在 DOM 之中。
\ No newline at end of file

From 2bee91e75eaf50de369aaafde8e033b4604a1fc7 Mon Sep 17 00:00:00 2001
From: Peng Jie <dean.leehom@gmail.com>
Date: Wed, 20 Feb 2019 00:06:08 -0800
Subject: [PATCH 6/8] Apply suggestions from code review

Co-Authored-By: itszero <github@itsze.ro>
---
 content/home/examples/a-simple-component.md | 2 +-
 content/home/examples/an-application.md     | 2 +-
 content/home/marketing/component-based.md   | 4 ++--
 content/home/marketing/declarative.md       | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/content/home/examples/a-simple-component.md b/content/home/examples/a-simple-component.md
index 9a0ba4bf7..b68a206b3 100644
--- a/content/home/examples/a-simple-component.md
+++ b/content/home/examples/a-simple-component.md
@@ -4,6 +4,6 @@ order: 0
 domid: hello-example
 ---
 
-React component 需要實做 `render()` function，這個函式接受輸入的資料並回傳需要顯示的內容。這個範例使用了 JSX，一個類似 XML 的語法。傳入給元件的輸入資料可以透過 `this.props` 在 `render()` function 中存取。
+React component 需要實做 `render()` function，這個 function 接受輸入的資料並回傳需要顯示的內容。這個範例使用了 JSX，一個類似 XML 的語法。傳入給元件的輸入資料可以透過 `this.props` 在 `render()` function 中存取。
 
 **使用 React 並不一定要使用 JSX。** 試試看 [Babel REPL](babel://es5-syntax-example) 來了解由 JSX 編譯步驟產生的原始 JavaScript 程式碼。
diff --git a/content/home/examples/an-application.md b/content/home/examples/an-application.md
index 529bf5a9d..6c1a57c08 100644
--- a/content/home/examples/an-application.md
+++ b/content/home/examples/an-application.md
@@ -4,4 +4,4 @@ order: 2
 domid: todos-example
 ---
 
-透過靈活運用 `props` 跟 `state`，我們可以寫一個很簡易的待辦事項 App。這個範例使用 `state` 保存目前所有的待辦事項以及使用者目前輸入的文字。雖然這些 event handler 像是直接寫在程式碼中，實際上 React 內部會自動收集他們並透過 event delegation 實做。
+透過靈活運用 `props` 跟 `state`，我們可以寫一個很簡易的待辦事項的應用程式。這個範例使用 `state` 保存目前所有的待辦事項以及使用者目前輸入的文字。雖然這些 event handler 像是直接寫在程式碼中，實際上 React 內部會自動收集他們並透過 event delegation 實做。
diff --git a/content/home/marketing/component-based.md b/content/home/marketing/component-based.md
index 2fba3558a..0cbc53e8e 100644
--- a/content/home/marketing/component-based.md
+++ b/content/home/marketing/component-based.md
@@ -3,6 +3,6 @@ title: 元件式開發
 order: 1
 ---
 
-首先實做一個自我獨立的 component，然後活用他們建立複雜的使用者界面。
+首先實作一個擁有 state 的獨立 component，然後組合他們建立複雜的使用者介面。
 
-因為 component 的邏輯是用 JavaScript 寫的而不是使用其他樣板語言，你可以輕鬆的在你的程式中傳遞複雜的資料而不需將其藏在 DOM 之中。
\ No newline at end of file
+因為 component 的邏輯是用 JavaScript 寫的而不是使用其他樣板語言，你可以輕鬆的在你的程式中傳遞複雜的資料而不需將其藏在 DOM 之中。
diff --git a/content/home/marketing/declarative.md b/content/home/marketing/declarative.md
index 6198da4ff..7007698a0 100644
--- a/content/home/marketing/declarative.md
+++ b/content/home/marketing/declarative.md
@@ -3,6 +3,6 @@ title: 宣告式
 order: 0
 ---
 
-React 讓實做互動式的使用者界面變得一點也不痛苦。 你只要在你的應用程式中為每個情境設計一個簡單的 View ，React 就為在資料變更時自動有效率的只更新並重繪有異動的元件。
+React 讓實作互動式的使用者界面變得一點也不痛苦。你只要在你的應用程式中為每個情境設計一個簡單的 view，React 就會在資料變更時有效率的自動更新並 render 有異動的元件。
 
-宣告式的 View 讓你更容易預測你的程式的行為，同時也較為容易除錯。
\ No newline at end of file
+宣告式的 View 讓你更容易預測你的程式的行為，同時也較為容易除錯。

From b733c6b509dbf2262a06c7ab42d628876dc986ac Mon Sep 17 00:00:00 2001
From: Zero Cho <itszero@gmail.com>
Date: Wed, 20 Feb 2019 00:05:13 -0800
Subject: [PATCH 7/8] revert code examples localization

---
 .../home/examples/a-component-using-external-plugins.js   | 8 ++++----
 content/home/examples/a-simple-component.js               | 4 ++--
 content/home/examples/a-stateful-component.js             | 2 +-
 content/home/examples/an-application.js                   | 6 +++---
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/content/home/examples/a-component-using-external-plugins.js b/content/home/examples/a-component-using-external-plugins.js
index cc19b1529..09868cfbb 100644
--- a/content/home/examples/a-component-using-external-plugins.js
+++ b/content/home/examples/a-component-using-external-plugins.js
@@ -2,7 +2,7 @@ class MarkdownEditor extends React.Component {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
-    this.state = { value: '吃飽沒, **小明**？' };
+    this.state = { value: 'Hello, **world**!' };
   }
 
   handleChange(e) {
@@ -17,16 +17,16 @@ class MarkdownEditor extends React.Component {
   render() {
     return (
       <div className="MarkdownEditor">
-        <h3>輸入</h3>
+        <h3>Input</h3>
         <label htmlFor="markdown-content">
-          輸入一些 Markdown 內容
+          Enter some markdown
         </label>
         <textarea
           id="markdown-content"
           onChange={this.handleChange}
           defaultValue={this.state.value}
         />
-        <h3>輸出</h3>
+        <h3>Output</h3>
         <div
           className="content"
           dangerouslySetInnerHTML={this.getRawMarkup()}
diff --git a/content/home/examples/a-simple-component.js b/content/home/examples/a-simple-component.js
index 03ead74cc..90c31b960 100644
--- a/content/home/examples/a-simple-component.js
+++ b/content/home/examples/a-simple-component.js
@@ -2,13 +2,13 @@ class HelloMessage extends React.Component {
   render() {
     return (
       <div>
-        吃飽沒, {this.props.name}？
+        Hello {this.props.name}
       </div>
     );
   }
 }
 
 ReactDOM.render(
-  <HelloMessage name="小明" />,
+  <HelloMessage name="Taylor" />,
   document.getElementById('hello-example')
 );
\ No newline at end of file
diff --git a/content/home/examples/a-stateful-component.js b/content/home/examples/a-stateful-component.js
index 046e390dd..25d5a9145 100644
--- a/content/home/examples/a-stateful-component.js
+++ b/content/home/examples/a-stateful-component.js
@@ -21,7 +21,7 @@ class Timer extends React.Component {
   render() {
     return (
       <div>
-        {this.state.seconds} 秒
+        Seconds: {this.state.seconds}
       </div>
     );
   }
diff --git a/content/home/examples/an-application.js b/content/home/examples/an-application.js
index 9ea727778..43f777dc2 100644
--- a/content/home/examples/an-application.js
+++ b/content/home/examples/an-application.js
@@ -9,11 +9,11 @@ class TodoApp extends React.Component {
   render() {
     return (
       <div>
-        <h3>待辦事項</h3>
+        <h3>TODO</h3>
         <TodoList items={this.state.items} />
         <form onSubmit={this.handleSubmit}>
           <label htmlFor="new-todo">
-            有什麼要做的？
+            What needs to be done?
           </label>
           <input
             id="new-todo"
@@ -21,7 +21,7 @@ class TodoApp extends React.Component {
             value={this.state.text}
           />
           <button>
-            儲存第 {this.state.items.length + 1} 個事項
+            Add #{this.state.items.length + 1}
           </button>
         </form>
       </div>

From df64cfdf5b0bac7c66117173251e4bd743aeaa00 Mon Sep 17 00:00:00 2001
From: Zero Cho <itszero@gmail.com>
Date: Wed, 20 Feb 2019 00:09:34 -0800
Subject: [PATCH 8/8] View -> view

---
 content/home/marketing/declarative.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/home/marketing/declarative.md b/content/home/marketing/declarative.md
index 7007698a0..2c529e4d0 100644
--- a/content/home/marketing/declarative.md
+++ b/content/home/marketing/declarative.md
@@ -5,4 +5,4 @@ order: 0
 
 React 讓實作互動式的使用者界面變得一點也不痛苦。你只要在你的應用程式中為每個情境設計一個簡單的 view，React 就會在資料變更時有效率的自動更新並 render 有異動的元件。
 
-宣告式的 View 讓你更容易預測你的程式的行為，同時也較為容易除錯。
+宣告式的 view 讓你更容易預測你的程式的行為，同時也較為容易除錯。