JSX笔记

是什么

• JSX可以看作JavaScript的拓展，看起来有点像XML。使用React，可以进行JSX语法到JavaScript的转换。
• JSX并不是新语言，也没有改变JavaScript的语法，只是对JavaScript的拓展。
• 每一个XML标签都会被JSX转换工具转换成纯Javascript代码

为什么

React作者强烈建议我们使用JSX，因为JSX在定义类似HTML这种树形结构时，十分的简单明了。简明的代码结构更利于开发和维护

使用jsx

React.render渲染HTML结构时，申明变量采用首字母小写

var myDivElement = <div className="foo" />;  
React.render(myDivElement, document.body);

React.render渲染React组件时，申明变量采用首字母大写

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

React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。

XML标签如何转化为jsx

一个XML标签：

var app = <Nav color="blue"><Profile>click</Profile></Nav>;

会被转化为：

var app = React.createElement(  
    Nav,  
    {color:"blue"},  
    React.createElement(Profile, null, "click")  
);  

一个XML标签，实质上就是在调用 React.createElement 这个方法，并返回一个 ReactElement 对象。

注释

同JavaScript注释一样

单行注释 // comments
多行注释 /* comments */