Context API crash course with 2 projects

[@gauravbawa5609]

Thank you immensely for consistently crafting informative and engaging content. Your work ignites within me an insatiable thirst for knowledge. It's truly challenging to quantify the value of your expertise, but please consider this a small token of my appreciation.

[@nigam_sharma]

Thanks

[@SaadMahimkar]

bhai tumne iss topic k 1000/- rupee diye, ab to badi motivation aagyi h mujhe iss video ko dekhne ki, ki itni valuable chij free mai mil rhi

[@prateekghanghas4751]

​@@SaadMahimkarghanta , ye dusre account se hi khudko bhej rha h , marketing you know. Ya fir to is payment krne wale ka baap koi Ambani hoga daddy's money you know

[@SaadMahimkar]

@@prateekghanghas4751 😐 ye to mai socha hi nhii

[@fulltogaming8390]

bro asaa hoa sakta hai but sir its really providing very good content , we all have to thanful to sir 😇@@prateekghanghas4751

[@N-A-V-J-O-T]

The useContext hook in React provides an easy way to share data between components without having to pass props manually at every level. It allows you to access the value of a context in any component, 1. Create a Context: First, you create a context using the React.createContext() method. This provides a way to define a "global" value that can be shared across components. 2. Provide the Context Value: You use the Provider component that comes with the context to specify the value of the context. The Provider wraps the components that need access to the context. 3. Consume the Context Value: Any component can use the useContext hook to access the context's value without passing props.

[@nitinrawat5061]

Thanks man

[@AdilShahzad-l7j]

Legend spotted

[@r4ge848]

I love this guy , his confidence , the way he talk , the way he explain things its just amazing , he never cut or remove the portion of the video where he does mistake , instead solve it . thanks man

[@AishaAkram-jt7fy]

same i love the way he use to teach us in such unformal way we learn a lot

[@thecalgarians4597]

Hitesh ji, please PIN this comment to help every future viewer better understand "a bug" in the tutoirial. @01:02:34 - When Hitesh ji tried to manually change the html's class="light" -> "dark" and vice versa, it did not work. There Hitesh ji said that, "it's not working because the Card.jsx did not get access to the updated html-class value and that, it will be enabled through Context." But, the correct explanation is that, at that point, darkMode: "class" was missing in tailwind.config.js which Hitesh ji spotted later during debugging towards the end BUT this exactly is the same reason why manually changing class value did not change the theme @ 01:02:34 Context was always available to Card.jsx, just that tailwind.config.js was not set at that time. That's why even after completing the ThemeBtn.jsx, it did not work @ 01:07:56 because the issue was never regarding context being unavailable to Card.jsx. It was again tailwind's config file. Summary: Had tailwind.config's darkMode: "class" already set earlier, manually toggling html-class would have worked @ 01:02:34 as Card.jsx was already getting access to states by that time. Hoping that I could make the bug clear. =============================== Having said this, I'm sooooo thankful to Hitesh ji for this amazingly insightful series on React (that too at no charge). Having depply understood the concepts due to your pedagogy, I was able to spot this anomaly in your tutorial BUT I totally understand that to deliver videos UNEDITED puts an add on pressure onto the tutor that "slip of tongue" happens. After all, we all humans feel pressure and make some mistakes. Your expertise on the subject is unquestionabale. ❤

[@stombland]

nice ❤❤

[@surbhisrivastava9536]

I understood very well how to use contextapi. Thank you sir!

[@shubhanshubhan1419]

09:11 Context API is an interesting and challenging topic in React. 18:22 Context API is a state management solution in React that helps pass data between components in an organized way. 27:33 Context API simplifies state management across components 36:44 Implementing UI with input fields and button 45:55 The video discusses the implementation of the Context API and its importance 55:06 Setting up the context for the theme 1:04:17 Implementing theme mode functionality with the help of Context API. 1:13:27 Implemented dark mode theme functionality using the context API by shubhan siddiqui

[@Aman_yadav1419]

Dialogue perfect sir 😉...jaha bhi jaoge hame he paoge 😂😅🎉🎉🎉

[@sumantagorai5880]

😂😂

[@AishaAkram-jt7fy]

hn ge

[@Blueplayschool]

