React

by dav sev

HTML

<div id="app"></div>

CSS

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
    color: #333;
}

.App {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.App-header {
    text-align: center;
    padding: 10px 0;
    border-bottom: 2px solid #ddd;
    margin-bottom: 20px;
}

.heading {
    font-size: 2rem;
    color: #0077cc;
    margin-bottom: 10px;
}

h1 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #555;
}

.productlist {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.productitem {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fafafa;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease;
}

.productitem:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.productitem h3 {
    margin: 0 0 5px;
    font-size: 1.2rem;
    color: #333;
}

.productitem p {
    margin: 0;
    font-size: 1rem;
    color: #888;
}

React

const { useState, useEffect } = React;

function App () {
    const [ products, setProducts] = useState([]);
   
   const getProducts = async () => {
        const url = `https://fakestoreapi.com/products`,
            response =  await fetch( url ),
            responseJson = await response.json();

        if ( responseJson ) {
            setProducts( responseJson );
        }
    }

    useEffect( () => {
        getProducts();
    }, [] );


  return (
      <div className="App">
          <header className="App-header">
              <Heading products={ products }/>
          </header>

          <div>
              <ProductList
                  products={ products }
              />
          </div>
      </div>
  );
};

function Heading () {
    return (
        <div className="heading"> My Store :) </div>
    )
};

function ProductList ( {products} ) {
    return (
        <div className="productlist">
            <h1>products</h1>
            {
                products.map( ( product ) => {
                    return (
                        <ProductItem
                            product={ product }
                        />
                    );
                })
            }
        </div>
    );
};

function ProductItem ({product}) {
    return (
        <div key={product.id} className="productitem">
            <h3>{ product.title }</h3>
            <p>{ product.price }</p>
        </div>
    );
};


ReactDOM.render(<App />, document.getElementById('app'));