React useContext() hook introduction 🧗♂️
Vložit
- čas přidán 27. 07. 2024
- #reactjs #tutorial #course
00:00:00 intro
00:00:13 setup
00:04:39 props
00:06:01 prop drilling
00:06:17 useContext
00:06:27 Provider Component
00:08:28 Consumer Components
00:10:11 multiple consumer components
00:11:10 conclusion
// useContext() = React Hook that allows you to share values
// between multiple levels of components
// without passing props through each level
// useContext() = React Hook that allows you to share values
// between multiple levels of components
// without passing props through each level
// PROVIDER COMPONENT
// 1. import {createContext} from 'react';
// 2. export const MyContext = createContext();
// 3.
//
//
// CONSUMER COMPONENTS
// 1. import React, { useContext } from 'react';
// import { MyContext } from './ComponentA';
// 2. const value = useContext(MyContext);
// ---------- CSS ----------
.box{
border: 3px solid;
padding: 25px;
}
// ---------- App ----------
import ComponentA from './ComponentA.jsx';
import React from 'react';
function App() {
return();
}
export default App;
// ---------- ComponentA ----------
import React, {useState, createContext} from 'react';
import ComponentB from './ComponentB.jsx';
export const UserContext = createContext();
function ComponentA(){
const [user, setUser] = useState("BroCode");
return(
ComponentA
{`Hello ${user}`}
);
}
export default ComponentA
// ---------- ComponentB ----------
import ComponentC from './ComponentC.jsx';
function ComponentB(){
return(
ComponentB
);
}
export default ComponentB
// ---------- ComponentC ----------
import ComponentD from './ComponentD.jsx';
function ComponentC(){
return(
ComponentC
);
}
export default ComponentC
// ---------- ComponentD ----------
import React, {useContext} from 'react';
import {UserContext} from './ComponentA.jsx';
function ComponentD(){
const user = useContext(UserContext);
return(
ComponentD
{`Bye ${user}`}
);
}
export default ComponentD
bro plz upload every day and always thankful for u
Make a crud todo in vanilla javascript where we can enter more than 1 value inside a form.
Please make redux and context API videos
Bro can you do Kali Linux ?
thanks for making this. I've been so confused by useContext, after a course and quite a few videos, until i found this.
What a great explanation! Watched numerous videos before this on useContext & still struggled to understand. I then watch one of your videos & instantly understood! Great work
yeah same lol
Such a simple and easy to understand tutorial. I've watched all the tutorials he has on react, waiting on him to release new ones
The best explaination in youtube about context
Short and sweet. Exactly what I have been looking for.
Absolutely amazing tutorial. Impossible to not understand. Thanks!
I don't know how you make complicated concepts look so simple.
I hope you see this comment one day. I just want to say thank you ❣️
Yeah no one could have explained it better than you, I hope you will release full react course soon, eagerly waiting for it
Wow thanks a lot! What a great explanation. Truly appreciate your effort.
Thank you for simplifying this with very clear example.
I subscribed ur channel today cause u deserve it ,u explain with simple terms that's what we need, for juniors first they should understand how it works then they will work with confident
love you bro such a super duper easy to understand 🙌
Now i understand useContext is a very simple concept. Thank you for you explanation
Amazing lecture
Great Explaination.. And Concise also... Liked...
the example is intuitive and easy to understand. ty
Swear to god I have all notifications on CZcams but everytime u upload a new video I get no notification. Love your videos though!! keep on going.
thank you man, so clear and enjoyable
😊😊😊❤❤❤
Most of what I know about Javascript is thanks to you! Thanks Bro Code
Your voice is rock solid like a Hollywood hero indeed you are my technical hero and guru
Thank you for uploading video ❤
The best explaination fro useContext, (I came from udemy course, then few other videos where they explain it as a big thing ). Thankyou :)
I finally understand it. Thanks bro
such a amazing explanation
Well explained keep it up!
That's a great explanation‚ thank you so useful
I saw different video, but you are better than those. you are not in a rush, explain why we need what. thank you
youre videos are great!
really cool! thanks man! yay
thanks, great explanation
Best Explanation 🤝❤❤
i swear everytime im concerned about a concept you make a video about it
It's the best video i have ever seen
You're trying so hard why don't you enable funds in your videos you saves a lot of our money why don't you just benefit a little bit
I'm bout to watch this tutorial today. Anything from bro code, I know it's good
this is a great turtoria
Bro you are hero...
Your the best
Excellent
Uff ! That was easy 🔥🔥
Make 2024 Java course love from Nepal ♥️💓
Finally I got it...❤
you can use eslint react extension
for typing react code faster
nice
Please continue teaching react.. upload new video you are expert in this💔
Please make Reactjs projects as well
I wish u talked about it earlier cuz 6 months ago i was so lost ):
Day 1 of asking for an sfml full course (after your done with this course)
thanks for explanation, but does needs to have 'user={user}' for useContext to work?
You can remove user={user}, I forgot to do that in the demo
@@BroCodez thank you for letting me know ❤❤
Hi,
U wrapped using provider component B in Component A but u why didn't u do the same for component D or C
Can i use usecontext for the same level for component that component a , b , c, d at the same degree of level not one is parent or child to other
Can it work in reverse? Make component C provider and then have componentA consumer?
Bro we want to see your face and say Thank you!
You can see him on twitch
@@shreehari2589what's his twitch Id?
Hey can u continue Data Structures and Algorithms Playlist on
Can we have more values in single usecontext hook??
but how does a UserContext know that it has to provide a User data, is it by naming ? Please can someone answer this ? The reason I am asking by your example is what if I want to create this context a standalone JS class.
Why you never use auto complete?
If anything unclear about any programming language headover brocode, then he will fix it it is his default behavior
Please I need help,
I'm using php(xampp)
I can't find the php.exe, I've deleted and reinstalled many times I still can't find it, I just need to know if I can use PHP in vscode without it?
The same error it showed on your vscode when starting PHP that's what it's still showing in my own, but I cant find the php.exe
Please create redux and context API tutorial
Bro can u make a lecture on RUST...!
Day 1 of asking for a typescript tutorial, a c# with xaml tutorial and a Pygame tutorial
Can you please make a how to redirect to another page tutorial please respond 🙏🙏🙏
Naming variable UserContext was super confusing. :D
6:39 for my reference p1-p2
how many videos are left till this series is over?
Why, do you not like it?
@@BroCodez No I love it. I just want to know much is left before I can start using react to create my own applications :)
🫡🫡🫡
Personally, I find useContext to be the most confusing hook.