一个适合练手的react项目

项目正在用hooks重构

体会vue与react项目区别

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

项目运行

后端项目启动

安装mysql

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

登录用户: mysql -uroot -p

输入密码

创建数据库：CREATE DATABASE music;

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

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

npm install

npm start

前端项目启动

npm install

npm run dev

项目中用到的一些自定义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

D6

• 1、webpack之splitChunks提升打包编译速度
• 2、webpack之happypack多线程打包

部署

• 1、react项目本地部署到nginx
• 2、gzip优化

node后端

• 1、后端项目结构
• 2、代理实现本地cookie跨域调试
• 3、webpack-dev-server原理分析
• 4、基于session与cookie的登录凭证
• 5、cookie+签名实现登录凭证

调试

• 1、fiddler抓包http进行本地调试

ToDo

• 完善项目中typescript类型
  • store，action类型
  • 数据类型
  • 无状态组件 React.SFC
  • 有状态组件
    readonly state : Readonly<IState>，react已经对props、props的属性与state的属性作了只读处理
  • react事件类型
  • ref类型 React.RefObject<Scroll> --> <Scroll ref={this.toplist}></Scroll>
  • 媒体事件类型 const { currentTime } : { currentTime: number } = e.target as HTMLMediaElement
  • 完善 type 的组织方式
• 项目本地部署
• 项目结构的思考，总结
• electron构建exe
• 个人中心管理系统
  • mysql数据库表的设计
  • 登录注册
  • koa2-cors解决跨域
  • koa-bodyparser解决post数据的解析与提取
  • 后端API功能实现、postman测试、前端测试:getDataByPage, addFavorite, deleteFavorite
  • cookie:利用webpack的webpack-dev-server代理实现本地cookie跨域调试。
  • cookie + 签名:获取数据库中用户信息
  • session:
    • koa-session-minimal 适用于koa2 的session中间件，提供存储介质的读写接口 。
    • koa-mysql-session 为koa-session-minimal中间件提供MySQL数据库的session数据读写操作。
    • koa-redis 为koa-session-minimal中间件提供redis的session数据读写操作。
  • 数据上传，下载
  • 缓存
  • 静态服务器
  • nginx负载均衡，redis存储
  • 压力测试
  • 日志
  • 部署，pm2
  • websocket, https

页面展示