Проект на React JS. Корзина товаров. Верстка и интерактив на React

Описание

Готовый код с урока в описании под видео. React приложение Корзина товаров. Практика для начинающих. Верстка под React JS. Создание компонентов, SCSS стили в React. Сделаем перенос верстки и добавим интерактив с помощью React JS.

✅ Перенос верстки в React JS
✅ Создание React компонентов
✅ Работа с SCSS в React
✅ Хуки useState, useEffect

Материалы к уроку: https://webcademy.ru/blog/816/

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: http://webcademy.ru/htmlsite/

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: https://webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.

💻 Курс "Frontend разработчик. JavaScript + React": https://webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.

💻 Курс "Разработка сайтов на PHP + MySQL":
https://webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.

🏁 Обучение с нуля
💁♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе

💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

💈 Сайт школы ВебКадеми: https://webcademy.ru/
💈 Вступайте в группу Вконтакте: https://vk.com/webcademy
💈 Подписывайтесь на Telegram: https://t.me/webcademynews

Тайм коды:

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 Подведение итогов

Закрытый канал с исходниками: https://t.me/+9XtDDNBdHAk4Yjhi
Ссылка на макет и код с вебинара: https://t.me/c/1579074518/75

#HTML #CSS #верстка #WebCademy #ВебКадеми #HTML5 #CSS3 #html #css #html5 #css3 #javascript #js #react #reactjs #JS #JAVASCRIPT #JavaScript #уроки #бесплатно #курс #rutube #Rutube #RUTUBE #рутуб #Рутуб #РУТУБ #ЮрийКлючевский