React07： CSS Modules + antd 实战

严格模式(Strict Mode)

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

• 识别具有不安全生命周期的组件
• 有关旧式字符串ref用法的警告
• 检测意外的副作用
• 检测遗留 context API

CSS Modules

为了使css样式不冲突，让一个样式只在指定模块中起作用

• 在 create-react-app 中的使用：
  • .css .sass 正常文件
  • [文件名].module.css [文件名].module.sass 需要模块化的文件
• CSS Modules 使用
  • 局部 声明:local(.className) .className 使用 styled.className
  • 全局 :global(.className)
  • composes 引入其他样式

import sty1 from "./child1.module.css";

function Child1() {
    return (
        <div className={sty1.box}>Child1</div>
    );
}

模块化中的css默认为:local，也可以声明全局起作用的样式

:local(.box) {
    width: 200px;
    height: 200px;
    background: blue;
    border: solid 2px black;
}

:global(.box) {
    width: 50px;
    height: 50px;
    border: solid 2px pink;
}

Ant Design

官网: https://ant.design/index-cn

最基本使用

• 安装 npm install antd
• 引入

import { DatePicker } from 'antd';
import 'antd/dist/antd.css';

样式按需加载，只会引入用到的组件样式

自定义主题

https://ant-design.gitee.io/docs/react/customize-theme-cn

craco

一个对 create-react-app 进行自定义配置的社区解决方案

npm i @craco/craco  
yarn add @craco/craco

修改 package.json

"scripts": {

   "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",

   "start": "craco start",
   "build": "craco build",
   "test": "craco test",
}

创建一个 craco.config.js 用于修改默认配置

/* craco.config.js */
module.exports = {
// ...
};

craco-less

安装 $ npm i craco-less

修改 craco.config.js 配置

const CracoLessPlugin = require('craco-less');
module.exports = {
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: {},
                        javascriptEnabled: true,
                    },
                },
            },
        },
    ],
};

实战：搭建 CNode 项目

• src
  • index.js
  • App.js
  • static 静态文件 (图片、css)
  • component 通用组件
  • view 各个视图
    • 视图1
      index.js
      视图的私有组件
    • 视图2
  • router 路由相关配置
  • store 状态仓库
    • reducer
    • action