JavaScript的React框架中的JSX语法学习入门教程
什么是JSX？
在用React写组件的时候，通常会用到JSX语法，粗看上去，像是在Javascript代码里直接写起了XML标签，实质上这只是一个语法糖，每一个XML标签都会被JSX转换工具转换成纯Javascript代码，当然你想直接使用纯Javascript代码写也是可以的，只是利用JSX，组件的结构和组件之间的关系看上去更加清晰。
varMyComponent=React.createClass({/*...*/});
varmyElement=<MyComponentsomeProperty={true}/>;
React.render(myElement,document.body);
一个XML标签，比如<MyComponentsomeProperty={true}/>会被JSX转换工具转换成什么呢？
比如：
varNav=React.createClass({/*...*/});
varapp=<Navcolor="blue"><Profile>click</Profile></Nav>;
会被转化为：
varNav=React.createClass({/*...*/});
varapp=React.createElement(
Nav,
{color:"blue"},
React.createElement(Profile,null,"click")
);
那么也就是说，我们写一个XML标签，实质上就是在调用React.createElement这个方法，并返回一个ReactElement对象。
ReactElementcreateElement( string/ReactClasstype, [objectprops], [children...] )
这个方法的第一个参数可以是一个字符串，表示是一个HTML标准内的元素，或者是一个ReactClass类型的对象，表示我们之前封装好的自定义组件。第二个参数是一个对象，或者说是字典也可以，它保存了这个元素的所有固有属性（即传入后基本不会改变的值）。从第三个参数开始，之后的参数都被认作是元素的子元素。
JSX转化器
要把带有JSX语法的代码转化为纯Javascript代码，有多种方式，对于内联与HTML中的代码或者是未经过转化的外部文件，在script标签中要加上type="text/jsx"，并引入JSXTransformer.js文件即可，不过这种方式并不建议在生产环境使用，建议的方法是在代码上线前就将代码转换好，可以使用npm全局安装react-tools：
npminstall-greact-tools
并使用命令行工具转化即可（具体用法可以参考jsx-h）：
jsxsrc/build/
如果使用自动化工具，比如gulp的话，可以使用相应插件gulp-react。
HTML模板中使用JS
在HTML模板中使用JS非常方便，只需要用大括号把JS代码括起来即可。
varnames=['Alice','Emily','Kate'];
React.render(
<div>
{
names.map(function(name){
return<div>Hello,{name}!</div>
})
}
</div>,
document.getElementById('example')
);
编译出来就变成了这样：
varnames=['Alice','Emily','Kate'];
React.render(
React.createElement("div",null,names.map(function(name){
returnReact.createElement("div",null,"Hello,",name,"!")
})),
document.getElementById('example')
);
要注意的是，大括号实际就是一个变量输出表达式，JSX最终就是直接把花括号中的内容作为React.createElement的第三个参数直接传入了（没有任何修改直接传入），所以其中只能放一行表达式，并且任何不能直接作为第三个参数的写法都是错的，那么你这样写就是错的：
React.render(
<div>
{
vara=1;
names.map(function(name){
return<div>Hello,{name}!</div>
})
}
</div>,
document.getElementById('example')
);
因为很明显其中花括号内的内容直接放在第三个参数上，语法不对。
这么写也是错的：
React.render(
<div>
{
vara=1;
}
</div>,
document.getElementById('example')
);
因为React.createElement(“div”,null,vara=1;)是语法错误。
那么你也可以理解为什么大括号中的js表达式不能有分号结尾了吧。
需要注意的是，如果你在属性中输出JS变量，是不能加引号的，不然会被当做字符串而不被解析。
应该是这样：
<atitle={title}>链接</a>
使用HTML标签
要创建一个HTML标准中存在的元素，直接像写HTML代码一样即可：
varmyDivElement=<divclassName="foo"/>; React.render(myDivElement,document.body);
不过需要注意的是class和for这两个属性，JSX语法最终是要被转换为纯Javascript的，所以要和在JavascriptDOM中一样，用className和htmlFor。
还有一点是，在创建HTML标准内的元素时，JSX转化器会丢弃那些非标准的属性，如果一定要添加自定义属性，那么需要在这些自定义属性之前添加data-前缀。
<divdata-custom-attribute="foo"/>
命名空间式组件
比如开发组件的时候，一个组件有多个子组件，你希望这些子组件可以作为其父组件的属性，那么可以像这样用：
varForm=MyFormComponent; varApp=( <Form> <Form.Row> <Form.Label/> <Form.Input/> </Form.Row> </Form> );
这样你只需将子组件的ReactClass作为其父组件的属性：
varMyFormComponent=React.createClass({...});
MyFormComponent.Row=React.createClass({...});
MyFormComponent.Label=React.createClass({...});
MyFormComponent.Input=React.createClass({...});
而创建子元素可以直接交给JSX转化器：
varApp=( React.createElement(Form,null, React.createElement(Form.Row,null, React.createElement(Form.Label,null), React.createElement(Form.Input,null) ) ) );
该功能需要0.11及以上版本
Javascript表达式
在JSX语法中写Javascript表达式只需要用{}即可，比如下面这个使用三目运算符的例子：
//Input(JSX):
varcontent=<Container>{window.isLoggedIn?<Nav/>:<Login/>}</Container>;
//Output(JS):
varcontent=React.createElement(
Container,
null,
window.isLoggedIn?React.createElement(Nav):React.createElement(Login)
);
不过要注意的是，JSX语法只是语法糖，它的背后是调用ReactElement的构造方法React.createElement的，所以类似这样的写法是不可以的：
//ThisJSX:
<divid={if(condition){'msg'}}>HelloWorld!</div>
//IstransformedtothisJS:
React.createElement("div",{id:if(condition){'msg'}},"HelloWorld!");
可以从转化后的Javascript代码中看出明显的语法错误，所以要不用三目运算符，要不就这样写：
if(condition)<divid='msg'>HelloWorld!</div> else<div>HelloWorld!</div>
传播属性（SpreadAttributes）
在JSX中，可以使用...运算符，表示将一个对象的键值对与ReactElement的props属性合并，这个...运算符的实现类似于ES6Array中的...运算符的特性。
varprops={foo:x,bar:y};
varcomponent=<Component{...props}/>;
这样就相当于：
varcomponent=<Componentfoo={x}bar={y}/>
它也可以和普通的XML属性混合使用，需要同名属性，后者将覆盖前者：
varprops={foo:'default'};
varcomponent=<Component{...props}foo={'override'}/>;
console.log(component.props.foo);//'override'