jsx

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。 它是类型安全的，在编译过程中就能发现错误。

1. React JSX 代码可以放在一个独立文件上

   <script type="text/babel" src="_react.js"></script>_react.js:ReactDOM.render( ?<h1>Hello, world!</h1>, ?document.getElementById(‘example‘));

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

   var arr = [ ?<h1>标题</h1>, ?<h2>副标题</h2>,];ReactDOM.render( ?<div>{arr}</div>,//代码中嵌套多个 HTML 标签，需要使用一个标签元素包裹它 ?document.getElementById(‘example‘));

3. 添加自定义属性需要使用 data- 前缀，由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。React DOM 使用 className 和 htmlFor 来做对应的属性。
4. React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 

   var myStyle = { ???fontSize: 100, ???color: ‘#FF0000‘};ReactDOM.render( ???<h1 style = {myStyle}>菜鸟教程</h1>, ???document.getElementById(‘example‘));

5. 表达式写在花括号 {} 中
6. 在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代
7. 注释需要写在花括号中{/*注释...*/}.在标签内部的注释需要花括号在标签外的的注释不能使用花括号

   ReactDOM.render( ???/*注释 */ ???<h1>{/*注释*/}</h1>, ???document.getElementById(‘example‘));

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

   var MyComponent = React.createClass({/*...*/});var myElement = <MyComponent someProperty={true} />;ReactDOM.render(myElement, document.getElementById(‘example‘));

jsx

原文地址：http://www.cnblogs.com/avidya/p/7472033.html