当前位置： 首页 > news >正文

通过 React 来构建界面

news 2025/12/16 13:09:57

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步&#xff1a;下载所需要的二个库文件至本地&#xff0c;如果需要加载指定版本的 react 和 react-dom&#xff0c;可以把 18 替换成所需加载的版本号。 react.js&#xff1a;React中的核心库文件。 // 开发版 https://unpkg.com/react18/umd/rea…...

编程日记 2024/2/3 22:18:55

真机调试，微信小程序，uniapp项目在微信开发者工具中真机调试，手机和电脑要连同一个wifi，先清空缓存，页面从登录页进入，再点真机调试，这样就不会报错了

微信小程序如何本地进行真机调试&#xff1f;_unity生成的微信小程序怎么在电脑上真机测试-CSDN博客 微信小程序 真机调试 注意事项 uniapp项目在微信开发者工具中真机调试&#xff0c;手机和电脑要连同一个wifi&#xff0c;先清空缓存&#xff0c;页面从登录页进入&#xf…...

编程日记 2024/2/3 22:16:52

vue3快速入门

文章目录 1. Vue3简介1.1. 性能的提升1.2.源码的升级1.3. 拥抱TypeScript1.4. 新的特性 2. 创建Vue3工程2.1. 基于 vue-cli 创建2.2. 基于 vite 创建&#xff08;推荐&#xff09;vite介绍创建步骤项目结构安装插件项目结构总结 2.3. 一个简单的效果Person.vueApp.vue 3. Vue3核…...

编程日记 2024/2/3 22:14:50

go 问题记录（日志丢失）

问题描述&#xff1a; 在go程序中&#xff0c;通过执行一个命令启动一个子命令&#xff0c;并通过pipe读取子程序的标准输入和输出&#xff0c;通过scanner默认按行读取&#xff0c;此时如果子程序输出时没有携带’\n’&#xff0c;scanner就不会打印输出&#xff0c;而是会累…...

编程日记 2024/2/3 22:13:49

彻底解决 MAC Android Studio gradle async 时出现 “connect timed out“ 问题

最近在编译一个比较老的项目&#xff0c;git clone 之后使用 async 之后出现一下现象&#xff1a; 首先确定是我网络本身是没有问题的&#xff0c;尝试几次重新 async 之后还是出现问题&#xff0c;网上找了一些方法解决了本问题&#xff0c;以此来记录一下问题是如何解决的。 …...

编程日记 2024/2/3 22:09:45

计算机网络第4章（网络层）

4.1、网络层概述 简介 网络层的主要任务是实现网络互连&#xff0c;进而实现数据包在各网络之间的传输 这些异构型网络N1~N7如果只是需要各自内部通信&#xff0c;他们只要实现各自的物理层和数据链路层即可 但是如果要将这些异构型网络互连起来&#xff0c;形成一个更大的互…...

编程日记 2024/2/3 22:04:41

SpringbootWeb案例

准备工作 需求说明 部门管理 部门管理功能开发包括&#xff1a;查询部门列表、删除部门、新增部门、修改部门   员工管理功能开发包括&#xff1a;查询员工列表(分页、条件)、删除员工、新增员工、修改员工 环境搭建 环境搭建步骤&#xff1a;1. 准备数据库表(dept、emp)…...

编程日记 2024/2/3 22:00:36

【初中生讲机器学习】4. 支持向量机算法怎么用？一个实例带你看懂！

创建时间&#xff1a;2024-02-02 最后编辑时间&#xff1a;2024-02-03 作者&#xff1a;Geeker_LStar 你好呀~这里是 Geeker_LStar 的人工智能学习专栏&#xff0c;很高兴遇见你~ 我是 Geeker_LStar&#xff0c;一名初三学生&#xff0c;热爱计算机和数学&#xff0c;我们一起加…...

编程日记 2024/2/3 21:57:31

CentOS下安装vlc

