React支持JSX语法，但浏览器无法识别JSX语法，需要babel进行转换，那么JSX语法比JS语法有哪些优势呢？下面通过示例进行比较。
首先使用JSX来创建虚拟DOM：

在h1标签中增加了一个span标签。
执行结果：

使用JS标签来创建虚拟DOM：

删除掉了babel，把脚本类型改成了text/javascript,同时使用React提供的JS代码创建了虚拟DOM。
执行结果：

通过上面的两种虚拟DOM的创建方式，可以发现JSX语法相对于JS语法来说，更加直接简单，而JS语法在多个标签嵌套的场景下，需要嵌套使用React.createElement函数分别创建各个标签的虚拟DOM对象。
但虽然其实JSX语法通过babel转换后，最终还是会成为JS样式的语法，只是简化了代码的编写。

另外JSX语法中，可以使用小括号将虚拟DOM包起来，并在其中进行缩进，方便阅读，如下：

执行结果：

Q.E.D.