create-react-app 英文 https://create-react-app.dev/
create-react-app 中文 https://www.html.cn/create-react-app/docs/production-build/
image.png

create-react-app 初始化

初始化 create-react-app，craco-antd配置

  • yarn start 启动项目
  • yarn build 构建项目
  • yarn test 单元测试
  • yarn eject 抛出 webpack配置 ```bash npx create-react-app my-app yarn create react-app my-app

npm init react-app my-app

更新 react-scripts

npm install react-scripts@latest

  2. yarn start 看到这个界面，create-react-app就初始化成功了<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/112859/1629555481016-1fdb11bd-c342-4b80-97a6-40c6d6b38e6c.png#clientId=u108bd36d-ae90-4&from=paste&height=294&id=ue547ae70&originHeight=662&originWidth=1230&originalType=binary&ratio=1&rotation=0&showTitle=false&size=56454&status=done&style=none&taskId=u9db36bbd-2230-4af8-b82c-d861ef89165&title=&width=547)
  5. <a name="jicG2"></a>
  6. ## 自定义脚手架
  7. ```bash
  8. # 初始化 js项目
  9. npx create-react-app [项目名] --template @eleven.fe/cra-template
  10. npx create-react-app myapp --template @eleven.fe/cra-template
  12. # 初始化 ts项目
  13. npx create-react-app [项目名] --template @eleven.fe/cra-template-typescript
  16. "husky": {
  17.   "hooks": {
  18.     "pre-add": "pretty-quick --staged",
  19.     "pre-commit": "pretty-quick --staged"
  20.   }
  21. },

https://www.npmjs.com/package/@eleven.fe/cra-template
https://github.com/eleven-net-cn/create-react-app

importLoaders

用于配置「css-loader 作用于 @import 的资源之前」有多少个 loader
importLoaders: 1
是在css-loader 之后指定1个数量的loader（即 postcss-loader）来处理import进来的资源
webpack文档 https://webpack.docschina.org/loaders/css-loader/#importloaders

  1. 0 => no loaders (default);
  2. 1 => postcss-loader;
  3. 2 => postcss-loader, sass-loader

这里的数量指的是当前loader之后loader的数量

  1. 等于1是说，当前loader之后的一个loader
  2. 如果是n就是n个loader
  3. 官网上说是importLoaders的数量默认是0，意思是一个加载器都不用
    1. 1的意思是用 postcss-loader加载器，
    2. 2的意思是用 postcss-loaders和sass-loader加载器

babelrc

create-react-app默认是不使用.babelrc的，使用的是package.json中的babel配置和内部配置

config/webpack.config.js文件，将babelrc：false改为true，意思是启用.babelrc的配置

  1. 同时将package.json中的babel下面的 “presets”: [ “react-app” ] 配置到.babelrc中
  2. 并将package.json中的babel删除掉

image.png

  1. 删除 package.json里面的 babel，移动到 .babelrc

    1. "babel": {
    2.  "presets": [
    3.    "react-app"
    4.  ]
    5. }

  2. 在根目录新建 .babelrc，并添加

    1. {
    2. "presets": [
    3.  "react-app"
    4. ],
    5. "plugins": [
    6.  [
    7.    "import",
    8.    {
    9.      "libraryName": "antd",
    10.      "libraryDirectory": "es",
    11.      "style": true
    12.    }
    13.  ]
    14. ]
    15. }

  3. install babel-plugin-import

    1. yarn add babel-plugin-import -D

  4. 修改 /config/webpack.config.js

    1. 单独根目录新建.babelrc会报错的，原因：如果是运行了eject ，webpack配置了babelrc: false
    2. 需要在webpack.config.js配置，在module模块，找到 loader: require.resolve(‘babel-loader’) 对象中的plugins数组中添加
    3. 411行 plugins:[]，新增
      1. // style: true 加载 less 文件
      2. ["import", {"libraryName": "antd", "libraryDirectory": "es", "style": true}],
      image.png

image.png
看到默认的按钮，变色，就代表自定义主题配置成功了

cssModules

默认支持 *.module.css

  1. import styles from './App.module.css';

image.png

scss配置

create-react-app支持 scss，直接安装 sass-loader就行
scss需要安装 sass-load & node-sass

  1. yarn add sass-loader node-sass -D

使用 scss

  1. import styles from './App.module.css';

less配置

  1. less需要安装 less & less-loader

    1. yarn add less less-loader -D

  2. /config/webpack.config.js

    1. 65行新增 lessRegex
      1. const lessRegex = /\.less$/;
      2. const lessModuleRegex = /\.module\.less$/;
      image.png

  3. 542行新增代码如下，就是 把 sassRegex和 sassModuleRegex的配置复制下，然后修改为 less

    1. {
    2. test: lessRegex,
    3.  exclude: lessModuleRegex,
    4.    use: getStyleLoaders(
    5.      {
    6.        importLoaders: 2,
    7.        sourceMap: isEnvProduction && shouldUseSourceMap,
    8.      },
    9.      'less-loader'
    10.    ),
    11.      sideEffects: true,
    12. },
    13. {
    14.  test: lessModuleRegex,
    15.    use: getStyleLoaders(
    16.      {
    17.        importLoaders: 2,
    18.        sourceMap: isEnvProduction && shouldUseSourceMap,
    19.        modules: {
    20.          getLocalIdent: getCSSModuleLocalIdent,
    21.        },
    22.      },
    23.      'less-loader'
    24.    ),
    25. },

  4. 结果如下：没有解析 less

    1. /static/media/App.module.0616ec45.less

