React TypeScript на Реальном Проекте. Section Home
Автор: Илья Стоянов - Верстка Сайта
Загружено: 2025-07-04
Просмотров: 20
Описание:
🔥 Реальный проект на React + TypeScript
👉 💡 Освой TypeScript на реальном проекте — React Fitness
🎬 Третья часть курса React Fitness: делаем секцию Home и адаптивное мобильное меню!
В этом видео мы продолжаем курс по созданию лендинга на React + TypeScript. На этом этапе мы реализуем полноценную секцию Home, улучшаем адаптивность и добавляем бургер-меню. Также пишем собственный хук useMediaQuery для отслеживания ширины экрана.
Этот урок подойдёт всем, кто хочет разобраться в адаптивной верстке, анимациях и архитектуре компонентов на практике.
🚀 Что вы узнаете в этом видео:
✅ Как создать секцию Home, состоящую из двух частей
• левая сторона — заголовки, кнопка, анимации
• правая сторона — изображение (с анимацией через Framer Motion)
✅ Как добавить секцию “Партнёры” с поочерёдным появлением логотипов
✅ Как создать мобильное меню: бургер-иконка + плавное появление
✅ Как реализовать хук useMediaQuery для отслеживания размеров экрана
✅ Как управлять отображением элементов в зависимости от ширины экрана
✅ Как добавить кастомные анимации через Framer Motion
📁 Технологии, которые мы используем:
React • TypeScript • TailwindCSS • Framer Motion • React Hook Form • Zod • Netlify.
🔗 Полезные ссылки:
GitHub-репозиторий: https://github.com/Ilya-Stoyanov/fitn...
Проект на Netlify: https://netlify.com
Мой Telegram-канал: https://t.me/ilya_stoyanov
📢 Рекомендую отличного преподавателя английского языка! 🇬🇧
Если вы хотите эффективно изучать английский, я советую учиться только у носителей языка! 💡
🌟 Lynette – профессиональный преподаватель, носитель английского языка, который поможет вам улучшить разговорные навыки, грамматику и произношение. Она даёт полезные советы и делает обучение лёгким и увлекательным.
🚀 Переходите по ссылке и записывайтесь на урок:
🔗 https://preply.com/en/tutor/2333502
🔗 WhatsApp: https://tinyurl.com/35thy78x
👍 Если тебе понравилось это видео — поставьте лайк, подпишитесь на канал и не забудьте нажать на колокольчик. В следующих частях мы продолжим делать полноценный адаптивный лендинг на React + TypeScript с формой, слайдером, анимациями и отправкой данных.
Повторяем попытку...

Доступные форматы для скачивания:
Скачать видео
-
Информация по загрузке: