React useContext() hook introduction 🧗‍♂️

#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

[@BroCodez]

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

[@jithan977]

bro plz upload every day and always thankful for u

[@rayyanabdulwajid7681]

Make a crud todo in vanilla javascript where we can enter more than 1 value inside a form.

[@lonelydevilcreations]

Please make redux and context API videos

[@-_SleepAndEat_-]

Bro can you do Kali Linux ?

[@ronjohnson123]

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

[@reecenward]

yeah same lol

[@ChucklesMcGee780]

thanks for making this. I've been so confused by useContext, after a course and quite a few videos, until i found this.

[@JamesTheSuperDev]

Short and sweet. Exactly what I have been looking for.

[@a13519]

The best explaination in youtube about context

[@remember.772]

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

[@shreehari2589]

Yeah no one could have explained it better than you, I hope you will release full react course soon, eagerly waiting for it

[@valerylouis6747]

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

[@MirzaMesinovic]

Absolutely amazing tutorial. Impossible to not understand. Thanks!

[@java_learn6447]

Amazing lecture

[@hananfadah]

Wow thanks a lot! What a great explanation. Truly appreciate your effort.

[@ttsl8922]

the example is intuitive and easy to understand. ty

[@razkoreakpop9805]

Thank you for uploading video ❤

[@shubhamsonar5689]

love you bro such a super duper easy to understand 🙌

[@ilhamnurutomo6930]

thanks, great explanation

[@topvibe952]

Best Explanation 🤝❤❤

[@animatsuki5345]

really cool! thanks man! yay

[@BishanTamang-rk5ji]

Make 2024 Java course love from Nepal ♥️💓

[@sebastianlozano7707]

Most of what I know about Javascript is thanks to you! Thanks Bro Code

[@bmwmotorbikesdaily]

Well explained keep it up!

[@monmaka]

I finally understand it. Thanks bro

[@ShashankJ04]

Swear to god I have all notifications on KZbin but everytime u upload a new video I get no notification. Love your videos though!! keep on going.

[@HarshithramSundararaman]

youre videos are great!

[@milad8030]

I saw different video, but you are better than those. you are not in a rush, explain why we need what. thank you

[@THE_UNITED_STATES_OF_AMERICA51]

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

[@available2574]

Bro you are hero...

[@valerylouis6747]

I'm bout to watch this tutorial today. Anything from bro code, I know it's good

[@abhishekjaiswar5182]

Finally I got it...❤

[@pastori2672]

i swear everytime im concerned about a concept you make a video about it

[@pratyushkiran8654]

Uff ! That was easy 🔥🔥

[@razkoreakpop9805]

Your the best

[@Blade_Dhruv]

you can use eslint react extension for typing react code faster

[@user-ur3io2ny2j]

Please continue teaching react.. upload new video you are expert in this💔

[@satisfying_shapes]

thanks for explanation, but does needs to have 'user={user}' for useContext to work?

[@BroCodez]

You can remove user={user}, I forgot to do that in the demo

[@satisfying_shapes]

@@BroCodez thank you for letting me know ❤❤

[@togya4]

I wish u talked about it earlier cuz 6 months ago i was so lost ):

[@KingOfMadnesss]

Day 1 of asking for an sfml full course (after your done with this course)

[@ahmadyakubuahmad7626]

Bro we want to see your face and say Thank you!

[@shreehari2589]

You can see him on twitch

[@smithclash2898]

​​@@shreehari2589what's his twitch Id?

[@nebojsaknezevic6053]

Can it work in reverse? Make component C provider and then have componentA consumer?

[@rishabhkedia9304]

Please make Reactjs projects as well

[@DeadEnd_579]

Hey can u continue Data Structures and Algorithms Playlist on

[@arshadahamed988]

Can we have more values in single usecontext hook??

[@sunilmehta5237]

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.

[@RhemaOshogwe]

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?

[@RhemaOshogwe]

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

[@nesa6582]

Naming variable UserContext was super confusing. :D

[@Nova_Software]

Day 1 of asking for a typescript tutorial, a c# with xaml tutorial and a Pygame tutorial

[@lonelydevilcreations]

Please create redux and context API tutorial

[@raitaskeen]

Bro can u make a lecture on RUST...!

[@hashirowais6475]

how many videos are left till this series is over?

[@BroCodez]

Why, do you not like it?

[@hashirowais6475]

@@BroCodez No I love it. I just want to know much is left before I can start using react to create my own applications :)

[@santoshchulakimath]

6:39 for my reference p1-p2

[@ish7862]

🫡🫡🫡

[@capslock3250]

Personally, I find useContext to be the most confusing hook.