React Context API with Project | useContext Hook | createContext | State Management Tutorial

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

[@mutantthegreat7963]

Thanks man. Coming from Vue, I found it hard to understand how to avoid using redux, but this video pointed it out, -thanks!

[@alaluddin6651]

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

[@adaezeikemefuna9592]

You broke this down and explained it so well. Thanks!

[@RoadsideCoder]

😄🙏

[@kumarshubham919]

It is the Simplest Explanation possible. I'm like that 🤯

[@RoadsideCoder]

😁😁🤘🤘

[@Tahir_Musharraf]

Explained very well. Thank You!

[@ashwinpatidar2878]

This is very helpful video for understanding useContext() Hook with good in project demo. Awesome explanation and information.

[@faisalahammad]

You're amazing bro, I've beening stuck for context API last a few weeks. :(

[@rakaa31]

your react videos are so helpful!

[@surajkumar-wz1br]

Thanks, bro, This is the real scenario Project.👍 I subscribed to your channel

[@sohadmad1823]

Amazing!!!Thank you very much😍😍

[@azadhuseynzade8543]

Thanks,You explained so well👍

[@sheydahafezifar8850]

it was really helpful. thank you so much!

[@simple8810]

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

[@RoadsideCoder]

Awesome dude, Feels great to hear that!

[@vivekgoswami1474]

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'

[@gaurisharma2253]

Thank you so much

[@Reshmajain-jd1ed]

U saved my day .Thank u so much

[@hirentecheshta3290]

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?

[@gouravprajapati3270]

Yes, use callback in child

[@rajatraj3160]

@@gouravprajapati3270 callback or event bubbling (lifting state up)

[@cswithabdullah2638]

Thank you very much for this valuable tutorial.

[@PradeepSingh-fq3zr]

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 !

[@RoadsideCoder]

Awesome ❤️🌟

[@ascodes3461]

It was realllllly an amazing tutorial, Thank you soo much for this. It helped a lot😍🤩😇

[@RoadsideCoder]

❤️🙏

[@Dev-Phantom]

good understanding .... i really liked it.

[@mohitsaud2071]

Thank you for your wonderful teaching. Love from Nepal.

[@RoadsideCoder]

🙏🔥

[@ziyaulrana1840]

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 KZbin

[@RoadsideCoder]

Wow, Thank you so much for appreciating, means a lot.

[@dimitriitkach7697]

thanks for React Context API with Project | useContext Hook | createContext | State Management Tutorial

[@gilbertmizrahi5471]

Thank you. This is very useful. 👌

[@arpitkolwar5916]

thanks a lot brother for the first time i understood this subscribed and liked also watching your other videos .

[@RoadsideCoder]

Glad it helped

[@narenNKchaudhary]

Can you share what best extension of VS code, we can use for the quick coding?

[@RahulKumar-ew1qw]

Thnx bro, I will wait your next video..👍

[@RoadsideCoder]

Soon 🤟

[@27Jaswanth]

Hey bro, faker isn't working here.. Any solution ?

[@wolverine_d_king9422]

Superb explanation❤️

[@jigarjoshi9198]

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

[@IllIIIIIIllll]

Thank you sir ❤.

[@chronicinsomnia8712]

Is there any way to handle cart items quantity and single item price based on qty using context ?

[@alexcostal3749]

Amazing Video Brother 😎

[@rilangkishabong1723]

Very helpful content. Thank you brother

[@RoadsideCoder]

Glad u liked it!

[@anilkapse3415]

Hey brother, this is a really awesome video about context API.

[@RoadsideCoder]

🙏❤️

[@rangabharath4253]

Awesome as always bro 🥳🎉

[@RoadsideCoder]

Thanks mate

[@usa5450]

Underrated channel

[@hitsharnam3177]

I like your video as soon as i click on it. Because i know it's going to be awesome. You are amazing.

[@RoadsideCoder]

❤️❤️ Thank you so much

[@viralthakar164]

Superb tutorial ❤❤❤❤

[@RoadsideCoder]

Thanks a lot 😊

[@anujgupta9167]

Awesome as always bro

[@RoadsideCoder]

🤘🤘

[@brave364]

really a great work bro

[@RoadsideCoder]

Thanks ✌️

[@JoshuaMusau]

Thanks man...

[@PraveenKumar-ft2kr]

Soo good brother... Thank you 😃

[@RoadsideCoder]

Welcome 🙏

[@jorgedelamora5905]

Bro you are such a nice guy, ty!

[@RoadsideCoder]

U too :)

[@chiranjeevichowdary5948]

Waiting for the next video

[@A9kit.k]

Great 👏🏻👏🏻

[@ShahnewazTameem]

which extension you are using for auto camel case while typing the state expression?

[@RoadsideCoder]

just press "tab" key when u type the name

[@jsagar95]

Thanks!

[@dhirajshah6738]

osm brother...

[@ashish_prajapati_tr]

you are awesome

[@arupde6320]

good job .. keep uploading .

[@RoadsideCoder]

Thanks man

[@kyawzinthant170]

amazing just finish it

[@RoadsideCoder]

