🛒 Building a Shopping Cart with Redux Toolkit 📅 Skillwaala’s Free Full Stack Web Development Course!

Name: 🛒 Building a Shopping Cart with Redux Toolkit 📅 Skillwaala’s Free Full Stack Web Development Course!
Uploaded: 2025-09-13T04:20:02+00:00
Duration: 51 min 39 s
Channel: skillwaala
Description: 🎯 What You’ll Learn Today ✅ Creating a Cart Slice with Redux Toolkit ✅ Adding Products to Cart ✅ Increasing / Decreasing Quantity ✅ Removing Products from Cart ✅ Calculating & Displaying Total Price ✅ Connecting Cart with UI Git Hub URL :- https://github.com/DevanshuSir/FullStack_SkillWaala_26May_2025.git

skillwaala

7 weeks ago

🎯 What You’ll Learn Today
✅ Creating a Cart Slice with Redux Toolkit
✅ Adding Products to Cart
✅ Increasing / Decreasing Quantity
✅ Removing Products from Cart
✅ Calculating & Displaying Total Price
✅ Connecting Cart with UI

Git Hub URL :- https://github.com/DevanshuSir/FullStack_SkillWaala_26May_2025.git

Category

📚

Learning

Transcript

Display full video transcript

00:00ठीक है चलो अपन यहाँ पर क्लास स्टार्ट करते है अपनी वह इसके लिए है सब चीजे आल सैट है मैं आपको स्क्रीन शेयर कर देता हूं इसक्रीन शेयर करने के बाद एक बार रेस्पोंस कर देना कि आपको एंटार स्क्रीन विजीबल भी है सब कुछ परकेक्ट चल रहा

00:30स्क्रीन विजीबल है एंड वाइस बिल्कुल परफेक्ट है उसके बाद अपन अपनी क्लास स्टार्ट करते है विजीबल ठीक है तो देखो आज अपने डिसकस करते हैं अपने आगे वाले टॉपिक के उपर अपने जितना प्रोजेक्ट बनाया था उसी को अपन आगे दे

01:00कि यहां पर उसी फोल्डर को पन ओपन कर लेते हैं यहां पर आ जाता हूं और शॉपिंग कार्ट करके अपने यहां पर अपना फोल्डर बनाया था उस फोल्डर पर आ जाते हैं

01:21यह add to cart का अपने पास यहां पर complete अपना यह था यहां पर अपने इसका एक बाल वापस से re-setup करना पड़ेगा क्योंकि system change है और system change है तो एक बाल मैं यहां पर इसको re-setup कर लेता हूं जल्दी से

01:33git batch को अपन यहां पर open कर लेते हैं और open करके अपन यहां पर इसको install कर लेते हैं

01:39cd करके अपने कूकिस में आना पड़ेगा अपने add to cart वाले के अंदर फिर उसके बाद अपन यहां पर कर लेते हैं npm install

01:45command में यहां पर रख रहता हूं ताकि node module और package loop JSON यहां पर अपनी generate हो जाए

01:52इसको install होने देते हैं पर निग बार

02:00परफेक्ट सब कुछ सही है फिर उसके बाद अपन यहां पर क्या command लिखेंगे

02:18npm और run dev यह command में यहां पर लिख देता हूं और अपन इसको run कर लेते हैं एक बार के लिए

02:24और अपना जाते हैं इसको run करके अपनी browser पर ठीके तो कुछ इस तरीके का interface अपने कल create करा था जिसके अंदर अपने यहां पर अपनी नयवार अपने यहां पर शू करी थी जिसमें अपने को यहां पर new links लगाये थे

02:45एक card का button अपने यहां पर बनाया icon इसी के साथ hero वाला section अपने यहां पर create करा और our products का section यहां पर अपने को इस तरीके से show हो रहा है ठीक है अब अपने को यहां पर क्या करना है ठीक है अब देखो यहां पर अपने को क्या करना है जैसे मैं add to card करू तो अपना product जो add to card होना �

03:15JSX करके अपन यहाँ पर create कर देते हैं और इसको अपन यहाँ पर create कर देते हैं और यहाँ पर इसको एक command देते हैं जल्दी से इसको मैं यहाँ पर close कर देता हूँ

03:37और यहां पर आब के एक कमान करें दो एक किरिएटिंग फोटर कर दो यूजिंग, यहां पर पर जाते है रियक्ट तो चुछ करी रहे है

03:49पम्हुम। ठीक है, ठीक है, popilot वाला अपने पाराव सा इक्ट्रिमिशन में भी इंस्टाल नहीं हूँ गया, इक बार में इंस्टाल कर लेता हूँ, GitHub

03:57कु आए णियुए है कि इस वेकल के लिए यहां पर गलत है इंस्ट्राइब यहां

04:27यह रहा तो इस तरीके से अपने पास यहां पर यह आ जाएगा परफेक्ट कोई शू नहीं है

04:33अब देखो यहां पर अपने इसको एक कमांड देते हैं मैं यहां पर करता हूँ

04:41create tab footer using dalwin css ठीक है यहां पर अपने यह बोला है continue with

04:54create up, create up के साथ continue करना पड़ेगा आपने को इसको continue कर देते हैं जलती से

05:09sign in कर लो इसको continue

05:13एफिये जिस अब इस इसी पोराउड पर से दोस्ते में विश्च ठाम थी एंडेकल आपर अब हमें जो एफिए बुड़ींग सर्वोइस एरर्र ठीक है वोईस वाले इस हुआ रहे है क्या गापर तो इस ब्रुड़ींग कर आपक्ट है इस ब्रूडाश वालाओं अग्ट

