Skip to content

Commit ddfdf2b

Browse files
QC-LQC-L
authored
docs(cn): rm cn branch, use master branch (reactjs#39)
* docs(cn): merge discountry/react (reactjs#6) * docs(cn): translate home * docs(cn): translate docs title * docs(cn): add translation process to README.md * fix(cn): modify the image in README.md * fix(cn): rm crowdin from README.md * Create TRANSLATION.md
1 parent 8dc1e03 commit ddfdf2b

15 files changed

+199
-108
lines changed

‎4BA430EC-A3C2-4CD9-8E44-D21E6461854D.png

87.2 KB
Loading

‎README.md

Lines changed: 86 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,92 @@
1-
# reactjs.org
1+
# zh-hans.reactjs.org
22

33
This repo contains the source code and documentation powering [reactjs.org](https://reactjs.org/).
44

5+
## 关于中文翻译工作：
6+
7+
**翻译流程：**
8+
9+
1. 挑选你想要翻译或校对的文章 [New Chinese Website: TODOs](https://github.com/reactjs/zh-hans.reactjs.org/issues/4)
10+
2. 请 fork 这个仓库
11+
3. 基于 fork 后的仓库中 cn 分支拉取一个新的分支（名字自取）
12+
4. 翻译(校对)你所选择的文章，提交到新的分支
13+
5. 此时提交 Pull Request 到该仓库
14+
6. 会有专人 Review 该 Pull Request，当两人以上通过该 Pull Request 时，你的翻译将被合并到仓库中
15+
7. 删除你所创建的分支（如继续参与，参考同步流程）
16+
17+
**同步流程：**
18+
19+
1. 添加该 repo 为你 fork 后仓库上游
20+
21+
```
22+
$ git remote add upstream [email protected]:reactjs/zh-hans.reactjs.org.git
23+
or
24+
$ git remote add upstream https://github.com/reactjs/zh-hans.reactjs.org.git
25+
```
26+
27+
2. 同步 git fetch 上游代码
28+
29+
```
30+
$ git checkout cn && git fetch upstream
31+
```
32+
33+
3. 将上游代码合并至你 fork 后的仓库(cn 分支)中，保证你的 cn 分支永远是最新版本
34+
35+
```
36+
$ git merge upstream/cn
37+
```
38+
39+
4. 重复翻译流程
40+
41+
> 注意：
42+
>
43+
> 1. 同步时不应产生 Merge 相关的 commit
44+
> 2. 尽量保证一次 PR 只有一篇文章，便于后续校对和维护
45+
46+
**词汇表（[Glossary](https://github.com/reactjs/zh-hans.reactjs.org/issues/2)）：**
47+
48+
大家在翻译过程中会遇到不需要翻译的内容，可以添加到词汇表中。
49+
50+
项目起步，部分内容逐步完善中。后续会添加相关流程图片，便于理解。
51+
该流程我继续细化，如有疑问。可扫码进入该群，一起讨论完善这个项目：
52+
53+
<div align="center">
54+
<img src="./4BA430EC-A3C2-4CD9-8E44-D21E6461854D.png" width="300" height="388" alt="图片名称" align=center />
55+
</div>
56+
57+
## About Chinese translation:
58+
59+
**Translation Process:**
60+
61+
1. Choose the article you want to translate or proofread [New Chinese Website: TODOs](https://github.com/reactjs/zh-hans.reactjs.org/issues/4)
62+
2. Please fork this repo
63+
3. In the repo after fork, create a new branch (custom branch name) based on the cn branch.
64+
4. Translation or proofread article, and commit your branch
65+
5. Commit your PR to this repo
66+
6. Please wait for Review.
67+
7. When PR merge to this repo, you can delete your branch.
68+
69+
**Synchronization Process:**
70+
71+
1. Add the repo to become the remote upstream of your fork repo
72+
73+
```
74+
$ git remote add upstream [email protected]:reactjs/zh-hans.reactjs.org.git
75+
or
76+
$ git remote add upstream https://github.com/reactjs/zh-hans.reactjs.org.git
77+
```
78+
2. Fetch remote upstream
79+
80+
```
81+
$ git fetch upstream
82+
```
83+
3. Merge upstream/cn to your repo/cn
84+
85+
```
86+
$ git checkout cn && git merge upstream/cn
87+
```
88+
4. Re-execute the translation process
89+
590
## Getting started
691

792
### Prerequisites
@@ -55,12 +140,6 @@ The documentation is divided into several sections with a different tone and pur
55140
1. Follow GitHub's instructions.
56141
1. If possible, include screenshots of visual changes. A Netlify build will also be automatically created once you make your PR so other people can see your change.
57142

58-
## Translation
59-
60-
If you are interesting in translating `reactjs.org`, please join the Crowdin.
61-
62-
* [Crowdin - React](https://crowdin.com/project/react)
63-
64143
## Troubleshooting
65144

66145
- `yarn reset` to clear the local cache

‎TRANSLATION.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Simplified Chinese Translation
2+
3+
Progress: https://github.com/reactjs/zh-hans.reactjs.org/issues/4
4+
5+
## Style Guide
6+
7+
[TODO]

‎content/docs/nav.yml

Lines changed: 57 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,82 @@
1-
- title: Installation
1+
- title: 安装
22
items:
33
- id: getting-started
4-
title: Getting Started
4+
title: 开始
55
- id: add-react-to-a-website
6-
title: Add React to a Website
6+
title: 在网站中添加 React
77
- id: create-a-new-react-app
8-
title: Create a New React App
8+
title: 创建新的 React App
99
- id: cdn-links
1010
title: CDN Links
11-
- title: Main Concepts
11+
- title: 主要概念
1212
isOrdered: true
1313
items:
1414
- id: hello-world
1515
title: Hello World
1616
- id: introducing-jsx
17-
title: Introducing JSX
17+
title: JSX 简介
1818
- id: rendering-elements
19-
title: Rendering Elements
19+
title: 元素渲染
2020
- id: components-and-props
21-
title: Components and Props
21+
title: 组件 & Props
2222
- id: state-and-lifecycle
23-
title: State and Lifecycle
23+
title: State & 生命周期
2424
- id: handling-events
25-
title: Handling Events
25+
title: 事件处理
2626
- id: conditional-rendering
27-
title: Conditional Rendering
27+
title: 条件渲染
2828
- id: lists-and-keys
29-
title: Lists and Keys
29+
title: 列表 & Keys
3030
- id: forms
31-
title: Forms
31+
title: 表单
3232
- id: lifting-state-up
33-
title: Lifting State Up
33+
title: 状态提升
3434
- id: composition-vs-inheritance
35-
title: Composition vs Inheritance
35+
title: 组合 vs 继承
3636
- id: thinking-in-react
37-
title: Thinking In React
38-
- title: Advanced Guides
37+
title: React 理念
38+
- title: 高级指引
3939
items:
4040
- id: accessibility
41-
title: Accessibility
41+
title: 无障碍
4242
- id: code-splitting
43-
title: Code-Splitting
43+
title: 代码分割
4444
- id: context
4545
title: Context
4646
- id: error-boundaries
47-
title: Error Boundaries
47+
title: 异常捕获边界
4848
- id: forwarding-refs
49-
title: Forwarding Refs
49+
title: Refs 转发
5050
- id: fragments
5151
title: Fragments
5252
- id: higher-order-components
53-
title: Higher-Order Components
53+
title: 高阶组件
5454
- id: integrating-with-other-libraries
55-
title: Integrating with Other Libraries
55+
title: 与第三方库协同
5656
- id: jsx-in-depth
57-
title: JSX In Depth
57+
title: 深入 JSX
5858
- id: optimizing-performance
59-
title: Optimizing Performance
59+
title: 性能优化
6060
- id: portals
6161
title: Portals
6262
- id: react-without-es6
63-
title: React Without ES6
63+
title: 不使用 ES6
6464
- id: react-without-jsx
65-
title: React Without JSX
65+
title: 不使用 JSX
6666
- id: reconciliation
6767
title: Reconciliation
6868
- id: refs-and-the-dom
69-
title: Refs and the DOM
69+
title: Refs & DOM
7070
- id: render-props
7171
title: Render Props
7272
- id: static-type-checking
73-
title: Static Type Checking
73+
title: 静态类型检查
7474
- id: strict-mode
75-
title: Strict Mode
75+
title: 严格模式
7676
- id: typechecking-with-proptypes
77-
title: Typechecking With PropTypes
77+
title: 使用 PropTypes 类型检查
7878
- id: uncontrolled-components
79-
title: Uncontrolled Components
79+
title: 非受控组件
8080
- id: web-components
8181
title: Web Components
8282
- title: API Reference
@@ -91,63 +91,61 @@
9191
- id: react-dom-server
9292
title: ReactDOMServer
9393
- id: dom-elements
94-
title: DOM Elements
94+
title: DOM 元素
9595
- id: events
96-
title: SyntheticEvent
96+
title: 合成事件
9797
- id: test-utils
9898
title: Test Utilities
9999
- id: shallow-renderer
100-
title: Shallow Renderer
100+
title: 浅层渲染
101101
- id: test-renderer
102102
title: Test Renderer
103103
- id: javascript-environment-requirements
104-
title: JS Environment Requirements
104+
title: JavaScript 环境要求
105105
- id: glossary
106-
title: Glossary
107-
- title: Hooks (Preview)
106+
title: 术语表
107+
- title: Hooks（预览）
108108
isOrdered: true
109109
items:
110110
- id: hooks-intro
111-
title: Introducing Hooks
111+
title: Hooks 简介
112112
- id: hooks-overview
113-
title: Hooks at a Glance
113+
title: Hooks 概述
114114
- id: hooks-state
115-
title: Using the State Hook
115+
title: 使用 State Hook
116116
- id: hooks-effect
117-
title: Using the Effect Hook
117+
title: 使用 Effect Hook
118118
- id: hooks-rules
119-
title: Rules of Hooks
119+
title: Hooks 规范
120120
- id: hooks-custom
121-
title: Building Your Own Hooks
121+
title: 自定义 Hooks
122122
- id: hooks-reference
123-
title: Hooks API Reference
123+
title: Hooks API 参考
124124
- id: hooks-faq
125125
title: Hooks FAQ
126-
- title: Contributing
126+
- title: 贡献
127127
items:
128128
- id: how-to-contribute
129-
title: How to Contribute
129+
title: 如何参与
130130
- id: codebase-overview
131-
title: Codebase Overview
131+
title: 源码概述
132132
- id: implementation-notes
133-
title: Implementation Notes
133+
title: 实现说明
134134
- id: design-principles
135-
title: Design Principles
135+
title: 设计理念
136136
- title: FAQ
137137
items:
138138
- id: faq-ajax
139-
title: AJAX and APIs
139+
title: AJAX 及 APIs
140140
- id: faq-build
141-
title: Babel, JSX, and Build Steps
141+
title: Babel, JSX, 及构建过程
142142
- id: faq-functions
143-
title: Passing Functions to Components
143+
title: 在组件中使用事件处理函数
144144
- id: faq-state
145-
title: Component State
145+
title: 组件状态
146146
- id: faq-styling
147-
title: Styling and CSS
147+
title: 样式及 CSS
148148
- id: faq-structure
149-
title: File Structure
150-
- id: faq-versioning
151-
title: Versioning Policy
149+
title: 项目文件结构
152150
- id: faq-internals
153-
title: Virtual DOM and Internals
151+
title: Virtual DOM 及内核

‎content/home/examples/a-component-using-external-plugins.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
2-
title: A Component Using External Plugins
2+
title: 在组件中使用第三方库
33
order: 3
44
domid: markdown-example
55
---
66

7-
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.
7+
React 的使用非常灵活，并且提供了可以调用其他第三方框架或库的接口。下面这个示例就使用了一个用来渲染 markdown 语法，名为 **remarkable** 的库。它可以实时转换渲染 `<textarea>` 里的内容。

‎content/home/examples/a-simple-component.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
title: A Simple Component
2+
title: 组件
33
order: 0
44
domid: hello-example
55
---
66

7-
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`.
7+
React 组件使用一个名为 `render()` 的方法， 接收数据作为输入，输出页面中对应展示的内容。 下面这个示例中类似XML的写法被称为JSX. 输入的数据通过 `this.props` 传入 `render()` 方法。
88

9-
**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.
9+
**使用 React 的时候也可以不使用 JSX 语法** 你可以在 [Babel REPL](https://babeljs.io/repl/#?presets=react&code_lz=MYewdgzgLgBApgGzgWzmWBeGAeAFgRgD4AJRBEAGhgHcQAnBAEwEJsB6AwgbgChRJY_KAEMAlmDh0YWRiGABXVOgB0AczhQAokiVQAQgE8AkowAUPGDADkdECChWeASl4AlOMOBQAIgHkAssp0aIySpogoaFBUQmISdC48QA) 查看 JSX 是如何被渲染成原生 JavaScript 代码的。

‎content/home/examples/a-stateful-component.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
2-
title: A Stateful Component
2+
title: 有状态组件
33
order: 1
44
domid: timer-example
55
---
66

7-
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()`.
7+
除了使用外部传入的数据以外 (通过 `this.props` 访问传入数据), 组件还可以拥有其内部的状态数据 (通过 `this.state` 访问状态数据)。 当组件的状态数据改变时， 组件会调用 `render()` 方法重新渲染。

‎content/home/examples/an-application.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
2-
title: An Application
2+
title: 应用
33
order: 2
44
domid: todos-example
55
---
66

7-
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.
7+
使用 `props` 和 `state`, 我们可以创建一个简易的 Todo 应用。 下面这个示例中，我们使用 `state` 来保存现有的待办事项列表及用户的输入。 与此同时，我们也使用了内联的方法添加了事件处理函数，它们将通过事件代理被收集和调用。

‎content/home/marketing/component-based.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
title: Component-Based
2+
title: 组件化
33
order: 1
44
---
55

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

8-
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.
8+
无需再用模版代码，通过使用JavaScript编写的组件你可以更好地传递数据，将应用状态和DOM拆分开来。

‎content/home/marketing/declarative.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
title: Declarative
2+
title: 声明式
33
order: 0
44
---
55

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

8-
Declarative views make your code more predictable and easier to debug.
8+
以声明式编写UI，可以让你的代码更加可靠，且方便调试。

‎content/home/marketing/learn-once-write-anywhere.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
title: Learn Once, Write Anywhere
2+
title: 一次学习，随处编写
33
order: 2
44
---
55

6-
We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.
6+
无论你现在正在使用什么技术栈，你都可以随时引入 React 开发新特性。
77

8-
React can also render on the server using Node and power mobile apps using [React Native](https://facebook.github.io/react-native/).
8+
React 也可以用作开发原生应用的框架 [React Native](https://facebook.github.io/react-native/).

0 commit comments

Comments
 (0)