Ejercicios de React

Repositorio de ejercicios progresivos para alumnos de la facultad. A lo largo de la serie se construye una aplicación de listado de tareas, incorporando conceptos fundamentales de React en cada paso.

Requisitos previos

• Node.js 18 o superior
• npm (incluido con Node.js)

Instalación

Cloná el repositorio e instalá las dependencias:

git clone git@github.com:damianciancio/ejercicios-react.git
cd react-exercises
npm install

Ejecución en desarrollo

npm run dev

Vite va a levantar el servidor de desarrollo. Abrí en el navegador la URL que aparece en la terminal (por lo general http://localhost:5173).

Desde la página de inicio (/) podés acceder a cada ejercicio.

Cómo resolver los ejercicios

1. Empezá por el Ejercicio 1 (o navegá a /exercises/1).
2. Leé las instrucciones en el panel izquierdo y completá el desafío editando los archivos dentro de src/exercise_XXX/. No modifiques ExerciseN.tsx: ese archivo solo contiene el layout y las instrucciones. Tu código va en TasksApp.tsx y en los demás componentes de la carpeta (Task.tsx, AddTask.tsx, etc.).
3. El panel derecho muestra la aplicación en su estado actual; ahí vas a ver el resultado de tus cambios en tiempo real gracias al hot reload de Vite.
4. Cuando termines, usá el botón Ir al ejercicio N → para pasar al siguiente.

Importante: el enunciado de cada ejercicio es la solución del anterior. Si abrís el Ejercicio 3, a la izquierda vas a ver explicado lo que se hizo en el Ejercicio 2 y el nuevo desafío que tenés que resolver.

Estructura del proyecto

src/
├── exercise_001/
│   ├── Exercise1.tsx   # Layout e instrucciones (no modificar)
│   ├── TasksApp.tsx    # Acá va tu código
│   └── ...
├── exercise_002/
│   ├── Exercise2.tsx
│   ├── TasksApp.tsx
│   └── ...
├── ...
├── components/         # Componentes compartidos (layout)
├── pages/              # Página de inicio
└── main.tsx            # Rutas de la aplicación

Cada carpeta exercise_XXX contiene el código del ejercicio correspondiente. Modificá TasksApp.tsx y los componentes auxiliares de esa carpeta; no toques ExerciseN.tsx.

Scripts disponibles

Comando	Descripción
npm run dev	Servidor de desarrollo con hot reload
npm run build	Compila el proyecto para producción
npm run preview	Previsualiza el build de producción
npm run lint	Ejecuta ESLint sobre el código

Tecnologías

• React 19
• TypeScript
• Vite
• React Router