Building and Deploying a Modern REACT.Js Ecommerce Application – Part 02

Welcome to the second part of our series on building and deploying a modern REACT.Js Ecommerce Application. In this part, we will focus on creating a responsive cart page for our application.

Setting up the Cart Page

First, we need to create a new component for our cart page. We can do this by creating a new file called Cart.js and adding the necessary REACT code to define the layout and functionality of the cart page.

   {`import React from 'react';

   const Cart = () => {
      return (
         

            
Your Cart
            
               {/* Add cart items dynamically */}
            

               

                  
Product
                  
Price
                  
Quantity
                  
Total
               
            Checkout
         
      );
   }

   export default Cart;
   `}
   

In the above code, we have created a basic cart component with a title, a table to display cart items, and a checkout button. We can now integrate this component into our main application and pass the necessary cart data dynamically to populate the table.

Making the Cart Page Responsive

To make the cart page responsive, we can use the media queries in CSS to adjust the layout for different screen sizes. By defining specific styles for different screen widths, we can ensure that our cart page looks good on all devices.

   {`@media only screen and (max-width: 600px) {
      table {
         width: 100%;
      }
      table th, table td {
         padding: 10px;
         text-align: center;
      }
   }
   `}
   

In the example media query above, we have set the table to have a width of 100% and adjusted the padding and text alignment for better display on small screens. You can customize the styles as per your design requirements.

Conclusion

With the cart page set up and made responsive, our modern REACT.Js Ecommerce Application is coming together nicely. In the next part, we will focus on integrating a payment gateway and deploying the application for production use.