05:43इसके नजदी का आ जाता हूं ताकि आपको voice clear सुना ही दें ठीक है तो देखो यहां पर पर पने आते हैं इसके उपर और इसको अपने command दी है

05:55चेक टूक लॉंग तो बेट रेड़ी प्लीज एंसर यहां ठीक है वापस ही command देते हैं इसको मैं यहां पर बोलता हूं create

06:05a footer using यहां पर अपन कहते हैं अपना tellwind css

06:14tellwind css ठीक है यह मैंने यहां पर command दी इसको एक prompt अपने यहां पर assign कर दिया

06:21इस prompt के basis पे अपने को यह create करके देना चाहिए अपना footer

06:25यहां पर अपना से था सूँ आओब शेक में आदगा यहां

06:39कि वसंड़ा स कंपना इसक यहां हुआना है

06:48यह जहां फो प्प है थी यहीवे टेवें यह झाल

06:51जहालोगा इसक यहां देक दुखा है

06:52यहारे दयर काम्सरी लेट्ली के सимиका हैंindetच का...

06:55ठीक है तो यहां पर इसने यह complete footer अपने को create करके दिया है अपन इसको यहां पर check करते हैं यह अपने पास complete

07:05बान किया है इसको मैं अपने पर save कर देता हूंँ और इसी footer के अपने अपने यहां पर SSRC के अंदर मैं इसको

07:12कर लेता हूं अब बना जाते फुटर वाले सेक्शन को लगाना है कहां पर अपने अपने अपने फुटर शुव हो जाना चाहिए यहां पर मैं आता हूं और यहां पर आके चेक करोगे तो शॉपिंग कार्ट वोम प्रॉडक्ट कांटेक्ट और इस तरीके से इस नहीं यहां �

07:42करा है ठीक है यह आपका यहां पर क्या हो गई नयवबार हो गई और यह अपना फुटर हो गया फुटर जैसा ही कलर या तो सेम कर दो अपने नयवबार के उपर भी ताकि थोड़ा सा अच्छा लगे जैसे इसने फुटर को अगर आप चेक करोगे तो इसने बीजी जो दे �

08:12वी सेम कलर हो गई ठीक है तो इस तरीके से अपने पास इसका कलर भी क्या हो गया फीजी ग्रे हो गया आपने पास ठीक है

08:18टेक्स का kolore अपने पास यहाँ पर कैसे आ रहा है

08:20टेक्स का kolore भी अपन यहाँ पर change कर देते हैं

08:22अब इसने text का your color की Karl kis तरीके से change कर राङए

08:25एक बर अपन चेक करते हैं

08:26यह Left logo अपने पास यहाँ पर आ रहा है

08:28फिर उसके बाद यह डिव आ रहा है, जिसके अंदर इसने text को gray कर रखा है, हर एक anchor tag को उसने यहाँ पर text gray यहाँ पर pass कर रखा है, तो हर एक anchor tag को आपको यहाँ पर आके change करना पड़ेगा, वो अपन यहाँ पर कर देते हैं, text आप यहाँ पर क्या कर देना, white कर देना, ठीक है

08:58और यहाँ पर भी text अपना क्या कर दो, आप वाइट कर दो, ठीक है, यहाँ पर text white हो जाएगा, right में अपने पास लिधे अपना icon आ रहा है, इस icon को भी नहाँ पर change कर लेते हैं, इसका text ग्रेका रखा है, तो इसका text भी आपको क्या करना है, white करना है, ठीक है, तो इसका text भी

09:28इंस्पेक्ट करके देखलो, इंस्पेक्ट में भी सब कुछ सही है क्या है, अगर आप इसको क्लिक करते तो

09:32Home, Product, About, Contact फिल्कुल परफेक्ट सही है, सब कुछ, ठीक है, तो यहाँ पर अपने ये

09:38एक complete user interface अपने हैं पर create है

09:40चीक है

09:41यहां तक की चीज के लिए रहे कि आप चबी को

09:44सर वोईस बार बार break हो रही है थोड़ी थोड़ी

10:04अच्छा वोईस वाला issue अभी भी आ रहा है

10:06एक बार अपने चेक करते हैं

10:25अब एक बार बताना कि वोईस के लिए है या नहीं है

10:28या अब भी वोईस का इश्यू है

10:37एक बार रेस्पॉंस कर दो सभी कि वोईस के लिए है या नहीं है

10:56अब क्लियर है ठीक है

11:07ठीक है तो अपने यहां पर क्या किया अपने यहां पर सिर्फ इतना सा काम किया है एक फूटर अपने यहां पर क्रिएट करा है और

11:17और नेक्स अपन यहां पर अपना कार्ड भी यहां पर अपन क्रिएट कर लेते हैं जो अपना कार्ट हुआ वो कार्ट भी अपन यहां पर क्रिएट कर लेते हैं तो मैं यहां पर एक कोड़ नया बना देता हूं जिसको मैं यहां पर कहता हूं कार्ट डॉट जी एसक्स टीक

11:47आप रिखा धेते, क्या-क्या शो करना है, अपने तो इमिज करनी है, अपने को एक टाइटल सुख धना है

11:53�ristrick दिस्क्रिप्शन शू करना है, प्राइस शू करनी है ढेकर, increment अपन्णे कडि सूख है

12:02क्डعت 해서 oops no कि तोटल प्राइज में हब रह blender कि आप यहां पर टूटल प्राइज भी सूब कर देना टूटल तूटलинг की अपने पाास यहां पर आनी चीह और यह जैसे मैं

