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.

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.

In 5 Steps to Turn a Random React Application Into a Micro Front-End, we have drawn the following architecture 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?

Our example is inspired by [Demo of Gradual React Upgrades](https://github.com/reactjs/react-gradual-upgrade-demo/). We will refer to it as The Demo.

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

---

Step 1: Move New Code to Src/Modern Directory

As always, we start with the 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.

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

#react #nodejs #javascript #programming #reactjs