Shopping Cart React.js Project with Explanation✅ [Simple Ecommerce Website using Reactjs ] with code
ฝัง
- เผยแพร่เมื่อ 22 ก.ค. 2024
- 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
happy to see u back
Bahut kuch sikhne ko mila. Now i am confident on react. State management easily kar lunga
Good bro keep it up
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.
Sure bro will try my best
it really helpful to have video like this keep making such videos
Thank you, I will
Nice and easy explaination.More better than my Institute.
Glad to hear that
Wow sir
Appreciate your efforts to make videos and nice explanation
welcome bro
@@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
Somehow I managed with audio but...the content helped me a lot Thanks ...
You're welcome
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!!
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
Zabardast bro Allah apko jaza ata farmaye
Shukriya bro keep supporting I need supporters like you
Waiting for this bro
thank u
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.
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
Very helpful for me bro thanks ❤
keep watching
i am waiting for next part of this video
Coming soon bro
nice video yaar keep doing..
Thank you so much 😀
Thank you so much sir
All the best bro
thanks sir, it helpful❤❤❤
you are welcome riski d
best ever video sir
Thank you keep supporting💪
👍👍
ThankYou Sir😍
You are welcome
great
keep supporting bro , more projects coming soon
Thank You sir😊
Welcome
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. ❤❤
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
@@SaifiCode sure thank you
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 .
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
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.
Sure bro . In my new videos i have worked on volume issue
Great man, appreciate you!
Is mango DB used in this project?
This project is using react state only
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
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
@@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.
Good , I will be happy to make videos on these topics
nice vieo bro bt the way
Thanks
good
Thanks
Good video by the way Thanksgiving
Thanks! You too!
Have you used Redux for state management?
hi , i have done it without redux
@@SaifiCode thanks! A I am searching for redux. Is there any video of u with Redux?
Check the redux playlist on my channel , waiting for your feedback there. Thank you
nice
Thanks for watching
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...
Aap description me code link hai wahan jake try karo
aacha tha
you are welcome bro
Sir, GitHub ki konsi repo me hai ye vode
Ye blog me hai
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
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
Please make more videos
sure bro
Nice
Thanks
Suru se btao ye kese bnaya h title img I'd..
Img ka url aap koi bhi url use jar sakte hai dummy imges urls search karo net pe apko images url mil jayenge wo ap use kar sakte ho
How can I separated item by seller??
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
Thanks for your replied.
Assalamualaikum
Wa alekum assalam
sir how can we delete a particular item in cart
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 th-cam.com/video/QaRAfVghhiU/w-d-xo.html
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
always welcome , keep learning , keep supporting
@@SaifiCode Allhumdulillah sir hoagay thank you soo much sir 🖤🖤🖤🖤
You are welcome , keep supporting my channel
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
Aapko kitna padhna hai aur kis type se padhna hai agar aap kuch detail me bataye to me apki help zaroor karunga
Thank you sir
💕
You are welcome
Local storage use kare. Ho Kya bhi ?
litun bro , we have used state only to save data temporary
@@SaifiCode bhi react par or vi project banao use local storage plz bhi
@@litunkhan4309 sure bro
thanks bhai
Welcome bro
Im getting an error where u give this
Product
It's showing syntax error what do i do
Can you share more details on this
@@SaifiCode
It's showing error in those angular bracket and the last 2 flower braces (Unexpected token)
Function ProductList(){
return {
product
}
}
@@prathvin8218 you are calling product component it should be or if it is variable it should be {product}
@@SaifiCode oh okaay thanks bro🫡
Is it solved?
How can i download full project source code ?
Bro iska source code available nahi hai mere pass
How long will it take to install the package?
Depends on net speed, one to five minutes
Thanks bro
Support sir ❤️
sure bro welocme
@@SaifiCode sir community post please
Bahut der ho gyi isme mujhe img nhi a rhi
Dummy images url use karo lo net pe search karke
CART?.map((cartItem, cartindex) => {
why this ? is used , and what is it called, please any body reply
very informative, thanks for helping.
, "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.
mujhe react mai expert honay kai tips bbatay
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
@@SaifiCode ok ok but my js is weak
Javascript is not difficult ,you just need to learn the basics
Make lots of projects and practice
@Movie_ki_kahani yes
On react
will try my best
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?
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
@@SaifiCode check your insta
ok bro
Api link please
Please check description
Es error video bejo sir
check the link bro saificode.blogspot.com/2022/08/shopping-cart-reactjs-project-with.html
Sir not work sir
bro focus on UI
sure bro
Sir giving the error sir plz solutions give me sir
Share me err details on insta i will try to resolve
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
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
This error giving sir plz slove sir
3 error
Movie ui
movie ui pe like kis type se can you explain more bro thank you by the way
sound is too poor
yes bro that was little slow recorded , sorry for that
@@SaifiCode but explain is very good ,, already subscribed.. carry on
@@mdmeshkathossain259 keep supporting bro from my new videos i will take care of this
Bhai kafi sara error hai
will resolve errors in next part
check the new ecom web dev series playlist
Kafi sare errors h sir video m pta nhi aap kase kr leete h practice karke dekho to shi nhi h ye videos aapki
new series start kiya h maine bro wo dekho
Bhai iska second part kaha hai ap iska TH-cam link de sakte hai ?
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
@@SaifiCode apka jo E-commerce wala video hai 8 hrs wala wo dekhna hai ?