Build e-Commerce Website with React and Ant Design | Simple e-Commerce Website in React JS

Published: 01 December 2022
on channel: CodeWithAamir
27,705
417

#reactjs #antd #ecommercewebsite
In this video tutorial I have explained how to build an e-Commerce website with React and Ant Design.

This video focuses on
How to build an e-Commerce website with React and Ant Design.
Simple e-Commerce Website development in React JS
How to create simple e-commerce website using ReactJS and Ant Design UI components
How to create header for e-commerce website in react js
-How to create footer for e-commerce website in react js
How to add react router dom navigation for ecommerce react website
How to create header menu and sub menu for e commerce categories listing
How to fetch e commerce related products from server in reactjs
How to populate e commerce products in react js app using ant design card
How to show discount badge ribbon on e commerce products in react app
How to show rating on e commerce products in react app
How to show add to cart button on e commerce products in react app
How to implement add to cart API call for ecommerce react website
How to show strike through price on e commerce products cards in react app
How to show view cart button
How to show cart list for ecommerce react website using ant design table
How to change cart quantity on the go on view cart
How to calculate grand total on cart view for ecommerce react website using ant design table summary prop function
How to use javascript map, reduce and promises
How to show badge on view cart button for ecommerce website in react js project
How to use typography for different content of react js project
How to use ant design drawer component
How to use ant design List component to show a list of e commerce products
How to add styling to e commerce website components
How to create different pages and components inside react application
How to integrate react e commerce website with server APIs
How to create checkout FORM for e commerce website in react using antd form component
How to add validation to e commerce checkout form to confirm order
How to show loading while products are loading/fetching
How to show success messages/feedback based on user action on e commerce website in react app
How to combine different ant design components to create a simple website in react js
How to user BrowserRouter, Routes and Route in react js application
How to define routes in a react application using react router dom
How to add product image preview in e commerce react website

If you are new to ant-design, I have already added an intro video on ant-design and overview of its components at    • Ant Design UI library Integration wit...   link, please go through that video to set up the ground for further components implementation.

Also in this video we will be using different ant design components, so if you have not gone through those already here are their specific videos to see how those components are being used in react app
Ant Design Button:    • How to use Ant Design Button componen...  
Ant Design Input:    • How to use Ant Design Input component...  
Ant Design Select:    • Ant Design Select component usage in ...  
Ant Design Drawer:    • How to Use Ant Design Drawer Componen...  
Ant Design Form:    • Ant Design Form component usage in Re...  
Ant Design Form Validation:    • How to Create and Validate Ant Design...  
Ant Design Menu:    • How to use Ant Design Menu Component ...  
Ant Design Spin:    • Ant Design Spin component usage in Re...  
Ant Design Message:    • Ant Design Alert and Message componen...  
Ant Design Table:    • Ant Design Table component usage in R...  
Ant Design Typography:    • Ant Design Typography | Paragraph, Ti...  
Ant Design Card:    • How to Create React JS Card Component...  
Ant Design Rate:    • How to Use Ant Design Star Rating Com...  
Ant Design Icon:    • How to use Ant Design Icons and custo...  

Also used different hooks and react/javascript concepts based on these videos
useState Hook:    • Learn React useState Hook with Exampl...  
useEffect Hook:    • Learn React useEffect Hook with Examp...  
React Router Dom:    • How to implement Routes in React JS |...  
JavaScript Promise:    • JavaScript Promises Tutorial | How to...  
React Flexbox:    • React FlexBox Tutorial for Beginners ...  


The codebase developed in this tutorial can be access via Github at following link
https://github.com/aamirjaved844/Simp...

For more details on ant-design, please visit its documentation at https://ant.design/components/overview

Happy Coding!


Watch video Build e-Commerce Website with React and Ant Design | Simple e-Commerce Website in React JS online without registration, duration hours minute second in high quality. This video was added by user CodeWithAamir 01 December 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 27,705 once and liked it 417 people.