第
react创建项目启动报错的完美解决方法
目录一、预备知识：二、创建项目步骤：三、启动项目时可能出现的报错：四、Todolist项目相关库：五、GitHub搜索案例相关库：六、尚硅谷路由案例相关库：七、UI库案例相关库：八、redux相关库：
一、预备知识：
npm(也可以用yarn，本文以npm为例)
npm介绍
全称为NodePackageManager，是随同NodeJS一起安装的包管理工具。允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用
npm命令
npm-v来测试是否成功安装查看当前目录已安装插件：npmlist使用npm下载插件：npminstall[-g][--save-dev]name使用npm更新插件：npmupdate[-g][--save-dev]name
注释：
install可以简写为i，[]表示可选，表示必选
name：包（插件库）名
[-g]：全局安装。将会安装在C：\Users\Administrator\AppData\Roaming\npm，并且写入系统环境变量；全局安装可以通过命令行，在任何地方调用；
非全局安装：将会安装在当前定位目录;，本地安装将安装在定位目录的node_modules文件夹下，通过要求调用;
[--save-dev]：写入package.json的dependencies需要发布到生产环境，比如react，vue全家桶，ele-ui等ui框架，这些项目运行时必须使用的插件，需要放到dependencies。
cnpm
淘宝团队做的国内镜像，因为npm的服务器位于国外可能会影响安装。淘宝镜像安装速度一般更快。安装：命令提示符执行
npminstallcnpm-g--registry=cnpm-v来测试是否成功安装
二、创建项目步骤：
1.全局安装：npminstall-gcreate-react-app
2.切换到想创建项目的目录后，新建脚手架（hello-react）：create-react-apphello-react
3.进入项目文件夹：cdhello-react
4.启动项目：npmstart
注释：
①项目正常启动成功后，浏览器会出现以下页面
②用vscode打开项目文件夹可以看的有以下文件：
③如果需要暴露webpacke配置(创建完项目后不要做任何操作)，直接执行以下代码：(此操作不可逆！)
npmruneject
然后输入y，可以看见多了俩个文件夹：
暴露文件的作用：比如按需引入antd+自定主题
④安装好脚手架后，可直接引入以下包
//引入react核心组件主库
importReact,{Component}fromreact
//引入ReactDOM子库
importReactDOMfromreact-dom
三、启动项目时可能出现的报错：
1.react-app-rewired不是内部或外部命令，也不是可运行的程序或批处理文件。
原因：可能是由于create-react-app出现丢包缺陷，手动安装包后，需要重新安装，这样node_modules/.bin/目录下才会重新出现react-scripts的文件，从而解决问题。
解决：npminstall或npminstallreact-scripts
（若因为某些原因导致包出故障，就删除node_modules文件夹，重新npminstall）
2.
./src/App.jsx
Modulenotfound:Cantresolve@ant-design/iconsinC:\Users\...
原因：没有安装@ant-design/pro-field
解决：npminstall@ant-design/pro-field--save
四、Todolist项目相关库：
npmiprop-types
//对接收的props进行：类型、必要性的限制
importPropTypesfromprop-types
npminanoid
//生成唯一标识一般用来