@samitouri / QOS-React-2 / commits / 1694aff89e

Add Chinese translation to 7 more pages. Translate 'Note' to '注意' instead of '提示' to make it more sensible.

Cam Song committed Jan 19, 2015 at 23:31 UTC 1694aff89efade41f3ac38f815dcf8b884ec5b82

9 files changed +584 -4

docs/docs/02.1-jsx-in-depth.zh-CN.md

+3 -3

@@ -41,7 +41,7 @@ React.render(myElement, document.body);

42 React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。

44 -> 提示:

44 +> 注意:

45 >

46 > 由于 JSX 就是 JavaScript，一些标识符像 `class` 和 `for` 不建议作为 XML

47 > 属性名。作为替代，React DOM 使用 `className` 和 `htmlFor` 来做对应的属性。

@@ -79,7 +79,7 @@ var app = React.createElement(

80 如果你要使用 JSX，这篇 [新手入门](/react/docs/getting-started.html) 教程来教你如何搭建环境。

82 -> 提示:

82 +> 注意:

83 >

84 > JSX 表达式总是会当作 ReactElement 执行。具体的实际细节可能不同。一种优化

85 > 的模式是把 ReactElement 当作一个行内的对象字面量形式来绕过

@@ -135,6 +135,6 @@ var content = (

135 );

136 ```

137

138 -> 提示:

138 +> 注意:

139 >

140 > JSX 类似于 HTML，但不完全一样。参考 [JSX 陷阱](/react/docs/jsx-gotchas.html) 了解主要不同。

docs/docs/02.3-jsx-gotchas.zh-CN.md

+1 -1

@@ -8,7 +8,7 @@ next: interactivity-and-dynamic-uis-zh-CN.html

9 JSX 与 HTML 非常相似，但是有些关键区别要注意。

11 -> 提示:

11 +> 注意:

12 >

13 > 关于 DOM 的区别，如行内样式属性 `style`，参考 [DOM 区别](/react/docs/dom-differences.html)

docs/docs/04-multiple-components.zh-CN.md new

+204

@@ -0,0 +1,204 @@

1 +---

2 +id: multiple-componentsm-zh-CN

3 +title: 复合组件

4 +permalink: multiple-components-zh-CN.html

5 +prev: interactivity-and-dynamic-uis-zh-CN.html

6 +next: reusable-components-zh-CN.html

7 +---

8 +

9 +目前为止，我们已经学了如何用单个组件来展示数据和处理用户输入。下一步让我们来体验 React 最激动人心的特性之一：可组合性（composability）。

10 +

11 +

12 +## 动机：关注分离

13 +

14 +通过复用那些接口定义良好的组件来开发新的模块化组件，我们得到了与使用函数和类相似的好处。具体来说就是能够通过开发简单的组件把程序的*不同关注面分离*。如果为程序开发一套自定义的组件库，那么就能以最适合业务场景的方式来展示你的用户界面。

15 +

16 +## 组合实例

17 +

18 +一起来使用 Facebook Graph API 开发显示个人图片和用户名的简单 Avatar 组件吧。

19 +

20 +```javascript

21 +var Avatar = React.createClass({

22 + render: function() {

23 + return (

24 + <div>

25 + <ProfilePic username={this.props.username} />

26 + <ProfileLink username={this.props.username} />

27 + </div>

28 + );

29 + }

30 +});

31 +

32 +var ProfilePic = React.createClass({

33 + render: function() {

34 + return (

35 + <img src={'http://graph.facebook.com/' + this.props.username + '/picture'} />

36 + );

37 + }

38 +});

39 +

40 +var ProfileLink = React.createClass({

41 + render: function() {

42 + return (

43 + <a href={'http://www.facebook.com/' + this.props.username}>

44 + {this.props.username}

45 + </a>

46 + );

47 + }

48 +});

49 +

50 +React.render(

51 + <Avatar username="pwh" />,

52 + document.getElementById('example')

53 +);

54 +```

55 +

56 +

57 +## 从属关系

58 +

59 +上面例子中，`Avatar` 拥有 `ProfilePic` 和 `ProfileLink` 的实例。`拥有者` 就是给其它组件设置 `props` 的那个组件。更正式地说，

60 +如果组件 `Y` 在 `render()` 方法是创建了组件 `X`，那么 `Y` 就拥有 `X`。上面讲过，组件不能修改自身的 `props` - 它们总是与它们拥有者设置的保持一致。这是保持用户界面一致性的关键性原则。

61 +

62 +把从属关系与父子关系加以区别至关重要。从属关系是 React 特有的，父子关系与你所熟知的 DOM 里的是一样的。在上一个例子中，`Avatar` 拥有 `div`、`ProfilePic` 和 `ProfileLink` 实例，`div` 是 `ProfilePic` 和 `ProfileLink` 实例的**父级**（但不是拥有者）。

63 +

64 +

65 +## 子级

66 +

67 +实例化 React 组件时，可以在标签开始和关闭的位置包含其它 React 组件：

68 +

69 +```javascript

70 +<Parent><Child /></Parent>

71 +```

72 +

73 +`Parent` 能通过专门的 `this.props.children` props 读取子级。**`this.props.children` 是一个不透明的数据结构：** 通过 [React.Children 工具类](/react/docs/top-level-api.html#react.children) 来操作。

74 +

75 +### 子级校正（Reconciliation）

76 +

77 +**校正就是每次 render 方法调用后 React 更新 DOM 的过程。** 一般情况下，子级会根据它们被渲染的顺序来做校正。例如，下面代码描述了两次渲染的过程：

78 +

79 +```html

80 +// 第一次渲染

81 +<Card>

82 + <p>Paragraph 1</p>

83 + <p>Paragraph 2</p>

84 +</Card>

85 +// 第二次渲染

86 +<Card>

87 + <p>Paragraph 2</p>

88 +</Card>

89 +```

90 +

91 +直观来看，只是删除了`<p>Paragraph 1</p>`。事实上，React 先更新第一个子级的内容，然后删除最后一个组件。React 是根据子级的*顺序*来校正的。

92 +

93 +### 状态化子级

94 +

95 +对于大多数组件，这没什么大碍。但是，对于使用 `this.state` 来在多次渲染过程中里维持数据的状态化组件，这样做潜在很多问题。

96 +

97 +多数情况下，可以通过隐藏组件而不是删除它们来绕过这些问题。

98 +

99 +```html

100 +// 第一次渲染

101 +<Card>

102 + <p>Paragraph 1</p>

103 + <p>Paragraph 2</p>

104 +</Card>

105 +// 第二次渲染

106 +<Card>

107 + <p style={{'{{'}}display: 'none'}}>Paragraph 1</p>

