Shopping Cart React.js Project with Explanation✅ [Simple Ecommerce Website using Reactjs ] with code

CODE Link used in this video :
saificode.blogspot.com/2022/0...
Welcome To Saifi Code, In This Video We Have Discussed Following Queries :
1.Shopping Cart React.js Project with Explanation
2.How to create simple ecommerce website using reactjs
3.How to make react shopping website/react js shopping cart
We have focused on How to make react js shopping cart for beginners , to make it beginners friendly , we have used updated react js functional component. This is a basic react js projects for beginners having react js project with source code.
Videos You should also watch to understands this video more clearly
Video 1 ( Add or Remove Fields Dynamically ) : • Add or Remove Input Fi...
Video 2 (API Calls Concept) : • API Call In React JS u...
Video 3 (Responsive Design) : • Media Queries Responsi...
Time Stamps :
00:00 - Project Demo
01:15 - Install Basic React Code
03:51 - Create Header Component
09:32 - Create Product List Component
20:20 - Add to Cart Functionality in React js
25:20 - Cart List Component
39:40 - Show Total Amount
43:00 - Implement + and - Quantity
49:57 - Total Amount Updated
54:24 - Decrease Quantity Button - Handled
55:29 - Other videos Discussion to Understand this more Clearly
Queries on Instagram : / er_naimu_saifi
Channel Credits : Saifi Code🎨💖❓💻✅ MY GITHUB LINK ---- github.com/NaimuddinNaimuddin

[@amancollege9064]

this is what we actually want to learn in WEB DEV ❤people used to learn the html and css and focus only on style rather than working ...plz make more videos like that it will help more students.

[@SaifiCode]

Sure bro will try my best

[@ThugLifes-ob9df]

happy to see u back

[@AnjanDas-rw2xh]

Bahut kuch sikhne ko mila. Now i am confident on react. State management easily kar lunga

[@SaifiCode]

Good bro keep it up

[@naimuddin6303]

it really helpful to have video like this keep making such videos

[@SaifiCode]

Thank you, I will

[@codewithravi8549]

Nice and easy explaination.More better than my Institute.

[@SaifiCode]

Glad to hear that

[@saifitech2.097]

Appreciate your efforts to make videos and nice explanation

[@SaifiCode]

welcome bro

[@webarrays]

@@SaifiCode can you help me i have a problem with my code when I click on add to card function is running but props are not drilling

[@triptivyas2521]

Somehow I managed with audio but...the content helped me a lot Thanks ...

[@SaifiCode]

You're welcome

[@hafizsherazhanifkhan7775]

Zabardast bro Allah apko jaza ata farmaye

[@SaifiCode]

Shukriya bro keep supporting I need supporters like you

[@sonamojha5342]

Hi saifi..ur video is really awesome..can you please upload the next part of this whatever you have Mentioned in last min of this video..I have some requirements to complete..If you will do it will be helpful. Thank you!!

[@SaifiCode]

Thank you , you find my video helpfull , i will upload the next part of it soon , and also working on some other projects. If you have any other project ideas plz share

[@imran-khan_fans8484]

Very helpful for me bro thanks ❤

[@SaifiCode]

keep watching

[@VirusOnEarth]

best ever video sir

[@SaifiCode]

Thank you keep supporting💪

[@editingsaifi9150]

Wow sir

[@ajitkumarpandey4397]

i am waiting for next part of this video

[@SaifiCode]

Coming soon bro

[@abhishekKumar-lh3pc]

Bhai apka explanation is so wonderful and very easy for new learner to understand clearly, while developing application i got struck at one point when i implement + or - button after seeing in card their price showing NAN and also + or - button is not working ,i spent lot time to implenet in my way also but failed please help me in comming from that issues.and once again it really helping me to get better understanong of functionality of reactJS.

[@SaifiCode]

Bro aise apka issue nahi samjh aa raha , phir bhi aap string and number zaroor check karna price me agar string me price hai to usko number me convert karna jahan bhi price use ho raha hai

[@sandeepmaurya1694]

Thank you so much sir

[@SaifiCode]

All the best bro

[@rajeevyadav-np3fg]

Yr img kha se la rhe ho ye mujhe samajh nhi a rrha m same aapka wala url use kr rha hu to mere m nhi a rha...

