All Projects → chenjun1127 → React Music

chenjun1127 / React Music

基于React全家桶开发的音乐播放器

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Music

React Redux Antdesign Webpack Starter
react + redux + ant design + react-router 4 + webpack 4 starter
Stars: ✭ 44 (-84.34%)
Mutual labels:  webpack, react-router-v4
Webpack React
👍👏react入门,抛砖引玉
Stars: ✭ 79 (-71.89%)
Mutual labels:  webpack, react-router-v4
Tvrboreact
Dream starter project: React, Redux, React Router, Webpack
Stars: ✭ 13 (-95.37%)
Mutual labels:  webpack, react-router-v4
The Ultimate Boilerplate
webpack 2, react hotloader 3, react router v4, code splitting and more
Stars: ✭ 85 (-69.75%)
Mutual labels:  webpack, react-router-v4
Universal React Redux
🧐 A sensible universal starter kit for React + Redux
Stars: ✭ 112 (-60.14%)
Mutual labels:  webpack, react-router-v4
React Redux Bootstrap Webpack Starter
React 16.9 + Typescript + React-Router 4 + Redux + Bootstrap 4 + Hot Reload + redux-devtools-extension + Webpack 4 + styled-components STARTER
Stars: ✭ 133 (-52.67%)
Mutual labels:  webpack, react-router-v4
React Seed
UruIT's react seed project
Stars: ✭ 67 (-76.16%)
Mutual labels:  webpack, react-router-v4
React Dashboard
🔥React Dashboard - isomorphic admin dashboard template (React.js, Bootstrap, Node.js, GraphQL, React Router, Babel, Webpack, Browsersync) 🔥
Stars: ✭ 1,268 (+351.25%)
Mutual labels:  webpack, react-router-v4
React Bootstrap Webpack Starter
ReactJS 16.4 + new React Context API +react Router 4 + webpack 4 + babel 7+ hot Reload + Bootstrap 4 + styled-components
Stars: ✭ 103 (-63.35%)
Mutual labels:  webpack, react-router-v4
React Redux Graphql Apollo Bootstrap Webpack Starter
react js + redux + graphQL + Apollo + react router + hot reload + devTools + bootstrap + webpack starter
Stars: ✭ 127 (-54.8%)
Mutual labels:  webpack, react-router-v4
React Expressjs
Simple and compact boilerplate for ReactJS project with expressJS
Stars: ✭ 208 (-25.98%)
Mutual labels:  webpack, react-router-v4
Webpack Assets Manifest
This Webpack plugin will generate a JSON file that matches the original filename with the hashed version.
Stars: ✭ 269 (-4.27%)
Mutual labels:  webpack
Doclever
做最好的接口管理平台
Stars: ✭ 2,849 (+913.88%)
Mutual labels:  webpack
Simple React App
Simple base app using react, react-router v4, hot-reload & sass.
Stars: ✭ 263 (-6.41%)
Mutual labels:  react-router-v4
You May Not Know Vuejs
Vuejs 从入门到精通系列文章
Stars: ✭ 263 (-6.41%)
Mutual labels:  webpack
Minification Benchmarks
🏃‍♂️🏃‍♀️🏃 JS minification benchmarks: babel-minify, esbuild, terser, uglify-js, swc, google closure compiler
Stars: ✭ 271 (-3.56%)
Mutual labels:  webpack
Threejs Webpack Es6 Boilerplate
A basic boilerplate for a Three.js project compiled with Webpack and transpiled via Babel to enable using ES6 syntax.
Stars: ✭ 267 (-4.98%)
Mutual labels:  webpack
Cadence Web
Web UI for visualizing workflows on Cadence
Stars: ✭ 261 (-7.12%)
Mutual labels:  webpack
Vue Express Mongo Boilerplate
⭐ MEVN Full stack JS web app boilerplate with NodeJS, Express, Mongo and VueJS
Stars: ✭ 2,814 (+901.42%)
Mutual labels:  webpack
Vue Electron Template
An Electron & Vue.js template with Hot-reloading enabled and common Vue plugins, dev, debug and build scripts configured.
Stars: ✭ 260 (-7.47%)
Mutual labels:  webpack

React-Music

一、简介

该项目是基于React全家桶开发的一个音乐播放器,技术栈采用:Webpack + React + React-redux + React-router + Node + Sass + Es6 + Localstorage+ Css3,基本音乐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、项目动图预览:

首页

二、项目结构

├── src               			项目主文件目录
   ├── actions           		Redux actions
      ├── 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 reducers
      ├── 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

三、如何执行

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/,强烈建议使用 Chrome、Firefox 浏览器浏览。

四、项目总结

整体项目实现了一个基本播放器应有的功能,但个别功能还有待完善,比如收藏列表本地持续化存储、登录注册未做真正限制等。觉得项目不错的,可以给个Star,谢谢! 如果您觉得本项目对你有所帮助,不妨扫描下方二维码(左微信,右支付宝)请我喝杯咖啡,谢谢!

微信 支付宝

Tips:在npm install or yarn install 的时候,请确保网络良好,如个别依赖安装不了,请设置淘宝镜像为安装源;

如有问题:请 Issue 或联系QQ:402074940。

当前版本如运行不成功,可看最新 react-music-v2.0 版本。

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].