React Footer за 20 минут: Переключение тем и анимация скролла вверх! скачать в хорошем качестве

React Footer за 20 минут: Переключение тем и анимация скролла вверх!

React Секция Footer с меню, социальными ссылками и переключением тем. 👉 React - Создаём секцию Footer с анимацией и темами 👉 Добавляем меню, социальные ссылки и кнопку скролла вверх 👉 Полное руководство (Часть 9) Сегодня мы продолжаем создание портфолио на React! В этом видео я покажу, как создать секцию Footer, разделённую на два блока: меню и ссылки на социальные сети. Мы реализуем динамическое переключение тем (тёмная и светлая), используя LocalStorage, а также создадим кнопку "Скролл вверх" с анимацией. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Что вас ждёт в этом видео: 🔧 Создание секции Footer с меню и соц. сетями: Организуем структуру с двумя разделами для удобства навигации. 📜 Использование useState и useEffect: Управляем состоянием для реализации переключения тем. 🎨 Переключение тем (светлая/тёмная): Добавим функциональность с сохранением через LocalStorage. 🛠️ Создание кнопки "Скролл вверх": Реализуем анимацию и плавный возврат к началу страницы. 🚀 Оптимизация структуры кода: Разделим проект на небольшие компоненты для простоты поддержки. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 👉 GitHub Репозиторий проекта: https://github.com/Ilya-Stoyanov/reac... (В папке src/assets/start находятся исходная вёрстка и стили — скачивайте и используйте для практики.) 🚀 Курс по вёрстке: https://frontend-courses.com/ (Изучайте основы вёрстки и улучшайте свои навыки для создания современных сайтов.) 💈 Присоединяйтесь к моему Telegram-каналу: https://t.me/ilya_stoyanov *(Здесь я делюсь новыми уроками, материалами и отвечаю на ваши вопросы!) * 🧩 React Icons - коллекция иконок для React: https://react-icons.github.io/react-i... (Добавляйте красивые иконки в свои проекты легко и быстро.) ⏱️ Таймкоды: 00:08 — Обзор секции Footer: структура и цели компонента 00:24 — Создание компонента Footer и его файловой структуры 00:50 — Создание массива данных FooterData.js для ссылок и соцсетей 03:40 — Перенос HTML-структуры и базовой вёрстки в компонент Footer 06:05 — Создание компонента FooterLinkGroup для управления ссылками 16:40 — Работа с состоянием isSocialLink для управления отображением соцсетей 18:25 — Реализация кнопки "Вверх" для плавного скролла страницы 24:55 — Добавление переключения тем (светлая/тёмная) с использованием useState и LocalStorage 32:40 — Добавление Sticky Header для фиксации шапки при скролле. 👍 Спасибо, что досмотрели до конца! Если видео было полезным, ставьте лайк и подписывайтесь, чтобы не пропустить ещё больше полезных материалов по созданию и вёрстке сайтов! 💜