前言：以下內容基於React全家桶+AntD實戰課程的學習實踐過程記錄。最終成果github地址：https://github.com/66Web/react-antd-manager，歡迎star。

一、專案概述

      React全家桶

• React基礎知識、生命週期
• Router 4.0 語法講解
• Redux整合開發

     AnD UI元件

• 最實用基礎元件
• AntD柵格系統
• ETable元件封裝
• BaseForm元件封裝
• 表格內嵌單選、複選封裝

• Axios請求外掛封裝
• API封裝
• 錯誤攔截
• 許可權、選單封裝
• 日期、金額、手機號封裝...

     專案整體架構

• Mock-Server -> json
• 核心框架庫：React16、Router4.0、Redux
• 中介軟體和外掛：Axios、Map、ECharts、AntD
• 公共機制：選單、許可權、Header、Footer、ETable、EForm、Loading、API、Axios...

     收穫

• React全家桶技能
• 地圖和React整合技能
• 前端圖表開發技巧
• 基於React的UI框架 - AntD
• 前端後臺架構設計、公共機制封裝、後臺管理系統開發經驗

二、React介紹

     React基礎

• Facebook開源的一個JavaScript庫
• React結合生態庫構成一個MV*框架

• React特點

1. Declarative（宣告式編碼）
2. Component-Based(元件化編碼）
3. 高效 -- 高效的DOM Diff演算法，最小化頁面重繪
4. 單向資料流

• MV*框架代表 - 只關注檢視View層+資料層Model

• 生態介紹

1. Vue生態：Vue + Vue-Router + Vuex + Axios + Babel + Webpack
2. React生態：React + React-Router + Redux + Axios + Babel + Webpack

• 程式設計式實現VS宣告式實現

1. 程式設計式實現：需要以具體程式碼表達在哪裡（where）做什麼（what）,如何實現（how）
2. 宣告式實現：只需要宣告在哪裡（where）做什麼（what）,不需要關心如何實現（how）

     React腳手架、Yarn介紹

• 安裝和使用React腳手架

  npm install -g create-react-app
  create-react-app my-app
  cd my-app
  npm start

• Yarn的介紹

1. Yarn是新一代包管理工具 （npm也是包管理工具）
2. Yarn修復了npm的一些缺陷，提升了某些方面的效能
3. 優點：速度快，安裝版本統一、更安全，更簡潔的輸出，更好的語義化

• Yarn的使用

1. 安裝： 

   npm install -g yarn　　

2. 初始化：

   yarn init　　

3. 新增一個包：

   yarn add

4. 刪除一個包： 

   yarn remove　　

5. 安裝專案所有依賴包： 

   yarn/yarn install　

     構建專案的配置

npm install -g yarn
npm install -g create-react-app
create-react-app bike-manager
cd bike-manager
yarn add react-router
yarn remove react-router

實際開發中，不使用react-router，只使用react-router-dom

 三、基礎外掛安裝，Less檔案載入配置

• 安裝React-router、Axios

  yarn add react-router-dom axios

• 安裝AntD （基於Less開發）

  yarn add antd

• 暴露webpack

  yarn eject
  

  注：如果yarn eject 報錯的解決的方法

  git add .
  git commit -m '註釋'
  yarn eject

• 安裝less less-loader

  yarn add less less-loader

• 修改less-loader

1. create-react-app預設安裝版本是2.03了，其中有些改變:
2. https://blog.csdn.net/qwe502763576/article/details/83242823
3. 小技巧：VScode開啟內嵌終端視窗，可以輸入命令列

• 啟動專案

  yarn start　　

四、AntD

• 官網：https://ant.design/index-cn

     普通使用：引入UI元件和css檔案

@import 'antd/dist/antd.css'

import {Button} from 'antd'　　

     按需載入css檔案內容【只會打包所需元件，減少請求量】

• 安裝babel-plugin-import外掛：

  yarn add babel-plugin-import
  

  實現按需載入所需的css，而不是每次都引入所有的css　

• webpack.config.js中在babel-loader配置處配置：完整如下↓

  {
     test: /\.(js|mjs|jsx|ts|tsx)$/,
     include: paths.appSrc,
     loader: require.resolve('babel-loader'),
     options: {
        customize: require.resolve(
           'babel-preset-react-app/webpack-overrides'
        ),
        plugins: [
           //要插入的內容
           ['import', {
               libraryName: 'antd', //libraryName表示匯出的庫名，
               style: 'css'  //style表示將css引入專案行內樣式
           }],

1. 這個在package.json/babelrl/webpack.config.js中配置都可以，pugins是個二維陣列！！

2. 相當於直接把antd.less檔案引入到專案js中，不用再引入import 'antd/dist/antd.css'

     定製主題：修改less變數 

"style": true  //true標識直接載入antd的less檔案

• 坑：編譯失敗，前面只是引入使用了less-loader,並沒有新增配置項
• 解決：最新的react腳手架版本中，配置檔案中關於css的rules中的use值被提到外部宣告成了一個配置函式，函式返回該樣式檔案型別所需要的loader陣列

  if (preProcessor) {
      let loader = {
           loader: require.resolve(preProcessor),
           options: {
                sourceMap: shouldUseSourceMap,
           },
      }
      if (preProcessor === "less-loader") {
          loader.options.modifyVars = {
              'primary-color': '#f9c700'
          }
          loader.options.javascriptEnabled = true
      }
      loaders.push(loader);
  }

1. primary-color是antd的less變數，修改時可以修改專案的主色調
2. 注意：修改完配置項之後，必須要重新啟動！！

注：專案來自慕課網