项目地址：parcel-typescript-react-boilerplate 欢迎批评指正，顺手点个星呗，另外赠送一个代码生成器，根据表结构生成单表的CURD页面，然后根据实际的业务手动修改即可：react-admin-generator
Parcel
2017年底给开发者最大的惊喜非 Parcel 莫属了，使用过 Webpack 的同学都会有配置太过复杂的感受，甚至 Webpack 的维护者有时候做项目也会 copy 一些常用的配置。如果使用 Parcel，仅仅定义好 index.html、index.js和index.css 它就会为我们做好一切的打包工作，就像没有使用过任何打包工具一样，这样就很舒服。
Webpack 虽然复杂，但是很灵活，功能很全，Parcel 也需要为零配置付出很多代价，我们期待它更加完善。
Mobx
状态管理是前端开发很重要的一个话题，在开发 React 应用的时候默认的状态管理肯定会选择 Redux 了，但是我选择使用 Mobx，Redux 受到函数式编程的影响，但很多人都有面向对象语言的背景，在刚开始的时候很难适应函数式编程的原则。所以 Mobx 对初学者更加友好。
Mobx 的原则很简单：任何源自应用状态的东西都应该自动地获得。怎么理解？比如我有一个变量 a，我的应用订阅了这个变量，当 a 改变的时候我的应用会自动收到最新的值。在 React 中的这个变量就是 state，当 state 改变，mobx-react 就会重新渲染视图。
技术栈
核心库
工具
目录结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
| ├── src
│ ├── app.scss
│ ├── app.tsx # 入口文件
│ ├── pages.tsx # 模板页
│ ├── routes.ts # 菜单
│ ├── assets # 资源文件
│ │ └── logo.svg
│ ├── components # 组件目录
│ │ ├── content-container # 页面container，定义了淡入动画
│ │ │ └── index.tsx
│ │ ├── index.tsx # components 入口文件
│ │ ├── layout # 布局页
│ │ │ ├── index.scss
│ │ │ └── index.tsx
│ │ ├── login-form # 登陆组件
│ │ │ ├── index.scss
│ │ │ └── index.tsx
│ │ └── router-link
│ │ └── index.tsx
│ ├── service # api
│ │ ├── base.ts
│ │ ├── index.ts # api 入口文件
│ │ └── user
│ │ └── index.ts
│ ├── stores # mobx store
│ │ ├── app
│ │ │ └── index.ts
│ │ ├── base.ts
│ │ ├── index.ts # store 入口文件
│ │ ├── member
│ │ │ └── index.ts
│ │ └── user
│ │ └── index.ts
│ ├── utils # 工具类
│ │ ├── auth.ts
│ │ ├── fetch.ts
│ │ ├── index.ts # 工具类入口文件
│ │ └── validator.ts
│ └── views # 页面
│ ├── index.ts
│ ├── login
│ │ └── index.tsx
│ ├── member
│ │ └── index.tsx
│ ├── not-found
│ │ └── index.tsx
│ └── user
│ ├── add.tsx
│ ├── edit.tsx
│ ├── form.tsx
│ ├── index.tsx
│ ├── list.tsx
│ └── table.tsx
├── index.html
├── tsconfig.json
├── tslint.json
├── yarn-error.log
└── yarn.lock
├── README.md
├── package.json
|