12:19आपने पास यहां पर आनी चाहिए ठीक है क्रियेटे कार्ट पी शूर इमीज टाइटल डिस्क्रिप्शन प्राइज इंक्रीमेंट एंड ओल काट आइटम टूटल प्राइस ठीक है

12:39सि यूजिंग अपन यहां पर करते है अपना थैलविन

12:44अख सी इस मैं यहां पर कराहूं कि यूजिंग ढ़िन सिही इस यूज तक यहीं तरह आपी यहां पर कार्ट वाला यहां

12:53सब्चार्णाब पर क्रियेट करना है तो एक बार बेंगे किस तरीखे काट वाला क्रियेट करके देता है अपने को

12:58आई होई

13:10कि आई डभल आ रह है ठीक है

13:17इसी पर आ जाते हैं पहले वाले में वोईस बिल्कुल चाही आ रही थी

13:23अब भी वोईस वाले इशू आ रहा है या अब वोईस के लिए आ रही है

13:38ठीक है तो देखो यहां पर अपने इसको प्रॉम्ट दिया है

13:59इस प्रॉम्ट के बेसिस पे यह क्या काम करके देता है अपने को एक बार अपन चेक करते हैं

14:03ठीक है तो यहां पर इसने कंप्लीट क्रियेट करा है जिसमें यह एक कार्ड अपने को क्रियेट करके दे रहा है कार्ट वाला

14:10और यह कंप्लीट कार्ड अपने यहां पर क्रियेट हो का है इसको पर एक बार चेक करते हैं

14:15चीक है, मैं यहाँ पर इसको राइट करता हूँ और राइट करके रपन यहाँ पर इसको चेक करते हैं, इसने यहाँ पर क्या क्रिएट करा है, चीक है, इसको प्रूस कर दूँ और, चीक है, तो यहाँ पर यह बोल रहा है कि आपको यहाँ पर क्या करना है अपना, कार्ट भी

14:45जाओ, यह तो अपना यह वाला है, यह कार्ट अपने यहापर बनाए है, इस कार्ट को अपने आपर लगा देते हैं, और कार्ट का URL अपन बना लगा देते हैं, मैं यहापर करता हूँ, यहापर अपने कार्ट को लगा देते हैं, तो यह अपना कार्ट अपना यहापर लग ज

15:15स्लैश कार्ट तो स्लैश कार्ट पर हिट कराके देखो क्या बनाके दिया है इसने स्लैश कार्ट मैंने यहाँ पर हिट करवाया

15:20slash card पे अपने पास यहाँ पर अपना यह card create हो क्या रहा है

15:23जिसके अंदर अपने पास shopping card करके इसने यहाँ पर दे रखा है

15:26increment, decrement भी अपने पास यहाँ पर है

15:28अलाकि इसने increment, decrement और total price automatically यह आपको calculate करके दे रहा है

15:32लेकिन अपन यह काम करने वाले है किसके through

15:35यह काम अपने वाले है अपने

15:38redux के through

15:39अब भी यह जो काम हो रहा है यहाँ पर इसने use state के basis पर functionality लगा के

15:43और अपने पास increment और decrement भी यह complete यहाँ पर बना के लिए है

15:46लेकिन अपन यह काम करेंगे अपने किस के through

15:48अपने जो अपन अपना store के अंदर जो data store करवाएंगे उसके basis पर यह काम अपन करने वाले है

15:54तो यहाँ पर देखो इसने increment और decrement पूरा complete यहाँ पर create कर कर दे दिया है

15:59increment और decrement जो function यहाँ पर इसने create कर दिये है

16:02ठीक है यहाँ पर यह बना रखा है

16:04इसने के अंदर आओ यह इसने एक card ले रखा है

16:07इसको हटा देते है यह अपन इसकी कोई requirement नहीं है अभी

16:11इस increment को भी मैं यहाँ से हटा देता हूं

16:13second मेरे पास यहाँ पर decrement आ रहा है

16:15decrement को भी मैं यहाँ से हटा देता हूं

16:16और यह total यहाँ पर total price के लिए इसमें एक calculation यहाँ पर कर रखी है

16:21इसको अपने हटा देते हैं

16:23ठीक है use state अपने पास आ रहा है

16:25use state को अपने कोई काम कर नहीं है अभी के लिए use state

16:28ठीक है initial card

16:31initial card यहाँ पर कहीं ने कहीं यह use ले रहा होगा

16:33अब देको इसमें थोड़ा सा changes मैं यहाँ पर कर लेता हूँ

16:44यह अपन यहाँ से अटाते हैं और यहाँ पर card की उपर ना चला के map अपन किस पर चलाएंगे अपना

16:49जो initial card आ रहा है उसके उपर अपन अपना map चला देंगे ठीक है

16:53उसमें से सारी चीज़े अपने पास यहाँ पर print होके आ जाएगी

16:55on click पे इसने यह लगा रखा है

16:57increment और decrement इसको भी अपन यहाँ से remove पर देते हैं

17:00increment और decrement को भी अपन यहाँ से हटा देते हैं

17:02price के अंदर यहाँ पर यह total price यहाँ पर print कर रहा है

17:06अभी के लिए अपन कुछ भी प्रिंट कर दबा देते हैं

17:08चीक है और यह भी हटा दो यहाँ से

17:10एक बार चेक कर लो सही है क्या बिल्कुल perfect

17:14इस डिव को मैं यहाँ पर close करता हूँ तो अपने को यह हटाना पड़ेगा

