React-Music

A list,

This project is based on the React family bucket development of a music player, technology stack using: Webpack + React + react-redux + react-router + Node + Sass + Es6 + Localstorage+ Css3 The project involves a wide range of knowledge points, including the use of react family bucket technology, original and independent development of high-quality works, with good reference value!

1. The project relies on the basic core version:

  • React: “^ 15.6.1”,
  • The react – dom: “^ 15.6.1”,
  • The react to the router: “^ 4.2.0”,
  • The react – the router – dom: “^ 4.2.2.” “
  • The react – story: “^ 5.0.6”,
  • Story: “^ 3.7.2”,
  • Webpack: “^ 2.6.2”,
  • Webpack dev – server: “^ 2.7.1.” “

2. Basic functions of the music player:

  • Show the latest recommended playlists, playlists, charts and artists;
  • Music play, pause, previous song, next song, delete the current playlist function;
  • Control volume size, search to add history storage function;
  • Basic search function;
  • Like music to add to favorites list;
  • Simulate login function (just enter the user name and password);

3, project GIF preview, please go directly to Github to see the source code and GIF!

Ii. Project structure

├ ─ ─ the SRC project master file directory │ ├ ─ ─ the actions Redux actions │ │ ├ ─ ─ XXX. Js │ │ └ ─ ─... │ ├ ─ ─ components puppet components home directory │ │ ├ ─ ─ Artist │ │ │ ├ ─ ─ XXX. Js │ │ │ └ ─ ─... │ │ ├ ─ ─ Common │ │ │ ├ ─ ─ XXX. Js │ │ │ └ ─ ─... │ │ ├ ─ ─ Home │ │ │ ├ ─ ─ XXX. Js │ │ │ └ ─ ─... │ │ ├ ─ ─ New │ │ │ ├ ─ ─ XXX. Js │ │ │ └ ─ ─... │ │ ├ ─ ─ Play │ │ │ ├ ─ ─ XXX. Js │ │ │ └ ─ ─... │ │ ├ ─ ─ Rank │ │ │ ├ ─ ─ XXX. Js │ │ │ └ ─ ─... │ │ ├ ─ ─ Search │ │ │ ├ ─ ─ XXX. Js │ │ │ └ ─ ─... │ ├─ ├─ ├─ │ ├─ ├─ ├─ ├─ │ ├─ ├─ ├─ │ ├ ─ ─ constants Constant Constant │ │ └ ─ ─ index. The js │ ├ ─ ─ reducers Redux reducers │ │ ├ ─ ─ index. The js │ │ └ ─ ─... │ ├ ─ ─ containers intelligent component │ │ ├ ─ ─ Artist │ │ │ ├ ─ ─ XXX. Js │ │ │ └ ─ ─... │ │ ├ ─ ─ Home │ │ │ ├ ─ ─ XXX. Js │ │ │ └ ─ ─... │ │ ├ ─ ─ New │ │ │ ├ ─ ─ XXX. Js │ │ │ └ ─ ─... │ │ ├ ─ ─ Play │ │ │ ├ ─ ─ XXX. Js │ │ │ └ ─ ─... │ │ ├ ─ ─ Rank │ │ │ ├ ─ ─ XXX. Js │ │ │ └ ─ ─... │ │ ├ ─ ─ Search │ │ │ ├ ─ ─ XXX. Js │ │ │ └ ─ ─... │ ├─ ├─ ├─ │ ├─ ├─ ├─ ├─ │ ├─ ├─ ├─ │ ├─ ├─ ├─ ├─ ├─ Bass ExercisesstaticStatic file directory │ │ ├ ─ ─ CSS │ │ │ ├ ─ ─ XXX. SCSS │ │ │ └ ─ ─... │ │ ├ ─ ├ ─ garbage │ │ ├ ─ │ ├ ─ ─ store Redux store │ │ └ ─ ─ configureStore. Js │ ├ ─ ─ util tools catalog │ │ ├ ─ ─ XXX. Js │ │ └ ─ ─... ├ ─ ─ templates templates │ └ ─ ─ index. The HTML ├ ─ ─ dist packaging generated directory │ ├ ─ ─ CSS │ │ └ ─ ─ XXX. CSS │ ├ ─ ─ js │ │ ├ ─ ─ XXX. Js │ │ └ ─ ─... │ ├ ─ ─ the favicon. Ico │ └ ─ ─ index. The HTML ├ ─ ─ node_modules │ └ ─ ─... ├─ Readme.md ├─ Start Configuration Under App.js Express ├─ Server.js Main Service Start File ├─ WebPack.config.js Basic Configuration ├─ webpack.prod.config.js ├─ yarn.lock ├─ package.jsonCopy the code

Screenshot and images.md for screenshots note file, is for the convenience of view, has nothing to do with this project!

Three, how to implement

1. Clone the project locally and CD it to React-music

git clone [email protected]:chenjun1127/react-music.git
cd react-musicCopy the code

2. Install dependencies

npm install or yarn installCopy the code

3, perform

npm start or yarn start
// NPM run buildCopy the code

4. Open the browserhttp://localhost:3000/

Iv. Project Summary

The overall project has realized the functions of a basic player, but some functions need to be improved, such as local storage of the favorites list and no real restrictions on login and registration. If you think the project is good, you can give a Star. Thank you!

Tips: When installing NPM or YARN install, ensure that the network is in good condition. If the installation fails, set Taobao Image as the installation source.

If you have any questions, please contact QQ: 402074940