React 入门：使用 create-react-app 创建 react 17 版本的应用

自从 react 18 最近发布以来，你可能已经注意到最近我们使用 create-react-app 创建 React 应用都是 18 这个版本的。

但我们现在的学习这个视频教程中用的是 react 17 的版本，而且现在并不是所有的包都支持 react 的这个最新版本。

所以现在为了更好的学习效果，我们就需要想办法安装 react 17 版本的 react 应用。

当然，如果你在安装某些包时，我们可能会遇到 react 版本方面的问题（如下图所示）那么本文或许也能帮到你。

开始本文的主题，我们如何在 create-react-app 创建 react app 时，对 react 的版本进行降级，从 react 18 降级到 react 17，具体步骤如下：

1. 首先，还是通过 create-react-app 创建一个名为 my-project 的应用：

   npm create-react-app my-project
   

   当然，此时创建的应用 react 的版本还是 18。

2. 在编辑器中打开上面创建的项目目录，下图为在 VSCode 中打开的效果如下：

3. 调整 package.json 文件：

   • React and react-dom：设置"react"和"react-dom"版本为你想要降级到的版本，本文是从 18 降级到 17。
   • testing-library/react：这个包从 13 降级到 12。

4. 删除包锁文件 package-lock.json。

5. 删除 node-modules 文件夹，以便后续能正确地重新安装正确的依赖项。

6. 调整 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。

7. 在 my-project 根目录执行 npm install 重新安装依赖项。安装过程中，你可能会有一些警告，只要不是报错 Error , 忽略即可。如下图所示结果即表示降级安装成功。

8. 运行 npm start 启动项目后，从浏览器控制台查看 react 版本。
   至此，我们已经完成了使用 create-react-app 创建的应用从 react 18 降级到 react 17 版本。希望这篇文章能对你有所帮助。