通过 React 来构建界面
1- 通过 React 来构建界面
第1步：下载所需要的二个库文件至本地，如果需要加载指定版本的 react 和 react-dom，可以把 18 替换成所需加载的版本号。
-
react.js：React中的核心库文件。// 开发版 https://unpkg.com/react@18/umd/react.development.js // 生产版 https://unpkg.com/react@18/umd/react.production.min.js -
react-dom.js：提供了能在HTML中操作真实DOM的API。// 开发版 https://unpkg.com/react-dom@18/umd/react-dom.development.js // 生产版 https://unpkg.com/react-dom@18/umd/react-dom.production.min.js
注意：以上两个文件可以通过浏览器打开，另存为并保存至目录lib中即可，lit目录文件如下。
|-lib
| |-react.development.js
| |-react.production.min.js
| |-react-dom.development.js
| |-react-dom.production.min.js 第2步：新建一个HTML页面，在页面中引入react相关文件，并在body中创建一个用于显示React内容的空标签div
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 加载 React。--><!-- 注意1: 打包部署时，需将 "development.js" 替换为 "production.min.js"。--><!-- 注意2: react-dom.js依赖于react.js，所以要先引入react.js，后引入react-dom.js"。--><!-- 引入react的核心库 --><script src="./lib/react.development.js"></script><!-- 提供了能在HTML中操作真实DOM的`API` --><script src="./lib/react-dom.development.js"></script>
</head>
<body><!-- 这个 <div> 加上唯一的 id HTML 属性，该 div 即是展示 React 内容的容器！ --><div id="root"></div>
</body>
</html>
第3步：在 </body> 结束标签之前通过 React 实现 Hello World
<script>// ReactDOM 来自react-dom.development.js。// 通过createRoot函数，将 id 为 root 的 div 作为呈现 React 内容的容器。const root = ReactDOM.createRoot(document.getElementById('root'));// 在容器中呈现 Hello, world!root.render("Hello, world!");</script>
</body>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./lib/react.development.js"></script><script src="./lib/react-dom.development.js"></script>
</head>
<body><div id="root"></div><script>const root = ReactDOM.createRoot(document.getElementById('root'));root.render("Hello, world!");</script>
</body>
</html>
2- render 注意事项
-
允许在同一个界面中指定多个挂载容器
<body><div id="root"></div><div class="my"></div> <script>{// 将 id 为 root 的元素作为 React 容器const root = ReactDOM.createRoot(document.querySelector("#root"));// 将 class 为 my 的元素作为 React 容器const my = ReactDOM.createRoot(document.querySelector(".my"));// 在 root 容器中渲染字符串 rootroot.render("root");// 在 my 容器中渲染字符串 mymy.render("my");}</script> </body> -
同一个挂载位置，可以执行多次 render ，后者会覆盖掉前者的内容
<body><!-- 展示 React 内容的容器 --><div id="root"></div><script>{const root = ReactDOM.createRoot(document.querySelector("#root"));// 渲染字符串 oneroot.render("one");// 渲染字符串 two root.render("two");}</script> </body> -
同一个挂载位置，不允许多次被指定为 React 容器
<body><!-- 展示 React 内容的容器 --><div id="root"></div><script>{// 将 id 为 root 的元素作为 React 容器，赋值给常量 rootconst root = ReactDOM.createRoot(document.querySelector("#root"));// 再次将 id 为 root 的元素作为 React 容器，赋值给常量 root2const root2 = ReactDOM.createRoot(document.querySelector("#root"));root.render("one");root2.render("two");}</script> </body>注意：以上代码会以下警告：
Warning: You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it. -
不要将 html 元素作为 React 容器
<body><!-- 展示 React 内容的容器 --><div id="root"></div><script>{const root = ReactDOM.createRoot(document.documentElement);root.render("html")}</script> </body>注意：以上代码会以下警告：
Warning: validateDOMNesting(...): Text nodes cannot appear as a child of <html>. -
不要将 body 元素作为 React 容器
<body><!-- 展示 React 内容的容器 --><div id="root"></div><script>{const root = ReactDOM.createRoot(document.body);root.render("body")}</script> </body>注意：以上代码会以下警告：
Warning: createRoot(): Creating roots directly with document.body is discouraged, since its children are often manipulated by third-party scripts and browser extensions. This may lead to subtle reconciliation issues. Try using a container element created for your app. -
可以使用链式调用
<body><!-- 展示 React 内容的容器 --><div id="root"></div><script>{ReactDOM.createRoot(document.querySelector("#root")).render("字符串")}</script> </body>
3- 卸载 React 容器
<body><button>卸载</button><div id="root"></div><script>const root = ReactDOM.createRoot(document.querySelector("#root"));const btn = document.querySelector("button");root.render(1024);btn.onclick = function(){root.unmount();}</script>
</body>
相关文章：
通过 React 来构建界面
1- 通过 React 来构建界面 第1步：下载所需要的二个库文件至本地，如果需要加载指定版本的 react 和 react-dom，可以把 18 替换成所需加载的版本号。 react.js：React中的核心库文件。 // 开发版 https://unpkg.com/react18/umd/rea…...
真机调试，微信小程序，uniapp项目在微信开发者工具中真机调试，手机和电脑要连同一个wifi，先清空缓存，页面从登录页进入，再点真机调试，这样就不会报错了
微信小程序如何本地进行真机调试？_unity生成的微信小程序怎么在电脑上真机测试-CSDN博客 微信小程序 真机调试 注意事项 uniapp项目在微信开发者工具中真机调试，手机和电脑要连同一个wifi，先清空缓存，页面从登录页进入…...
vue3快速入门
文章目录 1. Vue3简介1.1. 性能的提升1.2.源码的升级1.3. 拥抱TypeScript1.4. 新的特性 2. 创建Vue3工程2.1. 基于 vue-cli 创建2.2. 基于 vite 创建（推荐）vite介绍创建步骤项目结构安装插件项目结构总结 2.3. 一个简单的效果Person.vueApp.vue 3. Vue3核…...
go 问题记录（日志丢失）
问题描述： 在go程序中，通过执行一个命令启动一个子命令，并通过pipe读取子程序的标准输入和输出，通过scanner默认按行读取，此时如果子程序输出时没有携带’\n’，scanner就不会打印输出，而是会累…...
彻底解决 MAC Android Studio gradle async 时出现 “connect timed out“ 问题
最近在编译一个比较老的项目，git clone 之后使用 async 之后出现一下现象： 首先确定是我网络本身是没有问题的，尝试几次重新 async 之后还是出现问题，网上找了一些方法解决了本问题，以此来记录一下问题是如何解决的。 …...
计算机网络第4章（网络层）
4.1、网络层概述 简介 网络层的主要任务是实现网络互连，进而实现数据包在各网络之间的传输 这些异构型网络N1~N7如果只是需要各自内部通信，他们只要实现各自的物理层和数据链路层即可 但是如果要将这些异构型网络互连起来，形成一个更大的互…...
SpringbootWeb案例
准备工作 需求说明 部门管理 部门管理功能开发包括：查询部门列表、删除部门、新增部门、修改部门 员工管理功能开发包括：查询员工列表(分页、条件)、删除员工、新增员工、修改员工 环境搭建 环境搭建步骤：1. 准备数据库表(dept、emp)…...
【初中生讲机器学习】4. 支持向量机算法怎么用？一个实例带你看懂！
创建时间：2024-02-02 最后编辑时间：2024-02-03 作者：Geeker_LStar 你好呀~这里是 Geeker_LStar 的人工智能学习专栏，很高兴遇见你~ 我是 Geeker_LStar，一名初三学生，热爱计算机和数学，我们一起加…...
CentOS下安装vlc
一、引言 vlc是一跨多媒体播放器，可以播放本地媒体文件和网络串流，帮助我们排查音视频开发过程中遇到的问题。大部分情况下，我们只需要在Windows系统下安装vlc就可以了。但有一种情况是需要在Linux下安装vlc的：我们的音视频拉流软…...
概率论中的全概率公式、贝叶斯公式解析
全概率公式 定义 全概率公式是用来计算一个事件的概率，这个事件可以通过几个互斥事件的并集来表示。这几个互斥事件称为“完备事件系”。实质是由原因推结果。 公式 用途 全概率公式通常用于计算一个事件的总概率，特别是当这个事件与几个不同的因素相关…...
亿赛通-数据泄露防护(DLP)UploadFileList；login接口存在任意文件读取漏洞 附POC软件
@[toc] 亿赛通-数据泄露防护(DLP)UploadFileList;login接口存在任意文件读取漏洞 附POC软件 免责声明：请勿利用文章内的相关技术从事非法测试，由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失，均由使用者本人负责，所产生的一切不良后果与文…...
如何使用 Google 搜索引擎保姆级教程（附链接）
一、介绍 "Google语法"通常是指在 Google 搜索引擎中使用一系列特定的搜索语法和操作符来精确地定义搜索查询。这些语法和操作符允许用户过滤和调整搜索结果，提高搜索的准确性。 二、安装 Google 下载 Google 浏览器 Google 官网https://www.google.c…...
SpringBoot实现轻量级接口反向代理、转发
目录 1、基本的对象1.1 配置类1.2 实体DTO1.3 路由代理拓展器1.4 请求对象 RestTemplate 2、核心转发代码3、暴露接口4、基础配置 前言：想实现一个轻量级的接口反向代理和转发的一个接口服务，可以通过这个服务做一些需要认证才能访问的接口给到前端使用&…...
算法训练营day21,回溯1
77. 组合 func combine(n int, k int) [][]int { //存储全部集合 result : make([][]int, 0) //存储单次集合 path : make([]int, 0) var backtrace func(n int, k int, startIndex int) backtrace func(n int, k int, startIndex int) { //当单次集合大小和k值相等ÿ…...
延伸与应用（三）婚姻与经济、运动、宗教、科技与经济
53．幸福婚姻的经济ABC方程式 夫以信先其妇，则妇以信顺其夫。上秉常以化下，下服常而应上，其不化者，百未有一也。 ——《傅子》，傅玄（217—278） 在现代的小家庭中，由于家庭…...
mac上，配置bundletool，将aab转为apk
1.第一步打开终端，安装brew 2.安装bundletool brew install bundletool 3.aab转apk bundletool build-apks --bundle/MyApp/my_app.aab --output/MyApp/my_app.apks 如果下载了bundletool--xxx.jar，脚本命令前加 java -jar bundletool-all-1.5.0.j…...
wangEditor v4的简单使用
当前文档是 wangEditor v4 版本的。 wangEditor v5 已经正式发布，可参考文档。 v5 发布之后，v4 将不再开发新功能。 介绍 English documentation wangEditor4 —— 轻量级 web 富文本编辑器，配置方便，使用简单。 官网&#…...
简单实践 java spring boot 自动配置模拟
1.概要 1.1 需求，自己写一个redis-spring-boot-starter模拟自动配置 自动配置就是在引入*-starter坐标后，可以已经spring框架的规则实现一些Bean的自动注入，并设置一些参数的默认值，且也可以在引入的工程中修改这些配置的值。这…...
BeanDefinition学习
Spring版本5.1.x Spring中的BeanDefinition是一个接口，用于描述Spring容器中Bean的元数据。BeanDefinition描述了Bean的各种属性，如名称、依赖关系、初始化方法等。这个接口通常用于在Spring的IoC容器中注册Bean，并且当容器需要创建Bean实例…...
ASP.NET的GridView控件中，实现同列内容合并
在ASP.NET的GridView控件中，实现同列内容合并的方法主要有两种：一种是使用RowDataBound事件，另一种是使用自定义定义函数 使用RowDataBound事件 这种方法是在GridView的每一行绑定数据时，比较当前行和前一行的同一列的值&#x…...
dedecms 织梦自定义表单留言增加ajax验证码功能
增加ajax功能模块，用户不点击提交按钮，只要输入框失去焦点，就会提前提示验证码是否正确。 一，模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
HBuilderX安装（uni-app和小程序开发）
下载HBuilderX 访问官方网站：https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本： Windows版（推荐下载标准版） Windows系统安装步骤 运行安装程序： 双击下载的.exe安装文件 如果出现安全提示&…...
Java 二维码
Java 二维码 **技术：**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...
AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别
【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而，传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案，能够实现大范围覆盖并远程采集数据。尽管具备这些优势…...
虚拟电厂发展三大趋势：市场化、技术主导、车网互联
市场化：从政策驱动到多元盈利 政策全面赋能 2025年4月，国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》，首次明确虚拟电厂为“独立市场主体”，提出硬性目标：2027年全国调节能力≥2000万千瓦࿰…...
大数据治理的常见方式
大数据治理的常见方式 大数据治理是确保数据质量、安全性和可用性的系统性方法，以下是几种常见的治理方式： 1. 数据质量管理 核心方法： 数据校验：建立数据校验规则（格式、范围、一致性等）数据清洗&…...
Yii2项目自动向GitLab上报Bug
Yii2 项目自动上报Bug 原理 yii2在程序报错时, 会执行指定action, 通过重写ErrorAction, 实现Bug自动提交至GitLab的issue 步骤 配置SiteController中的actions方法 public function actions(){return [error > [class > app\helpers\web\ErrorAction,],];}重写Error…...
第22节 Node.js JXcore 打包
Node.js是一个开放源代码、跨平台的、用于服务器端和网络应用的运行环境。 JXcore是一个支持多线程的 Node.js 发行版本，基本不需要对你现有的代码做任何改动就可以直接线程安全地以多线程运行。 本文主要介绍JXcore的打包功能。 JXcore 安装 下载JXcore安装包&a…...
C++ Saucer 编写Windows桌面应用
文章目录 一、背景二、Saucer 简介核心特性典型应用场景 三、生成自己的项目四、以Win32项目方式构建Win32项目禁用最大化按钮 五、总结 一、背景 使用Saucer框架，开发Windows桌面应用，把一个html页面作为GUI设计放到Saucer里，隐藏掉运行时弹…...