关于前端:createreactapp-400的新功能

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