108 + <p>Paragraph 2</p>

109 +</Card>

110 +```

111 +

112 +### 动态子级

113 +

114 +如果子级被打乱（如在搜索结果中）或者有新组件添加到列表开头（如在流中）情况会变得更加复杂。如果子级要在多个渲染阶段保持自己的特征和状态，在这种情况下，你可以通过给子级设置惟一的 `key` 来区分。

115 +

116 +```javascript

117 + render: function() {

118 + var results = this.props.results;

119 + return (

120 + <ol>

121 + {results.map(function(result) {

122 + return <li key={result.id}>{result.text}</li>;

123 + })}

124 + </ol>

125 + );

126 + }

127 +```

128 +

129 +当 React 校正带有 key 的子级时，它会确保它们被重新排序（而不是破坏）或者删除（而不是重用）。

130 +`务必` 把 `key` 添加到子级数组里组件本身上，而不是每个子级内部最外层 HTML 上：

131 +

132 +```javascript

133 +// 错误！

134 +var ListItemWrapper = React.createClass({

135 + render: function() {

136 + return <li key={this.props.data.id}>{this.props.data.text}</li>;

137 + }

138 +});

139 +var MyComponent = React.createClass({

140 + render: function() {

141 + return (

142 + <ul>

143 + {this.props.results.map(function(result) {

144 + return <ListItemWrapper data={result}/>;

145 + })}

146 + </ul>

147 + );

148 + }

149 +});

150 +

151 +// 正确 :)

152 +var ListItemWrapper = React.createClass({

153 + render: function() {

154 + return <li>{this.props.data.text}</li>;

155 + }

156 +});

157 +var MyComponent = React.createClass({

158 + render: function() {

159 + return (

160 + <ul>

161 + {this.props.results.map(function(result) {

162 + return <ListItemWrapper key={result.id} data={result}/>;

163 + })}

164 + </ul>

165 + );

166 + }

167 +});

