Skip to content

Revert "docs(cn): merge discountry/react in this repo" #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 31, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 59 additions & 57 deletions content/docs/nav.yml
Original file line number Diff line number Diff line change
@@ -1,82 +1,82 @@
- title: 安装
- title: Installation
items:
- id: getting-started
title: 开始
title: Getting Started
- id: add-react-to-a-website
title: 在网站中添加 React
title: Add React to a Website
- id: create-a-new-react-app
title: 创建新的 React App
title: Create a New React App
- id: cdn-links
title: CDN Links
- title: 主要概念
- title: Main Concepts
isOrdered: true
items:
- id: hello-world
title: Hello World
- id: introducing-jsx
title: JSX 简介
title: Introducing JSX
- id: rendering-elements
title: 元素渲染
title: Rendering Elements
- id: components-and-props
title: 组件 & Props
title: Components and Props
- id: state-and-lifecycle
title: State & 生命周期
title: State and Lifecycle
- id: handling-events
title: 事件处理
title: Handling Events
- id: conditional-rendering
title: 条件渲染
title: Conditional Rendering
- id: lists-and-keys
title: 列表 & Keys
title: Lists and Keys
- id: forms
title: 表单
title: Forms
- id: lifting-state-up
title: 状态提升
title: Lifting State Up
- id: composition-vs-inheritance
title: 组合 vs 继承
title: Composition vs Inheritance
- id: thinking-in-react
title: React 理念
- title: 高级指引
title: Thinking In React
- title: Advanced Guides
items:
- id: accessibility
title: 无障碍
title: Accessibility
- id: code-splitting
title: 代码分割
title: Code-Splitting
- id: context
title: Context
- id: error-boundaries
title: 异常捕获边界
title: Error Boundaries
- id: forwarding-refs
title: Refs 转发
title: Forwarding Refs
- id: fragments
title: Fragments
- id: higher-order-components
title: 高阶组件
title: Higher-Order Components
- id: integrating-with-other-libraries
title: 与第三方库协同
title: Integrating with Other Libraries
- id: jsx-in-depth
title: 深入 JSX
title: JSX In Depth
- id: optimizing-performance
title: 性能优化
title: Optimizing Performance
- id: portals
title: Portals
- id: react-without-es6
title: 不使用 ES6
title: React Without ES6
- id: react-without-jsx
title: 不使用 JSX
title: React Without JSX
- id: reconciliation
title: Reconciliation
- id: refs-and-the-dom
title: Refs & DOM
title: Refs and the DOM
- id: render-props
title: Render Props
- id: static-type-checking
title: 静态类型检查
title: Static Type Checking
- id: strict-mode
title: 严格模式
title: Strict Mode
- id: typechecking-with-proptypes
title: 使用 PropTypes 类型检查
title: Typechecking With PropTypes
- id: uncontrolled-components
title: 非受控组件
title: Uncontrolled Components
- id: web-components
title: Web Components
- title: API Reference
Expand All @@ -91,61 +91,63 @@
- id: react-dom-server
title: ReactDOMServer
- id: dom-elements
title: DOM 元素
title: DOM Elements
- id: events
title: 合成事件
title: SyntheticEvent
- id: test-utils
title: Test Utilities
- id: shallow-renderer
title: 浅层渲染
title: Shallow Renderer
- id: test-renderer
title: Test Renderer
- id: javascript-environment-requirements
title: JavaScript 环境要求
title: JS Environment Requirements
- id: glossary
title: 术语表
- title: Hooks(预览)
title: Glossary
- title: Hooks (Preview)
isOrdered: true
items:
- id: hooks-intro
title: Hooks 简介
title: Introducing Hooks
- id: hooks-overview
title: Hooks 概述
title: Hooks at a Glance
- id: hooks-state
title: 使用 State Hook
title: Using the State Hook
- id: hooks-effect
title: 使用 Effect Hook
title: Using the Effect Hook
- id: hooks-rules
title: Hooks 规范
title: Rules of Hooks
- id: hooks-custom
title: 自定义 Hooks
title: Building Your Own Hooks
- id: hooks-reference
title: Hooks API 参考
title: Hooks API Reference
- id: hooks-faq
title: Hooks FAQ
- title: 贡献
- title: Contributing
items:
- id: how-to-contribute
title: 如何参与
title: How to Contribute
- id: codebase-overview
title: 源码概述
title: Codebase Overview
- id: implementation-notes
title: 实现说明
title: Implementation Notes
- id: design-principles
title: 设计理念
title: Design Principles
- title: FAQ
items:
- id: faq-ajax
title: AJAX APIs
title: AJAX and APIs
- id: faq-build
title: Babel, JSX, 及构建过程
title: Babel, JSX, and Build Steps
- id: faq-functions
title: 在组件中使用事件处理函数
title: Passing Functions to Components
- id: faq-state
title: 组件状态
title: Component State
- id: faq-styling
title: 样式及 CSS
title: Styling and CSS
- id: faq-structure
title: 项目文件结构
title: File Structure
- id: faq-versioning
title: Versioning Policy
- id: faq-internals
title: Virtual DOM 及内核
title: Virtual DOM and Internals
4 changes: 2 additions & 2 deletions content/home/examples/a-component-using-external-plugins.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: 在组件中使用第三方库
title: A Component Using External Plugins
order: 3
domid: markdown-example
---

