react技术全家桶（3）虚拟DOM的两种创建方式

1.react 为啥要用jsx？
1.首先看看使用js创建虚拟DOM
//1.创建虚拟DOM
//document.createElement是创建真实DOM的
//React.createElement(标签名，标签属性，标签体内容)是创建虚拟DOM的
const VDOM = React.createElement(‘h1’,{id:‘title’},‘Hello React’);、
注意：

源码：

<script type="text/javascript"> 
//1.创建虚拟DOM

//document.createElement是创建真实DOM的
//React.createElement(标签名，标签属性，标签体内容)是创建虚拟DOM的
const VDOM = React.createElement(‘h1’,{id:‘title’},‘Hello React’);

//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test')) /* 把虚拟DOM渲染到哪个容器中 */
</script>

2.痛点来了，请听题：在h1标签中加上span标签 然后在span中写入内容。
jsx的创建该标签的DOM写法：
const VDOM =

Hello,React

;
js的创建该标签的DOM写法：
const VDOM = React.createElement(‘h1’,{id:‘title’},React.createElement(‘span’,{},‘Hello React’));

完美阐释为啥使用jsx。 但是 jsx经过babel翻译后就是js的写法。

jsx换种输写格式更像写html:
const VDOM = (

Hello,React

);