React升级到18版本

前言

升级前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 />)

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

计算机领域十大天神

✍️作者简介&#xff1a;沫小北/码农小北&#xff08;专注于Android、Web、TCP/IP等技术方向&#xff09; &#x1f433;博客主页&#xff1a;沫小北/码农小北 开源中国、稀土掘金、51cto博客、博客园、知乎、简书、慕课网、CSDN &#x1f514;如果文章对您有一定的帮助请&…

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

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

git的简单使用

git 的简单使用 前言&#xff1a; 为了方便理解&#xff0c;文中一些内容表达的不是十分准确&#xff0c;如有错误&#xff0c;欢迎大家友善的指出。 接下来就开始了&#xff01;&#xff01; 使用git其实就是围绕下面这个图展开的&#xff0c;大家可以先看下图&#xff0c…

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

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

【开源】基于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…

Pandas 将DataFrame中单元格内的字典dict拆分成单独的列

核心是应用 pd.Series&#xff0c; 具体操作如下&#xff1a; import pandas as pddata {years: [2025],week: [{f"week_{i}": i for i in range(3)}]} df pd.DataFrame(data) print(df)df pd.concat([df, df[week].apply(pd.Series)], axis1).drop(week, axis1)…

java学习part03基本类型

22-变量与运算符-标识符的使用_哔哩哔哩_bilibili 1.标识符&#xff08;变量&#xff09;命名规则 2.变量类型 3.整型 4.浮点型 5.char字符 6.布尔boolean 7.基本类型的自动提升 8.强制转换 9.String String只能连接 会把其他类型的表面量转成字符串比如"true" &…

C++--第一个代码hello world

本篇开启C之旅... 先上代码&#xff1a; #include<iostream> using namespace std; int main() {cout << "hello world\n";return 0; }一. #include <iostream> 类比C语言中的#include<stdio.h>, #include <iostream>也是预处理指令…

喜讯 客户工艺线顺利通线

带你了解CiMEMS微纳制造工艺线 随着国内智能网联汽车、智能终端、可穿戴设备与消费电子的高速发展&#xff0c;以集成微纳系统&#xff08;Micro-electro-mechanical Systems&#xff0c;MEMS&#xff09;为代表的主要应用于激光雷达、汽车电子、环境感知与智能传感器的芯片&a…

[CISCN 2023 华北]pysym

源码如下 from flask import Flask, render_template, request, send_from_directory import os import random import string app Flask(__name__) app.config[UPLOAD_FOLDER]uploads app.route(/, methods[GET]) def index():return render_template(index.html) app.route…

Wordpress页面生成器:Elementor 插件制作网站页面教程(图文完整)

本文来教大家怎么使用Wordpress Elementor页面编辑器插件来自由创建我们的网页内容。很多同学在面对建站的时候,一开始都是热血沸腾信心满满的,等到实际上手的时候就会发现有很多问题都是无法解决的,希望本篇Elementor插件使用指南能够帮助到你。 Wordpress Elementor页面编…

【机器学习】 逻辑回归算法:原理、精确率、召回率、实例应用(癌症病例预测)

1. 概念理解 逻辑回归&#xff0c;简称LR&#xff0c;它的特点是能够将我们的特征输入集合转化为0和1这两类的概率。一般来说&#xff0c;回归不用在分类问题上&#xff0c;但逻辑回归却能在二分类(即分成两类问题)上表现很好。 逻辑回归本质上是线性回归&#xff0c;只是在特…

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

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

通过内网穿透技术实现USB设备共享(USB Redirector)逆向共享

文章目录 前言1. 安装下载软件1.1 内网安装使用USB Redirector1.2 下载安装cpolar内网穿透 2. 完成USB Redirector服务端和客户端映射连接3. 设置固定的公网地址 前言 USB Redirector是一款方便易用的USB设备共享服务应用程序&#xff0c;它提供了共享和访问本地或互联网上的U…

Leetcode—2760.最长奇偶子数组【简单】

2023每日刷题&#xff08;三十一&#xff09; Leetcode—2760.最长奇偶子数组 实现代码 #define MAX(a, b) ((a > b) ? (a): (b)) int longestAlternatingSubarray(int* nums, int numsSize, int threshold){int ans 0;int i 0;while(i < numsSize) {if(nums[i] >…

Nginx的使用

Nginx的使用 1、反向代理一 实现效果&#xff1a;使用 nginx 反向代理&#xff0c;访问 www.123.com 直接跳转到 127.0.0.1:8080 准备工作 : &#xff08;1&#xff09;在 linux 系统安装 tomcat&#xff0c;使用默认端口 8080 &#xff08;2&#xff09;tomcat 安装文件放…

基于Vue+SpringBoot的大学计算机课程管理平台 开源项目

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 实验课程档案模块2.2 实验资源模块2.3 学生实验模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 实验课程档案表3.2.2 实验资源表3.2.3 学生实验表 四、系统展示五、核心代码5.1 一键生成实验5.2 提交实验5.3 批阅实…

2023数维杯数学建模C题完整版本

已经完成全部版本&#xff0c;获取请查看文末下方名片 摘要 随着人工智能在多个领域的快速发展&#xff0c;其在文本生成上的应用引起了广泛关注。本研究聚焦于辨识人工智能&#xff08;AI&#xff09;生成文本的基本规则&#xff0c;并探究AI文本的检测及其与人类文本的区分…

BlockCanary

卡顿检测框架,比如Activity Service ,BroadcastResoleve等,或者有延时执行造成卡顿 针对这些情况进行监控 引用: 初始化: 捕获异常结果: 源码: 使用双重锁的单例模式,enable 跳转到通知 主线程的监视器 Loop循环调用消息 根据dispathMessage判断是否造成卡顿,也就是消息的间…

「Verilog学习笔记」使用8线-3线优先编码器Ⅰ实现16线-4线优先编码器

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 分析 当EI10时、U1禁止编码&#xff0c;其输出端Y为000&#xff0c;GS1、EO1均为0。同时EO1使EI00&#xff0c;U0也禁止编码&#xff0c;其输出端及GS0、EO0均为0。由电路…