react 18 版本降级：使用 create-react-app 创建 react 17 版本的应用-Javascript前端- WEB程序开发笔记

react 18 版本降级：使用 create-react-app 创建 react 17 版本的应用

原创

作者：程序员三丰

发布时间：2023-03-12 22:16

标签： Javascript React

浏览量：1522

自从 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。
在 my-project 根目录执行 npm install 重新安装依赖项。安装过程中，你可能会有一些警告，只要不是报错 Error , 忽略即可。如下图所示结果即表示降级安装成功。
运行 npm start 启动项目后，从浏览器控制台查看 react 版本。