1. 构建项目环境

• 安装 nodejs npm
  • 下载地址：https://nodejs.org/en/download/
  • 下载对应的 Linux 二进制文件（x64），node-v14.15.3-linux-x64.tar.xz ```shell

    解压文件到指定目录

    $ sudo mkdir -p /usr/local/lib/nodejs $ sudo tar -xJvf node-v14.15.3-linux-x64.tar.xz -C /usr/local/lib/nodejs

创建软链，在任意目录都可以使用

sudo ln -s /usr/local/lib/nodejs/node-v14.15.3-linux-x64/bin/node /usr/local/bin/ sudo ln -s /usr/local/lib/nodejs/node-v14.15.3-linux-x64/bin/npm /usr/local/bin/

测试安装是否成功

$ node -v $ npm version

- **如何安装 React 官方脚手架**
```bash
#配置国内源(国内可选)
$ sudo npm -g install cnpm
$ sudo ln -s /usr/local/lib/nodejs/node-v14.15.3-linux-x64/bin/cnpm  /usr/local/bin/
$ npm config set registry https://registry.npm.taobao.org
$ sudo cnpm install -g create-react-app
$ create-react-app --version
$ create-react-app my-app
$cd my-app
$ npm start

• 如何使用 Yarn （Facebook 开源的新一代包管理器）

  • yarn init
  • yarn add 下载一个包
  • yarn remove 删除一个包
  • yarn 、yarn install 安装项目的所有依赖包
  • 安装 yarn

    $ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
    $ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
    $ sudo apt update && sudo apt install yarn
    $ yarn --version

• 安装所需的插件

  • 安装 Reat-Router、Axios
  • 安装 AntD (支付包开发的UI框架，基于React封装)
  • 暴露webpack配置文件
  • 安装less-loader（AntD基于less开发，需要暴露webpack安装less） ```bash $ cd my-app

$ yarn add react-router-dom axios antd

$ yarn start

   - 可能出现的问题
```bash
#yarn start 启动react项目时报错：
#Error: ENOSPC: System limit for number of file watchers reached
#解决办法
#Step 1 ：打开编辑文件
sudo vim /etc/sysctl.conf
#Step2：在文件最后一行添加下面这句，并保存
fs.inotify.max_user_watches=524288
#Step3：执行
sudo sysctl -p

• less 按需加载的配置 ```json

  1. 添加依赖

  customize-cra 帮助你自定义react脚手配置

  react-app-rewired 帮助你重写react脚手架配置

  babel-plugin-import 帮助antd按需加载

  $ yarn add less-loader less customize-cra react-app-rewired babel-plugin-import

2. 项目根目录下创建 config-overrides.js配置文件

const { override, addLessLoader, // less配置函数 fixBabelImports, // 按需加载配置函数 // addBabelPlugins // babel插件配置函数 } = require(‘customize-cra’)

module.exports = override( addLessLoader({ lessOptions: { modifyVars: { ‘primary-color’: ‘#1DA57A’, ‘link-color’: ‘#1DA57A’, ‘border-radius-base’: ‘2px’, }, javascriptEnabled: true, } }), // …addBabelPlugins( // 支持装饰器 // [ // ‘@babel/plugin-proposal-decorators’, // { legacy: true} // ] // ), fixBabelImports(‘import’, { // antd 按需加载 libraryName: ‘antd’, libraryDirectory: ‘es’, style: ‘css’ }) )

3. 修改 package.json 的 scripts 字段, 将react-scripts替换成react-app-rewired

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

   - 辅助插件 jsonp，解决跨域问题
```bash
$ yarn add jsonp --save

• 集成 Redux，和在 Chrome 中安装 Redux Devtools 扩展

  $ yarn add redux react-redux redux-devtools-extension --save

• 集成图表 echart

  $ yarn add echarts echarts-for-react  --save
  $ yarn add react-async-script-loader @googlemaps/js-api-loader --save
  $ yarn add google-map-react --save