Тёмный

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

RoadsideCoder
Подписаться 120 тыс.
Просмотров 234 тыс.
50% 1

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

 

28 сен 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 442   
@RoadsideCoder
@RoadsideCoder 4 месяца назад
My Complete Frontend Interview Prep Course - roadsidecoder.com/course-details (50% Discount for limited time)
@rajat4002
@rajat4002 3 года назад
Whoever is watching this video, let me tell you one thing. You'll be asked to make such project in your frontend interview. Make the most use of this video. Thank you for putting such an amazing content on RU-vid bhai 😍❤️
@RoadsideCoder
@RoadsideCoder 3 года назад
Yes, It'll be very helpful in machine coding round.
@Sky-yy
@Sky-yy 3 года назад
Thank you for your comment to let others know the importance of this video bro
@sudhanshumishra935
@sudhanshumishra935 3 года назад
Yes, i got an assignment which was exactly similar to this 3 days ago, but sadly i coudln't implement the filter functionality......anyways now i have learnt about state management through this video
@shujathaliirfan2662
@shujathaliirfan2662 3 года назад
I agree
@ssumit196
@ssumit196 3 года назад
thanks buddy, I was just wondering about this.
@vamsikrishna7957
@vamsikrishna7957 2 года назад
Great tutorial!!If anyone is getting a blue background in Navbar dropdown badge,set {10}..the background color gets removed.
@tanjimanim2391
@tanjimanim2391 2 года назад
This is a great tutorial. I used this in my project and I want to point out two things. 1. the store/global state will be gone once the page refreshes. Use localstorage to store that. 2. The reducer function used in this video are not pure functions, as you are assigning values on reducers, which is not a good practice.
@oussamaaitboulahna4849
@oussamaaitboulahna4849 Год назад
Hi brother , can u tell me how did u store ur data into localstorage and fetch it again , cuz for me im only get [object,object] ??
@tanjimanim2391
@tanjimanim2391 Год назад
@@oussamaaitboulahna4849 share your code brother
@shariqansari4056
@shariqansari4056 Год назад
@@oussamaaitboulahna4849 Convert your data into string , then store in local storage.
@oussamaaitboulahna4849
@oussamaaitboulahna4849 Год назад
@@shariqansari4056 Oh Thanks Man
@abbaskagdi1
@abbaskagdi1 Год назад
This comment needs to be on top
@purangurung4559
@purangurung4559 2 года назад
for route we can use
@davidbaraiya2649
@davidbaraiya2649 2 года назад
Yes this is v6
@sumittimori834
@sumittimori834 Год назад
You could've told for FAKERJS alternative faker doesn't work anymore or is it
@chetandhadd321
@chetandhadd321 Год назад
@@sumittimori834 they bro...im getting error The above error occurred in the component any help
@AmitGhosh-lj3oc
@AmitGhosh-lj3oc Год назад
@@sumittimori834 did you find any alternative?
@PeterMehr
@PeterMehr Год назад
@@AmitGhosh-lj3oc You can use @faker-js/faker instead: --> install it with: npm install @faker-js/faker --> then import it in Context.js: import { faker } from '@faker-js/faker'; --> and then use it in Context.js: const products = [...Array(20)].map(() => ({ id: faker.string.uuid(), name: faker.commerce.productName(), price: faker.commerce.price(), image: faker.image.url(), inStock: faker.helpers.arrayElement([0, 3, 5, 6, 7]), fastDelivery: faker.datatype.boolean(), ratings: faker.helpers.arrayElement([1, 2, 3, 4, 5]), }));
@anonimato1987
@anonimato1987 2 года назад
I am so greatful for the "!important" trick. This is the first time I'm seeing this. So useful!!! Thank you so much!
@RoadsideCoder
@RoadsideCoder 2 года назад
Glad it was helpful!
@debasmitamallick6489
@debasmitamallick6489 Год назад
This project is just awesome! I learned a lot from this video. Thanks a ton❤
@AshishGupta-be2yz
@AshishGupta-be2yz Год назад
Very amazing project with indepth explanation. Learned many of new things related to reducer. Thanks a lot bhai.
@elad3958
@elad3958 2 года назад
Thank you brother, I became an instant fan of your work/channel.
@RoadsideCoder
@RoadsideCoder 2 года назад
🙏🙏
@ndahayokevin7626
@ndahayokevin7626 2 года назад
Incredible I love your tutorials, you are on of the best Tech youtubers I like most
@RoadsideCoder
@RoadsideCoder 2 года назад
Thanks a lot 🙏
@ABDULLASHAIK-yp8qf
@ABDULLASHAIK-yp8qf Год назад
bro alignRight from drop down is not working .please help me
@oncoding4520
@oncoding4520 Год назад
Have been seen some of your videos and you are really a great teacher. Please keep doing some more content for us :)
@SpreadLoveWithAJ
@SpreadLoveWithAJ Год назад
This project is not for the 2023 people!🙂
@abubakaryasin8610
@abubakaryasin8610 3 года назад
I learned a lot from you Great content
@RoadsideCoder
@RoadsideCoder 3 года назад
Thanks man. ❤️
@mishka.g8462
@mishka.g8462 Год назад
That's really great!! keep going!!!🤩
@parvathyvd
@parvathyvd Год назад
Thank you so much for making such a wonderful project.
@rajutamang392
@rajutamang392 Месяц назад
why images are not displayed in live site ???
@niranjanjathar3748
@niranjanjathar3748 2 года назад
Thanks for such a great video on context api
@poojab3272
@poojab3272 2 года назад
Module not found: Error: Can't resolve 'faker' in 'C:\shop cart\shopping-app\src\context i got this error even after i install faker i dont know what to do . please help me
@shaimantidas9894
@shaimantidas9894 Год назад
Me too🙂 did u resolve?
@camo4970
@camo4970 Год назад
try this import { faker } from "@faker-js/faker";
@akashawasthi9515
@akashawasthi9515 3 года назад
utub recommending this piece of work
@RoadsideCoder
@RoadsideCoder 3 года назад
Awesome 🔥
@purusharma8192
@purusharma8192 Год назад
Please make more react projects....thanks a lot btw are you in akshay saini discord voice chat on first day😁
@RoadsideCoder
@RoadsideCoder Год назад
Yes i was
@krutidewda3152
@krutidewda3152 6 месяцев назад
very useful video. Thankyou so much for this.
@RoadsideCoder
@RoadsideCoder 6 месяцев назад
Thanks! I have created an indepth course covering all such topics - roadsidecoder.com/course-details
@sarthakkanungo9790
@sarthakkanungo9790 Год назад
why it is throwing error in single product component ,Cannot read properties of undefined (reading 'some')
@nishantbindhani9434
@nishantbindhani9434 Год назад
how is ur dropdown menu position like this (end of dropdown menu container is aligned with the end of dropdown button)
@KhushiSharma-rm4vy
@KhushiSharma-rm4vy 4 месяца назад
Its wonderful project but I am not able to fetch only images data. Can u anyone pls suggest how can i get images,. I got all other data. pls suggest is someone had same issue
@chiranjeevichowdary5948
@chiranjeevichowdary5948 3 года назад
Waited for this a long time
@RoadsideCoder
@RoadsideCoder 3 года назад
Haha yeah
@priyankashingne8143
@priyankashingne8143 2 года назад
This is really helpful video i m trying to create a same project but i m getting problem to access faker
@navinkumarsahu1159
@navinkumarsahu1159 Год назад
Please bring more such contents
@islamel7adidy898
@islamel7adidy898 Год назад
بتتكلم اسرع من حياتي م براحه ي غالي
@ebukajohn5325
@ebukajohn5325 2 года назад
I don't know why the faker is not displaying on the web, but displaying an error
@sandiponbiswas2714
@sandiponbiswas2714 2 года назад
same
@sandiponbiswas2714
@sandiponbiswas2714 2 года назад
i dont what i can do now
@mohammadalqady5344
@mohammadalqady5344 Год назад
when i write filter code , rating code i found a problem ...onClick is not a function... how i can resolv this problem
@mohdkhaleeq7468
@mohdkhaleeq7468 4 месяца назад
Its image is not uploading can anyone help me how to fix this
@Ravikumar-wv2xq
@Ravikumar-wv2xq 2 года назад
sir page refresh hone cart items clear ho jata h localStorege m kaise handle krna h with useReducer?
@alanouri9965
@alanouri9965 Год назад
Thank you man!
@PIYUSH-lz1zq
@PIYUSH-lz1zq 2 года назад
bhaiya , can you do this same project using REDUX please ???❤
@RoadsideCoder
@RoadsideCoder 2 года назад
Yea sure!
@muhammadsibtain4855
@muhammadsibtain4855 2 года назад
(6:61388) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated. How to Fix this ??
@anhduc97hn
@anhduc97hn Год назад
can someone explain the `onClick` props in rating component for me please? why they're so different in `filter` and `rating` components? thanks!
@ce2_45_ankitapatil7
@ce2_45_ankitapatil7 Год назад
When i done project i have a doubt here it is showing "faker" can't resolve,i done installation of faker then too its showng this error also my file name is correct..
@alphashortss
@alphashortss Год назад
faker is no more available, any alternate
@uniqueneupane6641
@uniqueneupane6641 Год назад
@@alphashortss Fake Json data
@akanshasaxena3606
@akanshasaxena3606 2 года назад
how we can apply filters by using filter button??
@souleymanecisse8644
@souleymanecisse8644 3 года назад
Great content , thanks for sharing
@RoadsideCoder
@RoadsideCoder 3 года назад
Glad you liked it 🙏
@ashwinpatidar2878
@ashwinpatidar2878 Год назад
Working fine, but images are not loading, why?
@ankitveersingh377
@ankitveersingh377 Год назад
guy can you please help me out this. i've done everything but image is not showing. i've done everything but still the images is not showing. please help
@ankitveersingh377
@ankitveersingh377 Год назад
@RoadsideCoder 🙏
@danielniels22
@danielniels22 5 месяцев назад
hi, is this beginner friendly who have basics of html css js only?
@RoadsideCoder
@RoadsideCoder 5 месяцев назад
no
@danielniels22
@danielniels22 5 месяцев назад
@@RoadsideCoder thank you, i moved on already. too much bootstrap setup at beginning, i was looking for core reactJS
@repentingyouth
@repentingyouth Год назад
i am getting error in Context component can anyone help me ??
@NeerajSharma-ic6db
@NeerajSharma-ic6db 2 года назад
faker work nahi kar raha kya kare in 2022 i am in learning
@Iambiu
@Iambiu Год назад
Bro i have getting the error called can't resolve faker in Context.js
@marcelalasso8249
@marcelalasso8249 2 года назад
Thanks for this explanation!, if somebody Know why image faker is broken ,I would appreciate it.. reggards!
@miansaqlain8360
@miansaqlain8360 2 года назад
Thank you Sir
@ashishmishra297
@ashishmishra297 3 года назад
Sir,how we get correct image using same api .It will look much good if type laptop then it will show image of laptop not any random image.
@RoadsideCoder
@RoadsideCoder 3 года назад
You can add your own images bro
@zoyahussain5147
@zoyahussain5147 2 года назад
sir ap ne kesay render kia like as error k according
@RoadsideCoder
@RoadsideCoder 2 года назад
I didn't understand ur question
@zoyahussain5147
@zoyahussain5147 2 года назад
Thanks sir providing code.NOW i can chk my files
@dheerajrajput7058
@dheerajrajput7058 2 года назад
Bro plzz tell me Is it necessary DSA for getting a job in big MNC company as a mern dev??
@RoadsideCoder
@RoadsideCoder 2 года назад
A lot of big MNCs still depend on DSA as one of thier rounds but lot others are starting to filter entirely by Dev skills
@dheerajrajput7058
@dheerajrajput7058 2 года назад
@@RoadsideCoder tqsm for response❤️
@nageshworshah8314
@nageshworshah8314 3 года назад
I don't understand at 41:31 ADD_TO_CART feature. I don't know what's going on there did you guys understand this?
@RoadsideCoder
@RoadsideCoder 3 года назад
In this I'm first spreading the state so that we take everything that's inside of the state, then in cart variable we are taking everything inside of cart by spreading it and then adding a new product.
@sachinlingwal2325
@sachinlingwal2325 3 года назад
sir, whenever i am wrapping App component with Context component ,everything is vanished ,browser screen blank ,what to do now
@RoadsideCoder
@RoadsideCoder 3 года назад
Try to compare your code with mine, must be some typo Repo link is in description
@badsarahaman7579
@badsarahaman7579 Год назад
Hello React router or faker dono Kam nahi kar raha hai .
@RahulKumar-ew1qw
@RahulKumar-ew1qw 3 года назад
When I wrap app component with contexts Component not render.. I have import context and all thing which u are doing bro.. What is happening with me
@RoadsideCoder
@RoadsideCoder 3 года назад
Try to compare your code with mine, code link in description
@sagarmoriya9773
@sagarmoriya9773 2 года назад
whenever i searching something the app crashes with error Consider adding an error boundary to your tree to customize error handling behavior.
@RoadsideCoder
@RoadsideCoder 2 года назад
Can you compare your code with mine?
@vaibhavsharma8012
@vaibhavsharma8012 8 месяцев назад
Good Project
@maxwelochieng7658
@maxwelochieng7658 2 года назад
I installed the same version of faker but when the random.datatype with uuid and boolean are not read and are causing an error i get this error on the console
@RoadsideCoder
@RoadsideCoder 2 года назад
Is faker returning any data?
@maxwelochieng7658
@maxwelochieng7658 2 года назад
@@RoadsideCoder Yea it returned data when I remove id and fastDelivery keywords but I managed to create a unique id with the Math.random().toString method but I am stuck in the fastDelivery with the boolean datatype.
@maxwelochieng7658
@maxwelochieng7658 2 года назад
its Okay now I manged create a random boolean again with Javascript>>> fastDelivery:Math.random() < 0.5,
@CookWithRoboCookingChannel
@CookWithRoboCookingChannel 2 года назад
Where to change the products image, product name...in this...
@RoadsideCoder
@RoadsideCoder 2 года назад
You can create your own JSON
@abhinavsingh8675
@abhinavsingh8675 10 месяцев назад
Faker js is not working will suggest use normal json data
@meitoli
@meitoli Год назад
if you have problems with random numbers in faker, try this: inStock: Array.from({ length: 5 }, () => Math.floor(Math.random() * 10)),
@yendasateesh2878
@yendasateesh2878 Год назад
Faker is not working
@shujathaliirfan2662
@shujathaliirfan2662 3 года назад
superrrr bro
@RoadsideCoder
@RoadsideCoder 3 года назад
Thanks man
@aashishmishra3729
@aashishmishra3729 Год назад
index.js:11 Uncaught TypeError: react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function at ./src/index.js (index.js:11:1) at options.factory (react refresh:6:1) at __webpack_require__ (bootstrap:24:1) at startup:7:1 at startup:7:1 how to solve ??
@kiritodragneel629
@kiritodragneel629 2 года назад
what is the use of that " qty : 1 " ?
@RoadsideCoder
@RoadsideCoder 2 года назад
Its the quantity
@srinivasareddychalla1094
@srinivasareddychalla1094 2 года назад
I heard somewhere faker js is removed from GitHub is it true? if it is true is there any alternative for faker js?
@RoadsideCoder
@RoadsideCoder 2 года назад
Just make your own JSON 💯
@bridpit-zb9fv
@bridpit-zb9fv Год назад
React bootstrap is link expired Not working 😭❎❌😕😐😑😢🙄
@kuldeepsingh-wd7pe
@kuldeepsingh-wd7pe 2 года назад
great
@zeeshanansar6706
@zeeshanansar6706 2 года назад
sir faker js is not working
@RoadsideCoder
@RoadsideCoder 2 года назад
Can u try to use the same version as i am using. Check the github repo
@DeepakGupta-hj2dv
@DeepakGupta-hj2dv 3 года назад
can you make a video React unit testing crash course? ??
@RoadsideCoder
@RoadsideCoder 3 года назад
In future definitely
@DeepakGupta-hj2dv
@DeepakGupta-hj2dv 3 года назад
@@RoadsideCoder please immediately upload. ..it urgently current project unit testing working
@himanshuraj254
@himanshuraj254 3 года назад
Have you any hindi tutorial channel bro?
@RoadsideCoder
@RoadsideCoder 3 года назад
Not yet, Maybe in future
@subhamdudheria9523
@subhamdudheria9523 2 года назад
Your search query is not woking , here's the correct code const transformProducts = ()=>{ let sortedproducts = products; if(searchQuery.length > 0){ sortedproducts = products.filter((product)=>{ return product.title.toLowerCase().includes(searchQuery.toLowerCase()) } ) } return sortedproducts; }
@sportsynews750
@sportsynews750 Год назад
have you guys have any problem while importing faker
@jenso413
@jenso413 2 года назад
For anyone else curious about the Array(prod.inStock).keys(); evidently keys() is also an array method! I thought it was just an object method. What he is doing here is creating an array the length of the number of products in stock. For example, if there was 5 products in stock, there would be an array with 5 elements (all undefined initially). Then, the keys method converts an array to an iterable object with the array keys(indexes). This is then spread into an array and mapped over, essentially making each array element an index. I think a simpler and more understandable solution would simply be to use the index parameter from the map function, the result seems to be the same.
@usamaarifshah7499
@usamaarifshah7499 Год назад
hey
@fahadahmed3508
@fahadahmed3508 Год назад
@@usamaarifshah7499 Thanks for the explanation!
@SpreadLoveWithAJ
@SpreadLoveWithAJ Год назад
Too much tough coding ..
@sushmitagupta
@sushmitagupta 2 года назад
Great tutorial! It helps me a lot while adding some feature in my E-commerce project but I'm using my own database and I have not added the "inStock" in my database so can you please tell me how can I add that and use in the qty increment feature of cart cards.
@Ajithmani-bm1ji
@Ajithmani-bm1ji Год назад
You got a answer
@KartikNavale-f1e
@KartikNavale-f1e Год назад
I found the error while installing the faker, anyone can help me in this? Error- Module not found: Error: Can't resolve 'faker' in 'D:\Projects\e-commerce\src\context'
@시고르자브종-i1h
@시고르자브종-i1h 2 года назад
Thank you for your kind explanation! btw I wonder if there is a way to lose focus on the green cart button at "50:15" when moving to the cart page. I tried document.activeElement.blur() but it doesn't work. Probably it's hard to control the bootstrap component?
@lle5159
@lle5159 2 года назад
This is too awesome, I've learned a ton by this video. Thank you very much! Just a little question: `alignRight` in is not working in my end. Has anyone caught the same thing?
@kelongFX
@kelongFX 2 года назад
yes it says something about the dom i didnt quite get it
@lle5159
@lle5159 2 года назад
@@kelongFX I use CSS to align the dropdown menu, that I set position: relative for container and position: absolute for dropdown-menu
@cat_onthe_
@cat_onthe_ 2 года назад
Remove 'alignRight' and add Worked for me.
@andress9525
@andress9525 2 года назад
You can add inline styling to the tag like so: style={{ alignRight: true }}
@nobodyneedstoknow128
@nobodyneedstoknow128 2 года назад
align={'end'}
@BrijeshSingh-dp1ku
@BrijeshSingh-dp1ku 2 года назад
Please keep making such tutorials these are really great 👏
@RoadsideCoder
@RoadsideCoder 2 года назад
Thank you, I will
@manojsuggala4666
@manojsuggala4666 Год назад
Good video with clear Explanation. I tried implementing this project, But I didn’t get the output. I got an error saying that: Module not found ‘Faker’ can’t resolve in src/context/context.js. Even I install the package by npm install faker, the error is not re-solving. Can any one help me in resolving the error Thanks in Advance.
@hellocoding2614
@hellocoding2614 Год назад
faker is not working for me , it's continuously showing me error that module not found , even I've installed it properly again and again ? can anyone helps me out of it?
@pramodravuri6108
@pramodravuri6108 6 месяцев назад
npm i faker@5.5.3
@jugalsuthar9751
@jugalsuthar9751 3 года назад
such a great session I learn so many things from this video...thanks and make more videos like this..
@simranmundada
@simranmundada 2 года назад
I am getting module not found error which says can't resolve faker in my project
@mprasanth18
@mprasanth18 2 года назад
In interviews is it okay to use plain css modules instead of bootstrap?
@sahanan7117
@sahanan7117 2 года назад
Hi.. In creating page router, I have written same code as yours but their is error in my output... Please help me out
@afsaruddin5967
@afsaruddin5967 2 года назад
Hi Mentor, How can I fetch data from rest api in context instead of faker api? Kindly give me some hints.
@RoadsideCoder
@RoadsideCoder 2 года назад
Hey, yes u can with axios or fetch
@MrPeepa
@MrPeepa 2 года назад
"A is only ever to be used as the child of element, never rendered directly. Please wrap your in a " what to do if i get this error?? because if i wrap with it says [home] is not a react component or react.fragment
@davidbaraiya2649
@davidbaraiya2649 2 года назад
I'm fresher as a frontend developer so this is for me .??
@RoadsideCoder
@RoadsideCoder 2 года назад
Yes
@artemkhasin3735
@artemkhasin3735 2 года назад
Is it possible to specify versions of all nmp's you are using, and react version as well. Every time I'm installing something it is not working the propper way. I follow the code line by line and check each character but the result is different. I actually stoped wne you installed "faker", since it is not working at all, it just says module is not found
@shruthichandran2796
@shruthichandran2796 2 года назад
Try in react 17
@a_basic_sheep_1993
@a_basic_sheep_1993 Год назад
complicated video, took a while for me to understand the useState hook, but a good job overall...
@vinayakjaimini7716
@vinayakjaimini7716 8 месяцев назад
Module not found: Error: Cannot find file: 'index.js' does not match the corresponding name on disk: './node_modules/faker/Faker'. why i am getting this error can anyone help
@carljonson4335
@carljonson4335 3 месяца назад
Dude there's something wrong within reducer.js , I have copied the code as it is but once I deselect one item all items are automatically removed from cart. Is there anything that is not shown in video ?
@Ravikumar-wv2xq
@Ravikumar-wv2xq 2 года назад
hello sir great tutorial perfect combination of useReducer and contextAPI. it's working same as like as redux.
@vinayakjaimini7716
@vinayakjaimini7716 8 месяцев назад
hiii bro i am facing problem in running this project can u help
@aryabhat_online
@aryabhat_online 2 года назад
Why use bootstrap. Can't we do with react
@RoadsideCoder
@RoadsideCoder 2 года назад
Yeah we can, but bootstrap just makes our development faster
@celticspyd5887
@celticspyd5887 6 месяцев назад
sir i want to know If a customer clicks on order btn to order and the order list should received at the admins page/panel without any database or backend possible?? if yes how sir?
@ronyroy3587
@ronyroy3587 5 месяцев назад
How I will create increment and decrement button . Alternative of select and option. Can you tell me. I created but not working properly
@alextalha_
@alextalha_ 2 года назад
the best video by contextApi
@amandwivedi5378
@amandwivedi5378 7 месяцев назад
What really happened with Aaron Swartz? please recommend alternative of faker!
@bardhan.abhirup
@bardhan.abhirup 2 года назад
Hey, firstly, thanks a lot for your tutorials and interviews. I genuinely feel like I've learnt a lot through them Having said that, if you don't mind a bit of feedback, your naming conventions and general consistency needs some attention. I feel it's all over the place. I know during the interview demos you tend to code faster but in these expositions when you have the luxury of time, i think it's worth paying attention to since you have a lot of viewers. Just my opinion. Regardless of that, I highly appreciate the effort you put in to your content. Thanks once again!
@RoadsideCoder
@RoadsideCoder 2 года назад
Hey, Thanks a lot for your feedback. And I have improved this in my recent videos after realising this. ❤️
Далее
Context API in react | get the concept
29:00
Просмотров 59 тыс.
Kenji's Sushi Shop Showdown - Brawl Stars Animation
01:55
Дикий Бармалей разозлил всех!
01:00
Every React Concept Explained in 12 Minutes
11:53
Просмотров 663 тыс.
Build a Shopping Cart With React JS & Stripe
1:16:28
Просмотров 113 тыс.
Learn React useReducer Hook with Examples
14:19
Просмотров 176 тыс.
Master React JS in easy way
12:18
Просмотров 94 тыс.
I Used AI To Build This $900K/mo App In A Day
21:48
Просмотров 265 тыс.
Kenji's Sushi Shop Showdown - Brawl Stars Animation
01:55