In this blog we are going to discuss in summary, difference\u00a0between the two most popular JS (library\/framework) i.e Angular 2 and React JS<\/p>\n
On the very first note, React JS<\/a> is just a library and Angular 2 is a whole framework (which is still undergoing changes). But we can have a comparison\u00a0for both.<\/p>\n 1. Component: Both React and Angular 2 are based on a Component model. But they both differ in the way the component is used.<\/p>\n in Angular 2 :<\/em><\/p>\n In React :<\/em><\/p>\n We can see that both React and Angular 2<\/a> uses component (which is based on class feature of ES6) On the other side, Angular 2 uses template URL to store HTML (which is separate from JS code) 2. ECMA 6<\/strong> : Both React and Angular 2 uses latest ECMA 6 features but React\u00a0uses Babel \u00a0to 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.<\/p>\n 3 DataFlow :<\/strong> Angular 2 is based on bi-directional data flow while React JS is based on uni-directional data flow.<\/p>\n 4. Routing :<\/strong> Angular 2 has its own routing functionality in its own framework. While React relies on another library “react-router”.<\/p>\n 5. DOM :\u00a0<\/strong>React JS use Virtual DOM (Javascript representation\u00a0of actual DOM) to manipulate the actual DOM , which makes it quite fast and efficient in comparison to Angular 2 which directly manipulate actual DOM.<\/p>\n 6. Tooling Support :<\/strong> 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.<\/p>\n 7. Architecture :\u00a0<\/strong>React does not provide any architecture , but facebook developers suggest to use either flux or redux based architecture which supports\u00a0unidirectional data flow.On the other hand, Angular was based on MVC architecture earlier but later in Angular 2<\/a>, architecture is based on the component with bidirectional data flow with the concept of dependency injection (most opinionated\u00a0) .<\/p>\n 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.<\/p>\n","protected":false},"excerpt":{"rendered":" In this blog we are going to discuss in summary, difference\u00a0between 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\u00a0for both. 1. Component: […]<\/p>\n","protected":false},"author":935,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":5},"categories":[1439,3429,1],"tags":[3180,3955,4697,3505,4857,2046],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/38006"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/935"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=38006"}],"version-history":[{"count":3,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/38006\/revisions"}],"predecessor-version":[{"id":52772,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/38006\/revisions\/52772"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=38006"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=38006"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=38006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}import { Component } from 'angular2\/core';\r\n\r\n@Component({\r\n selector: 'any-selector',\r\n templateUrl: 'app\/demo.template.html'\r\n})\r\n\r\nexport class DemoComponent { }\r\n<\/pre>\nimport React from 'react';\r\n\r\nexport default class DemoComponent extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = { data: 'Hello World!' };\r\n }\r\n\r\n render() {\r\n return (\r\n <div>\r\n <p>{this.state.message}<\/p>\r\n <\/div>\r\n );\r\n }\r\n}<\/pre>\n
\nComponent 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).<\/p>\n
\nBut React uses inline HTML code (which is coupled component with HTML and JS code ie. messy code).<\/p>\n