React 的使用非常灵活,并且提供了可以调用其他第三方框架或库的接口。下面这个示例就使用了一个用来渲染 markdown 语法,名为 **remarkable** 的库。它可以实时转换渲染 `<textarea>` 里的内容。
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.
6 changes: 3 additions & 3 deletions content/home/examples/a-simple-component.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
title: 组件
title: A Simple Component
order: 0
domid: hello-example
---

React 组件使用一个名为 `render()` 的方法, 接收数据作为输入,输出页面中对应展示的内容。 下面这个示例中类似XML的写法被称为JSX. 输入的数据通过 `this.props` 传入 `render()` 方法。
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 的时候也可以不使用 JSX 语法** 你可以在 [Babel REPL](https://babeljs.io/repl/#?presets=react&code_lz=MYewdgzgLgBApgGzgWzmWBeGAeAFgRgD4AJRBEAGhgHcQAnBAEwEJsB6AwgbgChRJY_KAEMAlmDh0YWRiGABXVOgB0AczhQAokiVQAQgE8AkowAUPGDADkdECChWeASl4AlOMOBQAIgHkAssp0aIySpogoaFBUQmISdC48QA) 查看 JSX 是如何被渲染成原生 JavaScript 代码的。
**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.
4 changes: 2 additions & 2 deletions content/home/examples/a-stateful-component.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: 有状态组件
title: A Stateful Component
order: 1
domid: timer-example
---

除了使用外部传入的数据以外 (通过 `this.props` 访问传入数据), 组件还可以拥有其内部的状态数据 (通过 `this.state` 访问状态数据)。 当组件的状态数据改变时, 组件会调用 `render()` 方法重新渲染。
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()`.
4 changes: 2 additions & 2 deletions content/home/examples/an-application.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: 应用
title: An Application
order: 2
domid: todos-example
---

使用 `props` `state`, 我们可以创建一个简易的 Todo 应用。 下面这个示例中,我们使用 `state` 来保存现有的待办事项列表及用户的输入。 与此同时,我们也使用了内联的方法添加了事件处理函数,它们将通过事件代理被收集和调用。
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.
6 changes: 3 additions & 3 deletions content/home/marketing/component-based.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
title: 组件化
title: Component-Based
order: 1
---

创建好拥有各自状态的组件,再由组件构成更加复杂的界面。
Build encapsulated components that manage their own state, then compose them to make complex UIs.

无需再用模版代码,通过使用JavaScript编写的组件你可以更好地传递数据,将应用状态和DOM拆分开来。
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.
6 changes: 3 additions & 3 deletions content/home/marketing/declarative.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
title: 声明式
title: Declarative
order: 0
---

React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图,在数据改变时 React 也可以高效地更新渲染界面。
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.

以声明式编写UI,可以让你的代码更加可靠,且方便调试。
Declarative views make your code more predictable and easier to debug.
6 changes: 3 additions & 3 deletions content/home/marketing/learn-once-write-anywhere.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
title: 一次学习,随处编写
title: Learn Once, Write Anywhere
order: 2
---

无论你现在正在使用什么技术栈,你都可以随时引入 React 开发新特性。
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 Native](https://facebook.github.io/react-native/).
React can also render on the server using Node and power mobile apps using [React Native](https://facebook.github.io/react-native/).
27 changes: 10 additions & 17 deletions src/components/LayoutFooter/Footer.js
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
},
}}>
<FooterNav layoutHasSidebar={layoutHasSidebar}>
<MetaTitle onDark={true}>文档</MetaTitle>
<MetaTitle onDark={true}>Docs</MetaTitle>
{sectionListDocs.map(section => {
const defaultItem = section.items[0];
return (
Expand Down Expand Up @@ -90,19 +90,19 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
href="https://discuss.reactjs.org"
target="_blank"
rel="noopener">
Discussion 论坛
Discussion Forum
</ExternalFooterLink>
<ExternalFooterLink
href="https://discord.gg/0ZcbPKXt5bZjGY5n"
target="_blank"
rel="noopener">
Reactiflux 聊天室
Reactiflux Chat
</ExternalFooterLink>
<ExternalFooterLink
href="https://dev.to/t/react"
target="_blank"
rel="noopener">
DEV 社区
DEV Community
</ExternalFooterLink>
<ExternalFooterLink
href="https://www.facebook.com/react"
Expand All @@ -118,7 +118,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
</ExternalFooterLink>
</FooterNav>
<FooterNav layoutHasSidebar={layoutHasSidebar}>
<MetaTitle onDark={true}>社区</MetaTitle>
<MetaTitle onDark={true}>Community</MetaTitle>
{sectionListCommunity.map(section => (
<FooterLink
to={`/community/${section.items[0].id}.html`}
Expand All @@ -128,11 +128,11 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
))}
</FooterNav>
<FooterNav layoutHasSidebar={layoutHasSidebar}>
<MetaTitle onDark={true}>其他</MetaTitle>
<FooterLink to="/tutorial/tutorial.html">教程</FooterLink>
<FooterLink to="/blog/">博客</FooterLink>
<MetaTitle onDark={true}>More</MetaTitle>
<FooterLink to="/tutorial/tutorial.html">Tutorial</FooterLink>
<FooterLink to="/blog/">Blog</FooterLink>
<FooterLink to="/acknowledgements.html">
致谢
Acknowledgements
</FooterLink>
<ExternalFooterLink
href="https://facebook.github.io/react-native/"
Expand Down Expand Up @@ -179,14 +179,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
color: colors.subtleOnDark,
paddingTop: 15,
}}>
Copyright © 2019 Facebook Inc.
</p>
<p
css={{
color: colors.subtleOnDark,
paddingTop: 15,
}}>
<a href="https://docschina.org/" target="_blank">印记中文</a>
Copyright © 2018 Facebook Inc.
</p>
</section>
</div>
Expand Down
8 changes: 4 additions & 4 deletions src/components/LayoutHeader/DocSearch.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@ class DocSearch extends Component<{}, State> {
// eslint-disable-next-line no-undef
if (window.docsearch) {
window.docsearch({
apiKey: 'fb1476c24383a4a7a8d944449c21fdba',
indexName: 'react_china',
apiKey: '36221914cce388c46d0420343e0bb32e',
indexName: 'react',
inputSelector: '#algolia-doc-search',
});
} else {
Expand Down Expand Up @@ -104,8 +104,8 @@ class DocSearch extends Component<{}, State> {
}}
id="algolia-doc-search"
type="search"
placeholder="在文档中搜索..."
aria-label="在文档中搜索..."
placeholder="Search docs"
aria-label="Search docs"
/>
</form>
) : null;
Expand Down
Loading