• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

react to typescript: 基于 create-react-app 和 typescript 的 React 项目工程 ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

react to typescript

开源软件地址:

https://gitee.com/dyb881/react-ts

开源软件介绍:

已重构到 react-app

react 项目包


star
基于 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. npm config set registry https://registry.npm.taobao.org // 指定到淘宝镜像
  2. npm install --global yarn // 安装 yarn
  3. yarn // 安装项目
  4. yarn start // 开发模式
  5. yarn build // 打包
  6. yarn serve // 以服务运行打包后的文件
  7. yarn electron-start // 运行客户端开发模式,前提需要先运行 yarn start
  8. yarn packager // 客户端打包,前提需要先运行 yarn build

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap