Практика для начинающих. Верстка под 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;
});
});
};Материалы к уроку
Код к уроку
