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

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

@@ -3,6 +3,67 @@ 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 => {
 		const newValue = event.target.value
@@ -13,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' />
@@ -23,7 +84,21 @@ function Header() {
 	)
 }
 
-function Product() {
+function ToolTip() {
+    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 = () => {
@@ -37,9 +112,10 @@ function Product() {
 	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>
 					<div className={styles.actions}>
 						<button
 							className={styles.likeButton}
@@ -60,14 +136,40 @@ function Product() {
 						<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() {
+    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}>
@@ -75,16 +177,23 @@ function App() {
 			</div>
 			<div className={styles.container}>
 				<ul className={styles.list}>
+				    {products.map(product => (
                         <li>
-						<Product />
+                            <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>
 		</>
 	)