Ye video samaghne me mujhe 4 days lag gaye aur 2 bar dekhne ke baddd .... Best off alll 💯💯💯

[@shivamchawla3171]

mera aaj ka pura din nikl gya

[@AakashSisodiya2711]

Ase he hota h

[@Yash-yo8zn]

Do din hogye 🥲 abhi bhi 100% surity nhi aayi 😭

[@Blueplayschool]

@@Yash-yo8zn koi na bhai mere ko 3 mahine ho gye fir bhi nhi aayi

[@Gnik27Singh06]

@@Blueplayschool bhai smjh nhi aarha ..what should i do?

[@FaizSultan430]

Sir Huge respect For u apki 1, 1 bat sach h waqi itny Mushkil topic ko itna easy way me Explain kia h apne sbse bari bat k hindi me jo k dimag me fit beth gya h apka Bht BHt Shukria Hitesh Sir Ji Love From Pakistan ❤

[@casual_GamerHQ]

I am still bit confused with this Context API thing.. But i'll watch it again and again... It's a complex topic but giving it time and energy will bring the results... Thanks Hitesh Sir...

[@Azharuddin-khan]

The examples could have been better. The 2nd example was not good. You didn't needed contextAPI for that. In other words, even if you would have declared card component outside of themsprovider, it would still have worked.

[@tayyabali6698]

watch the playlist of code with harry sigma web development react video

[@casual_GamerHQ]

@@tayyabali6698 it's been a year bro.. and now I know what context API is

[@UttamPun-tz4fo]

best context API tutorial on KZbin. I am watching your channel since you created it. I am from nepal and i doubt is clear now

[@arsalanansari-cu7nz]

09:11 Context API is an interesting and challenging topic in React. 18:22 Context API is a state management solution in React that helps pass data between components in an organized way. 27:33 Context API simplifies state management across components 36:44 Implementing UI with input fields and button 45:55 The video discusses the implementation of the Context API and its importance 55:06 Setting up the context for the theme 1:04:17 Implementing theme mode functionality with the help of Context API. 1:13:27 Implemented dark mode theme functionality using the context API Crafted by Merlin AI.

[@Pxl8.shorts]

I have a little doubt. Can you explain why is it only working with the Card instead the whole HTML's theme should be changed right? We are selecting the whole html?

[@rishabhpatel1286]

This is the best react tutorial series on KZbin . Thanx sir jiiii ♥️ ❤

[@chaiaurcode]

Most welcome 😊

[@shuvod3425]

It took me 3 days yo learn about context api, well i have a recommendation for learners to learn doing the second project shown by sir in the video. That is very much compact and easy to decipher code

[@sarmadkhan3625]

same bro same

[@xboy2374]

@@sarmadkhan3625 same bhai

[@sachinsinghpatwal7526]

so lets me break down this whole thing first we created context name "ThemeContext" also providing some predefined method and property as an object. Also exported the ThemeContext.provider to wrap on App component so every child can have access to these methods and properties Also to save an extra import statement we exported a hook name useTheme that itself exports the hook with current context name ThemeContext then the App component set the 1st part of the functionality where we are defining methods that will toggle html class in order to envoke the dark style provide in Card component by tailwind The functionality includes first setting up useEffect hook so we can run this code again whenever the dependency changes which will be Theme Mode along with this dark theme and light theme set's useState state for furthure use like for useEffect and input checked in toggleBtn to set the Html after removing any pre-existing class then we completed the final functionality in toggleBtn by destructuring the methods and property now containing value and functionality to just get manipulated by checked prop of input and conditional statement because we didn't use any button for toggle but input as a checkbox that's why we have to use this checked property. :P

[@EngineerXDev]

Absolutely bahut badiya padha rhe ho aap bhaiya ji ...... Doing react for the first time, and now the difficulties are growing like I am not able to grab all the 100% things from 11th video onwards..like just 40% to 60% tak hi i am able to grab , like topics ko rewatch karke kuch build karunga toh I think pura cover hojayega. But like as Hitesh Bhaiya said jab projects banaoge dheere dheere sab kuch samajh jaaoge... Thanks alot for this series...

[@piyushramnani1014]

