React Context API with Project | useContext Hook | createContext | State Management Tutorial
HTML-код
- Опубликовано: 15 июл 2024
- #Reactjs #ContextAPI #useContext #reactcontext
Learn Context API by making simple Shopping Cart Project in React JS in one video. We will learn Context API hooks such as useContext and createContext in React JS.
Source Code -
github.com/piyush-eon/youtube...
If any questions, ask here -
/ roadsidecoder
MERN Stack Tutorial with Redux 2021 -
• MERN Stack Project Tut...
00:00 Intro
00:15 State Management Example
02:04 Context API - State Management
03:00 Setup New React JS App
04:43 Making UI for Shopping Cart
09:54 Generating Products Data with Faker
12:40 Single Product UI
16:27 Cart UI
18:17 Cart State
21:24 Shifting the State to Parent
24:06 Total Price Logic
26:10 Problem without Context
26:48 Context API Implement
29:14 useContext Hook
33:13 Conclusion
33:47 Context API with useReducer Video
35:20 Support the channel!
React Router DOM Tutorial-
• React Router Dom [ Ful...
Movie App in React JS and Material UI -
• Movies and TV Series S...
Quiz App in React JS and Material UI -
• Quiz App in React JS w...
Dictionary App in React JS and Material UI -
• 12 Language Dictionary...
Learn React From Scratch -
• React JS Workshop Day ...
Thanks man. Coming from Vue, I found it hard to understand how to avoid using redux, but this video pointed it out, -thanks!
You broke this down and explained it so well. Thanks!
😄🙏
Really, I can't express my gratitude for this awesome video. I was looking like this video since almost one month but finally i got here 💌💌💌. This video had took me 4 hours to complete with you. I am really thankful to you sir 💛💛💛
It is the Simplest Explanation possible. I'm like that 🤯
😁😁🤘🤘
your react videos are so helpful!
Explained very well. Thank You!
This is very helpful video for understanding useContext() Hook with good in project demo. Awesome explanation and information.
Thanks,You explained so well👍
You're amazing bro, I've beening stuck for context API last a few weeks. :(
Amazing!!!Thank you very much😍😍
it was really helpful. thank you so much!
Thanks, bro, This is the real scenario Project.👍
I subscribed to your channel
Thank you very much for this valuable tutorial.
I really appreciated your way of teaching. I got Helped a lot from this video.
First impression is last impression.
I subscribed your channel.
Thanks for being here on RUclips
Wow, Thank you so much for appreciating, means a lot.
Thank you. This is very useful. 👌
Tbh I am working on the project and it has the same features as you have explained in first few minutes , I was trying to manage by simple props drilling , first it was messy , second I am not able to get the state defined in one and need to pass to another , So I thought to use contextAPI, and Ur video helped me Thanks
Awesome dude, Feels great to hear that!
It was realllllly an amazing tutorial, Thank you soo much for this. It helped a lot😍🤩😇
❤️🙏
good understanding .... i really liked it.
First of all very very Thanks, sir! I was very doubting in contest API but after watching your video my all doubt is clear. once again thanks, sir !
Awesome ❤️🌟
Underrated channel
Thank you for your wonderful teaching. Love from Nepal.
🙏🔥
Superb explanation❤️
Thnx bro, I will wait your next video..👍
Soon 🤟
Awesome as always bro 🥳🎉
Thanks mate
Awesome as always bro
🤘🤘
Amazing Video Brother 😎
Thank you sir ❤.
Great 👏🏻👏🏻
Bro you are such a nice guy, ty!
U too :)
Thanks man...
thanks a lot brother for the first time i understood this subscribed and liked also watching your other videos .
Glad it helped
Very helpful content. Thank you brother
Glad u liked it!
around 21.42 minutes you said we can't pass state child to the parent component, but in react, there is a concept called Lifting State up is used to pass data from child to parent. Am I RIght?
Yes, use callback in child
@@gouravprajapati3270 callback or event bubbling (lifting state up)
Waiting for the next video
Soo good brother... Thank you 😃
Welcome 🙏
thanks for React Context API with Project | useContext Hook | createContext | State Management Tutorial
Thanks!
really a great work bro
Thanks ✌️
Superb tutorial ❤❤❤❤
Thanks a lot 😊
amazing just finish it
Great!
you are awesome
Those who are stuck in the Faker....
First- npm uninstall faker
Second - npm install -save-dev faker@5.5.3
Step 3 restart server and then
import faker from 'faker'
Thank you so much
U saved my day .Thank u so much
Hey brother, this is a really awesome video about context API.
🙏❤️
osm brother...
I like your video as soon as i click on it. Because i know it's going to be awesome. You are amazing.
❤️❤️ Thank you so much
Can you share what best extension of VS code, we can use for the quick coding?
thanks
good job .. keep uploading .
Thanks man
Thanks a lot
🙏🙏
Awesome
Thanks!
Is there any way to handle cart items quantity and single item price based on qty using context ?
13:38 is not working to display the items of an array ? even in component prod given as prop but not taking values ...i checked my code its correct....no errors
great
🤘
Hey bro, faker isn't working here.. Any solution ?
how to change Total price if we increase the quantity of item
And this is how u make a concept more complex. instead of explaining usecontext .
which extension you are using for auto camel case while typing the state expression?
just press "tab" key when u type the name
Waiting for ur next video from a week upload it asap!!
Yes!! Sunday definitely
@@RoadsideCoder ok
Follow me on Instagram @RoadsideCoder for all the updates
faker is not working..I see nothing in the npm official page
fakers is not working for me bro can you please help
Is faker still in use this 2023?
Hello. please do a video of paxful clone for us. along with the backend.
I've already done a video on Cryptocurrency tracker, check my videos
at 35:30 my site do not show header home cart on home page even after changing url to localhost:3000/cart
use react router v6, the react router in this video is out dated, check the documentation online
Images not displayed
Is this still working? I think Faker library is now broken because of all the situation with Github and the author of the library.
Yeah, I believe it'll be working, or atleast the previous versions
5:24
Why I am getting white page while using context api component not render ... And there is no error in code , can u help me bro give me suggestions...
Maybe you haven't imported in index.js.
Try to compare with my code, it's in description
I have done bro , app is now working
same error
Any help for Faker. I tried the older version too.
yes faker is deprecated. it's no longer working now
@@priyankapriya9945 No its working still. Use faker.js..... instead of random.image use image.abstract
I am stuck in "Cannot read properties of undefined (reading 'includes')" can anyone help?
so can you make a video in hindi too ?
my english is not a good at understand.
Bro there is two version of your this project..
the way you are doing on video and the code is on git
both are different.
please check again... i'm doing as it is but i'm getting error and error
That shouldn't be the case, what's different?
faker are not working what i do it says module not found but in package.json file it proper shows what I do?
Hey ur prblm solved not? I am also facing same issue
@@vivekgoswami1474 not yet because faker.js package are outdated and not working do you have any Solution ?
@@rishabhtripathi6032 Those who are stuck in the Faker....
First- npm uninstall faker
Second - npm install -save-dev faker@5.5.3
Step 3 restart server and then
import faker from 'faker'
Don't know why my browserrouter isn’t working when i wrap home and cart into browserrouter. I installed router dom and write the code as shown in this video but It's not working properly..
Can anyone please fix my code?
Same issue bro...how did you fix it?
use react router v6, the react router in this video is out dated, check the documentation online
Gyuz my faker not working what is d issue anyone here can help?
@@manoyal help
@@abhisekgupta1543 help
faker not working for me :( its not able to find faker even after correct package is installed
you can make a separate component with all the data instead
faker is not working
How can i do it with local json?
Just replace faker variable with json object
Tried and got error :(
@faker is no more!!!
React JS me Education website banaiye sir ji 🤗
Sure! 👍
@@RoadsideCoder 🏋️💁 thanks
ya to smjhaale ya fir css kr le
Anyone who has faced tried to delete items in the cart and all items got deleted , after using includes method
Maybe you're clearing the complete state?
for the people who is getting no module found faker
use
step 1 : npm uninstall faker
step 2 : npm install --save-dev faker@5.5.3
step 3 : restart development server
and good to go
Can you please explain why normal npm install was not working?
Thanx man
@@Peterin the error was arising because of the faker library version when we type npm i faker it automatically downloads latest version but our project is using different means old version which doesn't support latest version so when ever you got error then immediately visit source code repo and inside compare your dependences with the project dependency inside package.json
enable subtitle pls
There must be autogenerated ones
Yaar this is not at all working ,always showing a bunch of errors even if i copy the code
What's the error?
I think this faker does not work
🤯🤯🤯🤯🤯😨😨 🚪🚶
whatever you coded im not getting here properly
faker npm is not working and other error please fix this source code in updated version
Bhai maine galti se redux ka use dekh liya, rona agaya , saala ek state update karne ke liye kya bawasir bana rakha hai react waalo ne
English theek hai iski mgar ye msjha nhi pata hai , shayad bs dekh dekh ke kra rha hai ,
Uski English toh sahi hai but Tum Apni sahi kr lo. ✌🏻
bhai itne fast mat kyu pada rahe ho kahi jana hai kya
ha pressure ban rha hai