React State Management Tutorial | Context Api | React Tutorial For Beginners
HTML-код
- Опубликовано: 15 июл 2024
- Check out my courses and become more creative!
developedbyed.com/
Microphones I Use
Audio-Technica AT2020 - geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - geni.us/AcbCpd9 (Amazon)
Camera Gear
Fujifilm X-T3 - geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - geni.us/sztaN (Amazon)
PC Specs
Kingston SQ500S37/480G 480GB - geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - geni.us/YAtI (Amazon)
DeepCool ATX Mid Tower - geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - geni.us/bilekX (Amazon)
Logitech G305 - geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - geni.us/YBsCVX0 (Amazon)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
In this episode we are going to learn everything about state management in React.
The reason you might need a state management tool like the context api or redux, is to be able to share state between all your components in your react project.
We will focus on learning to context api today together with react hooks which is a new modern way of writing react code. The context api provides us with useful hook called useContext that lets us use a state in any of our components we want!
❤Become a patreon for exclusive videos and more!
/ dev_ed
🛴 Follow me on:
Twitter: / deved94
Instagram: / developedbyed
Github: github.com/DevEdwin
📕 Things covered in this video:
- React context api
- React hoooks
- Using context rather then redux
🎵 Music:
Outro:
LAKEY INSPIRED - Me 2 (Feat. Julian Avila)
Music By: / lakeyinspired
Intro:
Dj Quads
Track Name: "Every Morning"
Music By: Dj Quads @ / aka-dj-quads
Creative Commons - Attribution-ShareAlike 3.0 Unported- CC BY-SA 3.0
creativecommons.org/licenses/b... 
Наука
pass props is not main problem for using state management it is event handling to delete ,add, create,change etc.. to parent component having state . Great Content. Thank You
Correct! Should've made that a bit more clear! My bad!
pass props is definitely a problem. It might seem a problem if you are only passing it one level down. But what if you have to pass a prop all the way down 50 levels to some grandchild in the dom tree? or what if you have to pass it a node that's 50 siblings away in the dom tree? State mgmt solves that problem as well by centralizing this. This is the reason we have mapStateToProps as 1st argument in connect method of react-redux.
Is this a full time replacement for redux or lack some/many features?
@@atulchavhan8003 definitely not a replacement but sometimes redux may be a bit overkill. In the end of the video he mentions the main drawback to the usecontext, each element who has it will rerender upon state change, which might not be the best thing for a giant application
@@developedbyed please do you have another video explaining what he said. i am getting state from an add to cart button. i cant just copy state and paste in addToCartContext.js. I have to pass it from child to parent
this guy is a brilliant and hilarious teacher at the same time, I love it
Moi Aussie, mon Ami 😀
If you are already familiar with React and came to this video for the Context API & Hooks start watching at 14:00.
If you are still a beginner in React start at 0:00.
Came down here to comment this after I skimmed through 14 minutes...that's why you always check the comments first
Thanks, this silly guy worries about music more than about his one presentation time codes.
@@hchchc948 Tip: always watch tutorial videos 2x playback speed
@@sarunmaharjan2508 same. I try to give tutorials a quick scan through first so I know whats coming. Then I can focus on the sections I really want
Ahhhh! I read your comment after watching the whole video! That's how good Ed is!
Finally, I got a clear picture of context API which I have been struggling to learn for long. Thankyou for this awesome tutorial.
I just love, when someone first explain the problem and before teaching the solution, and he did the same.. I just love the way he clearly explains the things. best
Thanks Ed, this was really helpful. Especially the way you stepped first through the rudimentary approach before introducing the more sophisticated way whilst adding just the right amount of complexity at each layer. The logical flow of the presentation was really great.
Ed makes things so easy to understand. I spent hours reading or watching other material and they always complicated it somehow. Ed is right, this is a great precursor to learning Redux. Thank you Ed!!!
Absolutely!
I'm telling you....
I'm so happy because i'm learning React and english at the same time, and it feels so good when you understand both things. Thank you Ed.
I've been watching this (and other related videos) over and over for about half a week now. I've also been working on a beginner game in react and trying to use hooks the right way. Every time I try, my code looks better and I understand React that much better. Thank you for making your videos publicly available, Dev Ed! You're a real one 🏆🤓🙌🏽☺️🔥
This one is among the fewest videos on RUclips that actually explains why State management is important.
And apparently the explanation is wrong according to the pinned comment
@@TheSaintsVEVO the explanation isn't *wrong* , its just a matter of what problem you want to tackle.
Hey! Are you studying or working currently? Are you open to internship/job opportunities?
Oh gosh!!! I like how u showed us the problem and then showed us the solution later on, to the point!!! YOU ARE GOOD!!
Finally, I got to understand this, you're awesome, you explained each and everything clearly and their purposes, how everything's connected all together and all of this without overcomplicating things by using a complex example to demonstrate but you actually kept it all simple and clear! Thanks a lot!
This is the fastest and best explanation I’ve seen for using context so far. Thank you!
Hi Ed, I have been watching your videos as and when needed, but this was (is) the gem of all. You made it super easy to understand the whole Context API in 30 minutes, that is _brilliant_ ! Thank you again!
This video is over 2 years old, but....by far it is the best on this topic. I absolutely love that Ed describes the issue/problem in detail to understand what is being fixed. Thanks Ed.
Hi Ed. I just wanted you to know that I appreciate how well you explain how everything works. Please keep up the great work!
I saw a bunch of videos trying to understand this concept. And your video is the only one that made it so simple to understand this concept. Breaking the video into problems and providing solutions to them makes the concept crystal clear. You are an amazing teacher. Thank You so much.
great tutorial. doesn't rely on previous code and doesn't spend hours on css and other bs. gets pretty much straight to the point. every tutorial should be like this.
This was the clearest explanation I've seen so far. Thank you, I can finally use it on my own.
This is one of the best tutorials on Context API and state management that I have seen youtube. Thank you
Finally someone explaining how to use Context between different files. Thank you for this!
Been working on getting used to using React hooks instead of the passing props down through class based components and this was for sure the most helpful tutorial I've checked out. Thank you!
One of the best explanations of the Context API. Dev Ed is no doubt one of the best instructors out there when it comes to explaining things easily and efficiently. Thank you so much. You were really helpful.
So much content on RUclips, so few high quality as yours. You are my favorite :) Keep going on!
I love how ed keeps smiling
and that makes the content more friendly !
Love ed! Good vibes ❤️
Best tutorial on Context API period. All other youtubers are teaching like people already know what context api is. This is the only one which teaches from scratch. Loved it. That's why you are my favorite webdev youtuber.
Thank you , this was just what I was looking for! Best tutorial I have found so far on Context API and hooks. You are so damn sweet btw!
No simplest little project like this on the internet on context api.
I am trying for first time and I got it!.
Many thanks to you my best friend.
Your tutorials are really effective.
So helpful! I learned how to set up context api quickly, and it's more straightforward than most of the tutorials I saw,
Love how you explain the problem along with the solution. Very articulate!
I'm I the only one rewatching this in 2020?
This video makes more sense after I struggled with passing props in components.
Great content Ed. Thanks a lot.
This playlist really helped get a grip on React and helped get a new job. Good looking out Ed :)
The easiest and best tutorial on context API. Thanks, Dev Ed :)
I watched at least 50 videos about the topic, not a single one explained like this. Thanks bro
Oh Captain, My Captain! A deep and sincere "THANK YOU"
So far the best explanation i've come across about the contextApi
Thank you Ed
Another tutorial that going straight to the point, and I like your style of giving the background issue and how to fix it.
Absolutely insane video man. I am working on my first bigger react native project and this was exactly what I was looking for, thank you so much!
Thanks for the video Ed! Was having a hard time understanding Context for a long time, read the React docs and information from more React experts but all seemed so complex but thanks for the way you explain the concepts so easy made it all click!!
After watching many videos about Context API finally I got clear idea about useContext. Thanks a ton !!!!
Re render all props. I think that is the purpose of it. To distribute all the data to components. Like authentication, themes, current user...
Awesome tutorials. Crystal clear. No indian accent. Big font code.
You have no idea how grateful I am for your videos, man... When I searched for Context API and found this one, I was like "Thanks God I'm finally going to understand that!". I was not mistaken by the way.
Yet another time, thanks for saving my life.
Thank You Dev Ed, you made the concept very simple to understand. I would recommend the video to every beginners.
Thanks for the video. Your up there with the best for explaining content. I've watched other RUclipsrs explain this but it never quite clicked in my head until this video.
Dev Ed, Thanks a lot for your tutorials. You just dont know how much I'm learning from you.. I hope youtube is paying you enough mate coz I'm sure that I speak on behalf of many when I say that you manage to walk us thru the tutorials step by step in an understandable manner!
Needed clarification on updating state and propagating via context. Great job, thanks.
Thanks a lot, I really liked this tutorial.
Appreciate that you also explained the downside of using the context api at the end of the video.
Makes it easier to understand the difference between context api and redux.
What a setup! That's a good change. Love the tutorial, got kind of addicted, peace!
Possibly the best explanation of contextapi on youtube.
Great way of teaching and explaining. I picked everything in first attempt. Not need to watch again. May God bless you.
This is a fairly complex concept, especially for beginners. Thanks for doing a great job of explaining and clarifying it.
Thank you so much for this! Was having a hard time understanding how context truly functions and this really made things much clearer.
I love the way you teaching, it's fun. I think i'm gone turn on the notification for the another videos. Great job
Dude your tutorial is very well structured and the way you show the code is very clear and calming! Good Job :)
Ed, you're an exceptional teacher! Thanks a lot for the video!
Best Context API tutorial on RUclips! Superb tutor, great content
Thanks for this video Dev Ed. I always thought the context API as very clunky compared to Redux etc... This video made me realize how easy it really is.
After binge watching random redux tutorials and trying to understand its implementation, this is heaven sent. IMHO react context API is much easier to understand and implement for beginners like me, Thank you very much for your very concise and well-executed tutorial video.
YOU ARE AMAZING! I love your problem-solving approaching.
I have read the official React docs on the context API but it wasn't all clear still until I went through this tutorial. Thanks Ed.
All right! Amazing! It was what I was looking for! Thank you!
Amazing video, you explain everything so well and this video just covered a problem I was having with context. Keep up the good work man
The way you explaining something is really amazing.
A few days ago I was scared of the context API. After watching the video, the fear is over.
Thanks man. I appreciate your teaching style... Now I'm one of the new subscriber on your channel.
You have a great talent teaching. You made confusing things very clear. Thanks!
best programming teacher of youtube!, thanks so much for making such great videos!
i was very confused reading the react documentation and then i saw your video and every thing became clear, Thanks
Watched two times and i think i understand it now. Watched the video along with Dave ceddias react book. filled up the black holes pretty well! Ty
Finally, I found this video. Thanks Ed. You totally cover the topic.
Thanks! I love how you always smile while explaining :)
Thank you!! Very helpful video. I was struggling to set my state in my context consumer and now I have it working :)
What would I have done without this channel ? THANK YOU !!
I am just a beginner in react and state management ,was facing a lot of problems in prop drilling ,thank you so much for teaching this technique, helped me a lot:)
I LOVE how simple U explain things. THANK U so MUCH
thank you, this is the best context crash course i have ever seen!
Thank you! Thanks to this video I saw really useful features and approach of using Context which was not covered in the original documentation. You are rock!!!
so clear explanation, i like your way of teaching code with fun , make it interesting and not boring , thank you so much
Man, you are brilliant, for real! Thanks for the video!
felt so grateful for this amazing explanation of use context
Thanks a lot Ed. Seeing you smiling is like also making us learning Coding is fun.
Excellent ed you just created the best react context API tutorial in the world.
This video was really helpful! It gave me a better understanding of how to handle state management. Thank you!
You do a good job of giving enough info without being boring or confusing. Thank you for making this!
teach me
First time this useContext hook made sense to me. Perfect!
I love the way you teach and explain everything. Like others have suggested, if you could do a Redux tutorial in your own special way that would AMAZING!
Finally managed to update state to context!!! Thank you so much my friend
It seems everything very easy when ever i found your tutorial on that.Thanks Dev.
you are explaining the most complex things in the simplest way and that is awesome thank you very much very very nice tutorial.
Just amazing, he puts things so simple. Thanks pal!
Hey Ed! This video is amazing, You really have a good didactics!
You are awesome .
Almost slept after scratching my head for context then there you are
Thank you for the simple walkthrough! Love your explanations!
Such a crystal clear explanation. Thank you very much.
Man, you´re my hero, thank you so much for this!!
Wow you make React easy and fun. Great teaching and I like your humor.
Explanation was great ! Thank you so much , really helpful and clear.
Thanks a lot, Ed, for the energy and the enthusiasm that you put into this.... Easy to understand, good examples, speed, etc. Helping me a lot... If I ever make some bucks with React, I will distribute ;-)
Best tutorial on context hooks. The documentation to this topic should point to this video!
The best way to understand something is read the official documentation and then go to find that something explained for Ed, Great explication, Thank you so much!
I get a positive vibe while I was your tutorial gorgeous man. Keep making content I love your videos.💖