网易云音乐PC项目实战

项目简介

1.项目介绍

项目使用到的技术栈
- CSS使用Flex进行布局
- 配置路径别名使用: carco
- 项目路由使用: react-router来管理
- 使用react-router-config集中式路径映射表管理
- 使用styled-components+普通的css编写样式
- 使用axios发送网络请求
- 项目全面拥抱React Hooks
- 项目组件库使用: ant design
- 使用immutable对项目reducer中state进行管理
- 使用redux-immtable对根目录reducer中state进行管理
- 项目使用redux-thunk中间件
- 使用propType校验props类型及默认值
- 使用react-transition-group添加过渡动画效果
- 项目中的优化: 函数式组件全部采用memo、路由懒加载、函数防抖
项目的目标
- 使用React全家桶开发网易云音乐PC网站

2.适合人群及收获

适合人群:
- 适合想了解一个项目的大致流程
- 或者是学习了React 全家桶但是缺乏React项目经验
  - （如果有的知识点不了解，可以参考以前React系列文章）
  - （最好了解一点Node）
收获:
- 如何设计音乐播放器组件，歌词解析等
- 项目目录的结构划分，大型项目的state管理
- 项目的大致流程，如何进行性能优化等等
注意：
- 学习本篇文章时，页面逻辑js不再贴出 (只有大致的实现思路)
- 毕竟思考和多动手才是实践
  
  基于React全家桶开发「网易云音乐PC」项目实战(一)相关推荐
  1. 基于React全家桶开发「网易云音乐PC」项目实战(二)
    前言本篇开始做「网易云音乐PC」项目,建议最好有以下基础react.redux.redux-thunk.react-router,上一章只是对项目进行初步介绍认识,本章节会带你完成:网易云的基本骨 ...
  2. 基于React全家桶开发「网易云音乐PC」项目实战(四)
    前言前言 hello大家好我是「风不识途」,如果首次阅读本系列请点击,正在学习React的小伙伴可以克隆该项目,参考学习,尝试做一些小功能,下面我们开始完成本系列最重要的音乐播放器列表▶需要完成内容 ...
  3. 基于React全家桶开发「网易云音乐PC」项目实战(三)
    前言 hello大家好,我是"风不识途",很长时间没有更新了~,很多朋友一直在催更新(其实没有),本人最近在实习实在有点忙=.=,有时间的话可以将面试&实习经历总结一下.好 ...
  4. 网易云音乐移动端项目实战(分解下)
    网易云音乐移动端项目实战(分解下) 一.搜索页面与历史搜索记录 <template><div class="listviewTop"><div cla ...
  5. 网易云音乐移动端项目实战(分解中)
    网易云音乐移动端项目实战(分解中) 一.底部全局播放控件制作 play-control.vue <template><div class="playcontrolor&qu ...
  6. 网易云音乐移动端项目实战(分解上)
    网易云音乐后台API服务搭建步骤一 windows系统安装git //傻瓜式安装,可以一直next 步骤二网易云音乐 NodeJS 版 API 下载好后,在vscode下新建一个文件夹右击打开g ...
  7. Vue.js全家桶高还原网易云音乐(Windows PC版)
    项目地址由于网易云的api限制,部分功能可能会失效,如有需要可以clone项目下来在本地运行,如果api炸了,麻烦在评论中告知一下我因为做的是PC端所以请在电脑端访问源码地址项目预览(评论和 ...
  8. vue全家桶系列之网易云音乐(移动版)
    一个精致的网易云音乐webapp 网易云音乐(移动版) api来源(感谢Binaryify不断更新的网易云音乐接口,这也将是这个项目不断拓展下去的坚实依托) 源码地址项目预览(web端在chrome ...
  9. Flutter实战 | 从 0 搭建「网易云音乐」APP（三、每日推荐、推荐歌单）
    本系列可能会伴随大家很长时间,这里我会从0开始搭建一个「网易云音乐」的APP出来. 下面是该APP 功能的思维导图: 前期回顾: •Flutter实战 | 从 0 搭建「网易云音乐」APP(一.创建项 ...
  最新文章
  热门文章

基于React全家桶开发「网易云音乐PC」项目实战(一)

网易云音乐PC项目实战

项目简介

1.项目介绍

2.适合人群及收获

基于React全家桶开发「网易云音乐PC」项目实战(一)相关推荐

最新文章

热门文章