我的電腦是Windows10系統(tǒng)，在使用react之前需安裝node.js,在node.js中自帶npm，另外還需要安裝yarn,version:1.5.1

react腳手架create-react-app中文文檔地址：
[Create React App]: https://www.css88.com/create-react-app/docs/documentation-intro/

1. 搭建自己的react項目

1. 打開WebStorm，在底部點擊進入Terinal，使用cd命令進入自己保存項目的位置。以下所有命令都是在該處（my-app目錄下）進行
2. 輸入：yarn create-react-app my-app 其中my-app為項目名稱
3. 輸入：yarn install
4. 輸入：yarn start ，啟動項目
5. 瀏覽器地址欄輸入：localhost:3000即可打開react項目
6. 要停止項目，按下Ctrl + c ，輸入Y即可

2.修改項目默認端口號3000

1. 進入node-modules--react-scripts -- scripts -- start.js修改端口號
2. 如下圖，修改3000為你想要設置的端口號
3. ? 有圖

3.自動生成的項目目錄以及文件解析

1. node_modules: 項目依賴包目錄；
2. public: 公共目錄，該目錄下的文件都不會被webpack進行加載、解析、打包；通過yarn build進行打包時該項目下的所有文件將會直接被復制到build目錄下；
   1. favicon.ico: 是網(wǎng)站圖標[可替換刪除]
   2. index.html: 頁面模板，webpack打包后將輸出文件引入到該模板內；補充：index.html中通過環(huán)境變量%PUBLIC_URL% 來指向public目錄路徑；
   3. manifest.json: PWA將應用添加至桌面的功能的實現(xiàn)依賴于 manifest.json 。通過manifest.json文件可以對圖標、名稱等信息進行配置。
3. src: 是源碼目錄該目錄下除了index.js App.test.js registerServiceWorker.js文件具有一定意義其余文件都是演示使用可直接刪除
   1. index.js: 是整個項目的入口文件；
   2. App.test.js: 測試單元演示文件，暫時并不知道干嘛用；可以直接刪除；
   3. registerServiceWorker.js: service worker是在后臺運行的一個線程，可以用來處理離線緩存、消息推送、后臺自動更新等任務；registerServiceWorker就是為react項目注冊了一個service worker，用來做資源的緩存，這樣你下次訪問時，就可以更快的獲取資源。而且因為資源被緩存，所以即使在離線的情況下也可以訪問應用（此時使用的資源是之前緩存的資源）。注意，registerServiceWorker注冊的service worker只在生產(chǎn)環(huán)境中生效，并且該功能只有在https下才能有效果；
4. gitignore: 該文件是github過濾文件配置
5. README.md: 該文件是github描述文件
6. package.json: 定義了項目所需要的各種模塊，以及項目的配置信息（比如名稱、版本、許可證等元數(shù)據(jù)）。部分依賴模塊被隱藏；
7. yarn.lock：每次通過yarm添加依賴或者更新包版本時 yarn都會把相關版本信息寫入yarn.lock文件；npm也有類似功能，npm 也可以生成一個鎖文件，就是使用上沒有yarn方便

4.擴展webpack配置

使用 react-app-rewired 對 webpack 進行自定義配置

1. 安裝依賴包 react-app-rewired：yarn add react-app-rewired --save-dev

2. 修改 package.json 中的腳本命令：修改如下

     "scripts": {
       "start": "react-app-rewired start",
       "build": "react-app-rewired build",
       "test": "react-app-rewired test --env=jsdom",
       "eject": "react-app-rewired eject"
     }
   

3. 在項目根目錄下(和package.json同級)新建配置文件 config-overrides.js，并添加如下內容

   module.exports = function override(config, env) {
       // 在這里添加配置
       return config;
   }
   

4. 安裝依賴包react-app-rewire-less，通過該依賴包來實現(xiàn)對less的支持

   yarn add react-app-rewired@1.5.0

5. 修改 config-overrides.js 配置文件，為 webpack配置 less

   const rewireLess = require('react-app-rewire-less');
   module.exports = function override(config, env) {
     // 只需要一條配置信息即可實現(xiàn)對less的支持
     config = rewireLess(config, env);
     // 下面注釋用于配置loader的參數(shù)
     // config = rewireLess.withLoaderOptions(someLoaderOptions)(config, env);
     return config;
   }
   

在 create-react-app 中使用Antd

1. 通過babel-plugin-import + react-app-rewired實現(xiàn)按需加載（官網(wǎng)推薦）

   1. react-app-rewired：的使用上文有過描述；主要用于在不暴露配置的情況下對webpack的配置進行擴展；
   2. babel-plugin-import 是一個用于按需加載組件代碼和樣式的babel插件
   • 安裝依賴包：babel-plugin-import

    yarn add babel-plugin-import --save-dev
   

   • 通過 react-app-rewired 對webpack 配置進行擴展添加新的babel插件，config-overrides.js 修改 ( 添加 ) 如下內容：

   // 引入 react-app-rewired 添加 babel 插件的函數(shù)
   const { injectBabelPlugin } = require('react-app-rewired');
   module.exports = function override(config, env) {
       config = injectBabelPlugin(['import', 
           { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
       return config;
   };
   

   • 配置完后可直接導入antd的組件，不再需要另外引入css樣式；

   import { Button } from 'antd';
   

2. 通過 react-app-rewired 擴展 webpack 來實現(xiàn) antd 自定義主題
   主要通過利用了 less-loader的 modifyVars參數(shù)來進行主題配置

   • 安裝配置：react-app-rewired(上文已經(jīng)詳細介紹過這里就不再細說)
   • 安裝依賴包react-app-rewire-less：實現(xiàn)對 less 的支持同時添加 modifyVars 加載參數(shù)設置

yarn add react-app-rewire-less --save-dev

• 修改 config-overrides.js 配置文件

const rewireLess = require('react-app-rewire-less');
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
    // 擴展 webpack ==> 支持less
    config = rewireLess(config, env);
    // 配置loader參數(shù)
    config = rewireLess.withLoaderOptions({
        // 修改默認顏色 實現(xiàn)自定義主題
        modifyVars: { "@primary-color": "#1DA57A" },
   })(config, env);
   // antd 按需加載配置
    config = injectBabelPlugin(['import', 
        { libraryName: 'antd', libraryDirectory: 'es', style: true }], config);
    return config;
}

版本兼容問題：因為版本問題導致的啟動錯誤，這里提供一套正常兼容的基本版本。安裝的時候帶上版本號即可

yarn add package-name@1.2.3

package.json

{
  "name": "icarus-ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "babel-plugin-import": "^1.4.0",
    "babel-plugin-transform-decorators-legacy": "1.3.4",
    "react": "^16.7.0",
    "react-app-rewire-less": "^2.1.0",
    "react-app-rewired": "1.5.0",
    "react-dom": "^16.7.0",
    "react-scripts": "1.0.12"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-app-rewired eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

參考：https://segmentfault.com/a/1190000015301231