Проект на React JS. Корзина товаров. Верстка и интерактив на React
Готовый код с урока в описании под видео. React приложение Корзина товаров. Практика для начинающих. Верстка под React JS. Создание компонентов, SCSS стили в React. Сделаем перенос верстки и добавим интерактив с помощью React JS.
✅ Перенос верстки в React JS
✅ Создание React компонентов
✅ Работа с SCSS в React
✅ Хуки useState, useEffect
Материалы к уроку:
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс “Создай свой первый сайт на HTML5 и CSS3“
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков:
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов:
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
💻 Курс “Frontend разработчик. JavaScript React“:
Обучение с наставником, 3 месяца, результат, гарантия.
💻 Курс “Разработка сайтов на PHP MySQL“:
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми:
💈 Вступайте в группу Вконтакте:
💈 Подписывайтесь на Telegram:
Тайм коды:
00:00 Знакомство с проектом
01:07 Полезная информация
01:47 Настройка окружения. Создание React приложения
04:55 Сниппеты. Установка node-sass. Запуск
08:25 Очистка шаблона приложения
::::::::: Перенос верстки, создание компонентов :::::::::
12:33 Перенос стилей в компонент App
16:58 Перенос HTML разметки в компонент App
19:13 Исправление className и закрытие одиночных тегов
21:43 Компонент Title
26:43 Стили для секции section-cart
27:52 Компонент Cart
30:55 Компонент CartHeader
32:21 Компонент Product
33:24 Компонент CartFooter
34:59 Ошибки SCSS. Подключение SCSS переменных
38:14 Компонент Count
39:44 Компонент ButtonDelete
40:58 Отображение товаров в корзине
55:09 Уникальные ключи key для товаров. Reconciliation алгоритм
57:48 Изображения товаров
::::::::::::::::: Интерактив :::::::::::::::::
1:00:25 Удаление товаров
1:10:05 Счетчик. Увеличение кол-ва
1:18:05 Счетчик. Уменьшение кол-ва
1:20:48 Счетчик. Правка бага с уменьшением кол-ва
1:23:40 Счетчик. onChange для инпута
1:28:51 Подсчет общего кол-ва и стоимости корзины
1:34:32 Подсчет общего кол-ва и стоимости при изменении корзины
1:37:30 Форматирование цен
1:42:39 Подведение итогов
Закрытый канал с исходниками: 9XtDDNBdHAk4Yjhi
Ссылка на макет и код с вебинара:
#HTML #CSS #верстка #WebCademy #ВебКадеми #HTML5 #CSS3 #html #css #html5 #css3 #javascript #js #react #reactjs
380 views
0
0
3 weeks ago 00:33:36 1
[Rimanah.] BEGOTTEN - ИЛИ КАК Я ВНОВЬ ПОЛЮБИЛ GMOD
3 weeks ago 00:02:11 1
HTML КУРС ✔ IT СПЕЦИАЛИСТ ОБУЧЕНИЕ ОНЛАЙН 🔵
3 weeks ago 00:03:45 1
Подведем итоги уходящей недели
3 weeks ago 01:00:04 1
2024 11 17 Спецпроект 30 лет вместе
3 weeks ago 00:01:56 1
Приложение Ресторан 01 Демо
3 weeks ago 00:06:02 1
[GalileoRU] Галилео 🥬 Как делают голубцы в промышленных масштабах?
3 weeks ago 00:04:03 1
Именно это портные скрывали от вас! Редкие способы пошива
3 weeks ago 00:09:13 4
[Katsay Construction: Строительство домов] ТОП-5 видов фасадной отделки для газобетона — Отвечаю на вопросы из Телеги