从小白开始-React采坑实战

React + antd

1. 创建 React 项目

利用脚手架安装：

使用 npm:

npx create-react-app my-app --typescript
cd my-app
npm start

第一行的 npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具。

使用 yarn:

yarn create react-app my-app
cd my-app
npm start

生成以下目录结构

├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   └── logo.svg
└── yarn.lock

2. 引入 ui 组件库，例 antd

1. $ yarn add antd

2. Antd 默认对js实施按需加载， 因此可如此引入

   import { Button } from 'antd';
   

3. 但是此时还未引入 css, 因此无样式, 需在 App.css 头部引入 css

   @import '~antd/dist/antd.css';
   

3. 在引入第三方组件库时 控制台报错类似下图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rqCKQbfi-1590113431476)(./images/strict-mode-unsafe-lifecycles-warning.png)]

原因是 React 脚手架自动生成的项目内开启了严格模式

function Demo() {
  return (
    <div>
      <React.StrictMode>
        <App />
      </React.StrictMode>
    </div>
  );
}

此时将严格模式去掉或注释后错误信息消失

function Demo() {
  return (
    <div>
      <App />
    </div>
  );
}

StrictMode 是一个用以标记出应用中潜在问题的工具。就像 Fragment ，StrictMode 不会渲染任何真实的 UI 它为其后代元素触发额外的检查和警告。

注意: 严格模式检查只在开发模式下运行，不会与生产模式冲突。

StrictMode 目前有助于：

• 识别具有不安全生命周期的组件
• 有关旧式字符串 ref 用法的警告
• 关于已弃用的 findDOMNode 用法的警告
• 检测意外的副作用
• 检测遗留 context API
• 将来的 React 版本将添加其他功能

中文参考链接
英文参考链接

4. 样式文件按需加载

1. $ yarn add react-app-rewired customize-cra -D
   
   

2. 修改 package.json

   /* package.json */
   "scripts": {
   -   "start": "react-scripts start",
   +   "start": "react-app-rewired start",
   -   "build": "react-scripts build",
   +   "build": "react-app-rewired build",
   -   "test": "react-scripts test",
   +   "test": "react-app-rewired test",
   }
   

3. 然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

4. 使用 babel-plugin-import

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。

$ yarn add babel-plugin-import -D

+ const { override, fixBabelImports } = require('customize-cra');
- module.exports = function override(config, env) {
-   // do stuff with the webpack config...
-   return config;
- };
+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd',
+     libraryDirectory: 'es',
+     style: 'css',
+   }),
+ );

然后移除前面在 src/App.css 里全量添加的 @import ‘~antd/dist/antd.css’; 样式代码，并且按下面的格式引入模块。

最后重启 yarn start 访问页面，antd 组件的 js 和 css 代码都会按需加载。

5. 自定义主题

按照 配置主题 的要求，自定义主题需要用到 less 变量覆盖功能。我们可以引入 customize-cra 中提供的 less 相关的函数 addLessLoader 来帮助加载 less 样式，同时修改 config-overrides.js 文件如下。

$ yarn add less less-loader -D

- const { override, fixBabelImports } = require('customize-cra');
+ const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
-   style: 'css',
+   style: true,
  }),
+ addLessLoader({
+   javascriptEnabled: true,
+   modifyVars: { 'primary-color': '#1DA57A' },
+ }),
);

这里利用了 less-loader 的 modifyVars 来进行主题配置，变量和其他配置方式可以参考 配置主题 文档。

修改后重启 yarn start，如果看到一个绿色的按钮就说明配置成功了。

6. antd 自定义主题报错

Failed to compile.

./node_modules/antd/es/input/style/index.less (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/less-loader/dist/cjs.js??ref--6-oneOf-7-3!./node_modules/antd/es/input/style/index.less)

ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.

 - options has an unknown property 'source'. These properties are valid:

   object { lessOptions?, prependData?, appendData?, sourceMap?, implementation? }

检查customize-cra插件的版本：0.9.1

检查 less-loader 版本： 6.1

less-loader版本太高，customize-cra 不太兼容，需要降低less-loader的版本， 执行以下命令：

$ yarn remove less-loader

$ yarn add less-loader@5.0.0

修改后重启 yarn start

7. 样式模块化

create-react-app 脚手架生成的项目本身内置了对css, scss(sass) 的模块化支持

只需文件名带上module即可， 例：

home.module.css
home.module.scss
home.module.sass

然后在jsx｜ tsx 中引入

import HomeCss from "./home.module.css";

function Home() {
  return <div className={HomeCss.homePage}>Home</div>
}

render:

<div class="home_homePage__Kblpr">Home</div>

这里我们再说一下less module 的配置

const { override, fixBabelImports, addLessLoader } = require("customize-cra");
module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      "@primary-color": "#1DA57A"
    },
    cssLoaderOptions: {},
    cssModules: {
      localIdentName: "[path][name]__[local]--[hash:base64:5]"
    }
  })
)

如果报以下错误：

ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.
options has an unknown property ‘source’. These properties are valid:
object { lessOptions?, prependData?, appendData?, sourceMap? }

不要着急！！！

检查customize-cra插件的版本：0.9.1

检查 less-loader 版本： 5.0.0

将customize-cra 和 less-loader 都升级到最新版本（1.0.0 和 6.1.0）：

如果你用了第6步的方法解决过问题，现在估计就想要骂人了。😁 心态要放平和，请看标题，这是一个小白踩坑的过程，终点虽然美丽但是不要忘记欣赏沿途的风景

附一个连接 因为插件升级配置需要修改

addLessLoader 使用了lessOptions 参数

const { override, fixBabelImports, addLessLoader } = require("customize-cra");
module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true
  }),
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: { '@primary-color': '#A80000' },
      cssModules: {
        localIdentName: '[path][name]__[local]--[hash:base64:5]',  // if you use CSS Modules, and custom `localIdentName`, default is '[local]--[hash:base64:5]'
      }
    }
  })
)

配置完记得重启 yarn start

创建 less文件 文件名带上module, 例：

home.module.less
然后在jsx｜ tsx 中引入

import Homeless from "./home.module.less";

function Home() {
  return <div className={Homeless.homePage}>Home</div>
}

render:

<div class="homePage--FfqHg">Home</div>

好啦已经成功啦！

哦对了，如果你是用 typescript 开发的化，当引入 .less 文件后会报错，编辑器也会标红

此时需要在react-app-env.d.ts 文件中配置下：

/// <reference types="react-scripts" />

declare module "*.module.less" {
  const classes: { [key: string]: string };
  export default classes;
}

---

后续