初始化

使用yarn create react-app react-ticket创建项目
增加.editorconfig配置

使用react-app-rewired来替换react-scripts 使用以下命令安装：$ yarn add react-app-rewired customize-cra@next -D

配置config-overrides.js

const { override, addWebpackAlias, addLessLoader } = require('customize-cra');

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, '.', dir);
}

const config = override(
  // 增加别名
  addWebpackAlias({
    '@': resolve('src')
  }),
  // 增加less支持
  addLessLoader({
    strictMath: true,
    noIeCompat: true,
    modules: true
  })
);

module.exports = config;

同时要使用yarn add less less-loader -D安装所需依赖

配置Eslint,将eslintconfig从package.json中移出,在根目录添加.eslintrc.js 安装 alloy 团队的规则:yarn add eslint-config-alloy -D

.eslintrc.js配置内容如下：

module.exports = {
  extends: ['alloy', 'alloy/react'],
  env: {
    browser: true
  },
  globals: {
    // 这里填入你的项目需要的全局变量
    // 这里值为 false 表示这个全局变量不允许被重新赋值，比如：
    //
    // React: false,
    // ReactDOM: false
    // document: true
  },
  rules: {},
  settings: {
    react: {
      version: 'detect'
    }
  }
};

增加.prettierrc.js来使用prettier格式化代码语法使用eslint、格式使用prettier，关注点分离
使用husky来自动在 commit 时进行代码语法检查和格式检查使用yarn add husky -D安装

在package.json中增加两条命令:

  "lint": "eslint --ext .js --ext .jsx src/  --fix",
  "prettier": "prettier -c --write src"

在根目录增加.huskyrc.js

module.exports = {
  hooks: {
    'pre-commit': 'yarn lint & yarn prettier'
  }
};

这样在git commit的时候，会自动执行lint和prettier两条命令

使用dotenv环境变量 cra 默认已经安装使用了dotenv,可以直接在根目录添加以下文件: 通用配置：.env 开发配置：.env.development 生产环境: .env.production 测试环境：.env.qa

同时修改package.json中的命令,由于start和build默认已经是开发环境和生产环境了，因此只需要增加一个测试环境打包的命令:"build:qa": "dotenv -e .env.qa react-app-rewired build",

注意: 需要先使用yarn add dotenv-cli -D安装依赖

项目初始化

安装 react 全家桶以及必须库 yarn add axios immutable normalize.css react-redux react-router-dom redux redux-immutable redux-logger redux-thunk @loadable/component
在src下增加config文件夹，同时增加index.js文件

const env = process.env;

const { REACT_APP_URL_TYPE, REACT_APP_AUTH_TOKEN } = env;
const getUrl = () => {
  switch (REACT_APP_URL_TYPE) {
    case 'dev':
      return 'http://101.132.40.63:7099/rest';
    case 'qa':
      return 'http://101.132.40.63:7099/rest';
    case 'prod':
      return 'http://101.132.40.63:7099/rest';
    default:
      return 'http://101.132.40.63:7099/rest';
  }
};

export default {
  token: REACT_APP_AUTH_TOKEN,
  baseUrl: getUrl()
};

用于根据当前环境变量返回不同的配置内容

封装异步请求方法在src下增加utils\axios.js和utils\request.js
添加全局样式src\styles\index.less
创建路由
创建 store
关于使用less.module的 bug:issues

tips

滚动到某个 dom 元素 e.g: /src/components/city-selector/index.jsx

const dom = document.querySelector(`[data-cate="${index}"]`);
if (dom) {
  dom.scrollIntoView();
}

自动吸附 e.g: /src/components/city-selector/city-section

position: sticky;
top: -1px;

手写日历组件 e.g: /src/components/date-selector 思路：
1. 找到当前日期所在月的第一天的0时0分0秒
2. 分别+1、+2个月，得出未来两个月的第一天
3. 每个月的第一天依次+1天，直到月份发生变化
4. 每个月的月头和月尾分别补齐（用null）
5. 把日期分配到week
- useMemo bindActionCreators每次都会产生一个新的句柄，因此需要用useMemo来包裹起来,同时connect的第二个参数也不要
```
  const queryActions = useMemo(() => {
  return bindActionCreators(queryActionCreators, dispatch);
}, []);

const mapDispatchToProps = (dispatch) => {
return {
  dispatch
};
```

};


- useState
给useState赋值初始值时，如果只希望在页面初始化时赋值一次，可以传入一个函数，而不是一个对象。

lz82 / react-ticket

初始化

项目初始化

tips

About

Languages