Code Comparison: React vs Angular

In this blog, I would like to compare and contrast two of the most popular ways to develop UI using JavaScript out there: React and Angular. I started web development using React three years ago and it was my go-to framework for building web apps. However, I had to learn and build apps using Angular for work. While there are a lot of articles out there for choosing a suitable one of these two for building your applications, I would like to compare them syntactically, which would be helpful for developers switching to Angular after learning React and vice versa. We will discuss the following key paradigms in this blog.

• Writing markup
• Dynamic markups
• Sharing data between parent and child
• Lifecycle management
• Event handling

Writing markup

One of the key differences between React and Angular is the way HTML markup is written. In React, markup and logic are coupled in units called Components. React uses JSX, an extension to JavaScript, which can contain HTML markup and the associated rendering logic together.

export default function HelloWorld(){
    let name = "Arthur";

    return(
        <h1 className="heading">Welcome, {name}</h1>
    )
}
//Home.jsx

In Angular, markup and logic are written in separate files and there is a clearly defined separation of concern. Angular uses Typescript instead of JavaScript, where Typescript is a superset of JavaScript with optional static typing.

export class HelloWorldComponent {
    name:string="Arthur";
    constructor() { }
}
//home.component.ts

<h1 class="heading">Welcome, {{name}}</h1>
<!--home.component.html-->

Dynamic markups

The ability to render markups conditionally to show desired elements in the HTML layout and hide the remaining based on criteria defined in JavaScript code is necessary to create modern web applications. Markups must also be created dynamically in a loop to keep the html code dry. There may be many different ways to generate a desired markup in any given framework, and I have explored only one such way in the example below.

In React, for conditional rendering, the desired markup may be stored as jsx in a variable using the ternary operator. A function can also be written to return the desired jsx using the commonly used If…else condition. For looping over an array and generating markup, map function is commonly used.

export default function Home(){
    let name = "Arthur";
    let isSignedIn=true;
    let products=['Macbook Air','Ipad Air','Iphone SE'];
    const homeJSX=isSignedIn?(
        <div>
            <h1>Welcome, {name}</h1>
            <h2>Products</h2>
            <ul>
                {products.map((product)=><li key={product}>{product}</li>)}
            </ul>
        </div>
    ):(
        <h1>You are not signed in</h1>
    );

    return(
        <div>
            {homeJSX}
        </div>
    );
}
//Home.jsx

Angular takes a different approach when it comes to dynamic rendering, and it has built-in structural directives such as NgIf and NgFor. In Angular, the markup generated by React can be generated as follows.

export class HomeComponent {
    name:string="Arthur";
    isSignedIn:boolean=true;
    products:Array<string>=['Macbook Air','Ipad Air','Iphone SE']
  constructor() { }
}
//home.component.ts

<div>
    <div *ngIf="isSignedIn; else elseBlock">
        <h1>Welcome to the application</h1>
        <h2>Products</h2>
        <ul>
            <li *ngFor="let product of products">{{product}}</li>
        </ul>
    </div>
    <ng-template #elseBlock><h1>You are not signed in</h1></ng-template>
</div>
<!--home.component.html-->

Sharing data between parent and child

In React and Angular, parents and children can share data with each other using props. While the data flow from parent to child is straightforward by passing props to the child component, data flow from child to parent is achieved by passing a parent function that stores the data as a prop to the child. One such implementation in React will follow.

export default function Home(){
    const [count, setCount]=useState(0);

    return(
        <Child count={count} setCount={setCount}/>
    );
}
//Home.jsx

export default function Child({count,setCount}){

    return(
        <div>
            <input type="number" value={count} onChange={(e)=>setCount(e.target.value)} />
        </div>
    );
}
//Child.jsx

Angular provides input and output decorators that enable a child component to interact with its parent. The above data flow in React can be implemented in Angular as follows.

export class HomeComponent {
    count!:number;
  constructor() { }

    setCount(newCount:number){
        this.count=newCount;
    }
}
//home.component.ts

<div>
    <app-child [count]="count" (setCount)="setCount($event)"></app-child>
</div>
<!--home.component.html-->

export class ChildComponent {
    @Input() count!:number;
    @Output() setCount= new EventEmitter<number>();
  constructor() { }

}
//child.component.ts

<div>
    <input type="number" [value]="count" (change)="this.setCount.emit($event.target.value)" />
</div>
<!--child.component.html-->

Lifecycle management

Lifecycle management gives developers control over code to be executed during the creation, updation and deletion of a component. React uses several hooks to handle the lifecycle with the useEffect hook being the preferred way to handle common scenarios.

export default function Home({count}){

    useEffect(()=>{
        console.log("Component created");

        return () => {
      console.log('Component deleted');
    };
    },[]);

    useEffect(()=>{
        console.log("Count changed");
    },[count]);

}
//Home.jsx

Angular provides different hooks for lifecycle management. ngOnInit, ngOnChanges and ngOnDestroy are the most commonly used hooks. The above lifecycle behaviour in React can be implemented in Angular as follows.

export class HomeComponent {
    @Input() count!:number;

  constructor() { }

    ngOnInit(){
        console.log("Component created");
    }

    ngOnChanges(change:SimpleChanges){
        if(change["count"]){
            console.log("Count changed");
        }
    }

    ngOnDestroy(){
        console.log("Component deleted");
    }

}
//home.component.ts

Event handling

User interaction is critical for any web application and the associated events such as click, keypress has to be handled by the application. React has its synthetic events which are wrapper functions over native events implemented by browsers to provide cross-browser uniformity. One such event-handling scenario is discussed here.

export default function Home(){
    handleKeyDown=(event)=>{
        console.log("You pressed: ",event.key);
    }

    return(
        <div>
            <input onKeyDown={handleKeyDown}/>
        </div>
    )
}
//Home.jsx

In Angular, we have to create event bindings as follows to listen and respond to events.

export class HomeComponent {
  constructor() { }

    handleKeyDown(event){
        console.log('You pressed: ',event.key);
    }
}
//home.component.ts

<div>
    <input (keydown)='handleKeyDown($event)'/>
</div>
<!--home.component.html-->

We did a code comparison of the most common use cases of React and Angular. Both are amazing library/framework for creating a frontend application. There are other differences between them part from the ones mentioned here, which we can discuss in a different blog. Thank you for reading. Cheers!