深入理解 JSX

你不需要为了 react 使用 jsx，可以直接使用纯粹的 js。但我们更建议使用 jsx , 因为它能定义简洁且我们熟知的包含属性的树状结构语法。

对于非专职开发者（比如设计师）同样比较熟悉。

xml 有固定的标签开启和闭合。这能让复杂的树更易于阅读，优于方法调用和对象字面量的形式。

它没有修改 javascript 语义。

react 可以渲染 html 标签 (strings) 或 react 组件 (classes)。

要渲染 html 标签，只需在 jsx 里使用小写字母开头的标签名。

要渲染 react 组件，只需创建一个大写字母开头的本地变量。

react 的 jsx 里约定分别使用首字母大、小写来区分本地组件的类和 html 标签。

注意: 由于 jsx 就是 javascript，一些标识符像 <code>class</code> 和 <code>for</code> 不建议作为 xml 属性名。作为替代，react dom 使用 <code>classname</code> 和 <code>htmlfor</code> 来做对应的属性。

jsx 把类 xml 的语法转成纯粹 javascript，xml 元素、属性和子节点被转换成<code>react.createelement</code> 的参数。

注意，要想使用 <code>&lt;nav /&gt;</code>，<code>nav</code> 变量一定要在作用区间内。

jsx 也支持使用 xml 语法定义子结点：

jsx 表达式总是会当作 reactelement 执行。具体的实际细节可能不同。一种优化 的模式是把 reactelement 当作一个行内的对象字面量形式来绕过<code>react.createelement</code> 里的校验代码。

要使用 javascript 表达式作为属性值，只需把这个表达式用一对大括号 (<code>{}</code>) 包起来，不要用引号 (<code>""</code>)。

同样地，javascript 表达式可用于描述子结点：

jsx 里添加注释很容易；它们只是 js 表达式而已。你只需要在一个标签的子节点内(非最外层)小心地用 <code>{}</code> 包围要注释的部分。