React

by dav sev

HTML

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

<!-- 
Fetch Data: Retrieve product data from the API endpoint https://fakestoreapi.com/products.
Set State: Store the fetched data in the component's state.
Create Product List: Use the ProductList component to display a list of products.
Pass Props: Provide the fetched data as props to the ProductList component.
Display Details: Ensure the ProductList component renders individual products using the ProductItem component, which should display the details of each product.
-->

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([]);
    
    async function getProduct(){
    const res=await fetch('https://fakestoreapi.com/products');
    const data = await res.json();
    setProducts(data);
    console.log(data);
    }

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


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

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

function ProductList (props) {

    return (
        <div className="productlist">
            <h1>products</h1>
            
        </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'));