我來到現在這家公司有一年多的時間，一直做的是財政系統相關的產品，前端的技術棧用的是傳統的jQuery+bootStrap+requireJs，隨着項目的開發，越來越多的弊病凸顯出來。
首先是前后端的代碼存放在同一個工程目錄下，前后端工程師進行開發時，都必須把整個項目導入到開發工具中（像myEclipse和IntelliJ IDEA等），一方面前端在開發之前需要花費大量的時間來部署開發環境，如果后端上傳錯了文件，整個系統啟動不起來，前端就只能干等着，前后端耦合性很大，另一方面使用myEclipse這樣的開發工具開發前端項目操作上不熟悉，開發效率很低。
其次在整個項目中，組件化很明顯，大多數頁面中所需要的功能都是類似的，雖然可以使用require封裝一些公用的組件，但是由於js技術有限，組件與組件之間還是存在很多耦合的問題，並且隨着自定義的組件越來越多，經常遇到一個頁面開頭先加載幾十個組件的情況，后期維護也很麻煩，對於有代碼潔癖的人來說，這顯然不是一種好方法。
於是就想到用react能不能解決這些問題呢？
首先了解到螞蟻金服出品的企業級產品的設計體系——Ant Design，發現里面的很多組件都很適合我們現有的產品，如果能用到實際項目中，那么自己編寫組件的問題就可以避免了，瞬間心動不已。然后就跟着上面的教程開始了學習，用create-react-app腳手架搭建了一個react開發環境，感覺是基本入門了。但是問題也隨之而來：如果用react的話，如何結合到現有的項目中來呢？以前是前后端代碼放在一起，使用react就需要前端單獨起服務，當前端的代碼開發完成后又怎么和后台的代碼部署到同一台服務器上，這篇文章主要是針對這一系列的探索。
什么是前后端分離
這幾年前后端分離被提到的越來越多，在網上查什么是前后端分離，基本是說后台只提供數據api，與用戶的交互操作前端來實現。我們現在的工作模式，前端也是通過ajax請求后台數據，前端的代碼單獨放在工程目錄的一個文件夾中，不與后台的代碼耦合，這算不算前后端分離。
前后端分離是前后端代碼庫分離，前端代碼中有可以進行Mock測試(通過構造虛擬測試對象以簡化測試環境的方法)的偽后端，能支持前端的獨立開發和測試。而后端代碼中除了功能實現外，還有着詳細的測試用例，以保證API的可用性，降低集成風險。具體來說應該像下圖中所示的，前端使用node起一個本地服務器作為中間層，然后通過一些插件將api請求轉發到后台，來模擬線上的場景。后台與數據庫交互提供api接口。這里又回到之前用create-react-app搭建react開發環境，最后的npm start應該就是啟動本地服務器了吧。隨之而來的一個問題就是數據訪問跨域的問題，前端本地服務和后台服務既然分離了，那么肯定不在同一個域當中的，這該怎么辦？
跨域問題
1.react當中解決跨域問題用proxy可以實現
對於使用creat-react-app構建的項目，可以直接在package.json下配置，具體如下
1 "proxy": "http://api.xxxx.com"
如果同時使用多個域，配置如下
//package.json中加入 "proxy": { "/api/RoomApi": { "target": "http://open.douyucdn.cn", "changeOrigin":true }, "/api/v1":{ "target":"http://capi.douyucdn.cn", "changeOrigin":true } }
對於antd-pro的項目，需要在package.json的同等目錄下添加.roadhogrc文件
{ "entry": "src/index.js", "extraBabelPlugins": [ "transform-runtime", "transform-decorators-legacy", "transform-class-properties", ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }] ], "env": { "development": { "extraBabelPlugins": [ "dva-hmr" ] } }, "externals": { "g2": "G2", "g-cloud": "Cloud", "g2-plugin-slider": "G2.Plugin.slider" }, "ignoreMomentLocale": true, "theme": "./src/theme.js", "proxy": { "/api": { "target": "http://api.xxxx.com/", "changeOrigin": true } } }
2.使用nodejs中的http-proxy-middleware插件
3.使用jsonp，但是不支持post請求方式
4.后台配置cors，但是ie67完全不兼容，ie89需要做一些特殊處理，ie10以上才能使用
后兩種需要后台大拿配合
好了跨域的問題解決了，那么如果是react怎么請求后台數據？
數據請求
ajax、axios、fetch
jquery ajax是使用最多的一種方式，問題是jQuery文件太大，react中單純的使用ajax就引入jquery不太合理
Axios 是一個基於promise的HTTP庫，可以用在瀏覽器和node.js中。簡單易用，功能強大。兼容性方面要低於jQuery的ajax，支持ie9以上。提供了很多並發請求的接口，方便了很多。
fetch更加底層，寫法很方便，缺點是只對網絡請求報錯，對400，500都當作成功的請求，需要封裝處理。
綜上考慮使用axios更好一些。
上線統一部署
前端代碼開發完成后如何與后台代碼統一部署呢，這里就用到了webpack之類的打包工具，使用打包工具可以把前端項目打包成靜態壓縮文件，即一個index.html一個css一個js壓縮文件，然后把他們放在后台工程目錄里面運行整個項目就行了，這里要注意文件路徑問題，並且之前的跨域處理也要去掉。
對於使用creat-react-app構建的項目，可以使用npm run build來打包。
到此，整個使用react的流程就基本搞清了，接下來就是實際的開發工作，react的使用，es6的語法都是重中之重。這里推薦看一下這篇文檔，在 2017 年學習 React + Redux 的一些建議，對react的學習應該會有所幫助。
博主從事前端開發也只有一兩年時間，見解不深，還望大家多多指摘。
原創文章，版權所有，轉載請注明出處。