followed react-petshop-5

src/index.js

+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+var container = document.getElementById('root');
+var root = ReactDOM.createRoot(container);
+
+root.render(<App sitename="React PetShop"/>);
+
+module.hot.accept()

src/products.js

+import React, {useState, useEffect} from 'react';
+
+const Products = ({cart, onSetCart}) => {
+
+  let [products, setProducts] = useState([]);
+
+  useEffect(() => {
+    /* wget https://raw.githubusercontent.com/gilbutITbook/007024/master/chapter-05/products.json */
+    fetch('./products.json')
+      .then((r) => r.json())
+      .then(data => {
+        setProducts([...data.products]);
+        console.log(products);
+      })
+  }, [])
+
+  const formatPrice = (price) => {
+    if (!parseInt(price)) { return ""; }
+    if (price > 99999) {
+      var priceString = (price / 100).toFixed(2);
+      var priceArray = priceString.split("").reverse();
+      var index = 3;
+      while (priceArray.length > index + 3) {
+        priceArray.splice(index + 3, 0, ",");
+        index += 4;
+      }
+      return "$" + priceArray.reverse().join("");
+    } else {
+      return "$" + (price / 100).toFixed(2);
+    }
+  }
+
+  const addToShoppingCart = (product) => {
+    onSetCart([...cart, product]);
+  }
+
+  const canAddToCart = (product) => {
+    if (product.availableInventory) {
+     return product.availableInventory > cart.filter((p) => p.id == product.id).length;
+    }
+    return false;
+  }
+
+  const checkRating = (n, product) => {
+    return product.rating - n >= 0;
+  }
+
+  const nameOrder = (p, q) => {
+    let [pLow, qLow] = [p.title.toLowerCase(), q.title.toLowerCase()]
+    if (pLow > qLow) {
+      return 1;
+    }
+    else if(pLow == qLow) {
+      return 0;
+    }
+    else {
+      return -1;
+    }
+  }
+
+    return (
+      <>
+      {products && products.sort(nameOrder).map(product => {
+        let nProductInCart = cart.filter((p) => p.id == product.id).length;
+        console.log(product.title, nProductInCart);
+        return (
+          <div className="row product">
+            <div className="col-md-5 col-md-offset-0">
+              <figure>
+                <img className="product" src={product.image} />
+              </figure>
+            </div>
+            <div className="col-md-6 col-md-offset-0 description">
+              <h1> {product.title} </h1>
+              <p> {product.description} </p>
+              <p className="price"> {formatPrice(product.price)} </p>
+              {canAddToCart(product) &&
+                <button className="btn btn-primary btn-lg"
+                  onClick={() => addToShoppingCart(product)}> 장바구니 담기
+                </button>
+              }
+
+              <span className="inventory-message">
+                {product.availableInventory == nProductInCart && `품절!(Sold out)`}
+                {nProductInCart == 0 && `지금 구매하세요.`}
+                {product.availableInventory > nProductInCart && nProductInCart > 0 &&
+                `${product.availableInventory - nProductInCart} 남았습니다.` }
+              </span>
+              <div className="rating">
+                {[1, 2, 3, 4, 5].map((i) => {
+                  return <span className={checkRating(i, product) ? "rating-active" : ""}>☆</span>
+                })
+                }
+              </div>
+            </div>
+          </div>
+        )
+      })
+    }
+    </>
+  )
+}
+
+export default Products;
\ No newline at end of file

webpack.config.js

+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+    entry: {
+        app: './src/index.js'
+    },
+    output: {
+        filename: '[name].bundle.js',
+        path: path.resolve(__dirname, 'public')
+    },
+    module: {
+        rules: [{
+            test: /\.(js|jsx)$/,
+            exclude: /node_modules/,
+            use: {
+                loader: 'babel-loader'
+            }
+        },
+                {
+            test: /\.css$/i,
+            use: ['style-loader', 'css-loader']
+        },
+        {
+            test: /\.(png|jpe?g|gif)$/i,
+            loader: 'file-loader',
+        }]
+    },
+    devServer: {
+        static: {
+            directory: path.join(__dirname, 'public'),
+        },
+        allowedHosts: 'all',
+    },
+    plugins: [
+        new webpack.HotModuleReplacementPlugin()
+    ],
+    watchOptions: {
+        ignored: '**/node_modules',
+    },
+};