1.搭建react框架首先需要有node環境（http://nodejs.cn/直接下載最新版本，傻瓜式安裝就可以）
驗證node環境是否安裝成功 win + R 鍵輸入cmd，在命令行輸入node -v 查看node版本，npm -v查看npm包管理器的版本
有版本號說明安裝成功，此時電腦有node環境，否則安裝失敗。
2.安裝create-react-app腳手架（若npm安裝時比較慢，就使用淘寶鏡像cnpm）
npm install -g create-react-app
3.使用腳手架初始化一個項目
create-react-app my-project (注意項目名稱小寫)
4.進去項目文件夾並啓動
cd my-project (此處補充一點，切換盤符的話盤符加冒號回車，eg: f: 回車)
npm start 運行
5.安裝yarn (快速、可靠、安全的依賴管理工具跟npm一樣包管理工具但是比npm更友好)
npm install yarn -g
yarn -v 查看yarn版本
yarn start //與npm start 一樣，運行項目測試yarn是否安裝成功
6.手動安裝react-router和axios,less-loader，腳手架初始化的新項目不會自動安裝react-router等項目必須的一些插件。
yarn add react-router-dom axios less-loader 回車 （react-router-dom是4.x以上路由跟html結合混合使用所以要這樣安裝，同時安裝react-router也可以，但是項目中使用到得是react-router-dom）
注：若在使用yarn期間出現一種情況，命令行運行一半之後卡住，一直運行不下去時，此時就需要安裝yarn鏡像，將下面兩句分別複製到命令行運行，然後在安裝其他插件
yarn config get registry
yarn config set registry http://registry.npm.taobao.org/
7.暴露webpack配置文件
yarn eject 只能用一次，用完即止，多出一些文件在目錄裏（package.json中會看到很多隱藏的配置，新增config文件夾，script文件夾），我們要在config文件夾下的webapck.config.js裏配置
8.webapck.config.js修改配置
修改less配置（初始的新項目是不支持less的，antd是基於less的，後面需要更改antd的主題，需要我們配置下less）,配置方法與webapck.config.js中的css、sass類似，copy 一份跟 sassRegex,sassModuleRegex 一樣的聲明即可,
const lessRegex = /.less/
const lessModuleRegex = /.module.less$/
在sass的配置下新增less配置
{ test: lessRegex, exclude: lessModuleRegex, use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'), }, { test: lessModuleRegex, use: getStyleLoaders( { importLoaders: 2, modules: true, getLocalIdent: getCSSModuleLocalIdent, }, 'less-loader' ), },
關掉服務，重新yarn start 在 App.js中導入less文件一切正常 (切記：修改配置文件後一定要重啓服務)
運行後，會發現報錯了，按照提示安裝less模塊就好了（若安裝比較慢，卡住，就是用上面步驟6中的注）
9.安裝Antd(支付寶公司的，antd 是基於 Ant Design 設計體系的 React UI 組件庫)
yarn add antd
在頁面中就可以使用 eg:Button組件的使用
import {Button} from 'antd'; //antd中暴露的是很多組件,Button只是其中的一個組件，需要解構賦值使用花括號來解構獲取
import 'antd/dist/antd.css'; (安裝 babel-plugin-import 可以實現文件的按需加載，就不需要整體引入antd.css)
10.按需加載 （ babel-plugin-import（推薦））
yarn add babel-plugin-import
方法一：修改webpack.config.js配置複製下面代碼 （antd官網有說明）
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": true //"style": "css", `style: true` 會加載 less 文件
}]
放在哪個位置耶^_^ 對比下圖
方法二：修改package.json裏面的配置也可以實現（複製下面代碼）
"plugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": true
}
]
]
放在哪個位置耶^_^ 對比下圖
修改配置文件後記住重新運行代碼（如果你的pageage.json中的less版本大於3.*，此時運行可能會報錯如下錯誤提示：）
此時就需要你對less降級處理(安裝2.7.3及3.*一下版本都可以) 然後重啓項目
yarn add less@^2.7.3
11.修改主題色（上面的配置完成之後就可以修改ant的主題色了）
如果上面步驟完成後運行項目時出現什麼發現不了less-loader等什麼的提示錯誤，就需要在安裝下yarn add less-loader,我遇到過這個問題，之前安裝過，但是提示找不到，從新安裝就好了
在webpack.config.js中找到getStyleLoaders函數 照下面修改即可
// if (preProcessor) {
// loaders.push({
// loader: require.resolve(preProcessor),
// options: {
// sourceMap: isEnvProduction && shouldUseSourceMap,
// },
// });
// }
//用下面的if替換上面的即可
if (preProcessor) {
let loader = {
loader: require.resolve(preProcessor),
options: {
sourceMap: shouldUseSourceMap,
},
}
if (preProcessor === "less-loader") {
loader.options.modifyVars = {
'primary-color': '#000000',
'link-color': '#1DA57A',
'border-radius-base': '2px',
}
loader.options.javascriptEnabled = true
}
loaders.push(loader);
}
看效果（默認是藍色的）
