通过 React 来构建界面

1- 通过 React 来构建界面

第1步:下载所需要的二个库文件至本地,如果需要加载指定版本的 reactreact-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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/659364.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学习鸿蒙基础(3)

1.组件重用样式 如果每个组件的样式都需要单独设置&#xff0c;在开发过程中会出现大量代码在进行重复样式设置&#xff0c;虽然可以复制粘贴&#xff0c;但为了代码简洁性和后续方便维护&#xff0c;可以采用公共样式进行复用的装饰器Styles。 Styles装饰器可以将多条样式设置…

嵌入式学习 Day15

一. 指针类型辨析 二. 传参辨析 三. 结构体 1.定义结构体 练习&#xff1a; 2. 结构体大小 8&#xff0c;12

Redis核心技术与实战【学习笔记】 - 10.浅谈CPU架构对Redis性能的影响

概述 可能很多人都认为 Redis 和 CPU 的关系简单&#xff0c;Redis 的线程在 CPU 上运行&#xff0c;CPU 快 Reids 处理请求的速度也很快。 其实&#xff0c;这种认知是片面的&#xff0c;CPU 的多核架构及多 CPU 结构&#xff0c;也会影响到 Redis 的性能。如果不了解 CPU 对…

[office] excel2010双向条形图制作 #经验分享#微信

excel2010双向条形图制作 本教程为大家介绍一下excel2010中excel2010双向条形图制作方法。 1.选中工作区域 2.点击插入-->图表,选择条形图 3.为美观可将中间竖线可去掉 4.方法是选中竖线,右击-->删除 5.接下来将图例靠上,选中图例,右击-->设置图例格式-->图例选项…

[Java 并发基础]多线程编程

文章参考&#xff1a; https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/Future.html https://juejin.cn/post/6970558076642394142 文章目录 线程的创建方式继承 Thread实现 Runnable 接口实现 Callable 接口使用 Lambda使用线程池 线程创建相关的 jdk源码Thr…

专业145+总分420+电子科技大学858信号与系统考研经验电子信息与通信

今年考研各门都相对发挥比较好&#xff0c;总分420&#xff0c;专业858信号与系统145&#xff0c;数学135顺利上岸电子科技大学&#xff0c;应群里很多学弟学妹要求&#xff0c;我总结一下自己的复习经验&#xff0c;希望可以在考研路上&#xff0c;助大家一臂之力。专业课&…

STM32F407移植OpenHarmony笔记5

继上一篇笔记&#xff0c;搭建好STM32的编译框架&#xff0c;编译出来的OHOS_Image.bin并不能跑不起来。 今天要在bsp里面添加一些代码&#xff0c;让程序能跑起来。 先从裸机点亮LED灯开始&#xff0c;准备以下3个文件:startup和system文件可以用OHOS官方代码。 /device/boar…

软考正式改为机考,对于考生有哪些影响?

1、报名费用可能会涨价 考虑到报名费用问题&#xff0c;软考初级考生可能会担心费用是否会涨价。需要指出的是&#xff0c;并非所有地区都会涨价&#xff0c;只有部分地区有可能涨价。 2、机考考试难度会降低吗&#xff1f; 如果实施机考&#xff0c;将是一次重大改革&#…

云计算概述(云计算类型、技术驱动力、关键技术、特征、特点、通用点、架构层次)(二)

云计算概述&#xff08;二&#xff09; &#xff08;云计算类型、技术驱动力、关键技术、特征、特点、通用点、架构层次&#xff09; 目录 零、00时光宝盒 一、云计算类型&#xff08;以服务的内容或形态来分) 二、云计算的12种技术驱动力 三、云计算的关键技术 四、云计…

Fiddler修改https请求与响应 bug修复变灰了选不了等 Fiddle对夜神模拟器抓包设置

