一个适合练手的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
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
部署
node后端
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
- 项目本地部署
- 组件优化
- create-react-app优化打包
- electron构建exe
- 个人中心管理系统
- mysql数据库表的设计
- 登录注册
- koa2-cors解决跨域
- koa-bodyparser解决post数据的解析与提取
- 后端API功能实现、postman测试、前端测试:getDataByPage, addFavorite, deleteFavorite
- cookie
- session