React+TypeScript + Redux 仿制网易云-- [起手式]

524 阅读1分钟

学习了将近半个月的React全家桶,兴致勃勃的撸一个仿网易云, 手写发下地址链接 仿网易云 go >>  废话不多说,流量如果不够,请使用wifi查看~

1. 使用的React及周边

1.  react             
2.  TypeScript 
3.  redux
4.  react-redux
5.  redux-actions
6.  react-router-dom
7.  react-router
8.  react-router-redux
9.  scss 
10. http-proxy-middleware

2. 文件夹分类

Vueer出身, 所以为了方便, 尽量写成了和Vue一样的格式, 如下:
    |
    |-- src          ==> 根目录
    |    ┕component  ==> 通用组件目录
    |    ┕pages      ==> 路由文件路径
    |    ┕redux      ==> redux 配置文件
    |    ┕static     ==> 静态文件目录
    |    ┕utils      ==> 通用工具类/方法

3.目前已经实现

1.首页ui基本完成, 剩余音乐跳转和播放
2.自定义播放器
3.分页
4.路由配置
5.拖拽登录框
6.自定义toast
7.通用工具类EventBus
持续更新中...

4.Gif图警告



5. React v16.8

项目React hook 覆盖率95%, 不用不知道, 一用吓一跳, 不得不说, 真香~

RFC 对比 RCC 优势 :
                   1. 简洁, 代码量明显减少
                   2. 有状态无状态组件随意切换
                   3. 更加容易上手
                   4. 与以往API对比明显简洁很多

6.项目前期预览图





7. 结语

下一篇开始,会从0开始搭建一个React+TypeScript项目,当然是用create-react-app了~