Code Comparison: React vs Angular

Total
0
Shares

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
Enter fullscreen mode

Exit fullscreen mode

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
Enter fullscreen mode

Exit fullscreen mode

class="heading">Welcome, {{name}}

Enter fullscreen mode

Exit fullscreen mode



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>Productsh2>
            <ul>
                {products.map((product)=><li key={product}>{product}li>)}
            ul>
        div>
    ):(
        <h1>You are not signed inh1>
    );

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

Exit fullscreen mode

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
Enter fullscreen mode

Exit fullscreen mode

*ngIf="isSignedIn; else elseBlock">

Welcome to the application

Products

    *ngFor="let product of products">{{product}}
#elseBlock>

You are not signed in

Enter fullscreen mode

Exit fullscreen mode



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
Enter fullscreen mode

Exit fullscreen mode

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

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

Exit fullscreen mode

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
Enter fullscreen mode

Exit fullscreen mode

[count]="count" (setCount)="setCount($event)">
Enter fullscreen mode

Exit fullscreen mode

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

}
//child.component.ts
Enter fullscreen mode

Exit fullscreen mode

type="number" [value]="count" (change)="this.setCount.emit($event.target.value)" />
Enter fullscreen mode

Exit fullscreen mode



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
Enter fullscreen mode

Exit fullscreen mode

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
Enter fullscreen mode

Exit fullscreen mode



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
Enter fullscreen mode

Exit fullscreen mode

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
Enter fullscreen mode

Exit fullscreen mode

(keydown)='handleKeyDown($event)'/>
Enter fullscreen mode

Exit fullscreen mode

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!

Total
0
Shares

JS – Map & Symbol object

Here is my initial (failed) LeetCode answer for 2630. Memoize II 🙈🙈🙈 function memoize(fn) { let previousParameters =…

You May Also Like