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)

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

react18的写法(index.js)

react 复制代码
import App from "./App.js"
import { createRoot } from "react-dom/client"
 
createRoot(document.getElementById("root")).render(<App />)
相关推荐
周全全5 分钟前
基于 Vue 和 Spring Boot 实现滑块验证码的机器验证
前端·vue.js·spring boot
汪子熙20 分钟前
走进 Fundamental NGX Platform:从 SAP 设计体系到高生产力组件层
前端·javascript·面试
拉不动的猪33 分钟前
单点登录全流程小姐
前端·javascript·面试
菜鸟小九41 分钟前
html、css(javaweb第一天)
前端·css·html
y东施效颦1 小时前
uni-app页面发布测试环境出现连接服务器超时,点击屏幕重试解决方案
前端·javascript·vue.js·uni-app·vue
大熊程序猿1 小时前
《开篇:课程目录》
前端·c#
秋田君1 小时前
深入理解JavaScript设计模式之单例模式
javascript·单例模式·设计模式
摸鱼仙人~2 小时前
React中子传父组件通信操作指南
前端·javascript·react.js
程序员阿超的博客2 小时前
React事件处理:如何给按钮绑定onClick点击事件?
前端·javascript·react.js
前端小咸鱼一条2 小时前
Vue中渲染函数的使用
javascript·vue.js·ecmascript