Как использовать React useState для модального окна на примере секции Portfolio

React useState: Работа с массивами и модальным окном 👉 Создаём секцию Portfolio с функционалом модального окна 👉 Полное руководство (Часть 6) Сегодня мы продолжаем создавать портфолио на React! В этом уроке я покажу, как реализовать секцию Portfolio, используя массивы объектов, которые будут храниться в отдельных файлах. Мы научимся создавать всплывающее модальное окно, которое будет динамически отображать данные, соответствующие выбранному блоку, и разберём управление его состоянием с помощью useState. Это видео подойдёт как для новичков, так и для тех, кто хочет углубить свои знания в React и научиться работать с массивами объектов, динамическими компонентами и состоянием. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Что вас ждёт в этом видео: 🔧 Создание секции Portfolio в React: Узнаете, как перенести вёрстку, адаптировать её под React и подключить компоненты для динамического отображения данных. 📜 Работа с массивами объектов: Создадим структуру для хранения данных в отдельной папке и выведем их с помощью метода map(). 🛠️ Реализация модального окна: Покажу, как сделать всплывающее окно, которое будет отображать информацию о текущем блоке при клике. 🎨 Стилизация компонентов: Настроим внешний вид секции и модального окна, чтобы сделать интерфейс современным и удобным. 🚀 Оптимизация и логика: Разберём, как управлять состоянием модального окна с помощью useState и сделать проект структурированным и удобным для дальнейшей разработки. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 👉 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:10 — Создаём папку компонента Portfolio 00:44 — Подключаем стили для секции Portfolio 01:01 — Импортируем картинки для Portfolio 01:54 — Создаём файл массива Portfolio Data 05:03 — Тестируем вывод массива Portfolio в консоль 05:14 — Подключаем компонент Portfolio в App.jsx 06:00 — Переносим вёрстку в компонент Portfolio 08:44 — Вывод данных Portfolio с помощью метода map() 09:50 — Работа с компонентом Portfolio Modal 11:50 — Используем useState для управления состоянием 14:30 — Добавляем props для модального окна 15:55 — Динамическое изменение классов через state 16:47 — Обзор блока Next Project 16:50 — Перенос вёрстки блока Next Project 18:10 — Подключаем стили для блока Next Project 👍 Спасибо, что досмотрели до конца! Если видео было полезным, ставьте лайк и подписывайтесь, чтобы не пропустить ещё больше полезных материалов по созданию и вёрстке сайтов! 💜