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、项目Github地址: react-music

4、项目基本预览,直接移步 github 吧!

二、项目结构

├── 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

React-music 全家桶项目的更多相关文章

  1. react-music React全家桶项目,精品之作!

    React-Music 全家桶项目,精品之作! 一.简介 该项目是基于React全家桶开发的一个音乐播放器,技术栈采用:Webpack + React + React-redux + React-ro ...

  2. 基于 vite 创建 vue3 全家桶项目(vite + vue3 + tsx + pinia)

    vite 最近非常火,它是 vue 作者尤大神发布前端构建工具,底层基于 Rollup,无论是启动速度还是热加载速度都非常快.vite 随 vue3 正式版一起发布,刚开始的时候与 vue 绑定在一起 ...

  3. 已配置好的vue全家桶项目router,vuex,api,axios,vue-ls,async/await,less下载即使用

    github 地址: https://github.com/liangfengbo/vue-cli-project 点击进入 vue-cli-project 已构建配置好的vuejs全家桶项目,统一管 ...

  4. 【React自制全家桶】六、React性能优化(持续更新总结)

    一.通过虚拟DOM来提升性能(自动) 底层讲解见[React自制全家桶]二.分析React的虚拟DOM和Diff算法   二.将多次setState合并为一次执行(自动) 底层讲解见[React自制全 ...

  5. vue3 vite2 封装 SVG 图标组件 - 基于 vite 创建 vue3 全家桶项目续篇

    在<基于 vite 创建 vue3 全家桶>一文整合了 Element Plus,并将 Element Plus 中提供的图标进行全局注册,这样可以很方便的延续 Element UI 的风 ...

  6. 开箱即用 yyg-cli(脚手架工具):快速创建 vue3 组件库和vue3 全家桶项目

    1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架.在 npm 上发布了两个月,11月1日进行了大升级,发布 1.1.0 版本:支持创建 vue3 全家桶项目和 ...

  7. 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目

    前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...

  8. 【React自制全家桶】九、Redux入手

    一.React项目中为什么要用Redux 上图: 左图当使用纯React开发稍微大点的项目,因为React数据是瀑布式的,只能通过父子组件传递数据,所以实现关系不大的两React的组件之间的数据传递就 ...

  9. 【React自制全家桶】七、React实现ajax请求以及本地数据mock

    一.下载axios插件 yarn add axios 二.React的ajax请求代码如何放置 建议放置在生命周期函数之componentDidMount()中 三.ajax之get请求 axios. ...

随机推荐

  1. QMap使用

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:QMap使用     本文地址:https://www.techieliang.com/201 ...

  2. 【Leetcode】72 Edit Distance

    72. Edit Distance Given two words word1 and word2, find the minimum number of steps required to conv ...

  3. 【BioCode】根据seq与位点信息截取窗口

    代码说明 sequence24371.txt 以上为所有氨基酸的编号,序列,与位点标记.根据标记为“1”的位点,截取窗口:如下(实验结果): 图示为一个窗口为12的蛋白质片段 2N+1=25: 实现代 ...

  4. ant 安装及基础教程 !

    这篇文章主要介绍了ant使用指南详细入门教程,本文详细的讲解了安装.验证安装.使用方法.使用实例.ant命令等内容,需要的朋友可以参考下   一.概述 ant 是一个将软件编译.测试.部署等步骤联系在 ...

  5. Q3 大型科技公司季报

    1. alphabet Alphabet(谷歌母公司)今天发布了截至9月30日的2018财年第三季度财报.报告显示,Alphabet第三季度总营收为337.40亿美元,比上年同期的277.72亿美元增 ...

  6. css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记

    最近在研究css3的flex.遇到的flex:1;这一块,很是很纠结,flex-grow.flex-shrink.flex-basis始终搞不清,最经搜集了大量的介绍,应该能算是明白了.网上大部分解释 ...

  7. 超强汇总!110 道 Python 面试笔试题

    https://mp.weixin.qq.com/s/hDQrimihoaHSbrtjLybZLA 今天给大家分享了110道面试题,其中大部分是巩固基本python知识点,希望刚刚入手python,对 ...

  8. log4j配置独立日志方法

    不使用类,而是使用loggerName来创建日志: #json是用java代码创建logger时用name,而不是jsonlog,注意,不需要在rootLogger中再配置,否则其它无关信息也将输出到 ...

  9. sql 两列数据交换

    MSSQL的处理方法   update table1 set field_1 = field_2, field_2 = field_1 可是MySQL就不能这样写,不然一列会覆盖另一列记录   MyS ...

  10. jquery实现可编辑的下拉框( input + select )

    HTML: <input id="inputModel" /> <select name="EngineModel" size="1 ...