Jagg ghumeyaa, thaare jaisa na koi, sir! Kitne bhi projects bana lu, courses le lu, ghum fir k complex topics samajhne apki chaukhat pe ana padta hai. Chai or code is Coffee and code for me. And the approach of creating mini projects for each topic is just too helpful. I know that you don't mentor people personally, but sir if any day you need an intern or Personal Assistant, I'd be happy to work for you and learn from the best that there is. Much love from Bhopal Hitesh sir

[@ShiviNigam-yi4iy]

Mai react ke lie beginner hu.. to mai ye series follow kru to chlega.. ?? Aur agr ye nhi to kise..

[@jazibbashar3332]

But Mai kahoonga ki agr new ho to coding with Prashant sir 19 hours k react h fully friendly for beginners to advance after that yahan continue kro to basic advance dono cover ho jaiga I think it is useful for you

[@jazibbashar3332]

​@@ShiviNigam-yi4iyBut Mai kahoonga ki agr new ho to coding with Prashant sir 19 hours k react h fully friendly for beginners to advance after that yahan continue kro to basic advance dono cover ho jaiga I think it is useful for you

[@ErMonuSingh]

Fantastic video lecture ❤! The explanations were clear, and it really helped me grasp the concepts. Looking forward to more content like this!

[@chaiaurcode]

Glad it was helpful!

[@vivekpaanchal]

@@chaiaurcode @ErMonuSingh why you use not (!) here 😂😂😂😂

[@ImRjha]

Hats off sir, incredible way of teaching. Initially, took me time to connect all the dots(like how user ,setUser is connected to userContext and other components) as i am from mechanical background and just dived into web development field but once I understood the topic then got blown away by your approach of teaching. Thank you ,sir for teaching us on free platform like youtube !

[@trustedtalk2880]

still not understand can you pl help me

[@art_by_endeavour]

@@trustedtalk2880 same its difficult to understand

[@Azharuddinsheikh-e6s]

Amazing series, didn't understand at first even as a 3 year experienced rails engineer, but got to learn so much from this video thanks, Hitesh Sir

[@pritimodanwal06]

Thank you sir for this best series of react. No one can beat this video regarding contextAPI and prev also React Router. I like too much thanks a lot. Make video ahead also for us, We will support you always!

[@saptarshisinha1744]

This series is becoming as interesting as a thriller show day by day...just waiting for the climax sir...ab toh ruka hi nhi jaraha 🔥🔥🔥

[@chaiaurcode]

Ending is getting prepared 😁

[@deeproy8136]

sir playlist ekdm hidden gem hai😀@@chaiaurcode

[@madhavgupta2059]

Apke liye jaan sir 😌

[@rashmirana4017]

Keep sharing your valuable tips, learning a lot from you. Enjoy your teaching style, all things to the point. Great content.

[@Afreenhussain03]

This is the best series , small steps to make big project !!

[@Lakinaik01]

Sir is doing lots for us we should also do support and motivate sir to create more content like this❤

[@MuhammadArslan-px1sm]

Jaha pe bhi jao gay pao gay to hitesh sir ko hi🙂

[@soniyaprasad77]

White suits you 🤍

[@avtheprowd]

Behen padh bhi lee 🙂🫠

[@earlymorningcodes6100]

This channel is for leary react not for your idiotic things

[@soniyaprasad77]

@@avtheprowd acha ok

[@sohaildarwajkar9979]

Padhai kr vrna koi Eren nahi milega tuje🤧

[@vladimirputin5565]

Mikasa where is your Eren yeager bro 😂

[@MithunShetty10000]

"This video is such a gem! The way you explained [topic/subject] was incredibly clear and insightful. I really appreciated how [specific detail or technique] was used to [achieve a certain effect/understanding]. Keep up the great work, looking forward to more content like this!"

[@moksh455]

bhai yaha toh chatgpt use mt kar bhadve

[@TheStickmanShow805]

got it sir second project ko 2 baar dekha to sab samaj aa gaya ki chal kya raha he. Second waali method easy lagi first waaali ke bajay. Thank you sir once again.

[@vineetsingh904]

