react踩坑笔记

1、create-react-app中配置webpack

// 方法一：将项目的配置文件抽取到项目中，即运行：
npm run eject

// 方法二：使用react-app-rewired

 

2、create-react-app中src文件夹的别名，当使用了ts时可以在tsconfig.json中配置

"compilerOptions": {
    "baseUrl":"src",
    "paths":{
      "src/*":["./*"],
      "components/*":["./components/*"],
      "pages/*":["./pages/*"],
      "api/*":["./api/*"],
      "routes/*":["./routes/*"],
      "reducers/*":["./reducers/*"],
      "store/*":["./store/*"]
    },
  },

 3、将字符串dom生成为react元素

React.createElement(
                'span',
                {
                  dangerouslySetInnerHTML: {__html: '这是一个加粗文本'}
                },
              )

 4、eslint用 npx eslint --init来生成配置，使用pre-commit来实现每次提交前检查，如果如果检测失败则禁止提交

5、要用stylelint 需安装依赖 stylelint  stylelint-config-standard  stylelint-scss  stylelint-config-recess-order

6、请求代理http-proxy-middleware不是直接导出的方法，而是一个对象

7、可以通过路由的reader函数来传递route组件的props

8、用=号给class实例属性赋值，报错Parsing error: Unexpected token =，需要在eslint中添加配置

// 指定eslint解析器
parser: "babel-eslint",

 9、使用es时 覆盖webpack配置

// 设置别名
  addWebpackAlias({ 
    '@': path.resolve(__dirname, 'src'),
    '@axios': path.resolve(__dirname, 'src/api/axios.js'),
  }),

  // 加载scss全局变量
  adjustStyleLoaders(rule => {
    if (rule.test.toString().includes('scss')) {
      rule.use.push({
        loader: require.resolve('sass-resources-loader'),
        options: {
          resources: './src/assets/sass/mixin.scss', // 公共scss变量的路径
        }
      })
    }
  })