update Chinese docs to 0.14
WanderWang committed
Oct 19, 2015 at 00:34 UTC
1044d4c7d55f985f9d019655a6b60d403f7b2530
3 files changed
+49
-21
docs/docs/01-why-react.zh-CN.md
+2
-2
@@ -5,13 +5,13 @@ permalink: why-react-zh-CN.html
5
next: displaying-data-zh-CN.html
6
---
7
8
-React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很人多认为 React 是 **[MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)** 中的 **V**（视图）。
8
+React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很多人选择将 React 认为是 **[MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)** 中的 **V**（视图）。
9
10
我们创造 React 是为了解决一个问题：**构建随着时间数据不断变化的大规模应用程序**。
11
12
### 简单
13
14
-仅仅只要表达出你的应用程序在任一个时间点应该长的样子，然后当底层的数据变了，React 会自动处理所有用户界面的更新。
14
+仅仅只要表达出你的应用程序在任一个时间点应该呈现的样子，然后当底层的数据变了，React 会自动处理所有用户界面的更新。
15
16
### 声明式 (Declarative)
17
docs/docs/02-displaying-data.zh-CN.md
+9
-7
@@ -21,6 +21,7 @@ next: jsx-in-depth-zh-CN.html
21
<meta charset="UTF-8" />
22
<title>Hello React</title>
23
<script src="https://fb.me/react-{{site.react_version}}.js"></script>
24
+ <script src="https://fb.me/react-dom-{{site.react_version}}.js"></script>
25
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
26
</head>
27
<body>
@@ -95,16 +96,16 @@ JSX 非常小；上面“hello, world”的例子使用了 JSX 所有的特性
96
97
JSX 类似于 HTML，但不是完全一样。参考 [JSX 陷阱](/react/docs/jsx-gotchas-zh-CN.html) 学习关键区别。
98
98
-最简单开始学习 JSX 的方法就是使用浏览器端的 `JSXTransformer`。我们强烈建议你不要在生产环境中使用它。你可以通过我们的命令行工具 [react-tools](https://www.npmjs.com/package/react-tools) 包来预编译你的代码。
99
-
99
+[Babel 公开了一些使用 JSX 的方式],从命令行工具到 Ruby on Rails 集成。选择一个对你来说最合适的工具。
100
101
## 没有 JSX 的 React
102
103
-你完全可以选择是否使用 JSX，并不是 React 必须的。你可以通过 `React.createElement` 来创建一个树。第一个参数是标签，第二个参数是一个属性对象，每三个是子节点。
103
+JSX完全是可选的；你无需在 React 中必须使用 JSX。你可以通过 `React.createElement` 来创建一个树。第一个参数是标签，第二个参数是一个属性对象，每三个是子节点。
104
105
```javascript
106
-var child = React.createElement('li', null, 'Text Content');
107
-var root = React.createElement('ul', { className: 'my-list' }, child);
106
+var child1 = React.createElement('li', null, 'First Text Content');
107
+var child2 = React.createElement('li', null, 'Second Text Content');
108
+var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
109
ReactDOM.render(root, document.getElementById('example'));
110
```
111
@@ -121,6 +122,7 @@ React 已经为 HTML 标签提供内置工厂方法。
122
123
```javascript
124
var root = React.DOM.ul({ className: 'my-list' },
124
- React.DOM.li(null, 'Text Content')
125
-);
125
+ React.DOM.li(null, 'Text Content')
126
+ );
127
```
128
+
docs/docs/getting-started.zh-CN.md
+38
-12
@@ -13,9 +13,35 @@ redirect_from: "docs/index-zh-CN.html"
13
* **[React JSFiddle](https://jsfiddle.net/reactjs/69z2wepo/)**
14
* [React JSFiddle without JSX](https://jsfiddle.net/reactjs/5vjqabv3/)
15
16
-## 入门教程包 (Starter Kit)
16
18
-开始先下载入门教程包。
17
+## 通过 npm 使用 React
18
+
19
+我们建议在 React 中使用 CommonJS 模块系统，比如 [browserify](http://browserify.org/) 或 [webpack](https://webpack.github.io/)。使用 [`react`](https://www.npmjs.com/package/react) 和 [`react-dom`](https://www.npmjs.com/package/react-dom) npm 包.
20
+
21
+```js
22
+// main.js
23
+var React = require('react');
24
+var ReactDOM = require('react-dom');
25
+
26
+ReactDOM.render(
27
+ <h1>Hello, world!</h1>,
28
+ document.getElementById('example')
29
+);
30
+```
31
+
32
+
33
+在安装 browserify 之后安装 React DOM 和构建你的应用包。
34
+
35
+```sh
36
+$ npm install --save react react-dom
37
+$ browserify -t babelify main.js -o bundle.js
38
+```
39
+
40
+## 不使用 npm 快速开始
41
+
42
+
43
+If you're not ready to use npm yet, you can download the starter kit which includes prebuilt copies of React and React DOM.
44
+如果你没有做好使用 npm 的准备，你可以下载包含了 React 和 ReactDOM 预生成包的入门教程包。
45
46
<div class="buttons-unit downloads">
47
<a href="/react/downloads/react-{{site.react_version}}.zip" class="button">
@@ -23,7 +49,7 @@ redirect_from: "docs/index-zh-CN.html"
49
</a>
50
</div>
51
26
-在入门教程包的根目录，创建一个含有下面代码的 `helloworld.html`。
52
+在入门教程包的根目录，创建一个含有如下代码的 `helloworld.html`。
53
54
```html
55
<!DOCTYPE html>
@@ -32,6 +58,7 @@ redirect_from: "docs/index-zh-CN.html"
58
<meta charset="UTF-8" />
59
<title>Hello React!</title>
60
<script src="build/react.js"></script>
61
+ <script src="build/react-dom.js"></script>
62
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
63
</head>
64
<body>
@@ -46,7 +73,7 @@ redirect_from: "docs/index-zh-CN.html"
73
</html>
74
```
75
49
-在 JavaScript 代码里写着 XML 格式的代码称为 JSX；可以去 [JSX 语法](/react/docs/jsx-in-depth.html) 里学习更多 JSX 相关的知识。为了把 JSX 转成标准的 JavaScript，我们用 `<script type="text/jsx">` 标签包裹着含有 JSX 的代码，然后引入 `JSXTransformer.js` 库来实现在浏览器里的代码转换。
76
+在 JavaScript 代码里写着 XML 格式的代码称为 JSX；可以去 [JSX 语法](/react/docs/jsx-in-depth.html) 里学习更多 JSX 相关的知识。为了把 JSX 转成标准的 JavaScript，我们用 `<script type="text/babel">` 标签，并引入 Babel 来完成在浏览器里的代码转换。
77
78
### 分离文件
79
@@ -65,22 +92,25 @@ ReactDOM.render(
92
<script type="text/babel" src="src/helloworld.js"></script>
93
```
94
95
+注意一些浏览器（比如 Chrome ）会在使用 HTTP 以外的协议加载文件时失败。
96
+
97
### 离线转换
98
70
-先安装命令行工具（依赖 [npm](https://www.npmjs.com/)）：
99
+先安装[Babel](http://babeljs.io/)命令行工具（依赖 [npm](https://www.npmjs.com/)）：
100
101
```
73
-npm install -g react-tools
102
+npm install --global babel
103
```
104
105
然后把你的 `src/helloworld.js` 文件转成标准的 JavaScript:
106
107
```
79
-jsx --watch src/ build/
108
+babel src --watch --out-dir build
109
110
```
111
83
-只要你修改了， `build/helloworld.js` 文件会自动生成。
112
+`build/helloworld.js` 会在你对文件进行修改时自动生成。 阅读 [Babel CLI 文档](http://babeljs.io/docs/usage/cli/) 了解高级用法。
113
+
114
115
```javascript{2}
116
ReactDOM.render(
@@ -108,10 +138,6 @@ ReactDOM.render(
138
```
139
140
111
-## 想用 CommonJS？
112
-
113
-如果你想在 [browserify](http://browserify.org/)，[webpack](https://webpack.github.io/) 或者或其它兼容CommonJS的模块系统里使用 React，只要使用 [`react` npm 包](https://www.npmjs.com/package/react) 即可。而且，`jsx` 转换工具可以很轻松的地集成到大部分打包系统里（不仅仅是 CommonJS）。
114
-
141
142
## 下一步
143