created pages, Home component

README.md

@@ -20,4 +20,5 @@ Welcome to my project 'NOODLE & BYTES'. This is a self-study project for creatin
 ![GitHub top language](https://img.shields.io/github/languages/top/stereogamm/web-shop?style=for-the-badge&labelColor=%23e6dbbb&color=%23c30000)
 
 
-![Repo Card](https://github-readme-stats.vercel.app/api/pin/?username=stereogamm&repo=web-shop&theme=ambient_gradient&show_owner=true&hide=issues)
+![Repo Card](https://github-readme-stats.vercel.app/api/pin/?username=stereogamm&repo=web-shop&theme=ambient_gradient&show_owner=true&hide=issues)
+

src/App.js

@@ -1,60 +1,16 @@
-import React, { useState, useEffect } from "react";
-import {
-  BrowserRouter,
-  Route,
-  Routes
-} from "react-router-dom";
-import { v4 as uuidv4 } from "uuid";
-import "./scss/app.scss";
+import React from "react";
+// import "./scss/app.scss";
+
 import Header from "./Components/Header.jsx";
-import Categories from "./Components/Categories.jsx";
-import Card from "./Components/Card/Card.jsx";
-import Sort from "./Components/Sort.jsx";
-import SkeletonCard from "./Components/Card/SkeletonCard.jsx";
+import Home from "./pages/Home.jsx";
 
 function App() {
-  const [items, setItems] = useState([]);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    fetch("https://6704f473031fd46a830e0b4e.mockapi.io/items")
-      .then((response) => response.json())
-      .then((data) => {
-        setItems(data);
-        setIsLoading(false);
-      })
-      .catch((error) => {
-        console.error("Error is: ", error);
-        setIsLoading(false);
-      });
-  }, []);
-
   return (
     <div className="wrapper">
       <Header />
       <div className="content">
-        <div className="container">
-          <div className="content__top">
-            <Categories />
-            <Sort />
-          </div>
-          <h2 className="content__title">Ctrl + Slurp + Del</h2>
-          <div className="content__items">
-            {isLoading
-              ? [...new Array(6)].map((_, index) => (
-                  <SkeletonCard key={index} />
-                ))
-              : items.map((obj) => (
-                  <Card
-                    key={uuidv4()}
-                    price={obj.price}
-                    title={obj.title}
-                    image={obj.image}
-                    sizes={obj.sizes}
-                    types={obj.types}
-                  />
-                ))}
-          </div>
+        <div className="container" >
+        <Home />
         </div>
       </div>
     </div>

src/index.js

@@ -2,6 +2,7 @@
 import React from "react";
 // Импортируем ReactDOM для рендеринга React-компонентов в DOM
 import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
 
 import "./scss/app";
 
@@ -13,7 +14,9 @@ const root = ReactDOM.createRoot(document.getElementById("root"));
 
 //Рендерим код из App.js
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+  <BrowserRouter>
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  </BrowserRouter>,
 );

src/pages/Home.jsx

@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from "react";
+import { v4 as uuidv4 } from "uuid";
+
+import "../scss/app.scss";
+import Categories from "../Components/Categories";
+import Card from "../Components/Card/Card";
+import Sort from "../Components/Sort";
+import SkeletonCard from "../Components/Card/SkeletonCard";
+
+const Home = () => {
+  const [items, setItems] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    fetch("https://6704f473031fd46a830e0b4e.mockapi.io/items")
+      .then((response) => response.json())
+      .then((data) => {
+        setItems(data);
+        setIsLoading(false);
+      })
+      .catch((error) => {
+        console.error("Error is: ", error);
+        setIsLoading(false);
+      });
+  }, []);
+
+  return (
+    <>
+      <div className="content__top">
+        <Categories />
+        <Sort />
+      </div>
+      <h2 className="content__title">Ctrl + Slurp + Del</h2>
+      <div className="content__items">
+        {isLoading
+          ? [...new Array(6)].map((_, index) => <SkeletonCard key={index} />)
+          : items.map((obj) => (
+              <Card
+                key={uuidv4()}
+                price={obj.price}
+                title={obj.title}
+                image={obj.image}
+                sizes={obj.sizes}
+                types={obj.types}
+              />
+            ))}
+      </div>
+    </>
+  );
+};
+
+export default Home;