17:17इसको हटा दो यहाँ से चीक है

17:19और चेक करो कि आपका कार्ड आपको यहाँ पर किस तरीके से दिखाई दे रहा है

17:23अभी भी कार्ड में कुछ इशू है

17:25इशू को चेक करो क्या इशू आ रहा है

17:27यहाँ पर आओ

17:29और इनिशियल कार्ड के उपर आपने यह सारा

17:31चलाया अब इसको open Open करके देख लेए कुछ ऐसे चीज सो प्रिंट नहीं करवा रहा कि जिसकी वेजह से

17:35error आ रही है इमीज होगा है टाइटल होगएや आइटम में से dot करके

17:38टाइटल अपने करवा रहा है आइटम में से dot करके price अपने

17:42प्रिंट करा रखी है कोई इशु नहीं है आईटम में इसे डॉट करके

17:45quantity अपने हापर print कर रखी है तो यहाँ पर

17:48चेक करो कि अपने पास सारी चीज़े है क्या quantity है

17:51title है, image है, description है, price है, total है ठीक है

17:58और ठीक है

17:59आइटम में से डॉट करके आइडी निकाली, इमेज निकाली, टाइटल निकाला

18:04यहाँ पर आइटम में से डॉट करके से टाइटल निकाल रखा है

18:08डिस्क्रिप्शन निकाल रखा है, प्राइज निकाल रखी है

18:11ठीक है और यहाँ पर quantity उसने print करा रहा है

18:14कोई issue नहीं है और यहाँ पर button ले रखा है

18:19button में अपने पास यहाँ पर एक increment का button है

18:22ठीक है और एक button अपने पास यहाँ पर decrement का है

18:27ठीक है और फिर उसके बाद यहाँ पर अपना यह चल रहा है

18:34देखो यहाँ पर total का इश्वारा है

18:36total यहाँ पर जो print करा रहा है

18:38इसको अभी के लिए अपन यहाँ पर कुछ भी लिख देते हैं

18:40मैं यहाँ पर ही कह देता हूँ

18:41total यह आ जाना जीए

18:42अपर check करेंगे तो अपने पास यह है

18:44अब increment, decrement आपका यहाँ पर work नहीं करता होगा

18:47जैसे आप increment, decrement पर click करेंगे तो आपका increment और decrement यहाँ पर work नहीं कर रहा

18:53तो यह एक shopping card अपने पास यहाँ पर बनाए

18:56इसको थोड़ा समय यहाँ पर change कर लेता हूँ

18:58यहाँ पर आओ और इस पर लगा देते है margin top से

19:02मैं यहाँ पर कहता हूँ margin top

19:04और margin top से अपन यहाँ पर लगा देते है

19:06जैसे 11 की margin यहाँ पर top से लगा दो

19:13चुक्याओ और responsive है या यह नहीं है अपने चेक कर लेते हैं

19:15तो यह अपने पास complete responsive भी अपने पास आ रहा है अपना यह card

19:18तो इस तरीके से अपने पास यह आ रहा है

19:21कोई इशू नहीं है सीच के अंदर तो

19:23यहां तक की चीच के लिए रहे

19:29यह वैब डिलोपेंट के स्टूडेंट का गुरूप है

19:41जहां आप डिसकस कर सकते है

19:42ओके

19:43क्या गुरूप बना लिया आपने

19:45अच्छा

19:51पैब डिलोपेंट डिवान शूस सर

19:55ठीक है

19:57सर पहले ही सही था

20:08अब बहुत मफल हो रही है

20:09ठीक है

20:10अभी तो मेरे हिसाब से वाइस के लिए रही होगी आपको

20:13गुड़ इवनिंग गुड़ इवनिंग

20:17सर कोड कहा मिलेगा

20:18कोड के लिए

20:19मैं इसका जो

20:21गिटब का जो अपना यूरल हो

20:23मैं अटेच करवा दूँगा कलवाली क्लास के अंदर

20:25तो आपको वहाँ पर इसका कोड मिल जाएगा

20:27मैं इसका यूरल अटेच करवा दूँगा तो आपको कोड मिल जाएगा

20:31अंजली करें कि मैं जा रही हूं छोड़के बहुत इशू आ रही है

20:41एक मिनटवेट करोगा मैं मैं च्цев कर सहाँ किया इशू तक एक मिनटवेट करो यगवार मैं च्क करता हूं और इसका सोलेशन करता हूं

20:59हम्हीं हम पित All

21:04इसको भी आप है वो कमेंट बाउस को प्लीज दिखें आप दो चुमेल में यह पूर्ट की नहीं तर्टाइब लाइज बोड़ा दिया पाले

21:28यह से मैंने एक भूबाव दिया

21:30कि अ हूँ मैं इसलि सुपटीम और दिया और दिया

22:00झाल झाल

22:31Hello everyone, एक बार आप response करे दो कि मेरी voice clear आ रही है या नहीं आ रही?

22:37I hope कि अब voice clear आ रही होगी

22:41तब सही हा रही है voice?

22:56ठीक है चलो बहुत अच्छी बात है अगर voice सही हा रही है तो ही तो

22:59ठीक है अब देखो यहां पर वापस आते हैं और चेक करते हैं उसी चीज क्यों पर

23:26और यहां पर प्रॉटर हो गया और कुछ इस तरीक है अपने आपके इस तरीक ही जिए अपने

23:53जलीए यहां पर अपने ने वार की उपर आ जा प्र अपने अपने नेव मार के अंदर अपने पास यह दो

