代码拉取完成,页面将自动刷新
基于 create-react-app v2 --typescript 的项目工程
使用 react-app-rewired 拓展配置
状态管理默认使用 mobx
并已用 react-router 搭建页面框架,在页面配置文件配置即可添加新页面
默认使用 antd | antd-mobile 作为主体 UI,已配置按需加载,推荐在 component 内部二次封装再导出,方便统一修改
支持 electron 跨平台桌面应用开发,需要自行引用包
这并不是一个框架,而是一个 react 项目的文件管理习惯
每一次开发项目都可进行优化以及一些组件和工具函数的加入
定期更新依赖版本
业务上拆分为一级路由,一个页面一个文件夹,注册在 page/config.ts
数据储存也按业务区分为单个文件到 store 并实例化到 store/index.ts 中,组成一个主 store,多个子 store,在 App.tsx 中注入,注入前可执行预设,比如自动登录判断等操作
外部引用大组件适当使用import()分包
如果是React组件 可以使用 React.lazy() and <React.Suspense>
TsLint代码审查
项目文档
│ config-overrides.js react-app-rewired 配置文件
│ NORM.md 开发规范文档
│ PROJECT.md 项目文档
│ README.md 描述文档
│ tsconfig.json ts编译配置
│ tslint.json ts代码审查配置
├─public
│ config.js 项目配置
└─src
├── App.less 全局样式
├── App.test.tsx
├── App.tsx 项目初始化
├── api.ts API请求工具初始化
├── api_mock.ts API模拟数据注册
├── react-app-env.d.ts 外部引用类型描述
├── config.ts 主配置
├── index.tsx 入口文件
├── component 组件
│ ├── mobile 移动端组件
│ │ ├── antd antd 组件二次封装
│ │ ├── header 标题栏
│ │ └── tabBar 底部导航
│ ├── pc pc端组件
│ │ └── antd antd 组件二次封装
│ ├── file 文件
│ │ ├── get_file.tsx 获取文件
│ │ └── img 图片组件 - 包含预览功能
│ ├── form 表单工具组件
│ ├── router 批量路由页面注册
│ └── transition/style.less 全局 react-addons-css-transition-group 动画注册
├── interface 公共接口
├─page 所有页面
│ │ config.ts 页面配置
│ │ index.tsx 注册及主体页面
│ ├─Folder1 首页1
│ └─Folder2 页面2
├─store 状态管理
│ index.ts 主状态
│ view.ts 视图状态
│ user.ts 用户状态
│ File1.ts 子状态1
│ File2.ts 子状态2
└── tool 工具函数
├── city.json 省市县数据
├── dom.ts dom相关
├── file.ts 文件相关
├── function.less less函数
├── index.ts 常用
├── mock.ts 模拟数据
├── reg_exp.ts 正则
├── request 请求封装
└── string. 字符串相关
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型