React-music 全家桶項目，精品之做！

React-Music 全家桶項目

1、簡介

該項目是基於React全家桶開發的一個音樂播放器，技術棧採用：Webpack + React + React-redux + React-router + Node + Sass + Es6 + Localstorage + Css3，基本音樂API使用http-proxy酷狗音樂的，在此感謝酷狗音樂！項目涉及的知識點很是普遍，基於react全家桶技術都有使用，獨立開發，精品之做，具備很好的參考價值！

一、項目依賴基本核心版本：

• 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"

二、該音樂播放器基本功能：

• 展現最新的推薦歌單、歌單、排行榜、歌手；
• 音樂的播放、暫停、上一首、下一首、刪除當前播放列表功能；
• 基本搜索功能；
• 喜歡音樂加入收藏列表；
• 模擬登陸功能（隨便輸入用戶名，密碼便可）；

三、項目Github地址：React-music

四、項目基本預覽：

2、項目結構

├── 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爲截圖說明文件，是爲了方便查看，與本項目無關！

3、如何執行

一、將項目克隆到本地，cd 到 react-music

git clone git@github.com:chenjun1127/react-music.git
cd react-music

二、安裝依賴

npm install or yarn install

三、執行

npm start or yarn start
// npm run build(打包)

四、打開瀏覽器瀏覽 http://localhost:3000/

4、項目總結

總體項目實現了一個基本播放器應有的功能，但個別功能還有待完善，好比收藏列表本地持續化存儲、登陸註冊未作真正限制等。以爲項目不錯的，能夠給個Star，謝謝！

Tips：在npm install or yarn install 的時候，請確保網絡良好，如個別依賴安裝不了，請設置淘寶鏡像爲安裝源；

若有問題：請聯繫QQ：402074940