Comparing React and Angular

While there are a few similarities between how React and Angular use, there are very few similarities between how these two frameworks work, and what goes on underneath the hood.

At the most basic level, React and Angular are both front end frameworks that expand upon the vanilla JavaScript library. Because of this, React and Angular are often talked about as comparing apples. However this is not the case! While their end products might have some similarities in terms of UX, React and Angular are incredibly different.

Let’s take a look at some of the basic differences:

ANGULAR:

1. Developed by Google
2. Has full MVC capabilties
3. Client-side rendering
4. Two-way data binding
5. JavaScript + HTML

REACT:

1. Developed by Facebook
2. JavaScript library
3. Server-side rendering (Virtual DOM)
4. One-way data binding
5. JavaScript + JSX

Those are the most fundamental differences between the two! Let’s take some time to unpack this information to get a little more clear of an idea of what this actually means.

In doing research for this blog post, I saw another blogger who had a great analogy for comparing React to Angular. He succinctly described comparing Angular and React to comparing a car (Angular) to an engine (React).

While this is not a value judgement by any means, Angular gives developers the ability to work with the full MVC (Model, View, Controller) capabilities, while React deals mostly with the V. ‘

Another major difference between React and Angular are how the DOMs are manipulated. Angular on one had has two-way data binding, which means that any changes to the model will show up on the view, and any changes to the controller will show up on the view.

For example, if a user types into an <input> field in the view, not only will their text appear on the screen (changing the view), this change will also be reflected in the model. This allows Angular to directly manipulate the DOM and cuts down on a lot of complexity.

On the other hand, React only has one-way data binding, meaning that information can only flow in one direction.

This image from ruby garage explains this concept really well:

Essentially there is no way for the user to change the HTML using React. When an event occurs in the Virtual DOM, React looks to see the difference between the last copy of the DOM and the current, and re-renders the Virtual DOM to account for or display this change! The input doesn’t have control of the React component’s state, but it has an event listening for a change that will update the state. Essentially React is constantly re-rendering, although it is so light weight that it often doesn’t feel like that much work is occuring.

The third major point I want to highlight for developers is the difference between how HTML is rendered for both React and Angular. While Angular is written in JavaScript, there are elements of the view that are written by the developer in the View in pure HTML.

On the other hand, in React, there is a combination of HTML and JSX. An example of JSX is this:

const element = <h1>Hello, world!</h1>;

While it looks like HTML, it actually has the full functionality of JavaScript as is able to contain coding logic that HTML could never accomplish. This part can often confuse new developers, but it’s actually pretty easy to use!

Those are just a few of the most surface lever differences between the two. Hope this helped!