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

hzr發表於2018-04-21
React

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

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

南慕容，北喬峰，降龍十八掌，斗轉星移，先接招再說。輾轉反側，開始了React的學習。然而公司專案暫時並沒有用到React...Orz，不過為了提升實戰經驗，還是在業餘時間搗騰出一個ReactFM，以下是專案介紹。

前言

對於大部分前端開發工程師而言，其實私人專案更多的是提升自己的實戰經驗，那麼究竟開發怎樣的專案和怎麼提升開發效率？ 我也時常有這樣的疑惑，為什麼別人總能做出自己想不到的專案而自己卻沒有任何的想法，我想一定是你接觸資訊的姿勢不對，我有如下幾點建議。

  • 使用谷歌搜尋
  • 關注前端流行的技術棧
  • 融入前端社群（掘金、知乎、思否等），關注開源專案，關注一些活躍開發者的部落格
  • Fork專案，學習他人專案原始碼

若沒有專案想法，想下自己的興趣所在，舉個栗子： 比如你喜歡聽歌，做個私人FM；二次元愛好者，做個聚合番劇的APP；喜歡Kindle，做個kindle的電子書搜尋網站等等..

對於提升效率，由於目前許多企業正從傳統的開發方式轉向前後端分離的方式，對於前端而言工作量比傳統開發方式增大了。無疑，我們自己開發私人專案時需要同時完成前端工作也要自己寫介面服務，這意味著開發的週期會相應的延長。我覺得這裡需要根據專案考慮和個人情況考慮，如果你有自己的雲主機，並且沒有開發過Restful介面的經驗，可以前後端全部自己完成提升實戰經驗；如果沒有自己的主機並且專案比較的小型預期到請求量不會很大，可以使用後端雲服務，比如本專案是基於Leancloud資料儲存服務實現的。

專案地址

github.com/alex1504/Pe…

專案截圖

preview
preview
preview
preview

預覽

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

qrcode

測試賬號

  • Username: petalFM
  • Password: petalFM

技術棧

專案目錄說明

.
|-- 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，感謝你的支援。

相關文章