Nova-門戶新聞 (React+React Router V4+Mobx+Es6/Es7)

稻草叔叔發表於2019-02-27
React

Nova-門戶新聞

  • Nova – 各大門戶新聞、社交網站熱點，有趣有料，一網打盡，盡在Seek Daily
  • Seek Daily是最受歡迎的互動分享和個性化定製的移動資訊平臺。它將來自各大入口網站及社交網站的眾多頭條資訊、熱門內容，聚合到一起，根據使用者喜好，為使用者提供最感興趣的內容

效果預覽

image
image

專案啟動

# 安裝依賴
npm install

# 開發環境
npm run dev

# 生產環境（打包）
npm run build

# 測試環境 （先打包，在執行）
npm install http-server -g
npm run server複製程式碼

專案目錄

│  .eslintrc.js         # eslint配置檔案
│  .postcssrc.js        # postcs配置檔案
│  index.html           # index模版（開發環境）
│  package.json         # package
│  README.md            # 專案說明
│
├─build                 # webpack主要配置檔案
├─dist                  # 編譯之後的檔案目錄
├─doc                   # 一些需求文件
├─src                   # 專案主目錄
│  │ app.js             # 專案入口檔案
│  ├─assets             # 靜態資源，如圖片、字型等
│  ├─components         # React元件
│  ├─containers         # 頁面元件
│  ├─lazycomponents     # 非同步載入元件
│  ├─service            # 用於封裝業務請求
│  ├─statistics         # 埋點日誌業務
│  ├─stores             # 資料狀態管理
│  ├─template           # 模板頁面 （生產環境）
│  └─utils              # 工具類，主要存放一些工具函式
│
└─static                # 會原樣打包到dist複製程式碼

技術棧

主要庫

相容庫

開發

  • 建議把每個功能都封裝成純函式，可參考JS函數語言程式設計指南，減少bug。

  • 常用函式需要對引數和返回值進行說明，最好能從命名直接看出函式作用。如：

      /**
   * 檢測瀏覽器是否支援某個css屬性
   * @param  {[String]} prop  [css屬性名]
   * @param  {[String]} value [css屬性值]
   * @return {[Boolean]} true:支援 false:不支援
   */
  function cssSupported(prop, value) {
    const d = document.createElement(`div`)
    d.style[prop] = value
    return d.style[prop] === value
  }

  const isSupportedSticky = cssSupported(`position`, `sticky`)複製程式碼

Git管理

  • 最重要的一點：Master只做釋出，由專案經理或組長操作，其他人不得push，建議作為保護分支。
  • Git分支命名參考 Git分支管理策略。
  • 每次建立分支之前，應該從Master檢出最新程式碼。
  • 建議使用git flow。

注意點

  • assets/css資料夾，存放在不會被css-modules編譯

  • 具體看CSS Modules 詳解及 React 中實 (github.com/camsong/blo…)

      .normal {
    color: green;
  }

  /* 定義全域性樣式 */
  :global(.btn) {
    color: red;
  }複製程式碼

  • 非同步載入元件，目前有三種實現方式，現在只選擇這種， 具體看lazycomponents資料夾的中README.md

      import React, { Component } from `react`
  import Async from `lazycomponents/Async`

  const Hello = Async(() => import(`components/Hello`)
    .then(module => module.default), { name: `Hello` })

  class App extends Component {
    render () {
      return (
        <Router>
          <div>
            <Route exact path="/" component={Hello} />
          </div>
        </Router>
      )
    }
  }

  export default App複製程式碼

專案地址

專案性質問題，有興趣的話，可以聯絡Me

相關文章