React useContext() hook introduction 🧗♂️
HTML-код
- Опубликовано: 4 июл 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.
The best explaination in youtube about context
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
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 ❣️
Absolutely amazing tutorial. Impossible to not understand. Thanks!
Short and sweet. Exactly what I have been looking for.
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
Thank you for simplifying this with very clear example.
Amazing lecture
Wow thanks a lot! What a great explanation. Truly appreciate your effort.
the example is intuitive and easy to understand. ty
Now i understand useContext is a very simple concept. Thank you for you explanation
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 🙌
such a amazing explanation
thank you man, so clear and enjoyable
😊😊😊❤❤❤
Your voice is rock solid like a Hollywood hero indeed you are my technical hero and guru
Thank you for uploading video ❤
I finally understand it. Thanks bro
thanks, great explanation
Most of what I know about Javascript is thanks to you! Thanks Bro Code
Great Explaination.. And Concise also... Liked...
Yeah no one could have explained it better than you, I hope you will release full react course soon, eagerly waiting for it
The best explaination fro useContext, (I came from udemy course, then few other videos where they explain it as a big thing ). Thankyou :)
Best Explanation 🤝❤❤
really cool! thanks man! yay
Well explained keep it up!
Swear to god I have all notifications on RUclips but everytime u upload a new video I get no notification. Love your videos though!! keep on going.
I saw different video, but you are better than those. you are not in a rush, explain why we need what. thank you
Excellent
this is a great turtoria
Make 2024 Java course love from Nepal ♥️💓
It's the best video i have ever seen
youre videos are great!
i swear everytime im concerned about a concept you make a video about it
I'm bout to watch this tutorial today. Anything from bro code, I know it's good
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
Finally I got it...❤
Bro you are hero...
Your the best
Uff ! That was easy 🔥🔥
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
Day 1 of asking for an sfml full course (after your done with this course)
Hi,
U wrapped using provider component B in Component A but u why didn't u do the same for component D or C
I wish u talked about it earlier cuz 6 months ago i was so lost ):
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 ❤❤
Hey can u continue Data Structures and Algorithms Playlist on
Why you never use auto complete?
Please create redux and context API tutorial
Can we have more values in single usecontext hook??
If anything unclear about any programming language headover brocode, then he will fix it it is his default behavior
Day 1 of asking for a typescript tutorial, a c# with xaml tutorial and a Pygame tutorial
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?
Naming variable UserContext was super confusing. :D
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 you please make a how to redirect to another page tutorial please respond 🙏🙏🙏
Bro can u make a lecture on RUST...!
6:39 for my reference p1-p2
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.
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
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.