第一步

mac 从0开始安装 node git 首先安装 brew

转载自作者：爱睡觉的KKY
链接：www.zhihu.com/question/43…

设备：Mac Mini M1-16GB 我的m2 air

系统版本：BigSur 11.0.1

安装brew，直接终端键入命令：

/bin/zsh -c "$(curl -fsSL https://gitee.com/huwei1024/HomebrewCN/raw/master/Homebrew.sh)"

一路安装结束你可能会发现这个提示：

这是因为M1芯片的包安装位置不在是以前的/usr/local/而是/opt/homebrew，所以要将配置文件里的环境变量改过来。

打开终端键入：

cd ~
mkdir .zshrc
open -e .zshrc

在打开的文本编辑界面修改或增加环境变量：

export PATH=/opt/homebrew/bin:$PATH
export PATH=/opt/homebrew/sbin:$PATH

保存文件后，终端键入：

source .zshrc

测试

然后就是 brew安装 node git

顺便git官网二维码下载那个是煞笔

第二步

开始创建npm create init react-app <你的项目名> 然后调整项目文件

src文件夹下创建 api //借口api assets//静态资源文件 components//公共组件 contants// i18ns//多语言 layouts//页面总体布局不如登陆页面手机端或者pc端细分。。。 pages//页面 redux//懂得都懂 routes//路由 utils//公共方法

不想使用react reject 暴露webpack 因为很丑

偷懒设置@等路径统配符号在项目package.json所在同级目录下创建文件jsconfig.json：**

 {
  "compilerOptions": {
      "target": "ES6",
      "module": "commonjs",
      "allowSyntheticDefaultImports": true,
      "baseUrl": "./",
      "paths": {
        "@/*": ["src/*"]
      }
  },
  "exclude": [
      "node_modules"
  ]
}

这样就要引入

1、使用 `react-app-rewired` 包替换 `react-script`

react-app-rewired@^2.0.0+ 版本需要搭配 customize-cra 使用

# https://www.npmjs.com/package/react-app-rewired
# https://www.npmjs.com/package/customize-cra

$ npm i react-app-rewired -D
$ npm i customize-cra -D

然后在 package.json 文件中将 script 的配置项替换成如下

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }

2、在项目根目录创建 `config-overrides.js`

3、使用 `react-app-rewired` 配置 `alias`

# ./config-overrides.js

const { override, addWebpackAlias } = require('customize-cra')
const path = require('path')
const resolve = dir => path.join(__dirname, '.', dir)

module.exports = override(
  addWebpackAlias({
    ['@']: resolve('src')
  })
)

4、添加 `react-hot-reloader`

# https://www.npmjs.com/package/react-hot-loader
# https://github.com/cdharris/react-app-rewire-hot-loader

$ npm i react-hot-loader -D

$ npm i react-app-rewire-hot-loader -D

5、修改 `config-overrides.js`

# https://github.com/arackaf/customize-cra/issues/54
# ./config-overrides.js

const { override, addWebpackAlias } = require('customize-cra')
const path = require('path')
const resolve = dir => path.join(__dirname, '.', dir)

module.exports = override(
  addWebpackAlias({
    ['@']: resolve('src')
  }),
  (config, env) => {
    config = rewireReactHotLoader(config, env)
    return config
  }
)

6、在根组件处开启 `react-hot-reloader`

# ./App.jsx

import { hot } from 'react-hot-loader/root'

...
...
...

export default process.env.NODE_ENV === 'development' ? hot(App) : App;

7、引入 `antd` 按需加载

+ const { override, fixBabelImports, addWebpackAlias } = require('customize-cra')
const rewireReactHotLoader = require('react-app-rewire-hot-loader')
const path = require('path')

const resolve = dir => path.join(__dirname, '.', dir)

module.exports = override(
 + fixBabelImports('import', {
 +   libraryName: 'antd',
 +   libraryDirectory: 'es',
 +   style: 'css'
 + }),
  addWebpackAlias({
    ['@']: resolve('src')
  }),
  (config, env) => {
    config = rewireReactHotLoader(config, env)
    return config
  }
)

抄自 www.cnblogs.com/aurora-ql/p… 添加热更新安装react-hot-loader

npm install react-hot-loader

2.修改package.json

"babel": {
    "presets": [
      "react-app"
    ],
    "env":
    {
      "development":{
        "plugins": [
          "react-hot-loader/babel"
        ]
      },
      "test":{
        "plugins": [
          "react-hot-loader/babel" 
        ]
      }        
    }
  }

抄自blog.csdn.net/flyaway0624…

第三步

配置路由

抄自 juejin.cn/post/710373… react-router-config 不适合 router v6

v6原生内置useRoutes

import {Outlet}from 'react-router-dom';

const routerConfig =[
  {
    path:'/',
    element: <div>...</div>
  },
  {
    path:'a', 
    element:<div><div>aaa</div><Outlet/></div>,
    children: [
      {
        path: 'b', // 这里的path，写为'/b'，也可以  /加不加都行
        element: <div>bbb</div>
      },
      {
        path: 'c', // 这里的path，写为'/b'，也可以  /加不加都行
        element: <div>ccc</div>
      },
      {
        path: '*', // 这里的path，写为'/b'，也可以  /加不加都行
        element: <div>j4</div>
      }
    ],
    
},
{
path:'*',
element: <div>jijiji</div>
},
]

function App() {
  let element= useRoutes(routerConfig)
  return element
}

<Outlet/> 是一个子路由页面展示的通配符，不加页面子路由无法展示
Redirect重定向成了*

react项目搭建

第一步

第二步

1、使用 react-app-rewired 包替换 react-script

2、在项目根目录创建 config-overrides.js

3、使用 react-app-rewired 配置 alias

4、添加 react-hot-reloader

5、修改 config-overrides.js

6、在根组件处开启 react-hot-reloader

7、引入 antd 按需加载

第三步