Synchronized zh-hans.reactjs.org, and then merge the latest master

Author: fonkie

.circleci/config.yml

@@ -4,6 +4,9 @@ jobs:
     docker:
       - image: circleci/node:8
     steps:
+      - add_ssh_keys:
+          fingerprints:
+            - "b8:65:3c:86:e2:5c:64:82:d6:49:1f:4d:da:da:00:87"
       - checkout
       - restore_cache:
           keys:
@@ -14,7 +17,15 @@ jobs:
       - save_cache:
           paths:
             - node_modules
-          key: dependencies-{{ checksum "yarn.lock" }}
+          key: dependencies-{{ checksum "yarn.lock" }}    
       - run:
-          name: Check Prettier, ESLint, Flow
-          command: yarn ci-check
+          name: Run deploy scripts
+          command: bash ./.circleci/deploy.sh
+workflows:
+  version: 2
+  build_and_deploy:
+    jobs:
+      - build:
+          filters:
+            branches:
+              only: master

.circleci/deploy.sh

@@ -0,0 +1,7 @@
+git config --global user.name "QC-L"
+git config --global user.email "github@liqichang.com"
+git remote set-url origin git@github.com:reactjs/zh-hans.reactjs.org.git
+
+chmod -R 777 node_modules/gh-pages/
+yarn build
+yarn deploy

README.md

@@ -1,6 +1,19 @@
-# zh-hans.reactjs.org
+# [React 中文文档](https://zh-hans.reactjs.org/)
 
