React JS vs Angular 2

In this blog we are going to discuss in summary, difference between the two most popular JS (library/framework) i.e Angular 2 and React JS

On the very first note, React JS is just a library and Angular 2 is a whole framework (which is still undergoing changes). But we can have a comparison for both.

1. Component: Both React and Angular 2 are based on a Component model. But they both differ in the way the component is used.

in Angular 2 :

import { Component } from 'angular2/core';

@Component({
    selector: 'any-selector',
    templateUrl: 'app/demo.template.html'
})

export class DemoComponent { }

In React :

import React from 'react';

export default class DemoComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: 'Hello World!' };
  }

  render() {
    return (
      <div>
        <p>{this.state.message}</p>
      </div>
    );
  }
}

We can see that both React and Angular 2 uses component (which is based on class feature of ES6)
Component used in Angular 2 is quite difficult as compared to React. As they use annotation or can say, decorators (which has a quite unusual syntax with JS code).

On the other side, Angular 2 uses template URL to store HTML (which is separate from JS code)
But React uses inline HTML code (which is coupled component with HTML and JS code ie. messy code).

2. ECMA 6 : Both React and Angular 2 uses latest ECMA 6 features but React uses Babel  to transpile ES6/ES2015 code into its ES5 counterpart. While Angular use typescript (mostly) which uses adds static types inside javascript. This static types used inside JS is a demerit in itself.

3 DataFlow : Angular 2 is based on bi-directional data flow while React JS is based on uni-directional data flow.

4. Routing : Angular 2 has its own routing functionality in its own framework. While React relies on another library “react-router”.

5. DOM : React JS use Virtual DOM (Javascript representation of actual DOM) to manipulate the actual DOM , which makes it quite fast and efficient in comparison to Angular 2 which directly manipulate actual DOM.

6. Tooling Support : For tool used to support React we need to search for those which supports JSX feature . Although there are many tools in the market which support JSX. But Angular 2 does not require any special tool as it stores HTML in a separate file.

7. Architecture : React does not provide any architecture , but facebook developers suggest to use either flux or redux based architecture which supports unidirectional data flow.On the other hand, Angular was based on MVC architecture earlier but later in Angular 2, architecture is based on the component with bidirectional data flow with the concept of dependency injection (most opinionated ) .

So we can see that both React and Angular 2 have pros and cons when compared with each other with respect to their core concepts.