最详细的jsx和babel的区别

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的语法。