23:56पर जो आपने लगा रखा है अपना कार्ट वाला जो आईकन है उसी के अंदर अपने यहां पर उसको link tag के अंदर wrap कर देते हैं तो यह बटन ले रखा है यह कंप्लीट डिव है जिसके अंदर अपने यह बटन ले रखा है जिसमें अपने कोई अपना shopping

24:10कार्ट वाला अपने को यहां पर शू हो रहा है चीक है तो देखो यहां पर अपन क्या करते हैं इस बटन को पूरे complete बटन को मैं wrap कर देता हूं किसके अंदर अपने link tag के अंदर अपन व्रैप कर देते हैं तो मैं यहां पर ले रहा हूं अपना link tag यहां पर अपन लगा रहा है

24:40यहां पर आप क्या लगाऊगे अपना, तू आप लगाने वाले हो, के अंदर आपने किस को पास करने वाले है?

24:46Slash कार्ट को यहां पर पास कर दो, जब आप इस पर क्लिक करोगे, तो आप कार्ट पे आ जाने चीए, जैसे

24:51मैं यहां पर आता हूँ एक बार के लिए पन फोटेक्ट वाला वीपन कुछ बना नहीं रहे तो यहां पर आजाओ अपने नव बार के उपर ही और

25:12उसके बार की उपर ही पर ही नाधने हमें पर यह राउट करते हैं यहां पर क्रियेट कर देता हूं और

25:23राउट को पनियाँ पर ऊपना प्रोदक्त वाला मैंने यहां पर अपना एक और ट्रॉट किरीट करा माउट में यहां पर पाथ लिख देते हैं पार्वंन फैक बंपन यहां पर कहिंक्त

25:38प्रॉडक्त में यहां पर कह देता हूं अपना यह निस को हटाइए जब फूंट

25:59यहां पर पास कर दो तो स्लैश प्रोड़्थे चे

26:26तब sway यहां पर लेते हैं

26:28लिंक आपका उपर इंपोर्ट हो चुका है और यहां पर अपने पास यहां पर प्रोडक्स पर आ जाने चाहिए एक एक लिए लिए ताकि

26:53यहां पर ले लेता हूं ताकि यहां पर अपने ने वार के उपर ठीक है और यहां पर अपना

27:15ले लेते हैं यहां पर अपना ले लेते हैं यहां पर अपना ले लेते हैं और रिस्टार्ट करना पड़ें और यहां पर क्या लगा दी अपना टू के अंदर यहां पर क्या पास कर देते

27:29अपने ले रखा है इन पने पास थी यहां पर अपना

27:37लिंक टैग नहीं हरा ड़ते हैं आपने पर हम यहां लगा जाएगा ठीडी में

27:51बीपन के लगा देते हैं अपना लिंकटेंग लगा देते हैं अहां यहां पर पर लगा देता हैं इयुक्त holidays चिहीं

28:16है कि यहां पर स्लेश को जब है और इनैंस प्रॉड़क्टिक रहा हूं तो मैं सिर्फ डॉलक्ट करना के लिए अपना हूं पर

28:31एक और हम बढ़ें इस इपने इस पर हुं में यहां पर आता हूं अगर अगर अपर क्लिक करई होते।

28:44अपने सबस्तों हों करा हो ना दो यहाँ चीज के लिए रखें आप सबस Τís

29:09Sum

29:14कि क्या बाते करो आप सबी कि बात मत करो मेरे पास नौटिफिकेशन आते तो

29:32कुछ आ रहा है क्लास में तुम्हें कुछ चैक करना पड़ता है तो आप बात ना करो तो सही रहेगा

29:39कुछ इससारी बाते बात कर ले बात में कर लो मैं कितना किया हूं अटेंट्स वाँब सब की बताई जाएगी नेक्स्ट मिटिंग में या पिर उसके आगे मैं आपको ऐब वार सबकी एटर्नेंस बताऊंगा किसकी कितनी जल रही है

30:09कि यहां तक के चीज़ के लिए रहे हैं आप सब्सक्राइब

30:39एक बार रेस्पोंस करना इस सीज़ का कि यहां तक के चीज़ा आप सभी को किलियर है

30:42अन्जिली गरे की सब चैट जीपीटी तो बनना से बनाया था उसका यूई बहुत ही खराप था

31:06यही आपको यूई को यूई को यूई को यूई से बनाना है तो

31:36सीख रहे हो ठीक है क्योंकि आप जब इंट्रिव्यू हो तो इंट्रिव्यू में आप यह नहीं कह सकते कि

31:43मैंने AI से यह यू आई पुरा कंप्लीट बनाया है वो यह सुनते ही रिजेक्ट कर देंगे तो यह काम नहीं करना आपको सारी

31:51क्लासे सब चीजे पता होनी चीए सारी चीजे आपको आनी चीए

31:54ठीक है तो चलो नेक्स्ट अपन यहां पर आगे चलते हैं यहां तक चीज तो आप सभी को किलियर होगी आई हूप

32:13अब देखो यहां पर अपने यू आई बनाया है अब अपने को क्या करना है अपनी अपनी यहां पर लगानी है और उसके लिए अपन यूज करेंगे अपने किसका अपन उसके लिए यूज करेंगे अपने रिडक्स का अपन यूज करने वाले हैं तो सबसे पहले अपन यह

32:43स्वी सेट अप करना है GET start की उपड़ आ जाओ फिर स्के बाद अपना जाते अपने किस्टार्ट की उपर आपको इंस्टॉल करना है सबसे पहले क्या रिटक्स टूल किट और react रिटक्स दुनों चीज़ें इंस्टॉल करना है तो दूनों चीज़ें यह आप बन जाते हैं फर

