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，具体步骤如下：

首先，还是通过 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 版本。
至此，我们已经完成了使用 create-react-app 创建的应用从 react 18 降级到 react 17 版本。希望这篇文章能对你有所帮助。

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

react快速开始(二)-使用脚手架Create React App创建react应用
文章目录 react快速开始(二)-Create React App入门什么是Create React App 快速开始使用IDE webstrom创建react项目 create react a ...
React入门：从零搭建一个React项目
一.初始化项目新建文件夹,文件名firstreact 文件夹名称不要用react,node这类关键字,后面使用插件时会发生错误. init项目环境,项目信息可默认或自行修改 mkdir firstr ...
B站尚硅谷React入门教程
视频链接:React全家桶(技术栈) 第1章:React入门 1.1. React简介 1.1.1 官网英文官网: https://reactjs.org/ 中文官网: https://react. ...
基于脚手架创建react项目
React(一)使用脚手架创建React项目: 转自: https://www.cnblogs.com/yulingjia/p/9583244.html D:\workbench_ws>npm ...
视频教程-2019 react入门至高阶实战，含react hooks-ReactJS
2019 react入门至高阶实战,含react hooks 从事前端开发近5年时间,曾任职于丽珠集团等大型企业担任高级前端开发工程师职位,积累了很多大厂的前端开发经验. 目前处于创业期,正在筹备自己 ...
react 组件引用组件_React Elements VS React组件
react 组件引用组件 A few months ago I posted to Twitter what I thought was a simple question: 几个月前,我在Twitt ...
利用 Create React Native App 快速创建 React Native 应用
React Native App简介打开React Native官方文档你会发现,在Getting Started章节下新添加一个Quick Start Tab页.Quick Start是在v0.4 ...
快速创建React Native App
告诉大家一个好消息,为大家精心准备的React Native视频教程发布了,大家现可以看视频学React Native了. 快速创建React Native App 查看最新的React Native ...
React Native零基础+React Native重入门到精通+混合APP完整版
第1章介绍课程目标和学习内容包括课程概述.课程安排.学习前提.讲授方式等方面的介绍,最后演示了整个招聘App的功能,让同学们对课程项目有一个直观的了解. 1-1 课程导学第2章知识储备 2-1 ...

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

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

最新文章

热门文章