为什么要引入 JSX 这种语法传统的 MVC是将模板放在其他地方，比如 <script> 标签或者模板文件，再在 JS 中通过某种手段引用模板。按照这种思路，想想多少次我们面对四处分散的模板片段不知所措？纠结模板引擎，纠结模板存放位置，纠结如何引用模板……
React 是一个声明式、高效、灵活的用于构建用户界面的 JavaScript library，React 核心理念在于将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作 “Component”。React 不是 MVC 框架，更像是其中 V，仅仅负责用户交互视图的渲染。
利用 JSX 编写 DOM 结构，可以用原生的 HTML 标签，也可以直接像普通标签一样引用 React组件。这两者约定通过大小写来区分，小写的字符串是 HTML 标签，大写开头的变量是 React 组件。使用 HTML 标签：import React from 'react';import { render } from 'react-dom';var myDivElement = <div className="foo" />;render(myDivElement, document.
你没法在JSX中使用 if-else 语句，因为 JSX 只是函数调用和对象创建的语法糖。看下面这个例子：// This JSX:React.render(<div id="msg">Hello World!</div>, mountNode);// Is transformed to this JS:React.render(React.createElement("div", {id:"msg"}, "Hello World!"), mountNode);// JSX 代码:React.render(<div id="msg">Hello World!<
JSX 与 HTML 非常相似，但是有些关键区别要注意。注意:关于 DOM 的区别，如行内样式属性 style，参考 DOM 区别HTML 实体HTML 实体可以插入到 JSX 的文本中。 <div>First · Second</div>如果想在 JSX 表达式中显示 HTML 实体，可以会遇到二次转义的问题，因为 React 默认会转义所有字符串，为了防止各种 XSS 攻击。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。为什么要用 JSX？你不需要为了 React 使用 JSX，可以直接使用原生 JS。但是，我们建议使用 JSX 是因为它能精确，也是常用的定义包含属性的树状结构的语法。它对于非专职开发者比如设计师也比较熟悉。XML 有固定的标签开启和闭合的优点。
除了前面提到的 class 要写成 className，比较典型的还有:style 属性接受由 CSS 属性构成的 JS 对象onChange 事件表现更接近我们的直觉（不需要 onBlur 去触发）表单的表现差异比较大，要单独再讲更多异同，可以参见 DOMDifferences
这篇文章展示了在不同上下文中 false 的渲染:被渲染成 id="false":React.render(<div id={false} />, mountNode);String "false" as input value:input value 的值将会是 "false" 字符串React.render(<input value={false} />, mountNode);没有子节点React.render(<div>{false}</div>, mountNode);
目前， 一个 component 的 render，只能返回一个节点。如果你需要返回一堆 div ， 那你必须将你的组件用 一个div 或 span 或任何其他的组件包裹。切记，JSX 会被编译成常规的 JS； 因此返回两个函数也就没什么意义了，同样地，千万不要在三元操作符中放入超过一个子节点。
如果你事先知道组件需要的全部 Props（属性），JSX 很容易地这样写： var component = <Component foo={x} bar={y} />;修改 Props 是不好的，明白吗如果你不知道要设置哪些 Props，那么现在最好不要设置它： var component = <Component />; component.props.foo = x; // 不好 component.props.bar = y;
关注时代Java