apka har projects to 3 baar bana raha hu ek bar video dekha kar phir 2nd time bina dekha 3rd time usma khud se kuch extra add kar ka, shuru main lag raha tha har project ko 3 baar bana kar timewaste to nahi kar raha par abb lagta hai sahi kiya sara new topics bahut fast samjjha a raha hai or kahi baar to apka bata na se phela hi samjha a ja raha hai

[@therishugupta]

I remember using create Action, Reducer, dispatcher and what not. Now everything has changed. Thanks for making me understand Context API so easily.

[@explore-learn-share6937]

Very well explained. Able to understand things very easily. Great help to all people

[@rajdeepsharma8073]

One of the Best Teacher That i ever seen in my Entire Life ,Thank You Sir

[@Pawarsahab32]

ek bar jyada kuch samajh nhi pr 3 bar video dekhne pe ache se samajh aa gya jisko bhi samajh nhi aaya ek bar wo demotivate na ho dubara dekhe dubara me samajh nhi aaye to tibara dekhe lekin dekhe jarur.

[@jatinchhabra1142]

sir mujhe vishwas nhi ki mai ye itna easily smjh gya, i am in tears, you're great.

[@Mr_flash_videos]

after seeing many of project , i never got this , but this single video clear my concept

[@dheerajsankhla-po5pb]

Hitesh Sir, your teaching way is so amazing and I am fan your teaching and very helpful content .......

[@aliakber2790]

Chai is Love because of Hitesh Attention:- First create component and dig 3 to 4 components in it...and give value as props in parent component and transfer it to last inner component...condition :- transfer the same prop to last component...hence you will get the reason behind this amaze video.

[@rnjnmhta.catomato]

0:00 intro 3:30 - theory 16:15 project 1 37:45 project 2

[@codingwithteam7262]

I found this channel one of the best on KZbin. Means a lot sir you your efforts can make a great impact on our learning. stay blessed, Allah will give you more success and prosperity.

[@sachinsinghpatwal7526]

Hitesh sir casually dropped 20 min of content saying "checked ke baad dark value aa jayegi" 1:06:17 . But actually he is trying to create a two way binding with checkbox .and achieving synchronization if you think you get it try answering of these questions to finding out : 1. what will happen if checked={themeMode === "black"} and will e.currentTarget.value will be true or false on every click ? 2. how toggle will go back to light once set to dark after 1st click and why ? 3. why the functionality of toggleBtn is written in App.jsx but not in themeBtn.jsx ? 4. will the function run without checked={themeMode === "dark"} and will have issue is yes why , if no why ? if you know all the reason's/answers good you know the diff between states of DOM and states of react and how they i sync if not ask ai , :P

[@shifteditz06]

Yeah bro I'm facing same problem, on first click it switched to dark mode but then it is not toggling to light mode Finally after wasting 2 hours, here is the modified code which will work perfectly fine let {themeMode, lightTheme, darkTheme} = useTheme() const [modeStatus, setModeStatus] = useState("dark") const onChangeBtn = (e) => { if(modeStatus === "dark"){ darkTheme() setModeStatus("light") // themeMode = modeStatus } else{ lightTheme() setModeStatus("dark") // themeMode = modeStatus } } // this step is must otherwise button will not change its behaviour remove --> checked={themeMode === "dark"}

[@shifteditz06]

I modified the code and found the solution to this problem let {themeMode, lightTheme, darkTheme} = useTheme() const [modeStatus, setModeStatus] = useState("dark") const onChangeBtn = (e) => { if(modeStatus === "dark"){ darkTheme() setModeStatus("light") themeMode = modeStatus } else{ lightTheme() setModeStatus("dark") themeMode = modeStatus } } small problem : it will toggle between light & dark mode but toggle button will not change its behavior

[@shifteditz06]

After wasting 2 hours finally I modified the code and its running perfectly fine, see my code : let {themeMode, lightTheme, darkTheme} = useTheme() const [modeStatus, setModeStatus] = useState("dark") const onChangeBtn = () => { if(modeStatus === "dark"){ darkTheme() setModeStatus("light") themeMode = modeStatus } else{ lightTheme() setModeStatus("dark") themeMode = modeStatus } } lastly remove ---- checked={themeMode === "dark"} //this step is must otherwise toggle button will not change its behaviour

[@jk-sm6qr]

I like your videos more than movies. And at last I feel very satisfied....