33:13कर लेते हैं किसको करके मैं आ जाता हूं किसके अंदर-पने-2-cart के अंदर और यहां पर अपने इंस्टाल कर लेते हैं यहां पर आ जा जाओ और यहां पर आके पने इंस्टाल किया अपने रिड्श

33:35टूल किट को और अपने दोनों चीज़ों को ठीक है पैके जो जीजन में चेक कर लो कि अपने पास इंस्टॉल होगे यह अपना रियक्ट डियक्ट तूनों चीज़े इंस्टॉल है तो चलो अपन यहां पर इसका कम्प्लीट सेट अप करते है यह अपना फ्रेंट था इसको �

34:05बनाने तो और यहां पर आ पर लेते हैं जिसको State इस बना लचाहिए आपको इपको किसको

34:25को बिलाना है अपने configure है का हसे import करोंगे अपने

34:29exists hai मैंने याप पर import करा इसको इंपोर्ट करना है हुई

34:35चीज्ट अपने पास तूल किट से उसके एक स्कितते इसक निया इसको बिछלא

34:44आपने configure स्टूर को उपने एाप यह बुला लिया ठीक है और इसको पास कर alltid

34:50budget computer notherwa

34:52and just

34:53और यहां पर रेडिचर पास कर दो उसके बाद रहन आप पर यहांपर क्या करना है उसको

34:58export करना है अपने यह भाई कहा ते सज़ेशन दे नगा यह को इसको एक वैरीबल में

35:07कर दो इसको मेरेबल में कर देते है और यहां पर इसको क्या

35:14कर देते हैं अपना एक्सपोर्ट कर देते हैं किसको अपने इस्टोर को यहीं काम इस नहीं आपर कर रखा है ठीक है अगर आप देखोगे

35:21तो यहां पर store का javascript का देगो type script का मत देगो

35:27यहां पर वोई configure store है उसको export कर दिया और reducer यहां पर pass कर दिया

35:31next का अपने को क्या करना है अपने store को provide करना है तो provide कर दो जल्दी से

35:35यह अपने create करा है provide किसमें करेंगे main.jsx के अंदर आके

35:39तो सबसे पहले आप यहां पर import कर लो यहां पर आप इंपूर्ट करोगे किसको अपने

35:44provider को ठीक है second आप यहां पर प्रोवाइडर से wrap कर दो किसको अपने app.jsx को तो

35:50मैं यहां पर बुला लेता हूँ अपने provider को यहां पर बुला लेता है अपने provider को

35:54of provider के इंदर किसको रखे तैंपने ऐप टोड को ठीकश को ठीक है और यहां-पर पास कर देते हैं अपना स्टूर मैं

36:05यहां-पर पास करेंगे ख्रुध 2 को पास राइब यहां-पर अपने स्टूर को

36:18प्रोवाइड कर दिया इतना सा काम करते थे यह सेकंड स्वाइस यहां पर करना है तो स्लाइस आपर करना है तो

36:39इसकोorsसा-चूरा बना रहता हूं और सक्षाषवक और इसकोगए

36:44बनाता है जिसको मैं है पर कहता हूं

36:48नाम का पाइं पूंडर बना लेते हैं और उसी के अंदर अम नहीं पना एक

36:54स्लाइस को मैं आहा पर करेता हूं काटj

37:00slice करके अपन यहां पर करते है .js मैंने यहां पर card slice करके

37:04एक file create कर लिए copy paste करके use कर लेता हूं मैं तो इसको

37:08मैंने यहां पर इसको complete code को copy करा और यहां पर आके अपन इसको

37:11paste कर देते हैं ठीक है अब देखो मैं इसको changes कर देता हूं इसी के अंदर

37:15इसने एक इंक्रिमेंट बना रखा है एक इंक्रिमेंट बना रखा है इसकी कोई

37:21requirement नहीं है अपने पास ठीक है फिर उसके बाद इसने यहां पर इसको export भी

37:26इन चीज़ों को तो यह अपना भी यूज नहीं ले तो इनको मैं हटा देता हूं एक बार के लिए इनका कोई यूज नहीं है तो हटा देते हैं एक ही यहां पर function बना रहा हूं जिसको मैं

37:35यहां पर करता हूं add to cart मैंने यहां पर add to cart का एक action यहां पर अपन क्रिएट करवा देते हैं जिसके अंदर पर काम कराने वाले और इस

37:43यहां पर add to cart को यहां से भीज भी दे देते हैं तो यहां पर add to cart को पर export भी कर देते हैं शुरू से देखो के

37:49create slice अपने पास आ रहा है ठीक है initial state के अंदर इसने वैल्यू ले रखा है वैल्यू को हटा के मैं यहां पर कहता हूं कि अपने पास एक

37:56और उस और अपने पास क्या एक एरे है ठीक है इस एरे और ऑब्जेक्ट के अंदर ही सारे अबजेक्ट असाइन करूंगा जो भी अपने पास प्रंटेंट से डीटा आएगा जब अपन एड़ कूपार बटन पर क्लिक करेंगे यहां पर इसका नीम चेंज करके क्या करते है

38:26कमेंट को हटा दो कमेंट का कोई काम नहीं है यहां पर अपन बूलते है कि अपना जो कार्ट स्लाइस है उसमें से डॉट करके अपन क्या निकालेंगे अपने अपने आपने निकालेंगे और यहां पर क्या बोलेंगे जो अपना यहां पर क्या है आपका कार्ट स्लाइस है �

