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

一个适合练手的react项目

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

体会vue与react项目区别

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

项目运行

前端项目启动

npm install

npm start

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

能够经过dts-gen为没有types的npm包自动生成d.ts声明文件

后端项目启动

安装mysql

启动mysql服务:net start <mysql程序名称>

登陆用户: mysql -uroot -p

输入密码

建立数据库：CREATE DATABASE music;

利用server/sql/music.sql中的查询语句建立数据表user

启动一个终端，切换到server文件夹下

npm install

npm start

项目笔记

D1

• 一、搭建项目
• 二、alias与tsconfig的配置

D2

• 一、Tab组件与路由
• 二、基于better-scroll的react轮播图组件
• 三、http-proxy-middleware
• 四、create-react-app搭建代理（一）
• 五、create-react-app搭建代理（二）
• 六、scroll组件：移动端滚动
• 七、loading组件
• 八、图片懒加载

D3

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

D4

• 一、withRouter&connect&typescript的使用
• 二、页面切换与异步数据请求bug
• 三、getDerivedStateFromProps使用技巧
• 四、基于react-transition-group的react过渡动画
• 五、react-lodable组件动态导入
• 六、react中输入框防抖debounce

D5

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

D6

• 一、webpack之splitChunks提高打包编译速度
• 二、webpack之happypack多线程打包

部署

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

node后端

• 一、后端项目结构

ToDo

• [x] 完善项目中typescript类型

  • [x] store，action类型
  • [x] 数据类型
  • [x] 无状态组件 React.SFC
  • [x] 有状态组件
    readonly state : Readonly<IState>，react已经对props、props的属性与state的属性做了只读处理
  • [x] react事件类型
  • [x] ref类型 React.RefObject<Scroll> --> <Scroll ref={this.toplist}></Scroll>
  • [x] 媒体事件类型 const { currentTime } : { currentTime: number } = e.target as HTMLMediaElement
• [x] 项目本地部署
• [ ] 组件优化
• [ ] create-react-app优化打包
• [ ] electron构建exe

• [ ] 我的中心管理系统

  • [x] mysql数据库表的设计
  • [x] 登陆注册
  • [x] koa2-cors解决跨域
  • [x] koa-bodyparser解决post数据的解析与提取
  • [x] 后端API功能实现、postman测试、前端测试:getDataByPage, addFavorite, deleteFavorite
  • [ ] cookie
  • [ ] session

页面展现