Sync up previous Chinese documents and several minor updates on formats.
Cam Song committed
Dec 14, 2014 at 14:58 UTC
09e0dee307407117f97b21f707f44b0ec4890a9e
5 files changed
+67
-22
docs/docs/01-why-react.zh-CN.md
+2
-2
@@ -13,9 +13,9 @@ React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript
13
14
仅仅只要表达出你的应用程序在任一个时间点应该长的样子，然后当底层的数据变了，React 会自动处理所有用户界面的更新。
15
16
-### 表达能力 (Declarative)
16
+### 声明式 (Declarative)
17
18
-当数据变化了，React 概念上是类似点击了更新的按钮，但仅会更新变化的部分。
18
+数据变化后，React 概念上与点击“刷新”按钮类似，但仅会更新变化的部分。
19
20
## 构建可组合的组件
21
docs/docs/02-displaying-data.zh-CN.md
+34
-2
@@ -7,7 +7,8 @@ prev: why-react-zh-CN.html
7
next: jsx-in-depth.html
8
---
9
10
-通过用户界面，最基础可以做的事就是显示一些数据。React 让显示数据变得简单，当数据变化的时候，用户界面会自动同步更新。
10
+用户界面能做的最基础的事就是显示一些数据。React 让显示数据变得简单，当数据变化的时候，用户界面会自动同步更新。
11
+
12
13
## 开始
14
@@ -54,6 +55,7 @@ setInterval(function() {
55
}, 500);
56
```
57
58
+
59
## 被动更新 (Reactive Updates)
60
61
在浏览器中打开 `hello-react.html` ，在输入框输入你的名字。你会发现 React 在用户界面中只改变了时间， 任何你在输入框输入的内容一直保留着，即使你没有写任何代码来完成这个功能。React 为你解决了这个问题，做了正确的事。
@@ -62,6 +64,7 @@ setInterval(function() {
64
65
对这个组件的输入称为 `props` - "properties"的缩写。得益于 JSX 语法，它们通过参数传递。你必须知道在组件里，这些属性是不可改变的，也就是说 **`this.props` 是只读的**。
66
67
+
68
## 组件就像是函数
69
70
React 组件非常简单。你可以认为它们就是简单的函数，接受 `props` 和 `state` (后面会讨论) 作为参数，然后渲染出 HTML。正是应为它们是这么的简单，这使得它们非常容易理解。
@@ -70,6 +73,7 @@ React 组件非常简单。你可以认为它们就是简单的函数，接受 `
73
>
74
> **只有一个限制**: React 组件只能渲染单个根节点。如果你想要返回多个节点，它们*必须*被包含在同一个节点里。
75
76
+
77
## JSX 语法
78
79
我们坚信组件是正确方法去做关注分离，而不是通过“模板”和“展示逻辑”。我们认为标签和生成它的代码是紧密相连的。此外，展示逻辑通常是很复杂的，通过模板语言实现这些逻辑会产生大量代码。
@@ -80,6 +84,34 @@ React 组件非常简单。你可以认为它们就是简单的函数，接受 `
84
85
JSX 非常小；上面“hello, world”的例子使用了 JSX 所有的特性。想要了解更多，请看 [深入理解 JSX](/react/docs/jsx-in-depth.html)。或者直接使用[在线 JSX 编译器](/react/jsx-compiler.html)观察变化过程。
86
83
-JSX 类似于 HTML，但不是完全一样。参考[JSX gotchas](/react/docs/jsx-gotchas.html) 学习关键区别。
87
+JSX 类似于 HTML，但不是完全一样。参考 [JSX 陷阱](/react/docs/jsx-gotchas.html) 学习关键区别。
88
89
最简单开始学习 JSX 的方法就是使用浏览器端的 `JSXTransformer`。我们强烈建议你不要在生产环境中使用它。你可以通过我们的命令行工具 [react-tools](http://npmjs.org/package/react-tools) 包来预编译你的代码。
90
+
91
+
92
+## 没有 JSX 的 React
93
+
94
+你完全可以选择是否使用 JSX，并不是 React 必须的。你可以通过 `React.createElement` 来创建一个树。第一个参数是标签，第二个参数是一个属性对象，每三个是子节点。
95
+
96
+```javascript
97
+var child = React.createElement('li', null, 'Text Content');
98
+var root = React.createElement('ul', { className: 'my-list' }, child);
99
+React.render(root, document.body);
100
+```
101
+
102
+方便起见，你可以创建基于自定义组件的速记工厂方法。
103
+
104
+```javascript
105
+var Factory = React.createFactory(ComponentClass);
106
+...
107
+var root = Factory({ custom: 'prop' });
108
+React.render(root, document.body);
109
+```
110
+
111
+React 已经为 HTML 标签提供内置工厂方法。
112
+
113
+```javascript
114
+var root = React.DOM.ul({ className: 'my-list' },
115
+ React.DOM.li(null, 'Text Content')
116
+ );
117
+```
docs/docs/02.1-jsx-in-depth.zh-CN.md
+9
-5
@@ -8,6 +8,7 @@ next: jsx-spread-zh-CN.html
8
9
[JSX](http://facebook.github.io/jsx/) 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。
10
11
+
12
## 为什么要用 JSX？
13
14
你不需要为了 React 使用 JSX，可以直接使用原生 JS。但是，我们建议使用 JSX 是因为它能精确，也是常用的定义包含属性的树状结构的语法。
@@ -18,9 +19,10 @@ XML 有固定的标签开启和闭合的优点。这能让复杂的树更易于
19
20
它没有修改 JavaScript 语义。
21
21
-## HTML 标签 对比 React 模块
22
23
-React 可以渲染 HTML 标签 (strings) 或 React 模块 (classes)。
23
+## HTML 标签对比 React 组件
24
+
25
+React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
26
27
要渲染 HTML 标签，只需在 JSX 里使用小写字母开头的标签名。
28
@@ -29,7 +31,7 @@ var myDivElement = <div className="foo" />;
31
React.render(myDivElement, document.body);
32
```
33
32
-要渲染 React 模块，只需创建一个大写字母开头的本地变量。
34
+要渲染 React 组件，只需创建一个大写字母开头的本地变量。
35
36
```javascript
37
var MyComponent = React.createClass({/*...*/});
@@ -37,13 +39,14 @@ var myElement = <MyComponent someProperty={true} />;
39
React.render(myElement, document.body);
40
```
41
40
-React 的 JSX 里约定分别使用首字母大、小写来区分本地模块的类和 HTML 标签。
42
+React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。
43
44
> 提示:
45
>
46
> 由于 JSX 就是 JavaScript，一些标识符像 `class` 和 `for` 不建议作为 XML
47
> 属性名。作为替代，React DOM 使用 `className` 和 `htmlFor` 来做对应的属性。
48
49
+
50
## 转换（Transform）
51
52
JSX 把类 XML 的语法转成原生 JavaScript，XML 元素、属性和子节点被转换成 `React.createElement` 的参数。
@@ -82,6 +85,7 @@ var app = React.createElement(
85
> 的模式是把 ReactElement 当作一个行内的对象字面量形式来绕过
86
> `React.createElement` 里的校验代码。
87
88
+
89
## JavaScript 表达式
90
91
### 属性表达式
@@ -133,4 +137,4 @@ var content = (
137
138
> 提示:
139
>
136
-> JSX 类似于 HTML，但不完全一样。参考 [JSX 陷阱](/react/docs/jsx-gotchas.html) 了解主要不同。
\ No newline at end of file
140
+> JSX 类似于 HTML，但不完全一样。参考 [JSX 陷阱](/react/docs/jsx-gotchas.html) 了解主要不同。
docs/docs/02.2-jsx-spread.zh-CN.md
+9
-6
@@ -1,17 +1,18 @@
1
---
2
id: jsx-spread-zh-CN
3
-title: JSX 展开属性 （Spread Attributes）
3
+title: JSX 展开属性
4
permalink: jsx-spread-zh-CN.html
5
prev: jsx-in-depth-zh-CN.html
6
next: jsx-gotchas-zh-CN.html
7
---
8
9
-如果你事先知道模块需要的全部 Props（属性），JSX 很容易地这样写：
9
+如果你事先知道组件需要的全部 Props（属性），JSX 很容易地这样写：
10
11
```javascript
12
var component = <Component foo={x} bar={y} />;
13
```
14
15
+
16
## 修改 Props 是不好的，明白吗
17
18
如果你不知道要设置哪些 Props，那么现在最好不要设置它：
@@ -26,9 +27,10 @@ next: jsx-gotchas-zh-CN.html
27
28
Props 应该被当作禁止修改的。修改 props 对象可能会导致预料之外的结果，所以最好不要去修改 props 对象。
29
29
-## 扩展属性 （Spread Attributes）
30
31
-现在你可以使用 JSX 的新特性 - 扩展属性：
31
+## 展开属性（Spread Attributes）
32
+
33
+现在你可以使用 JSX 的新特性 - 展开属性：
34
35
```javascript
36
var props = {};
@@ -37,7 +39,7 @@ Props 应该被当作禁止修改的。修改 props 对象可能会导致预料
39
var component = <Component {...props} />;
40
```
41
40
-传入对象的属性会被复制到模块内。
42
+传入对象的属性会被复制到组件内。
43
44
它能被多次使用，也可以和其它属性一起用。注意顺序很重要，后面的会覆盖掉前面的。
45
@@ -47,6 +49,7 @@ Props 应该被当作禁止修改的。修改 props 对象可能会导致预料
49
console.log(component.props.foo); // 'override'
50
```
51
52
+
53
## 这个奇怪的 `...` 标记是什么？
54
52
-这个 `...` 操作符（也被叫做）已经被 [ES6 数组](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator) 支持。相关的还有 ES7 规范草案中的 [Object 剩余和展开属性（Rest and Spread Properties）](https://github.com/sebmarkbage/ecmascript-rest-spread)。我们利用了这些还在制定中标准中已经被支持的特性来使 JSX 拥有更优雅的语法。
\ No newline at end of file
55
+这个 `...` 操作符（也被叫做）已经被 [ES6 数组](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator) 支持。相关的还有 ES7 规范草案中的 [Object 剩余和展开属性（Rest and Spread Properties）](https://github.com/sebmarkbage/ecmascript-rest-spread)。我们利用了这些还在制定中标准中已经被支持的特性来使 JSX 拥有更优雅的语法。
docs/docs/getting-started.zh-CN.md
+13
-7
@@ -1,19 +1,20 @@
1
---
2
id: getting-started-zh-CN
3
title: 入门教程
4
-next: tutorial.html
4
+next: tutorial-zh-CN.html
5
+redirect_from: "docs/index-zh-CN.html"
6
---
7
8
## JSFiddle
9
9
-开始 Hack React 的最简单的方法是用下面 JSFiddle 的Hello Worlds
10
+开始 Hack React 的最简单的方法是用下面 JSFiddle 的Hello Worlds：
11
12
* **[React JSFiddle](http://jsfiddle.net/reactjs/69z2wepo/)**
13
* [React JSFiddle without JSX](http://jsfiddle.net/reactjs/5vjqabv3/)
14
15
## 入门教程包 (Starter Kit)
16
16
-开始先下载入门教程包
17
+开始先下载入门教程包。
18
19
<div class="buttons-unit downloads">
20
<a href="/react/downloads/react-{{site.react_version}}.zip" class="button">
@@ -21,7 +22,7 @@ next: tutorial.html
22
</a>
23
</div>
24
24
-在入门教程包的根目录，创建一个含有下面代码的 `helloworld.html`
25
+在入门教程包的根目录，创建一个含有下面代码的 `helloworld.html`。
26
27
```html
28
<!DOCTYPE html>
@@ -93,7 +94,7 @@ React.render(
94
<head>
95
<title>Hello React!</title>
96
<script src="build/react.js"></script>
96
- <!-- No need for JSXTransformer! -->
97
+ <!-- 不需要 JSXTransformer！ -->
98
</head>
99
<body>
100
<div id="example"></div>
@@ -102,11 +103,16 @@ React.render(
103
</html>
104
```
105
106
+
107
## 想用 CommonJS？
108
107
-如果你想在一个模块系统里使用 React，[fork 我们的代码](http://github.com/facebook/react)， `npm install` 然后运行 `grunt`。一个漂亮的 CommonJS 模块集将会被生成。我们的 `jsx` 转换工具可以很轻松的集成到大部分打包系统里（不仅仅是 CommonJS）。
109
+如果你想在 [browserify](http://browserify.org/)，[webpack](http://webpack.github.io/) 或者或其它兼容CommonJS的模块系统里使用 React，只要使用 [`react` npm 包](https://www.npmjs.org/package/react) 即可。而且，`jsx` 转换工具可以很轻松的地集成到大部分打包系统里（不仅仅是 CommonJS）。
110
+
111
112
## 下一步
113
111
-去看看[入门教程](/react/docs/tutorial.html)，然后学习其他在 `/examples` 目录里的示例代码。祝你好运，欢迎来到 React 的世界。
114
+去看看[入门教程](/react/docs/tutorial.html) 和入门教程包 `examples` 目录下的其它例子学习更多。
115
+
116
+我们还有一个社区开发者共建的 Wiki：[workflows, UI-components, routing, data management etc.](https://github.com/facebook/react/wiki/Complementary-Tools)
117
118
+恭喜你，欢迎来到 React 的世界。