React приложение «Корзина товаров»

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

Что будет в уроке

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

Видео

Настройка окружения. Создание и запуск React приложения

1.1 Установка Node.js

Заходим на сайт https://nodejs.org/en/, устанавливаем последнюю актуальную LTS версию, на момент записи урока это 16.13.0 LTS

Совет. Если у вас уже установлен node.js — рекомендуем проверить его версию командами: node -v и npm -v. На момент записи урока использованы последние версии node v16.13.0 и npm 8.1.2

1.2 Установка утилиты create-react-app

Установка утилиты create-react-app c помощью которой мы будем создавать проект для react приложения. https://ru.reactjs.org/docs/create-a-new-react-app.html#create-react-app

В консоли вводим команду: npm install -g create-react-app

1.3 Создание react приложения

В консоли перемещаемся в директорию внутри которой вы собираетесь создать react приложение. Рекомендуется выбрать папку так чтобы в ней или в пути к ней не было кириллических символов. Идеально создать папку в корне диска и назвать ее на латинице. Например: C:\\FRONTEND PROJECTS — я именно так и поступил.

Переместившись в нее, запускаем команду: npx create-react-app cart-js Это означает что мы создадим новое приложение в папке todo-project и наше приложение будет иметь название todo-project.

1.4 Запуск react приложения

Чтобы запустить react приложение, вначале перемещаемся в консоли в его директорию: cd cart-js и после запускаем командой npm run start

Правка у уроку

Функция increase, правильный вариант.
Правка в расчете свойств count и priceTotal.

const increase = (id) => {
		setCart((cart) => {
			return cart.map((product) => {
				if (product.id === id) {
					return {
						...product,
						count: product.count + 1,
						priceTotal: (product.count + 1) * product.price,
					};
				}
				return product;
			});
		});
	};

Материалы к уроку

• Первая часть. Урок по верстке секции с Корзиной
• Node JS
• Git SCM

Код к уроку

• Проект с версткой для переноса в React
• Готовый код с урока