[@shahrukhmehdi9021]

Thank U Sir Free of Cost Aap Itna acha Content Dete. Khuda Ap ko Khush Rakhe.Ameen

[@ashishkumar-jo7cj]

Sir maine pehle bhi context api padha tha kahi se lekin aapne jis way me samjhaya hai maaza a gya ab hum data ko nested child ke paas bina prop drilling kre wahaan data send bhi kr sakte hai or koi method ka ise krke useContext me data ko receive bhi kr sakte hai ab component ko apne upper level parent par depend rehne ki jarurat nhi ab sab ConText Api Bank se direct apne maal utha sakte hai or chahe to wahaan submit bhi kar sakte hai

[@once-upon-a-time-7]

36:50 1 b negative comment ni a sir mane check kia a your are the best teacher big love from pakistan 💖💖

[@AbhishekChoudhary-p1h]

I really love to learn concepts through creating mini projects based on those concepts. Thank sir, this video was exactly what I was looking for.

[@AmanPal_1586]

Thanks sir You teaches same like My previous Mathematics Teacher in KOTA Bikul feel nhi hota ki kuch heavy concept sikh liya

[@CA_103RITIKROSHANSINGH]

Itna react js ka video dekha but apka video mko sbse perfect lgta isliye mera 100 day's challenges complete ho rha .. thank you bhaya ❤

[@mrravipandee]

Bhadiyaa thaa ye aapka video hume bahut aasani se samjhaa, aapka bahut bahut sukriyaa hitest jii

[@prashantsingh1330]

Glad to have you as my mentor.thank you very much

[@FaizanKhan-bf2rs]

Amazing... Your passion and knowledge inspired me to learn so much. Grateful for your guidance!

[@ayushwalker2003]

It's take one full day to complete this 1 hr long video, but the clarity of concept that I get, is beyond imagination.. Thanks a lot sir. 🔥🔥🔥🔥

[@erfaizankakpori]

i must say { app toh chaaa gayay sir g......... } really thankx a lot bro for this owesome series.....easy to understand........

[@guptasagar694]

Thanks a Lot Hitesh CHaudhary Sir!!, Providing Extreme High Level Concepts for free in a Structured manner!!

[@vikasrathore0156]

sir ismai 2nd project itna complicated toh tha hi jitna aap ne bna diya 2nd project toh bbhhut hi simple tha sir apne bhut guma guma ke padhya ismai by the by mai ye sara course apse hi complete kr rha hu

[@ZainUlAbidin_86]

"MaShaAllah 😍! Wonderful, Sir! Your pedagogy method was so good for understanding concepts. However, in complex projects, it takes some time to understand. But after watching 2 to 3 times, it's almost clear. Thank you so much! JazakAllah!!!"

[@gentle_balak]

After watching it two times, Finally I understand this video. Thank you, Sir. I understand 🔥🔥🔥🔥❤❤❤❤

[@subhamgoswami8607]

Quality Content specially now i can understand as i am working on a project in my company from scratch in react 🔥

[@arhamshaikh1617]

Sir g the way you explain the complex topics in simple language is pure Genius

[@HassanAhmed-cb3gk]

Best videp on youtube ove from pakisatan..❤❤

[@TanushSahu-r8m]

best free tutorial to learn react !! all hail hitesh sir

[@vigneshv789]

Thank you Hitesh sir ❤❤, Watched this video almost 5 times and successfully implemented in my E Commerce application. The key to understand Context API in this video is to forget what you have learned before 💯💯

[@PersonalAccount-s4n]

Thank You sir a lot of people put courses like this behind paywalls really grateful

[@mysterious7809]

This is the best context api video on youtube

[@ashishkumar-jo7cj]

Sir waise dekha jai to hume 2nd project me itna kuch chahiye nhi tha 1. Hum dark or light method ko avoid kr sakte h or sirf themeMode ki value ko update krke useEffect me condition base par light and dark ko html me add kr sakte h. Or themeMode ki value ko hum simply Btn pr onChange lgakar method call krke usme event.target.checked ki value ke hisaab se setThemeMode() me light or dark set kr sakte h Baaki aapke is contextAPi course se mujhe kaafi sikhne ko mila

[@mischief9499]

