使用create-react-app創建react項目

 一、創建

全局安裝腳手架工具    npm install -g create-react-app

新建項目：

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

環境變量問題 npm init react-app my-app；

其他方式    yarn create-react-app my-app

二、運行

啟動

啟動開發
npm start
# or
yarn start
啟動測試
npm test
#or
yarn test
構建生產版本
npm run build
#or
yarn build
解壓默認的webpack配置到配置文件中
npm run eject 

三、配置

sass依賴

$ npm install node-sass --save
$ # or
$ yarn add node-sass

代理配置

配置簡單代理，直接在package.json文件中添加proxy節點即可：

{
  ...
  "proxy": "http://localhost:4000",
  ...
}

自定義配置

安裝中間件
$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware
創建： src/setupProxy.js 添加如下內容:

const proxy = require('http-proxy-middleware'); module.exports = function(app) { app.use(proxy('/api', { target: 'http://localhost:5000/' })); };

http-proxy-middleware 1.x比0.x變化較大，正確寫法如下

const {createProxyMiddleware} = require('http-proxy-middleware');
module.exports = function(app) { app.use(createProxyMiddleware('/api', { target: 'http://localhost:5000/' })); };

 環境變量：在項目中區分開生產環境還是編譯環境，從而執行不同的代碼。

Windows (cmd.exe)
set "REACT_APP_NOT_SECRET_CODE=abcdef" && npm start

Windows (Powershell)
($env:REACT_APP_NOT_SECRET_CODE = "abcdef") -and (npm start)

Linux, macOS (Bash)
REACT_APP_NOT_SECRET_CODE=abcdef npm start

添加自定義環境變量文件.env
項目根目錄下創建.env文件，文件內部添加 key=value的配置可以直接應用於項目的編譯中。

REACT_APP_NOT_SECRET_CODE=abcdef
Note: 如果創建自定義的環境變量必須以REACT_APP_開頭.

在項目中可以直接用process.env.XXX訪問我們的自定義的環境變量。比如：

js中使用
render() {
  return (
    <div>
      <small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>
      <form>
        <input type="hidden" defaultValue={process.env.REACT_APP_NOT_SECRET_CODE} />
      </form>
    </div>
  );
}
再比如：判斷是否是生產環境

if (process.env.NODE_ENV !== 'production') {
  analytics.disable();
}
HTML中使用
<title>%REACT_APP_WEBSITE_NAME%</title>

配合typescript

配合TypeScript
第一種方式：創建項目的時候直接配置好TypeScript.

npx create-react-app my-app --typescript
#or
yarn create react-app my-app --typescript
第二種方式：為現有的React項目添加TypeScript

npm install --save typescript @types/node @types/react @types/react-dom @types/jest
# or
yarn add typescript @types/node @types/react @types/react-dom @types/jest

 參考：https://www.jianshu.com/p/77bf3944b0f4

配置本地服務配置項

方法1.eject

打開 package.json ，可以看到eject。運行 npm run eject 可以讓由create-react-app創建的項目的配置項暴露出來。

復制代碼
{
  ...
  "scripts": {
   ...
    "eject": "react-scripts eject"
  },
  ...
}

此時目錄中多出來配置文件夾

scripts文件夾start.js中修改配置
// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0'

重啟項目

方法2.react-app-rewired

安裝    npm install react-app-rewired --save

修改package.json,原本的react-script 改為react-app-rewired　　

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

在根目錄下新建config-overrides.js,在config-overrides.js里更改配置項，項目啟動的時候會先在config-overrides.js里讀數據，對webpack里的默認文件進行整合，最后才會啟動。

復制代碼
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
    config = injectBabelPlugin([
        'import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }
    ], config)
    config = injectBabelPlugin([
        "@babel/plugin-proposal-decorators", { "legacy": true }
    ], config)
    return config;
}

參考：https://www.cnblogs.com/superlizhao/p/11026930.html

運行npm run eject之后bug解決

方法一、

// package.json中增加配置項
{
  "babel": {
    "presets": [
      [
        "react-app",
        {
          "runtime": "automatic"
        }
      ]
    ]
  }
}

方法二、

// webpack.config.js
{
  loader: require.resolve('babel-loader'),
  options: {
    customize: require.resolve(
      'babel-preset-react-app/webpack-overrides'
    ),
    // Add this back
    presets: [
      [
        require.resolve('babel-preset-react-app'),
        {
          runtime: hasJsxRuntime ? 'automatic' : 'classic',
        },
      ],
    ],
  }
}

參考：https://github.com/facebook/create-react-app/issues/9882