WHAT IS ANGULAR JS?

AngularJS is a comprehensive JavaScript framework that contains everything you need to set up the client-side of a website. Like all frameworks, it provides a programming pattern or structure (in this case MVC) that helps streamline and standardize the web development workflow.
Some of the key advantages that have helped AngularJS rise in popularity are listed below:
- Angular directives (extension to HTML)
- Dependency injection
- Two-way data binding
- A solid templating engine
- On-board form validation
Since AngularJS is a full-sized framework packed with features, let us focus on how it handles the V portion of MVC so that we can make a more appropriate comparison with React.
AngularJS manipulates the DOM (Document Object Model) by extending HTML with directives. Thanks to two-way data binding, any changes to the view are also reflected in the data and vice versa. This has the advantage of reducing much of the programming overhead involved with syncing up the view with the model, which speeds up development time.
While two-way data binding works great for many applications, there are times when it can really start to slow things down particularly when it has to manipulate or render large blocks of data-heavy content, like a photo gallery or lists containing hundreds of items. For applications like these, you might want to take advantage of Angular modularity and swap out the V for a more formidable rendering engine like React.

WHAT IS REACT?

React (also known as React.js or ReactJS) is an open-source JavaScript library for rendering views. While full frameworks like AngularJS provide the model, view, and controller, React is a library that caters only to the view. It uses one-way data binding, but with a unique twist that helps it gain a huge performance advantage over competing technologies.
Let us take a look at some of the key tech differentiators that make React stand out from the rest:
The Virtual DOM
This is the key piece of tech responsible for the magic behind React amazing rendering performance. Instead of manipulating the DOM directly (which can be error prone), React stores two copies of a Virtual DOM, the original and an updated version that reflects changes fed in from the view. The two versions are run through a React function that singles out the differences and outputs a stream of DOM operations that only alter the parts of the view that actually changed. As a result, time and resources are saved, as only the parts that are actually changing are affected by changes in the view.

Was it clear so far?

JSX Files

JSX files go against the modern tendency to want to keep HTML and JavaScript code separate. This is not a bad thing with React?s sleek and simple syntax, however, you end up with a single self-contained component that tells you exactly how it will render in the view. It also helps that it is optional, so those who are more accustomed to traditional programming paradigms do not have to use it if they do not want to.
Server-Side Rendering
Server-side rendering also goes against a relatively recent trend of rendering everything on the client-side. React can be rendered on both the client and server, giving greater coding flexibility and giving the Virtual DOM the breathing room it needs to really spread its wings.
React Native
Normally when you try to build an app for mobile devices using JavaScript, you have to rely on a cross-platform framework like Cordova or Ionic. While these frameworks can greatly speed up development time, they will never be as sleek and smooth as a native app. Enter React Native, a framework that enables you to build components for native UI widgets the same way you build them for HTML. React treats the view layer as a pure output of state, so switching its purpose from the web to mobile is as simple as swapping your tags for tags via the React Native framework. It also means your mobile app benefits from the same principles that make React so blazingly fast for web applications. JavaScript code will never be as fast as the native code for a device, but for most tasks, React Native is more than capable of delivering a smooth user experience.

WHEN SHOULD YOU USE REACT?

React shines when you have lots of dynamic content changing within the view. Most client-side solutions on the web today struggle with rendering large lists of items within a single view. This ?struggle? may be on the order of milliseconds, but in this increasingly digital world, a half a second delay is all it takes to kill your user experience. It?s why sites that have a lot of dynamic, constantly changing, data-intensive content like Instagram or Facebook choose to power their applications with React.
As a library, you can also use React as the view component of AngularJS or other frameworks, because it does not tie you to a specific technology stack. That said, there?s a quickly growing community and a number of existing libraries and add-ons that can help you build an app from scratch. Consider Flux, the application architecture Facebook uses to create an application powered by React. React is also perfect for those familiar with ClojureScript and its immutable data structures?the Om project is the rising star for those looking to build dynamic applications using these technologies.

You Should Use AngularJS If?

Development time is at a premium, and you need a full, comprehensive framework that will get you running quickly out of the box. As we mentioned earlier, comparing a library to a framework isn?t really a valid question, as you can always use one with the other.
The real question to ask is when shouldn?t you use React? React is not backwards compatible with browsers older than IE8. Also, the community is young, so it?s possible you?ll have to do a lot of ?reinventing of the wheel? in order to get the specific features you?re looking for. It?s also up for debate whether or not installing React is worth the trouble if your project is either a simple webpage or if AngularJS is already more than capable of rendering your view.

With the recent release of Angular 2.0 on May 2, 2016, Angular devotees have another reason to stick with their framework of choice. Angular 2.0 shipped with a huge performance boost, including support for server-side rendering and a similar approach to using one-way data binding to only manipulate the parts of the DOM that need to be changed. However, Angular 2.0 also involved a major rewrite of the framework, so whether you choose to install React or upgrade to the next generation of Angular, there?s still going to be a learning curve to overcome.