React JS: Вывод списка товаров (практика)

Создание массива товаров

Сначала создадим массив товаров. В реальном приложении данные будут храниться в базе данных, но принципы взаимодействия (отображение, работа с корзиной) останутся теми же. Для упрощения, используем массив:

const items = [
  { id: 1, title: 'Товар 1', img: 'img/product1.jpg', description: 'Описание товара 1', category: 'Категория 1', price: 10 },
  { id: 2, title: 'Товар 2', img: 'img/product2.jpg', description: 'Описание товара 2', category: 'Категория 2', price: 20 },
  { id: 3, title: 'Товар 3', img: 'img/product3.jpg', description: 'Описание товара 3', category: 'Категория 1', price: 15 },
  // ... другие товары
];

Каждый товар имеет уникальный идентификатор (id), название (title), изображение (img), описание (description), категорию (category) и цену (price). Изображения пока не добавлены, это будет сделано позже.

Переход на классовый компонент

Для управления состоянием компонента, перепишем функциональный компонент App в классовый. Это упрощает работу с state через конструктор:

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items };
  }

  render() {
    return (
      <main>
        <ItemsList items={this.state.items} />
      </main>
    );
  }
}

Компонент для отображения товаров

Создадим компонент ItemsList.js для вывода товаров:

import React from 'react';

class ItemsList extends React.Component {
  render() {
    return (
      <div>
        {/* Здесь будет код для вывода товаров */}
      </div>
    );
  }
}

export default ItemsList;

Импортируем и используем ItemsList в App, передавая массив товаров:

import ItemsList from './ItemsList';

class App extends React.Component {
  // ... (конструктор остается без изменений)

  render() {
    return (
      <main>
        <ItemsList items={this.state.items} />
      </main>
    );
  }
}

Отображение товаров в ItemsList

В ItemsList.js переберем массив и выведем названия товаров:

import React from 'react';
import Item from './Item'; // Добавили импорт компонента Item

class ItemsList extends React.Component {
  render() {
    const { items } = this.props;
    return (
      <div>
        {items.map(item => (
          <Item key={item.id} item={item} />
        ))}
      </div>
    );
  }
}

export default ItemsList;

Обратите внимание на key={item.id} для уникальной идентификации каждого элемента.

Компонент для отображения отдельного товара

Для повышения читаемости кода, создадим компонент Item.js:

import React from 'react';

class Item extends React.Component {
  render() {
    const { item } = this.props;
    return (
      <div className="item">
        <img src={`/img/${item.img}`} alt={item.title} />
        <h2>{item.title}</h2>
        <p>{item.description}</p>
        <p>{item.price}$</p>
        <div className="add-to-cart">+</div>
      </div>
    );
  }
}

export default Item;

Добавление изображений и стилей

Изображения размещаются в папке public/img/. Пути к ним указаны в Item.js. Стиль задается через отдельный CSS файл (пример ниже):

/* Пример стилей */
main {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}

.item {
    width: 30%;
    padding: 20px;
    background: #f5f5f5;
    margin-bottom: 20px;
    overflow: hidden;
    transition: transform 0.5s;
}

.item img {
  max-width: 100%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-bottom: 10px;
}

.item:hover {
    transform: scale(1.05);
}

.item h2, .item p {
    margin: 10px 0;
    color: #333;
}

.item .add-to-cart {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 35px;
    height: 35px;
    background: #007bff;
    color: #fff;
    text-align: center;
    line-height: 35px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.5s;
}

.item .add-to-cart:hover {
    transform: scale(1.5) translateY(-5px);
}

В этом уроке реализован вывод товаров на страницу. В следующих уроках добавим функционал корзины и другие возможности.