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

Подписаться 3,3 тыс.

Просмотров 56 тыс.

50% 1

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

Опубликовано:

27 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 159

@ThugLifes-ob9df Год назад

happy to see u back

@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

@AnjanDas-rw2xh 5 месяцев назад

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

@SaifiCode 5 месяцев назад

Good bro keep it up

@naimuddin6303 Год назад

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

@SaifiCode Год назад

Thank you, I will

@editingsaifi9150 Год назад

Wow sir

@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

@hafizsherazhanifkhan7775 8 месяцев назад

Zabardast bro Allah apko jaza ata farmaye

@SaifiCode 8 месяцев назад

Shukriya bro keep supporting I need supporters like you

@triptivyas2521 11 месяцев назад

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

@SaifiCode 11 месяцев назад

You're welcome

@VirusOnEarth Месяц назад

best ever video sir

@SaifiCode Месяц назад

Thank you keep supporting💪

@imran-khan_fans8484 Год назад

Very helpful for me bro thanks ❤

@SaifiCode Год назад

keep watching

@CricketNews-iv5op Год назад

Waiting for this bro

@SaifiCode Год назад

thank u

@naimubro5911 Год назад

nice video yaar keep doing..

@SaifiCode Год назад

Thank you so much 😀

@ajitkumarpandey4397 Год назад

i am waiting for next part of this video

@SaifiCode Год назад

Coming soon bro

@poojakalel2648 Год назад

👍👍

@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

@digitaldeveloper7635 Год назад

great

@SaifiCode Год назад

keep supporting bro , more projects coming soon

@riskid6395 Год назад

thanks sir, it helpful❤❤❤

@SaifiCode Год назад

you are welcome riski d

@sandeepmaurya1694 Год назад

Thank you so much sir

@SaifiCode Год назад

All the best 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

@hfghgfhg2436 Год назад

good

@SaifiCode Год назад

Thanks

@abhi_vj_cutz Год назад

ThankYou Sir😍

@SaifiCode Год назад

You are welcome

@SandeepSingh-ji1eo 10 месяцев назад

nice

@SaifiCode 10 месяцев назад

Thanks for watching

@user-zw1ye3gv8o 9 месяцев назад

Thank You sir😊

@SaifiCode 9 месяцев назад

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

@TechnoSaifi Год назад

Nice

@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!

@naimuddin6303 Год назад

nice vieo bro bt the way

@SaifiCode Год назад

Thanks

@mdrahul7343 8 месяцев назад

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 8 месяцев назад

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

@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

@Dev-Phantom Год назад

aacha tha

@SaifiCode Год назад

you are welcome bro

@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

@Arshu-xn8ft 8 месяцев назад

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

@SaifiCode 8 месяцев назад

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

@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

@rafeekahmad9979 Год назад

Good video by the way Thanksgiving

@SaifiCode Год назад

Thanks! You too!

@creatorboy4901 Год назад

Please make more videos

@SaifiCode Год назад

sure bro

@rajeevyadav-np3fg 29 дней назад

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...

@SaifiCode 29 дней назад

Aap description me code link hai wahan jake try karo

@sanketlondhe7725 11 месяцев назад

Sir, GitHub ki konsi repo me hai ye vode

@SaifiCode 11 месяцев назад

Ye blog me hai

@bheeralingbheeraling3316 8 месяцев назад

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 8 месяцев назад

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

@user-lg4uu3ts6x Месяц назад

Assalamualaikum

@SaifiCode Месяц назад

Wa alekum assalam

@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

@rajeevyadav-np3fg 29 дней назад

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

@SaifiCode 29 дней назад

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

@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.

@kaushikjadav5824 10 месяцев назад

How can i download full project source code ?

@SaifiCode 10 месяцев назад

Bro iska source code available nahi hai mere pass

@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

@rajeevyadav-np3fg 29 дней назад

Bahut der ho gyi isme mujhe img nhi a rhi

@SaifiCode 29 дней назад

Dummy images url use karo lo net pe search karke

@editingsaifi9150 Год назад

Support sir ❤️

@SaifiCode Год назад

sure bro welocme

@editingsaifi9150 Год назад

@@SaifiCode sir community post please

@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 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-QaRAfVghhiU.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

@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

@prathvin8218 5 дней назад

Im getting an error where u give this Product It's showing syntax error what do i do

@SaifiCode 5 дней назад

Can you share more details on this

@prathvin8218 5 дней назад

@@SaifiCode It's showing error in those angular bracket and the last 2 flower braces (Unexpected token) Function ProductList(){ return { product } }

@SaifiCode 5 дней назад

@@prathvin8218 you are calling product component it should be or if it is variable it should be {product}

@prathvin8218 5 дней назад

@@SaifiCode oh okaay thanks bro🫡

@SaifiCode 5 дней назад

Is it solved?

@prathvin8218 5 дней назад

How long will it take to install the package?

@SaifiCode 5 дней назад

Depends on net speed, one to five minutes

@prathvin8218 5 дней назад

Thanks bro

@user-tu7yv8ns2y Год назад

thanks bhai

@SaifiCode Год назад

Welcome bro

@creatorboy4901 Год назад

On react

@SaifiCode Год назад

will try my best

@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 5 месяцев назад

Make lots of projects and practice

@SaifiCode 5 месяцев назад

@Movie_ki_kahani yes

@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.

@isurusandaruwan4769 Год назад

bro focus on UI

@SaifiCode Год назад

sure bro

@bheeralingbheeraling3316 8 месяцев назад

Es error video bejo sir

@SaifiCode 8 месяцев назад

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

@bheeralingbheeraling3316 8 месяцев назад

Sir not work sir

@creatorboy4901 Год назад

Movie ui

@SaifiCode Год назад

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

@bheeralingbheeraling3316 8 месяцев назад

Sir giving the error sir plz solutions give me sir

@SaifiCode 8 месяцев назад

Share me err details on insta i will try to resolve

@bheeralingbheeraling3316 8 месяцев назад

This error giving sir plz slove sir

@bheeralingbheeraling3316 8 месяцев назад

3 error

@manyagupta8679 2 месяца назад

Thank you sir 💕

@SaifiCode 2 месяца назад

You are welcome

@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

@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

@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 RU-vid 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 ?