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
Top comments (0)