168 +```

169 +

170 +也可以传递 object 来做有 key 的子级。object 的 key 会被当作每个组件的 `key`。但是一定要牢记 JavaScript 并不总是保证属性的顺序会被保留。实际情况下浏览器一般会保留属性的顺序，**除了** 使用 32位无符号数字做为 key 的属性。数字型属性会按大小排序并且排在其它属性前面。一旦发生这种情况，React 渲染组件的顺序就是混乱。可能在 key 前面加一个字符串前缀来避免：

171 +

172 +```javascript

173 + render: function() {

174 + var items = {};

175 +

176 + this.props.results.forEach(function(result) {

177 + // 如果 result.id 看起来是一个数字（比如短哈希），那么

178 + // 对象字面量的顺序就得不到保证。这种情况下，需要添加前缀

179 + // 来确保 key 是字符串。

180 + items['result-' + result.id] = <li>{result.text}</li>;

181 + });

182 +

183 + return (

184 + <ol>

185 + {items}

186 + </ol>

187 + );

188 + }

189 +```

190 +

191 +## 数据流

192 +

193 +React 里，数据通过上面介绍过的 `props` 从拥有者流向归属者。这就是高效的单向数据绑定(one-way data binding)：拥有者通过它的 `props` 或 `state` 计算出一些值，并把这些值绑定到它们拥有的组件的 props 上。因为这个过程会递归地调用，所以数据变化会自动在所有被使用的地方自动反映出来。

194 +

195 +

196 +## 性能提醒

197 +

198 +你或许会担心如果一个拥有者有大量子级时，对于数据变化做出响应非常耗费性能。值得庆幸的是执行 JavaScript 非常的快，而且 `render()` 方法一般比较简单，所以在大部分应用里这样做速度极快。此外，性能的瓶颈大多是因为 DOM 更新，而非 JS 执行，而且 React 会通过批量更新和变化检测来优化性能。

199 +

200 +但是，有时候需要做细粒度的性能控制。这种情况下，可以重写 `shouldComponentUpdate()` 方法返回 false 来让 React 跳过对子树的处理。参考 [React reference docs](/react/docs/component-specs.html) 了解更多。

201 +

202 +> 注意：

203 +>

204 +> 如果在数据变化时让 `shouldComponentUpdate()` 返回 false，React 就不能保证用户界面同步。当使用它的时候一定确保你清楚到底做了什么，并且只在遇到明显性能问题的时候才使用它。不要低估 JavaScript 的速度，DOM 操作通常才是慢的原因。

\ No newline at end of file

docs/docs/05-reusable-components.zh-CN.md new

+184

@@ -0,0 +1,184 @@

1 +---

2 +id: reusable-components-zh-CN

3 +title: 可复用组件

4 +permalink: reusable-components-zh-CN.html

5 +prev: multiple-components-zh-CN.html

6 +next: transferring-props-zh-CN.html

7 +---

8 +

9 +设计接口的时候，把通用的设计元素（按钮，表单框，布局组件等）拆成接口良好定义的可复用的组件。这样，下次开发相同界面程序时就可以写更少的代码，也意义着更高的开发效率，更少的 Bug 和更少的程序体积。

10 +

11 +

12 +## Prop 验证

13 +

14 +随着应用不断变大，保证组件被正确使用变得非常有用。为此我们引入 `propTypes`。`React.PropTypes` 提供很多验证器 (validator) 来验证传入数据的有效性。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。注意为了性能考虑，只在开发环境验证 `propTypes`。下面用例子来说明不同验证器的区别：

15 +

16 +```javascript

17 +React.createClass({

18 + propTypes: {

19 + // 可以声明 prop 为指定的 JS 基本类型。默认

20 + // 情况下，这些 prop 都是可传可不传的。

21 + optionalArray: React.PropTypes.array,

22 + optionalBool: React.PropTypes.bool,

23 + optionalFunc: React.PropTypes.func,

24 + optionalNumber: React.PropTypes.number,

25 + optionalObject: React.PropTypes.object,

26 + optionalString: React.PropTypes.string,

27 +

28 + // 所有可以被渲染的对象：数字，

29 + // 字符串，DOM 元素或包含这些类型的数组。

30 + optionalNode: React.PropTypes.node,

31 +

32 + // React 元素

33 + optionalElement: React.PropTypes.element,

34 +

35 + // 用 JS 的 instanceof 操作符声明 prop 为类的实例。

36 + optionalMessage: React.PropTypes.instanceOf(Message),

37 +

38 + // 用 enum 来限制 prop 只接受指定的值。

39 + optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),

40 +

41 + // 指定的多个对象类型中的一个

42 + optionalUnion: React.PropTypes.oneOfType([

43 + React.PropTypes.string,

44 + React.PropTypes.number,

45 + React.PropTypes.instanceOf(Message)

46 + ]),

47 +

48 + // 指定类型组成的数组

49 + optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

50 +

51 + // 指定类型的属性构成的对象

52 + optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

53 +

54 + // 特定形状参数的对象

55 + optionalObjectWithShape: React.PropTypes.shape({

56 + color: React.PropTypes.string,

57 + fontSize: React.PropTypes.number

58 + }),

59 +

60 + // 以后任意类型加上 `isRequired` 来使 prop 不可空。

61 + requiredFunc: React.PropTypes.func.isRequired,

62 +

63 + // 不可空的任意类型

64 + requiredAny: React.PropTypes.any.isRequired,

65 +

66 + // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接

67 + // 使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。

68 + customProp: function(props, propName, componentName) {

69 + if (!/matchme/.test(props[propName])) {

70 + return new Error('Validation failed!');

71 + }

72 + }

73 + },

74 + /* ... */

75 +});

76 +```

77 +

78 +

79 +## 默认 Prop 值

80 +

81 +React 支持以声明式的方式来定义 `props` 的默认值。

82 +

83 +```javascript

84 +var ComponentWithDefaultProps = React.createClass({

85 + getDefaultProps: function() {

86 + return {

87 + value: 'default value'

88 + };

89 + }

90 + /* ... */

91 +});

92 +```

93 +

94 +当父级没有传入 props 时，`getDefaultProps()` 可以保证 `this.props.value` 有默认值，注意 `getDefaultProps` 的结果会被 *缓存*。得益于此，你可以直接使用 props，而不必写手动编写一些重复或无意义的代码。

95 +

96 +## 传递 Props：小技巧

97 +

98 +有一些常用的 React 组件只是对 HTML 做简单扩展。通常，你想少写点代码来把传入组件的 props 复制到对应的 HTML 元素上。这时 JSX 的 _spread_ 语法会帮到你：

99 +

100 +```javascript

101 +var CheckLink = React.createClass({

102 + render: function() {

103 + // 这样会把 CheckList 所有的 props 复制到 <a>

104 + return <a {...this.props}>{'√ '}{this.props.children}</a>;

105 + }

106 +});

107 +

108 +React.render(

109 + <CheckLink href="/checked.html">

110 + Click here!

111 + </CheckLink>,

112 + document.getElementById('example')

113 +);

114 +```

115 +

116 +

117 +## 单个子级

118 +

119 +`React.PropTypes.element` 可以限定只能有一个子级传入。

120 +

121 +```javascript

122 +var MyComponent = React.createClass({

123 + propTypes: {

124 + children: React.PropTypes.element.isRequired

125 + },

126 +

127 + render: function() {

128 + return (

129 + <div>

130 + {this.props.children} // 只能有一个元素，否则会抛异常。

131 + </div>

132 + );

133 + }

134 +

135 +});

136 +```

137 +

138 +

139 +## Mixins

140 +

141 +组件是 React 里复用代码最佳方式，但是有时一些复杂的组件间也需要共用一些功能。有时会被称为 [跨切面关注点](http://en.wikipedia.org/wiki/Cross-cutting_concern)。React 使用 `mixins` 来解决这类问题。

142 +

143 +一个通用的场景是：一个组件需要定期更新。用 `setInterval()` 做很容易，但当不需要它的时候取消定时器来节省内存是非常重要的。React 提供 [生命周期方法](/react/docs/working-with-the-browser.html#component-lifecycle) 来告知组件创建或销毁的时间。下面来做一个简单的 mixin，使用 `setInterval()` 并保证在组件销毁时清理定时器。

144 +

145 +```javascript

146 +var SetIntervalMixin = {

147 + componentWillMount: function() {

148 + this.intervals = [];

149 + },

150 + setInterval: function() {

151 + this.intervals.push(setInterval.apply(null, arguments));

152 + },

153 + componentWillUnmount: function() {

154 + this.intervals.map(clearInterval);

155 + }

156 +};

