React Shopping Cart Tutorial | Context API with useReducer Hook in React JS

RoadsideCoder
RoadsideCoder
228.1 هزار بار بازدید - 3 سال پیش - #reactshoppingcart
#reactshoppingcart #useContext#ReactJSProject #useReducer

Build a Shopping Cart Project in React JS in one video. We will use Context API with useReducer Hook for State Management. Learn Hooks like createContext and useContext. We will learn add to cart functionality along with sorting and filtering products by search also.

Source Code -
https://github.com/piyush-eon/React-s...

Live Site -
https://shopping-cart-with-reactjs.ne...

If any questions, ask here -
Instagram: roadsidecoder


Context API Tutorial -
React Context API with Project | useC...

React Router Tutorial -
React Router Dom [ Full Tutorial ] | ...

00:00:00 Intro
00:00:24 Project Overview
00:02:53 Initialize new React App
00:03:23 Setup React Bootstrap
00:05:29 Header Component
00:12:05 Creating Page Routes
00:14:43 Setup Context API
00:17:10 Generating Products JSON
00:20:09 useReducer Hook
00:23:43 useContext Hook
00:24:19 Home Page UI
00:28:13 Filter Component UI
00:30:55 Rating Component UI
00:35:27 SingleProduct Component UI
00:40:04 Add / Remove from Cart Functionality
00:45:20 Header Cart Dropdown
00:50:21 Cart Page
01:00:00 Change Cart Quantity Functionality
01:01:53 Filters Implementation
01:02:18 Filters useReducer
01:12:22 Transform Products Logic
01:16:44 Mobile Responsive Styles
01:17:56 Outro

Movie App in React JS and Material UI -
Movies and TV Series Searching App in...

Quiz App in React JS and Material UI -
Quiz App in React JS with 22 Categori...

Dictionary App in React JS and Material UI -
12 Language Dictionary App in React J...

Learn React From Scratch -
React JS Workshop Day 1 - Basics incl...
3 سال پیش در تاریخ 1400/04/27 منتشر شده است.
228,112 بـار بازدید شده
... بیشتر