不要修改别人的东西&#xff0c;不要修改别人的东西&#xff0c;不要修改别人的东西 只用于自己的网站&#xff0c;自己安全调试。 fiddler修改https请求 1、打到要改的请求 2、替换请求内容 3、开启捕获。操作产生请求。 4、fiddler里查看请求或响应数据 &#xff0c;确认成…

物流无人机在哪些场景最适合应用?

物流无人机在多种场景中都有应用潜力&#xff0c;以下是一些最适合的应用场景&#xff1a; 偏远地区配送&#xff1a;在偏远地区&#xff0c;传统配送方式成本高昂且效率低下&#xff0c;而物流无人机则可以通过空中航线直接送达目的地&#xff0c;大大缩短了配送时间和成本。…

编程语言比较—ruby,python,php比较

ruby语言 ruby语言是日本人开发的&#xff0c;在全球范围内广收欢迎的编程语言。这是一种经常被人评价"写代码很快乐"的编程语言&#xff0c;并且很容易学习。 ruby的ruby on rauls框架非常有名&#xff0c;不仅用于网页开发&#xff0c;而且也越来越多用于编程教育…

05 - 什么是路由协议

1 路由协议 路由协议&#xff08;英语&#xff1a;Routing protocol&#xff09;&#xff1a; 是一种指定数据包转送方式的网上协议。Internet网络的主要节点设备是路由器&#xff0c;路由器通过路由表来转发接收到的数据。 路由协议&#xff0c;根据转发策略进行分类&#xff…

探索智慧文旅:科技如何提升游客体验

随着科技的迅猛发展&#xff0c;智慧文旅已成为旅游业的重要发展方向。通过运用先进的信息技术&#xff0c;智慧文旅不仅改变了传统旅游业的运营模式&#xff0c;更在提升游客体验方面取得了显著成效。本文将深入探讨科技如何助力智慧文旅提升游客体验。 一、智慧文旅的兴起与…

mybatisplus乐观锁

在实体类的字段上加上Version注解 Version private Integer version; 配置插件 &#xff0c;spring boot 注解方式: Configuration MapperScan("com.dcqc.summarize.mapper") public class MybatisPlusConfig {/*** 旧版*/Beanpublic OptimisticLockerIntercepto…

Android开发学习-中级控件

Drawable Android把所有能够显示的图形都抽象为Drawable类(可绘制的)。 这里的图形不止是图片&#xff0c;还包括色块、画板、背景等。 包含图片在内的图形文件放在res目录的各个drawable目录下&#xff0c;其中drawable目录一般保存描述性的XML文件&#xff0c;而图片文件一…

MySQL原理(三)锁定机制(1)综述

一、介绍&#xff1a; 1、锁的本质 业务场景中存在共享资源&#xff0c;多个进程或线程需要竞争获取并处理共享资源&#xff0c;为了保证公平、可靠、结果正确等业务逻辑&#xff0c;要把并发执行的问题变为串行&#xff0c;串行时引入第三方锁当成谁有权限来操作共享资源的判…

idea/webstorm 创建Vue实例 Unresolved type Vue 处理方法

1.电脑本地安装node.js 官网下载 2. 其他: 未排除变量,前期试错(以下步骤配置了,但不确定对解决问题是否有帮助)

ubuntu下命令行安装指定版本的jdk,并在多jdk时指定默认版本

1、命令行安装指定版本的jdk&#xff1a; $ sudo apt update $ sudo apt install openjdk-xx-jdk #其中xx为指定的版本号码2、选择默认jdk版本 step1、打印当前系统中已安装jdk的相关信息 $ sudo update-alternatives --config java $ sudo update-alternatives --config …

Webpack的性能优化

减少构建时间&#xff1a;使用webpack的缓存功能&#xff0c;通过配置cache: true来利用缓存&#xff0c;减少重复构建时间。 使用多线程或并行构建&#xff0c;可以利用webpack的parallel-webpack或HappyPack插件来实现。 充分利用硬件资源&#xff0c;例如利用多核CPU或者SSD…