[@riskid6395]

thanks sir, it helpful❤❤❤

[@SaifiCode]

you are welcome riski d

[@naimubro5911]

nice video yaar keep doing..

[@SaifiCode]

Thank you so much 😀

[@rajeevyadav-np3fg]

Suru se btao ye kese bnaya h title img I'd..

[@digitaldeveloper7635]

great

[@SaifiCode]

keep supporting bro , more projects coming soon

[@abhi_vj_cutz]

ThankYou Sir😍

[@SaifiCode]

You are welcome

[@procoding735]

Superb Bro. I completed my task with the help of your video. I have a Question ? if Product A is already in cart. then if we click on Add to cart button of Product A it wont have to add in new row. it just have to increment in its quantity. Hows thats possible? can you explain a lil bit ? BTW Thanks for awesome tutorial. ❤❤

[@SaifiCode]

we can maintain some state to save quantity, with the object that we save in state, check my ecom series on MERN stack for more info

[@procoding735]

@@SaifiCode sure thank you

[@user-zw1ye3gv8o]

Thank You sir😊

[@SaifiCode]

Welcome

[@CricketNews-iv5op]

Waiting for this bro

[@SaifiCode]

thank u

[@poojakalel2648]

👍👍

[@hfghgfhg2436]

good

[@SaifiCode]

Thanks

[@SandeepSingh-ji1eo]

nice

[@SaifiCode]

Thanks for watching

[@mdrahul7343]

vai mera Navbar ka compunents alag file me ha...me kase count ko pass karu navbar ma without navbar import because ager ma navbar ko import karu , tu 2 bar navbar aye ga or ma nahe chata mera webiste ma 2bar navbar hu props kase send karu samaj nahe arahaa he plz help me broo .

[@SaifiCode]

Bhai navbar ko props ke through pass karo jaise maine isme kiya hai for search and setSearch ke liye jahan se component call hoga wahan se pass karo. Ya apne count ko localstorage me save kar lo aur wahan se get karke navbar me dikha do. Try karo ho jaye to warna mere ko screenshot bhejo insta pe me wahan apko solution deta hu

[@naimuddin6303]

nice vieo bro bt the way

[@SaifiCode]

Thanks

[@ekamruthgangaraju8827]

The content and all is great but your voice is really very low in the video. As an audience I would advice you to increase your default volume in the video.

[@SaifiCode]

Sure bro . In my new videos i have worked on volume issue

[@ekamruthgangaraju8827]

Great man, appreciate you!

[@tubeyou9007]

Have you used Redux for state management?

[@SaifiCode]

hi , i have done it without redux

[@tubeyou9007]

@@SaifiCode thanks! A I am searching for redux. Is there any video of u with Redux?

[@SaifiCode]

Check the redux playlist on my channel , waiting for your feedback there. Thank you

[@malikbhai2285]

Bro..es project me ap props na use kare ....es ko pele redux me bana phr es ko backent se connect kare..ta k redux..or saga ka bi kuch seekh sakee

[@SaifiCode]

sure bro , is project me frontend pe hi data hai , isi data ko hum backend se call karenge and will use redux to save data

[@malikbhai2285]

@@SaifiCode bas kisi terha se ap muje 4 cheze sekha de...1 image ko data k 7 kese frontend se backen me seave kare 2. category ko kese banye frontend se phr es ka data bi froned se backend se kese hangele kare 3. ID ko front end or backend se kese collet kare.. 4.redux or saga aj my ap ki redux ki vieo dekh rha ho..or us ki practice bi ker rha ho.

[@SaifiCode]

Good , I will be happy to make videos on these topics

[@rajeevyadav-np3fg]

Bahut der ho gyi isme mujhe img nhi a rhi

[@mobpsycho6600]

Bhai tumhara code me problem h agr agr ek hi product ko do ya usse zyada baar click kr raha to ek new object add ho raha jabke "if (cart.includes(e)) return" statement bhi use kiya h add event pe tab bhi to koi solution h kya?

[@SaifiCode]

