🔴 Shopping App with ReactJS | ReactJS project | React Hooks | Axios | Fake Store API | Part [1]

Introduction

In this tutorial, you will learn how to build a shopping app using React.js. We will leverage the Fake Store API to display product images and information. The application will demonstrate the use of React Hooks such as useState and useEffect, along with Axios for fetching data. By the end of this guide, you will have a functional shopping application ready to showcase.

Step 1: Set Up Your React Environment

Before you start coding, ensure you have the necessary tools installed.

• Install Node.js if you haven't already.
• Create a new React app using Create React App:

  npx create-react-app shopping-app
  

• Navigate to your project directory:

  cd shopping-app
  

Step 2: Install Axios

Axios will be used to make HTTP requests to the Fake Store API.

• Run the following command to install Axios:

  npm install axios
  

Step 3: Create Product Component

You will create a component to display individual products.

• Inside the src folder, create a new file named Product.js.
• Add the following code to define the Product component:

  import React from 'react';
  
  const Product = ({ product }) => {
      return (
          <div className="product">
              <img src={product.image} alt={product.title} />
              <h2>{product.title}</h2>
              <p>${product.price}</p>
          </div>
      );
  };
  
  export default Product;
  

Step 4: Fetch Products from Fake Store API

You need to fetch product data using Axios and React hooks.

• Open src/App.js and modify it as follows:

  import React, { useEffect, useState } from 'react';
  import axios from 'axios';
  import Product from './Product';
  
  const App = () => {
      const [products, setProducts] = useState([]);
      const [loading, setLoading] = useState(true);
  
      useEffect(() => {
          const fetchProducts = async () => {
              try {
                  const response = await axios.get('https://fakestoreapi.com/products');
                  setProducts(response.data);
              } catch (error) {
                  console.error("Error fetching products:", error);
              } finally {
                  setLoading(false);
              }
          };
  
          fetchProducts();
      }, []);
  
      if (loading) return <p>Loading...</p>;
  
      return (
          <div className="app">
              {products.map(product => (
                  <Product key={product.id} product={product} />
              ))}
          </div>
      );
  };
  
  export default App;
  

Step 5: Style Your Application

Add some basic styles to make your app visually appealing.

• Create a styles.css file in the src folder.
• Add your CSS styles. For example:

  .app {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
  }
  
  .product {
      border: 1px solid #ccc;
      margin: 10px;
      padding: 10px;
      width: 200px;
      text-align: center;
  }
  
  img {
      max-width: 100%;
      height: auto;
  }
  

• Import the CSS file in App.js:

  import './styles.css';
  

Conclusion

You have successfully created a basic shopping application using React.js, Axios, and the Fake Store API. You learned how to set up a React environment, fetch data with Axios, and display product information.

Next steps could include adding functionality for product details, a shopping cart, or improving the UI with more advanced styling. Don't forget to explore the React documentation to enhance your understanding further!