Great!

[@capricious-agent-007]

thanks

[@abhisekgupta1543]

at 35:30 my site do not show header home cart on home page even after changing url to localhost:3000/cart

[@manoyal]

use react router v6, the react router in this video is out dated, check the documentation online

[@webber5629]

how to change Total price if we increase the quantity of item

[@rishabhtripathi6032]

faker are not working what i do it says module not found but in package.json file it proper shows what I do?

[@vivekgoswami1474]

Hey ur prblm solved not? I am also facing same issue

[@rishabhtripathi6032]

@@vivekgoswami1474 not yet because faker.js package are outdated and not working do you have any Solution ?

[@vivekgoswami1474]

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

[@sanketsuryawanshi]

Thanks a lot

[@RoadsideCoder]

🙏🙏

[@excellencevictorkingsley6921]

Is faker still in use this 2023?

[@fazilhakkim1091]

fakers is not working for me bro can you please help

[@kanganagarwal]

Awesome

[@RoadsideCoder]

Thanks!

[@AGriffith]

Is this still working? I think Faker library is now broken because of all the situation with Github and the author of the library.

[@RoadsideCoder]

Yeah, I believe it'll be working, or atleast the previous versions

[@nehanalini1606]

faker is not working..I see nothing in the npm official page

[@chiranjeevichowdary5948]

Waiting for ur next video from a week upload it asap!!

[@RoadsideCoder]

Yes!! Sunday definitely

[@chiranjeevichowdary5948]

@@RoadsideCoder ok

[@RoadsideCoder]

Follow me on Instagram @RoadsideCoder for all the updates

[@RahulKumar-ew1qw]

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

[@RoadsideCoder]

Maybe you haven't imported in index.js. Try to compare with my code, it's in description

[@RahulKumar-ew1qw]

I have done bro , app is now working

[@sachinlingwal2325]

same error

[@akashghosh3257]

Any help for Faker. I tried the older version too.

[@priyankapriya9945]

yes faker is deprecated. it's no longer working now

[@mausichilenduk7178]

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

[@sumitsingh2889]

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

[@RoadsideCoder]

That shouldn't be the case, what's different?

[@GMERT]

Hello. please do a video of paxful clone for us. along with the backend.

[@RoadsideCoder]

I've already done a video on Cryptocurrency tracker, check my videos

[@noobCoder26]

great

[@RoadsideCoder]

🤘

[@ronakkarmakar6356]

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?

[@abhisekgupta1543]

Same issue bro...how did you fix it?

[@manoyal]

use react router v6, the react router in this video is out dated, check the documentation online

[@vivekgoswami1474]

Gyuz my faker not working what is d issue anyone here can help?

[@vivekgoswami1474]

@@manoyal help

[@vivekgoswami1474]

@@abhisekgupta1543 help

[@davidbaraiya2649]

so can you make a video in hindi too ? my english is not a good at understand.

[@kollivenkatesh2545]

Images not displayed

[@anandpothraj1914]

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

[@Peterin]

Can you please explain why normal npm install was not working?

[@vivekgoswami1474]

Thanx man

[@anandpothraj1914]

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

[@SeekerofUniverse33]

faker not working for me :( its not able to find faker even after correct package is installed

[@camo4970]

you can make a separate component with all the data instead

[@jorgedelamora5905]

How can i do it with local json?

[@RoadsideCoder]

Just replace faker variable with json object

[@jorgedelamora5905]

Tried and got error :(

[@darjipavan5112]

React JS me Education website banaiye sir ji 🤗

[@RoadsideCoder]

Sure! 👍

[@darjipavan5112]

@@RoadsideCoder 🏋️💁 thanks

[@tonywest341]

Anyone who has faced tried to delete items in the cart and all items got deleted , after using includes method

[@RoadsideCoder]

Maybe you're clearing the complete state?

[@aishwarysaxena505]

@faker is no more!!!

[@parijatkumar1406]

faker is not working

[@ajadreddy3851]

Yaar this is not at all working ,always showing a bunch of errors even if i copy the code

[@RoadsideCoder]

What's the error?

[@pawan_kumar5555]

faker npm is not working and other error please fix this source code in updated version

[@smrpkrl]

5:24

[@sahilsharma1inspirationalTape]

ya to smjhaale ya fir css kr le

[@keerthimurgan4809]

whatever you coded im not getting here properly

[@satrioutomo1077]

enable subtitle pls

[@RoadsideCoder]

There must be autogenerated ones

[@alimirhashimli2727]

I think this faker does not work

[@abhishekthakur7578]

bhai itne fast mat kyu pada rahe ho kahi jana hai kya

[@RoadsideCoder]

ha pressure ban rha hai

[@imnemo2327]

🤯🤯🤯🤯🤯😨😨 🚪🚶

[@AMG-cc7pi]

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

[@Mukeshkrk108]

English theek hai iski mgar ye msjha nhi pata hai , shayad bs dekh dekh ke kra rha hai ,

[@TravelwithPujarini]

Uski English toh sahi hai but Tum Apni sahi kr lo. ✌🏻