一、引言 vlc是一跨多媒体播放器&#xff0c;可以播放本地媒体文件和网络串流&#xff0c;帮助我们排查音视频开发过程中遇到的问题。大部分情况下&#xff0c;我们只需要在Windows系统下安装vlc就可以了。但有一种情况是需要在Linux下安装vlc的&#xff1a;我们的音视频拉流软…...

编程日记 2024/2/3 21:56:30

概率论中的全概率公式、贝叶斯公式解析

全概率公式 定义 全概率公式是用来计算一个事件的概率&#xff0c;这个事件可以通过几个互斥事件的并集来表示。这几个互斥事件称为“完备事件系”。实质是由原因推结果。 公式 用途 全概率公式通常用于计算一个事件的总概率&#xff0c;特别是当这个事件与几个不同的因素相关…...

编程日记 2024/2/3 21:54:28

亿赛通-数据泄露防护(DLP)UploadFileList；login接口存在任意文件读取漏洞 附POC软件

@[toc] 亿赛通-数据泄露防护(DLP)UploadFileList;login接口存在任意文件读取漏洞 附POC软件 免责声明：请勿利用文章内的相关技术从事非法测试，由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失，均由使用者本人负责，所产生的一切不良后果与文…...

编程日记 2024/2/3 21:51:25

如何使用 Google 搜索引擎保姆级教程（附链接）

一、介绍 "Google语法"通常是指在 Google 搜索引擎中使用一系列特定的搜索语法和操作符来精确地定义搜索查询。这些语法和操作符允许用户过滤和调整搜索结果&#xff0c;提高搜索的准确性。 二、安装 Google 下载 Google 浏览器 Google 官网https://www.google.c…...

编程日记 2024/2/3 21:45:20

SpringBoot实现轻量级接口反向代理、转发

目录 1、基本的对象1.1 配置类1.2 实体DTO1.3 路由代理拓展器1.4 请求对象 RestTemplate 2、核心转发代码3、暴露接口4、基础配置 前言&#xff1a;想实现一个轻量级的接口反向代理和转发的一个接口服务&#xff0c;可以通过这个服务做一些需要认证才能访问的接口给到前端使用&…...

编程日记 2024/2/3 21:40:15

算法训练营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值相等&#xff…...

编程日记 2024/2/3 21:39:14

延伸与应用（三）婚姻与经济、运动、宗教、科技与经济

53&#xff0e;幸福婚姻的经济ABC方程式 夫以信先其妇&#xff0c;则妇以信顺其夫。上秉常以化下&#xff0c;下服常而应上&#xff0c;其不化者&#xff0c;百未有一也。 ——《傅子》&#xff0c;傅玄&#xff08;217—278&#xff09; 在现代的小家庭中&#xff0c;由于家庭…...

编程日记 2024/2/3 21:38:13

mac上，配置bundletool，将aab转为apk

1.第一步打开终端&#xff0c;安装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&#xff0c;脚本命令前加 java -jar bundletool-all-1.5.0.j…...

编程日记 2024/2/3 21:37:11

wangEditor v4的简单使用

当前文档是 wangEditor v4 版本的。 wangEditor v5 已经正式发布&#xff0c;可参考文档。 v5 发布之后&#xff0c;v4 将不再开发新功能。 介绍 English documentation wangEditor4 —— 轻量级 web 富文本编辑器&#xff0c;配置方便&#xff0c;使用简单。 官网&#…...

编程日记 2024/2/3 21:30:04

简单实践 java spring boot 自动配置模拟

1.概要 1.1 需求&#xff0c;自己写一个redis-spring-boot-starter模拟自动配置 自动配置就是在引入*-starter坐标后&#xff0c;可以已经spring框架的规则实现一些Bean的自动注入&#xff0c;并设置一些参数的默认值&#xff0c;且也可以在引入的工程中修改这些配置的值。这…...

编程日记 2024/2/3 21:28:02

