一、 疾速最先：

• 全局裝置腳手架：

$ npm install -g create-react-app

• 經由過程腳手架搭建項目：

$ create-react-app <項目稱號>

• 最先項目：

$ cd <項目名>
$ npm run start

二、 檢察項目package.json設置

2.1 package.json 一覽

{
  ......
  "homepage": ".",
  "dependencies": {
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

2.2 可用劇本敕令申明：

• 起首申明：經由過程npm run 實行下面敕令實際上是運轉 node_modules/react-srcipt/script下對應的劇本文件；
• npm run start : 最先項目，經由過程http://localhost:3000 可接見項目；
• npm run build : 項目打包，在臨盆環境中編譯代碼，並放在build目次中；一切代碼將被準確打包，並舉行優化、緊縮同時運用hash重命名文件；實行該敕令前須要在package.json中新增條設置"homepage": "."（上面設置文件已給出）, 同時build后的項目須要在服務器下才接見；不然翻開的將是空缺頁面；
• npm run test : 交互看管形式下啟動測試運轉順序；
• npm run eject : 將隱蔽的設置導出；須要曉得的是create-react-app腳手架本質上是運用react-scripts舉行設置項目，一切設置文件信息都被隱蔽起來(node_modules/react-scripts)；當須要手動修正擴大webpack設置時偶然就須要將隱蔽的設置暴露出來；迥殊須要注重的是該操縱是一個單向操縱，一旦運用eject，那末就不能恢復了(再次將設置隱蔽)；

三、 自動天生的項目目次以及文件剖析：

• node_modules : 項目依靠包目次；

• public: 大眾目次，該目次下的文件都不會被webpack舉行加載、剖析、打包；經由過程npm run build舉行打包時該項面前目今的一切文件將會直接被複制到build目次下；

  • favicon.ico : 是網站圖標[可替代刪除]
  • index.html: 頁面模板，webpack打包后將輸出文件引入到該模板內；補充：index.html中經由過程環境變量%PUBLIC_URL% 來指向public目次途徑；
  • manifest.json: PWA將運用增加至桌面的功用的完成依靠於 manifest.json 。經由過程manifest.json 文件能夠對圖標、稱號等信息舉行設置。

• src: 是源碼目次該目次下除了index.js App.test.js registerServiceWorker.js 文件具有肯定意義其他文件都是演示運用可直接刪除

  • index.js: 是全部項目的進口文件；
  • App.test.js: 測試單位演示文件，臨時並不曉得幹嗎用；能夠直接刪除；
  • registerServiceWorker.js: service worker 是在背景運轉的一個線程，能夠用來處置懲罰離線緩存、音訊推送、背景自動更新等使命；registerServiceWorker就是為react項目註冊了一個service worker，用來做資本的緩存，如許你下次接見時，就能夠更快的獵取資本。而且由於資本被緩存，所以縱然在離線的情況下也能夠接見運用（此時運用的資本是之前緩存的資本）。注重，registerServiceWorker註冊的service worker 只在臨盆環境中見效，而且該功用只要在https下才有結果；
• .gitignore: 該文件是github過濾文件設置
• README.md: 該文件是github形貌文件
• package.json: 定義了項目所須要的種種模塊，以及項目的設置信息（比方稱號、版本、許可證等元數據）。部份依靠模塊被隱蔽；
• yarn.lock：每次經由過程yarm增加依靠或許更新包版本時 yarn都會把相干版本信息寫入yarn.lock文件；npm也有相似功用，npm 也能夠天生一個鎖文件，就是運用上沒有yarn輕易

四、 擴大webpack設置(以 less為例）

4.1 要領一：將 webpack 設置暴露出來並舉行修正

• 暴露設置文件：

$ npm run eject
申明: 實行eject劇本后，項面前目今會新增或對部份設置文件舉行修正；項面前目今 script 目次存放着劇本文件， config 目次下存放着設置文件

• 下載裝置依靠：less-loader less

$ npm install less-loader less -dev

• 修正 config 目次下的webpack設置文件：

// 需同時修正下面的兩個文件：
// 開闢環境下的設置文件：webpack.config.dev.js 
// 臨盆環境下的設置文件：webpack.config.prod.js
// 兩個文件的修正內容雷同，對應修正內容以下(三處須要舉行修正)
......
{
    // 【1】修正文件婚配正則
    test: /\.(css|less)$/, 
    use: [
        require.resolve('style-loader'),
        {
            loader: require.resolve('css-loader'),
            options: {
            // 【2】將底本数字 1  改成数字2
            importLoaders: 2,
        },
        },
        { .... },
        // 【3】增加新的加載設置對象
        {
            loader: require.resolve('less-loader'),
        }
    ],
}
......

4.2 要領二：運用 react-app-rewired 對 webpack 舉行自定義設置(掩蓋或增加)

• 裝置依靠包 react-app-rewired：

$ npm install react-app-rewired --save-dev

• 修正 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"
  }

• 在項目根目次下(和 package.json 同級)新建設置文件 config-overrides.js ，並增加以下內容

module.exports = function override(config, env) {
    // 在這裏增加設置
    return config;
}

• 裝置依靠包 react-app-rewire-less，經由過程該依靠包來完成對 less 的支撐：

$ npm install react-app-rewire-less --save
申明: 這裏不再須要分外零丁裝置依靠包：less-loader  less

• 修正 config-overrides.js 設置文件，為 webpack 設置 less

const rewireLess = require('react-app-rewire-less');
module.exports = function override(config, env) {
  // 只須要一條設置信息即可完成對less的支撐
  config = rewireLess(config, env);
  // 下面解釋用於設置loader的參數
  // config = rewireLess.withLoaderOptions(someLoaderOptions)(config, env);
  return config;
}

五、 在 create-react-app 中運用Antd

5.1 平常運用要領（不引薦）

• 搭建項目：

$ create-react-app demo
$ cd demo
$ npm run start

• 引入 antd 依靠包：

$ npm install npm

• 引入 antd 組件之前須要先引入 antd 款式( 在項目進口引入一切款式 )：

import antd/dist/antd.css

• 在項目中引入 antd 組件

import { Button } from 'antd';

5.2 按需加載

- 上面引入組件和款式的體式格局，會一次性加載一切款式並引入組件中的一切響應模塊；
- 這類引入體式格局將會影響到運用的收集機能；
- 響應的就須要轉變引入組件和款式的體式格局，完成款式和組件的按需加載；
- 下面將引見三種按需加載組件款式的要領：

5.2.1 要領一: 準確加載組件

import Button from 'antd/lib/button';
import 'antd/lib/button/style'; 
// 或許經由過程import antd/lib/button/style/css 舉行加載款式

5.2.2 要領二：經由過程暴露設置 合營 babel-plugin-import插件完成按需加載
babel-plugin-import 是一個用於按需加載組件代碼和款式的 babel 插件

• 暴露設置

$ npm run eject

• 裝置插件：

$ npm install babel-plugin-import --save-dev

• 修正 package.json

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
  ]
},

• 設置完后可直接導入 antd 的組件，不再須要別的引入css款式；

import { Button } from 'antd';9

5.2.2 要領三：經由過程 babel-plugin-import + react-app-rewired完成按需加載（官網引薦）

1. react-app-rewired：的運用上文有過形貌；重要用於在不暴露設置的情況下對webpack的設置舉行擴大；
2. babel-plugin-import 是一個用於按需加載組件代碼和款式的 babel 插件

• 裝置依靠包：babel-plugin-import

$ npm install babel-plugin-import --save-dev

• 經由過程 react-app-rewired 對 webpack 設置舉行擴大增加新的babel插件，config-overrides.js 修正 ( 增加 ) 以下內容：

// 引入 react-app-rewired 增加 babel 插件的函數
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';9

5.3 經由過程 react-app-rewired 擴大 webpack 來完成 antd 自定義主題

重要經由過程利用了 less-loader 的 modifyVars 參數來舉行主題設置

• 裝置設置：react-app-rewired (上文已細緻引見過這裏就不再細說)
• 裝置依靠包 react-app-rewire-less ：完成對 less 的支撐同時增加 modifyVars 加載參數設置

 $ npm 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參數
    config = rewireLess.withLoaderOptions({
        // 修正默許色彩 完成自定義主題
        modifyVars: { "@primary-color": "#1DA57A" },
   })(config, env);
   // antd 按需加載設置
    config = injectBabelPlugin(['import', 
        { libraryName: 'antd', libraryDirectory: 'es', style: true }], config);
    return config;
}

5.4 經由過程插件 babel-plugin-transform-decorators-legacy 完成對潤飾器的支撐

5.4.1 經由過程暴露設置完成

• 暴露設置

$ npm run eject

• 裝置插件：

$ npm install --save-dev babel-plugin-transform-decorators-legacy

• 修正 package.json

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
    ["transform-decorators-legacy"]
  ]
},

5.4.2 運用插件 react-app-rewired 對設置舉行擴大完成對潤飾器的支撐

• react-app-rewired 的運用詳見上文：
• 裝置插件：

$ npm install --save-dev babel-plugin-transform-decorators-legacy

• 編寫 config-overrides.js 設置文件

// 導入增加babel插件的函數
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
  // do stuff with the webpack config...
  // 潤飾器擴大 (增加babel插件：transform-decorators-legacy ）
  config = injectBabelPlugin('transform-decorators-legacy', config)
  return config;
};

六、 常見問題：

6.1 經由過程 react-app-rewired 舉行擴大設置時 發明啟動項目后並沒有結果？

• 在確保一同設置沒有問題下：
• 請確認是不是有對劇本敕令舉行了準確的修正，運用react-app-rewired 擴大設置須要修正劇本敕令

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