React.js – Тема 4 – Courses WebSkill

Тема 4. React.js Product Catalog

Створення Каталогу товарів з кошиком покупок

Новий додаток
Форматування
Файли та папки

Створення Product Catalog React.js додатку, введення команд в консоль
D: або C: - переключення між дисками
cd - переходимо в необхідну вам папку
npx create-react-app product-catalog - створення нового React.js проєкту
npx create-react-app - сама команда створення
product-catalog - назва папки в якій буде додаток
cd product-catalog - переходимо в створену папку

Видаляємо непотрібні файли, чистимо index.js та App.js від непотрібних команд
Видаляємо файли: setupTests.js,repor,WebVitals.js,logo.svg,index.css,App.test.js
З файлу index.js видаляємо такі рядки
import './index.css'; import reportWebVitals from './reportWebVitals'; reportWebVitals();
Та коментарі: // If you want...
З файлу App.js видаляємо import logo from './logo.svg';
Тег <div className="app"> і все що всередині нього

В папці src залишаємо лише такі файли:
App.js, App.css, index.js

Скопіюйте стилізацію нижче та замініть її в файлі App.css

/* styles.css */

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  font-size: 24px;
  margin-bottom: 20px;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
}

.product {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 20px;
  margin: 10px;
  flex: 0 0 calc(33.33% - 20px);
}

.product h2 {
  font-size: 18px;
  margin: 0;
}

.product p {
  font-size: 16px;
  margin: 10px 0;
}

.product button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.product button:hover {
  background-color: #0056b3;
}

.cart {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 20px;
  margin-top: 20px;
}

.cart h2 {
  font-size: 20px;
}

.cart-item {
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-item h3 {
  font-size: 18px;
  margin: 0;
}

.cart-item p {
  font-size: 16px;
  margin: 0;
}

.cart-item button {
  background-color: #dc3545;
  color: #fff;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.3s ease;
}

.cart-item button:hover {
  background-color: #c82333;
}

Інформація

Робимо заміну всієї стилізації в файлі App.css на свою, яку копіювали вище

Заготовки файлів для додатку

Файл index.js
Файл App.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

<React.StrictMode>

<App />

</React.StrictMode>

);

import React, { useState } from "react";

import './App.css';

function App() {

return (

);

}

export default App;

Початок роботи із App.js

Інформація

1. Визначити початковий стан компонента, який містить масив товарів (products) і пустий кошик (cart).

2. Створити метод addToCart, який додає обраний товар до кошика. Метод створює копію поточного кошика та додає до неї новий товар.

3. Створити метод removeFromCart, який видаляє товар з кошика на основі його id. Метод фільтрує поточний кошик та видаляє товар з вказаним id.

Рендеринг компонентів

Інформація

Реалізувати метод render, який відображає ваш інтерфейс. У цьому методі ви відображаєте список товарів, кнопки "Додати до кошика" та кошик з можливістю видалення товарів.

Скріншоти усіх файлів в нашому додатку

Завдання 1

Завдання 1

Ви можете створити окремий файл для функції "Підсумок покупок" та імпортувати його в компонент App. В цьому файлі ми створимо функцію calculateTotal, яка обчислить загальну вартість товарів у кошику.

Завдання 2

Додавання можливості фільтрації товарів за категорією або ціновим діапазоном може бути досить обширним завданням, і воно потребує додаткової логіки та структури даних. Давайте спроектуємо цю логіку та створимо окремий файл для фільтрації.
Спочатку створіть новий файл, наприклад filterProducts.jsУ цьому файлі ми створили функцію filterProducts, яка приймає список товарів, категорію та ціновий діапазон, і повертає список товарів, які відповідають вказаним критеріям.
Відредагуйте компонент App.js для використання фільтрації.
Імпортуйте функцію filterProducts і додайте два контроли введення для фільтрації за категорією та ціновим діапазоном. Ці значення фільтрації зберігаються у стані додатка та передаються функції filterProducts, яка фільтрує список товарів згідно зазначених критеріїв.
Добавте CSS до App.css(або створіть окремий файл - не забудьте його підключити) - приклад стилізації нижче

Завдання 2

Завдання 3

Додавання форми для введення адреси доставки та інших даних покупця та можливості здійснювати замовлення потребує розширення функціональності вашого додатку.

Спочатку створіть новий файл, наприклад OrderForm.js, в якому буде розміщено компонент форми замовлення.

Тепер ви можете імпортувати компонент OrderForm в App.js і використовувати його в шаблоні. Для відображення форми замовлення при добавленні товару в кошик і приховування її, коли кошик пустий, вам потрібно налаштувати умовний рендерінг в компоненті App.

Завдання 3

Завдання 4

Завдання 4

Після успішного виконання попередніх завдань, доведіть Каталог товарів до хорошої якості, добавляючи в блоки товарів різні картинки, простилізуйте їх.
Добавте більше фільтрів по категоріях.
Доповніть форму для оформлення замовлення.

Слідкуйте за нами: