从零创建React项目

根据下面的文档创建的react项目可参考

初始化项目

npm install -g create-react-app

create-react-app my-app (注：my-app为项目名称)

cd my-app

npm start

配置路由

npm install react-router-dom --save

npm install react-router-config --save (路由鉴权)

数据请求

npm install axios --save

状态管理redux

npm install redux --save

npm install redux-thunk --save

npm install react-redux --save

注：redux默认只处理同步，异步需要中间件redux-thunk使用applyMiddleware开启

安装修饰器和sass

项目里用到了修饰符@关于sass的webpack配置在==config-overrides.js==

npm install node-sass --save-dev

npm install @babel/plugin-proposal-decorators --save-dev

npm install react-app-rewired customize-cra --save-dev

antd按需加载

npm install react-app-rewired customize-cra --save-dev

在创建react项目时，我们一般用create-react-app脚手架来搭建项目。
create-react-app对webpack的配置进行了封装并默认隐藏了配置文件。
当我们需要对webpack的配置进行扩展时，需要执行npm run eject命名将配置文件暴露出来，然后在对配置文件进行扩展暴露出来的文件后续不会隐藏。

不暴露webpack配置的解决方法：

在根目录创建一个config-overrides.js文件

const path = require('path')
const { override, fixBabelImports, addWebpackAlias, addBabelPlugins, adjustStyleLoaders } = require('customize-cra')

module.exports = override(
    ...addBabelPlugins(
        [
        '@babel/plugin-proposal-decorators',
        {
            'legacy': true
        }
        ]
    ),
    fixBabelImports('import', {
        libraryName: 'antd-mobile',
        style: 'css'
    }),
    addWebpackAlias({
        '@': path.resolve(__dirname, 'src')
    }),
    adjustStyleLoaders(rule => {
        if (rule.test.toString().includes("scss")) {
            rule.use.push({
                loader: require.resolve("sass-resources-loader"),
                options: {
                    resources: "./src/styles/outcolor.scss"
                }
            });
        }
    })
)

水印的引用

import watermark from 'water-mark-oc';

componentDidMount() {
    let user ='421181822284158';
    if(user){
        watermark({content: user, width:'150px',height:'150px',rotate:'-20',font:'12px Microsoft YaHei',fillStyle:'rgba(135,135,135,.15)'});
    }
}

image 效果： WechatIMG183.png