React vs Vue: Building the Same ToDo App – Key Differences Explained

The author creates a standard To‑Do app using both React (via create‑react‑app ) and Vue (via vue‑cli ) to explore how the two frameworks differ in practice.

Both projects share almost identical CSS and overall UI, but their file structures vary: the React app contains three CSS files attached to components, while the Vue app embeds styles directly within component files.

A core distinction lies in data mutation: Vue uses a mutable data object accessed via this.name , whereas React stores data in an immutable state object that must be updated with this.setState({ name: 'John' }) . This enables React to trigger lifecycle hooks such as componentWillUpdate and componentDidUpdate on state changes.

To add a new item, React’s handleInput updates the todo state, and createNewToDoItem uses this.setState with the spread operator to append the item to the list . Vue achieves the same via v‑model binding to todo and pushes the value into the list array, then clears todo .

Deletion follows a similar pattern: React passes a deleteItem function as a prop to ToDoItem , which calls this.props.deleteItem on click. Vue emits a custom delete event from the child component, which the parent listens for with @delete="onDeleteItem" and filters the list array.

Event listeners are straightforward in React (e.g., onClick , onKeyPress ) while Vue uses the shorthand @click (alias for v‑on:click ) and can chain modifiers like .once . Both frameworks also demonstrate prop passing: React uses JSX attributes ( <ToDoItem item={item} /> ) and accesses them via this.props ; Vue declares props: ['todo'] and references them directly.

Finally, the article concludes that while many small differences exist, the walkthrough provides a solid foundation for understanding how React and Vue handle state, events, and component communication.