Typescript3 + react16.7 + react-router4.3项目

一个适合练手的react项目

项目以及项目笔记会不断更新

体会vue与react项目区别

声明：本项目参考了滴滴大佬的vue项目，原vue项目请关注ustbhuangyi

项目运行

npm install

npm start

项目中用到的一些自定义types在common/js/typings目录下

可以通过dts-gen为没有types的npm包自动生成d.ts声明文件

项目笔记

D1

• 1、搭建项目
• 2、alias与tsconfig的配置

D2

• 1、Tab组件与路由
• 2、基于better-scroll的react轮播图组件
• 3、http-proxy-middleware
• 4、create-react-app搭建代理（一）
• 5、create-react-app搭建代理（二）
• 6、scroll组件：移动端滚动
• 7、loading组件
• 8、图片懒加载

D3

• 1、图片懒加载组件优化
• 2、歌曲信息页&typescript的用法
• 3、滚动列表复用组件
• 4、异步获取数据&保存组件状态
• 5、除Link外控制路由跳转：withRouter & typescript
• 6、redux使用方法

D4

• 1、withRouter&connect&typescript的使用
• 2、页面切换与异步数据请求bug
• 3、getDerivedStateFromProps使用技巧
• 4、基于react-transition-group的react过渡动画
• 5、react-lodable组件动态导入
• 6、react中输入框防抖debounce

D5

• 1、typescript约束输入数据结构编写listView可复用组件
• 2、typescript在react项目中的实践
• 3、typescript在react项目中的实践之ref

部署

• 1、react项目本地部署到nginx

ToDo

• create-react-app优化打包

页面展示