create-react-app 4.0.0的新功能

Create React App是建立單頁React應用（SPA）的推薦方式。它是React官方支持的，它提供了一個現代化的構建設置，無需配置。

有了它，你能夠用一個命令來引導一個現代的React應用。因爲Create React App同時支持 npm 和 yarn，所以該命令能夠根據您要使用的包管理器而略有不一樣。

要建立一個新的React應用程序，您能夠運行如下任一命令：

npx create-react-app my-app
// OR
npm init react-app my-app
// OR
yarn create react-app my-app

此外，Create React App還省去了安裝和配置Webpack和Babel等繁瑣的任務，這些任務都是預先配置和隱藏的，因此你能夠專一於編碼。這意味着須要學習的東西更少，你只須要運行上面的任何一個命令就能夠開始建立React應用。

雖然Create React App帶有Webpack和Babel的預配置，但它不會強迫你使用本身的配置。你能夠從Create React App中 eject ，並根據你的喜愛添加你的自定義配置。

4.0版是主要發行版本，具備一些有趣的功能。

若是你已經在全局範圍內安裝了 create-react-app 你應該運行：

npm uninstall -g create-react-app

或者卸載它

yarn global remove create-react-app

再運行

npx create-react-app my-app

從此，確保 npx 始終使用最新版本。若是你的項目使用的是舊版本，你能夠在下一節中看到遷移的說明。

遷移

當從3.4.x版本遷移到4.0.0版本時，在未被ejected的項目中運行如下內容

npm install --save --save-exact react-scripts@4.0.0

或者

yarn add --exact react-scripts@4.0.0

這應該會無縫更新react-scripts。若是你遇到任何錯誤，建議你刪除你的 node_modules 文件夾，並經過運行從新安裝你的依賴關係。

npm install or yarn install

這樣就能夠完成遷移，而不會出現任何錯誤。

新特性

Fast refresh 快速刷新

Fast refresh是舊功能（熱重載）的官方React實現，這相似於熱重載，但更可靠。

Fast refresh使您可以在運行中的應用程序中編輯React組件而不會丟失它們的狀態，以下圖所示。

簡而言之，它使您能夠實時調整React組件，這相似於 react-hot-loader。

可是，與之前的版本相比，Fast refresh的主要優勢之一是它能夠熱加載Hooks和保留狀態。

Create React App 4.0.0使用react-refresh包和react refresh webpack plugin來實現這一點。

React 17（新的JSX transform）和TypeScript支持

Create React App 4.0.0提供對新的JSX轉換和React 17的支持。新的JSX轉換不會更改JSX語法，可是它爲React帶來了重大改進。

因爲瀏覽器不能開箱即用地理解JSX, React開發人員依賴於編譯器將他們的JSX 轉換爲瀏覽器可以理解的React函數調用，Babel和TypeScript等編譯器主要用於此目的。

另外，諸如Create React App之類的工具包也附帶了JSX轉換，而4.0.0爲使用TypeScript 4.1.0的新JSX轉換提供了支持。

儘管升級到新的JSX轉換是可選的，但它確實具備一些有趣的好處，例如：新的JSX 轉換使您無需導入React便可使用JSX。

如前所述，瀏覽器不理解JSX，所以必須將其編譯爲JavaScript函數，若是您有這樣的React代碼：

import React from 'react';

function App() {
  return <p>Hi I am Lawrence Eagles</p>;
}

舊的JSX 轉換會將其轉換爲：

import React from 'react';

function App() {
  return `('p', null, 'Hi I am Lawrence Eagles');
}

問題是它調用了 React.createElement 函數，所以必須導入React。

另外，React.createElement 不支持一些性能優化技術，所以在JSX 轉換的實現上還有改進的空間。

使用新的 JSX 轉換，若是咱們具備如下代碼：

function App() {
  return <p>Hi I am Lawrence Eagles</p>;
}

它將轉換爲：

// 由編譯器插入（請勿本身導入！）
import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('p', { children: 'Hi I am Lawrence Eagles });
}

注意咱們的原始代碼不須要導入React，它仍然能夠正常工做。

另外，根據您的配置，新的JSX轉換能夠減少應用程序包的大小。

支持ESLint 7

React在後臺使用ESLint來整理咱們的代碼。這很重要，由於React是一個JavaScript庫，而JavaScript是鬆散類型的。這意味着在開發或編譯時不會捕獲錯誤，而在運行時會捕獲錯誤。

諸如ESLint之類的Linters爲您提供了一種在開發過程當中對代碼進行整理並捕獲錯誤的機制。這多是一個救命稻草，另外，有了linters，你能夠編寫自定義規則來強制執行你的編碼風格。可是，若是要強制執行代碼風格，建議您使用Prettier。

Create React App 4.0.0隨附更新的 eslint-config-react-app，以支持新發布的ESLint 7。它還爲 import/no-anonymous-default-export，Jest 和React測試庫提供了新規則。

建立React App，容許您擴展默認的ESLint規則，甚至替換它。可是建議不要替換它，由於這是致使討厭的bug的已知緣由。

在擴展ESLint基本規則以前，有一些須要注意的小問題，它們是：

• 設置爲 error 的任何規則都會破壞應用程序的構建過程
• 當使用TypeScript時，你須要提供一個只針對TypeScript文件的 override 對象
• 如前所述，請擴展而且不要替換ESLint規則

如下是擴展的ESLint規則的示例：

{
  "eslintConfig": {
    "extends": ["react-app", "shared-config"],
    "rules": {
      "additional-rule": "warn",
      "indent": ["error", 4]
    },
    "overrides": [
      {
        "files": ["**/*.ts?(x)"],
        "rules": {
          "additional-typescript-only-rule": "warn",
          "indent": ["error", "tab"]
        }
      }
    ]
  }
}

上面的規則僅執行如下操做：

• 首先擴展react-app："extends": ["react-app", "shared-config"]
• 將任何其餘規則設置爲 「warn」 以免中止構建過程："additional-rule": "warn"
• 將一致的縮進樣式設置爲4個空格："indent": ["error", 4]

• 若是使用TypeScript，請將TypeScript特定的配置放在 override 部分

  "overrides": [
    {
      "files": ["**/*.ts?(x)"],
      "rules": {
        "additional-typescript-only-rule": "warn",
        "indent": ["error", "tab"] // enforce tab indentation.
      }
    }
  ]

其餘值得注意的變化

再也不支持 typescript flag 和 NODE_PATH

要將TypeScript添加到Create React App 4.0.0中，請執行如下操做：

npx create-react-app my-app --template typescript

代替這個：

npx create-react-app hello-tsx --typescript

另外，已經刪除了對 NODE_PATH 的支持，由於經過在 jsconfig.json 中設置基本路徑來代替了對 NODE_PATH 的支持。

• 將Jest升級到26
• 放棄了對Node 8的支持，Node 8在2019年年末達到報廢期，再也不支持。
• 改用Workbox injectManifest插件，使 PWA 模板獨立於本身的倉庫。

總結

Create React App 4.0.0是一個重要的版本，它帶來了一些很棒的功能。最讓我興奮的是fast refresh。不須要額外的包就能擁有這個功能，真的很不錯。

新的JSX轉換也是一個很好的補充，可是因爲語法不變，所以並不能加強開發人員的體驗。

其餘更新也很酷，遷移過程是無縫的，這是一件很美好的事情。咱們能夠經過運行一個命令來獲取全部這些更新。

最後，若是您須要有關此版本的更多詳細信息，能夠在這裏找到。

https://github.com/facebook/c...

---

原文：https://blog.logrocket.com做者：Lawrence Oputa