用 create-react-app 来搭建一个脚手架

临时提醒

安装依赖用 npm i --force ，因为 craco-less 和 @craco/craco 版本检查通不过，但是功能是 ok 的，等后续 craco-less 升级了就不用再 force 了。

图省事就直接用 UmiJS

恩图省事的话就直接用 UmiJS 来新建项目啦，基本上啥都配置好了可以直接开始写业务。

在一个空的目录下执行 npx @umijs/create-umi-app 即可。

如果是 npm7 ，在 npm i 时可能会安装依赖失败说版本不兼容的问题，详见 Bug 安装依赖报错 · Issue #6443 · umijs/umi · GitHub ，使用 npm i --legacy-peer-deps 即可。

但是如果还是想自己动手玩

先用 create-react-app 来新建一个项目，命令是 npx create-react-app react-hello 。

浏览器兼容性和支持的语法：Supported Browsers and Features | Create React App 。

打包出来的文件的解释见 Creating a Production Build | Create React App 。

如果项目中有比较多的自己封装的组件，可以加入一个预览的功能，这样前端、设计、产品都能比较方便知道现在项目中封装了哪些组件，见 Developing Components in Isolation | Create React App 。

提交代码时自动格式化代码

MR 见 https://github.com/findxc/react-hello/pull/1/files 。

lint-staged 库表示只考虑本次提交的代码，而不是针对仓库全部代码
husky 是一个钩子，这里只配置了 pre-commit ，就是 commit 前会做的事情
prettier 是一个格式化代码的工具，因为配置项很少可以避免花费太多时间来纠结

先 npm i --save-dev lint-staged prettier ，然后执行 npx husky-init && npm i ，然后在 package.json 中增加：

"lint-staged": {
  "*.{js,jsx}": "eslint",
  "*.{js,jsx,html,css}": "prettier --write"
},

然后 .husky/pre-commit 这里面内容改为：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

这样就配置好了，当你 commit 代码时，会用 eslint 去检查提交的代码有没有问题，也会用 prettier 去格式化一下代码。

路由

MR 见 https://github.com/findxc/react-hello/pull/2/files 。

使用 react-router 来管理路由，安装命令是 npm i react-router-dom 。

关于代码切割： Code-Splitting – React 。

mock 数据

使用 @findtools/mock-server 来启动 mock 服务，使用 mockjs 来 mock 数据。

发请求

MR 见 https://github.com/findxc/react-hello/pull/4/files 。

使用 axios 用来发请求，安装命令是 npm i axios 。

我们可以把一些关于请求的通用处理在 axios 中进行配置，比如发请求成功后都提示一下“操作成功”，如果请求失败则进行具体错误信息的提示，再比如请求 401 后跳转到登录页等。

如果后端接口不允许跨域，则需要配置代理：Proxying API Requests in Development | Create React App。

antd

MR 见 https://github.com/findxc/react-hello/pull/5/files 。

在 create-react-app 中使用 - Ant Design 。

数据管理

MR 见 https://github.com/findxc/react-hello/pull/7/files 。

mobx 使用比较简单，然后我这里对 store 其实没啥比较重的使用场景，所以就选择 mobx 比较省事。

直接定义一个 store ，然后在需要的地方引入这个 store 并用 observe 包装一下组件即可。

// store
import { makeAutoObservable } from 'mobx'

class TimerStore {
  secondsPassed = 0

  constructor() {
    makeAutoObservable(this)
  }

  increaseTimer() {
    this.secondsPassed += 1
  }
}

export default new TimerStore()

// 组件
import timerStore from '../stores/timer'

function Time() {
  return (
    <div>second: {timerStore.secondsPassed}</div>
  )
}

export default observer(Time)

如果希望把多个 store 合在一起的话或者说不同 store 之间要操作数据的话，可以参考 MobX 6 with multiple stores using React hooks - DEV Community 。