@samitouri / QOS-React-2 / commits / badc15e3c0

update zh-docs (v0.14.3+)

iamchenxin committed Dec 24, 2015 at 13:57 UTC badc15e3c045a59adc3fe1acb76c7c98015e8927
17 files changed +1233 -94
.gitignore
+1
@@ -25,3 +25,4 @@ chrome-user-data
25 *.sublime-workspace
26 .idea
27 *.iml
28 +.vscode
docs/docs/10.10-shallow-compare.zh-CN.md new
+32
@@ -0,0 +1,32 @@
1 +---
2 +id: shallow-compare-zh-CN
3 +title: 浅比较
4 +permalink: shallow-compare-zh-CN.html
5 +prev: perf-zh-CN.html
6 +next: advanced-performance-zh-CN.html
7 +---
8 +
9 +`shallowCompare` 是一个辅助函数 在以ES6类使用React时，完成和 `PureRenderMixin` 相同的功能。
10 +
11 +如果你的React组件的绘制函数是 “干净的” （换句话说，它在给定的 props 和 state 下绘制相同的结果）,你可以使用这个辅助函数以在某些情况下提升性能。
12 +
13 +例如:
14 +
15 +```js
16 +var shallowCompare = require('react-addons-shallow-compare');
17 +export class SampleComponent extends React.Component {
18 + shouldComponentUpdate(nextProps, nextState) {
19 + return shallowCompare(this, nextProps, nextState);
20 + }
21 +
22 + render() {
23 + return <div className={this.props.className}>foo</div>;
24 + }
25 +}
26 +```
27 +
28 +`shallowCompare` 对当前的 `props` 和 `nextProps`对象 执行一个浅的相等检查，同样对于 `state` 和 `nextState`对象。
29 +它 通过迭代比较对象的keys 并在 对象的key值不严格相等时返回false 实现此功能.
30 +
31 +`shallowCompare` 返回 `true` 如果对 props 或 state的浅比较失败，因此组件应该更新。
32 +`shallowCompare` 返回 `false` 如果对 props 或 state的浅比较都通过了，因此组件不应该更新。
docs/docs/10.2-form-input-binding-sugar.zh-CN.md new
+117
@@ -0,0 +1,117 @@
1 +---
2 +id: two-way-binding-helpers-zh-CN
3 +title: 双向绑定辅助
4 +permalink: two-way-binding-helpers-zh-CN.html
5 +prev: animation-zh-CN.html
6 +next: test-utils-zh-CN.html
7 +---
8 +
9 +`ReactLink` 是一个用React表达双向绑定的简单方法。
10 +
11 +> 注意：
12 +>
13 +> 如果你刚学这个框架，注意 `ReactLink` 对大多数应用是不需要的，应该慎重的使用。
14 +
15 +在React里，数据单向流动： 从拥有者到子级。这是因为数据只单向流动[the Von Neumann model of computing](https://en.wikipedia.org/wiki/Von_Neumann_architecture)。你可以把它想象为 “单向数据绑定”。
16 +
17 +然而，有很多应用需要你去读某些数据并回流他们到你的程序。例如，当开发forms，你会常常想更新一些React `state` 当你收到用户输入的时候。或者也许你想在JavaScript完成布局并相应一些DOM元素大小的变化。
18 +
19 +在React里，你可以用监听 "change" 事件来实现它，从你的数据源（通常是DOM）读取并在你的某个组件调用 `setState()` 。明确的"Closing the data flow loop" 致使了更容易理解和维护的程序。更多信息见[our forms documentation](/react/docs/forms.html).
20 +
21 +双向绑定 -- 隐含的强迫DOM里的某些值总是和某些React `state` 同步 -- 简洁并支持大量多样的应用。 我们提供了 `ReactLink`：设置如上描述的通用数据回流模式的语法糖，或者 "linking" 某些数据结构到 React `state`.
22 +
23 +> 注意:
24 +>
25 +> `ReactLink` 只是一层对 `onChange`/`setState()` 模式的薄包装。它没有根本性的改变你的React应用里数据如何流动。
26 +
27 +## ReactLink: 之前和之后
28 +
29 +这里有一个简单的 不用 `ReactLink` 的 form 例子：
30 +
31 +```javascript
32 +var NoLink = React.createClass({
33 + getInitialState: function() {
34 + return {message: 'Hello!'};
35 + },
36 + handleChange: function(event) {
37 + this.setState({message: event.target.value});
38 + },
39 + render: function() {
40 + var message = this.state.message;
41 + return <input type="text" value={message} onChange={this.handleChange} />;
42 + }
43 +});
44 +```
45 +
46 +这个工作的很好并且数据如何流动很清晰，然而，当有大量的 form fields时，可能会有些冗长。让我们使用 `ReactLink` 来节省我们的输入：
47 +
48 +```javascript{4,9}
49 +var LinkedStateMixin = require('react-addons-linked-state-mixin');
50 +
51 +var WithLink = React.createClass({
52 + mixins: [LinkedStateMixin],
53 + getInitialState: function() {
54 + return {message: 'Hello!'};
55 + },
56 + render: function() {
57 + return <input type="text" valueLink={this.linkState('message')} />;
58 + }
59 +});
60 +```
61 +
62 +`LinkedStateMixin` 添加了一个 `linkState()` 方法到你的React组件。`linkState()` 返回一个 `ReactLink` 包含当前React state值的对象和一个改变它的回调函数。
63 +
64 +`ReactLink` 对象可以作为props在树中上下传递，所以很容易（显示的）在深层次的组件和高层次的state之间 设置双向绑定。
65 +
66 +注意 checkboxes 有一个关于他们 `value` 属性的特殊行为，这个行为是 如果checkbox被选中 值会在表单提交时被发送。 `value` 不会 checkbox 选中或是不选中时更新。对于checkboxes，你应该用`checkedLink` 代替 `valueLink`:
67 +```
68 +<input type="checkbox" checkedLink={this.linkState('booleanValue')} />
69 +```
70 +
71 +## 引擎盖下
72 +
73 +There are two sides to `ReactLink`: the place where you create the `ReactLink` instance and the place where you use it. To prove how simple `ReactLink` is, let's rewrite each side separately to be more explicit.
74 +
75 +### ReactLink Without LinkedStateMixin
76 +
77 +```javascript{5-7,9-12}
78 +var WithoutMixin = React.createClass({
79 + getInitialState: function() {
80 + return {message: 'Hello!'};
81 + },
82 + handleChange: function(newValue) {
83 + this.setState({message: newValue});
84 + },
85 + render: function() {
86 + var valueLink = {
87 + value: this.state.message,
88 + requestChange: this.handleChange
89 + };
90 + return <input type="text" valueLink={valueLink} />;
91 + }
92 +});
93 +```
94 +
95 +As you can see, `ReactLink` objects are very simple objects that just have a `value` and `requestChange` prop. And `LinkedStateMixin` is similarly simple: it just populates those fields with a value from `this.state` and a callback that calls `this.setState()`.
96 +
97 +### ReactLink Without valueLink
98 +
99 +```javascript
100 +var LinkedStateMixin = require('react-addons-linked-state-mixin');
101 +
102 +var WithoutLink = React.createClass({
103 + mixins: [LinkedStateMixin],
104 + getInitialState: function() {
105 + return {message: 'Hello!'};
106 + },
107 + render: function() {
108 + var valueLink = this.linkState('message');
109 + var handleChange = function(e) {
110 + valueLink.requestChange(e.target.value);
111 + };
112 + return <input type="text" value={valueLink.value} onChange={handleChange} />;
113 + }
114 +});
115 +```
116 +
117 +The `valueLink` prop is also quite simple. It simply handles the `onChange` event and calls `this.props.valueLink.requestChange()` and also uses `this.props.valueLink.value` instead of `this.props.value`. That's it!
docs/docs/10.3-class-name-manipulation.zh-CN.md new
+11
@@ -0,0 +1,11 @@
1 +---
2 +id: class-name-manipulation-zh-CN
3 +title: 类名操纵
4 +permalink: class-name-manipulation-zh-CN.html
5 +prev: two-way-binding-helpers-zh-CN.html
6 +next: test-utils-zh-CN.html
7 +---
8 +
9 +> NOTE:
10 +>
11 +> 此模块已被弃用; 用 [JedWatson/classnames](https://github.com/JedWatson/classnames) 替代.
docs/docs/12-context.zh-CN.md new
+173
@@ -0,0 +1,173 @@
1 +---
2 +id: context-zh-CN
3 +title: Context
4 +permalink: context-zh-CN.html
5 +prev: advanced-performance-zh-CN.html
6 +---
7 +
8 +React最大的优势之一是他很容易从你的React组件里跟踪数据流动。当你看着一个组件，你可以很容易准确看出哪个props被传入，这让你的APP很容易推断。
9 +
10 +偶尔，你想通过组件树传递数据，而不在每一级上手工下传prop，React的 "context" 让你做到这点。
11 +
12 +＞　注意：
13 +＞　
14 +＞　Context是一个先进的实验性特性．这个 API 很可能在未来版本变化.
15 +>
16 +> 大多数应用将不会需要用到 context. 尤其是如果你刚开始用React,你很可能不会想用 context.使用 context 将会使你的代码很难理解因为它让数据流不清晰.它类似于在你的应用里使用全局变量传递state.
17 +>
18 +> **如果你必须使用 context ,保守的使用它**
19 +>
20 +> 不论你正在创建一个应用或者是库,试着分离你对 context 的使用到一个小区域,并尽可能避免直接使用 context API,以便在API变动时容易升级.
21 +
22 +## 从树里自动传递info
23 +
24 +假设你有一个这样的结构:
25 +
26 +```javascript
27 +var Button = React.createClass({
28 + render: function() {
29 + return (
30 + <button style={{'{{'}}background: this.props.color}}>
31 + {this.props.children}
32 + </button>
33 + );
34 + }
35 +});
36 +
37 +var Message = React.createClass({
38 + render: function() {
39 + return (
40 + <div>
41 + {this.props.text} <Button color={this.props.color}>Delete</Button>
42 + </div>
43 + );
44 + }
45 +});
46 +
47 +var MessageList = React.createClass({
48 + render: function() {
49 + var color = "purple";
50 + var children = this.props.messages.map(function(message) {
51 + return <Message text={message.text} color={color} />;
52 + });
53 + return <div>{children}</div>;
54 + }
55 +});
56 +```
57 +
58 +在这里例子里,我们手工穿透一个 `color` prop 以便于恰当格式化 `Button` 和 `Message` 组件.主题是一个很好的例子,当你可能想整个子树都可以访问一部分信息时(比如color). 使用 context 我们可以自动传过这个树:
59 +
60 +```javascript{2-4,7,18,25-30,33}
61 +var Button = React.createClass({
62 + contextTypes: {
63 + color: React.PropTypes.string
64 + },
65 + render: function() {
66 + return (
67 + <button style={{'{{'}}background: this.context.color}}>
68 + {this.props.children}
69 + </button>
70 + );
71 + }
72 +});
73 +
74 +var Message = React.createClass({
75 + render: function() {
76 + return (
77 + <div>
78 + {this.props.text} <Button>Delete</Button>
79 + </div>
80 + );
81 + }
82 +});
83 +
84 +var MessageList = React.createClass({
85 + childContextTypes: {
86 + color: React.PropTypes.string
87 + },
88 + getChildContext: function() {
89 + return {color: "purple"};
90 + },
91 + render: function() {
92 + var children = this.props.messages.map(function(message) {
93 + return <Message text={message.text} />;
94 + });
95 + return <div>{children}</div>;
96 + }
97 +});
98 +```
99 +
100 +通过添加 `childContextTypes` 和 `getChildContext` 到 `MessageList` ( context 提供),React下传信息到子树中的任何组件(在这个例子中, `Button`可以由定义 `contextTypes`来访问它).
101 +
102 +如果 `contextTypes` 没有定义,那么 `this.context` 将是一个空对象.
103 +
104 +## 父子耦合
105 +
106 +Context 同样可以使你构建这样的 APT:
107 +
108 +```javascript
109 +<Menu>
110 + <MenuItem>aubergine</MenuItem>
111 + <MenuItem>butternut squash</MenuItem>
112 + <MenuItem>clementine</MenuItem>
113 +</Menu>
114 +```
115 +
116 +通过在 `Menu` 组件下传相关的信息,每个 `MenuItem` 可以与包含他们的 `Menu` 组件沟通.
117 +
118 +**在你用这个API构建组件以前,考虑一下是否有清晰的替代方案** 我们 喜欢像这样简单的用数组传递items:
119 +
120 +```javascript
121 +<Menu items={['aubergine', 'butternut squash', 'clementine']} />
122 +```
123 +
124 +记住你同样可以在props里传递整个React组件,如果你想.
125 +
126 +## 在生命周期方法里引用 context
127 +
128 +如果 `contextTypes` 在一个组件中定义,接下来的生命周期方法会收到一个额外的参数, `context` 对象:
129 +
130 +```javascript
131 +void componentWillReceiveProps(
132 + object nextProps, object nextContext
133 +)
134 +
135 +boolean shouldComponentUpdate(
136 + object nextProps, object nextState, object nextContext
137 +)
138 +
139 +void componentWillUpdate(
140 + object nextProps, object nextState, object nextContext
141 +)
142 +
143 +void componentDidUpdate(
144 + object prevProps, object prevState, object prevContext
145 +)
146 +```
147 +
148 +## 在无状态函数组件里引用 context
149 +
150 +无状态函数同样能够引用 `context` 如果 `contextTypes` 被定义为函数的属性.下面的代码展示了被写为无状态函数组件的 `Button` 组件.
151 +
152 +```javascript
153 +function Button(props, context) {
154 + return (
155 + <button style={{'{{'}}background: context.color}}>
156 + {props.children}
157 + </button>
158 + );
159 +}
160 +Button.contextTypes = {color: React.PropTypes.string};
161 +```
162 +
163 +## 什么时候不用 context
164 +
165 +正像全局变量是在写清晰代码时最好要避免的,你应该在大多数情况下避免使用context. 特别是,在用它来"节省输入"和代替显示传入props时要三思.
166 +
167 +context最好的使用场景是隐式的传入登录的用户,当前的语言,或者主题信息.要不然所有这些可能就是全局变量,但是context让你限定他们到一个单独的React树里.
168 +
169 +不要用context在组件里传递你的模型数据.通过树显示的传递你的数据更容易理解.使用context使你的组件更耦合和不可复用,因为 依赖于他们在哪里渲染,他们会表现不同的行为.
170 +
171 +## 已知的限制
172 +
173 +如果一个由组件提供的context值变动,使用那个值的子级不会更新,如果一个直接的父级从 `shouldComponentUpdate` 返回 `false` .详见 issue [#2517](https://github.com/facebook/react/issues/2517) .
docs/docs/conferences.zh-CN.md new
+29
@@ -0,0 +1,29 @@
1 +---
2 +id: conferences-zh-CN
3 +title: 会议
4 +permalink: conferences-zh-CN.html
5 +prev: thinking-in-react-zh-CN.html
6 +next: videos-zh-CN.html
7 +---
8 +
9 +### React.js Conf 2015
10 +一月 28 & 29
11 +
12 +[Website](http://conf.reactjs.com/) - [Schedule](http://conf.reactjs.com/schedule.html) - [Videos](https://www.youtube-nocookie.com/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr)
13 +
14 +<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/KVZ-P-ZI6W4?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe>
15 +
16 +### ReactEurope 2015
17 +七月 2 & 3
18 +
19 +[Website](http://www.react-europe.org/) - [Schedule](http://www.react-europe.org/#schedule)
20 +
21 +### Reactive 2015
22 +十一月 2-4
23 +
24 +[Website](https://reactive2015.com/) - [Schedule](https://reactive2015.com/schedule_speakers.html#schedule)
25 +
26 +### ReactEurope 2016
27 +六月 2 & 3
28 +
29 +[Website](http://www.react-europe.org/) - [Schedule](http://www.react-europe.org/#schedule)
docs/docs/getting-started.zh-CN.md
+27 -17
@@ -13,7 +13,6 @@ 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 -
16 ## 通过 npm 使用 React
17
18 我们建议在 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 包.
@@ -29,23 +28,32 @@ ReactDOM.render(
28 );
29 ```
30
31 +要用 browserify 安装 React DOM 和构建你的包。
32 +
33 +```sh
34 +$ npm install --save react react-dom babelify babel-preset-react
35 +$ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js
36 +```
37
33 -在安装 browserify 之后安装 React DOM 和构建你的应用包。
38 +要用 webpack 安装 React DOM 和构建你的包:
39
40 ```sh
36 -$ npm install --save react react-dom
37 -$ browserify -t babelify main.js -o bundle.js
41 +$ npm install --save react react-dom babel-preset-react
42 +$ webpack
43 ```
44
40 -## 不使用 npm 快速开始
45 +> 注意:
46 +>
47 +> 如果你正在使用 ES2015, 你将要使用 `babel-preset-es2015` 包.
48 +
49
50 +## 不用 npm 的快速开始
51
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 预生成包的入门教程包。
52 +如果你现在还没准备要使用npm,你可以下载这个已经包含了预构建的 React 和 React DOM 拷贝的入门套件.
53
54 <div class="buttons-unit downloads">
55 <a href="/react/downloads/react-{{site.react_version}}.zip" class="button">
48 - 下载入门教程 {{site.react_version}}
56 + 下载入门套件 {{site.react_version}}
57 </a>
58 </div>
59
@@ -96,21 +104,24 @@ ReactDOM.render(
104
105 ### 离线转换
106
99 -先安装[Babel](http://babeljs.io/)命令行工具（依赖 [npm](https://www.npmjs.com/)）：
107 +先安装[Babel](http://babeljs.io/)命令行工具（需要 [npm](https://www.npmjs.com/)）：
108
109 ```
102 -npm install --global babel
110 +npm install --global babel-cli
111 +npm install babel-preset-react
112 ```
113
114 然后把你的 `src/helloworld.js` 文件转成标准的 JavaScript:
115
116 ```
108 -babel src --watch --out-dir build
109 -
117 +babel --presets react src --watch --out-dir build
118 ```
119
112 -`build/helloworld.js` 会在你对文件进行修改时自动生成。 阅读 [Babel CLI 文档](http://babeljs.io/docs/usage/cli/) 了解高级用法。
120 +> 注意:
121 +>
122 +> 如果你正在使用 ES2015, 你将需要使用 `babel-preset-es2015` 包.
123
124 +`build/helloworld.js` 会在你对文件进行修改时自动生成。 阅读 [Babel CLI 文档](http://babeljs.io/docs/usage/cli/) 了解高级用法。
125
126 ```javascript{2}
127 ReactDOM.render(
@@ -121,14 +132,15 @@ ReactDOM.render(
132
133 对照下面更新你的 HTML 代码
134
124 -```html{7,11}
135 +```html{8,12}
136 <!DOCTYPE html>
137 <html>
138 <head>
139 <meta charset="UTF-8" />
140 <title>Hello React!</title>
141 <script src="build/react.js"></script>
131 - <!-- 不需要 Babel！ -->
142 + <script src="build/react-dom.js"></script>
143 + <!-- 不需要 Babel! -->
144 </head>
145 <body>
146 <div id="example"></div>
@@ -137,8 +149,6 @@ ReactDOM.render(
149 </html>
150 ```
151
140 -
141 -
152 ## 下一步
153
154 去看看[入门教程](/react/docs/tutorial.html) 和入门教程包 `examples` 目录下的其它例子学习更多。
docs/docs/ref-01-top-level-api.zh-CN.md
+78 -58
@@ -69,123 +69,143 @@ factoryFunction createFactory(
69 返回一个生成给定类型的 ReactElements 的函数。如同 `React.createElement`，type 参数既可以是一个 html 标签名字符串（例如. “div”，“span”，等等），也可以是一个 `ReactClass` 。
70
71
72 -
73 -
74 -### React.render
72 +### React.isValidElement
73
74 ```javascript
77 -ReactComponent render(
78 - ReactElement element,
79 - DOMElement container,
80 - [function callback]
81 -)
75 +boolean isValidElement(* object)
76 ```
77
84 -渲染一个 ReactElement 到 DOM 里提供的 `容器（container）`中，并返回一个对组件的引用。
78 +验证对象是否是一个 ReactElement。
79
86 -如果 ReactElement 之前被渲染到了 `container` 中，这将对它执行一次更新，并仅变动需要变动的 DOM 来反映最新的 React 组件。
80
88 -如果提供了可选的回调函数，则该函数将会在组件渲染或者更新之后被执行。
81 +### React.DOM
82
90 -> 注意:
91 ->
92 -> `React.render()` 控制你传入的 container 节点的内容。
93 -> 当初次调用时，任何现存于内的 DOM 元素将被替换。
94 -> 其后的调用使用 React的 diffing 算法来有效率的更新。
95 ->
96 -> `React.render()` 不会修改 container 节点（只修改 container 的子级）。
97 -> 将来，也许能够直接插入一个组件到已经存在的 DOM 节点而不覆盖
98 -> 现有的子级。
83 +`React.DOM` 用 `React.createElement` 为 DOM 组件提供了便利的包装器。该方式应该只在不使用 JSX 的时使用。例如，`React.DOM.div(null, 'Hello World!')`。
84
85
101 -### React.unmountComponentAtNode
86 +### React.PropTypes
87
103 -```javascript
104 -boolean unmountComponentAtNode(DOMElement container)
105 -```
88 +`React.PropTypes` 包含了能与 组件的`propTypes` 对象一起使用的类型，用以验证传入你的组件的 props。更多有关 `propTypes` 的信息，请见 [可重用组件](/react/docs/reusable-components-zh-CN.html)。
89
107 -从 DOM 中移除已经挂载的 React 组件，并清除它的事件处理器和 state。如果在 container 中没有组件被挂载，调用此函数将什么都不做。如果组件被卸载返回 `true`，如果没有组件被卸载返回 `false`。
90
91 +### React.Children
92
110 -### React.renderToString
93 +`React.Children` 为处理 `this.props.children` 这个不透明的数据结构提供了工具。
94 +
95 +#### React.Children.map
96
97 ```javascript
113 -string renderToString(ReactElement element)
98 +array React.Children.map(object children, function fn [, object thisArg])
99 ```
100
116 -把 ReactElement 渲染为它原始的 HTML 。这应该仅在服务器端使用。React 将会返回一个 HTML 字符串。你可以用这种方法在服务器端生成 HTML，然后在初始请求下传这些标记，以获得更快的页面加载速度及允许搜索引擎抓取页面（便于 SEO）。
101 +在每一个包含在 `children` 中的直接子级上调用 `fn` ，`fn`中的 `this` 设置为 `thisArg`。如果 `children` 是一个嵌套的对象或者数组，它将被遍历：不会传入容器对象到 `fn` 中。如果 children 是 `null` 或者 `undefined`，则返回 `null` 或者 `undefined` 而不是一个空数组。
102
118 -如果在一个在已经有了这种服务器预渲染标记的节点上面调用 `React.render()`，React 将会维护该节点，仅绑定事件处理器，让你有一个非常高效的初次加载体验。
103 +#### React.Children.forEach
104
105 +```javascript
106 +React.Children.forEach(object children, function fn [, object thisArg])
107 +```
108
121 -### React.renderToStaticMarkup
109 +类似 `React.Children.map()`，但是不返回数组。
110 +
111 +#### React.Children.count
112
113 ```javascript
124 -string renderToStaticMarkup(ReactElement element)
114 +number React.Children.count(object children)
115 ```
116
127 -类似于 `renderToString` ，除了不创建额外的 DOM 属性，比如 `data-react-id`，这仅在 React 内部使用的属性。如果你想用 React 做一个简单的静态页面生成器，这是很有用的，因为去除额外的属性能够节省很多字节。
128 -
117 +返回 `children` 中的组件总数，相等于传递给 `map` 或者 `forEach` 的回调函数应被调用次数。
118
130 -### React.isValidElement
119 +#### React.Children.only
120
121 ```javascript
133 -boolean isValidElement(* object)
122 +object React.Children.only(object children)
123 ```
124
136 -验证对象是否是一个 ReactElement。
137 -
125 +返回 `children` 中仅有的子级。否则抛出异常。
126
139 -### React.findDOMNode
127 +#### React.Children.toArray
128
129 ```javascript
142 -DOMElement findDOMNode(ReactComponent component)
130 +array React.Children.toArray(object children)
131 ```
144 -如果这个组件已经被挂载到了 DOM，它返回相应的浏览器原生的 DOM 元素。这个方法对于读取 DOM 的值很有用，比如表单域的值和执行 DOM 的测量。如果 `render` 返回 `null` 或者 `false`， `findDOMNode` 返回 `null`.
132
133 +以赋key给每个child的平坦的数组形式,返回不透明的 `children` 数据结构.如果你想操纵你的渲染方法的子级的合集这很有用,尤其如果你想在 `this.props.children` 传下之前渲染或者切割.
134
147 -### React.DOM
135 +## ReactDOM
136
149 -`React.DOM` 用 `React.createElement` 为 DOM 组件提供了便利的包装器。该方式应该只在不使用 JSX 的时使用。例如，`React.DOM.div(null, 'Hello World!')`。
137 +`react-dom` 包提供了 具体的DOM方法,这些方法可以在你的app的顶层作为一个你需要时脱离React模式的安全舱口 被使用.你的大多数组件不需要使用这个模块.
138
139 +### ReactDOM.render
140
152 -### React.PropTypes
141 +```javascript
142 +ReactComponent render(
143 + ReactElement element,
144 + DOMElement container,
145 + [function callback]
146 +)
147 +```
148
154 -`React.PropTypes` 包含了能与 组件的`propTypes` 对象一起使用的类型，用以验证传入你的组件的 props。更多有关 `propTypes` 的信息，请见 [可重用组件](/react/docs/reusable-components-zh-CN.html)。
149 +渲染一个 ReactElement 到 DOM 里提供的 `容器（container）`中，并返回一个对 组件(或者返回 `null` 对于 [无状态组件](/react/docs/reusable-components.html#stateless-functions)) 的[引用](/react/docs/more-about-refs.html)
150
151 +如果 ReactElement 之前被渲染到了 `container` 中，这将对它执行一次更新，并仅变动需要变动的 DOM 来反映最新的 React 组件。
152
157 -### React.Children
153 +如果提供了可选的回调函数，则该函数将会在组件渲染或者更新之后被执行。
154
159 -`React.Children` 为处理 `this.props.children` 这个不透明的数据结构提供了工具。
155 +> 注意:
156 +>
157 +> `ReactDOM.render()` 控制你传入的 container 节点的内容。
158 +> 当初次调用时，任何现存于内的 DOM 元素将被替换。
159 +> 其后的调用使用 React的 diffing 算法来有效率的更新。
160 +>
161 +> `ReactDOM.render()` 不会修改 container 节点（只修改 container 的子级）。
162 +> 将来，也许能够直接插入一个组件到已经存在的 DOM 节点而不覆盖
163 +> 现有的子级。
164
161 -#### React.Children.map
165 +
166 +### ReactDOM.unmountComponentAtNode
167
168 ```javascript
164 -object React.Children.map(object children, function fn [, object thisArg])
169 +boolean unmountComponentAtNode(DOMElement container)
170 ```
171
167 -在每一个包含在 `children` 中的直接子级上调用 `fn` ，`fn`中的 `this` 设置为 `thisArg`。如果 `children` 是一个嵌套的对象或者数组，它将被遍历：不会传入容器对象到 `fn` 中。如果 children 是 `null` 或者 `undefined`，则返回 `null` 或者 `undefined` 而不是一个空对象。
172 +从 DOM 中移除已经挂载的 React 组件，并清除它的事件处理器和 state。如果在 container 中没有组件被挂载，调用此函数将什么都不做。如果组件被卸载返回 `true`，如果没有组件被卸载返回 `false`。
173
169 -#### React.Children.forEach
174 +
175 +### ReactDOM.findDOMNode
176
177 ```javascript
172 -React.Children.forEach(object children, function fn [, object thisArg])
178 +DOMElement findDOMNode(ReactComponent component)
179 ```
180 +如果这个组件已经被挂载到了 DOM，它返回相应的浏览器原生的 DOM 元素。这个方法对于读取 DOM 的值很有用，比如表单域的值和执行 DOM 的测量。**在大多数情况下,你可以连接一个ref到DOM节点上,并避免使用 `findDOMNode`** 如果 `render` 返回 `null` 或者 `false`， `findDOMNode` 返回 `null`.
181
175 -类似 `React.Children.map()`，但是不返回对象。
182 +> 注意:
183 +>
184 +> `findDOMNode()` 是一个用来访问底层DOM节点的安全舱口.大多数情况下,使用这个安全舱口是不被鼓励的,因为它穿破了组件的抽象.
185 +>
186 +> `findDOMNode()` 只在已挂载的组件上工作(即是,已经被放置到DOM里的组件).如果你尝试在没有被挂载的组件上调用这个方法(比如在 一个没有被创建的组件的`render()`里 调用 `findDOMNode()` )会抛出一个异常.
187 +>
188 +> `findDOMNode()` 不能用在无状态组件.
189
177 -#### React.Children.count
190 +## ReactDOMServer
191 +
192 +`react-dom/server` 允许你在服务器上渲染你的组件.
193 +
194 +### ReactDOMServer.renderToString
195
196 ```javascript
180 -number React.Children.count(object children)
197 +string renderToString(ReactElement element)
198 ```
199
183 -返回 `children` 中的组件总数，相等于传递给 `map` 或者 `forEach` 的回调函数应被调用次数。
200 +把 ReactElement 渲染为它原始的 HTML 。这应该仅在服务器端使用。React 将会返回一个 HTML 字符串。你可以用这种方法在服务器端生成 HTML，然后在初始请求下传这些标记，以获得更快的页面加载速度及允许搜索引擎抓取页面（便于 SEO）。
201
185 -#### React.Children.only
202 +如果在一个在已经有了这种服务器预渲染标记的节点上面调用 `ReactDOM.render()`，React 将会维护该节点，仅绑定事件处理器，让你有一个非常高效的初次加载体验。
203 +
204 +
205 +### ReactDOMServer.renderToStaticMarkup
206
207 ```javascript
188 -object React.Children.only(object children)
208 +string renderToStaticMarkup(ReactElement element)
209 ```
210
191 -返回 `children` 中仅有的子级。否则抛出异常。
211 +类似于 `renderToString` ，除了不创建额外的 DOM 属性，比如 `data-react-id`，这仅在 React 内部使用的属性。如果你想用 React 做一个简单的静态页面生成器，这是很有用的，因为去除额外的属性能够节省很多字节。
docs/docs/ref-02-component-api.zh-CN.md
+15 -15
@@ -8,13 +8,13 @@ next: component-specs-zh-CN.html
8
9 ## React.Component
10
11 -当渲染时，React 组件的实例在 React 内部被创建。这些实例在随后的渲染中被重复使用，并可以在组件方法中通过 `this` 访问。唯一的在 React 之外获取 React 组件实例句柄的方法是保存 `React.render` 的返回值。在其它组件内，你可以使用 [refs](/react/docs/more-about-refs-zh-CN.html) 得到相同的结果。
11 +当渲染时，React 组件的实例在 React 内部被创建。这些实例在随后的渲染中被重复使用，并可以在组件方法中通过 `this` 访问。唯一的在 React 之外获取 React 组件实例句柄的方法是保存 `ReactDOM.render` 的返回值。在其它组件内，你可以使用 [refs](/react/docs/more-about-refs-zh-CN.html) 得到相同的结果。
12
13
14 ### setState
15
16 ```javascript
17 -setState(
17 +void setState(
18 function|object nextState,
19 [function callback]
20 )
@@ -29,7 +29,7 @@ setState(
29 setState({mykey: 'my new value'});
30 ```
31
32 -也可以以 `function(state, props)` 传递一个函数。当你想要把一个在设置任何值之前参考前一次 state+props 的值的原子更新放在队列中 这会有很用。例如，假如我们想在 state 增加一个值。
32 +也可以以 `function(state, props)` 传递一个函数。当你想要把一个在设置任何值之前参考前一次 state+props 的值的原子更新放在队列中 这会有很用。例如，假如我们想在 state 增加一个值:
33
34 ```javascript
35 setState(function(previousState, currentProps) {
@@ -53,7 +53,7 @@ setState(function(previousState, currentProps) {
53 ### replaceState
54
55 ```javascript
56 -replaceState(
56 +void replaceState(
57 object nextState,
58 [function callback]
59 )
@@ -69,7 +69,7 @@ replaceState(
69 ### forceUpdate
70
71 ```javascript
72 -forceUpdate(
72 +void forceUpdate(
73 [function callback]
74 )
75 ```
@@ -91,7 +91,7 @@ DOMElement getDOMNode()
91
92 > Note:
93 >
94 -> getDOMNode 被废弃了，已经被 [React.findDOMNode()] 替换(/react/docs/top-level-api-zh-CN.html#react.finddomnode).
94 +> getDOMNode 被废弃了，已经被 [ReactDOM.findDOMNode()] 替换(/react/docs/top-level-api-zh-CN.html#reactdom.finddomnode).
95 >
96 > 这个方法在从 `React.Component` 扩展的 ES6 `class` 组件里不可用。它也许会在未来的 React 版本中被完全移除。
97
@@ -99,41 +99,41 @@ DOMElement getDOMNode()
99 ### isMounted
100
101 ```javascript
102 -bool isMounted()
102 +boolean isMounted()
103 ```
104
105 如果组件渲染到了 DOM 中，`isMounted()` 返回 true，否则返回 `false`。可以使用该方法来控制对 `setState()` 和 `forceUpdate()` 的异步调用。
106
107 > 注意:
108 >
109 -> 这个方法在从 `React.Component` 扩展的 ES6 `class` 组件里不可用。它也许会在未来的 React 版本中被完全移除。
109 +> 这个方法在从 `React.Component` 扩展的 ES6 `class` 组件里不可用。它也许会在未来的 React 版本中被完全移除,所以你也要移除它 [start migrating away from isMounted() now](/react/blog/2015/12/16/ismounted-antipattern.html)
110
111
112 ### setProps
113
114 ```javascript
115 -setProps(
115 +void setProps(
116 object nextProps,
117 [function callback]
118 )
119 ```
120
121 -当和一个外部的 JavaScript 应用整合的时候，你也许会想用 `React.render()` 给 React 组件标示一个改变。
121 +当和一个外部的 JavaScript 应用整合的时候，你也许会想用 `ReactDOM.render()` 给 React 组件标示一个改变。
122
123 在根组件上调用 `setProps()` 会改变他的属性并触发一次重绘。另外，你可以提供一个可选的回调函数，一旦 `setProps` 完成并且组件被重绘它就执行。
124
125 > 注意:
126 >
127 -> 如果可能，上述的在同一个节点上再次调用 `React.render()` 的方法是优先替代的。它往往使更新更容易理解。（两种方法并没有显著的性能区别。）
127 +> 这个方法被弃用了并会很快移除.这个方法在从 `React.Component` 扩展的 ES6 `class` 组件里不可用. 取代调用 `setProps`,试着以新的 props 再次调用 `ReactDOM.render()`. 更多的注意事项,见我们的[blog post about using the Top Level API](/react/blog/2015/10/01/react-render-and-top-level-api.html)
128 >
129 -> 这个方法仅能在根组件上被调用。也就是说，它仅在直接传给 `React.render()` 的组件上可用，在它的子级上不可用。如果你倾向于在子组件上使用 `setProps()`，不要利用响应式更新，而是当子组件在 `render()` 中创建的时候传入新的 prop 到子组件中。
129 +> 如果可能，上述的在同一个节点上再次调用 `ReactDOM.render()` 的方法是优先替代的。它往往使更新更容易理解。（两种方法并没有显著的性能区别。）
130 >
131 -> 这个方法在从 `React.Component` 扩展的 ES6 `class` 组件里不可用。它也许会在未来的 React 版本中被完全移除。
131 +> 这个方法仅能在根组件上被调用。也就是说，它仅在直接传给 `ReactDOM.render()` 的组件上可用，在它的子级上不可用。如果你倾向于在子组件上使用 `setProps()`，不要利用响应式更新，而是当子组件在 `render()` 中创建的时候传入新的 prop 到子组件中。
132
133 ### replaceProps
134
135 ```javascript
136 -replaceProps(
136 +void replaceProps(
137 object nextProps,
138 [function callback]
139 )
@@ -143,4 +143,4 @@ replaceProps(
143
144 > 注意:
145 >
146 -> 这个方法在从 `React.Component` 扩展的 ES6 `class` 组件里不可用。它也许会在未来的 React 版本中被完全移除。
146 +> 这个方法被弃用了并会很快移除.这个方法在从 `React.Component` 扩展的 ES6 `class` 组件里不可用. 取代调用 `replaceProps`,试着以新的 props 再次调用 `ReactDOM.render()`. 更多的注意事项,见我们的[blog post about using the Top Level API](/react/blog/2015/10/01/react-render-and-top-level-api.html)
docs/docs/ref-03-component-specs.zh-CN.md new
+217
@@ -0,0 +1,217 @@
1 +---
2 +id: component-specs-zh-CN
3 +title: 组件的规范和生命周期
4 +permalink: component-specs-zh-CN.html
5 +prev: component-api-zh-CN.html
6 +next: tags-and-attributes-zh-CN.html
7 +---
8 +
9 +## 组件规范(Specifications)
10 +
11 +当调用 `React.createClass()` 创建一个组件类时,你应该提供一个包含有 `render` 方法以及可选的其他生命周期方法的 规范(Specifications)对象.
12 +
13 +> 注意:
14 +>
15 +> 同样可以使用单纯的 JavaScript 类作为组件类. 这些类可以实现大多数相同的方法,虽然有一些不同.更多关于不同的信息,请阅读我们关于[ES6 classes](/react/docs/reusable-components.html#es6-classes)的文档.
16 +
17 +### render
18 +
19 +```javascript
20 +ReactElement render()
21 +```
22 +
23 + `render()` 是必须的
24 +
25 + 当被调用时,它应该检查 `this.props` 和 `this.state` 并返回单个子元素.这个子元素即可以是一个 对原生DOM的虚拟表达(比如 `<div />` 或 `React.DOM.div()`)也可以是其他你自定义的复合组件.
26 +
27 + 你也可以返回 `null` 或 `false` 来指示你不想要任何东西被渲染.幕后,React 渲染一个 `<noscript>` tag 来与我们当前的diffing算法协同工作.当返回 `null` 或 `false` ,`ReactDOM.findDOMNode(this)` 会返回 `null`.
28 +
29 + `render()` 函数应该是纯净的,意味着它不改变组件的状态,它在每次调用时返回相同的结果,并且它不读和写 DOM 或者其他方式与浏览器互动(例如,使用 `setTimeout`).如果你需要与浏览器互动,在 `componentDidMount()` 里执行你的工作,或者其他生命周期方法里.保持 `render()` 纯净使服务器渲染更实用并且让组件更容易被思考.
30 +
31 +
32 + ### getInitialState
33 +
34 + ```javascript
35 +object getInitialState()
36 +```
37 +
38 +当组件被挂载时调用一次.返回值会被用作为 `this.state` 的初始值.
39 +
40 +
41 +### getDefaultProps
42 +
43 +```javascript
44 +object getDefaultProps()
45 +```
46 +
47 +在类被创建时调用一次并被缓存.在这个mapping里的值会被设置给 `this.props` 如果父组件没有指定对应的 prop (例如 使用一个 `in` 检查).
48 +
49 +这个方法在任何实例被创建之前调用,因此不能依赖于 `this.props`.另外,小心,任何被 `getDefaultProps()`返回的复杂对象会被跨实例共享,而不是被拷贝.
50 +
51 +
52 +### propTypes
53 +
54 +```javascript
55 +object propTypes
56 +```
57 +
58 + `propTypes` 对象允许你验证传递到你的组建的 props.更多关于 `propTypes` 的信息,见 [Reusable Components](/react/docs/reusable-components.html).
59 +
60 +
61 +### mixins
62 +
63 +```javascript
64 +array mixins
65 +```
66 +
67 + `mixins` 数组允许你用 mixins 来在多个组件间共享行为.更多关于 mixins 的信息,见 [Reusable Components](/react/docs/reusable-components.html).
68 +
69 +
70 +### statics
71 +
72 +```javascript
73 +object statics
74 +```
75 +
76 +`statics` 对象允许你定义可以在组件类上调用的静态方法.例如:
77 +
78 +```javascript
79 +var MyComponent = React.createClass({
80 + statics: {
81 + customMethod: function(foo) {
82 + return foo === 'bar';
83 + }
84 + },
85 + render: function() {
86 + }
87 +});
88 +
89 +MyComponent.customMethod('bar'); // true
90 +```
91 +
92 +在这个块里定义的方法是 _static_,意味着你可以在任何组件实例被创建前运行他们,并且这些方法没有对你组件的 props 或 state 的访问权.如果你在静态方法里检查props的值,把调用者作为参数传入props给静态函数.
93 +
94 +
95 +### displayName
96 +
97 +```javascript
98 +string displayName
99 +```
100 +
101 +`displayName` 字符串被用在调试信息.JSX 自动设置这个值；见 [JSX in Depth](/react/docs/jsx-in-depth.html#the-transform).
102 +
103 +
104 +## Lifecycle Methods
105 +
106 +多种方法在组件生命周期的特定点上被执行.
107 +
108 +
109 +### Mounting: componentWillMount
110 +
111 +```javascript
112 +void componentWillMount()
113 +```
114 +
115 +被调用一次,即在客户端也在服务端,在最初的渲染发生之前 立即被调用.如果你在这个方法里调用 `setState` , `render()` 将会看到更新的 state 并不论state的变化只执行一次.
116 +
117 +
118 +### Mounting: componentDidMount
119 +
120 +```javascript
121 +void componentDidMount()
122 +```
123 +
124 +被调用一次,只在客户端(不在服务端),在最初的渲染发生之后 立即被调用.在生命周期的这个点上,你可以访问任何对你的子级的refs (比如 访问底层的DOM表达).子组件的 `componentDidMount()` 方法在父组件之前被调用.
125 +
126 +如果你想与其他 JavaScript 框架整合,用 `setTimeout` 或 `setInterval` 设置timers,或者发送 AJAX 请求,执行这些操作在此方法中.
127 +
128 +
129 +### Updating: componentWillReceiveProps
130 +
131 +```javascript
132 +void componentWillReceiveProps(
133 + object nextProps
134 +)
135 +```
136 +
137 +当一个组件收到新的props时被调用.这个方法不会为最初的渲染调用.
138 +
139 +使用它作为响应 prop 转换的时机(在`render()` 被用 `this.setState()` 更新state调用 之前) .旧的 props 可以通过 `this.props` 访问. 在这个函数里调用 `this.setState()` 不会触发任何额外的渲染.
140 +
141 +```javascript
142 +componentWillReceiveProps: function(nextProps) {
143 + this.setState({
144 + likesIncreasing: nextProps.likeCount > this.props.likeCount
145 + });
146 +}
147 +```
148 +
149 +> 注意:
150 +>
151 +> 并没有类似的 `componentWillReceiveState` 方法. 一个即将到来的 prop 转变可能会导致一个 state 变化,但是反之不是. 如果你需要实现一个对 state 变化相应的操作,使用 `componentWillUpdate`.
152 +
153 +
154 +### Updating: shouldComponentUpdate
155 +
156 +```javascript
157 +boolean shouldComponentUpdate(
158 + object nextProps, object nextState
159 +)
160 +```
161 +
162 +当新的props或者state被收到,在渲染前被调用.这个方法不会在最初的渲染或者 `forceUpdate` 时被调用.
163 +
164 +使用此方法作为一个 `return false` 的时机,当你确定新的 props 和 state 的转换不需要组件更新时.
165 +
166 +```javascript
167 +shouldComponentUpdate: function(nextProps, nextState) {
168 + return nextProps.id !== this.props.id;
169 +}
170 +```
171 +
172 +如果 `shouldComponentUpdate` 返回false, `render()` 会在下次state变化前被完全跳过. 另外,`componentWillUpdate` 和 `componentDidUpdate` 将不会被调用.
173 +
174 +默认情况下, `shouldComponentUpdate` 总是返回 `true` 来阻止当 `state` 突变时的细微bug,但是如果你仔细的把 `state` 作为不变量对待并只从 `render()`里的 `props` 和 `state`读,你就可以用一个比较旧的props和state与他们的替换者的实现来重写 `shouldComponentUpdate`.
175 +
176 +如果性能是瓶颈,尤其是随着成百上千的组件,使用 `shouldComponentUpdate` 来加速你的app.
177 +
178 +
179 +### Updating: componentWillUpdate
180 +
181 +```javascript
182 +void componentWillUpdate(
183 + object nextProps, object nextState
184 +)
185 +```
186 +
187 +当新的props或者state被接受时,在渲染前被立即调用.这个方法不会被初始渲染调用.
188 +
189 +使用这个方法作为 在更新发生前执行一些准备 的时机.
190 +
191 +> Note:
192 +>
193 +> 你 *不能* 在这个方法里使用 `this.setState()` .如果你需要响应一个prop变化来更新state,使用 `componentWillReceiveProps` 来替代.
194 +
195 +
196 +### Updating: componentDidUpdate
197 +
198 +```javascript
199 +void componentDidUpdate(
200 + object prevProps, object prevState
201 +)
202 +```
203 +
204 +在组件的更新被刷新到DOM后立即被调用.这个方法不会被初始渲染调用.
205 +
206 +使用这个方法作为 当组件被更新后在DOM上操作 的时机.
207 +
208 +
209 +### Unmounting: componentWillUnmount
210 +
211 +```javascript
212 +void componentWillUnmount()
213 +```
214 +
215 +在组件被从DOM卸载 前 被立即调用.
216 +
217 +在这个方法里执行一些必要的清理操作,比如无效化 timers 或者清理任何被 `componentDidMount` 创建的DOM元素.
docs/docs/ref-04-tags-and-attributes.zh-CN.md new
+90
@@ -0,0 +1,90 @@
1 +---
2 +id: tags-and-attributes-zh-CN
3 +title: Tags和属性
4 +permalink: tags-and-attributes-zh-CN.html
5 +prev: component-specs-zh-CN.html
6 +next: events-zh-CN.html
7 +---
8 +
9 +## 支持的Tags
10 +
11 +React试着支持所有常见的元素.如果你需要一个没有列在这里的元素,请 [file an issue](https://github.com/facebook/react/issues/new).
12 +
13 +### HTML 元素
14 +
15 +下面的HTML是被支持的:
16 +
17 +```
18 +a abbr address area article aside audio b base bdi bdo big blockquote body br
19 +button canvas caption cite code col colgroup data datalist dd del details dfn
20 +dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5
21 +h6 head header hr html i iframe img input ins kbd keygen label legend li link
22 +main map mark menu menuitem meta meter nav noscript object ol optgroup option
23 +output p param picture pre progress q rp rt ruby s samp script section select
24 +small source span strong style sub summary sup table tbody td textarea tfoot th
25 +thead time title tr track u ul var video wbr
26 +```
27 +
28 +### SVG 元素
29 +
30 +下面的 SVG 元素是被支持的:
31 +
32 +```
33 +circle clipPath defs ellipse g line linearGradient mask path pattern polygon polyline
34 +radialGradient rect stop svg text tspan
35 +```
36 +
37 +你也许对 [react-art](https://github.com/facebook/react-art)有兴趣,一个让React绘制Canvas, SVG, 或者 VML (for IE8) 的绘制库.
38 +
39 +
40 +## 支持的属性
41 +
42 +React支持所有的 `data-*` 和 `aria-*` 以及下列的属性.
43 +
44 +> 注意:
45 +>
46 +> 所有的属性都是 camel-cased ,`class` 和 `for` 分别是 `className` 和 `htmlFor`,来符合DOM API 规范.
47 +
48 +关于事件的列表,见 [Supported Events](/react/docs/events.html).
49 +
50 +### HTML 属性
51 +
52 +下面的标准属性是被支持的:
53 +
54 +```
55 +accept acceptCharset accessKey action allowFullScreen allowTransparency alt
56 +async autoComplete autoFocus autoPlay capture cellPadding cellSpacing charSet
57 +challenge checked classID className cols colSpan content contentEditable contextMenu
58 +controls coords crossOrigin data dateTime defer dir disabled download draggable
59 +encType form formAction formEncType formMethod formNoValidate formTarget frameBorder
60 +headers height hidden high href hrefLang htmlFor httpEquiv icon id inputMode
61 +keyParams keyType label lang list loop low manifest marginHeight marginWidth max
62 +maxLength media mediaGroup method min minLength multiple muted name noValidate open
63 +optimum pattern placeholder poster preload radioGroup readOnly rel required role
64 +rows rowSpan sandbox scope scoped scrolling seamless selected shape size sizes
65 +span spellCheck src srcDoc srcSet start step style summary tabIndex target title
66 +type useMap value width wmode wrap
67 +```
68 +
69 +另外,支持下面的非标准属性:
70 +
71 +- `autoCapitalize autoCorrect` for Mobile Safari.
72 +- `property` for [Open Graph](http://ogp.me/) meta tags.
73 +- `itemProp itemScope itemType itemRef itemID` for [HTML5 microdata](http://schema.org/docs/gs.html).
74 +- `unselectable` for Internet Explorer.
75 +- `results autoSave` for WebKit/Blink input fields of type `search`.
76 +
77 +同样有React规范的属性 `dangerouslySetInnerHTML` ([more here](/react/docs/special-non-dom-attributes.html)),用于直接插入HTML字符串到组件里.
78 +
79 +### SVG 属性
80 +
81 +```
82 +clipPath cx cy d dx dy fill fillOpacity fontFamily
83 +fontSize fx fy gradientTransform gradientUnits markerEnd
84 +markerMid markerStart offset opacity patternContentUnits
85 +patternUnits points preserveAspectRatio r rx ry spreadMethod
86 +stopColor stopOpacity stroke strokeDasharray strokeLinecap
87 +strokeOpacity strokeWidth textAnchor transform version
88 +viewBox x1 x2 x xlinkActuate xlinkArcrole xlinkHref xlinkRole
89 +xlinkShow xlinkTitle xlinkType xmlBase xmlLang xmlSpace y1 y2 y
90 +```
docs/docs/ref-05-events.zh-CN.md
+47 -3
@@ -31,12 +31,37 @@ string type
31
32 > 注意：
33 >
34 -> React v0.12 中，事件处理程序返回 `false` 不再停止事件传播，取而代之，应该根据需要手动触发 `e.stopPropagation()` 或 `e.preventDefault()`。
34 +> React v0.14 中，事件处理程序返回 `false` 不再停止事件传播，取而代之，应该根据需要手动触发 `e.stopPropagation()` 或 `e.preventDefault()`。
35
36 +## 事件池
37 +
38 +`SyntheticEvent` 是池化的. 这意味着 `SyntheticEvent` 对象将会被重用并且所有的属性都会在事件回调被调用后被 nullified.
39 +这是因为性能的原因.
40 +因此,你不能异步的访问事件.
41 +
42 +```javascript
43 +function onClick(event) {
44 + console.log(event); // => nullified object.
45 + console.log(event.type); // => "click"
46 + var eventType = event.type; // => "click"
47 +
48 + setTimeout(function() {
49 + console.log(event.type); // => null
50 + console.log(eventType); // => "click"
51 + }, 0);
52 +
53 + this.setState({clickEvent: event}); // Won't work. this.state.clickEvent will only contain null values.
54 + this.setState({eventType: event.type}); // You can still export event properties.
55 +}
56 +```
57 +
58 +> 注意:
59 +>
60 +> 如果你想异步访问事件属性,你应该在事件上调用 `event.persist()` ,这会从池中移除合成事件并允许对事件的引用被用会保留.
61
62 ## 支持的事件
63
39 -React 将事件统一化，使事件在不同浏览器上有一致的属性。
64 +React 将事件统一化，使事件在不同浏览器上有一致的属性.
65
66 下面的事件处理程序在事件冒泡阶段被触发。如果要注册事件捕获处理程序，应该使用 `Capture` 事件，例如使用 `onClickCapture` 处理点击事件的捕获阶段，而不是 `onClick`。
67
@@ -56,6 +81,22 @@ DOMDataTransfer clipboardData
81 ```
82
83
84 +### Composition 事件
85 +
86 +事件名称:
87 +
88 +```
89 +onCompositionEnd onCompositionStart onCompositionUpdate
90 +```
91 +
92 +属性:
93 +
94 +```javascript
95 +string data
96 +
97 +```
98 +
99 +
100 ### 键盘事件
101
102 事件名称：
@@ -64,7 +105,7 @@ DOMDataTransfer clipboardData
105 onKeyDown onKeyPress onKeyUp
106 ```
107
67 -属性：
108 +属性:
109
110 ```javascript
111 boolean altKey
@@ -96,6 +137,7 @@ onFocus onBlur
137 DOMEventTarget relatedTarget
138 ```
139
140 +焦点事件在所有的React DOM上工作,不仅仅是表单元素.
141
142 ### 表单事件
143
@@ -118,6 +160,8 @@ onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
160 onMouseMove onMouseOut onMouseOver onMouseUp
161 ```
162
163 +`onMouseEnter` 和 `onMouseLeave` 事件从离开的元素传播到进入的元素,代替冒泡排序并且没有捕获阶段.
164 +
165 属性：
166
167 ```javascript
docs/docs/ref-06-dom-differences.zh-CN.md new
+16
@@ -0,0 +1,16 @@
1 +---
2 +id: dom-differences-zh-CN
3 +title: DOM 的不同之处
4 +permalink: dom-differences-zh-CN.html
5 +prev: events-zh-CN.html
6 +next: special-non-dom-attributes-zh-CN.html
7 +---
8 +
9 +React 实现了一个浏览器无关的 事件和DOM 系统,原因是为了性能和跨浏览器的兼容性.我们利用这个机会来清理了一些浏览器DOM实现的一些粗糙边缘.
10 +
11 +* 所有的 DOM properties 和 attributes (包括事件处理器) 都应该 camelCased 来保持和标准的 JavaScript 风格一致.我们在这里故意打破了这个规范是因为规范是不一致的. **然而**,`data-*` 和 `aria-*` attributes [conform to the specs](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#data-*) 应该只 lower-cased.
12 +* `style` attribute 接受 camelCased properties 的JavaScript对象 而不是一个CSS字符串. 这保持了和 DOM `style` JavaScript property 的一致,更有效率,而且阻止了XSS安全漏洞.
13 +* 因为 `class` 和 `for` 是 JavaScript的保留字,内建[DOM nodes](http://javascript.info/tutorial/dom-nodes)的JSX元素 应该分别使用 attribute名`className` 和 `htmlFor` ,(比如 `<div className="foo" />`).自定义元素应该直接使用 `class` 和 `for` (例如. `<my-tag class="foo" />` ).
14 +* 所有事件对象遵循 W3C 规范,所有事件(包括提交)正确按W3C规范冒泡.详见[Event System](/react/docs/events.html).
15 +* `onChange` 事件表现的像你期望的那样:不论何时一个表单域改变了这个事件就会激发,而不是模糊的不一致.我们故意打破了已有浏览器的行为,因为 `onChange` 对于他的行为来说用词不当,并且React依赖于这个事件来实时响应用户的输入.详见[Forms](/react/docs/forms.html).
16 +* 表单 输入attributes 类似 `value` 和 `checked`,就像`textarea`一样[More here](/react/docs/forms.html).
docs/docs/ref-07-special-non-dom-attributes.zh-CN.md new
+13
@@ -0,0 +1,13 @@
1 +---
2 +id: special-non-dom-attributes-zh-CN
3 +title: 特殊的 Non-DOM Attributes
4 +permalink: special-non-dom-attributes-zh-CN.html
5 +prev: dom-differences-zh-CN.html
6 +next: reconciliation-zh-CN.html
7 +---
8 +
9 +和 [DOM 的不同之处](/react/docs/dom-differences-zh-CN.html)相比, React 提供了一些不存在于DOM的 attributes .
10 +
11 +- `key`: 一个可选的.独特的标识.当你的组件穿梭于 `render` 的pass,它也许会因为diff算法被摧毁和重建.赋予它一个持久的key保证这个component可达.详见 [这里](/react/docs/multiple-components.html#dynamic-children).
12 +- `ref`: 见 [这里](/react/docs/more-about-refs.html).
13 +- `dangerouslySetInnerHTML`: 提供了直接插入raw HTML的能力,主要是为了与操纵DOM字符串的库协作.详见 [这里](/react/tips/dangerously-set-inner-html.html).
docs/docs/ref-10-glossary.zh-CN.md new
+193
@@ -0,0 +1,193 @@
1 +---
2 +id: glossary-zh-CN
3 +title: React (虚拟) DOM 术语
4 +permalink: glossary-zh-CN.html
5 +prev: webcomponents-zh-CN.html
6 +---
7 +
8 +在 React 的术语中,有五个要重点区分的核心类型:
9 +
10 +- [ReactElement / ReactElement Factory](#react-elements)
11 +- [ReactNode](#react-nodes)
12 +- [ReactComponent / ReactComponent Class](#react-components)
13 +
14 +## React Elements(React 元素)
15 +
16 +React里的首要类型是 `ReactElement`.它有四个 properties:`type`, `props`, `key` 和 `ref`.它没有方法,在 prototype 上什么也没有.
17 +
18 +你可以通过 `React.createElement` 来创建这些对象.
19 +
20 +```javascript
21 +var root = React.createElement('div');
22 +```
23 +
24 +要渲染一个新的树到DOM上,你创建 `ReactElement`s 并传递他们到 `ReactDOM.render` 伴随着一个标准的 DOM `Element` (`HTMLElement` 或 `SVGElement`).`ReactElement`s 不要与 DOM `Element`s 混淆.`ReactElement` 是一个轻的,有状态的,不可变的,虚拟的DOM `Element` 的表达.它是一个虚拟 DOM.
25 +
26 +```javascript
27 +ReactDOM.render(root, document.getElementById('example'));
28 +```
29 +
30 +要给一个DOM元素添加 properties,传递一个properties 对象作为第二个参数,第三个参数传递子级.
31 +
32 +```javascript
33 +var child = React.createElement('li', null, 'Text Content');
34 +var root = React.createElement('ul', { className: 'my-list' }, child);
35 +ReactDOM.render(root, document.getElementById('example'));
36 +```
37 +
38 +如果你使用 React JSX,这些`ReactElement`s 已经为你创建了.所以 这是等价的:
39 +
40 +```javascript
41 +var root = <ul className="my-list">
42 + <li>Text Content</li>
43 + </ul>;
44 +ReactDOM.render(root, document.getElementById('example'));
45 +```
46 +
47 +### Factories(工厂)
48 +
49 +`ReactElement`-工厂 是一个产生特定 `type` property的 `ReactElement` 的函数.React有一个为你内建的辅助工具来创建工厂.它想这样起作用:
50 +
51 +```javascript
52 +function createFactory(type) {
53 + return React.createElement.bind(null, type);
54 +}
55 +```
56 +
57 +它允许你创建一个方便的速记 来代替每次输入 `React.createElement('div')` .
58 +
59 +```javascript
60 +var div = React.createFactory('div');
61 +var root = div({ className: 'my-div' });
62 +ReactDOM.render(root, document.getElementById('example'));
63 +```
64 +
65 +React 已经具备用于常用 HTML tags的内建工厂
66 +
67 +```javascript
68 +var root = React.DOM.ul({ className: 'my-list' },
69 + React.DOM.li(null, 'Text Content')
70 + );
71 +```
72 +
73 +如果你使用JSX 你没有必要使用工厂.JSX已经为创建 `ReactElement`s 提供了一个 方便的速记.
74 +
75 +
76 +## React Nodes
77 +
78 +一个 `ReactNode` 可以是:
79 +
80 +- `ReactElement`
81 +- `string` (aka `ReactText`)
82 +- `number` (aka `ReactText`)
83 +- Array of `ReactNode`s (aka `ReactFragment`)
84 +
85 +他们被用作其他`ReactElement`s的properties来表示子级.事实上他们创建了一个 `ReactElement`s 的树.
86 +
87 +
88 +## React Components
89 +
90 +你可以使用 React只使用`ReactElement`s 但是要真正利用React,你将要使用 `ReactComponent`s 来创建内嵌 state 的封装.
91 +
92 +一个 `ReactComponent` 类就是一个 JavaScript 类 (或者 "constructor function").
93 +
94 +```javascript
95 +var MyComponent = React.createClass({
96 + render: function() {
97 + ...
98 + }
99 +});
100 +```
101 +
102 +当这个构造函数被调用,期望返回一个至少有一个 `render` 方法的对象.这个对象被称为一个 `ReactComponent`.
103 +
104 +```javascript
105 +var component = new MyComponent(props); // never do this
106 +```
107 +
108 +与测试不同,你可能通常 *绝不会* 亲自调用这个构造函数.React 为你调用它.
109 +
110 +作为替代,你传递 `ReactComponent` 类到 `createElement`,你得到一个 `ReactElement`.
111 +
112 +```javascript
113 +var element = React.createElement(MyComponent);
114 +```
115 +
116 +或者用 JSX:
117 +
118 +```javascript
119 +var element = <MyComponent />;
120 +```
121 +
122 +当这个被传给 `ReactDOM.render`,React 会为你调用构造函数并创建一个 `ReactComponent`,返回给你.
123 +
124 +```javascript
125 +var component = ReactDOM.render(element, document.getElementById('example'));
126 +```
127 +
128 +如果你保持用相同类型的 `ReactElement` 和相同的DOM `Element`容器调用 `ReactDOM.render` ,它总是会返回相同的实例.这个实例是状态化的.
129 +
130 +```javascript
131 +var componentA = ReactDOM.render(<MyComponent />, document.getElementById('example'));
132 +var componentB = ReactDOM.render(<MyComponent />, document.getElementById('example'));
133 +componentA === componentB; // true
134 +```
135 +
136 +这就是为什么你不应该构造你自己的实例.作为替代,`ReactElement` 在它被构造以前 是一个虚拟的 `ReactComponent`.一个老的和新的`ReactElement` 可以被比较来判断 一个新的 `ReactComponent` 实例是否需要被创建或者已经存在的是否应该被重用.
137 +
138 + `ReactComponent` 的 `render` 方法被期望返回另一个 `ReactElement`.这允许这些组件被结构化.最后,渲染分解为 带着一个 `string` tag的`ReactElement`,它实例化一个 DOM `Element` 实例并把它插入document里.
139 +
140 +
141 +## Formal Type Definitions
142 +
143 +### Entry Point
144 +
145 +```
146 +ReactDOM.render = (ReactElement, HTMLElement | SVGElement) => ReactComponent;
147 +```
148 +
149 +### Nodes and Elements
150 +
151 +```
152 +type ReactNode = ReactElement | ReactFragment | ReactText;
153 +
154 +type ReactElement = ReactComponentElement | ReactDOMElement;
155 +
156 +type ReactDOMElement = {
157 + type : string,
158 + props : {
159 + children : ReactNodeList,
160 + className : string,
161 + etc.
162 + },
163 + key : string | boolean | number | null,
164 + ref : string | null
165 +};
166 +
167 +type ReactComponentElement<TProps> = {
168 + type : ReactClass<TProps>,
169 + props : TProps,
170 + key : string | boolean | number | null,
171 + ref : string | null
172 +};
173 +
174 +type ReactFragment = Array<ReactNode | ReactEmpty>;
175 +
176 +type ReactNodeList = ReactNode | ReactEmpty;
177 +
178 +type ReactText = string | number;
179 +
180 +type ReactEmpty = null | undefined | boolean;
181 +```
182 +
183 +### Classes and Components
184 +
185 +```
186 +type ReactClass<TProps> = (TProps) => ReactComponent<TProps>;
187 +
188 +type ReactComponent<TProps> = {
189 + props : TProps,
190 + render : () => ReactElement
191 +};
192 +```
193 +
docs/docs/thinking-in-react.zh-CN.md
+1 -1
@@ -69,7 +69,7 @@ React许多优秀的部分之一是它如何使你随着构建 app 来思考 app
69
70 你可以自顶向下或自底向上的构建.也就是说,你可以既从较高的层级(如 从 `FilterableProductTable` 开始) 也可以从较低的层级(`ProductRow`)开始构建组件. 在较简单的例子里,通常自顶向下要容易一些,然而在更大的项目上 自底向上更容易,并且伴随着构建写测试较容易.
71
72 -在这一步的最后,你会有一个渲染你数据模型的可重用的组件库. 这些组件将只含有 `render()` 方法因为这是一个你的app的静态版本. 在层级顶端的组件 (`FilterableProductTable`) 将会接受你的数据模型作为一个prop.如果你对你的底层数据模型做了变化并且再次调用 `React.render()` ,UI将会更新.很容易看到你的UI是如何更新以及哪里来作出变动,因为这里没有任何复杂的事情发生. React的 **单向数据流** (也被称为 *单向绑定* )保持了每个东西模块化和快速.
72 +在这一步的最后,你会有一个渲染你数据模型的可重用的组件库. 这些组件将只含有 `render()` 方法因为这是一个你的app的静态版本. 在层级顶端的组件 (`FilterableProductTable`) 将会接受你的数据模型作为一个prop.如果你对你的底层数据模型做了变化并且再次调用 `ReactDOM.render()` ,UI将会更新.很容易看到你的UI是如何更新以及哪里来作出变动,因为这里没有任何复杂的事情发生. React的 **单向数据流** (也被称为 *单向绑定* )保持了每个东西模块化和快速.
73
74 如果你执行这步需要帮助,请参考 [React docs](/react/docs/) .
75
docs/docs/videos.zh-CN.md new
+173
@@ -0,0 +1,173 @@
1 +---
2 +id: videos-zh-CN
3 +title: 视频
4 +permalink: videos-zh-CN.html
5 +prev: conferences-zh-CN.html
6 +next: complementary-tools-zh-CN.html
7 +---
8 +
9 +### Rethinking best practices - JSConf.eu
10 +
11 +<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe>
12 +
13 +"在 Facebook 和 Instagram, 我们正在努力挑战React在web上能达到的极限。我的讲话会从对框架的简单介绍开始，然后深入三个有争议的话题：扔掉模板的概念并用JavaScript构建views, 当数据改变 “re-rendering” 你的整个应用，以及一个DOM和events的轻量级实现。" -- [Pete Hunt](http://www.petehunt.net/)
14 +
15 +* * *
16 +
17 +### Thinking in react - tagtree.tv
18 +
19 +一个 [tagtree.tv](http://tagtree.tv/) 传达 [Thinking in React](/react/docs/thinking-in-react.html) 原则的视频 在构建一个简单app时。
20 +<figure>[![](/react/img/docs/thinking-in-react-tagtree.png)](http://tagtree.tv/thinking-in-react)</figure>
21 +
22 +* * *
23 +
24 +### Secrets of the Virtual DOM - MtnWest JS
25 +
26 +<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/h3KksH8gfcQ" frameborder="0" allowfullscreen></iframe>
27 +
28 +"在这次讲座里，我会讨论为什么我们构建了一个虚拟 DOM，它比起其他系统如何，以及它与未来浏览器技术的关系。" -- [Pete Hunt](http://www.petehunt.net/)
29 +
30 +* * *
31 +
32 +### Going big with React ###
33 +
34 +"理论上，所有的JS框架都大有可为：干净的实现,快速的代码设计,完美的执行。但是当你压力测试时Javascript会怎样？当你丢进6MB的代码时会怎样？在这次演讲中，我们会探究React在高压环境下如何表现，以及它如何帮助我们的团队在大规模时构建安全代码。 "
35 +<figure>[![](https://i.vimeocdn.com/video/481670116_650.jpg)](https://skillsmatter.com/skillscasts/5429-going-big-with-react#video)</figure>
36 +
37 +* * *
38 +
39 +### CodeWinds
40 +
41 +[Pete Hunt](http://www.petehunt.net/) 与 [Jeff Barczewski](http://jeff.barczewski.com/) 在 CodeWinds Episode 4 上关于 React 的谈话.
42 +<figure>[![](/react/img/docs/codewinds-004.png)](http://codewinds.com/4)</figure>
43 +
44 +<table width="100%"><tr><td>
45 +02:08 - 什么是React，为什么我们用它?<br />
46 +03:08 - ClojureScript 和 React 的共生关系<br />
47 +04:54 - React 的历史以及为什么它被创造<br />
48 +09:43 - 用React更新Web页面，而不绑定数据<br />
49 +13:11 - 用虚拟DOM来改变浏览器DOM<br />
50 +13:57 - 用React编程，绘制目标HTML，canvas和其他<br />
51 +16:45 - 和设计师一起工作，对比于Ember 和 AngularJS<br />
52 +21:45 - JSX编译器桥接HTML和 React javascript<br />
53 +23:50 - React的自动绑定JSX以及浏览器内工具<br />
54 +24:50 - 用React工作的提示和技巧，入门<br />
55 +</td><td>
56 +27:17 - 在服务器端用Node.js渲染HTML。后端渲染<br />
57 +29:20 - React在Facebook通过优胜劣汰进化<br />
58 +30:15 - 用web sockets，在服务器端和客户端持有状态的想法持有<br />
59 +32:05 - 多用户React - 用 Firebase 分布式共享可变状态<br />
60 +33:03 - 用状态转换，事件重放来更好的调式React<br />
61 +34:08 - 来自Web组件的不同之处<br />
62 +34:25 - 使用React的著名公司<br />
63 +35:16 - 一个React的后端插件可以用来创建PDF吗?<br />
64 +36:30 - React的未来，下一步是什么?<br />
65 +39:38 - 贡献和获得帮助<br />
66 +</td></tr></table>
67 +
68 +[Read the episode notes](http://codewinds.com/4)
69 +
70 +* * *
71 +
72 +### JavaScript Jabber
73 +
74 +[Pete Hunt](http://www.petehunt.net/) 和 [Jordan Walke](https://github.com/jordwalke) 在 JavaScript Jabber 73 上关于React的谈话.
75 +<figure>[![](/react/img/docs/javascript-jabber.png)](http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/#content)</figure>
76 +
77 +<table width="100%"><tr><td>
78 +01:34 – Pete Hunt 介绍<br />
79 +02:45 – Jordan Walke 介绍<br />
80 +04:15 – React<br />
81 +06:38 – 60 帧每秒<br />
82 +09:34 – 数据绑定<br />
83 +12:31 – 性能<br />
84 +17:39 – Diffing 算法<br />
85 +19:36 – DOM 操纵
86 +</td><td>
87 +23:06 – 支持 node.js<br />
88 +24:03 – rendr<br />
89 +26:02 – JSX<br />
90 +30:31 – requestAnimationFrame<br />
91 +34:15 – React 和应用<br />
92 +38:12 – React 用户 Khan Academy<br />
93 +39:53 – 使其工作
94 +</td></tr></table>
95 +
96 +[Read the full transcript](http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/)
97 +
98 +* * *
99 +
100 +### Introduction to React.js - Facebook Seattle
101 +
102 +<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe>
103 +
104 +由 [Tom Occhino](http://tomocchino.com/) 和 [Jordan Walke](https://github.com/jordwalke)
105 +
106 +* * *
107 +
108 +### Backbone + React + Middleman Screencast
109 +<iframe width="650" height="488" src="https://www.youtube-nocookie.com/embed/iul1fWHVU6A" frameborder="0" allowfullscreen></iframe>
110 +
111 +Backbone 是一个在用React实现 REST API 接口的极好方法。这个屏博展示了用 [Backbone-React-Component](https://github.com/magalhas/backbone-react-component)如何整合两者. Middleman 是在本例中使用的框架但很容易被替换成其他框架。对此可支持的template可以在[这里](https://github.com/jbhatab/middleman-backbone-react-template) 找到. -- [Open Minded Innovations](http://www.openmindedinnovations.com/)
112 +
113 +* * *
114 +
115 +### Developing User Interfaces With React - Super VanJS
116 +
117 +<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe>
118 +
119 +来自 [Steven Luscher](https://github.com/steveluscher)
120 +
121 +* * *
122 +
123 +### Introduction to React - LAWebSpeed meetup
124 +
125 +<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe>
126 +
127 +来自 [Stoyan Stefanov](http://www.phpied.com/)
128 +
129 +* * *
130 +
131 +### React, or how to make life simpler - FrontEnd Dev Conf '14
132 +
133 +<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/YJNUK0EA_Jo" frameborder="0" allowfullscreen></iframe>
134 +
135 +**俄语** by [Alexander Solovyov](http://solovyov.net/)
136 +
137 +* * *
138 +
139 +### "Functional DOM programming" - Meteor DevShop 11
140 +
141 +<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/qqVbr_LaCIo" frameborder="0" allowfullscreen></iframe>
142 +
143 +* * *
144 +
145 +### "Rethinking Web App Development at Facebook" - Facebook F8 Conference 2014
146 +
147 +<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/nYkdrAPrdcw" frameborder="0" allowfullscreen></iframe>
148 +
149 +* * *
150 +
151 +### React and Flux: Building Applications with a Unidirectional Data Flow - Forward JS 2014
152 +
153 +<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
154 +
155 +Facebook 工程师 [Bill Fisher](https://twitter.com/fisherwebdev) 和 [Jing Chen](https://twitter.com/jingc) 谈论 Flux 和 React, 以及如何使用单向数据流的程序架构清理他们的代码 .
156 +
157 +* * *
158 +
159 +### Server-Side Rendering of Isomorphic Apps at SoundCloud
160 +
161 +<iframe src="https://player.vimeo.com/video/108488724" width="650" height="365" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
162 +
163 +来自 [Andres Suarez](https://github.com/zertosh) 的演练，关于 [SoundCloud](https://developers.soundcloud.com/blog/) 如何使用 React 和 Flux 在服务器端渲染.
164 +
165 +[幻灯片和示例代码](https://github.com/zertosh/ssr-demo-kit)
166 +
167 +* * *
168 +
169 +### Introducing React Native (+Playlist) - React.js Conf 2015
170 +
171 +<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/KVZ-P-ZI6W4?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe>
172 +
173 +[Tom Occhino](https://twitter.com/tomocchino) 回顾了React的过去和现在，在2015年。梳理了下一步要做什么。