Jahan pe bhai array me item push kiya hai wahan check lagate hai Like if(yourArray.indexOf('item')=== -1){ YourArray.push(item) } Agar array me wo item pahle se na ho ta hi push karte hai nahi to nahi karte hai , maine check nahi lagay isliye same product dubara push ho jayega

[@mobpsycho6600]

@@SaifiCode check your insta

[@SaifiCode]

ok bro

[@rafeekahmad9979]

Good video by the way Thanksgiving

[@SaifiCode]

Thanks! You too!

[@sanketlondhe7725]

Sir, GitHub ki konsi repo me hai ye vode

[@SaifiCode]

Ye blog me hai

[@TechnoSaifi]

Nice

[@SaifiCode]

Thanks

[@creatorboy4901]

Please make more videos

[@SaifiCode]

sure bro

[@manyagupta8679]

Thank you sir 💕

[@SaifiCode]

You are welcome

[@Arshu-xn8ft]

Bhai next part toh daal dete yaar 😢 channel pe itna dhunda kahi nhi hai 2nd part

[@SaifiCode]

Iske baad bro me ecommerce series me lag gaya tha . Iske upar phir detail me series kiya maine. Waise time nikal ke me iska 2 part bhi launga

[@litunkhan4309]

Local storage use kare. Ho Kya bhi ?

[@SaifiCode]

litun bro , we have used state only to save data temporary

[@litunkhan4309]

@@SaifiCode bhi react par or vi project banao use local storage plz bhi

[@SaifiCode]

@@litunkhan4309 sure bro

[@user-lg4uu3ts6x]

Assalamualaikum

[@SaifiCode]

Wa alekum assalam

[@Dev-Phantom]

aacha tha

[@SaifiCode]

you are welcome bro

[@AbhishekKumar-xw7dz]

Mujhe na aap se personally pdhna hai or mere friend bhi hai pdhne ke liye ready hai ydi aap ready hai tho please reply me

[@SaifiCode]

Aapko kitna padhna hai aur kis type se padhna hai agar aap kuch detail me bataye to me apki help zaroor karunga

[@talhahaider2186]

sir how can we delete a particular item in cart

[@SaifiCode]

cart ek array hai , so jis bhi cart item pe click hoga us index se entry ko delete karna hota hai , ya phir map method se bhi remove kar sakte hai given index data ko, is video me detail me disscuss kiya h ye main , check kzbin.info/www/bejne/h5K1cpmMnM2bn7c Shopping cart ka next video bana raha hu to usme data api se call karenge and aur functionalities add karenge try and let me know if you still face any issue

[@SaifiCode]

always welcome , keep learning , keep supporting

[@talhahaider2186]

@@SaifiCode Allhumdulillah sir hoagay thank you soo much sir 🖤🖤🖤🖤

[@SaifiCode]

You are welcome , keep supporting my channel

[@monirhossain6288]

How can I separated item by seller??

[@SaifiCode]

Monir Hossain Bro , Jab hum backend pe save karenge data to usme seller name bhi save karenge , seller name ke according hum data filter karke separate karte hain , next part me wo add karunga. abhi univeristy project pe work kar raha hu uske baad ye series me next features add karung bro. Thnk you for your support

[@monirhossain6288]

Thanks for your replied.

[@bheeralingbheeraling3316]

Compiled with problems: A ERROR Mc App is 6.0-44 Module not found: Error: Can't resolve./components/Header.js' in 'C:\Users ajab\OneDrive\Desktop eact-project eacti\src ERROR in /src/App js: 7.0-54 Module not found: Error: Can't resolve ./components/ProductList.js' in 'C:\Users ajab\OneDrive\Desktop eact-project eact1\src ERROR in /src/App is 8:0-48 Module not found: Error: Can't resolve './components/Cartiist.js' in 'C:\Users ajab\OneDrive\Desktop eact-project eact1\src

[@SaifiCode]

App. Js file me import jo kiye un sab components ko create karo but src ke andar components folder ke andar karo apna folder structure ka screen shot do insta pe

[@kaushikjadav5824]

How can i download full project source code ?

[@SaifiCode]

Bro iska source code available nahi hai mere pass

[@digitaldeveloper7635]

mujhe react mai expert honay kai tips bbatay

[@SaifiCode]

In React you need to understand how state and props works and how can we pass functions from one component to another , except this focus on redux and other react is all about basic javascript

