React 脚手架开发步骤

官网相关文档：

https://reactjs.bootcss.com

https://create-react-app.dev/docs/getting-started

1.初始化 react 脚手架

    npx create-react-app myreact   //myreact为项目名称

2.安装路由组件

    npm install react-router-dom --save

    注意：组件react-router是路由组件的基础版，react-router-dom相当于是扩展版，已经包含react-router，只需安装一个即可

3.安装react-redux组件

    推荐文档：https://segmentfault.com/a/1190000017064759

    npm install redux react-redux --save

    如果action中需要做异步操作，还需安装一个插件 redux-thunk

        npm install redux-thunk --save

    然后将以下代码

        import { createStore } from 'redux';
        import { Provider } from 'react-redux';
        import reducers from './redux/index';

        const store = createStore(reducers);

    修改为

        import { createStore, applyMiddleware } from 'redux';
        ...
        import thunk from "redux-thunk";

        const store = createStore(reducers, applyMiddleware(thunk));

    最后修改action方法，例如：

        export function onRequest(param) {
            return (dispatch, getState) => {
                const state = getState();       //获取store的旧数据
                setTimeout(() => {              //模拟异步请求
                    dispatch({
                            type: 'MYTEST',
                            payload: {
                                    addGun: param || 200
                            }
                    })
                }, 3000);
            }
        }

4.启动项目

    cd myreact 进入项目的根目录, 运行npm start 启动项目

5.npm run eject
    如果需要手动变更配置项（如增加less-loader等），则运行此命令，还原配置文件，否则脚手架默认是零配置的

    如果出现报错Remove untracked files... 则运行以下2行代码即可

    git add .
    git commit -am "Save before ejecting"

    注意：一般不改动初始代码直接执行npm run eject就不会出现该错误

6.react使用less

    npm install less-loader less --save

    在webpack.config.js文件中，搜索const sassModuleRegex = ... 在之后添加以下代码

    const lessRegex = /\.less$/;                //匹配全局的less文件
    const lessModuleRegex = /\.module\.less$/;  //匹配局部化的less文件

    接着找到类似以下的代码段，在之后添加以下代码

    {
        test: lessRegex,
        exclude: lessModuleRegex,
        use: getStyleLoaders(
            {
                importLoaders: 3,     //指css-loader之后还需要多少个loader
                sourceMap: isEnvProduction && shouldUseSourceMap,
            },
            'less-loader'
        ),
        sideEffects: true,
    },
    {
        test: lessModuleRegex,
        use: getStyleLoaders(
            {
                importLoaders: 3,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: {                                    //模块化
                    getLocalIdent: getCSSModuleLocalIdent,
                },
            },
            'less-loader'
        ),
    },

    模块化 的作用：
        即让less 或 scss 或 css样式只作用于局部文件(默认是作用到全局)

    模块化 的使用(以less为例)：
        一个需要模块化的less文件，必须命名为xxx.module.less（scss/css同理），并将其引入对应的 组件文件.jsx 中，然后用className调用

        例：import less from 'xxx.module.less';
        ....
        <div className={less['less文件中的类名']}>    //最好不用less.className的写法，因为有些className会有中划线'-'
        </div>

    最后重新运行代码，即可使用less写样式

7.react使用scss/sass

    scss其实是sass的升级版，使用npx create-react-app的项目默认安装了sass相关的loader，包括模块化的配置也默认设置好了，但要使用sass，还需安装一个插件 node-sass，命令如下：

        npm install node-sass --save

    注意：windows环境下安装node-sass一般会失败，提示没有python环境导致的，这个时候可以换阿里的镜像源安装 或 用cnpm安装即可

8.安装antd ui框架（参考官网antd教程，包括定制主题颜色）

    npm install antd --save

    1) 全局加载
    
        在index.css文件中引入antd的全局样式    @import '~antd/dist/antd.css';

    2) 按需加载

        2.1)第一种方式(官网推荐，有缺陷)

            官网教程：https://ant.design/docs/react/use-with-create-react-app-cn
        
            注意：这种方式由于 修改了package.json文件 的scripts，会导致less的模块化功能失效

        2.2)第二种方式(推荐)

            安装3个官网指定插件
                
                npm install react-app-rewired customize-cra babel-plugin-import --save

            然后在package.json文件中写入以下代码

                "babel": {
                    ...
                    "plugins": [
                        [
                            "import",
                            {
                                "libraryName": "antd",
                                "libraryDirectory": "es",
                                "style": true                        //值为"css"仅启动按需加载，若为true则 启动按需加载 和 定制antd颜色
                            }
                        ]
                    ]
                }

            定制antd颜色 配置，打卡webpack.config.js文件，写入以下代码(具体可能要根据实际情况改部分逻辑代码)：

                {
                    loader: 'less-loader',
                    options: {
                        ...
                        modifyVars: {
                            // 修改某个antd的全局样式值
                            'primary-color': '#1DA57A',
                            'link-color': '#1DA57A',

                            // 或者用hack独立配置(一般用hack)
                            'hack': `true; @import "${path.resolve(__dirname, '..')}/antd-cover.less";`,        //自定义less文件，用于覆盖antd默认主题色
                                                                                                                                                                                            //path.resolve(__dirname, '..')表示项目根目录
                        },
                        javascriptEnabled: true,
                    }
                }

            在根目录下创建antd-cover.less文件(该文件名可以任意取)，并写入定制代码，如：

                @primary-color: #1DA57A;        // 全局主色
                @link-color: #1DA57A;                // 链接色
                ...

                更多定制变量，可参考
                https://ant.design/docs/react/customize-theme-cn 或
                https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less

            重新运行npm start即可(按需加载、less模块化、定制主题 同时生效)

    3) 使用

        在组件中直接引入即可 import { Button } from 'antd';

9.建立项目目录

    public目录
        imgs目录                    //存放静态图片
        plugins目录                //存放第三方非npm插件

    src目录
        common目录                //存放工具类方法、小图标等
        router目录                //存放路由相关文件
        components目录        //存放自定义组件
        redux目录                    //存放状态管理相关文件
        pages目录                    //存放页面文件

10.保存时格式化 插件

在vscode里搜

Beautify less（格式化样式，注意：会把js文件也格式化了，且不是我们想要的结果）

JS JSX Snippets（格式化jsx文件）