React大屏可視化腳手架教程示例

更新時(shí)間：2022年06月24日 14:27:51 作者：東方三篇

這篇文章主要為大家介紹了React大屏可視化腳手架教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

使用 create-react-app 初始化

# 使用了 create-react-app 的 typescript 模板
yarn create react-app my-big-screen --template typescript
# 初始化之后進(jìn)入 my-big-screen 文件目錄下執(zhí)行
yarn start 
# localhost:3000 就能看到 react 的 hello 頁面了

引入 antd UI庫

# 在 根目錄 下
yarn add antd

使用 craco 插件來自定義配置

安裝 craco

yarn add @craco/craco

修改 package.json 文件如下

# 原本
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
# 修改之后
"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  }

在根目錄添加 craco.config.js 文件

module.exports = {}

自定義 antd 主題，使用 less 作為 css 預(yù)處理器

安裝 craco-antd

yarn add craco-antd

修改 craco.config.js 文件

const CracoAntDesignPlugin = require('craco-antd');
module.exports = {
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        customizeTheme: {
          '@primary-color': '#1DA57A',
        },
      },
    },
  ],
};

craco-less .module.less 模擬vue組件中style的scope 功能

craco-less 依賴已經(jīng)內(nèi)置在 @craco/craco 依賴中，無需主動(dòng)安裝

配置 craco.config.js 文件

const CracoAntDesignPlugin = require('craco-antd')
const CracoLessPlugin = require('craco-less')
const { loaderByName } = require('@craco/craco')
module.exports = {
 plugins: [
     {
         plugin: CracoAntDesignPlugin,
         options: {
             customizeTheme: {
                 '@primary-color': '#1DA57A'
             }
         }
     },
     {
         plugin: CracoLessPlugin,
         options: {
             modifyLessRule(lessRule, context) {
                 // You have to exclude these file suffixes first,
                 // if you want to modify the less module's suffix
                 lessRule.exclude = /\.m\.less$/
                 return lessRule
             },
             modifyLessModuleRule(lessModuleRule, context) {
                 // Configure the file suffix
                 lessModuleRule.test = /\.m\.less$/
                 // Configure the generated local ident name.
                 const cssLoader = lessModuleRule.use.find(loaderByName('css-loader'))
                 cssLoader.options.modules = {
                     localIdentName: '[local]_[hash:base64:5]'
                 }
                 return lessModuleRule
             }
         }
     }
 ]
}

配置 * ./src/react-app-env.d.ts * 文件

/// &lt;reference types="react-scripts" /&gt;
// 定義在 全局的 變量 然后就可以 window.* 進(jìn)行訪問了
interface Window {
  __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: any
  AMap: any
}
declare module "*.module.less" {
  const classes: { readonly [key: string]: string };
  export default classes;
}

使用示例(類似vue scope 的效果)

# index.module.less 文件命名
app {
    font-size: 40px;
    color: #f00;
}

# 在組件中引入
import styles from './index.module.less'
<div className={styles['app']}>hello</div>

使用 ESLint Prettier 兩個(gè)插件來做代碼格式校驗(yàn)和自動(dòng)格式化

以上操作版本記錄

{
  "name": "xxx",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.2.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-router-dom": "^5.1.8",
    "@typescript-eslint/eslint-plugin": "^4.30.0",
    "@typescript-eslint/parser": "^4.30.0",
    "antd": "^4.16.13",
    "craco-antd": "^1.19.0",
    "eslint": "^7.32.0",
    "eslint-config-alloy": "^4.3.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-react": "^7.25.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.1",
    "react-scripts": "4.0.3",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "set PORT=3090 && craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject",
    "lint": "eslint '{src}/**/*.{ts,tsx,js,jsx}'",
    "lint_fix": "eslint {src} --ext .ts,.tsx,.js,jsx --fix"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

以上就是React大屏可視化腳手架教程示例的詳細(xì)內(nèi)容，更多關(guān)于React大屏可視化腳手架的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: