阅读 594

react实战-在线音乐播放器

music-react

前言:在七月份初学vue的时候,用vue全家桶做了一个模仿网易云的音乐播放器,那是我学前端的第四个月,不懂工程构建/项目构建/代码规范/模块复用的思想,也能运行,功能也颇为完善,但是最近翻看其代码的时候实在惨不忍睹,于是删除了git仓库,用react重构了一遍,更加注重模块划分以及项目构建,并且引入了eslint与editorconfig规范自己的代码,目前还未重构完成(其实也就完成了主要的播放功能),所以没有打包发布。

推荐歌单.png

歌单详情.png

项目简介

该项目由 Create React App 搭建.

Github地址

  1. 工程构建:Create React App

  2. 项目搭建:

    1. views: views目录用于存放项目功能模块的页面,需要根据路由配置情况以及页面复杂程度大小分割子级目录
    2. config: config目录存放一些配置目录,比如API信息,路由配置等
    3. redux: redux目录用于存放项目state相关的文件,数据获取等等
    4. components: components目录用于存放非业务组件,或者在多个业务间都需要用到的功能组件
    5. common: common目录用于存放一些公共css以及js工具方法
  3. 部分第三方库:

    1. 基础框架: react
    2. 前端路由: react-router[-dom] v4
    3. 数据管理: redux / react-redux / redux-thunk
    4. 网络请求: axios
    5. css预处理器: stylus
    6. 字体图标: icomoon
  4. 代码规范:

    1. eslint: airbnb (可参见根目录下的.eslintrc文件)
    2. 缩进空行等设置可参见项目根目录.editorconfig文件
  5. API:

    1. AD`s API
    2. 部分API由我室友爬虫完成
    3. 使用详情参见src/config/api.js文件

api.png

暂未重构完成

  1. 歌手详情
  2. 排行榜
  3. 收藏歌单
  4. 我喜欢的音乐
  5. 最近播放
  6. 歌曲播放页面

TODO

  1. 使用修饰器语法优化connect
  2. 封装modal组件
  3. 封装分页组件
  4. 性能优化
    • 路由按需加载
    • 动画优化
    • 服务端渲染

本地运行

git clone https://github.com/worldzhao/music-react.git

cd music-react

npm install

npm start
复制代码

每学到一点新知识,新思想,我都会来改进这个项目,欢迎fork和star,如果你正在学习react,通过一个比较综合的项目来实战也还是非常不错的。

Github地址

我的博客

关注下面的标签,发现更多相似文章
评论
说说你的看法