React怎么创建虚拟dom和挂载到页面
1、🍟你可以直接下载本节配套的资源代码，然后导入vscode看效果，也可以跟着教程一点一点敲，都是没问题的。
2、🤔怎么运行本节代码？ 很简单，随便找个浏览器打开index.html即可。💕
代码目录
运行效果
在讲React之前呢，我们得先有一个趁手的IDE，虽然现在WebStorm免费了，但是安装和配置起来呢，对电脑的要求还是有一定门槛，所以我们还是使用VSCODE。
除了直接用浏览器打开index.html，我们也可以用vscode的goLive功能，只需要安装一个插件。
要在VSCode中打开浏览器，可以按照以下步骤进行操作：
-
安装VSCode插件：首先，打开VSCode，点击左侧的扩展图标（可通过快捷键
Ctrl + Shift + X打开）。在搜索栏中输入关键词“Live Server”并选择第一个结果，点击插件右下角的“安装”按钮。
-
启动Live Server：在安装完成后，点击左下角的“Go Live”图标，再点击“Open Browser”按钮，这样便会自动在默认浏览器中打开你的HTML文件。
-
更改默认浏览器：如果想要在不同的浏览器中打开文件，可以在VSCode的设置中进行更改。点击左上角的“文件”菜单，选择“首选项”（Preferences），再选择“设置”（Settings）。在搜索框中输入“liveServer.settings.CustomBrowser”并点击结果。选择“编辑设置.json”（Edit in settings.json），然后在打开的文件中添加以下代码：
“json “liveServer.settings.CustomBrowser”: “浏览器完整路径” “
在这里，将“浏览器完整路径”替换为你所希望使用的浏览器的完整路径。例如，如果你想要使用Google Chrome，可以填写以下代码：
“json “liveServer.settings.CustomBrowser”: “C:/Program Files (x86)/Google/Chrome/Application/chrome.exe” “
- 使用自定义快捷键：你还可以为打开浏览器操作添加自定义快捷键。点击左上角的“文件”菜单，选择“首选项”（Preferences），再选择“键盘快捷方式”（Keyboard Shortcuts）。在搜索框中输入“live server”并点击结果。找到“Open Browser”命令，右击并选择“更改键绑定”（Change Keybinding）。然后按下你希望的快捷键，并保存设置。
现在，你就可以使用VSCode打开浏览器来查看你的HTML文件了！
1、聊聊这节课的需求
很简单啦，就是在页面上输出一段话而已。
2、技术方案
为了降低入门React的难度，我们直接用html的方式，而不是脚手架的方式。
代码非常简单，分为三步。
1、准备好一个容器
<div id="test"></div>
在页面上随便写一个div，这个就是我们要用React渲染的目标区域。
2、引入必要的js文件
<!-- 引入react核心库 -->
<script type="text/javascript" src="../static/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../static/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../static/babel.min.js"></script>
第一个是React核心库，还记得当年你是怎么学习jQuery的吗，是不是第一步就是引入jQuery啊，然后就可以用$去操作一些DOM元素了。比如，你可以用
$('#test').html('<h1>Hello jQuery</h1>');
来实现类似的效果。
那么同样的道理，现在用React了，自然也要引入react。
第二个是React-dom，用来支持dom操作的，用了React了，我们就不需要手动去操作dom了，而是让react帮我们操作，就需要引入这个库。
第三个是babel，我们知道，浏览器早期是不支持ES6的，也不支持import语法，就需要用babel来做转换，转成ES5才能运行代码。但是呢，除了ES6转ES5，babel还有一个作用，就是解析JSX语法。
大家都知道JS，JSX又是什么鬼？简单来说，JSX支持直接在JS文件里面写html代码，主要就是这个作用。
3.创建虚拟dom并渲染到页面
<script type="text/babel"> //1.创建虚拟DOMconst VDOM = <h1>Hello,React</h1>//2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById('test'))
</script>
注意，<h1>Hello,React</h1> 这个玩意可不是字符串啊，而是虚拟DOM，是JSX语法构建的虚拟DOM。有人问，为啥不用JS创建虚拟DOM呢，JS不好吗，不香吗？
欸，你还真别说，React是支持这样做的，但是很不推荐，就好比你写一个标签，里面有属性，标签里面还套标签，你用JS写，就很冗余了，还看不清结构。如果你曾经写过Java，并且经历过Servelt到JSP的阶段，那么你应该能明白我在说什么。
所以，React才特别推出了JSX语法了。
3、技术验证
用浏览器打开index.html，检查输出是否符合预期
5、源码下载
下载本节配套资源即可。
4、答疑
有问题直接留言即可。