初始化react项目并安装配置router、redux、axios、antd、less等等 - 糊涂

创建react项目并安装配置router、redux、axios、antd、less  [源码下载](https://gitee.com/lpyhutu/react-init "源码下载")
### 一、创建react项目
1、运行下面命令，获得如图所示文件目录
```
npx create-react-app demo
```
![初始react项目](https://adm.lpya.cn/uploads/20210916/a17a8a39f22d7c6718b59d67beab16bd.png)
### 二、安装antd UI组件库
1、安装
```
npm install --save antd
//在入口文件中引入样式
import 'antd/dist/antd.css';
```
2、按需引入，运行下面命令
```
npm run eject  //会生成config、scripts目录
npm i babel-plugin-import --save-dev 
```
3、在根目录package.json找到presets并添加下面代码
```json
"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": "css"
        }
      ]
    ]
  }
```
4、在需要的组件中引入对应组件即可，不需要在入口文件引入公共样式
```js
import React, {Component} from "react";
import {Button} from "antd"

export default class Test extends Component {
    render() {
        return (
            <div>
                <Button>我是antd某个按钮</Button>
            </div>
        )
    }
}
```
### 三、安装less、less-loader
1、安装
```
npm install --save less
npm install --save less-loader@6.0.0 //记得加上版本号，版本过高会报错
```
2、找到config目录下的`webpack.config.js`文件，在50-70行之间有个cssRegex，在此处添加
```
const lessRegex =/\.less$/;
const lessModuleRegex =/\.module\.less$/;
```
3、在`webpack.config.js`文件500多行有个sassRegex，模仿写对应的lessRegex，修改重启后直接引入`.less`样式即可
```js
{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'less-loader'
  ),
  sideEffects: true,
},
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: true,
      getLocalIdent: getCSSModuleLocalIdent,
    },
    'less-loader'
  ),
},
```
### 四、安装配置react-router
1、安装
```
npm install --save react-router-dom
```
2、在入口文件`index.js`引入
```js
import React from "react";
import ReactDom from "react-dom"
import {Switch, Route, BrowserRouter} from "react-router-dom"
import {ConfigProvider} from "antd";
import zhCn from "antd/lib/locale/zh_CN"
import Main from "./containers/main/main";
import Login from "./containers/login/login";
import Register from "./containers/register/register";

ReactDom.render((
    <ConfigProvider locale={zhCn}>
        <Provider store={store}>
            <BrowserRouter>
                <Switch>
				    <Route path="/register" component={Register}/>
				    <Route path="/login" component={Login}/>
                    <Route component={Main}/>
                </Switch>
            </BrowserRouter>
        </Provider>
    </ConfigProvider>
), document.getElementById("root"))
```
### 五、安装redux
1、安装
```
npm install --save react-redux 
npm install --save react-thunk //中间件
npm install --save redux-devtools-extension //调试工具，记得先在扩展添加redux-devtoots
```
2、创建`redux`目录，并在目录创建下面四个文件
```js
//redux-types.js
export const TEST_COUNT = "test_count"

//actions.js
import {TEST_COUNT} from "./redux-types";
export const test_count = (number) => ({type: TEST_COUNT, data: number})

//recuders.js
import {combineReducers} from "redux"
import {TEST_COUNT} from "./redux-types";

function test_count(state = 0, action) {
    switch (action.type) {
        case TEST_COUNT:
            return state + action.data;
        default:
            return state;
    }
}

export default combineReducers({
    test_count
})

//store.js
import {createStore, applyMiddleware} from "redux"
import thunk from "redux-thunk"
import reducers from "./recuders"
import {composeWithDevTools} from 'redux-devtools-extension'

const store = createStore(reducers, composeWithDevTools(applyMiddleware(thunk)))
export default store
```
3、在容器中调用连接
```js
import React, {Component} from "react";
import {connect} from "react-redux";
import PropTypes from "prop-types"
import "./main.less"

class Main extends Component {
    static propTypes = {
        test_count: PropTypes.number.isRequired
    }

render() {
        const {test_count}=this.props
        return (
            <div className="main">
                <div className="main-item">{test_count}</div>
            </div>
        )
    }
}

export default connect(state => ({
    test_count: state.test_count
}))(Main)
```
### 六、安装axios，并做简单的封装
1、安装
```
npm install --save axios
```
2、创建`api`目录，并添加下面两个文件
```js
//ajax.js
import axios from "axios"

const http = axios.create({
    baseURL: `http://blog.com/api/`,
    timeout: 10000
});
http.interceptors.request.use(
    async config => {
        return config;
    },
    error => {
        return Promise.reject(error)
    })

http.interceptors.response.use(
    res => {
        return res
    },
    error => {
        return Promise.reject(error)
    }
)

export default function ajax(url, data = {}, type = "GET") {
    if (type === "GET") {
        let paramStr = "";
        Object.keys(data).forEach(key => {
            paramStr += key + "=" + data[key] + "&"
        })
        if (paramStr) {
            paramStr = paramStr.substring(0, paramStr.length - 1)
        }
        return http.get(url + "?" + paramStr);
    } else {
        return http.post(url, data)
    }
}

//index.js
import ajax from "./ajax";

export const test = () => ajax("/article/getArticleList", {},"GET")
```