157 +

158 +var TickTock = React.createClass({

159 + mixins: [SetIntervalMixin], // 引用 mixin

160 + getInitialState: function() {

161 + return {seconds: 0};

162 + },

163 + componentDidMount: function() {

164 + this.setInterval(this.tick, 1000); // 调用 mixin 的方法

165 + },

166 + tick: function() {

167 + this.setState({seconds: this.state.seconds + 1});

168 + },

169 + render: function() {

170 + return (

171 + <p>

172 + React has been running for {this.state.seconds} seconds.

173 + </p>

174 + );

175 + }

176 +});

177 +

178 +React.render(

179 + <TickTock />,

180 + document.getElementById('example')

181 +);

182 +```

183 +

184 +关于 mixin 值得一提的优点是，如果一个组件使用了多个 mixin，并用有多个 mixin 定义了同样的生命周期方法（如：多个 mixin 都需要在组件销毁时做资源清理操作），所有这些生命周期方法都保证会被执行到。方法执行顺序是：首先按 mixin 引入顺序执行 mixin 里方法，最后执行组件内定义的方法。

\ No newline at end of file

docs/docs/06-transferring-props.zh-CN.md new

+163

@@ -0,0 +1,163 @@

1 +---

2 +id: transferring-props-zh-CN

3 +title: 传递 Props

4 +permalink: transferring-props-zh-CN.html

5 +prev: reusable-components-zh-CN.html

6 +next: forms-zh-CN.html

7 +---

8 +

9 +React 里有一个非常常用的模式就是对组件做一层抽象。组件对外公开一个简单的属性（Props）来实现功能，但内部细节可能有非常复杂的实现。

10 +

11 +可以使用 [JSX 展开属性](/react/docs/jsx-spread-zh-CN.html) 来合并现有的 props 和其它值：

12 +

13 +```javascript

14 +return <Component {...this.props} more="values" />;

15 +```

16 +

17 +如果不使用 JSX，可以使用一些对象辅助方法如 ES6 的 `Object.assign` 或 Underscore `_.extend`。

18 +

19 +```javascript

20 +return Component(Object.assign({}, this.props, { more: 'values' }));

21 +```

22 +

23 +下面的教程介绍一些最佳实践。使用了 JSX 和 ES7 的还在试验阶段的特性。

24 +

25 +

26 +## 手动传递

27 +

28 +大部分情况下你应该显式地向下传递 props。这样可以确保只公开你认为是安全的内部 API 的子集。

29 +

30 +```javascript

31 +var FancyCheckbox = React.createClass({

32 + render: function() {

33 + var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';

34 + return (

35 + <div className={fancyClass} onClick={this.props.onClick}>

36 + {this.props.children}

37 + </div>

38 + );

39 + }

40 +});

41 +React.render(

42 + <FancyCheckbox checked={true} onClick={console.log.bind(console)}>

43 + Hello world!

44 + </FancyCheckbox>,

45 + document.body

46 +);

47 +```

48 +

49 +但 `name` 这个属性怎么办？还有 `title`、`onMouseOver` 这些 props？

50 +

51 +

52 +## 在 JSX 里使用 `...` 传递

53 +

54 +有时把所有属性都传下去是不安全或啰嗦的。这时可以使用 [解构赋值](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) 中的剩余属性特性来把未知属性批量提取出来。

55 +

56 +列出所有要当前使用的属性，后面跟着 `...other`。

57 +

58 +```javascript

59 +var { checked, ...other } = this.props;

60 +```

61 +

62 +这样能确保把所有 props 传下去，*除了* 那些已经被使用了的。

63 +

64 +```javascript

65 +var FancyCheckbox = React.createClass({

66 + render: function() {

67 + var { checked, ...other } = this.props;

68 + var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';

69 + // `other` 包含 { onClick: console.log } 但 checked 属性除外

70 + return (

71 + <div {...other} className={fancyClass} />

72 + );

73 + }

74 +});

75 +React.render(

76 + <FancyCheckbox checked={true} onClick={console.log.bind(console)}>

77 + Hello world!

78 + </FancyCheckbox>,

79 + document.body

80 +);

81 +```

82 +

83 +> 注意:

84 +>

85 +> 上面例子中，`checked` 属性也是一个有效的 DOM 属性。如果你没有使用解构赋值，那么可能无意中把它传下去。

86 +

87 +在传递这些未知的 `other` 属性时，要经常使用解构赋值模式。

88 +

89 +```javascript

90 +var FancyCheckbox = React.createClass({

91 + render: function() {

92 + var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';

93 + // 反模式：`checked` 会被传到里面的组件里

94 + return (

95 + <div {...this.props} className={fancyClass} />

96 + );

97 + }

98 +});

99 +```

100 +

101 +

102 +## 使用和传递同一个 Prop

103 +

104 +如果组件需要使用一个属性又要往下传递，可以直接使用 `checked={checked}` 再传一次。这样做比传整个 `this.props` 对象要好，因为更利于重构和语法检查。

105 +

106 +```javascript

107 +var FancyCheckbox = React.createClass({

108 + render: function() {

109 + var { checked, title, ...other } = this.props;

110 + var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';

111 + var fancyTitle = checked ? 'X ' + title : 'O ' + title;

112 + return (

113 + <label>

114 + <input {...other}

115 + checked={checked}

116 + className={fancyClass}

117 + type="checkbox"

118 + />

119 + {fancyTitle}

120 + </label>

121 + );

122 + }

123 +});

124 +```

125 +

126 +> 注意:

127 +>

128 +> 顺序很重要，把 `{...other}` 放到 JSX props 前面会使它不被覆盖。上面例子中我们可以保证 input 的 type 是 `"checkbox"`。

129 +

130 +

131 +## 剩余属性和展开属性 `...`

132 +

133 +剩余属性可以把对象剩下的属性提取到一个新的对象。会把所有在解构赋值中列出的属性剔除。

134 +

135 +这是 [ES7 草案](https://github.com/sebmarkbage/ecmascript-rest-spread) 中的试验特性。

136 +

137 +```javascript

138 +var { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };

139 +x; // 1

140 +y; // 2

141 +z; // { a: 3, b: 4 }

142 +```

143 +

144 +> 注意:

145 +>

146 +> 使用 [JSX 命令行工具](http://npmjs.org/package/react-tools) 配合 `--harmony` 标记来启用 ES7 语法。

147 +

148 +

149 +## 使用 Underscore 来传递

150 +

151 +如果不使用 JSX，可以使用一些库来实现相同效果。Underscore 提供 `_.omit` 来过滤属性，`_.extend` 复制属性到新的对象。

152 +```javascript

153 +var FancyCheckbox = React.createClass({

154 + render: function() {

155 + var checked = this.props.checked;

156 + var other = _.omit(this.props, 'checked');

157 + var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';

158 + return (

159 + React.DOM.div(_.extend({}, other, { className: fancyClass }))

160 + );

161 + }

162 +});

163 +```

docs/docs/complementary-tools.zh-CN.md new

@@ -0,0 +1,9 @@

1 +---

2 +id: complementary-tools-zh-CN

3 +title: 补充工具

4 +permalink: complementary-tools-zh-CN.html

5 +prev: videos-zh-CN.html

6 +next: examples-zh-CN.html

7 +---

8 +

9 +本页被移到了 [GitHub wiki](https://github.com/facebook/react/wiki/Complementary-Tools)。

docs/docs/examples.zh-CN.md new

@@ -0,0 +1,8 @@

1 +---

2 +id: examples-zh-CN

3 +title: 示例

4 +permalink: examples-zh-CN.html

5 +prev: complementary-tools-zh-CN.html

6 +---

7 +

8 +本页被移到了 [GitHub wiki](https://github.com/facebook/react/wiki/Examples)。

docs/docs/flux-overview.zh-CN.md new

@@ -0,0 +1,6 @@

1 +---

2 +id: flux-overview-zh-CN

3 +title: Flux 应用架构

4 +---

5 +

6 +本页被移到了 Flux 网站。[点击访问](http://facebook.github.io/flux/docs/overview.html)。

docs/docs/flux-todo-list.zh-CN.md new

@@ -0,0 +1,6 @@

1 +---

2 +id: flux-todo-list-zh-CN

3 +title: Flux TodoMVC 教程

4 +---

5 +

6 +本页被移到了 Flux 网站。[点击访问](http://facebook.github.io/flux/docs/todo-list.html)。