Integrate Reactjs with JavaScript (React Microfrontend)

Render React App from JS by creating a API

Was recently tasked with a POC at work to integrate a Reactjs App in JavaScript

Learnings :

1. Create-React-App is not very flexible

2. Understanding Webpack and Babel gives you flexibility

A few quick brief definitions

1. Reactjs :- Framework to develop UI

2. Babel :- JavaScript transcompiler used to convert ECMAScript 2015+ code into a JavaScript that your browser understands.

3. Webpack :- A build time tool that bundles multiple JS files into one

Steps

1. Create React App from Scratch using Webpack and Babel.

   1. Go to https://createapp.dev/ select the following configs and download.

   2. Use this as your base project

   3. Download Project with these configs

      

2. Configure Webpack to EXPORT REACT APP AS LIBRARY

   1. Change the output of webpack.config.js

      output : {

      path : path.resolve(__dirname , 'build'),

      filename: 'index.js',

      library: 'react_withoutcra',

      libraryTarget: 'commonjs2'

      }

3. Expose a API in your React App as a ROOT component

   export const notrender = (id:any,root:any)

4. We are done with the modifications to the React App

   1. Run npm run build will create a bundle in build folder ready to be used by Legacy System.

   2. run npm link that will make your library accessible locally

5. Modify the Legacy APP

   1. Make sure the Parent App has webpack and Babel setup

   2. Include the library created above via

      1. npm install (if published) or

      2. npm link <library name> if local

   3. In any JS file you want to Render the React App import and call the API with the params

      import react_withoutcra from 'react_withoutcra';

      react_withoutcra.react_withoutcra.notrender(2221,'root2');

This is how you can render a React App from Pure JS via a API.

Will add a Github Link soon.

---