# Task 2. Rewriting the Shop with a Cart in React

**Maximum score: 15**

## Goal

Take the finished application from previous task and rewrite it in React: learn the component approach, state with `useState` and passing data through props.

## What to build

The application must look and behave the same as in Task 1, but be composed of React components.

### Requirements

1. **A Vite project.** Create the application with:

   ```bash
   npm create vite@latest shop-react -- --template react
   cd shop-react
   npm install
   npm run dev
   ```

2. **Split the UI into components**, for example:
   - `App` — holds the cart state;
   - `ProductList` / `ProductCard` — the product catalog;
   - `Cart` — the cart;
   - `CartItem` — one line with the "+" / "−" / "Remove" buttons;
   - `Total` — the item count and the grand total.
3. **The product list is an array of objects**, and the catalog is rendered with `.map()` and a required `key` attribute.
4. **Cart state with `useState`.** Never mutate the model directly: only through `setState` and immutable updates (`map`, `filter`, spread).
5. **Props and callbacks.** Data flows down through props; actions (add, change quantity, remove) flow up as callback functions.
6. **The grand total** is computed by a function (for example, with `reduce`) on every render, and is not stored in separate state.
7. **An empty cart** shows a message and has zero totals; the quantity never goes below zero, and reaching 0 removes the line.
8. No errors or warnings in the console, including React warnings about `key` and about controlled components.

### Also checked separately

- No direct DOM manipulation (`document.createElement`, `innerHTML`).
- Separation of concerns: presentational components do not keep data that does not belong to them.