{"parents":["ed1803dc1669f4fed6bef7484bae19da7ef4711c","8621b4d338f72687b5ee66221a580f9473ccd5b6"],"patch":"diff --git a\/docs\/docs\/02.1-jsx-in-depth.zh-CN.md b\/docs\/docs\/02.1-jsx-in-depth.zh-CN.md\nnew file mode 100644\nindex 0000000000..0c7b30c131\n--- \/dev\/null\n+++ b\/docs\/docs\/02.1-jsx-in-depth.zh-CN.md\n@@ -0,0 +1,136 @@\n+---\n+id: jsx-in-depth-zh-CN\n+title: 深入 JSX\n+permalink: jsx-in-depth-zh-CN.html\n+prev: displaying-data-zh-CN.html\n+next: jsx-spread-zh-CN.html\n+---\n+\n+[JSX](http:\/\/facebook.github.io\/jsx\/) 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。\n+\n+## 为什么要用 JSX？\n+\n+你不需要为了 React 使用 JSX，可以直接使用原生 JS。但是，我们建议使用 JSX 是因为它能精确，也是常用的定义包含属性的树状结构的语法。\n+\n+它对于非专职开发者比如设计师也比较熟悉。\n+\n+XML 有固定的标签开启和闭合的优点。这能让复杂的树更易于阅读，优于方法调用和对象字面量的形式。\n+\n+它没有修改 JavaScript 语义。\n+\n+## HTML 标签对比 React 模块\n+\n+React 可以渲染 HTML 标签 (strings) 或 React 模块 (classes)。\n+\n+要渲染 HTML 标签，只需在 JSX 里使用小写字母开头的标签名。\n+\n+```javascript\n+var myDivElement =

;\n+React.render(myDivElement, document.body);\n+```\n+\n+要渲染 React 模块，只需创建一个大写字母开头的本地变量。\n+\n+```javascript\n+var MyComponent = React.createClass({\/*...*\/});\n+var myElement = ;\n+React.render(myElement, document.body);\n+```\n+\n+React 的 JSX 里约定分别使用首字母大、小写来区分本地模块的类和 HTML 标签。\n+\n+> 提示:\n+>\n+> 由于 JSX 就是 JavaScript，一些标识符像 `class` 和 `for` 不建议作为 XML\n+> 属性名。作为替代，React DOM 使用 `className` 和 `htmlFor` 来做对应的属性。\n+\n+## 转换（Transform）\n+\n+JSX 把类 XML 的语法转成原生 JavaScript，XML 元素、属性和子节点被转换成 `React.createElement` 的参数。\n+\n+```javascript\n+var Nav;\n+\/\/ 输入 (JSX):\n+var app =

;\n+\/\/ 输出 (JS):\n+var app = React.createElement(Nav, {color:\"blue\"});\n+```\n+\n+注意，要想使用 `

`，`Nav` 变量一定要在作用区间内。\n+\n+JSX 也支持使用 XML 语法定义子结点：\n+\n+```javascript\n+var Nav, Profile;\n+\/\/ 输入 (JSX):\n+var app =

click<\/Profile><\/Nav>;\n+\/\/ 输出 (JS):\n+var app = React.createElement(\n+ Nav,\n+ {color:\"blue\"},\n+ React.createElement(Profile, null, \"click\")\n+);\n+```\n+\n+使用 [JSX 编译器](\/react\/jsx-compiler.html) 来试用 JSX 并理解它是如何转换到原生 JavaScript，还有 [HTML 到 JSX 转换器](\/react\/html-jsx.html) 来把现有 HTML 转成 JSX。\n+\n+如果你要使用 JSX，这篇 [新手入门](\/react\/docs\/getting-started.html) 教程来教你如何搭建环境。\n+\n+> 提示:\n+>\n+> JSX 表达式总是会当作 ReactElement 执行。具体的实际细节可能不同。一种优化\n+> 的模式是把 ReactElement 当作一个行内的对象字面量形式来绕过\n+> `React.createElement` 里的校验代码。\n+\n+## JavaScript 表达式\n+\n+### 属性表达式\n+\n+要使用 JavaScript 表达式作为属性值，只需把这个表达式用一对大括号 (`{}`) 包起来，不要用引号 (`\"\"`)。\n+\n+```javascript\n+\/\/ 输入 (JSX):\n+var person = ;\n+\/\/ 输出 (JS):\n+var person = React.createElement(\n+ Person,\n+ {name: window.isLoggedIn ? window.name : ''}\n+);\n+```\n+\n+### 子节点表达式\n+\n+同样地，JavaScript 表达式可用于描述子结点：\n+\n+```javascript\n+\/\/ 输入 (JSX):\n+var content = {window.isLoggedIn ?

: }<\/Container>;\n+\/\/ 输出 (JS):\n+var content = React.createElement(\n+ Container,\n+ null,\n+ window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)\n+);\n+```\n+\n+### 注释\n+\n+JSX 里添加注释很容易；它们只是 JS 表达式而已。你只需要在一个标签的子节点内(非最外层)小心地用 `{}` 包围要注释的部分。\n+\n+```javascript\n+var content = (\n+

\n+ {\/* 一般注释, 用 {} 包围 *\/}\n+ \n+ <\/Nav>\n+);\n+```\n+\n+> 提示:\n+> \n+> JSX 类似于 HTML，但不完全一样。参考 [JSX 陷阱](\/react\/docs\/jsx-gotchas.html) 了解主要不同。\n\\ No newline at end of file\n","body":"Add Chinese translation of jsx-in-depth","files":[{"path":"docs\/docs\/02.1-jsx-in-depth.zh-CN.md","status":"A"}],"commit":{"authorName":"Paul O’Shannessy","authorEmail":"paul@oshannessy.com","revision":"91eb2e2f99cd21f724dde92ffd62adeb40adc33d","authoredAt":"2014-12-10T15:12:55-08:00","shortRevision":"91eb2e2f99","subject":"Merge pull request #2689 from camsong\/master"}}

dillon1000/react

Files changed