React-Music 全家桶项目
一、简介
该项目是基于React全家桶开发的一个音乐播放器，技术栈采用：Webpack + React + React-redux + React-router + Node + Sass + Es6 + Sessionstorage，基本音乐API使用http-proxy酷狗音乐的，在此感谢酷狗音乐！项目涉及的知识点非常广泛，基于react全家桶技术都有使用，具有很好的参考价值！
1、项目依赖基本核心版本：
- react: "^15.6.1",
- react-dom: "^15.6.1",
- react-router: "^4.2.0",
- react-router-dom: "^4.2.2"
- react-redux: "^5.0.6",
- redux: "^3.7.2",
- webpack: "^3.5.5",
- webpack-dev-server: "^2.7.1"
2、该音乐播放器基本功能：
3、项目Github地址：React-music
4、项目基本预览：
二、项目结构
├── src（主目录） │ ├── actions（Redux action） │ │ ├── xxx.js │ │ └── ... │ ├── components（木偶组件目录） │ │ ├── Artist │ │ │ ├── xxx.js │ │ │ └── ... │ │ ├── Common │ │ │ ├── xxx.js │ │ │ └── ... │ │ ├── Home │ │ │ ├── xxx.js │ │ │ └── ... │ │ ├── New │ │ │ ├── xxx.js │ │ │ └── ... │ │ ├── Play │ │ │ ├── xxx.js │ │ │ └── ... │ │ ├── Rank │ │ │ ├── xxx.js │ │ │ └── ... │ │ ├── Search │ │ │ ├── xxx.js │ │ │ └── ... │ │ └── User │ │ ├── xxx.js │ │ └── ... │ ├── constants（Constant常量） │ │ └── index.js │ ├── reducers（Redux reducer） │ │ ├── index.js │ │ └── ... │ ├── containers（智能组件目录） │ │ ├── Artist │ │ │ ├── xxx.js │ │ │ └── ... │ │ ├── Home │ │ │ ├── xxx.js │ │ │ └── ... │ │ ├── New │ │ │ ├── xxx.js │ │ │ └── ... │ │ ├── Play │ │ │ ├── xxx.js │ │ │ └── ... │ │ ├── Rank │ │ │ ├── xxx.js │ │ │ └── ... │ │ ├── Search │ │ │ ├── xxx.js │ │ │ └── ... │ │ └── User │ │ ├── xxx.js │ │ └── ... │ ├── routes（路由） │ │ └── index.js │ ├── static（静态目录） │ │ ├── css │ │ │ ├── xxx.scss │ │ │ └── ... │ │ └── images │ │ └── ... │ ├── store（Redux store） │ │ └── configureStore.js │ ├── util（工具目录） │ │ ├── xxx.js │ │ └── ... ├── templates（模板） │ └── index.html ├── dist（打包目录） │ ├── css │ │ └── xxx.css │ ├── js │ │ ├── xxx.js │ │ └── ... │ ├── favicon.ico │ └── index.html ├── node_modules │ └── ... ├── README.md ├── app.js（Express启动配置） ├── server.js（主服务配置） ├── webpack.config.js（基本配置） ├── webpack.prod.config.js（生产环境配置） ├── yarn.lock └── package.json
screenshot与images.md为截图说明文件，是为了方便查看，与本项目无关！
三、如何执行
1、将项目克隆到本地，cd 到 react-music
git clone git@github.com:chenjun1127/react-music.git cd react-music
2、安装依赖
npm install or yarn install
3、执行
npm start or yarn start // npm run build(打包)
4、打开浏览器浏览 http://localhost:3000/
四、项目总结
整体项目实现了一个基本播放器应有的功能，但个别功能还有待完善，比如收藏列表本地持续化存储、登录注册未做真正限制等。觉得项目不错的，可以给个Star，谢谢！
Tips：在npm install or yarn install 的时候，请确保网络良好，如个别依赖安装不了，请设置淘宝镜像为安装源；
如有问题：请联系QQ：402074940
原文链接：https://www.f2er.com/react/302546.html