[@digitaldeveloper7635]

@@SaifiCode ok ok but my js is weak

[@SaifiCode]

Javascript is not difficult ,you just need to learn the basics

[@Movie_ki_kahani]

Make lots of projects and practice

[@SaifiCode]

@Movie_ki_kahani yes

[@editingsaifi9150]

Support sir ❤️

[@SaifiCode]

sure bro welocme

[@editingsaifi9150]

@@SaifiCode sir community post please

[@Dev-Phantom]

CART?.map((cartItem, cartindex) => { why this ? is used , and what is it called, please any body reply

[@Dev-Phantom]

very informative, thanks for helping.

[@anshulvairagade1604]

, "CART?.map" is checking to see if the CART object exists and is not null or undefined before attempting to call the "map" method on it. This is useful to prevent errors that would occur if you tried to call a method on a null or undefined object.

[@creatorboy4901]

On react

[@SaifiCode]

will try my best

[@bheeralingbheeraling3316]

Es error video bejo sir

[@SaifiCode]

check the link bro saificode.blogspot.com/2022/08/shopping-cart-reactjs-project-with.html

[@bheeralingbheeraling3316]

Sir not work sir

[@isurusandaruwan4769]

bro focus on UI

[@SaifiCode]

sure bro

[@bheeralingbheeraling3316]

Sir giving the error sir plz solutions give me sir

[@SaifiCode]

Share me err details on insta i will try to resolve

[@bheeralingbheeraling3316]

Compiled with problems: A ERROR Mc App is 6.0-44 Module not found: Error: Can't resolve./components/Header.js' in 'C:\Users ajab\OneDrive\Desktop eact-project eacti\src ERROR in /src/App js: 7.0-54 Module not found: Error: Can't resolve ./components/ProductList.js' in 'C:\Users ajab\OneDrive\Desktop eact-project eact1\src ERROR in /src/App is 8:0-48 Module not found: Error: Can't resolve './components/Cartiist.js' in 'C:\Users ajab\OneDrive\Desktop eact-project eact1\src

[@bheeralingbheeraling3316]

Compiled with problems: A ERROR Mc App is 6.0-44 Module not found: Error: Can't resolve./components/Header.js' in 'C:\Users ajab\OneDrive\Desktop eact-project eacti\src ERROR in /src/App js: 7.0-54 Module not found: Error: Can't resolve ./components/ProductList.js' in 'C:\Users ajab\OneDrive\Desktop eact-project eact1\src ERROR in /src/App is 8:0-48 Module not found: Error: Can't resolve './components/Cartiist.js' in 'C:\Users ajab\OneDrive\Desktop eact-project eact1\src

[@bheeralingbheeraling3316]

This error giving sir plz slove sir

[@bheeralingbheeraling3316]

3 error

[@mohitgoyal598]

Kafi sare errors h sir video m pta nhi aap kase kr leete h practice karke dekho to shi nhi h ye videos aapki

[@SaifiCode]

new series start kiya h maine bro wo dekho

[@creatorboy4901]

Movie ui

[@SaifiCode]

movie ui pe like kis type se can you explain more bro thank you by the way

[@user-tu7yv8ns2y]

thanks bhai

[@SaifiCode]

Welcome bro

[@mdmeshkathossain259]

sound is too poor

[@SaifiCode]

yes bro that was little slow recorded , sorry for that

[@mdmeshkathossain259]

@@SaifiCode but explain is very good ,, already subscribed.. carry on

[@SaifiCode]

@@mdmeshkathossain259 keep supporting bro from my new videos i will take care of this

[@mitadas7084]

Bhai kafi sara error hai

[@SaifiCode]

will resolve errors in next part

[@SaifiCode]

check the new ecom web dev series playlist

[@temujin9344]

Bhai iska second part kaha hai ap iska KZbin link de sakte hai ?

[@SaifiCode]

Bhai iske baad pura series hai ecom ka app channel. Visit karo wahan mil jayega isme without apis dummy data ke sath sirf ui show kiya detail me series me mil jayega

[@temujin9344]

@@SaifiCode apka jo E-commerce wala video hai 8 hrs wala wo dekhna hai ?