React vs Vue: In-Depth Comparison Guide for 2024

import { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

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

  return (
    <div>
      <h2>Todo List</h2>
      <input 
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map((todo, i) => (
          <li key={i}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

<template>
  <div>
    <h2>Todo List</h2>
    <input v-model="input" />
    <button @click="addTodo">Add</button>
    <ul>
      <li v-for="(todo, i) in todos" :key="i">
        {{ todo }}
      </li>
    </ul>
  </div>
</template>

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