React項目實踐系列一

數據分析平臺-實踐系列一

項目建立於2018年1月底，到如今已經接近半年，在此寫下半年來項目的實踐過程以及本身對前端的學習與體悟。

技術選型

框架： React

路由： React-Router 4

狀態管理： Redux

UI組件庫： Ant Design

搭建工程

由於平臺的前端技術選型，所以挑選了React爲技術框架。並使用create-react-app快速搭建工程。create-react-app爲fackbook官方出品的快速搭建React工程的命令行工具，能夠減小寫各類配置的過程，似於vue的vue-cli和angular的angular-cli。

而在使用create-react-app，須要使用eject暴露全部配置項，好自定義我的的Webpack配置。

首先咱們並不打算將React讓Webpack打包，而使用第三方的CDN，直接在HTML文件以script標籤引入。在此咱們選用用友的tinper公共靜態資源庫。

改動Webpack配置文件

externals: {
  'react': 'React',
  'react-dom': 'ReactDOM',
  'react-router-dom': 'ReactRouterDOM',
  'redux': 'Redux',
  'react-redux': 'ReactRedux'
}
複製代碼

而若引入第三方CDN，須要分引入爲生產環境仍是開發環境的代碼。 如在生產環境下要引入//design.yonyoucloud.com/static/react/16.0.0/umd/react.production.min.js 而在開發環境引入//design.yonyoucloud.com/static/react/16.2.0/umd/react.development.js。

選用ejs-compiled-loader，這樣另咱們能夠在HTML文件使用ejs模板引擎。

繼續改動Webpack配置文件

new HtmlWebpackPlugin({
  inject: true,
  template: `!!ejs-compiled-loader!${paths.appHtml}`,
}),
複製代碼

在HTML使用模板引擎

<% if (process.env.NODE_ENV === 'production') { %>
    <script src="//design.yonyoucloud.com/static/react/16.2.0/umd/react.production.min.js"></script>
    <script src="//design.yonyoucloud.com/static/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
  <% } %>
  <% if (process.env.NODE_ENV === 'development') { %>
    <script src="//design.yonyoucloud.com/static/react/16.2.0/umd/react.development.js"></script>
    <script src="//design.yonyoucloud.com/static/react-dom/16.2.0/umd/react-dom.development.js"></script>
  <% } %>
複製代碼

最後，設置Webpack的別名，讓後續引用的地方減小路徑的複雜度。

alias: {
  'root': path.resolve(__dirname, '../src'),
  '@': path.resolve(__dirname, '..')
},
複製代碼

如在src文件夾下有兩個文件夾a和b，假若b下的m.js須要引用a下的n.js，須要import X from ‘../a/n.js’，設置別名後可寫爲root/a/n.js。

先後端分離

在知乎上面找了張圖片，先後端分離，簡單的說，就是前端負責頁面交互，顯示後臺提供的數據，然後端負責數據的處理，提供給前臺數據。

能夠看出先後端是有很強的耦合關係，後端須要依賴前端請求，前端須要依賴後端響應。不過此處後端是能夠輕鬆模擬前端請求，如POSTMAN等。剩下的解決要點爲如何給前端模擬數據。所以，咱們在設計接口約定數據後構建另外一個簡單的Server，這個Server會簡單的響應前端請求，根據約定返回模擬的數據。咱們將這個Server成爲Mock Server。

其中Mock Server可分紅本地及遠程。

本地的Mock Server須要每一個前端在本身電腦上部署服務器，且若後臺改動API，後臺沒法同步維護Mock Server與Real Server。

所以打算創建遠程的Mock Server(其實還有個關鍵是我使用用友配的電腦開發，在本地部署的話電腦配置。。。)不過此步驟咱們也能夠省略了，用友的大前端技術團隊提供了Mock平臺。

他的功能十分齊全，具有權限管理，Mock Server，數據導入等等的功能。