1:全局安装create-react-app
npm install -g create-react-app
2:切换到项目要创建的目录下
cd /d G:\vsCode_project\react
3:使用脚手架命令创建工程
create-react-app 项目名
项目名命名要遵循npm包命名规范:数字、小写字母、_
4:错误解决:
当执行3创建工程时,可能会出现下面的错误:
原因解析:
@testing-library/react@13.4.0
需要 react@^18.0.0
,而你的项目中使用的是 react@19.0.0。
由于本地使用的npm镜像源是淘宝的,很多库都还没有及时更新适配react19导致的。
解决办法:
一:逐步解决法:
缺点:繁琐
优点:错误分析直观,易于深入了解错误原因。
(1)、先使用cd命令切换到创建的项目名的文件夹内。
(2)、
打开工程名对应的文件夹test1,找到package.json文件打开。
把里面的 react 和 react-dom 由19版本改为18版本。
然后在终端里执行以下命令安装18版本。
npm install
(3)、在终端执行以下命令启动项目
npm start
(4)、浏览器中打开以下地址访问工程站点。
localhost:3000
如果站点运行时浏览器页面提示以下错误:
此时终端里也有了错误提示:
解决办法:
(5)、终端里执行以下命令安装该丢失的web-vitals模块。
npm install web-vitals
(6)、终端执行以下命令重新启动工程。
npm start
此时浏览器里的项目就正常启动了。
二:一步到位解决法:
缺点:无法一步一步了解错误信息。
优点:方便快捷。
(1)、进入创建工程的目录内,把node_modules文件夹和package-lock.json文件删除。
(2)、打开配置文件package.json,按照下面的依赖项进行配置。
"dependencies": {"cra-template": "1.2.0","react": "^18.0.0","react-dom": "^18.0.0","@testing-library/react": "^13.4.0","react-scripts": "5.0.1","web-vitals":"^2.1.4"}
(3)、终端切换到工程目录内,使用npm install命令安装依赖包。
(4)、使用以下命令启动工程。
npm start
(5)、复制 http://localhost:3000 在浏览器中打开。
项目启动成功。