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

db.json

@@ -0,0 +1,25 @@
+{
+    "products": [
+        {
+            "id":1,
+            "name":"Кросовки Red & White 2025",
+            "brand":"NIKE",
+            "price":38.0,
+            "imageUrl":"./assets/images/sneakers-image.jpg"
+        },
+        {
+            "id":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,6 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
+    "server": "json-server --watch db.json --port 8000",
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint .",

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 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,7 +74,7 @@ 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' />
@@ -22,44 +84,116 @@ function Header() {
 	)
 }
 
-function Product() {
+function ToolTip() {
-	function handleClick() {
+    const ref = React.useRef(null);
+    const [height,setHeight] = React.useState(0);
+    
+    React.useLayoutEffect(()=>{
+        if (ref.current) {
+            const rect = ref.current.getBoundingClientRect();
+            setHeight(rect.height);
+        }
+    },[])
+    
+    return <div ref={ref} style={{height: '40px'}}>Высота: {height}</div>
+}
+
+function Product({ name, brand, price, url }) {
+	const [isLiked, setIsLiked] = React.useState(false)
+    
+	const toggleLike = () => {
+		setIsLiked(!isLiked)
+	}
+
+	function handleAddClick() {
 		console.log('Working!')
 	}
 
 	return (
 		<div className={styles.product}>
 			<img src={SneakersImage} alt='' />
+			<ToolTip />
 			<div className={styles.content}>
 				<div className={styles.title}>
-					<h4>Sneakers Red & White 2025</h4>
+					<h4>{name}</h4>
-					<button onClick={event => handleClick(event)}>+</button>
+					<div className={styles.actions}>
+						<button
+							className={styles.likeButton}
+							onClick={toggleLike}
+							aria-label={isLiked ? 'Убрать лайк' : 'Добавить лайк'}
+						>
+							<svg
+								width='18'
+								height='18'
+								viewBox='0 0 24 24'
+								fill={isLiked ? 'red' : 'none'}
+								stroke={isLiked ? 'red' : 'currentColor'}
+								strokeWidth='1.5'
+							>
+								<path d='M12 21.35L10.55 20.03C5.4 15.36 2 12.28 2 8.5C2 5.42 4.42 3 7.5 3C9.24 3 10.91 3.81 12 5.09C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.42 22 8.5C22 12.28 18.6 15.36 13.45 20.04L12 21.35Z' />
+							</svg>
+						</button>
+						<button onClick={handleAddClick}>+</button>
+					</div>
 				</div>
-				<p className={styles.description}>NIKE</p>
+				<p className={styles.description}>{brand}</p>
-				<p className={styles.price}>$38.00</p>
+				<p className={styles.price}>${price}</p>
 			</div>
 		</div>
 	)
 }
 
+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() {
-	return (
+    const [products,setProducts] = React.useState([]);
+    
+    const getProducts = async () => {
+        const responce = await fetch('http://localhost:8000/products');
+        const data = await responce.json();
+        setProducts(data);
+    }
+	React.useEffect(() => {
+        getProducts();
+    },[]);
+    console.log({...products});
+    return (
 		<>
 			<div className={styles.container}>
 				<Header />
 			</div>
 			<div className={styles.container}>
 				<ul className={styles.list}>
-					<li>
+				    {products.map(product => (
-						<Product />
+                        <li>
-					</li>
+                            <Product {...product} />
-					<li>
+					    </li>
-						<Product />
+                    ))}
-					</li>
-					<li>
-						<Product />
-					</li>
 				</ul>
+            <MyComponent>
+                <h4>Заголовок</h4>
+                <p>Привет!</p>
+            </MyComponent>
+            <ol>
+            <RowList>
+                <li>первый</li>
+                <li>второй</li>
+                <li>третий</li>
+            </RowList>
+            </ol>
 			</div>
 		</>
 	)

src/App.module.scss

@@ -97,21 +97,27 @@
 		font-size: 18px;
 	}
 
-	button {
+	.actions {
-		border: 1px solid $primary-color;
+		display: flex;
-		background-color: $white-color;
+		align-items: center;
-		color: $primary-color;
+		gap: 5px;
-		border-radius: 5px;
-		outline: 0;
 
-		font-size: 20px;
+		button {
-		padding: 5px 10px;
+			border: 1px solid $primary-color;
+			background-color: $white-color;
+			color: $primary-color;
+			border-radius: 5px;
+			outline: 0;
 
-		cursor: pointer;
+			font-size: 20px;
+			padding: 5px 10px;
 
-		&:hover {
+			cursor: pointer;
-			background-color: $seconday-color;
+
-			color: $white-color;
+			&:hover {
+				background-color: $seconday-color;
+				color: $white-color;
+			}
 		}
 	}
 }