基於前面五篇react基本知識的介紹，從這篇開始項目實戰。要想使一個項目運轉起來，需要的知識可不只有react.前端采用react+anted+webpack,後臺采用java.裏面還有很多需要我們了解達到能夠使用程度的知識：比如anted,webpack,SSO(SingleSignOn),跨域訪問以及最後怎麽整合前端文件到java的代碼中，讓系統飛起來。其實anted、webpack、sso等每一個單拎出來都可以寫出很多篇博客來。但是我這裏只是簡單介紹，達到知道在項目中如何去使用的狀態即可。

1.anted，是package.json中引入的一個依賴，如:"antd": "^2.10.0"。後面的是版本號說明。就像是在pom.xml中引入的jar包。其實它就是Ant Design,“是螞蟻金服體驗技術部經過大量的項目實踐和總結，沈澱出一個中臺設計語言”。這是官網上的官方說明，這個概念中臺設計語言，實在不理解。我就說說我淺顯的理解吧。我覺得他就是基於React實現的一些封裝好的組件，這些組件中已經有了一定的樣式和數據處理的方式，同時留出了接口給用戶。你只需要做很少的工作，就可以做出很漂亮的頁面。封裝好的東西對於用戶來說都有一個通病就是，你不懂它是如何封裝的，就不能很好的使用。尤其是當你的頁面比較特殊時，就需要深入了解它的api和源碼才能修改得了。我在實戰中針對這點很糾結，官方網站上api文檔寫得及其簡單，好多時候都是半試半猜的做。源碼對於我這種java開發看得懂還是有一定差距的。後面幾篇會有react和anted使用的例子。這裏不再贅述，了解anted是什麽就可以。

2.webpack，可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包為合適的格式以供瀏覽器使用。

在學習React前的準備工作中介紹過webpack的安裝，這裏再補充兩個在package.json中scripts中的配置：

"dev": "webpack-dev-server --devtool eval --progress --colors --content-base dist --hot --inline --display-error-details"

　　在項目當前文件夾下敲入npm run dev可以執行，用於平時啟動調試，可以熱加載。但是有時候也不能生效，此時需要重新執行一次。

"prod": "cross-env NODE_ENV=production webpack --progress --colors --config webpack.config.prod.js -p --display-error-details"

　　在項目當前文件夾下敲入npm run prod可以執行,打包出最終的部署文件。

3.sso，一個完整的後臺項目當然需要登錄。我這裏接入的是公司的單點登錄，不進行說明。

4.跨域訪問，主要是在開發調試的過程中使用，我在本地啟動java程序提供接口，前端使用nodejs啟動項目，兩個應用的端口不一樣，需要涉及到跨域訪問。SpringMVC 4 以上增加CORS支持，只需要進行配置文件中進行配置即可。在spring-mvc.xml中配置

<mvc:cors>
<mvc:mappingpath="/**"allowed-origins="*"allow-credentials="true"/>
</mvc:cors>

　　我這裏只在本地調試中需要跨域訪問，所以我配置的比較大膽，認為一切路徑都是可信的。真正部署的時候不存在跨域問題。這些配置需要註釋掉，否則會有安全問題。

5.前後端整合,通過webpack打包之後會在dist文件下產生兩個文件，index.html和bundle.min.js文件，當然打包出來的文件名稱是在webpack中配置的。然後我把它拷貝到java的項目結構中，下圖是java項目的結構圖,將這兩個文件拷貝到如圖位置，保證index.html中引入js的路徑是正確的。然後java中maven，打包部署即可。

項目實戰之項目組成