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

通过 React 来构建界面

news 2025/6/12 16:47:26

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

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2025/6/11 14:09:52

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

编程新知 2025/6/11 13:57:53

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2025/6/11 12:49:41

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2025/6/11 12:06:45

P3 QT项目----记事本（3.8）

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2025/6/12 11:15:20

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

编程新知 2025/6/11 10:01:45

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/6/11 7:57:01

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

编程新知 2025/6/12 8:37:08

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

编程新知 2025/6/11 5:52:26

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

编程新知 2025/6/12 16:35:33