Kim09AI / React Music
react开发app版的网易云音乐
Stars: ✭ 79
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to React Music
Apollo Redux Form
Redux forms powered by Apollo
Stars: ✭ 52 (-34.18%)
Mutual labels: graphql, react-redux
Graphqldesigner.com
A developer web-app tool to rapidly prototype a full stack implementation of GraphQL with React.
Stars: ✭ 587 (+643.04%)
Mutual labels: graphql, react-redux
Go Graphql Api
Source code for a tutorial on Medium I published - "Building an API with GraphQL and Go"
Stars: ✭ 73 (-7.59%)
Mutual labels: graphql
Moviesapp
React Native Movies App: AWS Amplify, AWS AppSync, AWS Cognito, GraphQL, DynamoDB
Stars: ✭ 78 (-1.27%)
Mutual labels: graphql
Nextjs Strapi Boilerplate
🎨 Boilerplate for building applications using Strapi and Next.js
Stars: ✭ 76 (-3.8%)
Mutual labels: graphql
Microsoft Graph Explorer V4
React/Redux version of Graph Explorer used to learn the Microsoft Graph Api
Stars: ✭ 74 (-6.33%)
Mutual labels: react-redux
Apollo Tote
👜 A declarative approach to handling Apollo GraphQL queries in React
Stars: ✭ 76 (-3.8%)
Mutual labels: graphql
Graphql Schema Language Cheat Sheet
GraphQL Shorthand Notation Cheat Sheet
Stars: ✭ 1,181 (+1394.94%)
Mutual labels: graphql
Graphql Rxjs
fork of Graphql which adds Observable support
Stars: ✭ 78 (-1.27%)
Mutual labels: graphql
Daptin
Daptin - Backend As A Service - GraphQL/JSON-API Headless CMS
Stars: ✭ 1,195 (+1412.66%)
Mutual labels: graphql
Apollo Client Devtools
Apollo Client browser developer tools.
Stars: ✭ 1,210 (+1431.65%)
Mutual labels: graphql
Flask Graphql
Adds GraphQL support to your Flask application.
Stars: ✭ 1,188 (+1403.8%)
Mutual labels: graphql
Graphql Persisted Document Loader
Webpack loader that adds a documentId to a compiled graphql document, which can be used when persisting/retrieving documents
Stars: ✭ 74 (-6.33%)
Mutual labels: graphql
Graphqlicious
A swift component with a DSL to declare GraphQL queries and to get string representations out of them
Stars: ✭ 76 (-3.8%)
Mutual labels: graphql
Realm React Redux
A redux like store with Realm as the state
Stars: ✭ 72 (-8.86%)
Mutual labels: react-redux
Facebook Graph Api
Get data using facebook graph API - V3.2
Stars: ✭ 73 (-7.59%)
Mutual labels: graphql
Springboot Projects Fullstack
Spring Boot, JDBC, ORM, JPA, Hibernate, H2, MySQL, Oracle
Stars: ✭ 76 (-3.8%)
Mutual labels: graphql
Purescript Graphql
End to End typesafe GraphQL with PureScript
Stars: ✭ 79 (+0%)
Mutual labels: graphql
react-music
本来没打算写网易云音乐的，好像都已经被大家写烂了，不过没办法，暂时想不到其他的可写，加上网易云音乐又有API，还可以基于restful API做一层graphql的处理再提供给前端调用，然后才决定用react写了这个仿app版网易云音乐
技术栈
- react
- react-router
- redux
- react-redux
- react-motion
- better-scroll
- ES6/7
- stylus
- koa
- graphql
实现的功能
- 发现页
- 我的
- 电台页
- 侧边栏
- 歌单内页
- 电台内页
- 搜索页及结果页
- 上一首
- 下一首
- 播放模式切换
- 歌曲删除
- 歌词
- 左右滑切歌
运行
git clone [email protected]:Binaryify/NeteaseCloudMusicApi.git
这是网易云API，因为最新的banner数据已经改了，可以git reset --hard d155a1fc0177e525cb650d239b8a98a8549a85e1回退到这次提交
cross-env PORT=8080 npm start
首先启动api服务器，需要用8080端口启动
git clone [email protected]:Kim09AI/react-music.git
# dev模式
# 先启动graphql服务器
$ cd server && npm run dev
# 再回到根目录
$ npm start
# production模式
# 首次build前先执行(因为使用了dll)
$ npm run build:dll
$ npm run build
# 本地以production模式启动服务器
cd server && npm start
预览
react使用的一些总结
主要还是在react-redux的使用了，数据应该保存在state还是全局的store，主要还是看数据需不需要共享，或者是需不需要缓存，不然存在store反而会使问题变得更麻烦
最后
感谢Binaryify提供的NeteaseCloudMusicApi
欢迎star或fork，有问题或有发现bug页欢迎提issues，写的不好的地方也请大佬指点
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].