JSX语法，像是在Javascript代码里直接写XML的语法，实质上这只是一个语法糖，每一个XML标签都会被JSX转换工具转换成纯Javascript代码，React 官方推荐使用JSX， 当然你想直接使用纯Javascript代码写也是可以的，只是使用JSX，组件的结构和组件之间的关系看上去更加清晰。
1.HTML 标签 和 React 组件
在JS中写HTML标签，也许小伙伴们都惊呆了，那么React又是怎么区分HTML标签,React组件标签?
HTML标签：
varmyDivElement=; React.render(myDivElement,document.body);
React组件标签：
var Div= React.createClass({/*...*/});
var myElement = << span="">Div someProperty={true} />;
React.render(myElement,document.body);
插播：
1. 注意大写开头*
2. 不要随意document.body， 它是覆盖不是追加。（及时代码找的回来）
3. 属性someProperty={true}
是不是很简单，一眼就发现了，congruatulations 聪明的你已经理解!
2. JSX与原生态JavaScript
//使用JSX
React.render( content,document.getElementById('example')
);
//不使用JSX
React.render(
React.createElement('div',null,React.createElement('div','content')
)
),document.getElementById('example')
);
那么也就是说，我们写一个XML标签，实质上就是在调用React.createElement这个方法，并返回一个ReactElement对象。
API中：
React.createElement
ReactElementcreateElement( string/ReactClasstype,[objectprops],[children...])#注意此处的省略号
第一个参数可以是一个字符串，表示是一个HTML标准内的元素，或者是一个ReactClass类型的对象，表示我们之前封装好的自定义组件。
第二个参数是一个对象，或者说是字典也可以，它保存了这个元素的所有固有属性（即传入后基本不会改变的值）。
从第三个参数开始，之后的参数都被认作是元素的子元素。
JSX的转换
React JSX 将元素的标签、属性和子元素都会被当作参数传给React.createElement方法：
//JSX
varNav;
varapp=;
//nativeJS
varNav;
varapp=React.createElement(Nav,{color:"blue"});
JSX的转化器
这个工具会把使用JSX语法的文件转换成纯的可以直接在浏览器里面运行起来的JavaScript文件。它也会为你监视目录，然后自动转换变化的文件
要把带有JSX语法的代码转化为纯Javascript代码，有多种方式：
1. 对于内联与HTML中的代码或者是未经过转化的外部文件，在script标签中要加上type="text/jsx"，并引入JSXTransformer.js文件即可。
2. 不过这种方式并不建议在生产环境使用，建议的方法是在代码上线前就将代码转换好，可以使用npm全局安装react-tools：
#npminstallreact-tools-g
并使用命令行工具转化即可（具体用法可以参考jsx -h 或者 jsx --help） jsx 通过watch实时监控，具体使用看帮助吧。此处只列举试例：
#jsx--watchsrc/build/
( #表示linux中的用户权限，windows用户大可不用理睬 )
大爱无边的React. render
React.render方法可以渲染HTML结构，也可以渲染React组件。
(此处与上面重复，只做演示)
渲染HTML标签，声明变量采用 首字母小写
varmyDivElement=; React.render(myDivElement,document.body);
2. 渲染React组件，声明变量采用首字母大写
varMyComponent=React.createClass({/*...*/});
varmyElement=;
React.render(myElement,document.body);
不过需要注意的是class和for属性（不太确定多少个，等查阅api后续增加），JSX语法最终是要被转换为纯Javascript的，所以要和在Javascript DOM中一样， 用className和htmlFor。
//使用JSX
React.render( content,document.getElementById('example')
);
//不使用JSX
React.render(
React.createElement('label',{className:'xxx',htmlFor:'input'},'content'),document.getElementById('example')
);
相信你一眼就瞅出了不同点。
可恶但有可爱之处：
在创建HTML标准内的元素时，JSX转化器会丢弃那些非标准的属性，如果一定要添加自定义属性，那么需要在这些自定义属性之前添加data-前缀。
上同样的代码：
varHtmlOptions=React.createClass({
render:function(){
return( 属性延伸
);
}
});
varys=;
React.render(ys,document.getElementById('htmls'));
渲染后，看看你的标签总是否有zz的属性，恭喜你........
是不是没有？ 哈哈，那就对了， 把zz替换成data-zz试试。
看上去高大上的用法（捂住）
有人说，用了这些写法后，不会再写原生态的JS代码了， 是的，懒（和）做（谐）才会是天朝。
比如开发组件的时候，一个组件有多个子组件，你希望这些子组件可以作为其父组件的属性，那么可以像这样用：
varForm=MyFormComponent; varApp=( );
插播：此处又要插播了（这是我们的爱好，插播才能提升质量）
React 组件标签
这样的写法表示 自闭合标签（
）
还要注意：都要开头大写，并且加上父类组件标签哦。为啥呢？ follow
这样你只需将子组件的ReactClass作为其父组件的属性：
varMyFormComponent=React.createClass({...});
MyFormComponent.Row=React.createClass({...});
MyFormComponent.Label=React.createClass({...});
MyFormComponent.Input=React.createClass({...});
利用子组件 和 父组件形式 再来渲染。
然而这也是可以的：
varApp=( React.createElement(Form,React.createElement(Form.Row,React.createElement(Form.Label,null),React.createElement(Form.Input,null) ) ) );
该功能需要0.11及以上版本
Javascript表达式
在JSX语法中写Javascript表达式只需要用{}即可，比如下面这个使用三目运算符的例子：
JSX是HTML和JavaScript混写的语法，当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。
//Input(JSX):
varcontent=<Container>{window.isLoggedIn?<Nav/>:<Login/>}</Container>;
//Output(JS):
varcontent=React.createElement(
Container,window.isLoggedIn?React.createElement(Nav):React.createElement(Login)
);
属性表达式
React.render(
<divclassName={2>1?'class-a':'class-b'}>content</div>,document.body
);
子表达式
varNav=React.createClass({
render:function(){
return<div>nav</div>
}
});
React.render(
<div>
{2>1?<Nav/>:<div>div</div>}
</div>,document.body
);
卧去， so easy!是不是？
相信你会想到这样写更碉堡。
//ThisJSX:
<divid={if(condition){'msg'}}>HelloWorld!</div>
//IstransformedtothisJS:
React.createElement("div",{id:if(condition){'msg'}},"HelloWorld!");
多高大上啊。可惜是错误的
<div><?PHPif(1>0){echo'碉堡了';}?></div>
或者Pyhon中
[x+nforxinrange(0,100)forninrange(0,10)ifx%3==0ifn%5==0]
看不懂，超碉堡啊！ CAO,是难看，不是看着难。
可以从转化后的Javascript代码中看出明显的语法错误，所以要不用三目运算符，要不就这样写：
if(condition)<divid='msg'>HelloWorld!</div> else<div>HelloWorld!</div>
以下纯属赋值粘贴： 但经过验证，很不错
传播属性（Spread Attributes）
如果提前就知道了组件的属性的话，写起来很容易。例如component组件有两个动态的属性foo和bar：
varcomponent=<Componentfoo={x}bar={y}/>;
而实际上，有些属性可能是后续添加的，我们没办法一开始就确定，我们可能会写出下面不好的代码：
varcomponent=<Component/>; component.props.foo=x;//bad component.props.bar=y;//alsobad
这样写是错误的，因为我们手动直接添加的属性React后续没办法检查到属性类型错误，也就是说，当我们手动添加的属性发生类型错误时，在控制台是看不到错误信息的。
在React的设定中，初始化完props后，props是不可变的。改变props会引起无法想象的后果。
延伸属性
varprops={};
props.foo=x;
props.bar=y;
varcomponent=<Component{...props}/>;
//或者
varprops={foo:x,bar:y};
varcomponent=<Component{...props}/>;
这样就相当于：
varcomponent=<Componentfoo={x}bar={y}/>
当需要拓展我们的属性的时候，定义个一个属性对象，并通过{…props}的方式引入，在JSX中，可以使用...运算符，表示将一个对象的键值对与ReactElement的props属性合并，这个...运算符的实现类似于ES6 Array中的...运算符的特性。，React会帮我们拷贝到组件的props属性中。重要的是―这个过程是由React操控的，不是手动添赋值的属性。
它也可以和普通的XML属性混合使用，需要同名属性，后者将覆盖前者：
varprops={foo:'default'};
varcomponent=<Component{...props}foo={'override'}/>;
console.log(component.props.foo);//'override'
JSX 陷阱
style属性
在React中写行内样式时，要这样写，不能采用引号的书写方式
React.render(
<divstyle={{color:'red'}}>
xxxxx
</div>,document.body
);
HTML转义
比如我们有一些内容是用户输入的富文本，从后台取到数据后展示在页面上，希望展示相应的样式.
varcontent='<strong>content</strong>';
React.render(
<div>{content}</div>,document.body
);
<strong>content</strong>
React默认会进行HTML的转义，避免XSS攻击，如果要不转义，可以这么写：
varcontent='<strong>content</strong>';
React.render(
<divdangerouslySetInnerHTML={{__html:content}}></div>,document.body
);
最后推荐一个的博文博客：（没有看，大家可参考阅读）
http://blog.csdn.net/lihongxun945/article/details/45826851
http://blog.csdn.net/lihongxun945/article/category/5195241
阮一峰的react.js入门
