You must have heard about ReactJS and Angular or you must have been using these as well. In this article I will explain about two popular tools used to create interactive and dynamic websites.

ReactJS – a wonderful framework made by Meta (Facebook) which is basically used for building user interfaces. It’s not restricted to user inerface, , its also helpful for making websites where the content changes without needing to reload the whole page. Using reusable parts called components in order to build the interface, making it easier to create complex designs.

Angular – If you looking to build big,, featured package website than Angular is the one you should use. It is a framework created by Google Apart from the other frameworks, It follows MVC (Model-View-Controller) approach, which helps keep the code organized. It also comes with many built-in tools for things like managing data, handling navigation, and creating forms, making it suitable for building large and complex websites.

Now it completely depends on and the project and its complexity, when we are taking about which one to choose React or Angular?. In simple terms if i say then,

React is good for smaller projects or when you want more flexibility in how you build your website. Angular is better for big projects that need lots of features and organization in the code.

To makes things easier for you let us see the difference. –

Feature	ReactJS	Angular
Architecture	Component-based	MVC (Model-View-Controller)
Language	JavaScript	TypeScript
Learning Curve	Relatively easy	Steeper learning curve
Performance	Lightweight and fast	Slower performance in large applications
Community	Large and active	Large and active
Flexibility	More flexibility in choosing libraries	More opinionated, but provides built-in tools
Popularity	Very popular, especially for single-page apps

When to Use ReactJS:

• you are building a single-page application (SPA) or a mobile app using React Native.
• you prefer a more flexible and lightweight library that allows you to choose your own tools and libraries.
• you are familiar with JavaScript and want to get started quickly with web development.

When to Use Angular:

• you are building a large-scale, enterprise-level application with complex requirements.
• you prefer a comprehensive framework that provides built-in tools and features for common tasks.
• you are comfortable with TypeScript and want to take advantage of its static typing and other features.

Examples of Real-Life Use Cases:

• ReactJS: Facebook, Instagram, Airbnb, Netflix
• Angular: Google, Microsoft, PayPal, Forbes

ReactJS & Angular Examples –

Example 1 – I ll start with very simple one – Hello World !

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return <h1>Hello, World!</h1>;
};

ReactDOM.render(<App />, document.getElementById('root'));

The above code creates a simple React component (App) that renders a heading element with the text “Hello, World!” and uses ReactDOM.render to render it to the DOM.

What is DOM?

Example 2 – Create a counter, such that it increments when a button is clicked.

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

ReactDOM.render(<Counter />, document.getElementById('root'));

above code uses the useState hook to create a counter that increments its value when a button is clicked.

Example 3 – Create a to do list with ReactJS

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const TodoList = () => {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const addTodo = () => {
    setTodos([...todos, inputValue]);
    setInputValue('');
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={addTodo}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
};

ReactDOM.render(<TodoList />, document.getElementById('root'));

above code creates a simple todo list where you can add new todos.

Example 4 – Conditional Rendering

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      {isLoggedIn ? (
        <h1>Welcome, User!</h1>
      ) : (
        <button onClick={() => setIsLoggedIn(true)}>Log In</button>
      )}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Angular Examples:

Example 1: Hello World – The simplest

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<h1>Hello, World!</h1>',
})
export class AppComponent {}

Here Angular component template displays a heading element with the text “Hello, World!”.

Example 2 – Counter

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>Counter: {{ count }}</h1>
    <button (click)="increment()">Increment</button>
  `,
})
export class AppComponent {
  count = 0;

  increment() {
    this.count++;
  }
}

Angular component template creates a counter that increments its value when a button is clicked.

Example 3 – To Do List

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <input type="text" [(ngModel)]="inputValue" />
    <button (click)="addTodo()">Add Todo</button>
    <ul>
      <li *ngFor="let todo of todos">{{ todo }}</li>
    </ul>
  `,
})
export class AppComponent {
  todos: string[] = [];
  inputValue = '';

  addTodo() {
    this.todos.push(this.inputValue);
    this.inputValue = '';
  }
}

Example 4 – Conditional Rendering

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="isLoggedIn; else login">
      <h1>Welcome, User!</h1>
    </div>
    <ng-template #login>
      <button (click)="loginUser()">Log In</button>
    </ng-template>
  `,
})
export class AppComponent {
  isLoggedIn = false;

  loginUser() {
    this.isLoggedIn = true;
  }
}

In Conclusion,

Powerful frameworks, ReactJS and Angular for building web applications, each with its own strengths and use cases. ReactJS is known for its flexibility and simplicity, making it a popular choice for smaller projects and developers who prefer a more lightweight approach. On the other hand, Angular is a comprehensive framework that provides built-in features and tools for building large-scale, enterprise-level applications. The choice between ReactJS and Angular depends on your project requirements, expertise, and preference for a library vs. a framework.