Build e-Commerce Website with React and Ant Design | Simple e-Commerce Website in React JS
25.5 هزار بار بازدید -
2 سال پیش
-
#reactjs
#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!
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!
2 سال پیش
در تاریخ 1401/09/10 منتشر شده
است.
25,580
بـار بازدید شده