React升级到18版本

news2024/11/26 17:32:45

前言

升级前react版本是16.9.0,react-dom版本为16.9.0,react-router-dom为5.1.2版本。

安装

// npm
npm install react react-dom

// yarn
yarn add react react-dom

// pnpm
pnpm install react react-dom

启动项目

此时,项目可以正常运行,但是控制台报如下警告,译为:警告:ReactDOM。React 18不再支持 render。使用createRoot代替。在你切换到新的API之前,你的应用会表现得像在运行React 17一样。了解更多信息:https://reactjs.org/link/switch-to-createroot

在这里插入图片描述

react17及之前版本的写法(index.js)

import App from "./App.js"
import ReactDOM from "react-dom"
 
render(<App />, document.getElementById("root"))

react18的写法(index.js)

import App from "./App.js"
import { createRoot } from "react-dom/client"
 
createRoot(document.getElementById("root")).render(<App />)

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

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

相关文章

【python】——控制语句和组合数据类型(其二)

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…

【开源】基于JAVA的服装店库存管理系统

项目编号&#xff1a; S 052 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S052&#xff0c;文末获取源码。} 项目编号&#xff1a;S052&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 角色管理模块2.3 服…

OpenCV技术应用(3)— 把.png图像保存为.jpg图像

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。本节课就手把手教你如何把.png图像保存为.jpg图像&#xff0c;希望大家学习之后能够有所收获~&#xff01;&#x1f308; 目录 &#x1f680;1.技术介绍 &#x1f680;2.实现代码 &#x1f680;1.技术介绍 如果在电脑某…

image is being used by stopped container 7d2ff8620f3b 删除镜像失败怎么办

这个错误信息表明&#xff0c;镜像 55860ee0cd73 正被一个已停止的容器 7d2ff8620f3b 使用&#xff0c;因此无法正常删除。要解决这个问题&#xff0c;你有两个选择&#xff1a; 删除使用该镜像的容器&#xff1a;首先删除引用该镜像的容器&#xff0c;然后再删除镜像。这可以通…

到站上海!见证这座零碳园区的绿色低碳新选择

不知不觉中&#xff0c;科士达新能源的零碳足迹已遍布五洲四海&#xff0c;为全球各地&#xff0c;千行百业、千家万户&#xff0c;带去了源源不断的绿色能源和低碳新选择。再次启航&#xff0c;这一站&#xff0c;抵达上海世博园。 小机身&#xff0c;大配置&#xff0c;灵活适…

扬帆未来,成就架构之路:十本书籍助力你的架构师梦想 | 文末送书

相信大家都对未来的职业发展有着憧憬和规划&#xff0c;要做架构师、要做技术总监、要做CTO。对于如何实现自己的职业规划也都信心满满&#xff0c;努力工作、好好学习、不断提升自己。 规划职业发展 当涉及未来职业发展时&#xff0c;我们都怀揣着远大的目标和野心。对许多人…

移动硬盘打不开?正确操作方法分享!

“我的移动硬盘用了好几年了&#xff0c;但是不知道为什么&#xff0c;最近每次把移动硬盘插入电脑都显示无法打开。我还有一些很重要的数据在里面呢&#xff0c;有什么比较好的方法可以解决这个问题吗&#xff1f;” 作为一个便捷的存储工具&#xff0c;移动硬盘给我们带来了很…

【汇编】内存中字的存储、用DS和[address]实现字的传送、DS与数据段

文章目录 前言一、内存中字的存储1.1 8086cpu字的概念1.2 16位的字存储在一个16位的寄存器中&#xff0c;如何存储&#xff1f;1.3 字单元 二、用DS和[address]实现字的传送2.1 字的传送是什么意思&#xff1f;2.2 要求原理解决方案&#xff1a;DS和[address]配合8086传送16字节…

【LeetCode刷题-滑动窗口】--340.至多包含K个不同字符的最长子串

