JSX语法浅析

写在前面：根据网上学习教程整理归纳，感谢大佬们

如果我们需要使用 JSX，则 <script> 标签的 type 属性需要设置为 text/babel

在 JSX 中不能使用  if else  语句，但可以使用  conditional (三元运算)  表达式来替代

注释需要写在花括号中

1、在标签内部的注释需要花括号

2、在标签外的的注释不能使用花括号

JSX 允许在模板中插入数组，数组会自动展开所有成员

1.JSX 是 JavaScript 语言的一种语法扩展，长得像 HTML，但并不是 HTML。

2.React.js 可以用 JSX 来描述你的组件长什么样的。

3.JSX 在编译的时候会变成相应的 JavaScript 对象描述。

4.react-dom  负责把这个用来描述 UI 信息的 JavaScript 对象变成 DOM 元素，并且渲染到页面上。

第一个原因是，当我们拿到一个表示 UI 的结构和信息的对象以后，不一定会把元素渲染到浏览器的普通页面上，我们有可能把这个结构渲染到 canvas 上，或者是手机 App 上。所以这也是为什么会要把  react-dom  单独抽离出来的原因，可以想象有一个叫  react-canvas  可以帮我们把 UI 渲染到 canvas 上，或者是有一个叫  react-app  可以帮我们把它转换成原生的 App（实际上这玩意叫  ReactNative ）。

第二个原因是，有了这样一个对象。当数据变化，需要更新组件的时候，就可以用比较快的算法操作这个 JavaScript 对象，而不用直接操作页面上的 DOM，这样可以尽量少的减少浏览器重排，极大地优化性能。这个在以后的章节中我们会提到。

{}  内可以放任何 JavaScript 的代码，包括变量、表达式计算、函数执行等等。  render  会把这些代码返回的内容如实地渲染到页面上，非常的灵活

http://www.css88.com/react/docs/introducing-jsx.html