重要的一步

  1. 在 node_modules目录下找到 getCSSModuleLocalIndent.js
    1. 21行新增 less

image.png

  1. less-loader模块之后报错，如下
    1. TypeError: this.getOptions is not a function
    2. 原因： less-loader安装的版本过高
    3. 是 less-loader 的版本过高，不兼容 getOptions 函数方法，需要对 less-loader 进行降级处理
      1. yarn add less-loader@5.0.0 -D
  1. import styles from './App.module.less';

image.png
重要说明：
less 配置规则放在 sass 的解析规则下面即可，如果放在了 file-loader 的解析规则下面，less 文件解析不会生效

alias别名配置

webpack.config.js的resolve中配置alias别名
paths.appSrc，来源于 paths.js,
设置一个 @代表src目录即可
image.png

jsconfig.json

录中存在jsconfig.json文件表示该目录是JavaScript项目的根目录
jsconfig.json文件指定根文件和JavaScript语言服务提供的功能选项
jsconfig.json源于tsconfig.json，是TypeScript的配置文件
jsconfig.json相当于tsconfig.json的“allowJs”属性设置为true

在根路径下新建 jsconfig.json 可以让 IDEA识别项目的别名（如：@

  1. {
  2.   "compilerOptions": {
  3.     "baseUrl": "./",
  4.     "paths": {
  5.       "@/*": ["src/*"],
  6.       "@assets/*": ["src/assets/*"],
  7.       "@components/*": ["src/components/*"]
  8.     }
  9.   },
  10.   "exclude": ["node_modules", "dist", "build"]
  11. }

提示：您将要排除由构建过程生成的文件（例如，dist目录
这些文件会导致建议显示两次，并会降低IntelliSense的速度

webstorem不识别 @别名

~ 波浪线是相对于其他路径（文件）的，类似于相对路径
去掉波浪线会报错
~@/assets/scss/_variables.scss 表示相对于@（别名，一般是src目录）下的

  1. @import '~@/assets/less/variable.less';
  3. .header {
  4.     color: @primary-color;
  5. }

项目根目录新建 aliasPath.js

  1. const path = require('path')
  3. module.exports = {
  4.   context: path.resolve(__dirname, './'),
  5.   resolve: {
  6.     extensions: ['.js', '.json'],
  7.     alias: {
  8.       '@': path.resolve('src'),
  9.     }
  10.   }
  11. }

webstorm设置 webpack 路径
image.png

components设计

src/components/ 设计成一个整体

  1. /components
  2.     /index.ts
  3.     /Header
  4.       /index.tsx
  5.     /Header.tsx
  6.     /index.module.css
  7.     /Footer
  8.       /index.tsx
  9.     /index.module.css

components/Header/index.tsx

  1. export * from './Header'

components/Footer/index.tsx

  1. export * from './Footer'

components/index.ts

  1. 导出components下的所有文件夹
    1. export * from './Header'
    2. export * from './Footer'

组件使用 components下的组件，以 App.tsx为例

  1. import React from 'react'
  2. import {Header, Footer} from '../components'
  3. import styled from './app.module.less'
  5. function App() {
  6.     return (
  7.       <div className={styled.app}>
  8.         <Header />
  9.         <Footer />
  10.     </div>
  11.   )
  12. }
  14. export default App

eslint配置

a标签href属性警告解决方法

The href attribute is required for an anchor to be keyboard accessible.
Provide a valid, navigable address as the href value.
If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles.
Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid

去除，a href属性警告，在package.json文件中添加如下代码
a标签警告参考 https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md

  1. "eslintConfig": {
  2.     "extends": [
  3.       "react-app",
  4.       "react-app/jest"
  5.     ],
  6.     "rules":{
  7.       "jsx-a11y/anchor-is-valid":"off"
  8.     }
  9.   },

有效的 href

  1. <a href="https://github.com" />
  2. <a href="#section" />
  3. <a href="foo" />
  4. <a href="/foo/bar" />
  5. <a href={someValidPath} />
  6. <a href="https://github.com" onClick={foo} />
  7. <a href="#section" onClick={foo} />
  8. <a href="foo" onClick={foo} />
  9. <a href="/foo/bar" onClick={foo} />
  10. <a href={someValidPath} onClick={foo} />

错误的用法

  1. <a onClick={foo} />
  2. <a href="#" onClick={foo} />
  3. <a href={"#"} onClick={foo} />
  4. <a href={`#`} onClick={foo} />
  5. <a href="javascript:void(0)" onClick={foo} />
  6. <a href={"javascript:void(0)"} onClick={foo} />
  7. <a href={`javascript:void(0)`} onClick={foo} />
  10. // 缺少 href属性
  11. <a />
  12. <a href={undefined} />
  13. <a href={null} />
  16. // 无效的 href属性，错误的用法
  17. <a href="#" />
  18. <a href={"#"} />
  19. <a href={`#`} />
  20. <a href="javascript:void(0)" />
  21. <a href={"javascript:void(0)"} />
  22. <a href={`javascript:void(0)`} />

Guppy可视化

create-react-app 可视化管理工具
react 应用程序管理器和任务运行器
https://github.com/chinanf-boy/guppy-docs-zh

  • create-react-app 可视化创建新项目
  • 运行开发服务器
  • 执行任务 (构建生产,运行测试)
  • 管理依赖项 (添加,更新,搜索)

image.png