Angular 2 and React components interacting within a single app.

Angular 2 and React components interacting within a single app.

There has been a lot of discussion about JavaScript frameworks for the modern web applications. There are two main players in this area - Angular 2 and React. Both of these frameworks backed respectively by Google and Facebook are game changers in terms of developer experience. I've had a fantastic opportunity to work with Angular 2 since it was an early Beta (Many thanks to people that made that possible!). I have recently spent some time with React too. I think that its main advantage over Angular 2 is much lower footprint on the application. So in my opinion both frameworks fit to different kinds of applications. It seems like Angular 2 is a great choice for large scale reactive enterprise applications, while React is better for projects requiring lower footprint on the developed application.

I have been asked recently to investigate the possibility to put in together an Angular 2 shell application with React components interacting with host Angular 2 component. It occured to be quite interesting excercise, and this kind of setup may potentially be useful if a company has existing React codebase and skills and would want to utilize it in a greenfield Angular 2 application project.

I soon came up with a simple demo, which I am going to present tomorrow.

Demo
Github

There are a few factors that made this experiment possible:

  1. React is using JSX syntax, which is supported by TypeScript compiler.
  2. Components can share their state thanks to a JavaScript state machine called Redux.

Let's look into the tooling context and code a bit. Below are the TypeScript language options,
and the one worth noting here is a jsx setting with value react.

{
  "compilerOptions": {  
    "jsx": "react",
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "rootDir": "src",
    "outDir": "dist"
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

Like it was mentioned above, in my demo Angular 2 acts as a shell application and one of its main components acts like a host for nested React components. The simplistic host is here.
The host's responsibility is to build initial Redux state and pass this onto child components. I use its ngOnInit() lifecycle hook to initialize React components with the necessary context.

ReactChildComponentView.initialize( this.helloReact, this.store, 'react-component-container' );  
}

Let's move to React bit now. Simple child component is defined here.

To make React component translating provided Redux state into its own internal state I have implemented getInitialState as follows:

    getInitialState: function() {
         this.props.store.store.subscribe(() => {
             this.setState({                 
                'elements' : this.props.store.store.getState()
             });      
        });
        return { 
            'title': this.props.title,             
            'elements': this.props.store.store.getState() 
        }       
    }

That would be all. If you are looking to integrate React components into Angular 2 application, it could be a good starting point and I hope you will find it useful.

Having an idea on how to improve the experiment's code? Do not hesitate to leave a comment.

Comments

comments powered by Disqus