React 入门:使用 create-react-app 创建 react 17 版本的应用
本文详细介绍了如何把通过 create-react-app 创建的 react18 版本的应用降级为 react17 版本。
自从 react 18 最近发布以来,你可能已经注意到最近我们使用 create-react-app
创建 React 应用都是 18 这个版本的。
但我们现在的学习这个视频教程中用的是 react 17 的版本,而且现在并不是所有的包都支持 react 的这个最新版本。
所以现在为了更好的学习效果,我们就需要想办法安装 react 17 版本的 react 应用。
当然,如果你在安装某些包时,我们可能会遇到 react 版本方面的问题(如下图所示)那么本文或许也能帮到你。
开始本文的主题,我们如何在 create-react-app
创建 react app 时,对 react 的版本进行降级,从 react 18 降级到 react 17,具体步骤如下:
-
首先,还是通过
create-react-app
创建一个名为my-project
的应用:npm create-react-app my-project
当然,此时创建的应用 react 的版本还是 18。
-
在编辑器中打开上面创建的项目目录,下图为在 VSCode 中打开的效果如下:
-
调整 package.json 文件:
- React and react-dom:设置"react"和"react-dom"版本为你想要降级到的版本,本文是从 18 降级到 17。
- testing-library/react:这个包从 13 降级到 12。
-
删除包锁文件 package-lock.json。
-
删除 node-modules 文件夹,以便后续能正确地重新安装正确的依赖项。
-
调整 src/index.js 文件:
因为它是基于 react 和 react-dom 的 18 版本生成的,需要调整为 react 17 版本支持的方式。- React and react-dom:将
react-dom/client
调整为react-dom
。 - root 变量:将
document.getElementById('root')
直接赋值为 root 变量。 - render:将
root.render
调整为ReactDOM.render
。
- React and react-dom:将
-
在 my-project 根目录执行
npm install
重新安装依赖项。安装过程中,你可能会有一些警告,只要不是报错 Error , 忽略即可。如下图所示结果即表示降级安装成功。 -
运行
npm start
启动项目后,从浏览器控制台查看 react 版本。
至此,我们已经完成了使用create-react-app
创建的应用从 react 18 降级到 react 17 版本。希望这篇文章能对你有所帮助。
更多推荐
所有评论(0)