创建react应用程序_创建多版本React应用程序的6个步骤

创建react应用程序

The React team said that there are no new features in React 17, but react@17.0.0-rc.0 comes with the power to lazy load and deep integrate multiple versions of React. This no-feature is larger than any feature, which is a stepping stone for a paradigm that allows modern new apps to coexist with existing legacy ones.

React团队表示，React 17中没有新功能，但是react@17.0.0-rc.0具有延迟加载和深度集成多个版本的React的能力。 这种无功能大于任何功能，这是使现代新应用程序与现有旧应用程序共存的范例的垫脚石。

This hybrid approach is meant to be an escape hatch, not the norm. Using a single version of React is the best practice, which removes a lot of complexity and saves you from multiple package downloading. However, this is still a powerful alternative in an environment with legacy code.

这种混合方法是要逃脱，而不是规范。 最佳实践是使用React的单个版本，这消除了很多复杂性，并使您免于多次下载软件包的麻烦。 但是，在具有遗留代码的环境中，这仍然是一个强大的替代方案。

In 5 Steps to Turn a Random React Application Into a Micro Front-End, we have drawn the above architecture diagram that launches multiple React applications, legacy and new, that work together as one application. Does it sound like a different option for a similar problem?

在将随机React应用程序转变为微型前端的5个步骤中 ，我们绘制了以上架构图，该架构图启动了多个React应用程序(旧版和新版)，它们可以作为一个应用程序一起工作。 听起来像是解决类似问题的另一种选择？

Our example is inspired by Demo of Gradual React Upgrades. We will refer to it as The Demo.

我们的示例受Demo of Gradual React Upgrades启发。 我们将其称为The Demo 。

Based on our tryout, there are six steps to create a multi-version React application.

根据我们的试用，有六个步骤来创建一个多版本的React应用程序。

步骤1：将新代码移至Src /现代目录 (Step 1: Move New Code to Src/Modern Directory)

As always, we start with the Create React App.

与往常一样，我们从Create React App开始 。

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

Since we are going to put multiple React apps into the same repository, we need to set up namespaces. Here is the directory structure.

由于我们要将多个React应用程序放入同一个存储库，因此我们需要设置名称空间。 这是目录结构。

src
 ├─ modern // new code: React 17
 ├─ legacy // legacy code: React 16.3.1 - could be lower version
 └─ shared // shared code - common source

We move everything in src to src/modern.

我们将src所有内容移动到src/modern 。

$ ls
App.css          index.css        App.js           
index.js         serviceWorker.js. App.test.js      
logo.svg         setupTests.js

In addition, copy package.json to src/modern, and make some modifications:

另外，将package.json复制到src/modern ，并进行一些修改：

{
  "name": "react-app-modern",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "17.0.0-rc.0",
    "react-dom": "17.0.0-rc.0"
  }
}

At line 2, change it to a proper name. Keep all dependencies, and remove the rest of the sections.

在第2行，将其更改为专有名称。 保留所有依赖项 ，然后删除其余部分。

At line 9 and line 10, React versions has been upgraded to 17.0.0-rc.0.

在第9行和第10行，React版本已升级到17.0.0-rc.0 。

The react-scripts package is removed from the dependencies list.

react-scripts包已从依赖项列表中删除。

步骤2：将旧版代码移至src /旧版目录 (Step 2: Move Legacy Code to src/legacy Directory)