Lo que vas a construir

Una aplicación de tareas completa con React. Podrás agregar nuevas tareas, marcarlas como completadas con un click, eliminarlas, y filtrarlas por estado (todas, activas, completadas). Las tareas se guardarán en localStorage para que persistan aunque cierres el navegador. Es el proyecto perfecto para aprender los fundamentos de React: componentes, estado, y eventos.

Paso 1: Pídele a una IA el proyecto completo

Necesito una Todo App con React que:
- Use Vite como bundler
- Tenga TypeScript
- Use Tailwind CSS para estilos
- Guarde las tareas en localStorage
- Tenga filtros (todas/activas/completadas)

Dame los comandos para crear el proyecto y el código de cada archivo.

Paso 2: Sigue las instrucciones

La IA te dará algo como:

npm create vite@latest todo-app -- --template react-ts
cd todo-app
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Luego te dará el código para:

src/App.tsx - Componente principal
src/components/TodoItem.tsx - Cada tarea
tailwind.config.js - Configuración

Paso 3: Ejecuta

npm run dev

Abre http://localhost:5173

Conceptos clave de React

Concepto	Qué es
`useState`	Estado local del componente
`props`	Datos que pasan de padre a hijo
`map()`	Renderizar listas
`key`	Identificador único para listas

Ejemplo de código

const [todos, setTodos] = useState<Todo[]>([])

const addTodo = (text: string) => {
  setTodos([...todos, { id: Date.now(), text, completed: false }])
}

const toggleTodo = (id: number) => {
  setTodos(todos.map(todo =>
    todo.id === id ? { ...todo, completed: !todo.completed } : todo
  ))
}

Si algo falló

Error	Causa	Solución
`Module not found`	Falta dependencia	`npm install`
Tailwind no funciona	Config incorrecta	Verifica `tailwind.config.js`
No guarda en localStorage	Key incorrecta	Verifica `localStorage.setItem`

Próximo paso

→ API REST con Express — Tu primer backend

Todo App con React

📋 Prerequisitos sugeridos