Сделали дочерние компоненты и свойства

db.json

@@ -1,55 +1,25 @@
 {
     "products": [
-		{
-			"id": 1,
-			"name": "Sneakers Red & White 2025",
-			"brand": "NIKE",
-			"price": 38.0,
-			"imageUrl": "./src/assets/images/sneakers-image.jpg"
-		},
-		{
-			"id": 2,
-			"name": "Sneakers Red & White 2025",
-			"brand": "NIKE",
-			"price": 38.0,
-			"imageUrl": "./src/assets/images/sneakers-image.jpg"
-		},
-		{
-			"id": 3,
-			"name": "Sneakers Red & White 2025",
-			"brand": "NIKE",
-			"price": 38.0,
-			"imageUrl": "./src/assets/images/sneakers-image.jpg"
-		}
-	],
-    "articles": [
-        {
-            "id": 1,
-            "title": "Статья 1",
-            "author": "Иванов Иван Иванович",
-            "createDate": "2020-01-15",
-            "content": "Основной текст статьи"
-        }
-    ],
-    "projects": [
         {
             "id":1,
-            "name": "Project 1",
-            "status": "work",
-            "description": "Very important!",
-            "tasks": [
-                {
-                    "id":1,
-                    "title":"Task 1",
-                    "description": "Описание задачи"
+            "name":"Кросовки Red & White 2025",
+            "brand":"NIKE",
+            "price":38.0,
+            "imageUrl":"./assets/images/sneakers-image.jpg"
         },
         {
             "id":2,
-                    "title":"Task 2",
-                    "description": "Описание задачи 2"
+            "name":"Кросовки белые 2024",
+            "brand":"NIKE",
+            "price":40.0,
+            "imageUrl":"./assets/images/sneakers-image.jpg"
+        },
+        {
+            "id":3,
+            "name":"Sneakers Red & White 2025",
+            "brand":"NIKE",
+            "price":46.0,
+            "imageUrl":"./assets/images/sneakers-image.jpg"
         }
     ]
-        }
-    ]
-    
 }

package.json

@@ -4,8 +4,8 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-		"dev": "vite",
     "server": "json-server --watch db.json --port 8000",
+    "dev": "vite",
     "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview"

src/App.jsx

@@ -1,6 +1,68 @@
 import styles from './App.module.scss'
+import SneakersImage from './assets/images/sneakers-image.jpg'
 import { FaRegUser } from 'react-icons/fa'
