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

通过 React 来构建界面

news 2025/8/18 9:03:05

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

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

编程新知 2025/8/17 22:50:29

Python：操作 Excel 折叠

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

编程新知 2025/8/17 13:31:48

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

编程新知 2025/8/9 9:19:48

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2025/8/16 8:48:30

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2025/8/11 11:02:16

大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

编程新知 2025/7/19 3:59:22

深入浅出Diffusion模型：从原理到实践的全方位教程

I. 引言&#xff1a;生成式AI的黎明 – Diffusion模型是什么&#xff1f; 近年来&#xff0c;生成式人工智能&#xff08;Generative AI&#xff09;领域取得了爆炸性的进展&#xff0c;模型能够根据简单的文本提示创作出逼真的图像、连贯的文本&#xff0c;乃至更多令人惊叹的…...

编程新知 2025/8/11 1:39:43

二维FDTD算法仿真

二维FDTD算法仿真&#xff0c;并带完全匹配层&#xff0c;输入波形为高斯波、平面波 FDTD_二维/FDTD.zip , 6075 FDTD_二维/FDTD_31.m , 1029 FDTD_二维/FDTD_32.m , 2806 FDTD_二维/FDTD_33.m , 3782 FDTD_二维/FDTD_34.m , 4182 FDTD_二维/FDTD_35.m , 4793...

编程新知 2025/7/7 23:55:13

Vue3 PC端 UI组件库我更推荐Naive UI

一、Vue3生态现状与UI库选择的重要性 随着Vue3的稳定发布和Composition API的广泛采用&#xff0c;前端开发者面临着UI组件库的重新选择。一个好的UI库不仅能提升开发效率&#xff0c;还能确保项目的长期可维护性。本文将对比三大主流Vue3 UI库&#xff08;Naive UI、Element …...

编程新知 2025/8/16 1:50:54

HTTPS证书一年多少钱？

HTTPS证书作为保障网站数据传输安全的重要工具&#xff0c;成为众多网站运营者的必备选择。然而&#xff0c;面对市场上种类繁多的HTTPS证书&#xff0c;其一年费用究竟是多少&#xff0c;又受哪些因素影响呢&#xff1f; 首先&#xff0c;HTTPS证书通常在PinTrust这样的专业平…...

编程新知 2025/7/29 1:30:18