Dex разработал приложение для баскетольной лиги BIG3, куда приходят доигрывать легенды баскетбола. Давайте попробуем переплюнуть успех этого приложения сделав сервис для просмотра статистики игр NBA.
На протяжении всех видеоуроков и вебинаров мы будем поэтапно строить приложение, используя все техники разработки на фронтенде, которыми пользуются наши разработчики. Ссылка на дизайн
Первая неделя:
- Сделать индикатор выбранной игры. Взглянув на индикаторы, пользователь должен понять, сколько всего игр и на какой позиции находится выбранная игра.
Второая неделя:
- Сделать адаптивную вёрстку для планшетов и смартфонов. Придётся почитать, как использовать медиа выражения в CSS и про позиционирование элементов, потому что индикаторы должны быть позиционированными;
- Сделать автоматическое перелистование. Здесь вам нужно будет найти в JS какой-то метод, который позволит с какой-то переодичностью вызывать функцию;
- Сделать карусель перетаскиваемой. На маленьких устройствах, да даже на десктопе, не всегда удобно листать нажимая на кнопочки. Поэтому пользователю надо дать возможность листать с помощью пальца.
Четвёртая неделя:
- Вынести меню, которое используется для навигации по сайту ("Новости", "Команды", "Игроки") в общий компонент;
- Добавить компонент со списком новостей. Для самих новостей создайте тестовые данные, как это было сделано тут;
- Добавить React Router, так, чтобы боковое меню оставалось всегда, а остальной контент рендерился в зависимости от секции.
Пятая неделя:
- Отличие функционального компонента от классового в том, что функциональный запоминает состояние. А как можно воспроизвести поведение классового компонента в функциональном и наоборот? клик;
- В этом примере состояние изменится всего лишь один раз, а нам надо каждую секунду. На вебинаре я показал, как это можно исправить, указав в зависимости эффекта локальное состояние. Но этот способ не единственный. Напишите, как ещё это можно исправить;
- Я написал маленькое приложение. Здесь есть список игроков и форма для добавления новых в список. Проблема приложения в том, что оно жууутко медленое. Ваша задача оптимизировать его. Задание может быть сложным, поэтому по всем вопросам обращайтесь ко мне в телеграм.