Секреты секции Contact в React. Массив объектов и форма за 15 минут!

React: Секция Contact с массивами, формой и компонентами
👉 React - Настройка секции Contact
👉 Создаём массив объектов и подключаем форму
👉 Полное руководство (Часть 8)

Сегодня мы продолжаем работу над портфолио на React! В этом уроке я покажу, как создать секцию Contact, используя массив объектов для отображения данных (телефон, почта, локация). Мы разделим структуру на отдельные файлы для каждого блока, подключим стили и создадим форму для отправки данных.

Кроме того, мы:
✅ Исправим баг с прокруткой на мобильных устройствах — скролл отключится при открытии мобильного меню.
✅ Реализуем плавное появление всплывающего модального окна (popup) в секции Portfolio, чтобы убрать резкие переходы.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Что вас ждёт в этом видео:

🔧 Создание массива объектов для секции Contact: Организуем данные (телефон, почта, локация) в удобной структуре.

📜 Работа с иконками и данными: Выводим информацию на экран через компоненты.

🛠️ Создание формы в React: Реализуем форму для отправки данных и подключим её к проекту.
🎨 Стилизация секции Contact: Настроим дизайн для всех блоков и формы.

🚀 Оптимизация структуры кода: Разделим проект на небольшие компоненты для удобства разработки.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

👉 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...
(Добавляйте красивые иконки в свои проекты легко и быстро.)

🛠️ React Remove Scroll - плагин для управления прокруткой:
https://www.npmjs.com/package/react-r...
(Отключайте скролл на мобильных устройствах и улучшайте UX ваших проектов.)

⏱️ Таймкоды:

00:08 — Обзор секции Contact
00:25 — Создаём папку компонента Contact и необходимые файлы
01:01 — Создаём файл ContactData для массива объектов
02:25 — Переносим HTML-структуру секции Contact
03:40 — Разделяем данные на компоненты ContactRight и ContactLeft
05:30 — Импортируем массив данных из ContactData
07:00 — Добавляем стили для секции Contact
09:00 — Выносим тег form в отдельный компонент ContactForm
13:40 — Исправляем прокрутку на мобильных экранах с помощью react-remove-scroll
17:25 — Добавляем плавное всплытие модального окна в секции Portfolio


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