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、答疑

有问题直接留言即可。

相关推荐
三翼鸟数字化技术团队12 分钟前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei41 分钟前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码1 小时前
Spring Task 定时任务
java·前端·spring
转转技术团队1 小时前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Mintopia1 小时前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
Mintopia1 小时前
Three.js深度解析:InstancedBufferGeometry实现动态星空特效 ——高效渲染十万粒子的底层奥秘
前端·javascript·three.js
北凉温华1 小时前
强大的 Vue 标签输入组件:基于 Element Plus 的 ElTagInput 详解
前端
fightingles1 小时前
使用useOptimistic优雅实现状态预更新
react.js
原生高钙1 小时前
LLM大模型对话框实践:大文件的分片上传
前端
加兵柠檬水1 小时前
代码输出题,会这些就够了。
前端