使用JSX、转换JSX、babel.js与browser.js的关系讲解

使用jsx

使用jsx，可以极大的简化react元素的创建，jsx抽象化了react.createelement()函数的使用，其语法风格类似于html语法风格。对比如下代码可以让你更好的理解这一点。

// 使用react.createelement()
return react.createelement('p',null,'hello',this.props.name);

//使用jsx
return 

hello {this.props.name}

通过babel，jsx会把转换为使用react.createelement()类的es5的语句，以使得其能被现今的引擎识别。

不过我们应该明白，使用react并非必须使用jsx，jsx只是一种直观的创建react nodes的方法，它是对react.createelement（）方法的抽象，通过babel，jsx语句也可以直接在浏览器中运行了。

转换jsx

使用browser.js(babel5.8.23)在浏览器中转换jsx

在运行时引用babel.js虽然容易使用而且还很方便，不过并不是一种好的方案，因为需要转换，所以更加耗时，这一缺点在产品阶段显得更加明显。类似于jsfiddle这样的工具，在线转换react用的就是这种方法。

babel是react团队选择的在使用react过程中转换es*和jsx为es5语句的工具，可以从babel handbook了解babel详细的用法。

实际上，babel的主要用途并非一个jsx语句转换器。babel主要用途是一个javascript转换器，它可以转换各种es*代码为浏览器可识别的es代码。就目前来说，babel主要会转换es6和es7语句为es5语句，转换jsx看起来倒像是其的一个附加功能。

引入的js	对应的script type
jsxtransformer.js	script type=”text/jsx”
babel.js	script type=”text/babel”
browser.js	script type=”text/babel”

babel.js与browser.js的关系

babel的浏览器版本为browser.js（未精简）和browser.min.js（已精简）