1.肯定參考facebook關于react官網咯 快速搭建 create-react-app
npm install -g create-react-app
//切記項目名稱不能大寫
create-react-app firstapp
cd firstapp
npm run start
這樣就有初始項目了
2. 檢視項目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 可用腳本指令說明： （create-react-app官方文檔都有）
首先說明：通過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，那麼就不能恢複了(再次将配置隐藏)；
3、 自動生成的項目目錄以及檔案解析：
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友善
4、 擴充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 中的腳本指令：修改如下
"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');
// 隻需要一條配置資訊即可實作對less的支援
config = rewireLess(config, env);
// 下面注釋用于配置loader的參數
// config = rewireLess.withLoaderOptions(someLoaderOptions)(config, env);
5、 在 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實作按需加載（官網推薦）
react-app-rewired：的使用上文有過描述；主要用于在不暴露配置的情況下對webpack的配置進行擴充；
安裝依賴包：babel-plugin-import
通過 react-app-rewired 對 webpack 配置進行擴充添加新的babel插件，config-overrides.js 修改 ( 添加 ) 如下内容：
// 引入 react-app-rewired 添加 babel 插件的函數
const { injectBabelPlugin } = require('react-app-rewired');
config = injectBabelPlugin(['import',
{ libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
};
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 配置檔案
// 擴充 webpack ==> 支援less
// 配置loader參數
config = rewireLess.withLoaderOptions({
// 修改預設顔色 實作自定義主題
modifyVars: { "@primary-color": "#1DA57A" },
})(config, env);
// antd 按需加載配置
{ libraryName: 'antd', libraryDirectory: 'es', style: true }], config);
5.4 通過插件 babel-plugin-transform-decorators-legacy 實作對修飾器的支援
5.4.1 通過暴露配置實作
$ npm install --save-dev babel-plugin-transform-decorators-legacy
["transform-decorators-legacy"]
5.4.2 使用插件 react-app-rewired 對配置進行擴充實作對修飾器的支援
react-app-rewired 的使用詳見上文：
編寫 config-overrides.js 配置檔案
// 導入添加babel插件的函數
// do stuff with the webpack config...
// 修飾器擴充 (添加babel插件：transform-decorators-legacy ）
config = injectBabelPlugin('transform-decorators-legacy', config)
6、 常見問題：
6.1 通過 react-app-rewired 進行擴充配置時 發現啟動項目後并沒有效果？
在確定一起配置沒有問題下：
請确認是否有對腳本指令進行了正确的修改，使用react-app-rewired 擴充配置需要修改腳本指令
....
...
