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 для фиксации шапки при скролле.

👍 Спасибо, что досмотрели до конца! Если видео было полезным, ставьте лайк и подписывайтесь, чтобы не пропустить ещё больше полезных материалов по созданию и вёрстке сайтов! 💜