reactjs · discountry · Jan 31, 2019 · Jan 31, 2019 · Jan 31, 2019 · hijiangtao
diff --git a/content/docs/nav.yml b/content/docs/nav.yml
@@ -1,82 +1,82 @@
-- title: Installation
+- title: 安装
   items:
     - id: getting-started
-      title: Getting Started
+      title: 开始
     - id: add-react-to-a-website
-      title: Add React to a Website
+      title: 在网站中添加 React 
     - id: create-a-new-react-app
-      title: Create a New React App
+      title: 创建新的 React App
     - id: cdn-links
       title: CDN Links
-- title: Main Concepts
+- title: 主要概念
   isOrdered: true
   items:
     - id: hello-world
       title: Hello World
     - id: introducing-jsx
-      title: Introducing JSX
+      title: JSX 简介
     - id: rendering-elements
-      title: Rendering Elements
+      title: 元素渲染
     - id: components-and-props
-      title: Components and Props
+      title: 组件 & Props
     - id: state-and-lifecycle
-      title: State and Lifecycle
+      title: State & 生命周期
     - id: handling-events
-      title: Handling Events
+      title: 事件处理
     - id: conditional-rendering
-      title: Conditional Rendering
+      title: 条件渲染
     - id: lists-and-keys
-      title: Lists and Keys
+      title: 列表 & Keys
     - id: forms
-      title: Forms
+      title: 表单
     - id: lifting-state-up
-      title: Lifting State Up
+      title: 状态提升
     - id: composition-vs-inheritance
-      title: Composition vs Inheritance
+      title: 组合 vs 继承
     - id: thinking-in-react
-      title: Thinking In React
-- title: Advanced Guides
+      title: React 理念
+- title: 高级指引
   items:
     - id: accessibility
-      title: Accessibility
+      title: 无障碍
     - id: code-splitting
-      title: Code-Splitting
+      title: 代码分割
     - id: context
       title: Context
     - id: error-boundaries
-      title: Error Boundaries
+      title: 异常捕获边界
     - id: forwarding-refs
-      title: Forwarding Refs
+      title: Refs 转发
     - id: fragments
       title: Fragments
     - id: higher-order-components
-      title: Higher-Order Components
+      title: 高阶组件
     - id: integrating-with-other-libraries
-      title: Integrating with Other Libraries
+      title: 与第三方库协同
     - id: jsx-in-depth
-      title: JSX In Depth
+      title: 深入 JSX 
     - id: optimizing-performance
-      title: Optimizing Performance
+      title: 性能优化
     - id: portals
       title: Portals
     - id: react-without-es6
-      title: React Without ES6
+      title: 不使用 ES6
     - id: react-without-jsx
-      title: React Without JSX
+      title: 不使用 JSX
     - id: reconciliation
       title: Reconciliation
     - id: refs-and-the-dom
-      title: Refs and the DOM
+      title: Refs & DOM
     - id: render-props
       title: Render Props
     - id: static-type-checking
-      title: Static Type Checking
+      title: 静态类型检查
     - id: strict-mode
-      title: Strict Mode
+      title: 严格模式
     - id: typechecking-with-proptypes
-      title: Typechecking With PropTypes
+      title: 使用 PropTypes 类型检查
     - id: uncontrolled-components
-      title: Uncontrolled Components
+      title: 非受控组件
     - id: web-components
       title: Web Components
 - title: API Reference
@@ -91,63 +91,61 @@
     - id: react-dom-server
       title: ReactDOMServer
     - id: dom-elements
-      title: DOM Elements
+      title: DOM 元素
     - id: events
-      title: SyntheticEvent
+      title: 合成事件
     - id: test-utils
       title: Test Utilities
     - id: shallow-renderer
-      title: Shallow Renderer
+      title: 浅层渲染
     - id: test-renderer
       title: Test Renderer
     - id: javascript-environment-requirements
-      title: JS Environment Requirements
+      title: JavaScript 环境要求
     - id: glossary
-      title: Glossary
-- title: Hooks (Preview)
+      title: 术语表
+- title: Hooks（预览）
   isOrdered: true
   items:
       - id: hooks-intro
-        title: Introducing Hooks
+        title: Hooks 简介
       - id: hooks-overview
-        title: Hooks at a Glance
+        title: Hooks 概述
       - id: hooks-state
-        title: Using the State Hook
+        title: 使用 State Hook
       - id: hooks-effect
-        title: Using the Effect Hook
+        title: 使用 Effect Hook
       - id: hooks-rules
-        title: Rules of Hooks
+        title: Hooks 规范
       - id: hooks-custom
-        title: Building Your Own Hooks
+        title: 自定义 Hooks
       - id: hooks-reference
-        title: Hooks API Reference
+        title: Hooks API 参考
       - id: hooks-faq
         title: Hooks FAQ
-- title: Contributing
+- title: 贡献
   items:
   - id: how-to-contribute
-    title: How to Contribute
+    title: 如何参与
   - id: codebase-overview
-    title: Codebase Overview
+    title: 源码概述
   - id: implementation-notes
-    title: Implementation Notes
+    title: 实现说明
   - id: design-principles
-    title: Design Principles
+    title: 设计理念
 - title: FAQ
   items:
     - id: faq-ajax
-      title: AJAX and APIs
+      title: AJAX 及 APIs
     - id: faq-build
-      title: Babel, JSX, and Build Steps
+      title: Babel, JSX, 及构建过程
     - id: faq-functions
-      title: Passing Functions to Components
+      title: 在组件中使用事件处理函数
     - id: faq-state
-      title: Component State
+      title: 组件状态
     - id: faq-styling
-      title: Styling and CSS
+      title: 样式及 CSS
     - id: faq-structure
-      title: File Structure
-    - id: faq-versioning
-      title: Versioning Policy
+      title: 项目文件结构
     - id: faq-internals
-      title: Virtual DOM and Internals
+      title: Virtual DOM 及内核
diff --git 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 的使用非常灵活，并且提供了可以调用其他第三方框架或库的接口。下面这个示例就使用了一个用来渲染 markdown 语法，名为 **remarkable** 的库。它可以实时转换渲染 `<textarea>` 里的内容。
diff --git 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()` 的方法， 接收数据作为输入，输出页面中对应展示的内容。 下面这个示例中类似XML的写法被称为JSX. 输入的数据通过 `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](https://babeljs.io/repl/#?presets=react&code_lz=MYewdgzgLgBApgGzgWzmWBeGAeAFgRgD4AJRBEAGhgHcQAnBAEwEJsB6AwgbgChRJY_KAEMAlmDh0YWRiGABXVOgB0AczhQAokiVQAQgE8AkowAUPGDADkdECChWeASl4AlOMOBQAIgHkAssp0aIySpogoaFBUQmISdC48QA) 查看 JSX 是如何被渲染成原生 JavaScript 代码的。
diff --git 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.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`, 我们可以创建一个简易的 Todo 应用。 下面这个示例中，我们使用 `state` 来保存现有的待办事项列表及用户的输入。 与此同时，我们也使用了内联的方法添加了事件处理函数，它们将通过事件代理被收集和调用。
diff --git 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拆分开来。
diff --git 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 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图，在数据改变时 React 也可以高效地更新渲染界面。
 
-Declarative views make your code more predictable and easier to debug.
+以声明式编写UI，可以让你的代码更加可靠，且方便调试。
diff --git 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 也可以用作开发原生应用的框架 [React Native](https://facebook.github.io/react-native/).
diff --git 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 (
@@ -90,19 +90,19 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
               href="https://discuss.reactjs.org"
               target="_blank"
               rel="noopener">
-              Discussion Forum
+              Discussion 论坛
             </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>
-            <FooterLink to="/blog/">Blog</FooterLink>
+            <MetaTitle onDark={true}>其他</MetaTitle>
+            <FooterLink to="/tutorial/tutorial.html">教程</FooterLink>
+            <FooterLink to="/blog/">博客</FooterLink>
             <FooterLink to="/acknowledgements.html">
-              Acknowledgements
+              致谢
             </FooterLink>
             <ExternalFooterLink
               href="https://facebook.github.io/react-native/"
@@ -179,7 +179,14 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
               color: colors.subtleOnDark,
               paddingTop: 15,
             }}>
-            Copyright © 2018 Facebook Inc.
+            Copyright © 2019 Facebook Inc.
+          </p>
+          <p
+            css={{
+              color: colors.subtleOnDark,
+              paddingTop: 15,
+            }}>
+            <a href="https://docschina.org/" target="_blank">印记中文</a>
           </p>
         </section>
       </div>

diff --git a/src/components/LayoutHeader/DocSearch.js b/src/components/LayoutHeader/DocSearch.js
@@ -22,8 +22,8 @@ class DocSearch extends Component<{}, State> {
     // eslint-disable-next-line no-undef
     if (window.docsearch) {
       window.docsearch({
-        apiKey: '36221914cce388c46d0420343e0bb32e',
-        indexName: 'react',
+        apiKey: 'fb1476c24383a4a7a8d944449c21fdba',
+        indexName: 'react_china',
         inputSelector: '#algolia-doc-search',
       });
     } else {
@@ -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;