Codelab: Build a Todo App
Put state, lists, keys, and events together to build a working todo list — add, display, and delete tasks, all in React.
The todo app: the 'hello world' of state
A todo list is the classic project for learning a UI framework, because it exercises every core idea at once: an array in state, rendering a list with keys, adding items, and removing items. If you can build this, you can build a cart, a comment thread, or a playlist.
You'll manage two pieces of state: the list of todos (an array) and the draft text in the input. Adding and removing items means making a new array — never editing the old one in place.
Don't push into the existing array or change an item directly — React compares the old and new array by identity to decide whether to re-render. Instead, build a new array: [...todos, newItem] to add, and todos.filter(...) to remove. The spread ... and filter both return fresh arrays.