Crear un horario de festival con React es un proyecto práctico para quienes ya conocen los fundamentos de React. Convertirás un catálogo de festival preparado en un plan personal de un día: filtrarás eventos, conservarás tus elecciones y explicarás por qué una nueva propuesta entra en conflicto con un evento ya seleccionado.
Dos laboratorios guiados comienzan con dos elecciones normales que no se solapan antes de introducir una opción conflictiva. Después conectarás los datos derivados del horario, las comprobaciones de tiempo y la persistencia local. Un desafío independiente transfiere los mismos mecanismos a otro día de festival con eventos, escenarios e IDs diferentes. Cada laboratorio proporciona su propio proyecto y datos iniciales.
Lo que aprenderás
Al completar el curso, podrás:
- mantener los IDs de los eventos seleccionados como única fuente de verdad y derivar del catálogo actual sus registros, la cantidad de selecciones y la duración total;
- filtrar el catálogo visible sin borrar elecciones existentes y distinguir eventos con el mismo título mediante IDs estables;
- comprobar intervalos de tiempo semiabiertos para permitir eventos exactamente contiguos, rechazar solapamientos reales indicando el evento concreto y volver a añadir una elección después de quitarla;
- guardar solo una lista de IDs bajo una clave de
localStorageespecífica del curso, restaurar las elecciones aún válidas y avisar de IDs antiguos ausentes sin perder los válidos; - recuperarte de JSON mal formado y usar la lógica mínima necesaria de
useEffectpara recordar elecciones al recargar en el mismo navegador y origen mientras el laboratorio siga disponible.
A quién va dirigido este curso
Este curso es para quienes quieren coordinar componentes React alrededor de un horario personal útil, en lugar de mantener listas sin relación entre sí.
Requisitos previos: Uso básico de la terminal y las rutas, edición de archivos, HTML/CSS y arrays, objetos y funciones de JavaScript; componentes React, JSX, props, state con useState, eventos, renderizado condicional, map/filter, claves estables de listas y formularios controlados. Los laboratorios guiados enseñan estado derivado, selección por ID, comparaciones sencillas de intervalos y los conceptos necesarios de useEffect y localStorage antes del desafío. No es una primera introducción a React.
Entorno de aprendizaje: LabEx proporciona un proyecto React preparado en el navegador, sus dependencias, una vista previa y datos sintéticos de festival. Trabajas en el frontend. Las etiquetas del sitio y la salida de ejecución permanecen en inglés; las lecciones traducidas no implican una interfaz traducida.
Preguntas frecuentes
¿Qué se considera un conflicto de tiempo?
Todos los eventos usan minutos locales de la misma fecha. Uno puede comenzar exactamente cuando termina otro; un solapamiento real se rechaza. El curso no trata horarios que cruzan la medianoche o zonas horarias ni calcula desplazamientos entre escenarios.
¿Mi horario se trasladará a otro dispositivo o laboratorio?
No. La recuperación se limita al mismo navegador, al mismo origen real y al entorno de laboratorio que siga disponible, siempre que el navegador permita el almacenamiento. Si su política lo deniega, las elecciones solo pueden usarse en memoria durante esa visita; no se promete recuperarlas al recargar. localStorage no es una cuenta, una copia de seguridad del servidor ni una promesa de almacenamiento permanente o entre VMs.
¿Crearé un servicio completo de reservas para festivales?
No. Crearás un plan personal a partir de datos sintéticos preparados. Los servicios backend, las cuentas, los mapas, arrastrar y soltar, la optimización del itinerario y la sincronización dinámica con el servidor quedan fuera del curso.