In the second project, why did you create useState of themeMode even though you had already described its value inside createContext() method (at 55:30)? Also why are we using useState hook here for themeMode? We are not showing themeMode on the UI, can we use a normal variable for it?

[@YOUTUBECREATOR900]

your way of teaching is pure . everyone teaches but not with the project but you are doing it which stands you out

[@atharvatirkhunde4517]

thankful to Hitesh ji for this amazingly insightful series on React

[@prafullkumarkulli261]

I understood very well how to use contextapi. Thank you sir!

[@developer_dhanji]

comment goal pura ho gya hai hitesh sir .... futures ke liye bhi goal de diya karo

[@kritirana9468]

Boht shi smjhaya sir apne.....I want to add onto this....aap na technical terms ko kuch funny name se replace krke pdhaya kro.

[@Farzi_time]

thankyou sir for this amazing series mene pura react jitna bhi sikha hai apsay hi sikha hai thankyou so much sir

[@SuchishreeSengupta]

Thank u so much Sir...Usecontext is really a difficult topic but you are making it look very easy.. Fantastic teaching style sir..

[@Anirudhsinghbundela]

Really isse jyada in depth kahi nahi dekha 🙌🙌🙌🙏

[@ayushjain9723]

it took me a lot of time to digest the first project but second project i was able to made myself thanks hitesh sir for teaching in such detail.

[@classicshaikhofficial15]

hello sir I'm from Pakistan I really like your explanation of the way. you explain very well and i'm a big fan of you thank you

[@shivaedificationhub6172]

It was very difficult for mee to learn react but because of you somehow i am getting expertise into it

[@its_Amit_00]

i know hitesh sir you are too good , No one match your level

[@Niteshmaurya1234]

You know when you've found an underrated channel when you feel guilty watching it for free.

[@sagarghosh2897]

Sir aapne jo easy karake samjhay hai kyaa hi bataye, maaza aagaya 🔥🔥

[@raushankumar6993]

18:07 Yahi tak koi dikkat nahi hai.✌Thanks❤‍🔥

[@ankush25]

I think chai is your biggest Power Sir but You teach really well sir

[@gmahesha9486]

Thanks Hitesh for your wonderful course on React. Thanks a lot for your patience. Without any patience, it will be difficult to explain these concepts to developers, that too free of cost. Have a great time.

[@ijasbasheer7263]

i love this entire tutorial.thanks for your hardwork behind this

[@HimilPrajapati]

Wow, what a video, sir, I just learned this today, I've just started my day ( Day:7)

[@Tusharvaidh1803]

the way you taught us is the main reason why I am able to learn react this far

[@Rishi-xj2iy]

sir your teaching style is very good you are too intelligent i really admire you

[@devkumaracharyaiitbombay5341]

30:32 why input field require value becoz value we will type

[@KhayamIjaz]

Thank Allah. For helping me in finding such a great teacher on the whole internet.

[@honeyoyo9690]

allah calling you in hell

[@Render_Gaming07]

Mst ho sir aap perfect example of beauty with brain 😍❤

[@akashrathod8514]

Great video, Hitesh! Your clear explanations and engaging content made this topic easy to understand. Thanks for sharing!"

[@samirmaharjan6437]

my fee for this video. thank you sir for the really helpful playlist.

[@ashmeetsingh7259]

THANKYOU SIR, YOUR EFFORT REALLY MEANS A LOT. CAN UNDERSTAND YOUR DETERMINATION AND EFFORT TO GIVE SUCH A COURSE.

[@sciencemythvsfacts]

I absolutely love learning real engineering with you ❤

[@priyanshutrivedi2357]

We all can feel when you say : "is internet ki bheed m khi ye content kho Naa Jaye " ❤❤❤

[@sushantprasai8652]

A hour ago i was so frustrated and now it's clear. I am very happy, you are a great teacher!

[@shubhankarsharma154]

Took me a bit more time to understand this topic, as I have trying to do things differently. But it was worth it and now I have a good understanding

[@tejaslotlikar3573]

I'm watching this awesome series after chai aur js. I have one question? Why do we need useEffect for the theme changer here 58:30 ? We can also do and it works

[@developermohib]

the way you are teaching react js is amazing