react开发那些事儿，如修改默认端口3000等

- 日理万妓 2022-01-30 12:41 660阅读 0赞

## 创建新项目 ##

#### ant-design-pro，企业级中后台前端/设计解决方案 ####

一、启动  
1、yarn create umi  
2、选择ant-design-pro，javascript  
![在这里插入图片描述][20191012094309332.png]  
3、npm install  
4、npm start  
5、项目启动成功

##### react 、dva项目 #####

一、dva相关概念  
1、dva官网： https://dvajs.com/guide/getting-started.html\#安装-dva-cli  
2、dva首先是一个基于redux和redux-saga的数据流方案，然后为了简化开发体验，dva还额外内置了react-router和fetch。  
3、dva是framework（框架），不是library（库）

二、安装dva-cli并创建应用  
1、npm install dva-cli -g // 全局安装dva-cli，只需要安装一次，不需要每个项目都安装  
2、cd ~/ee/react  
3、dva new dva-demo  
4、cd dva-demo  
5、npm start

二、配置antd和babel-plugin-import  
1、npm i --save antd  
2、npm i --save-dev babel-plugin-import  
（1）babel-plugin-import用于按需引入antd的javascript和css，这样打包出来的文件不至于太大。  
3、修改.webpackrc，使babel-plugin-import插件生效

{
    	 "extraBabelPlugins": [
    	    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
    	]
    }

三、配置代理，能通过RESTFul的方式访问  
1、.webpackrc.js，加上proxy配置：

"proxy": {
    	"/api": {
    		"target": "http://jsonplaceholder.typicode.com",
    		"changeOrigin": true,
    		"pathRewrite": {"^/api": ""}
    	}
    }

--------------------

## 工程配置 ##

#### react修改端口，默认的3000端口修改成3001 ####

1、方法一：修改package.json  
package.json里  
（1）mac

"scripts": {
    	"start": "PORT=3001 react-scripts start"
    }

（1）windows  
`"start": "set PORT=3001 && react-scripts start"`  
2、方法二：安装cross-env，修改package.json  
（1）npm install cross-env -g  
（2）package.json

"start": "cross-env PORT=3001 react-scripts start"

3、方法三：修改node\_modules/react-scripts/start.js  
（1）`const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3001`

#### store/index.js ####

1、既有redux调试，又有redux-thunk中间件

import { createStore, applyMiddleware, compose } from 'redux';
    import reducer from './reducer';
    import thunk from 'redux-thunk';
    
    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
    const middleware = [thunk];
    const enhancer = compose(applyMiddleware(...middleware), composeEnhancers);
    
    const store = createStore(
      reducer, /* preloadedState, */
      enhancer
    );
    
    export default store;

--------------------

## webstorm ##

#### webstorm报错“can’t find module eslint-config-react-app”。 ####

1、解决：webstorm中的eslint config改成当前项目的node\_modules中的eslint。

--------------------

## 控制台 ##

#### 报错：Please use `require("history").createHashHistory` instead of `require("history/createHashHistory")` ####

1、解决：node\_modules/ \_dva@2.4.1@dva/ lib/ index.js  
`var _createHashHistory = _interopRequireDefault(require("history/createHashHistory"));`改成  
`var _createHashHistory = _interopRequireDefault(require("history").createHashHistory);`

### 报错：Invalid attempt to spread non-iterable instance ###

1、原因：对象前用了扩展运算符  
2、解决：把对象改成数组，或者不要使用扩展运算符  
`validator: {}` 改成`validator: []`  
才能使用`...validator` ， 不然就会报上面的错误。

--------------------

## mock ##

#### mockjs时跨域 ####

1、报错：Request header field cache-control is not allowed by Access-Control-Allow-He  
2、`res.header('Access-Control-Allow-Headers', 'Origin, Cache-Control, Content-Type, Content-Length, Authorization, Accept, X-Requested-With'); //允许的header类型`  
加上Cache-Control

--------------------

## 代码 ##

#### 每3个数字用，隔开 ####

1、正则：`/\B(?=(\d{3})+(?!\d))/g`

`${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}

2、理解：  
（1）  
`\B`匹配非单词边界；  
`\d`匹配一个数字；  
`+`是量词，表示前面的内容重复1到多次  
`?=`是预言，表示这个位置后面的内容需要满足的条件，注意只是匹配一个位置，并不匹配具体的字符，所以是零宽；  
`?!`也是预言，表示这个位置后面的内容不能满足的条件，注意也只是匹配一个位置，并不匹配具体的字符，所以也是零宽；  
（2）  
`\d{3}`匹配三个数字，+表示前面的内容重复1到多次，所以(\\d\{3\})+表示三个数字的1到多次，也就是3,6,9…等3的倍数个数字的字符串；  
`(?!\d)`匹配一个位置，这个位置后面不是数字  
`(?=(\d{3})+(?!\d))`匹配一个位置，这个位置后面首先是3的倍数个数字的字符串，接下来的位置不是数字  
`/\B(?=(\d{3})+(?!\d))/g`就是全局匹配一个位置，这个位置是非单词边界，然后后面是3的倍数个数字，然后是非数字。  
（3）  
比如，字符串ad12345678abs，这个正则匹配的位置就是2后面的位置，5后面的位置。2后面有6（3 \* 2）个数字，5后面有3（3 \* 1）个数字。

#### getFieldDecorator单选框，默认是要显示值的。默认显示的数据是后台传过来的。select中的option也是后台传过来的，传了个id:487，对应的opiton的id是487，显示的是“商用区”。但是页面一直显示不出“商用区”，一直显示487 ####

<FormItem label="大区">{getFieldDecorator('areaId', { rules: [{ required: !this.state.changeDis, message: '请选择' }] })(areaSelect({ disabled: this.state.changeDis }))}</FormItem>

1、花费时间的地方：一直以为异步获取option数据是在得到默认id:487之后，从而导致只能显示id，显示不了name。  
2、解决：487是数字类型，而option的key是字符串类型，把487改成字符串类型，就会默认选上。

[20191012094309332.png]: /images/20220130/24ea0fc502b74f5795e6f38fb1d1f18e.png