React的核心机制之一就是可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。
JSX是什么
JSX就是javascript和XML结合的一种格式。React发明了JSX，利用html语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。
如下：
var child1 = React.createElement(‘li‘, null, ‘First Text Content‘);
var child2 = React.createElement(‘li‘, null, ‘Second Text Content‘);
var root = React.createElement(‘ul‘, { className: ‘my-list‘ }, child1, child2);
babel是什么
Babel是React团队选择的在使用React过程中转换ES*和JSX为ES5语句的工具
Babel并非React的一部分，实际上，Babel的主要用途并非一个JSX语句转换器。Babel主要是一个JavaScript转换器，它可以转换各种ES*代码为浏览器可识别的ES代码。就目前来说，Babel主要会转换ES6和ES7语句为ES5语句，转换JSX看起来倒像是其的一个附加功能。
<script type="text/babel">
class HelloMessage extends React.Component { //这里使用的是React.component
render(){
return <div>Hello {this.props.name}</div>;
}
};
ReactDOM.render(<HelloMessage name="John" />, document.getElementById(‘app‘));
/*** ES5写法 ***/
/*var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(<HelloMessage name="John" />, document.getElementById(‘app‘));*/
</script>jsX和babel区别：
区别就在于 babel 支持将按照ES6写的代码转成ES5格式的代码，以便让其能在现代浏览器上正常运行，用jsx， 只能用ES5的语法。