340.至多包含K个不同字符的最长子串 class Solution {public int lengthOfLongestSubstringKDistinct(String s, int k) {int len s.length();if(len < k){return len;}//滑动窗口的左右指针int left 0,right 0;//定义一个哈希映射HashMap<Character,Integer> hash…

外汇天眼:世界级的交流碰撞!Wiki Finance EXPO悉尼2023圆满落幕

11月16日对于外汇天眼来说是个特殊的日子&#xff0c;而对于整个世界金融界来说也是一个意义非凡的日子&#xff0c;由WikiGloba展会品牌WiKiEXPO举办的2023 Wiki Finance Expo在悉尼富丽敦酒店顺利举办并圆满落幕。 金融科技作为金融业创新变革的重要引擎&#xff0c;在全球数…

【Python基础篇】字符串的拼接

博主&#xff1a;&#x1f44d;不许代码码上红 欢迎&#xff1a;&#x1f40b;点赞、收藏、关注、评论。 格言&#xff1a; 大鹏一日同风起&#xff0c;扶摇直上九万里。 文章目录 一 Python中的字符串拼接二 join函数拼接三 os.path.join函数拼接四 号拼接五 &#xff0c;号…

【开源】基于JAVA的高校宿舍调配管理系统

项目编号&#xff1a; S 051 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S051&#xff0c;文末获取源码。} 项目编号&#xff1a;S051&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能需求2.1 学生端2.2 宿管2.3 老师端 三、系统…

⑩② 【MySQL索引】详解MySQL`索引`:结构、分类、性能分析、设计及使用规则。

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ MySQL索引 ⑩② 【MySQL索引】1. 索引2. 索引的…

Spring Cloud Netflix微服务组件-Hystrix

目录 Hystrix的主要功能 传统容错手段 超时机制 应用容错三板斧 超时机制 舱壁隔离 熔断降级 侵入式Command用法 改进版一&#xff1a;ribbon与hystrix组合 改进版二&#xff1a;feign与hystrix组合 Hystrix三态转换图 源码分析 流程图 原理流程图 核心实现流程…

【开源】基于Vue.js的社区买菜系统的设计和实现

项目编号&#xff1a; S 011 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S011&#xff0c;文末获取源码。} 项目编号&#xff1a;S011&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、系统设计2.1 功能模块设计2.1.1 数据中心模块2.1…

11.13ASM图,FSM的一些verliog实现,串并转换

ASM图 除法器 FSM的verilog实现 状态机的状态就不用编码&#xff0c;而是用参数的定义进行转换 1. 在次态确定当中&#xff0c;只要w和y发生变化&#xff0c;就进行操作 在次态当中&#xff0c;只要时钟上升沿来临或者复位信号&#xff0c;就进行操作 2 Mealy型状态机 串…

CNN(卷积神经网络)、RNN(循环神经网络)、DNN(深度神经网络)的内部网络结构有什么区别?

【导师不教&#xff1f;我来教&#xff01;】同济计算机博士半小时就教会了我五大深度神经网络&#xff0c;CNN/RNN/GAN/transformer/LSTM一次学会&#xff0c;简直不要太强&#xff01;_哔哩哔哩_bilibili了解的五大神经网络&#xff0c;整理笔记如下&#xff1a; 视频是唐宇…

瑞萨RZ/G2L平台 初起动(SD卡启动)

文章目录 一 准备条件1 工具2 硬件3 镜像 二 烧录SD卡启动盘三 写Bootloader1 烧录文件2 启动烧录3 烧录 四 启动设置 一 准备条件 1 工具 ** BalenaEtcher&#xff08;俗称“ Etcher”&#xff09;&#xff0c;是一款快速将系统镜像文件&#xff08; .iso 或 .img 或 .zip或…

数据库实验报告(六)

实验报告&#xff08;六&#xff09; 1、实验目的 &#xff08;1&#xff09; 掌握关联查询的用法 &#xff08;2&#xff09; 掌握集合查询的区别和用法 &#xff08;3&#xff09; 掌握EXISTS的用法 2、实验预习与准备 &#xff08;1&#xff09; 了解ANY&…

精彩回顾|从架构到实践,AntDB融合型数据库揭秘

当今社会中的信息除了“多”&#xff0c;人们对于“效率”和“速度”的要求也越来越高。譬如&#xff0c;对于很多企业决策者来说&#xff0c;在当前的经济形势下需要尽一切可能降本增效。过去每周看看经营报表的习惯&#xff0c;现在慢慢转变为实时可视化分析企业当前的经营状…