本人工作棧為dva+antd躁绸，使用阿里開源出來的組件有一段時間之后吮铭，決定不依賴阿里的框架自己打個環(huán)境寫一些組件出來，一來為了熟悉工作流程椎扬，二來也是為了更好的理解原理惫搏，從而更好的滿足工作中的需求
二次元萌圖
源碼地址：https://github.com/jdkwky/my-react-example
預覽地址：http://47.94.218.152 (目前只兼容chrome和IEedge)
1. 技術(shù)點 react + webpack + antd
2. 學習流程
- 首先電腦上要有nodejs環(huán)境，本文并不涉及nodejs蚕涤，主要是用nodejs環(huán)境中的npm安裝需要的依賴包（nodejs安裝即可筐赔，npm如果在下載包的時候很慢，可以將鏡像換成淘寶的鏡像）
- npm i create-react-app -g 全局安裝create-react-app腳手架
- create-react-app創(chuàng)建自己的工程文件
- 寫自己的webpack配置文件
- 跨域請求時钻趋，在webpack中配置代理川陆，在服務器上采用nginx代理轉(zhuǎn)發(fā)
- 打包
- 部署到服務器中
3. 詳解
安裝nodejs環(huán)境和用create-react-app創(chuàng)建react腳手架過程省略剂习，因為比較簡單蛮位，安裝都比較方便，不會出什么問題
-
webpack配置文件
- 對webpack簡單的理解可以參考博文：webpack初印象鳞绕；
- 在本程序中的一個難點在于既想要引入antd的樣式文件失仁，又想要使用css modules,本程序中的解決方案就是針對不同目錄中的css文件分別進行匹配，antd組件中的樣式文件一定都在node_modules文件夾中们何，而本地自己寫的文件一定都在src文件夾中萄焦，具體解決方案詳見webpack.config.js；
- 在文件配置中遇到的坑詳見 react-webpack-antd--環(huán)境篇冤竹；
- 遇到跨域問題在本地的解決方案為在本地配置代理：
devServer: { contentBase: './public', publicPath: '/', historyApiFallback: true, inline: true, proxy: { '/search/*': { target: 'https://image.baidu.com', changeOrigin: true } } }, <!--當訪問/search/路徑下的所有url時拂封，均走image.baidu.com這個域名--> -
部署服務器
服務器申請的為centos阿里云服務器，將打包好的靜態(tài)文件部署在nginx中鹦蠕，nginx服務器默認監(jiān)聽80端口冒签，啟動nginx時可能訪問不到，這時需要在“安全組規(guī)則”中添加一條規(guī)則：
nginx監(jiān)聽80端口
