Создание расписания фестиваля в React — практический проект для тех, кто уже знает основы React. Вы превратите подготовленный каталог фестиваля в личный план на день: сможете фильтровать события, сохранять выбор и объяснять, почему новый вариант конфликтует с уже выбранным событием.
Две пошаговые лабораторные работы начинаются с выбора двух обычных событий без пересечения, а затем вводят конфликтующий вариант. После этого вы свяжете производные данные расписания, проверку времени и локальное сохранение. Самостоятельное задание применяет те же механизмы к другому дню фестиваля с новыми событиями, сценами и ID. Каждая работа предоставляет собственный начальный проект и данные.
Чему вы научитесь
После завершения курса вы сможете:
- хранить ID выбранных событий как единственный источник состояния и получать из текущего каталога соответствующие записи, количество выбранных событий и общую длительность;
- фильтровать видимый каталог, не удаляя существующий выбор, и различать одноимённые события по стабильным ID;
- проверять полуоткрытые интервалы времени, разрешая точно соседние события, отклоняя реальные пересечения с указанием конкретного конфликтующего события и позволяя снова добавить удалённый выбор;
- сохранять только список ID в отдельном ключе курса в
localStorage, восстанавливать ещё действительные варианты и сообщать об отсутствующих старых ID без потери действительных; - восстанавливаться после некорректного JSON и использовать минимально необходимую логику
useEffect, чтобы возвращать выбор после обновления в том же браузере и origin, пока лабораторная среда доступна.
Для кого этот курс
Курс предназначен для тех, кто хочет согласовывать React-компоненты вокруг полезного личного расписания, а не вести отдельные несвязанные списки.
Предварительные требования: Элементарная работа с терминалом и путями, редактирование файлов, HTML/CSS, массивы, объекты и функции JavaScript; компоненты React, JSX, props, state с useState, события, условный рендеринг, map/filter, стабильные ключи списков и управляемые формы. До самостоятельного задания лабораторные работы объясняют производное состояние, выбор по ID, простое сравнение интервалов и необходимые понятия useEffect и localStorage. Это не первое знакомство с React.
Учебная среда: LabEx предоставляет готовый React-проект в браузере, зависимости, предварительный просмотр и синтетические данные фестиваля. Вы работаете над frontend. Подписи сайта и вывод во время выполнения остаются на английском; перевод учебных материалов не означает перевод интерфейса.
Часто задаваемые вопросы
Что считается конфликтом времени?
Все события используют местные минуты одной даты. Одно может начинаться точно в момент окончания другого; настоящее пересечение отклоняется. Курс не рассматривает расписания через полночь или часовые пояса и не рассчитывает время перехода между сценами.
Перенесётся ли моё расписание на другое устройство или в другую лабораторную работу?
Нет. Восстановление ограничено тем же браузером, тем же фактическим origin и ещё доступной лабораторной средой при разрешённом браузерном хранилище. Если политика браузера запрещает хранение, выбор остаётся доступным только в памяти на время этого посещения; восстановление после обновления не обещается. localStorage — не учётная запись, не резервная копия на сервере и не обещание постоянного хранения или переноса между VM.
Буду ли я создавать полноценный сервис бронирования фестиваля?
Нет. Вы создаёте личный план из подготовленных синтетических данных. Backend, учётные записи, карты, перетаскивание, оптимизация маршрута и динамическая синхронизация с сервером не входят в курс.
