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 :
cd todo-react
Angular :
ng new todo-angular
cd todo-angular
Vue :
vue create todo-vue
cd todo-vue
2. Implementing the Todo List:
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 :
@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);
}
}
<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 :
<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 :
Angular :
Vue :
congratulations you have successfully built a simple todo app using React & Angular & Vue
![[Lab] AWS Lambda LLRT vs Node.js](https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg75wgc8zuea9dkb92wb0.png)
