If you have a old application in angularjs, and you want to develop new views in react, then most of the time you will not able to do so because the application is too big to convert to react. In this tutorial, we are going to look into developing new views in react, keep old ones in angularjs.

Understanding the lifecycle of frameworks


Before we develop our "mini framework of frameworks (we will call it lifecycle framework)", we have to understand how does the react/angularjs or some other framework work. These framework have some sort of lifecycle. In react, you have this lifecycle.

lifecycle of react app

Similarly you will have some lifecycle in angularjs like below.

lifecycle of angular

Our mini framework is not concerned about inner workings of angularjs or react. What we are concerned about is that our framework should be able to initialise the other frameworks, mount them to some node in DOM, and then clean up.

How do you manually initiate React in a page?


In order to insert some react app inside a div, simply use ReactDOM.render method. For example, in order to display "Hello World" into the div with id "wrapper", you would do

ReactDOM.render(
React.createElement('div',null,'Hello World'),
document.querySelector("#wrapper")
)

You can do the same thing to mount a complete react app inside the div.

How will you unmount a React app from a node?


In order to unmount a react app from a node, you will use React.unmountComponentAtNode. For example, to unmount a react app from "#wrapper" node, you will use

ReactDOM.unmountComponentAtNode(document.querySelector('#wrapper'))

How will you mount and unmount an angularjs app?


In order to mount angularjs app, you will use bootstrap method. Like this

angular.module('myApp',[])
angular.bootstrap(document.querySelector('#wrapper'),['myApp'])

In order to unmount angularjs, there is not easy way. So you will have to

  • Clear contents inside "#wrapper"
  • Remove angular from window object.
  • Remove $rootScope object.

So how do we build our lifecycle framework?


Armed with the knowledge about how to manually mount and unmount react and angularjs, we can create our own library, which will call these mount and unmount functions of respective frameworks, and show them in the div.

Our lifecycle framework will have out-of-box routing capability. And on opening each route, it will call the mount function. When you leave that route, it will call the unmount function.

In the part1 of tutorial, we will build our mini framework to call the load and unload functions. We will look into routing capability in part2 of tutorial.

Building our lifecycle framework


Our framework will expose two functions

  • load
  • unloadvar lifecycle = (function() {var load = function(fn) { fn() } var unload = function(fn) { fn() }return { load: load, unload: unload }})()

The lifecycle framework exposes two methods as described above. We will attach our react code to these functions. The load and unload functions are dumb functions which only call the callback function which is passed as argument. We are not doing any checking or validation to keep things simple.

There will be two buttons (which will be removed in favour of routes after we develop them). These buttons will call load and unload methods of our framework.

Complete code is here

<button onclick='load()'>Load</button>
<button onclick='unload()'>Unload</button>

<div id="wrapper">

</div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

<script>

// our lifecycle framework
var lifecycle = (function() {

  var load = function(fn) {
    fn()
  }
  var unload = function(fn) {
    fn()
  }

  return {
    load: load,
    unload: unload
  }
})()

function load() {
  lifecycle.load(function() {
    console.log('loading')
    var elem = React.createElement('div', null, 'React Element')
    ReactDOM.render(elem, document.querySelector('#wrapper'))
  })
}

function unload() {
  lifecycle.unload(function() {
    console.log('unloading')
    ReactDOM.unmountComponentAtNode(document.querySelector('#wrapper'))
  })
}
</script>

The JSFiddle link is attached at end of tutorial.

Demo


When you click on load, the react app is created and is loaded into the #wrapper node

var elem = React.createElement('div', null, 'React Element')
ReactDOM.render(elem, document.querySelector('#wrapper'))

When you click on unload, the react app is removed

ReactDOM.unmountComponentAtNode(document.querySelector('#wrapper'))

Here is the dmeo in jsfiddle

We will look into developing our routing capability to load and unload these frameworks in part2 of tutorial.