BeanDefinition学习

Spring版本5.1.x Spring中的BeanDefinition是一个接口&#xff0c;用于描述Spring容器中Bean的元数据。BeanDefinition描述了Bean的各种属性&#xff0c;如名称、依赖关系、初始化方法等。这个接口通常用于在Spring的IoC容器中注册Bean&#xff0c;并且当容器需要创建Bean实例…...

编程日记 2024/2/3 21:26:00

ASP.NET的GridView控件中，实现同列内容合并

在ASP.NET的GridView控件中&#xff0c;实现同列内容合并的方法主要有两种&#xff1a;一种是使用RowDataBound事件&#xff0c;另一种是使用自定义定义函数 使用RowDataBound事件 这种方法是在GridView的每一行绑定数据时&#xff0c;比较当前行和前一行的同一列的值&#x…...

编程日记 2024/2/3 21:23:57

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

编程新知 2025/12/7 23:28:25

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

编程新知 2025/12/12 10:34:15

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

编程新知 2025/12/15 19:07:10

脑机新手指南（七）：OpenBCI_GUI：从环境搭建到数据可视化（上）

一、OpenBCI_GUI 项目概述 &#xff08;一&#xff09;项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台&#xff0c;其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言&#xff0c;首次接触 OpenBCI 设备时&#xff0c;往…...

编程新知 2025/12/15 15:29:40

数学建模-滑翔伞伞翼面积的设计，运动状态计算和优化 ！

我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态，并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...

编程新知 2025/12/14 0:54:05

【实施指南】Android客户端HTTPS双向认证实施指南

&#x1f510; 一、所需准备材料 证书文件&#xff08;6类核心文件&#xff09; 类型 格式 作用 Android端要求 CA根证书 .crt/.pem 验证服务器/客户端证书合法性 需预置到Android信任库 服务器证书 .crt 服务器身份证明 客户端需持有以验证服务器 客户端证书 .crt 客户端身份…...

编程新知 2025/9/15 14:56:23

【1】跨越技术栈鸿沟：字节跳动开源TRAE AI编程IDE的实战体验

2024年初&#xff0c;人工智能编程工具领域发生了一次静默的变革。当字节跳动宣布退出其TRAE项目&#xff08;一款融合大型语言模型能力的云端AI编程IDE&#xff09;时&#xff0c;技术社区曾短暂叹息。然而这一退场并非终点——通过开源社区的接力&#xff0c;TRAE在WayToAGI等…...

编程新知 2025/12/16 7:07:24

SQL注入篇-sqlmap的配置和使用

在之前的皮卡丘靶场第五期SQL注入的内容中我们谈到了sqlmap&#xff0c;但是由于很多朋友看不了解命令行格式&#xff0c;所以是纯手动获取数据库信息的 接下来我们就用sqlmap来进行皮卡丘靶场的sql注入学习&#xff0c;链接&#xff1a;https://wwhc.lanzoue.com/ifJY32ybh6vc…...

编程新知 2025/12/8 23:31:43

python可视化：俄乌战争时间线关键节点与深层原因

俄乌战争时间线可视化分析&#xff1a;关键节点与深层原因 俄乌战争是21世纪欧洲最具影响力的地缘政治冲突之一&#xff0c;自2022年2月爆发以来已持续超过3年。 本文将通过Python可视化工具&#xff0c;系统分析这场战争的时间线、关键节点及其背后的深层原因&#xff0c;全面…...

编程新知 2025/12/14 20:54:37

设计模式域——软件设计模式全集

摘要 软件设计模式是软件工程领域中经过验证的、可复用的解决方案&#xff0c;旨在解决常见的软件设计问题。它们是软件开发经验的总结&#xff0c;能够帮助开发人员在设计阶段快速找到合适的解决方案&#xff0c;提高代码的可维护性、可扩展性和可复用性。设计模式主要分为三…...

编程新知 2025/12/12 17:01:46