react项目搭建，步骤最全，附源码git地址(react+router+typescript+redux+axios+antdesign+mock+eslint)

企业级react项目搭建流程，基于官网推荐脚手架create-react-app搭建的项目基本框架，在该基础上增加项目所需要的功能插件等。代码git地址base分支：https://github.com/ouyangfumei/react-base

1.项目搭建

1.1用脚手架创建目录

	npm install -g create-react-app
	create-react-app 你的项目名 --typescript  

1.2复制出相关的配置文件（webpack）

	npm run eject

1.3配置eslint+Prettier格式化代码
配置中已近下载了如下：npm i eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save；还需下载如下：

	npm i prettier eslint-config-prettier eslint-plugin-prettier --save

vscode需要安装ESLint、prettier插件。并在根目录下创建.eslintrc.js 、.prettierrc.js，配置vscode settings.json的eslint具体配置如下：

---.eslintrc.js---

module.exports = {
    parser: '@typescript-eslint/parser',
    extends: ['prettier/@typescript-eslint', 'plugin:prettier/recommended'],
    settings: {
        react: {
            pragma: 'React',
            version: 'detect',
        },
    },
    parserOptions: {
        ecmaVersion: 2019,
        sourceType: 'module',
        ecmaFeatures: {
            jsx: true,
        },
    },
    env: {
        browser: true,
        node: true,
    },
}

---.prettierrc.js---

module.exports =  {
   "endOfLine": "auto",
    "printWidth": 120,
    "semi": false,
    "singleQuote": true,
    "trailingComma": "all",
    "bracketSpacing": false,
    "jsxBracketSameLine": true,
    "arrowParens": "avoid",
    "insertPragma": true,
    "tabWidth": 4,
    "useTabs": false  
  };

---settings.json的eslint具体配置---

{
    "eslint.enable": true, //是否开启vscode的eslint
    "eslint.autoFixOnSave": true, //是否在保存的时候自动fix eslint
    "eslint.options": { //指定vscode的eslint所处理的文件的后缀
        "extensions": [
            ".js",
            ".vue",
            ".ts",
            ".tsx"
        ]
    },
    "eslint.validate": [ //确定校验准则
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "typescript",
            "autoFix": true
        },
        {
            "language": "typescriptreact",
            "autoFix": true
        }
    ],
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.codeAction.showDocumentation": {
        "enable": true
    }
}

2.路由的引入

2.1引入路由

	npm install --save react-router-dom

2.2编写路由文件
其中用到react-loadable代码分割

	npm install --save-dev @centarius/react-loadable

3.antdesign的引入

3.1安装

	npm install antd --save

3.2引入：全局index.tsx文件或者单个组件中引入css和组件，eg：

	import 'antd/dist/antd.css'
	import { Input , Button } from 'antd'

4.状态管理的引入

4.1安装redux：

	npm install --save redux

4.2安装react-redux，为了使用Provider组件，provider包裹在根组件外层，使所有的子组件都可以拿到state

	npm install --save react-redux

4.3创建store仓库、reducer仓库值改变更新管理、action改变仓库值行动的文件、dispatch()方法传递给store
4.4在组件中调用

	import store from '../../store';
	const storeData = store.getState();

4.5和axios一起用，先下载axios

 	npm i --save axios npm;install mockjs --save-dev

4.6安装中间件redux-thunk在实际工作中你可以使用中间件来进行日志记录、创建崩溃报告，调用异步接口或者路由

	npm install --save redux-thunk

4.7react-redux的使用（Provider和connect）
Provider是一个提供器，只要使用了这个组件，组件里边的其它所有组件都可以使用store了
connect的作用是把UI组件（无状态组件）和业务逻辑代码的分开，然后通过connect再链接到一起，让代码更加清晰和易于维护。这也是React-Redux最大的优点。

5.less配置：（该脚手架下只有sass没有less的相关配置，需要自己配置），在webpack中配置好即可（和sass配置法一致）

	npm install less less-loader --save