react+Typescript+svg仿番茄闹钟
仿番茄土豆的线上webApp
前言
- 这次项目重点体验typescript与react的结合,直接使用官方脚手架create-react-app搭建环境。
- 项目中数据统计图形使用HTML5的Svg展示。
- 项目采用前后端分离开发模式。后端接口需要appkey才可以使用。
项目地址
项目预览
实现功能
- 简单用户系统---登陆/注册/路由鉴权
- 番茄闹钟---25分钟定时闹钟
- 待办任务---番茄闹钟期间完成待办任务,自动记录到番茄描述中
- 数据统计
- 月统计数据---每月累计量 & 增长率 & 平均量
- 番茄历史统计---每日记录(可删改),可手动添加番茄记录
- 待办任务统计---每日记录(可删改)
技术栈
- react(部分component使用hook)
- react-router
- redux+redux-thunk
- ant-d
- typescript
- scss
- axios
预览
- 登陆& 注册
- 首页(主页面)
番茄 & 任务
月统计数据
番茄历史
手动新增番茄
完成的番茄历史
被打断的番茄历史
任务历史
完成的任务历史
删除的任务历史
实现细节
- 封装axios,生成实例。使用拦截器处理后端传来的token
- 关于redux & thunk
- 这次项目主要按照不同模块划分store:tomatoes储存处理番茄闹钟的数据,todos储存处理待办任务的数据,user负责用户系统的数据。
- 由于异步处理不太复杂,因此使用thunk来dispatch 一个 function action 来处理异步数据即可。
- 由于redux中tomatoes和todos两个模块的数据是无耦合的,但是在番茄闹钟运作时,番茄的描述需要与待办任务相关联。这个功能的处理比较一波三折。 第一次实现的思路是每次完成一个todo的时候,都发送一个请求到后端记录当前todo到当前tomato中,但这样每次完成todo时,需要发送请求并且处理当前tomato的数据,这样比较麻烦,而且我希望两个模块间的数据间天然解耦,因此舍弃了这个方案。 第二次实现思路是将todos的数据用props传递到tomato组件,每当todos发生变化时提取completed todo,并根据todo来修改tomato组件的state(description),这个处理比较危险,因为需要在componentDidUpdate这个生命周期里setState,需要很谨慎处理,否则会陷入无限循环。在多次尝试后,选择放弃。 最后,我将番茄的描述--description提升到redux中,每次完成一个todo时, tomatoes也根据这个action type来处理tomatoes模块。将todo记录到description中。
- 关于container的设计,我只将route component作为container,因为这个项目的组件设计并不复杂,如果每个组件都connect,显得更繁杂。不同组件各司其职岂不更好?
- 使用thunk后,action可以是函数。因此在路由鉴权这部分的工作,我也一并放在action这里处理了(登陆、注册后也需要路由跳转),所以并没有使用browserRouter自带的history,而是自己封装了一个history。
- 这次项目的数据统计图---折线图/条形图等使用Svg来展示,SVg相比canvas,它不依赖分辨率,是基于矢量的图像,因此即使在放大或改变尺寸的情况下也不会失真。
react+Typescript+svg仿番茄闹钟相关推荐
- React仿CNode社区(感受React + Typescript + Redux开发流程)
CNode 社区为国内最专业的 Node.js 开源技术社区,致力于 Node.js 的技术研究 GitHub 在线体验地址 说明 使用 React编写,感受React + Typescript + ...
- React+TypeScript+webpack4多入口项目搭建
资源 React-16.8.* react-router-dom-4.3.* TypeScript-3.5.* webpack-4.* eslint-5.16.* 项目目录 ├── dist # 打包 ...
- Vue3.0 + typescript 高仿网易云音乐 WebApp
Vue3.0 + typescript 高仿网易云音乐 WebApp 前言 Vue3.0 的正式发布,让我心动不已,于是尝试用 vue3 实现一个完整的项目,整个项目全部使用了 composition ...
- React + Typescript + Webpack 开发环境配置
对于复杂或多人开发的 React 项目来说,管理和使用每个组件的 props . state 或许会成为一件让人头痛的事情,而为每一个组件写文档,成本也会比较大,对项目的开发效率也不是最理想的. Ty ...
- Webpack 4 + React + Typescript 搭建启动模版
2019年是个崭新的开始,在过去半年的工作中我参与到公司一个大型项目的维护和开发中,深深的体会到了react项目中数据流向复杂,参数类型错乱带来的痛苦体验,于是在崭新的一年我决定拥抱Typescrip ...
- React + TypeScript:元素引用的传递
React 中需要操作元素时,可通过 findDOMNode() 或通过 createRef() 创建对元素的引用来实现.前者官方不推荐,所以这里讨论后者及其与 TypeScript 结合时如何工作. ...
- antd + react model自定义footer_使用ESLint+Prettier规范React+Typescript项目
项目开发过程中,大多数时候我们使用别人搭建好的脚手架编写代码,是项目的参与者.对于一些细节往往被忽略了.其中代码检测本身是一类非常简单的配置,但涉及不同框架和语言组合使用的时候,可能比想象中要困难,本 ...
- React + TypeScript 默认 Props 的处理
React 中的默认 Props 通过组件的 defaultProps 属性可为其 Props 指定默认值. 以下示例来自 React 官方文档 - Default Prop Values: clas ...
- react native多语言_前端福音:为什么使用 React 和 SVG 开发图形 UI 是天作之合?
本文最初发布于 Data Language 网站,经网站授权由 InfoQ 中文站翻译并分享. React 和 SVG 是一种强大的组合:声明式 UI 组件库与声明式图形语言堪称绝配,是前端开发人员的 ...
最新文章
- Delphi与JAVA互加解密AES算法
- 复制windows对话框内容的方法
- Web性能API——帮你分析Web前端性能
- mybatis与mysql调优_MySQL + mybatis的SQL优化方案
- 酷冷至尊官方psu计算工具_一款精致的电源,轻松应付高端配置、酷冷至尊MWE750金牌全模组电源 体验...
- WebAssembly增加Go语言绑定
- 爬虫遇到路径转换的解决方案
- [蓝桥杯][2018年第九届真题]约瑟夫环
- Mac清理软件为苹果系统迅速减压
- 93. 复原IP地址
- 【华为交换机】STP生成树协议端口选举详解
- Unity 5.4 公开测试版发布:增强的视觉效果,更佳的性能表现
- 怎么把度分秒化成小数_excel中批量将经纬度度分秒转换成十进制小数点的方法介绍...
- pthread之条件变量pthread_cond_t
- 5月市场平稳,期货成交量环比下降
- DAZ3D STUDIO渲染设置:基础和技巧
- vue 移动端校验(是否移动设备,安卓/IOS,是否微信浏览器)
- vmware15.5.5版本虚拟机(VMware Workstation 15 Pro)BUG(CentOS7.3下):切换大小写失效的解决方案
- 听歌识曲也太牛了吧!只“音”奥秘在此……
- RT-Thread实战笔记|LD3320非限定词条语音控制器使用详解
热门文章
- CodeForces - 1469D - Ceil Divisions (思维+数学)
- WEB漏洞渗透测试靶场整理资源
- Vue学习2 - 事件处理以及绑定、事件、遍历、判断、元素显示、DOM属性的绑定、comput计算属性值
- Hive User: root is not allowed to impersonate xxx问题
- WordPress初学者入门教程-插件
- 一次实战 WIFI 渗透小米4A千兆路由器提权开 telnet
- 群晖DSM7.X Video Station结合FFMPEG支持DTS视频及EAC3音频编码
- python自动录入系统_自动化批量录入Web系统
- Linux C 面试题总结
- python和c语言哪个简单