Note:
diff --git a/docs/jsx-in-depth-zh-CN.html b/docs/jsx-in-depth-zh-CN.html new file mode 100644 index 0000000000..40553ff2bf --- /dev/null +++ b/docs/jsx-in-depth-zh-CN.html @@ -0,0 +1,527 @@ + + + + + + +
+ React
+
+
+ + 深入 JSX + Edit on GitHub +
+ + +JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。
+为什么要用 JSX？ #
+你不需要为了 React 使用 JSX，可以直接使用原生 JS。但是，我们建议使用 JSX 是因为它能精确，也是常用的定义包含属性的树状结构的语法。
+ +它对于非专职开发者比如设计师也比较熟悉。
+ +XML 有固定的标签开启和闭合的优点。这能让复杂的树更易于阅读，优于方法调用和对象字面量的形式。
+ +它没有修改 JavaScript 语义。
+HTML 标签 对比 React 模块 #
+React 可以渲染 HTML 标签 (strings) 或 React 模块 (classes)。
+ +要渲染 HTML 标签，只需在 JSX 里使用小写字母开头的标签名。
+var myDivElement = <div className="foo" />;
+React.render(myDivElement, document.body);
+要渲染 React 模块，只需创建一个大写字母开头的本地变量。
+var MyComponent = React.createClass({/*...*/});
+var myElement = <MyComponent someProperty={true} />;
+React.render(myElement, document.body);
+React 的 JSX 里约定分别使用首字母大、小写来区分本地模块的类和 HTML 标签。
+ +++提示:
+ +由于 JSX 就是 JavaScript，一些标识符像
+class和for不建议作为 XML +属性名。作为替代，React DOM 使用className和htmlFor来做对应的属性。
转换（Transform） #
+JSX 把类 XML 的语法转成原生 JavaScript，XML 元素、属性和子节点被转换成 React.createElement 的参数。
var Nav;
+// 输入 (JSX):
+var app = <Nav color="blue" />;
+// 输出 (JS):
+var app = React.createElement(Nav, {color:"blue"});
+注意，要想使用 <Nav />，Nav 变量一定要在作用区间内。
JSX 也支持使用 XML 语法定义子结点：
+var Nav, Profile;
+// 输入 (JSX):
+var app = <Nav color="blue"><Profile>click</Profile></Nav>;
+// 输出 (JS):
+var app = React.createElement(
+ Nav,
+ {color:"blue"},
+ React.createElement(Profile, null, "click")
+);
+使用 JSX 编译器 来试用 JSX 并理解它是如何转换到原生 JavaScript，还有 HTML 到 JSX 转换器 来把现有 HTML 转成 JSX。
+ +如果你要使用 JSX，这篇 新手入门 教程来教你如何搭建环境。
+ +++提示:
+ +JSX 表达式总是会当作 ReactElement 执行。具体的实际细节可能不同。一种优化 +的模式是把 ReactElement 当作一个行内的对象字面量形式来绕过 +
+React.createElement里的校验代码。
JavaScript 表达式 #
属性表达式 #
+要使用 JavaScript 表达式作为属性值，只需把这个表达式用一对大括号 ({}) 包起来，不要用引号 ("")。
// 输入 (JSX):
+var person = <Person name={window.isLoggedIn ? window.name : ''} />;
+// 输出 (JS):
+var person = React.createElement(
+ Person,
+ {name: window.isLoggedIn ? window.name : ''}
+);
+子节点表达式 #
+同样地，JavaScript 表达式可用于描述子结点：
+// 输入 (JSX):
+var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
+// 输出 (JS):
+var content = React.createElement(
+ Container,
+ null,
+ window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
+);
+注释 #
+JSX 里添加注释很容易；它们只是 JS 表达式而已。你只需要在一个标签的子节点内(非最外层)小心地用 {} 包围要注释的部分。
var content = (
+ <Nav>
+ {/* 一般注释, 用 {} 包围 */}
+ <Person
+ /* 多
+ 行
+ 注释 */
+ name={window.isLoggedIn ? window.name : ''} // 行尾注释
+ />
+ </Nav>
+);
+++ + + +提示:
+ +JSX 类似于 HTML，但不完全一样。参考 JSX 陷阱 了解主要不同。
+
var myDivElement = <div className="foo" />;
React.render(myDivElement, document.body);
To render a React Component, just a local variable that starts with an upper-case letter:
+To render a React Component, just create a local variable that starts with an upper-case letter:
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.body);
diff --git a/docs/jsx-spread-zh-CN.html b/docs/jsx-spread-zh-CN.html
new file mode 100644
index 0000000000..5854a1d1e0
--- /dev/null
+++ b/docs/jsx-spread-zh-CN.html
@@ -0,0 +1,454 @@
+
+
+
+
+
+
+ JSX 展开属性 （Spread Attributes） | React
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ React
+
+
+
+
+
+
+
+
+
+
+
+
+
+ JSX 展开属性 （Spread Attributes）
+ Edit on GitHub
+
+
+
+ 如果你事先知道模块需要的全部 Props（属性），JSX 很容易地这样写：
+ var component = <Component foo={x} bar={y} />;
+
修改 Props 是不好的，明白吗 #
+如果你不知道要设置哪些 Props，那么现在最好不要设置它：
+ var component = <Component />;
+ component.props.foo = x; // 不好
+ component.props.bar = y; // 同样不好
+
+这样是反模式，因为 React 不能帮你检查属性类型（propTypes）。这样即使你的 属性类型有错误也不能得到清晰的错误提示。
+
+Props 应该被当作禁止修改的。修改 props 对象可能会导致预料之外的结果，所以最好不要去修改 props 对象。
+扩展属性 （Spread Attributes） #
+现在你可以使用 JSX 的新特性 - 扩展属性：
+ var props = {};
+ props.foo = x;
+ props.bar = y;
+ var component = <Component {...props} />;
+
+传入对象的属性会被复制到模块内。
+
+它能被多次使用，也可以和其它属性一起用。注意顺序很重要，后面的会覆盖掉前面的。
+ var props = { foo: 'default' };
+ var component = <Component {...props} foo={'override'} />;
+ console.log(component.props.foo); // 'override'
+
这个奇怪的 ... 标记是什么？ #
+这个 ... 操作符（也被叫做）已经被 ES6 数组 支持。相关的还有 ES7 规范草案中的 Object 剩余和展开属性（Rest and Spread Properties）。我们利用了这些还在制定中标准中已经被支持的特性来使 JSX 拥有更优雅的语法。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/transferring-props.html b/docs/transferring-props.html
index b6f9f4b999..a20c2b4159 100644
--- a/docs/transferring-props.html
+++ b/docs/transferring-props.html
@@ -426,7 +426,7 @@
}
});
React.render(
- <FancyCheckbox checked={true} onClick={console.log}>
+ <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
Hello world!
</FancyCheckbox>,
document.body
diff --git a/docs/tutorial.html b/docs/tutorial.html
index 7c555fcc5e..bd00f73c4e 100644
--- a/docs/tutorial.html
+++ b/docs/tutorial.html
@@ -393,8 +393,8 @@
- Optimistic commenting: comments appear in the list before they're saved on the server so it feels fast.
-- Live updates: as other users comment we'll pop them into the comment view in real time
-- Markdown formatting: users can use Markdown to format their text
+- Live updates: other users' comments are popped into the comment view in real time.
+- Markdown formatting: users can use Markdown to format their text.
Want to skip all this and just see the source? #
diff --git a/docs/update.html b/docs/update.html
index 6816b443dc..656256ec22 100644
--- a/docs/update.html
+++ b/docs/update.html
@@ -388,7 +388,7 @@
// or...
myData.a.b.push(9);
you have no way of determining which data has changed since the previous copy is overriden. Instead, you need to create a new copy of myData and change only the parts of it that need to be changed. Then you can compare the old copy of myData with the new one in shouldComponentUpdate() using triple-equals:
you have no way of determining which data has changed since the previous copy is overridden. Instead, you need to create a new copy of myData and change only the parts of it that need to be changed. Then you can compare the old copy of myData with the new one in shouldComponentUpdate() using triple-equals:
var newData = deepCopy(myData);
newData.x.y.z = 7;
newData.a.b.push(9);