38:56कर देते हैं ठीके चेंज़ कर दो कि यहां पर किलिकी का करते हैं किल्द कर दिया और यहां

39:11किदो के स consider करझा करें किपनी ऐस हैं आपका क है यहां इसी Slowly यहां

39:18परफेक्ट चेक करो कि आपका काम कम्पव्लीट है यह नहीं है

39:22में यहां पर इसी के उपर आ जाता हूं और यहां पार अपर हुआ छीजिते वहां पर आ जा करते हैं कि अगर आ चीक हैं।

39:42कि anybody वल कि

39:48इन

39:52कि कि यहां तक की चीज़ के लिए रहां सभी को चीके चलो

40:16देखो आगे अपन यहां पर क्या करना है अपने को add to cart करवाना है जो भी product मेरे पास है जैसे मैं इस बटन पर क्लिक करूँ तो बटन पर क्लिक करते ही यह product आपको किसमे चला जाना चाहिए आपके store के अंदर यहां पर जो cart नाम का array लिया है इसके अंदर वो चला जाना चाहि

40:46अब कुछ भी data आपको भीजना है और किस पर भीजना आपके store के अंदर तो क्या काम आएगा आपका use dispatch काम आने वाला है तो अपने किसके उपर आएंगे अपन प्रोडक्ट वाले component पर आ जाते क्योंकि उसी के अंदर अपने पास सारे product जो है यहां पर लूप चलके अपने

41:16Product यहां पर कह रहे है फिर अपने पास जिसमें product.id हे 對 है यहां पर यह सारा काम आपने करवा रखा है यह रहा बटन यह किसका यह पना विसलिस्ट वाला बटन धार और यह बटन किसका आपने पास यह बटन अपने पास shopping

41:29कार्ट का बतलब जब मैं इस पर क्लिक करूं तो अपने को वह प्रोड़क्ट कहां पर भीजना है अपने

41:35स्लाइस की उपर जो अपने एक्षिन बनाए एक्षिन की उपर भीजना है तो सबसे पहले आपको यहां

41:41पर क्या बुलाना पड़ेगा अपना यूज डिस्पैच तो यहां पर आ जाओ और किसको बुला लो अपने यूज डिस्पैच को पनिहां पर बुला लेते हैं मैंने यूज डिस्पैच को यहां पर बुला लिया यह आपको एक

41:50function देता है तो function यहां पर create कर दो आप बोलोगे कॉंस्ट और मैं यहां पर कहता हूँ अपना

41:56dispatch dispatch करके अपने यहां पर इसको create कर दिया अब basically कप करना है जब आपका यह

42:02shopping cart वाला बटन है इस पर click को तो यहां पर अपन लगा देते हैं अपना on click

42:06और on click पर यहां पर क्या करेंगे on click पर बलाएंगे अपने किसको dispatch को और dispatch में आपको कौन सा

42:13action हिट करवाना है action आपने create कर रखा है आपने slice के अंदर कहां पर आपका slice यह रहा

42:18इस slice में add to cart वाला action आपने यहाँ पर क्या कर रखा है

42:22export कर रखा है तो इसी को अपन यहाँ पर import करने वाले

42:25add to cart वाला जो slice है उसको मैंने यहाँ पर क्या किया

42:28import और इसके साथ आप अपना payload भी वेजना चाहते हो

42:32मतलब किस data के उपर click हुआ है

42:34तो यहाँ पर यह जो product नाम का अपने पास यहाँ पर अपने parameter की तुरू access करा है

42:39यह सारे object आ रहे हैं लेकिन आपने particular किस object पर click करा है

42:43वो ही object यहाँ पर अपना कहां चला जाना चाहिए

42:45अपने slice के payload के अंदर जो आपने action हीट करा है

42:49उसके payload के अंदर वो चला जाना चाहिए

42:51तो इतना सा काम अपने करा

42:53यहाँ पर अपने card slice के उपर आते है

42:55और उसको access करके देखते है

42:57मैं यहाँ पर check करूँगा

42:58पहला तो अपने पास अपनी state आती है

43:00और second अपने पास यहाँ पर क्या आती है

43:03और actions के अंदर ही अपने पास क्या आता है

43:05payload तो मैं यहाँ पर console करा के देखता हूँ

43:07कि मेरे पास जो actions आ रहा है

43:09उसके अंदर dot to payload में अपने पास

43:12यहाँ पर क्या आने वाला है

43:13अपना data आने वाला है

43:14यहाँ पर मैं करहा हूँ कि action dot payload के अंदर

43:18अपने पास यहां पर क्या आने वाला है अपना डेटा आने वाला है कंसोल अपने करवा के दिख लिया यहां पर इंस्पेक्ट करके चेक करो कि आपके यहां पर सारी चीजे चल रही है या नहीं चल रही कंसोल में अपना आते हैं मैं इस पर क्लिक करता हूं क्लिक करते हैं आ�

43:48तो यहां पर अपनस डीटा को क्या करते है आपना स्टेट करके अपना काट क्यूंकि के अन्दर क्या करते हैं

44:01पर और किया निकर करना है किसको पुउस करना है जो मेरे पास यहां पर行सेन्स डõट पेलूर

44:16लेखे उसको अपन यहां पर पुछ कर देते हैं मैं और कहता हूं 어क्षन डॉट पंदर क्या कर देना पुछ कर देना तो वही डीलीटा इपन पुछ पुछ हो जाएगा ठीक हैошरे यहां पर आकर राओ और

