如何從零入門React？實戰作個FM應用吧

面試造航母，工做擰螺絲，新公司面試技術官要求會react技術棧。

問：有使用過React麼？ 答：沒，只使用過Vue。 又問：給你一星期能上手開發麼？ 答：能夠（一臉篤定）...

南慕容，北喬峯，降龍十八掌，斗轉星移，先接招再說。展轉反側，開始了React的學習。然而公司項目暫時並無用到React...Orz，不過爲了提高實戰經驗，仍是在業餘時間搗騰出一個ReactFM，如下是項目介紹。

前言

對於大部分前端開發工程師而言，其實私人項目更多的是提高本身的實戰經驗，那麼究竟開發怎樣的項目和怎麼提高開發效率？ 我也時常有這樣的疑惑，爲何別人總能作出本身想不到的項目而本身卻沒有任何的想法，我想必定是你接觸信息的姿式不對，我有以下幾點建議。

• 使用谷歌搜索
• 關注前端流行的技術棧
• 融入前端社區（掘金、知乎、思否等），關注開源項目，關注一些活躍開發者的博客
• Fork項目，學習他人項目源碼

若沒有項目想法，想下本身的興趣所在，舉個栗子： 好比你喜歡聽歌，作個私人FM；二次元愛好者，作個聚合番劇的APP；喜歡Kindle，作個kindle的電子書搜索網站等等..

對於提高效率，因爲目前許多企業正從傳統的開發方式轉向先後端分離的方式，對於前端而言工做量比傳統開發方式增大了。無疑，咱們本身開發私人項目時須要同時完成前端工做也要本身寫接口服務，這意味着開發的週期會相應的延長。我以爲這裏須要根據項目考慮和我的狀況考慮，若是你有本身的雲主機，而且沒有開發過Restful接口的經驗，能夠先後端所有本身完成提高實戰經驗；若是沒有本身的主機而且項目比較的小型預期到請求量不會很大，可使用後端雲服務，好比本項目是基於Leancloud數據存儲服務實現的。

項目地址

github.com/alex1504/Pe…

項目截圖

預覽

訪問 fm.huzerui.com/, 或者掃描二維碼預覽（最好在移動端體驗）

測試帳號

• Username: petalFM
• Password: petalFM

技術棧

• 框架：react
• 狀態管理：redux
• 打包：Webpack，Babel
• 語言：ES2015, Less
• 庫:
• React Router V4
• Material-UI
• 代碼檢查： ESLint
• 圖標支持：Iconfont

項目目錄說明

.
|-- config                           // webpack配置目錄
|-- database                         // 數據庫備份目錄
|-- media                            // readme描述資源
|-- src                              // 源碼目錄
|   |-- components                   // 公共組件
|   |-- pages                        // 頁面組件
|       |-- Login                    // 登錄頁面
|       |-- Guide                    // 標籤訂製頁
|       |-- Index                    // 主頁
|       |-- Search                   // 搜索頁
|       |-- Admin                    // 後臺數據錄入頁（僅管理員可見）
|       |-- Dislike                  // 用戶不興趣歌曲頁
|   |-- router                       // 路由定義
|   |-- services                     // 後端服務目錄
|       |-- avinit.js                // leancloudSDK初始化
|       |-- config.js                // 數據庫相關配置
|       |-- songServices.js          // 歌曲相關服務
|       |-- userServices.js          // 用戶相關服務
|       |-- index.js                 // 後端數據庫服務入口
|   |-- store                        // 狀態管理目錄
|       |-- index.js                 // 加載各類store模塊
|       |-- types                    // 定義觸發狀態改變類型
|       |-- reducers                 // 狀態生成器
|   |-- Utils                        // 工具函數
|   |-- index.js                     // 程序入口文件
|-- .gitignore                       // Git提交忽略文件規則
|-- LICENSE                          // 受權協議
|-- README.md                        // 項目說明
|-- package.json                     // 配置項目相關信息
.
複製代碼

本地運行或二次開發

因爲後端雲開啓了WEB安全域名，本地克隆項目後沒法直接運行，解決方式以下：

前置工做：

• Step1：執行命令克隆項目到本地git clone https://github.com/alex1504/PetalFM.git
• Step2：安裝依賴 npm install
• Step3：在 leancloud.cn/ 註冊帳號而且在後臺建立一個leancloud應用
• Step4：在leancloud應用後臺導入根目錄database下面的數據庫，而且在_User表建立你的管理員帳號（用戶名和密碼需爲4-8位的數字、字母或_）
• Step5：修改 /src/services/config.js配置以下：

export const APP_ID = 'YOUR APP_ID FOUND IN LEANCLOUD APP SETTING';
export const APP_KEY = 'YOUR APP_KEY FOUND IN LEANCLOUD APP SETTING';
export const SUPER_USER_OBJECT_ID = 'YOUR SUPERUSER ACCOUNT OBJECT ID';
複製代碼

只有管理員才能看到Admin入口而且經過搜索接口錄入歌曲，並設置歌曲所屬類別。

開發：

• Step6：執行 npm run dev運行項目
• Step7：執行 npm run build打包項目，/dist/文件夾爲打包後的項目文件

部署：

• Step9：在開發過程當中，webpack-dev-server將本地 /api/請求轉發到http://music.163.com/api（若需增長別的轉發機制請修改package.json中的proxy配置，完整配置參考http-proxy），所以部署到服務器時請藉助nginx或nodejs服務器進行接口轉發，不然搜索和錄入服務不生效。

總結

一個項目的開發過程當中你會遇到許多問題，不斷解決問題會使你積累更多的經驗。前段爲了學習小程序的開發，作了個小程序APP名叫（口袋吉他），這也是我的興趣驅使的開發想法。開始的學習從小程序文檔開始，APP界面借鑑了其餘的小程序，界面成型後發現沒有數據來源，因而經過nodejs寫了爬蟲錄入初始數據，啓用定時抓取保持更新，並封裝了接口服務，甚至作了一個簡單的後臺頁面錄入數據，總而言之，這是一段有趣的歷練。

喜歡本項目能夠star或fork，感謝你的支持。