My Take on Comparing Angular and React
Tags: angular, react, javascript
Published: 2020-05-03 21:10:27

### Background

I recently decided to build a project with Angular to learn the framework. Before this, the main JavaScript framework that I had used was React. After seeing some of the similarities and differences between the two, I decided it would be good to dive deeper into why I might want to use one over the other.

### My First Impressions

The first thing I noticed about Angular was how similar it was to React. It has a main `index.html` file, which serves as the template, just like React. It also has a `main.ts` file which serves as the jumping off point for your Angular application. This is similar to the `index.js` file in a React application. Both use npm for packages and thus have a `node_modules` folder and a `package.json` file. Both frameworks make use of components, which are reusable chunks of JavaScript (or in the case of Angular, Typescript) and html that are the building blocks of your application. Additionally, you can create mobile apps with both frameworks.

I did notice some major differences though. For one, Angular uses TypeScript which is a superset of JavaScript. If you would like to learn more about TypeScript, check out my [blog](https://dev.to/racheladaw/intro-to-typescript-4d8k). Also, each Angular component has its own HTML file, whereas React uses JSX in the component itself. [JSX](https://reactjs.org/docs/introducing-jsx.html) is a, "syntax extension" to JavaScript and allows you to create React elements that look very similar to XML.

Another big difference is the use of Angular directives to help create logic in the HTML files. One example is `ngIf` which allows you to create an if statement inside of your HTML. The following is from the [docs](https://angular.io/api/common/NgIf):

```
<div *ngIf="condition">Content to render when condition is true.</div>

```

With React, I have typically written functions in my components to conditionally render elements with if/else blocks like so:

```
renderPrice = () => {
    if (this.props.concert.attributes.price_range !== "-") {
      return <p>${this.props.concert.attributes.price_range}</p>
    } else {
      return <p>Price Unknown</p>
    }
  }
```
These functions are then called within React's `render()` function using JSX.

### A Little Bit of History

Angular was developed and released in 2016 by Google. Angular was based off of AngularJS, which was created by Misko Hevery and Adam Abrons in 2009. However AngularJS was completely re-written and transformed into Angular to include things, such as TypeScript and modularity.

React was developed by Jordan Walke, a Software Engineer at Facebook. It was originally called FaxJS, was inspired by XHP, and used internally. It was first deployed in 2011 and open-sourced in 2013.

### Angular

##### Pros

Angular comes with everything a developer needs to create applications. As mentioned earlier, it utilizes TypeScript which compiles to plain JavaScript and the documentation is all centered around TypeScript. The use of TypeScript is considered a **pro** by most developers because it allows errors to be caught quickly. Angular comes with routing, templating, and more without needing to install additional packages.

##### Cons

One **con** to Angular is that although it comes with everything you need to build an application, it can be hard to add additional packages and get them to seamlessly work with Angular components and TypeScript. Also, some say that the learning curve is steep for Angular mainly due to the syntax.

Some companies that use Angular are Google (Gmail), Microsoft, Xbox, and Udacity.


### React

##### Pros

React's exciting features include the Virtual DOM and state. See my blog about the virtual DOM and how it works [here](https://dev.to/racheladaw/react-diffing-and-the-dom-2j2d). Basically, the virtual DOM allows React to batch updates to the DOM and only make changes to the necessary elements. This feature makes React super fast! State allows each component to contain dynamic data in its own object. This is a great way to package up variables that will change, instead of spreading them out throughout your code. Additionally, including extra packages with React is usually pretty straightforward and easy to incorporate.

##### Cons

Here are some potential **cons** of React: You can use TypeScript with React, however the documentation is written in JavaScript so it might not be as straightforward as Angular out of the box. React has routing as well (`react-router`), but requires installing a different package that isn't included with `create-react-app`.

Companies that currently use React are Facebook, Instagram, Airbnb, Twitter, Netlix and more.

### Wrapping it Up

Deciding whether to get started with Angular or React ultimately depends on your use case. Angular comes with everything you need to build a single-page web application out of the box, while React is sometimes seen as more customizable. Also, some say that Angular has a little bit of a steeper learning curve than React.

Let me know which framework you prefer and why. Thanks for reading!

![Bye](https://media.giphy.com/media/3ohs7MNbaPYwc5mKOc/giphy.gif)

##### References

- [AngularJS Wiki](https://en.wikipedia.org/wiki/AngularJS)
- [React Wiki](https://en.wikipedia.org/wiki/React_(web_framework))
- [Youtube Video](https://www.youtube.com/watch?v=pVbcAafEzDc)