-This repo contains the source code and documentation powering [reactjs.org](https://reactjs.org/).
+此仓库包含 [React 中文文档](https://zh-hans.reactjs.org/) 的文档及源码，并由官方实时同步。
+
+## 关于翻译内容反馈
+
+翻译基本接近尾声，但文档中也有可能存在疏漏之处。<br><br>
+如在阅读文档中，遇到文档的问题可直接 PR 修改。<br>也可添加反馈群。我们会及时给出反馈。<br><br>
+当然也可以在群里交流 React 相关的交流心得，非常欢迎。<br><br>
+希望大家共同把这个文档维护好，造福更多 React 开发者。<br>
+
+| 扫码添加 React 文档交流反馈群 | 添加 `docschina-bot` |
+| :---------------: | :------------------: |
+| ![image](https://user-images.githubusercontent.com/13861040/55455847-de942c80-5617-11e9-9762-ae2ed3591969.png) | ![image](https://user-images.githubusercontent.com/13861040/55455900-126f5200-5618-11e9-977a-9c6a0c621eb9.png) | 
+
+> 注：添加机器人成功后（添加时回复没用哟），向机器人回复关键字 `react`，即可加群。
 
 ## 关于中文翻译工作：
 
@@ -48,11 +61,7 @@ This repo contains the source code and documentation powering [reactjs.org](http
 大家在翻译过程中会遇到不需要翻译的内容，可以添加到词汇表中。
 
 项目起步，部分内容逐步完善中。后续会添加相关流程图片，便于理解。
-该流程我继续细化，如有疑问。可扫码进入该群，一起讨论完善这个项目：
-
-<div align="center">   
-	<img src="https://user-images.githubusercontent.com/13861040/52535012-dfc97b80-2d83-11e9-910a-46ab217b7ff4.png" width="300" height="388" alt="图片名称" align=center />
-</div>
+该流程我继续细化，如有疑问。
 
 ## About Chinese translation:
 
@@ -134,7 +143,7 @@ The documentation is divided into several sections with a different tone and pur
 
 ### Push it
 
-1. `git add -A && git commit -m "My message"` (replacing `My message` with a commit message, such as `Fixed header logo on Android`) to stage and commit your changes
+1. `git add -A && git commit -m "My message"` (replacing `My message` with a commit message, such as `Fix header logo on Android`) to stage and commit your changes
 1. `git push my-fork-name the-name-of-my-branch`
 1. Go to the [reactjs.org repo](https://github.com/reactjs/reactjs.org) and you should see recently pushed branches.
 1. Follow GitHub's instructions.

content/authors.yml

@@ -73,6 +73,9 @@ sophiebits:
 steveluscher:
   name: Steven Luscher
   url: https://twitter.com/steveluscher
+tesseralis:
+  name: Nat Alison
+  url: https://twitter.com/tesseralis
 timer:
   name: Joe Haddad
   url: https://twitter.com/timer150

content/blog/2013-06-05-why-react.md

@@ -1,88 +1,88 @@
 ---
-title: Why did we build React?
+title: 我们为什么要构建 React?
 author: [petehunt]
 ---
 
-There are a lot of JavaScript MVC frameworks out there. Why did we build React
-and why would you want to use it?
+现在有很多 JavaScript MVC 框架。我们为什么还要构建 React，
+你又为什么会使用它？
 
-## React isn't an MVC framework. {#react-isnt-an-mvc-framework}
+## React 不是一个 MVC 框架。 {#react-isnt-an-mvc-framework}
 
-React is a library for building composable user interfaces. It encourages
-the creation of reusable UI components which present data that changes over
-time.
+React 是一个用于构建可组合用户界面的库。
+它鼓励创建那些用于呈现随时间变化数据的、可复用的
+UI 组件。
 
-## React doesn't use templates. {#react-doesnt-use-templates}
+## React 不使用模板。 {#react-doesnt-use-templates}
 
-Traditionally, web application UIs are built using templates or HTML directives.
-These templates dictate the full set of abstractions that you are allowed to use
-to build your UI.
+在以往，web 应用程序的 UI 都是使用模板或者 HTML 指令构建的。
+这些模板决定了你可以用来构建
+UI 的全套抽象。
 
-React approaches building user interfaces differently by breaking them into
-**components**. This means React uses a real, full featured programming language
-to render views, which we see as an advantage over templates for a few reasons:
+而 React 用了不同的方式构建 UI，把它们拆成**组件**。
+这意味着 React 使用了一种真实的、具有各种特性的编程语言来渲染视图，
+我们认为它相较于模板而言是一种优势的理由如下:
 
-- **JavaScript is a flexible, powerful programming language** with the ability
-  to build abstractions. This is incredibly important in large applications.
-- By unifying your markup with its corresponding view logic, React can actually
-  make views **easier to extend and maintain**.
-- By baking an understanding of markup and content into JavaScript, there's
-  **no manual string concatenation** and therefore less surface area for XSS
-  vulnerabilities.
+- **JavaScript 是一种灵活、强大的编程语言**，具有构建抽象的能力，
+  这在大型应用中非常重要。
+- 通过将你的标记和其相对应的视图逻辑统一起来，
+  React 实际上可以让视图变得**更容易扩展和维护**。
+- 通过把一种对标记和内容的理解融入 JavaScript，
+  **不用手动连接字符串**，因此 XSS
+  漏洞的表面积也更小。
 
-We've also created [JSX](/docs/jsx-in-depth.html), an optional syntax
-extension, in case you prefer the readability of HTML to raw JavaScript.
+相比原生 JavaScript，如果你更喜欢 HTML 的高可读性，
+我们创造了 [JSX](/docs/jsx-in-depth.html)，一种可选的语法扩展。
 
-## Reactive updates are dead simple. {#reactive-updates-are-dead-simple}
+## 响应式更新非常简单。 {#reactive-updates-are-dead-simple}
 
-React really shines when your data changes over time.
+当你的数据随时间变化的时候，React 表现得真的很出色。
 
-In a traditional JavaScript application, you need to look at what data changed
-and imperatively make changes to the DOM to keep it up-to-date. Even AngularJS,
-which provides a declarative interface via directives and data binding [requires
-a linking function to manually update DOM nodes](https://code.angularjs.org/1.0.8/docs/guide/directive#reasonsbehindthecompilelinkseparation).
+在一个传统的 JavaScript 应用中，你需要观察数据发生了什么变化，
+并且为了让 DOM 保持最新的状态还必须对它进行更改。
+AngularJS 甚至通过指令和数据绑定的提供声明式接口，
+还[需要一个链接函数来手动更新 DOM 节点](https://code.angularjs.org/1.0.8/docs/guide/directive#reasonsbehindthecompilelinkseparation) 。
 
-React takes a different approach.
+但 React 采用了不同的方式。
 
-When your component is first initialized, the `render` method is called,
-generating a lightweight representation of your view. From that representation,
-a string of markup is produced, and injected into the document. When your data
-changes, the `render` method is called again. In order to perform updates as
-efficiently as possible, we diff the return value from the previous call to
-`render` with the new one, and generate a minimal set of changes to be applied
-to the DOM.
+当你的组件首次初始化，组件的 `render` 方法会被调用，
+对你的视图生成一个轻量化的表示。从那个表示生成一串标记，
+并注入到文档中。当你的数据发生了变化，
+`render` 方法会再次被调用。为了尽可能高效地执行更新，
+我们会对前一次调用 `render` 方法返回的结果和新的调用结果进行区分，
+并生成一个要应用于 DOM
+的最小更改集合。
 
-> The data returned from `render` is neither a string nor a DOM node -- it's a
-> lightweight description of what the DOM should look like.
+> `render` 返回的数据既不是一串字符串也不是一个 DOM 节点 —— 而是一种表示
+> DOM 应该是什么样子的轻量化描述。
 
-We call this process **reconciliation**. Check out
-[this jsFiddle](http://jsfiddle.net/2h6th4ju/) to see an example of
-reconciliation in action.
+我们把这个过程称为**协调**。 查看
+[这个 jsFiddle](http://jsfiddle.net/2h6th4ju/)
+可以看到实际的协调示例。
 
-Because this re-render is so fast (around 1ms for TodoMVC), the developer
-doesn't need to explicitly specify data bindings. We've found this approach
-makes it easier to build apps.
+因为这样的重渲染实在太快了（对于 TodoMVC 而言大概就 1ms），
+所以开发者不需要显式地指定数据绑定。
+我们发现这种方式可以更轻松地构建应用程序。
 
-## HTML is just the beginning. {#html-is-just-the-beginning}
+## HTML 只是开始。 {#html-is-just-the-beginning}
 
-Because React has its own lightweight representation of the document, we can do
-some pretty cool things with it:
+因为 React 有它自己对于文档的轻量化表示，
+所以我们可以用它做一些非常酷的事情：
 
-- Facebook has dynamic charts that render to `<canvas>` instead of HTML.
-- Instagram is a "single page" web app built entirely with React and
-  `Backbone.Router`. Designers regularly contribute React code with JSX.
-- We've built internal prototypes that run React apps in a web worker and use
-  React to drive **native iOS views** via an Objective-C bridge.
-- You can run React
-  [on the server](https://github.com/petehunt/react-server-rendering-example)
-  for SEO, performance, code sharing and overall flexibility.
-- Events behave in a consistent, standards-compliant way in all browsers
-  (including IE8) and automatically use
-  [event delegation](http://davidwalsh.name/event-delegate).
+- Facebook 有些动态的图表会渲染成 `<canvas>` 而不是 HTML。
+- Instagram 是一个完全用 React 和 `Backbone.Router` 构建的“单页”web 应用程序。
+  设计师经常使用 JSX 来提供 React 代码。
+- 我们已经构建了在 web worker 中运行 React 应用程序的内部原型，并且用
+  React 通过一个 Objective-C 桥接器来驱动 **原生 iOS 视图**。
+- 你可以
+  [在服务器上](https://github.com/petehunt/react-server-rendering-example)
+  运行 React 以获得 SEO、性能、代码共享和整体的灵活性。
+- 事件在所有浏览器（包括 IE8）中以一致的、符合标准的方式运行，
+  并且自动使用了
+  [事件委托](http://davidwalsh.name/event-delegate) 。
 
-Head on over to [https://reactjs.org](https://reactjs.org) to check out what we have
-built. Our documentation is geared towards building apps with the framework,
-but if you are interested in the nuts and bolts
-[get in touch](/support.html) with us!
+前往 [https://reactjs.org](https://reactjs.org) 可以查看我们已经构建的内容。
+我们的文档旨在用框架构建应用程序，
+但是如果你对具体细节感兴趣，
+请与我们[联系](/support.html)！
 
-Thanks for reading!
+感谢阅读！

content/blog/2014-09-24-testing-flux-applications.md

@@ -17,7 +17,7 @@ The first steps toward working with Jest are as follows:
 
 1. Get the module dependencies for the application installed by running `npm install`.
 2. Create a directory `__tests__/` with a test file, in this case TodoStore-test.js
-3. Run `npm install jest-cli —save-dev`
+3. Run `npm install jest-cli --save-dev`
 4. Add the following to your package.json
 
 ```javascript

content/blog/2015-03-30-community-roundup-26.md

@@ -29,8 +29,7 @@ Colin also [blogged about his experience using React Native](http://blog.scottlo
 
 Spencer Ahrens and I had the great pleasure to talk about React Native on [The Changelog](https://thechangelog.com/149/) podcast. It was really fun to chat for an hour, I hope that you'll enjoy listening to it. :)
 
-<audio src="https://fdlyr.co/d/changelog/cdn.5by5.tv/audio/broadcasts/changelog/2015/changelog-149.mp3" controls="controls" style="width: 100%"></audio>
-
+<audio src="https://cdn.changelog.com/uploads/podcast/149/the-changelog-149.mp3" controls="controls" style="width: 100%"></audio>
 
 ## Hacker News {#hacker-news}
 

content/blog/2015-08-11-relay-technical-preview.md

@@ -13,7 +13,7 @@ While React simplified the process of developing complex user-interfaces, it lef
 
 Declarative data-fetching means that Relay applications specify *what* data they need, not *how* to fetch that data. Just as React uses a description of the desired UI to manage view updates, Relay uses a data description in the form of GraphQL queries. Given these descriptions, Relay coalesces queries into batches for efficiency, manages error-prone asynchronous logic, caches data for performance, and automatically updates views as data changes.
 
-Relay is also component-oriented, extending the notion of a React component to include a description of what data is necessary to render it. This colocation allows developers to reason locally about their application and eliminates bugs such as under- or over-fetching data.
+Relay is also component-oriented, extending the notion of a React component to include a description of what data is necessary to render it. This collocation allows developers to reason locally about their application and eliminates bugs such as under- or over-fetching data.
 
 Relay is in use at Facebook in production apps, and we're using it more and more because *Relay lets developers focus on their products and move fast*. It's working for us and we'd like to share it with the community.
 

content/blog/2018-03-27-update-on-async-rendering.md

@@ -134,7 +134,7 @@ author: [bvaughn]
 
 尽管上面的代码本身没有问题，但是 `componentWillReceiveProps` 生命周期经常被误用，_会_ 产生问题。因此，该方法将被废弃。
 
-从 16.3 版本开始，当 `props` 变化时，建议使用新的 `static getDerivedStateFromProps` 生命周期更新 `state`。（创建组件以及每次组件接收到新的 props 时都会调用该生命周期）：
+从 16.3 版本开始，当 `props` 变化时，建议使用新的 `static getDerivedStateFromProps` 生命周期更新 `state`。创建组件以及每次组件由于 props 或 state 的改变而重新渲染时都会调用该生命周期：
 `embed:update-on-async-rendering/updating-state-from-props-after.js`
 
 在上面的示例中，你可能会注意到 `props.currentRow` 在 state 中的镜像（`state.lastRow`）。这使得 `getDerivedStateFromProps` 能够像在 `componentWillReceiveProps` 中相同的方式访问上一个 props 的值。