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

Create React App是创立单页React利用（SPA）的举荐形式。它是React官网反对的，它提供了一个现代化的构建设置，无需配置。

有了它，你能够用一个命令来疏导一个古代的React利用。因为Create React App同时反对 npm 和 yarn，因而该命令能够依据您要应用的包管理器而略有不同。

要创立一个新的React应用程序，您能够运行以下任一命令：

npx create-react-app my-app// ORnpm init react-app my-app// ORyarn 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