44:26किसमें आजाते हैं अपने रिडक्स के अंदर आके चेक करते हैं यह डेटा आपका इसके अंदर आ चुका है जैसे मालों मैं यहां पर इस

44:35speaker को एड करता हूं मैंने क्लिक करा तो यह आपका Bluetooth speaker इसके अंदर

44:38आपके अगर आप इस पर वापस क्लिक करोगे तो वह वापस से एड हो चुका है सेम डेटा वापस एड हो रहा है लेकिन जो सेम डेटा आ रहा है उसकी quantity यहां पर

44:48इंक्रीज और डिक्रीज भूनी चीए ती यह तो परफेक्ट चलता है अब अपन यहां पर आते हैं और इस

44:55करद के अंदर में इसको प्रेंट बीकर वाएं गहिए यह चीज समझ बाए ही कि अपने क्या काम किया डेकश का सेटॉप इसी था सैट अपकिया फिर उसके बार अपने यहां पर क्या किया

45:05अपना जो card का जो भी items है वो items है यहाँ पर अपने क्या किये add करवा दिये

45:35अब उझे बहुत अच्छे से आने लगा देखो प्रैक्टिस से चीज़े के लिए होगी शुरू में बहुत टिपिकल लगता है कि

45:44रिडक्स क्या है लेकिन अगर आप इसका flow समझ जाओ कि flow क्या है तो फिर आपको रिडक्स बहुत एज़ी लगेगा आप इज़ी इसका setup भी कर पाओगे और इसी के साथ

45:53आप सारी चीज़े इसमें कर सकते हो फाइनल प्रोजेक्ट है यह नहीं यह फाइनल प्रोजेक्ट नहीं है यह सिर्फ अपना रियक्ट रिडक्स के उपर प्रोजेक्ट है फाइनल प्रोजेक्ट अपना complete मान स्टैक होने के बाद होगा वह होगा अपना फाइनल प्रोजेक

46:23आज AI class है आपका नहीं, आज AI वाली class नहीं है, वो अपने complete हो चुकी है, और कुछ AI tools होंगे, वो मैं आपको class में जरूर रता हूँगा, क्यों कई AI tools है, जैसे postman, AI tool, postman का भी अपने पास AI tool आता है, वो मैं आपको class में बताने वाला हूँ, ठीक है, वो अपने और चीजों को

46:53इसी के साथ मैं आपको attendance के point 1 और point 2 भी बता देता हूँ, attendance के point 1 में आपको mention करना है, यहाँ पर जो अपने पहला component अपने create किया था, वो component class का पहला component था, footer component, तो आपको footer mention करना है attendance के point 1 के अंदर,

47:17अर्जुन करें कि तो web के लिए AI class end हो गया, यस बिल्कुल, web development के लिए AI class अपनी complete हो चुकी है, ठीक है, four classes ही थी अपनी जो हुई है,

47:31और भी बहुत सारे AI tools हैं जो आपको और classes में बताया गए, जिसे designing वाले field में बहुत सारे AI tools बताया, तो अगर आप उनको देखोगे, तो उससे आपको पता चलेगा, कि आप अगर जिसे मालोग किसी भी website के लिए image बनाना चाते हो, कुछ भी generate करना चाते हो, तो वो आप generate कर

48:01चाते हैं, यह आज के attendance का पॉइंट वन में आपको बता दिया, attendance का पॉइंट तू भी मैं आपको बताता हूँ, attendance का पॉइंट तू क्या है, attendance के पॉइंट तू के अंदर आपको mention करना है,

48:16पॉइंट तू के अंदर आपको काट मेंशन करना है, attendance के पॉइंट तू के अंदर, तू के अंदर, तू करें की वीडियो रिकॉर्डिंग में है,

48:44वेब डिलेपेंट की, येस बिल्कूल, डेली मोशन के उपर uploaded है, अब वहाँ पर जाके चेक कर सकते हूँ, ठीक है, वहाँ पर uploaded है,

49:14ठीक है, तो ये अपने attendance के 0.1 & 0.2 हो गए है, जो मैंने आपको बता दिया है, यहाँ तक की चीज है, अगर आपको किलिए है, तो यहाँ तक की आप प्रैक्टिस करना हुआज प्रेक्टिस करना और इसका पर

49:44आपको मिल जाएगा आपके गिटब का यूरल मिलेगा जो कलास अपलोड होगी उसी के अंदर

49:48अर्जुन करते के सार आज भी नहीं अटेंडेंस पॉइंट है ठीक है मैंने बोला तो तब नहीं वहांट है चेक करता हूं नहीं बाश्ट

50:05पिन करवा दिया जाएगा अटेंडेंस पॉइंट वो जो अटेंडेंस पॉर्म में वो पिन करवा दिया जाएगा

50:35कि देदू क्या है कि देख दो यहां पर भी दो अगर आपके पास स्वारल पड़ा है तो

50:48कि अच्क है तो आज की क्लास अपनी इतनी ती दोकिन अपनी नक्सation कलाती अंदर

51:07इस मतलब मंधे वाली क्लास के अगर आज थी अक्राइड के आज प्राईटे तो अपनी अध्य ती क्लास था आए अज फ्लेसिन अएपन हम फैकर करिस

51:18अगर आपको कोई डाउट है तो आप डाउट मेंचिन कर सकते हो अगर किसी के भी कोई डाउट नहीं तो आज क्लास अपने दिर्कते हैं।

51:34मिलते हैं अपने अपनी नैक्स्ट क्लास केंदे।