Part 1 – Setup

with view.js 2 Coming to end of life by 2023 I’m sure most engineers/developers are using view.js 2 Looking for migration paths for other options. The obvious option is to upgrade view.js 3 However, the framework has not been widely adopted by the community and some major libraries like View Apollo living in alpha for 3 years and others just haven’t made a view.js 3 Compatible versions you may want to check out for the more widely used library; to like feedback,

As with all migrations, they can be a huge undertaking, in my mind there are three main options when starting a migration:

1. Creating a brand new greenfield application and driving the traffic to the respective application.
2. Using micro front-end architecture. Using a tool like Webpack Module Federation or Web Components.
3. Rapidly migrating components within an existing application by mounting React where possible.

I’m sure most engineers will jump towards greenfield applications, however when you need to ensure new features and bug fixes continue to be rolled out, there is a need to be dedicated to migrating existing and new functionality to greenfield applications. As well as maintaining an existing application. An issue affecting customer and product team deadlines. Option 2 adds complexity to the migration and has the same drawbacks as Option 1.

With these in mind, I will demonstrate option 3 – mounting the components within an existing application by mounting React where possible. At first the idea probably sounds awful, but I believe by the end of this article you will see that it is actually the lowest risk and easiest option to achieve a safe migration, while still maintaining and adding new features. Is.

Start by installing React and React DOM in your Applications directory

npm i react react-dom

Create a new folder inside you src directory. (I usereact-migration) then run cd react-migration After npm init to create a new package.json. Finally, run npm i @types/react -D To add the response type module.

Next, we need to add a tsconfig.json run file in this directory npx tsc --init, open your newly created tsconfig.json file:

// Change
"jsx": "preserve",
// to
"jsx": "react",

If you are using yarn or pnpm then update the command accordingly.

For this tutorial, I’ll be making a super basic HelloWorld.jsx component that takes some props to demonstrate communication between Vue And React,
The component is setup as follows:

import React from "react";type HelloWorldProps = {
title: string;
respondFunction: () => void;
};export function HelloWorld({ title, respondFunction }: HelloWorldProps) {
return (
<div>
<h2>Hello World Example</h2>
{title}
<br />
<button onClick={() => respondFunction()}>Respond</button>        
</div>
);
}

This component expects two required props: title And respondFunction, These will be passed from Vue to React.

Next, we want to create a Vue component that will allow us to pass any number of props to it and mount React in the application.

This ReactWrapper.vue The component can be seen here:

<template>
<div ref="container" /> 
</template>  <script> 
import { createElement } from "react"; 
import { createRoot } from "react-dom/client";  
export default {
inheritAttrs: false,
props: {
component: {
type: Function,
required: true,
},
},
data() {
return {
reactRoot: null,
};
},
methods: {
updateReactComponent() {
this.reactRoot.render(createElement(this.component, this.$attrs));
},
},
mounted() {
this.reactRoot = createRoot(this.$refs.container);     
this.updateReactComponent();
},
destroyed() {
this.reactRoot.unmount();
},
watch: {
$attrs: {
deep: true,
handler() {
this.updateReactComponent();
},
},
},
};
</script>

To give a quick overview of what’s going on here, we’re creating a React Route and assigning it to the container ref.

we have set inheritAttrs: false, so that the properties don’t just cast on the container ref and then we pass $attrs As props when we render the component. we also see $attrs and re-render the component when they change.

last we unmount when the component is destroyed To make sure we clean the React application.

We can either register this component globally so that it is available throughout the Vue application or import it only in the components where we want to mount it.

To mount it globally, open main.ts and add:

import ReactWrapper from "@/components/ReactWrapper.vue";Vue.component("ReactWrapper", ReactWrapper);

To import it locally into a component:

import ReactWrapper from "./ReactWrapper.vue"...components: {
ReactWrapper,
},

Next, we want to import HelloWorld.tsx component and expose it to the template by returning it to a computed property:

import { HelloWorld } from "../react-migration/src/components/HelloWorld";...computed: {
HelloWorldComponent() {
return HelloWorld;
},   
},

Finally, we can add the components and get the resulting file:

<template>
<div>
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br />
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<hr />
<div>
 <react-wrapper
:component="HelloWorldComponent"
title="Well Hello there"
:respondFunction="respondFunction"
/>
</div>
</div>
</template><script lang="ts">
import Vue from "vue";
 import { HelloWorld } from "../react-migration/src/components/HelloWorld";
export default Vue.extend({
name: "HelloWorld",
props: {
msg: String,
},
computed: {
  HelloWorldComponent() {
return HelloWorld;
},
},
methods: {
     respondFunction() {
alert("We have responded");
},
},
});
</script>

Well, let’s spin the app and see what we have in store. Run in application directory:

npm run serve

And go to the given link in terminal. Now you should see this:

We can see that the top half of the component is starting standard HelloWorld.vue component and within that, we can see our React HelloWorld.tsx Loading component including title prop. Let’s click the button and check that it activates the Vue function we passed:

Perfect, we’ve removed the Vue function that opened a browser alert window. Now we have React running in Vue without any issues which allows us to communicate between the two using props.

As shown above using props for fire events is actually easier to communicate between the two, but if your application is large scale then prop drilling will become a really big issue for you. This is when you need to use browser events to fire and listen or start watching to set up global state. Choosing the ideal global state can be tricky as you need to be able to be compatible with both Vue and React.

I’ll cover this in another article with ways to build a vanilla library like voltio Work with View 2.

• rest – if you are using REST Then updating your queries would be as simple as building them with React instead of Vue. If you have a custom instance of your favorite HTTP client like axios Then it is best to initialize the singleton in a single file that can be imported and used in both React and Vue.
• GraphQL , if you are using Apollo You may find that your Vue application is on an older version of the library and you need to create a new setup for React. I will cover this in another article.

I’m sure some people are reading this article thinking this: “Are you sure? It may be unnecessarily slow”. However, I would like to point out that React recommends starting like this:

Feedback has been designed from the outset to adopt gradual, and You can use React as much or as little as you want, Perhaps you just want to add some “splashes of interactivity” to an existing page. React components are a great way to do this.

Most websites are not and do not need to be single-page apps. with Few lines of code and no build toolingTry, Feedback in a small part of your website. You can then either gradually expand its presence, or keep it contained in some dynamic widgets.

Source, https://reactjs.org/docs/add-react-to-a-website.html

I can also assure you that I know of companies doing this method and production builds are still under 1MB and customers haven’t seen any downgraded performance in the areas it’s used to!

I would also like to restate that this is a migration plan and is intended to strangle Vue until we have a React application left.

Personally, I think this method of migration is the safest, easiest and most maintainable option as you are still working in one codebase and migrating step by step, if you are looking for whole pages or just small components. If you decide to change, the choice is yours but it allows you to get started. I would also like to point out that if you are working on a large application or even working with a lot of technical debt, it is better to migrate an entire application while letting the feature work and maintaining the current application. It may take 15 months to do that. You need to start somewhere, why not start here?

In the end, I worked solely with Vue for several years and I love the composition API but with the uptake, third-party libraries and lack of community, would you really like to redo this migration in 2 years’ time? want to take the risk. , React isn’t going anywhere, it has a huge ecosystem and any JavaScript developer will fall in love.

Plus if that’s not enough to impress you… it would be great for your CV to react to your skills.

Thank you for taking the time to read my article. I hope you find this informative and interesting. I will write more articles around TypeScript, Node, React, Vue, GraphQL, Perfomance, Go, and more.