-import React, { useState, useEffect } from 'react'
+import React from 'react'
+
+function EffectComponent() {
+    const [size, setSize] = React.useState(100);
+    const boxRef = React.useRef(null);
+    
+    React.useEffect(() => {
+        const box = boxRef.current
+        if (box) {
+            const { width, height } = box.getBoundingClientRect()
+            console.log('[useEffect] Размеры (EffectComponent):', { width, height })
+        }
+    }, [size]);
+    
+    return (
+    <div style={{ marginBottom: '30px' }}>
+      <h3>useEffect</h3>
+      <div
+        ref={boxRef}
+        style={{
+          width: size,
+          height: size,
+          backgroundColor: 'lightblue',
+          transition: 'all 1.3s',
+        }}
+      />
+      <button onClick={() => setSize(prev => prev + 20)}>Увеличить</button>
+    </div>
+  )
+}
+
+function LayoutEffectComponent() {
+  const [size, setSize] = React.useState(100)
+  const boxRef = React.useRef(null)
+
+  React.useLayoutEffect(() => {
+    const box = boxRef.current
+    if (box) {
+      const { width, height } = box.getBoundingClientRect()
+      console.log('[useLayoutEffect] Размеры (LayoutEffectComponent):', {
+        width,
+        height,
+      })
+    }
+  }, [size])
+
+  return (
+    <div>
+      <h3>useLayoutEffect</h3>
+      <div
+        ref={boxRef}
+        style={{
+          width: size,
+          height: size,
+          backgroundColor: 'lightgreen',
+          transition: 'all 1.3s',
+        }}
+      />
+      <button onClick={() => setSize(prev => prev + 20)}>Увеличить</button>
+    </div>
+  )
+}
 
 function Header() {
 	const handleChange = event => {
@@ -12,130 +74,31 @@ function Header() {
 		<header className={styles.header}>
 			<div>
 				<h2>Store</h2>
-				<input type='text	' placeholder='Search...' onChange={handleChange} />
+				<input type='text' placeholder='Search...' onChange={handleChange} />
+			</div>
+			<div>
+				<FaRegUser size={24} color='#3258e3' />
+				<button>Profile</button>
 			</div>
-            <UserMenu isLoggedin={true} userName="Bob" role="user" />
 		</header>
 	)
 }
 
-function UserMenu({ userName }) {
-    const [loggedin,setLoggedin] = useState(false);
-    const [role, setRole] = useState('user');
+function ToolTip() {
+    const ref = React.useRef(null);
+    const [height,setHeight] = React.useState(0);
     
-    
-    if (loggedin) {
-        return (
-            <div className="user-menu">
-                <nav>
-                    <a href="/settings">Настройки</a>
-                    {role === "admin" && <a href="/admin">Панель администратора</a>}
-                    <div>
-				        <FaRegUser size={24} color='#3258e3' />
-				        <button>Profile</button>
-				        <button onClick={() => setLoggedin(false)}>Exit</button>
-			        </div>
-                </nav>
-            </div>
-        );
+    React.useLayoutEffect(()=>{
+        if (ref.current) {
+            const rect = ref.current.getBoundingClientRect();
+            setHeight(rect.height);
         }
-    return (
-        <div className="login-form">
-            <button onClick={() => setLoggedin(true)}>Войти</button>
-        </div>
-    );
+    },[])
+    
+    return <div ref={ref} style={{height: '40px'}}>Высота: {height}</div>
 }
 
-function ArticleViewer({ articleId }) {
-    const [article,setArticle] = useState(null);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState(null);
-    
-    useEffect(() => {
-        const fetchArticle = async () => {
-            try {
-                setLoading(true);
-                setError(null);
-                const responce = await fetch(`http://localhost:8000/articles/${articleId}`)
-                
-                if(!responce.ok) {
-                    throw new Error('Не удалось загрузить статью');
-                }
-                
-                const data = await responce.json();
-                setArticle(data);
-            } catch(err) {
-                setError(err.message);
-            } finally {
-                setLoading(false);
-            }
-        }
-        fetchArticle();
-    },[articleId]);
-    
-    if (loading) {
-        return (
-            <div className={styles.loading}>
-                <div className="spinner"></div>
-                <p>Загружаем статью ...</p>
-            </div>
-        );
-    }
-    if (error) {
-        return (
-            <div className={styles.error}>
-                <h3>Ошибка загрузки</h3>
-                <p>{error}</p>
-                <button onClick={()=>window.location.reload()}>Попробовать еще</button>
-            </div>
-        );
-    }
-    if (!article) {
-        return (
-            <div className={styles.empty}>
-                <p>Статья не найдена</p>
-            </div>
-        );
-    }
-    return (
-        <div className={styles.article}>
-            <h1>{article.title}</h1>
-            <div className="article-meta">
-                <span>Автор: {article.author}</span>
-                <span>Дата: {new Date(article.createDate).toLocaleDateString()}</span>
-            </div>
-            <div className="article-body">{article.content}</div>
-        </div>
-    );
-}
-
-function ProjectDashboard({ projects }) {
-    return (
-        <div className={styles.dashboard}>
-            <h1>Панель управления проектами</h1>
-            {projects.map(project => (
-                <div key={project.id} className={styles.project}>
-                    <h2>{project.name}</h2>
-                    <span className={styles.project_status}>{project.status}</span>
-                    <p className={styles.project_description}>{project.description}</p>
-                    
-                    {project.tasks.length >0 && (
-                    <div className={styles.tasks}>
-                        {project.tasks.map(task => (
-                            <div className={styles.task_card} key={task.id}>
-                            <h4>{task.title}</h4>
-                            <p>{task.description}</p>
-                            </div>
-                        ))}
-                    </div>
-                    )}
-                </div>
-            ))}
-        </div>
-    )
-}
-
-function Product({ name, brand, price, imageUrl }) {
+function Product({ name, brand, price, url }) {
 	const [isLiked, setIsLiked] = React.useState(false)
     
 	const toggleLike = () => {
@@ -148,7 +111,8 @@ function Product({ name, brand, price, imageUrl }) {
 
 	return (
 		<div className={styles.product}>
-			<img src={imageUrl} alt='' />
+			<img src={SneakersImage} alt='' />
+			<ToolTip />
 			<div className={styles.content}>
 				<div className={styles.title}>
 					<h4>{name}</h4>
@@ -179,65 +143,60 @@ function Product({ name, brand, price, imageUrl }) {
 	)
 }
 
+function MyComponent({ children }) {
+    return <div className="wrapper">{children}</div>;
+}
+
+function RowList({ children }) {
+    return (
+        <div className="rowList">
+            {children.map(child => (
+                <div className="row">{child}</div>
+            ))}
+            <p>{React.Children.count(children)}</p>
+        </div>
+    );
+}
+
 function App() {
-	const [products, setProducts] = React.useState([])
+    const [products,setProducts] = React.useState([]);
     
     const getProducts = async () => {
-		const response = await fetch('http://localhost:8000/products')
-		const data = await response.json()
-		setProducts(data)
+        const responce = await fetch('http://localhost:8000/products');
+        const data = await responce.json();
+        setProducts(data);
     }
-
 	React.useEffect(() => {
-		getProducts()
-	}, [])
-    
+        getProducts();
+    },[]);
+    console.log({...products});
     return (
 		<>
 			<div className={styles.container}>
 				<Header />
 			</div>
 			<div className={styles.container}>
-			    {products.length > 0 ? (
 				<ul className={styles.list}>
 				    {products.map(product => (
-                                <li key={product.id}>
+                        <li>
                             <Product {...product} />
 					    </li>
                     ))}
 				</ul>
-                    ) : (
-                        <h3>Список товаров пуст</h3>
-                    )
-                }
+            <MyComponent>
+                <h4>Заголовок</h4>
+                <p>Привет!</p>
+            </MyComponent>
+            <ol>
+            <RowList>
+                <li>первый</li>
+                <li>второй</li>
+                <li>третий</li>
+            </RowList>
+            </ol>
 			</div>
 		</>
 	)
 }
 
-function App2() {
-	const [projects, setProjects] = React.useState([])
-
-	const getProjects = async () => {
-		const response = await fetch('http://localhost:8000/projects')
-		const data = await response.json()
-		setProjects(data)
-	}
-
-	React.useEffect(() => {
-		getProjects()
-	}, [])
-
-    return (
-        <>
-			<div className={styles.container}>
-				<Header />
-			</div>
-			<div className={styles.container}>
-                <ProjectDashboard projects={projects} />
-            </div>
-        </>
-    )
-}
-
-export default App2
+export default App

src/App.module.scss

@@ -11,13 +11,6 @@
 	border-bottom-left-radius: 10px;
 	border-bottom-right-radius: 10px;
 
-    nav {
-    	display: flex;
-	    justify-content: space-around;
-        flex-direction: row;
-	    align-items: center;
-    }
-    
 	div {
 		&:first-child {
 			display: flex;
@@ -68,14 +61,6 @@
 .container {
 	max-width: 1220px;
 	margin: 0 auto;
-    .article {
-        text-align: center;
-        background-color: lightgray;
-    }
-    .error {
-        text-align: center;
-        background-color: lightcoral;
-    }
 }
 
 .list {