使用JSX可以极大的简化Reactえ素的创建,JSX抽象化了React.createElement()函数的使用其语法风格类似于HTML语法风格。对比如下代码可以让你更好的理解这一点
通过Babel,JSX会把转换为使用React.createElement()類的ES5的语句以使得其能被现今的浏览器引擎识别。
不过我们应该明白使用React并非必须使用JSX,JSX只是一种直观的创建React nodes的方法它是对React.createElement()方法的抽象,通过BabelJSX语句也可以直接在浏览器中运行了。
在运行时引用babel.js虽然容易使用而且还很方便不过并不是一种好的方案,因為需要转换所以更加耗时,这一缺点在产品阶段显得更加明显类似于JSFiddle这样的工具,在线转换React用的就是这种方法
Babel是React团队选择的在使用React過程中转换ES*和JSX为ES5语句的工具,可以从了解Babel详细的用法
实际上,Babel的主要用途并非一个JSX语句转换器Babel主要用途是一个JavaScript转换器,它可以转换各種ES*代码为浏览器可识别的ES代码就目前来说,Babel主要会转换ES6和ES7语句为ES5语句转换JSX看起来倒像是其的一个附加功能。