Angular is a typescript framework and React is a library, but we all know that they are quite popular(edit suggested by Aftab Alam). They both have a lot of similarities and differences, but what happens when we learn one of them and then switch to the other? This article will explore the challenges and similarities I faced while learning Angular after learning React, along with code snippets to help illustrate the differences.

I started learning React in Jan 2022 and did several pet projects which you can check on my GitHub. But when I joined my project in Accenture there was the requirement of learning Angular so I did and here is what I learned.

Challenges

Component architecture

The biggest challenge I faced while switching from React to Angular was understanding the component architecture. In React, components are just functions that return JSX, while in Angular, components are a combination of a class, HTML template, and styles.

//React component
import React from "react";

function HelloWorld() {
  return <h1>Hello World</h1>;
}

export default HelloWorld;

//Angular component
import { Component } from "@angular/core";

@Component({
  selector: "app-hello-world",
  template: "<h1>Hello World</h1>",
})
export class HelloWorldComponent { }

Typescript

Angular is written in Typescript, while React uses JavaScript. This can be a challenge for those who are used to JavaScript and are not familiar with Typescript.

//React component
import React from "react";

function HelloWorld(props) {
  return <h1>Hello {props.name}</h1>;
}

export default HelloWorld;

//Angular component
import { Component } from "@angular/core";

@Component({
  selector: "app-hello-world",
  template: "<h1>Hello {{ name }}</h1>",
})
export class HelloWorldComponent {
  name: string = "World";
}

Modules and Services

In Angular, services, and modules are used to manage the state-of-the-application. In React, state management is usually handled by using state and props. This can be a bit confusing at first, but once we understand it, it becomes much easier to manage the state of the application.

//React component
import React, { useState } from "react";

function HelloWorld() {
  const [name, setName] = useState("World");

  return (
    <div>
      <h1>Hello {name}</h1>
      <input type="text" onChange={(e) => setName(e.target.value)} />
    </div>
  );
}

export default HelloWorld;

//Angular component
import { Component } from "@angular/core";

@Component({
  selector: "app-hello-world",
  template: `
    <div>
      <h1>Hello {{ name }}</h1>
      <input type="text" (input)="updateName($event)" />
    </div>
  `,
})
export class HelloWorldComponent {
  name: string = "World";

  updateName(event) {
    this.name = event.target.value;
  }
}

Similarities

Learning a new technology can be a challenging experience, especially when switching from one framework to another. However, if we have already learned one framework, it can make the process a lot easier. This portion will explore the similarities I faced while learning Angular after learning React.

Components

One of the biggest similarities between React and Angular is that they both use components to build the user interface. A component is a piece of code that is responsible for rendering a specific part of the user interface. Components are reusable and can be used to build complex user interfaces by combining smaller components.

//React component
import React from "react";

function HelloWorld() {
  return <h1>Hello World</h1>;
}

export default HelloWorld;

//Angular component
import { Component } from "@angular/core";

@Component({
  selector: "app-hello-world",
  template: "<h1>Hello World</h1>",
})
export class HelloWorldComponent { }

Virtual DOM

Both React and Angular use a virtual DOM (Document Object Model) to update the user interface. The virtual DOM is a lightweight representation of the actual DOM and is used to make updates to the user interface more efficient. This means that when the state of the application changes, the virtual DOM will be updated, and then the changes will be reflected in the actual DOM.

//React component
import React, { useState } from "react";

function HelloWorld() {
  const [name, setName] = useState("World");

  return (
    <div>
      <h1>Hello {name}</h1>
      <input type="text" onChange={(e) => setName(e.target.value)} />
    </div>
  );
}

export default HelloWorld;

//Angular component
import { Component } from "@angular/core";

@Component({
  selector: "app-hello-world",
  template: `
    <div>
      <h1>Hello {{ name }}</h1>
      <input type="text" (input)="updateName($event)" />
    </div>
  `,
})
export class HelloWorldComponent {
  name: string = "World";

  updateName(event) {
    this.name = event.target.value;
  }
}

Props and State

These are two important concepts in front-end development, and both React and Angular use these concepts to manage the state of the application. If we have already learned React, the concept of Props and State in Angular will seem familiar to us. Let's explore the similarities between React's Props and State and Angular's equivalent concepts.

Props

Props are a way to pass data from a parent component to a child component in React. They are read-only and cannot be modified by the child component. In Angular, inputs are used in a similar way to pass data from a parent component to a child component.

//React component
import React from "react";

function HelloWorld(props) {
  return <h1>Hello {props.name}</h1>;
}

export default HelloWorld;

//Angular component
import { Component, Input } from "@angular/core";

@Component({
  selector: "app-hello-world",
  template: "<h1>Hello {{ name }}</h1>",
})
export class HelloWorldComponent {
  @Input() name: string;
}

State

The state is a way to manage the state of the application in React. It is mutable and can be modified by the component it is defined in. In Angular, the state of the application is managed using services and modules, but the concept is still similar.

//React component
import React, { useState } from "react";

function HelloWorld() {
  const [name, setName] = useState("World");

  return (
    <div>
      <h1>Hello {name}</h1>
      <input type="text" onChange={(e) => setName(e.target.value)} />
    </div>
  );
}

export default HelloWorld;

//Angular component
import { Component } from "@angular/core";

@Component({
  selector: "app-hello-world",
  template: `
    <div>
      <h1>Hello {{ name }}</h1>
      <input type="text" (input)="updateName($event)" />
    </div>
  `,
})
export class HelloWorldComponent {
  name: string = "World";

  updateName(event) {
    this.name = event.target.value;
  }
}

Conclusion

Developers who are already familiar with React will find Angular's component-based architecture, template syntax, and reactive programming concepts to be easy to understand. Angular's extensive set of features, such as services, modules, and its robust performance, can also provide a better development experience compared to React.

However, it is important to note that Angular and React have different approaches to solving similar problems, and it can take time to learn Angular's syntax and concepts. As with any new technology, it is important to spend time exploring the documentation and code samples to get a better understanding of Angular's capabilities.

In conclusion, learning Angular after React can be a valuable experience for developers who want to expand their skill set and gain experience with a full-featured front-end framework. With a strong understanding of the basics of web development and React, learning Angular can be a smooth and enjoyable process.

End Note

For more such blogs, do follow me on HashNode. You can also consider following my other socials, GitHub, LinkedIn, and Twitter.

Consider reading my article on Git vs GitHub here.