build a Simple Todo with ReactJs Angular VueJs

Introduction

todoApps are a classic project for learning new frameworks and building one with Reactjs & Angular & Vue can provide valuable insights into the strengths and differences of each. in this Post we will walk through the process of creating a basic todo app with each of these popular frameworks and we'll delve into the differences between these popular frameworks and explore their strengths and use cases.

Note
Before you start make sure u have Nodejs and npm installed

1. Creating the Project:

React :

npx create-react-app todo-react
cd todo-react

Angular :

npm install -g @angular/cli
ng new todo-angular
cd todo-angular

Vue :

npm install -g @vue/cli
vue create todo-vue
cd todo-vue

2. Implementing the Todo List:

React :

import React, { useState } from 'react';
function App() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

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

  const removeTodo = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };
  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo} <button onClick={() => removeTodo(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}
export default App;

Angular :

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  todos: string[] = [];
  inputValue: string = '';

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

  removeTodo(index: number) {
    this.todos.splice(index, 1);
  }
}

<input type="text" [(ngModel)]="inputValue">
<button (click)="addTodo()">Add</button>
<ul>
  <li *ngFor="let todo of todos; let i = index">
    {{ todo }} <button (click)="removeTodo(i)">Remove</button>
  </li>
</ul>

Vue :

<template>
  <div>
    <input type="text" v-model="inputValue">
    <button @click="addTodo">Add</button>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }} <button @click="removeTodo(index)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [],
      inputValue: ''
    };
  },
  methods: {
    addTodo() {
      this.todos.push(this.inputValue);
      this.inputValue = '';
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    }
  }
}
</script>

3. Running the App :

React :

npm start

Angular :

npm start || ng serve

Vue :

npm run serve

congratulations you have successfully built a simple todo app using React & Angular & Vue