【ReactJS】困惑于text/babel与browser.js还是babel.js？

使用JSX

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

// 使用React.createElement()
return React.createElement('div',null,'Hello',this.props.name);

//使用JSX
return <div>Hello {this.props.name}</div>

　　通过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（已精简）