React - Как создать модальное окно и Не Облажаться
👉 React - Создаём компонент Services с модальным окном 👉 Полное руководство (Часть 5) В этом видео я покажу, как перенести вёрстку для секции "Services" в React-Portfolio, создать модальное окно и научиться управлять его состоянием. Мы рассмотрим два способа реализации открытия и закрытия модального окна, с использованием булевых значений (true/false) через useState. Вы также узнаете, как добавить стили и улучшить функционал секции. Это видео отлично подойдёт для тех, кто хочет углубить свои знания в React, изучить работу с состоянием и создавать интерактивные компоненты. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Что вас ждёт в этом видео: 🔧 Перенос вёрстки в компонент Services: Узнаете, как адаптировать готовую вёрстку для React. 🔗 Создание модального окна: Реализуем всплывающее окно с возможностью открытия и закрытия. 📜 Работа с состоянием через useState: Научимся управлять состоянием модального окна. 🛠️ Два способа управления модальным окном: Разберём подходы через булевые значения (true/false) и useState. 🎨 Добавление стилей: Улучшим внешний вид компонента для лучшей визуализации. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 👉 GitHub Repo https://github.com/Ilya-Stoyanov/reac...
(Вы папке src есть папка assets внутри этой папки есть папка start там находится вёрстка и стили) 🚀 Курс по Верстке https://frontend-courses.com/
💈 Подписывайтесь на Telegram https://t.me/ilya_stoyanov
🧩 React Icons https://react-icons.github.io/react-i...
⏱️ Таймкоды: 00:05 — Обзор задачи: Создание компонента Services 00:35 — Исправляем ошибку в коде 01:03 — Создание файла Services для массива объектов 03:07 — Обзор компонента Services 04:05 — Перенос вёрстки компонента Services в React 06:29 — Импорт и подключение компонента Services 09:58 — Логика для Service Item 13:58 — Правка стилей компонента Services 15:52 — Реализация модального окна для Services 19:30 — Работа с состоянием через useState 20:32 — Функции открытия и закрытия модального окна 24:37 — Стилизация модального окна 26:07 — Разбор работы useState на примере 27:06 — Обзор следующей секции проекта 👍 Спасибо, что досмотрели до конца! Если видео было полезным, ставьте лайк и подписывайтесь, чтобы не пропустить ещё больше полезных материалов по созданию и вёрстке сайтов! 💜
