react-ts模板2.0

最新整理的react模板2.0

react模板2.0 地址戳这里

整合了最新的webpack4,alloy-eslint约束, ant design v4.0.0
  • react 16.12.0
  • react-router
  • redux,redux-thunk
  • hooks,typescript
  • antd v4,sass, less, dayjs
  • lodash,moment,uuid,js-cookie
  • suspense,lazy懒加载
  • axios antd主题切换

运行和打包

$ npm i
$ npm start
$ npm run build-dev // 测试打包
$ npm run build-prod // 正式打包
$ npm run analyze // 分析打包
$ npm run lint // eslint检查

目录

|————config --------------------- 启动和打包配置
| |————webpack.config.js
|————eslintRule ----------------- eslint规则
|————scripts -------------------- 启动和打包脚本
| |————build-analyze.js --------- 文件分析
| |————build.js ----------------- 打包
| |————start.js ----------------- 运行
| |————test.js ------------------ 测试
|————src ------------------------
| |————api  --------------------- 业务逻辑层
| |————assets  ------------------ 全局公用文件
| | |————css  ------------------- css
| | |————images  ---------------- 图片
| | |————iconfont  -------------- 字体等
| |————common  ------------------ 全局通用常量
| |————components  -------------- 通用组件
| | |————common  ---------------- 子组件封装
| | | |————myList.tsx
| | | |————myForm.tsx
| | |————layout  ---------------- 布局
| | | |————header.tsx
| |————views  ------------------- 业务组件
| | |————settlement ------------- 业务模块
| | | |————Settlement.tsx
| | |————index.tsx -------------- 入口
| |————config ------------------- 全局配置
| | |————routerConfig.tsx  ------ 路由配置
| |————redux -------------------- redux
| | |————rootReducer.ts  -------- reducer集合
| | |————user.redux.ts  --------- state | action | reducer集成 | 按模块划分不同文件
| |————typings ------------------ 接口集合
| |————utils -------------------- 通用工具类
|————.eslintrc.js --------------- eslint自定义
|————.prettierrc.js ------------- prettier
|————README.MD ------------------ 项目描述文件
|————SETTINGS.MD ---------------- 运行配置介绍
alloy-eslint

参考SETTINGS.md

原文地址:https://www.cnblogs.com/mapleChain/p/12427378.html

时间: 2024-10-29 20:47:15

react-ts模板2.0的相关文章

react全家桶从0搭建一个完整的react项目(react-router4、redux、redux-saga)

react全家桶从0到1(最新) 本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目.文中针对react.webpack.babel.react-route.redux.redux-saga的核心配置会加以讲解,通过这个项目,可以系统的了解react技术栈的主要知识,避免搭建一次后面就忘记的情况. 从webpack开始 思考一下webpack到底做了什么事情?其实简单来说,就是从入口文件开始,不断寻找依赖,同时为了解析各种不同的文件加载相应的loader,最后生成我们希望的

费用流mcmf模板2.0版

题目地址:HDU 3488 今晚才发现以前的费用流模板居然是错的.......有漏洞....但是居然都AC了那么多题..想想也是..做的费用流也不多,而且都是流量为1的,这个漏洞是不会影响的.因为以前在每次最小费用增广后找到的最小流量是经过的所有路的最小流量,不一定是可以到达汇点的最小流量..但是如果流量都为1的话..那只要边没有全部流过,那肯定最小流量会是1.而如果已经全部流过的话..那也没意义了..已经到达了最大流了.所以说这个漏洞一直都没被发现... 那么应该如何改进呢.那就是跟最短路的方

学习建立基于react,webpack模板项目

我是一个react的初学者,在学习的过程中遇到了模板搭建问题,想把自己遇到的问题记录下来,顺便加深印象,有不对的地方请指正. 学习的过程中,我主要感谢两个人的博客: http://www.wukai.me/2016/09/14/create-a-react-webpack-es6-project/ http://www.jianshu.com/p/42e11515c10f 这两个人的博客写的都非常好,感兴趣的同学可以去看看. 由于我之前没有接触过webpack,所以先学习了一下博客2,然后在按照

React 版本16.9.0 中配置路由以及路由传参

我的脚手架版本如下: "dependencies": { "antd": "^3.21.4", "jquery": "^3.4.1", "lodash": "^4.17.15", "react": "^16.9.0", "react-dom": "^16.9.0", "react

Splay模板 1.0

1 struct Splay{ 2 int rt,sz; ///根节点,树节点总数 3 int va[N],son[N][2],fa[N];///值,左右儿子,父亲 4 void spin(int t){ ///旋转操作 5 int x=fa[t], f=fa[x], y=son[x][1]==t; 6 son[x][y]=son[t][y^1], fa[son[x][y]]=x; 7 son[t][y^1]=x, fa[x]=t, fa[t]=f; 8 if(f) son[f][son[f][

React组件:Dragact 0.1.4发布

Dragact 是一款React组件,他能够使你简单.快速的构建出一款强大的 拖拽式网格(grid)布局. 仓库地址:Dragact 经过几天的迭代时间Dragact已经能够支持自由缩放功能了(resize) 废话不多说,来看看demo 新特性1:大小自由缩放 自由缩放大小的布局 新特性2:getLayout获取当前的布局信息 在live Demo中,我新增了第四个demo 点击以后,可以看到一个布局,这个布局拥有存储能力,也就是当你刷新浏览器以后,他的布局效果不会消失,无论是位置,还是图片大小

性能测试报告模板 V1.0

版权声明:本文为兄弟连IT教育原创文章,未经博主允许不得转载. 1. 测试项目概述与测试目的 1.1 项目概述  本部分主要是针对即将进行压力测试的对象(接口.模块.进程或系统)进行概要的说明,让人明白该测试对象的主要功能与作用及相关背景. 1.2 测试目标  简要列出进行本次压力测试的主要目标(目的). 1.3 名词解释  性能测试过程中涉及的业务和技术方面的专业名词. 1.4 参考文档  列出与本文档相关的参考文档名称. 2. 测试对象的拓扑结构  本部分主要以图表加文字的方式,对待测试对象

react native ts环境搭建

react native编写原生应用,不仅可以编写android,还可以编写ios,使得我们的编程,变得更加的简洁,那其实搭建react native环境是非常简单的,随着互联网的发展,那对于编写的规范也变得更加的严格,比如说,出现的typescript,但是给编程也带来一些麻烦,比如,实现同样一个功能,我们需要写更多的代码,但优点也是很多的 1.使其更易于阅读和调试. 2.为我们提供了ES6(ECMAScript 6)的所有优点,以及更高的工作效率. 3.可以帮助我们避免开发人员通过类型检查代

Trie树模板 POJ1056

IMMEDIATE DECODABILITY Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 12907   Accepted: 6188 Description An encoding of a set of symbols is said to be immediately decodable if no code for one symbol is the prefix of a code for another s