Лабораторная работа №4. Создание приложения на React

2024-09-21 13:39:22 +04:00 · 2024-09-21 13:39:22 +04:00 · 3f45d98137
commit 3f45d98137
parent 3d0227846d
37 changed files with 5294 additions and 0 deletions
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
--- a/.idea/codeStyles/Project.xml
+++ b/.idea/codeStyles/Project.xml
@ -0,0 +1,25 @@
+<component name="ProjectCodeStyleConfiguration">
+  <code_scheme name="Project" version="173">
+    <option name="LINE_SEPARATOR" value="&#10;" />
+    <JSCodeStyleSettings version="0">
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="VAR_DECLARATION_WRAP" value="2" />
+      <option name="OBJECT_LITERAL_WRAP" value="2" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </JSCodeStyleSettings>
+    <codeStyleSettings language="JavaScript">
+      <option name="RIGHT_MARGIN" value="100" />
+      <option name="BLOCK_COMMENT_ADD_SPACE" value="true" />
+      <option name="KEEP_BLANK_LINES_IN_CODE" value="1" />
+      <option name="METHOD_CALL_CHAIN_WRAP" value="2" />
+      <option name="IF_BRACE_FORCE" value="1" />
+      <option name="DOWHILE_BRACE_FORCE" value="1" />
+      <option name="WHILE_BRACE_FORCE" value="1" />
+      <option name="FOR_BRACE_FORCE" value="1" />
+      <indentOptions>
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+  </code_scheme>
+</component>
--- a/.idea/codeStyles/codeStyleConfig.xml
+++ b/.idea/codeStyles/codeStyleConfig.xml
@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
+  </state>
+</component>
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>
--- a/.idea/labs.iml
+++ b/.idea/labs.iml
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/labs.iml" filepath="$PROJECT_DIR$/.idea/labs.iml" />
+    </modules>
+  </component>
+</project>
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
--- a/react-app/.eslintrc.cjs
+++ b/react-app/.eslintrc.cjs
@ -0,0 +1,24 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'airbnb-base',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 12, sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    'indent': 'off',
+    'no-console': 'off',
+    'arrow-body-style': 'off',
+    'implicit-arrow-linebreak': 'off',
+  },
+}
--- a/react-app/.gitignore
+++ b/react-app/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/react-app/README.md
+++ b/react-app/README.md
@ -0,0 +1,29 @@
+#### Окружение:
+- nodejs 18;
+- VSCode;
+- ESLint плагин для VSCode;
+- для отладки необходимы бразузеры Chrome или Edge.
+
+#### Создание пустого проекта:
+
+```commandline
+npm create vite@latest ./ -- --template react 
+```
+
+#### Установка зависимостей:
+
+```commandline
+npm install
+```
+
+#### Запуск проекта:
+
+```commandline
+npm run dev
+```
+
+#### Сборка проекта:
+
+```commandline
+npm run build
+```
--- a/react-app/index.html
+++ b/react-app/index.html
@ -0,0 +1,15 @@
+<html lang="ru">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>My shop</title>
+</head>
+
+<body>
+  <div id="root" class="h-100 d-flex flex-column"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
--- a/react-app/jsconfig.json
+++ b/react-app/jsconfig.json
@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "target": "ES2020",
+        "jsx": "react",
+        "strictNullChecks": true,
+        "strictFunctionTypes": true
+    },
+    "exclude": [
+        "node_modules",
+        "**/node_modules/*"
+    ]
+}
--- a/react-app/package-lock.json
+++ b/react-app/package-lock.json
--- a/react-app/package.json
+++ b/react-app/package.json
@ -0,0 +1,32 @@
+{
+  "name": "lec4",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.18.0",
+    "bootstrap": "^5.3.2",
+    "react-bootstrap": "^2.9.1",
+    "react-bootstrap-icons": "^1.10.3",
+    "prop-types": "^15.8.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^8.45.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "vite": "^4.4.5"
+  }
+}
--- a/react-app/public/favicon.svg
+++ b/react-app/public/favicon.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart2" viewBox="0 0 16 16">
+  <path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
+</svg>
--- a/react-app/src/App.css
+++ b/react-app/src/App.css
--- a/react-app/src/App.jsx
+++ b/react-app/src/App.jsx
@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import { Container } from 'react-bootstrap';
+import { Outlet } from 'react-router-dom';
+import './App.css';
+import Footer from './components/footer/Footer.jsx';
+import Header from './components/navigation/Navigation.jsx';
+
+const App = ({ routes }) => {
+  return (
+    <>
+      <Header routes={routes}></Header>
+      <Container className='p-2' as="main" fluid>
+        <Outlet />
+      </Container>
+      <Footer />
+    </>
+  );
+};
+
+App.propTypes = {
+  routes: PropTypes.array,
+};
+
+export default App;
--- a/react-app/src/assets/banner1.png
+++ b/react-app/src/assets/banner1.png
--- a/react-app/src/assets/banner2.png
+++ b/react-app/src/assets/banner2.png
--- a/react-app/src/assets/banner3.png
+++ b/react-app/src/assets/banner3.png
--- a/react-app/src/assets/logo.png
+++ b/react-app/src/assets/logo.png
--- a/react-app/src/components/Header.jsx
+++ b/react-app/src/components/Header.jsx
@ -0,0 +1,43 @@
+const Header = () => {
+    return (
+        <header>
+            <nav className="navbar navbar-expand navbar-dark bg-primary">
+                <div className="container">
+                    <a className="navbar-brand" href="index.html">Book Store</a>
+                    <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
+                            data-bs-target="#navbarNav"
+                            aria-controls="navbarNav" aria-expanded="false"
+                            aria-label="Toggle navigation">
+                        <span className="navbar-toggler-icon"></span>
+                    </button>
+                    <div className="collapse navbar-collapse" id="navbarNav">
+                        <form className="d-flex mx-auto w-50">
+                            <input className="form-control me-2" id="book-search" type="search"
+                                   placeholder="Какая Ваша любимая книга? :)" aria-label="Search"
+                                   width="100px"/>
+                            <button className="btn btn-outline-light" type="submit">Поиск</button>
+                        </form>
+                        <ul className="navbar-nav ms-auto">
+                            <li className="nav-item">
+                                <a className="nav-link" href="html/book-list.html">Каталог</a>
+                            </li>
+                            <li className="nav-item">
+                                <a className="nav-link" href="html/about.html">О нас</a>
+                            </li>
+                            <li className="nav-item">
+                                <a className="nav-link" href="html/cart.html"
+                                   style="display: inline-block;">Корзина</a>
+                            </li>
+                            <li className="nav-item">
+                                <a className="nav-link" href="html/admin.html"
+                                   style="display: inline-block;">Админ</a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </nav>
+        </header>
+    );
+};
+
+export default Header;
--- a/react-app/src/components/banner/Banner.css
+++ b/react-app/src/components/banner/Banner.css
@ -0,0 +1,25 @@
+#banner {
+    margin: 2px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+#banner img {
+    border: 1px solid #3c3c3f;
+    border-radius: 5px;
+}
+
+#banner img.banner-show {
+    width: 100%;
+    opacity: 1;
+    transition: opacity 1s, visibility 0s;
+}
+
+#banner img.banner-hide {
+    height: 0;
+    width: 0;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 1s, visibility 0s 1s;
+}
--- a/react-app/src/components/banner/Banner.jsx
+++ b/react-app/src/components/banner/Banner.jsx
@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+import banner1 from '../../assets/banner1.png';
+import banner2 from '../../assets/banner2.png';
+import banner3 from '../../assets/banner3.png';
+import './Banner.css';
+
+const Banner = () => {
+    const [currentBanner, setCurrentBanner] = useState(0);
+    const banners = [banner1, banner2, banner3];
+
+    const getBannerClass = (index) => {
+        return currentBanner === index ? 'banner-show' : 'banner-hide';
+    };
+
+    useEffect(() => {
+        const bannerInterval = setInterval(
+            () => {
+                console.info('Banner changed');
+                let current = currentBanner + 1;
+                if (current === banners.length) {
+                    current = 0;
+                }
+                setCurrentBanner(current);
+            },
+            5000,
+        );
+        return () => clearInterval(bannerInterval);
+    });
+
+    return (
+        <div id="banner" >
+            {
+                banners.map((banner, index) =>
+                    <img key={index} className={getBannerClass(index)} src={banner} alt={`banner${index}`} />)
+            }
+        </div >
+    );
+};
+
+export default Banner;
--- a/react-app/src/components/footer/Footer.css
+++ b/react-app/src/components/footer/Footer.css
@ -0,0 +1,5 @@
+.my-footer {
+    background-color: #9c9c9c;
+    height: 32px;
+    color: #fff;
+}
--- a/react-app/src/components/footer/Footer.jsx
+++ b/react-app/src/components/footer/Footer.jsx
@ -0,0 +1,23 @@
+//import './Footer.css';
+
+const Footer = () => {
+    const year = new Date().getFullYear();
+
+    return (
+        <footer className="bg-dark text-white py-4">
+            <div className="container">
+                <div className="row">
+                    <div className="col-md-6">
+                        <p>&copy; {year} Book Store. All rights reserved.</p>
+                    </div>
+                    <div className="col-md-6 text-md-end">
+                        <a href="#" className="text-white mr-3">Privacy Policy</a>
+                        <a href="#" className="text-white">Terms of Service</a>
+                    </div>
+                </div>
+            </div>
+        </footer>
+    );
+};
+
+export default Footer;
--- a/react-app/src/components/navigation/Navigation.css
+++ b/react-app/src/components/navigation/Navigation.css
@ -0,0 +1,30 @@
+.my-navbar {
+    background-color: #3c3c3c !important;
+}
+
+.my-navbar .link a:hover {
+    text-decoration: underline !important;
+}
+
+.my-navbar .logo {
+    width: 26px;
+    height: 26px;
+}
+.form-centered {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 5px;
+}
+
+@media (max-width: 768px) {
+    .form-centered {
+        flex-direction: column; /* Изменяем направление на колонку для мобильных устройств */
+        width: 100%; /* Устанавливаем ширину на 100% */
+    }
+
+    .form-centered .form-control {
+        width: 80%; /* Устанавливаем ширину поля ввода на 80% */
+        margin-bottom: 10px; /* Добавляем отступ снизу для мобильных устройств */
+    }
+}
--- a/react-app/src/components/navigation/Navigation.jsx
+++ b/react-app/src/components/navigation/Navigation.jsx
@ -0,0 +1,54 @@
+import {
+    Navbar, Container, Form, FormControl, Button, Nav,
+} from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import { Link, useLocation } from 'react-router-dom';
+import { Cart2 } from 'react-bootstrap-icons';
+
+const Header = ({ routes }) => {
+    const location = useLocation();
+    const indexPageLink = routes.filter((route) => route.index === false)
+        .shift();
+    const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
+
+    return (
+        <Navbar expand="lg" variant="dark" bg="primary">
+            <Container fluid>
+                <Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
+                    <Cart2 className="d-inline-block align-top me-1 logo"/>
+                    Book Store
+                </Navbar.Brand>
+                <Navbar.Toggle aria-controls="navbarNav"/>
+                <Navbar.Collapse id="navbarNav">
+                    <Form className="d-flex mx-auto form-centered" style={{ marginTop: '10px' }}>
+                        <FormControl
+                            type="search"
+                            placeholder="Какая Ваша любимая книга? :)"
+                            aria-label="Search"
+                            style={{
+                                width: '500px',
+                                marginRight: '5px',
+                            }}
+                        />
+                        <Button variant="outline-light" type="submit">Поиск</Button>
+                    </Form>
+                    <Nav className="me-auto link" activeKey={location.pathname}>
+                        {
+                            pages.map((page) =>
+                                <Nav.Link as={Link} key={page.path} eventKey={page.path}
+                                          to={page.path ?? '/'}>
+                                    {page.title}
+                                </Nav.Link>)
+                        }
+                    </Nav>
+
+                </Navbar.Collapse>
+            </Container>
+        </Navbar>
+    );
+};
+Header.propTypes = {
+    routes: PropTypes.array,
+};
+
+export default Header;
--- a/react-app/src/index.css
+++ b/react-app/src/index.css
@ -0,0 +1,27 @@
+h1 {
+    font-size: 1.5em;
+}
+
+h2 {
+    font-size: 1.25em;
+}
+
+h3 {
+    font-size: 1.1em;
+}
+
+.btn-mw {
+    width: 100%;
+}
+
+@media (min-width: 768px) {
+    .btn-mw {
+        width: 30%;
+    }
+}
+
+@media (min-width: 1200px) {
+    .btn-mw {
+        width: 20%;
+    }
+}
--- a/react-app/src/main.jsx
+++ b/react-app/src/main.jsx
@ -0,0 +1,55 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import App from './App.jsx';
+import './index.css';
+import ErrorPage from './pages/ErrorPage.jsx';
+import WelcomePage from './pages/WelcomePage.jsx';
+import BookList from './pages/BookList.jsx';
+import BookDetails from './pages/BookDetails.jsx';
+import Page4 from './pages/Cart.jsx';
+import PageEdit from './pages/PageEdit.jsx';
+
+const routes = [
+  {
+    index: true,
+    path: '/',
+    element: <WelcomePage />,
+    title: 'Главная страница',
+  },
+  {
+    path: '/BookList',
+    element: <BookList />,
+    title: 'Каталог',
+  },
+  {
+    path: '/BookDetails',
+    element: <BookDetails />,
+    title: 'Третья страница',
+  },
+  {
+    path: '/page4',
+    element: <Page4 />,
+    title: 'Четвертая страница',
+  },
+  {
+    path: '/page-edit',
+    element: <PageEdit />,
+  },
+];
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <App routes={routes} />,
+    children: routes,
+    errorElement: <ErrorPage />,
+  },
+]);
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>,
+);
--- a/react-app/src/pages/BookDetails.jsx
+++ b/react-app/src/pages/BookDetails.jsx
@ -0,0 +1,29 @@
+const BookDetails = () => {
+    return (
+        <main>
+            <section className="book-page py-5">
+                <div className="container">
+                    <h1 className="display-4 mb-4">Информация о книге</h1>
+                    <div className="row">
+                        <div className="col-md-4">
+                            <img src="https://via.placeholder.com/300x200" className="img-fluid" alt="Book Cover" />
+                        </div>
+                        <div className="col-md-8">
+                            <h2 className="mb-4">Война и мир</h2>
+                            <p className="lead mb-4">/описание/</p>
+                            <ul className="list-unstyled mb-4">
+                                <li><strong>Автор:</strong> Лев Толстой</li>
+                                <li><strong>Цена:</strong> $10.99</li>
+                                <li><strong>Количество страниц:</strong> 200</li>
+                                <li><strong>Год публикации:</strong> 2020</li>
+                            </ul>
+                            <button className="btn btn-primary btn-lg">Добавить в корзину</button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
+    );
+};
+
+export default BookDetails;
--- a/react-app/src/pages/BookList.jsx
+++ b/react-app/src/pages/BookList.jsx
@ -0,0 +1,105 @@
+import { useState } from 'react';
+
+const Catalog = () => {
+    const [category, setCategory] = useState('all');
+    const [priceRange, setPriceRange] = useState({ min: 0, max: 100 });
+
+    const handleCategoryChange = (e) => {
+        setCategory(e.target.value);
+    };
+
+    const handlePriceChange = (e) => {
+        const { name, value } = e.target;
+        setPriceRange((prev) => ({
+            ...prev,
+            [name]: value,
+        }));
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        // Handle filter submission logic here
+        console.log(`Selected Category: ${category}, Price Range: $${priceRange.min} - $${priceRange.max}`);
+    };
+
+    return (
+        <main>
+            <section className="catalog-page py-5">
+                <div className="container">
+                    <h1 className="display-4 mb-4">Каталог</h1>
+                    <div className="row">
+                        <div className="col-md-3">
+                            <h2 className="mb-4">Фильтры</h2>
+                            <form onSubmit={handleSubmit}>
+                                <div className="mb-3">
+                                    <label htmlFor="category" className="form-label">Категория</label>
+                                    <select className="form-select" id="category" value={category} onChange={handleCategoryChange}>
+                                        <option value="all">Все</option>
+                                        <option value="sci-fiction">Научная фантастика</option>
+                                        <option value="detective">Детективы</option>
+                                        <option value="biography">Биография</option>
+                                    </select>
+                                </div>
+                                <div className="mb-3">
+                                    <label htmlFor="price-range" className="form-label">Диапазон цены</label>
+                                    <input
+                                        type="range"
+                                        className="form-range"
+                                        id="price-range"
+                                        min="0"
+                                        max="100"
+                                        step="10"
+                                        value={priceRange.max}
+                                        onChange={handlePriceChange}
+                                        name="max"
+                                    />
+                                    от
+                                    <input
+                                        type="number"
+                                        className=""
+                                        name="min"
+                                        min="0"
+                                        step="10"
+                                        value={priceRange.min}
+                                        onChange={handlePriceChange}
+                                    />
+                                    до
+                                    <input
+                                        type="number"
+                                        className=""
+                                        name="max"
+                                        min="0"
+                                        step="10"
+                                        value={priceRange.max}
+                                        onChange={handlePriceChange}
+                                    />
+                                </div>
+                                <button type="submit" className="btn btn-primary">Сохранить фильтры</button>
+                            </form>
+                        </div>
+                        <div className="col-md-9">
+                            <div className="row">
+                                {/* Example book card */}
+                                {[...Array(6)].map((_, index) => (
+                                    <div key={index} className="col-md-4 mb-4">
+                                        <div className="card">
+                                            <img src={`https://via.placeholder.com/300x200?text=Book+${index + 1}`} className="card-img-top" alt={`Book Cover ${index + 1}`} />
+                                            <div className="card-body">
+                                                <h5 className="card-title">Название Книги {index + 1}</h5>
+                                                <p className="card-text">Имя Автора {index + 1}</p>
+                                                <p className="card-text">$10.99</p>
+                                                <a href="book.html" className="btn btn-primary">Карточка товара</a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
+    );
+};
+
+export default Catalog;
--- a/react-app/src/pages/Cart.jsx
+++ b/react-app/src/pages/Cart.jsx
@ -0,0 +1,85 @@
+import { useState } from 'react';
+
+const Cart = () => {
+    const [cartItems, setCartItems] = useState([
+        {
+            id: 1, title: 'Название Книги 1', author: 'Автор 1', price: 10.99, quantity: 1,
+        },
+        {
+            id: 2, title: 'Название Книги 2', author: 'Автор 2', price: 12.99, quantity: 2,
+        },
+    ]);
+
+    const handleQuantityChange = (id, newQuantity) => {
+        setCartItems((prevItems) =>
+            prevItems.map((item) =>
+                (item.id === id ? { ...item, quantity: Math.max(1, newQuantity) } : item)));
+    };
+
+    const handleRemoveItem = (id) => {
+        setCartItems((prevItems) => prevItems.filter((item) => item.id !== id));
+    };
+
+    const getTotalPrice = () => {
+        return cartItems.reduce((total, item) => total + item.price * item.quantity, 0).toFixed(2);
+    };
+
+    return (
+        <main>
+            <section className="cart-page py-5">
+                <div className="container">
+                    <h1 className="display-4 mb-4">Товары в корзине</h1>
+                    <div className="row">
+                        <div className="col-md-8">
+                            <table className="table table-striped table-bordered">
+                                <thead>
+                                <tr>
+                                    <th>Название Книги</th>
+                                    <th>Автор</th>
+                                    <th>Цена</th>
+                                    <th>Количество</th>
+                                    <th>Удалить</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                {cartItems.map((item) => (
+                                    <tr key={item.id}>
+                                        <td>{item.title}</td>
+                                        <td>{item.author}</td>
+                                        <td>${item.price.toFixed(2)}</td>
+                                        <td>
+                                            <input
+                                                type="number"
+                                                value={item.quantity}
+                                                className="form-control"
+                                                onChange={(e) =>
+                                                    // eslint-disable-next-line max-len
+                                                    handleQuantityChange(item.id, parseInt(e.target.value, 10))}
+                                            />
+                                        </td>
+                                        <td>
+                                            <button
+                                                className="btn btn-danger btn-sm"
+                                                onClick={() => handleRemoveItem(item.id)}
+                                            >
+                                                Удалить
+                                            </button>
+                                        </td>
+                                    </tr>
+                                ))}
+                                </tbody>
+                            </table>
+                        </div>
+                        <div className="col-md-4">
+                            <h2 className="mb-4">Итого</h2>
+                            <p className="lead mb-4">К оплате: ${getTotalPrice()}</p>
+                            <button className="btn btn-primary btn-lg">Оформить заказ</button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
+    );
+};
+
+export default Cart;
--- a/react-app/src/pages/ErrorPage.jsx
+++ b/react-app/src/pages/ErrorPage.jsx
@ -0,0 +1,19 @@
+import { Alert, Button, Container } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
+
+const ErrorPage = () => {
+    const navigate = useNavigate();
+
+    return (
+        <Container fluid className="p-2 row justify-content-center">
+            <Container className='col-md-6'>
+                <Alert variant="danger">
+                    Страница не найдена
+                </Alert>
+                <Button className="w-25 mt-2" variant="primary" onClick={() => navigate(-1)}>Назад</Button>
+            </Container>
+        </Container>
+    );
+};
+
+export default ErrorPage;
--- a/react-app/src/pages/PageEdit.jsx
+++ b/react-app/src/pages/PageEdit.jsx
@ -0,0 +1,99 @@
+import { useState } from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import { Modal, Button, Form } from 'react-bootstrap';
+
+const ItemsUpdateModal = ({ showModal, handleClose }) => {
+    const [itemId, setItemId] = useState('');
+    const [price, setPrice] = useState(0);
+    const [count, setCount] = useState(1);
+    const [image, setImage] = useState(null);
+    const [selectedItem, setSelectedItem] = useState('');
+
+    const handleImageChange = (e) => {
+        if (e.target.files[0]) {
+            setImage(URL.createObjectURL(e.target.files[0]));
+        }
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        // Handle form submission logic here
+        console.log({ itemId, selectedItem, price, count, image });
+        // Reset form or close modal after submission if needed
+        handleClose();
+    };
+
+    return (
+        <Modal show={showModal} onHide={handleClose} backdrop="static" keyboard={false}>
+            <Modal.Header closeButton>
+                <Modal.Title>Update Item</Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                <div className="text-center">
+                    <img
+                        src={image || 'https://via.placeholder.com/200'}
+                        className="rounded rounded-circle"
+                        alt="Preview"
+                    />
+                </div>
+                <Form onSubmit={handleSubmit} noValidate>
+                    <input type="hidden" value={itemId} onChange={(e) => setItemId(e.target.value)} />
+                    <Form.Group className="mb-2">
+                        <Form.Label>Товары</Form.Label>
+                        <Form.Select
+                            required
+                            value={selectedItem}
+                            onChange={(e) => setSelectedItem(e.target.value)}
+                        >
+                            {/* Add options dynamically here */}
+                            <option value="">Select an item</option>
+                            {/* Example options */}
+                            <option value="item1">Item 1</option>
+                            <option value="item2">Item 2</option>
+                        </Form.Select>
+                    </Form.Group>
+                    <Form.Group className="mb-2">
+                        <Form.Label>Цена</Form.Label>
+                        <Form.Control
+                            type="number"
+                            value={price}
+                            min="1000.00"
+                            step="0.50"
+                            onChange={(e) => setPrice(parseFloat(e.target.value))}
+                            required
+                        />
+                    </Form.Group>
+                    <Form.Group className="mb-2">
+                        <Form.Label>Количество</Form.Label>
+                        <Form.Control
+                            type="number"
+                            value={count}
+                            min="1"
+                            step="1"
+                            onChange={(e) => setCount(parseInt(e.target.value, 10))}
+                            required
+                        />
+                    </Form.Group>
+                    <Form.Group className="mb-2">
+                        <Form.Label>Изображение</Form.Label>
+                        <Form.Control
+                            type="file"
+                            accept="image/*"
+                            onChange={handleImageChange}
+                        />
+                    </Form.Group>
+                </Form>
+            </Modal.Body>
+            <Modal.Footer>
+                <Button variant="secondary" onClick={handleClose}>
+                    Закрыть
+                </Button>
+                <Button variant="primary" type="submit" form="items-form">
+                    Сохранить
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+};
+
+export default ItemsUpdateModal;
--- a/react-app/src/pages/WelcomePage.jsx
+++ b/react-app/src/pages/WelcomePage.jsx
@ -0,0 +1,66 @@
+import { Link } from 'react-router-dom';
+
+const WelcomePage = () => {
+    return (
+        <>
+            <main>
+                <section className="hero py-5">
+                    <div className="container">
+                        <h1 className="display-4 mb-4">Приветствуем на Book Store!</h1>
+                        <p className="lead mb-4">На нашем сайте вы найдете множество книг на любой вкус :)</p>
+                        <a href="/html/book-list.html" className="btn btn-primary btn-lg">Перейти в каталог</a>
+                    </div>
+                </section>
+
+                <section className="featured-books py-5">
+                    <div className="container">
+                        <h2 className="mb-4">Хиты этого месяца</h2>
+                        <div className="row">
+                            <div className="col-md-4 mb-4">
+                                <div className="card">
+                                    <img src="https://via.placeholder.com/300x200" className="card-img-top" alt="Book Cover"/>
+                                        <div className="card-body">
+                                            <h5 className="card-title">Война и мир</h5>
+                                            <p className="card-text">Лев Толстой</p>
+                                            <Link to="/BookDetails">
+                                                <a href="#"
+                                                   className="btn btn-primary">Карточка товара</a>
+                                            </Link>
+                                        </div>
+                                </div>
+                            </div>
+                            <div className="col-md-4 mb-4">
+                                <div className="card">
+                                    <img src="https://via.placeholder.com/300x200" className="card-img-top" alt="Book Cover"/>
+                                        <div className="card-body">
+                                            <h5 className="card-title">Война и мир</h5>
+                                            <p className="card-text">Лев Толстой</p>
+                                            <Link to="/BookDetails">
+                                                <a href="#"
+                                                   className="btn btn-primary">Карточка товара</a>
+                                            </Link>
+                                        </div>
+                                </div>
+                            </div>
+                            <div className="col-md-4 mb-4">
+                                <div className="card">
+                                    <img src="https://via.placeholder.com/300x200" className="card-img-top" alt="Book Cover"/>
+                                        <div className="card-body">
+                                            <h5 className="card-title">Война и мир</h5>
+                                            <p className="card-text">Лев Толстой</p>
+                                            <Link to="/BookDetails">
+                                                <a href="#"
+                                                   className="btn btn-primary">Карточка товара</a>
+                                            </Link>
+                                        </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </main>
+        </>
+    );
+};
+
+export default WelcomePage;
--- a/react-app/vite.config.js
+++ b/react-app/vite.config.js
@ -0,0 +1,13 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    sourcemap: true,
+    chunkSizeWarningLimit: 1024,
+    emptyOutDir: true,
+  },
+});