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

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