我的電腦是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項(xiàng)目

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

2.修改項(xiàng)目默認(rèn)端口號(hào)3000

1. 進(jìn)入node-modules--react-scripts -- scripts -- start.js修改端口號(hào)
2. 如下圖，修改3000為你想要設(shè)置的端口號(hào)
3. ? 有圖

3.自動(dòng)生成的項(xiàng)目目錄以及文件解析

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

4.擴(kuò)展webpack配置

使用 react-app-rewired 對(duì) webpack 進(jìn)行自定義配置

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. 在項(xiàng)目根目錄下(和package.json同級(jí))新建配置文件 config-overrides.js，并添加如下內(nèi)容

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

4. 安裝依賴包react-app-rewire-less，通過該依賴包來實(shí)現(xiàn)對(duì)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) {
     // 只需要一條配置信息即可實(shí)現(xiàn)對(duì)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實(shí)現(xiàn)按需加載（官網(wǎng)推薦）

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

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

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

   // 引入 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;
   };
   

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

   import { Button } from 'antd';
   

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

   • 安裝配置：react-app-rewired(上文已經(jīng)詳細(xì)介紹過這里就不再細(xì)說)
   • 安裝依賴包react-app-rewire-less：實(shí)現(xiàn)對(duì) less 的支持同時(shí)添加 modifyVars 加載參數(shù)設(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) {
    // 擴(kuò)展 webpack ==> 支持less
    config = rewireLess(config, env);
    // 配置loader參數(shù)
    config = rewireLess.withLoaderOptions({
        // 修改默認(rèn)顏色 實(shí)現(xiàn)自定義主題
        modifyVars: { "@primary-color": "#1DA57A" },
   })(config, env);
   // antd 按需加載配置
    config = injectBabelPlugin(['import', 
        { libraryName: 'antd', libraryDirectory: 'es', style: true }], config);
    return config;
}

版本兼容問題：因?yàn)榘姹締栴}導(dǎo)致的啟動(dòng)錯(cuò)誤，這里提供一套正常兼容的基本版本。安裝的時(shí)候帶上版本號(hào)即可

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