react启动项目报错如何解决

npm run eject

//引入react核心组件主库import React, { Component } from 'react'//引入ReactDOM 子库import ReactDOM from 'react-dom'

npm i prop-types//对接收的props进行：类型、必要性的限制import PropTypes from 'prop-types'npm i nanoid//生成唯一标识 一般用来充当id或遍历时的indeximport {nanoid} from 'nanoid'id:nanoid()

npm install pubsub-js --save//消息订阅-发布机制import PubSub from 'pubsub-js'npm install axios//轻量级ajax请求库import axios from 'axios'

npm install --save react-router-dom//路由库，前端路由：value是component，用于展示页面内容；//      后端路由：value是function, 用来处理客户端提交的请求。import {BrowserRouter,HashRouter,NavLink,Link,Route} from 'react-router-dom'// V5及之前的版本才有以下三个import {Switch,Redirect,withRouter} from 'react-router-dom' // Switch:懒惰匹配  Redirect：重定向  withRouter：让一般组件具备路由组件所特有的API npm i -save-dev query-string// 对http请求所带的数据进行解析import qs from 'querystring'  import qs from 'qs'// qs.parse() 将字符串解析为对象// qs.stringify() //将对象解析为字符串（urlencoded编码）

//开源React UI组件库npm i antd// 主库import { Button,DatePicker } from 'antd';// 子库 图标等import {WechatOutlined,WeiboOutlined,SearchOutlined} from '@ant-design/icons'// const 要写在 import后面const { RangePicker } = DatePicker;//按需引入 自定义主题步骤：//1.安装依赖yarn add react-app-rewired customize-cra babel-plugin-import less less-loader//2.修改package.json						"scripts": {							"start": "react-app-rewired start",							"build": "react-app-rewired build",							"test": "react-app-rewired test",							"eject": "react-scripts eject"						}, //3.根目录下创建config-overrides.js					const { override, fixBabelImports,addLessLoader} = require('customize-cra');					module.exports = override(						fixBabelImports('import', {							libraryName: 'antd',							libraryDirectory: 'es',							style: true,						}),						addLessLoader({							lessOptions:{								javascriptEnabled: true,								modifyVars: { '@primary-color': 'green' },							}						}),					);

// 一、基本redux  componnet==>一般组件Count  redux文件==>action、reducer、store.jsnpm i redux // redux异步actionnpm i redux-thunk // redux中，最为核心的store对象将state、action、reducer联系在一起的对象// 1.建立store.js文，引入createStore，专门用于创建store对象//    引入redux-thunk，applyMiddleware，用于支持异步actionimport {createStore,applyMiddleware} from 'redux'import thunk from 'redux-thunk' // 2.引入为Count组件服务的reducerimport countReducer from './count_reducer' // 3. 语法：const store = createStore(reducer)// store.js文件中一般如下：export default createStore(countReducer,applyMiddleware(thunk)) // 4.store对象的功能1)store.getState(): 得到state2)store.dispatch({type:'INCREMENT', number}): 分发action, 触发reducer调用, 产生新的state3)store.subscribe(render): 注册监听, 当产生了新的state时, 自动调用

// 二、react-redux  容器组件[UI(同名)组件] ： UI组件==>一般组件  containers组件==>外壳npm i react-redux//容器组件中，引入connect用于连接UI组件与redux// Provider让多个组件都可以得到store中state数据import {connect,Provider} from 'react-redux'//定义UI组件class CountUI extends Component{...}// 使用connect()()创建并暴露一个Count的容器组件export default connect(mapStateToProps,mapDispatchToProps)(CountUI)<Count store={store} />// 给容器组件传递store 连接外部的redux; connect()()用于连接内部的内部的UI组件 // 数据共享 // store.js汇总所有的reducer变为一个总的reducerimport {combineReducers} from 'redux'const allReducer = combineReducers({	he:countReducer,	rens:personReducer})// containers组件中：connect(	state => ({key:value}), //映射状态 mapStateToProps           {key:xxxAction} //映射操作状态的方法 mapDispatchToProps        )(UI组件)  // redux开发者工具 chrome网上商店中搜索安装 Redux Devtools 工具npm i redux-devtools-extension import {composeWithDevTools} from 'redux-devtools-extension'export default createStore(reducer,composeWithDevTools(applyMiddleware(thunk)))