Секреты React-разработки. Создай React портфолио с нуля шаг за шагом
Секреты React-разработки. Создай React-портфолио с нуля шаг за шагом 👉 Полный цикл разработки: от первой строки кода до деплоя 👉 Создаём современный и динамичный сайт на React 👉 Полное руководство (4 часа 42 минуты) Сегодня я собрал в одном видео весь процесс создания портфолио на React с нуля! 🎥 В этом выпуске мы пройдём все этапы: от вёрстки и компонентов до анимации, переключения тем и финального деплоя. 💡 Что вы узнаете в этом видео: 🔹 Разработка структуры портфолио: создаём секции Home, About, Skills, Services, Portfolio, Clients, Contact. 🔹 Работа с React-компонентами: используем useState, useEffect, props и массивы данных. 🔹 Добавление анимации с Motion: оживляем интерфейс и создаём плавные переходы. 🔹 Переключение тем (светлая/тёмная): реализуем через useState и сохраняем в LocalStorage. 🔹 Динамическое меню и кнопка "Вверх": улучшаем навигацию и пользовательский опыт. 🔹 Деплой на Netlify: публикуем проект и делаем его доступным онлайн. 📌 Если вы хотите научиться создавать современные, интерактивные сайты на React – это видео для вас! Полезные ссылки: 🔗 Готовый проект: https://main-react-portfolio.netlify....
(Посмотрите финальную версию портфолио в действии.) 🛠️ Motion - Официальный сайт библиотеки: https://motion.dev/
(Добавляйте плавную анимацию в React-проекты.) 🌐 Netlify - Хостинг для проектов: https://www.netlify.com/
(Быстрое и удобное развёртывание сайтов.) 🌟 GitHub Репозиторий: https://github.com/Ilya-Stoyanov/reac...
(Стартовый код проекта, который мы разработали в видео.) 🚀 Курс по вёрстке: https://frontend-courses.com/
(Изучайте основы разработки и создавайте крутые сайты.) 💈 Присоединяйтесь в Telegram-канал: https://t.me/ilya_stoyanov
(Следите за новыми уроками и полезными материалами.) 🏆💯 Рекомендую отличного преподавателя английского языка! 💯🏆 Если вы хотите эффективно изучать английский, я советую учиться только у носителей языка! 💡 🌟 Lynette – профессиональный преподаватель, носитель английского языка, который поможет вам улучшить разговорные навыки, грамматику и произношение. Она даёт полезные советы и делает обучение лёгким и увлекательным. 🚀 Переходите по ссылке и записывайтесь на урок: 🔗 https://preply.com/en/tutor/2333502
Изучайте язык правильно и достигайте новых высот! 💬✨ ⏱️ Таймкоды: 00:07 — Обзор проекта - что мы будем разрабатывать в React 00:35 — Настройка окружения перед началом работы в React 15:53 — Создаём структуру проекта и компоненты 25:10 — Импортируем и подключаем картинки в проект 31:09 — Создаём компонент Header с меню навигации 57:50 — Разрабатываем секцию Home в React 01:05:05 — Создаём секцию About с данными о разработчике 01:13:30 — Добавляем секцию Skills с анимацией и эффектами 01:31:01 — Переходим к блоку Work Experience: оформление и логика 01:36:02 — Создаём секцию Services: карточки услуг и стили 02:02:49 — Разрабатываем секцию Portfolio с проектами 02:19:29 — Добавляем блок Next Project для перелистывания работ 02:24:35 — Создаём секцию Our Clients с отзывами и логотипами 02:44:38 — Разрабатываем секцию Contact с формой обратной связи 02:58:10 — Исправляем баг: убираем скролл при открытии мобильного меню 03:01:57 — Добавляем плавное появление popup в секции Portfolio 03:04:10 — Создаём секцию Footer с контактами и ссылками 03:22:00 — Добавляем кнопку "Вверх" для удобной навигации 03:28:33 — Реализуем переключение тем (светлая/тёмная) с сохранением 03:38:51 — Анимация элементов с помощью библиотеки React Motion 03:43:56 — Разбираем работу Motion: ключевые атрибуты и настройки 03:45:22 — Выносим анимацию в отдельный файл для удобства 04:19:07 — Обзор будущих проектов, которые можно реализовать 04:37:53 — Финальный деплой проекта на Netlify 04:42:23 — Всем мира и добра! 🚀😊 👍 Спасибо, что досмотрели до конца! Если видео оказалось полезным, ставьте лайк, подписывайтесь и делитесь с друзьями! 💜 🚀
