React怎么创建虚拟dom和挂载到页面

1、🍟你可以直接下载本节配套的资源代码,然后导入vscode看效果,也可以跟着教程一点一点敲,都是没问题的。

2、🤔怎么运行本节代码? 很简单,随便找个浏览器打开index.html即可。💕

代码目录

运行效果

在讲React之前呢,我们得先有一个趁手的IDE,虽然现在WebStorm免费了,但是安装和配置起来呢,对电脑的要求还是有一定门槛,所以我们还是使用VSCODE。

除了直接用浏览器打开index.html,我们也可以用vscode的goLive功能,只需要安装一个插件。

要在VSCode中打开浏览器,可以按照以下步骤进行操作:

  1. 安装VSCode插件:首先,打开VSCode,点击左侧的扩展图标(可通过快捷键Ctrl + Shift + X打开)。在搜索栏中输入关键词"Live Server"并选择第一个结果,点击插件右下角的"安装"按钮。

  2. 启动Live Server:在安装完成后,点击左下角的"Go Live"图标,再点击"Open Browser"按钮,这样便会自动在默认浏览器中打开你的HTML文件。

  3. 更改默认浏览器:如果想要在不同的浏览器中打开文件,可以在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" "

  1. 使用自定义快捷键:你还可以为打开浏览器操作添加自定义快捷键。点击左上角的"文件"菜单,选择"首选项"(Preferences),再选择"键盘快捷方式"(Keyboard Shortcuts)。在搜索框中输入"live server"并点击结果。找到"Open Browser"命令,右击并选择"更改键绑定"(Change Keybinding)。然后按下你希望的快捷键,并保存设置。

现在,你就可以使用VSCode打开浏览器来查看你的HTML文件了!

1、聊聊这节课的需求

很简单啦,就是在页面上输出一段话而已。

2、技术方案

为了降低入门React的难度,我们直接用html的方式,而不是脚手架的方式。

代码非常简单,分为三步。

1、准备好一个容器

html 复制代码
<div id="test"></div>

在页面上随便写一个div,这个就是我们要用React渲染的目标区域。

2、引入必要的js文件

html 复制代码
<!-- 引入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元素了。比如,你可以用

html 复制代码
$('#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并渲染到页面

html 复制代码
<script type="text/babel"> 
    //1.创建虚拟DOM
    const 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,并且经历过ServeltJSP的阶段,那么你应该能明白我在说什么。

所以,React才特别推出了JSX语法了。

3、技术验证

用浏览器打开index.html,检查输出是否符合预期

5、源码下载

下载本节配套资源即可。

4、答疑

有问题直接留言即可。

相关推荐
网络点点滴19 分钟前
声明式和函数式 JavaScript 原则
开发语言·前端·javascript
禁默23 分钟前
【学术会议-第五届机械设计与仿真国际学术会议(MDS 2025) 】前端开发:技术与艺术的完美融合
前端·论文·学术
binnnngo28 分钟前
2.体验vue
前端·javascript·vue.js
LCG元29 分钟前
Vue.js组件开发-实现多个文件附件压缩下载
前端·javascript·vue.js
索然无味io33 分钟前
组件框架漏洞
前端·笔记·学习·安全·web安全·网络安全·前端框架
╰つ゛木槿42 分钟前
深入探索 Vue 3 Markdown 编辑器:高级功能与实现
前端·vue.js·编辑器
yqcoder1 小时前
Commander 一款命令行自定义命令依赖
前端·javascript·arcgis·node.js
前端Hardy1 小时前
HTML&CSS :下雪了
前端·javascript·css·html·交互
醉の虾1 小时前
VUE3 使用路由守卫函数实现类型服务器端中间件效果
前端·vue.js·中间件
码上飞扬2 小时前
Vue 3 30天精进之旅:Day 05 - 事件处理
前端·javascript·vue.js