The useContext hook in React | Sigma Web Development Course - Tutorial
Вставка
- Опубліковано 14 лис 2024
- Access the Sigma web development course playlist: • Sigma Web Development ...
➡️ Source Code: github.com/Cod...
➡️ Notes and CheatSheets: www.codewithha...
➡️ English Subtitles are now up for all the videos!
►Checkout my English channel here: / @programmingwithharry
►Instagram: / codewithharry
python, C, C++, Java, JavaScript and Other Cheatsheets [++]:
Playlist: • Coding CheatSheets 🧾 b...
►Learn in One Video[++]:
Python Course with 5 Projects: • Python Crash Course in...
Python[15 Hr]: • Python Tutorial For Be...
Python Advance[3.5 Hr]: • Python Programming Cou...
Python[1 Hr]: • Learn Python In Hindi ...
Python[2 Hr]: • Python Tutorial In Hin...
Python[15 Min]: • 15 Minute Python Tutor...
JavaScript[1 Hr]: • JavaScript Tutorial
C[1.3 Hr]- • C Programming Tutorial...
php[1 Hr]: • Learn Php In One Video...
php[2.3 Hr]: • Php Tutorial for Begin...
php[Project]- • Login And Registration...
HTML[30 Min]: • HTML 5 Tutorial For Be...
CSS[8.5 Hr]: • CSS Tutorial In Hindi ...
CSS[1.4 Hr]: • CSS 3 Tutorial For Beg...
Wordpress[3.2 Hr]: • How To Make a WordPres...
Angular[2 Hr]: • Angular Tutorial in Hindi
Java[2.3 Hr]: • Java tutorial in hindi 🔥
Web Scraping[1 Hr]: • Web Scraping Tutorial ...
MongoDB[2 Hr]: • MongoDb Tutorial For B...
Numpy[1 Hr]: • Numpy Tutorial in Hindi
Android Dev[12 Hr]- • Android Development Tu...
Linux[1 Hr]: • Linux Tutorial For Beg...
JQuery[1.1 Hr]: • jQuery Tutorial For Be...
Git and GitHub[1.1 Hr]: • Git & GitHub Tutorial ...
►Complete course [playlist]:
React: • React Js Tutorials in ...
Python- • Python Tutorials For A...
OOP Python- • Object Oriented Progra...
Java: • Java Tutorials For Beg...
JavaScript- • JavaScript Tutorials I...
PHP- • PHP Tutorials in Hindi
C- • C Language Tutorials I...
C++- • C++ Tutorials In Hindi
Git & GitHub- • Git and GitHub Tutoria...
Android Dev- • Android Development Tu...
Python GUI- • Python GUI: Tkinter Tu...
Web Development- • Web Development Tutori...
Python Django: • Python Django Tutorial...
Projects Using HTML, CSS & Javascript- • Projects Using HTML, C...
Data Structure and Algo: • Data Structures and Al...
Follow Me On Social Media
►Website (created using Django Rest & Angular): www.codewithha...
►Facebook: / codewithharry
►Instagram: / codewithharry
Twitter: / codewithharry
Comment "#HarryBhai" if you read this 😉😉
one of my friend said if you really focus on yourself you will find that there is not much of competition and also after seeing the views difference in all of your vedio i think i definately get what he was actually saying
Yes brother
youtube pr is topic pe kam se kam 30 minutes ki long videos banaai he logon ne magar Harry bhai ne 15 minute mein un se bhi acha samjha diya. Lovo from Pakistan
I must comment "Your way of teaching in an easy way with mix language manner is Best"
Keep it up brother !
Best video on Context Hook till now
Harry bhai its just awesome ,
First video of react that I understand in one go. Hope u will continue this approach , first explain whole scenario with code and then its solution❤
One video is enough to learn useContext. Great video sir.
this is the third video i watched on context API , and this was the best
loved the video and this topic is released exactly before my exam
thanku bhayya lotof love
Let's vote for Data Science course after sigma🔥🎉💪
Agree with u
Hello Harry Bhai, Love from Gilgit Baltistan, this course is amazing and on video No. 78
Ab samajh mein aaya context api. Thank you bhaiya ❤❤😊
Love and respect from Pakistan Harry Bhai
Salute for your hardworking and consistency ❤
Hi
After hitesh and piyush garg,watched your video and now finally im able to understand context api.
Humaray yahan Pakistan may bhi kuch Indians key trah key mentality k log hotay hain , jo her achay say achay level k course ko start krnay say bhi pehlay ye puchtay hain , k ye achi job or placement lagwaye ga ya nahi . agar wahin time learning may or practice may lagayein to beast ban jayein is field may . You are a real gem Sir 😍😍😍🥰🥰🥰🥰
What do you mean indians ke tarah log ? 🤬
best explanation so far
very simple explanation of context api , my suggestion for the viewers first watch the video and try by yourself
Sir aur Kitne tutorial honge aage please answer me.
Love from Pakistan 💚❤️
Very easy way for understanding this concept. Great Harry Bhai
I loved this course and, I Saved 115 all your videos in my laptop. I don't want any type of paid course. #SigmaOp
Pinn my Comment, Big Fan
make one video on UseReducer as well
Thank you Harry bhai. It is a bit complex for me, but slowly it will become easy. 👍👍
Hamara Teacher Kaisa ho? Harry bhai jaisa ho! ❤
Thanks for the valuable content. Really feeling grateful to you.
Sir now a days I am exploring angular spring boot full stack developement projects where i found these highlighting features
1 razor pay
2 login verification on mail
3 more complex frontend part like links & all
4 windows local storage for saving user credentials in browser
Now my doubt is are these versatile range projects inspired by real mnc projects & can Learning it help freshers to develop projects in job ?
The course is awesome ❤❤
Harry Bhai We Will Be Teaching you JavaScript react best and your courses is very good and website is good
thanks.. ab acha sa samj a gya ha context ka.❤
Amazing explanation Harry Bhai ❤
this line :- I WILL SEE YOU NEXT TIME ❤❤
There is draw back of usecontext ....it should pass state only in react component ...not in normal function
Sir after this react course please teach us about NextJs also...
how explained this better than hitesh sir
sahi kaha yaar
Awesome video 😎 👍
thank you. Please add next js
SIR , PLEASE AB AK AI PE SERIES BANAVO NA
JORDAR SERIES CHE
SIGMA BATCH OP
mja aagya guru
My first comment sir ko special thank you very much sir🎉🎉🎉🎉🎉
React OP #harrybhai best youtuber and coding legend 💻
love you harry bhai from iit jodhpur
#reactOp
#best course - sigmawebdevelopmentcourse
@Harry Bhai I was using your 4 years old web development playlist..
Front end only..
Kaun sa follow karna hai abb😅
New hi kro vese html or css old course me bhi boht achi ha or same ha.
Sir aapne isme use effect likha hai ye use context aayega❤❤
Harry bhai keep it up
Title Should be "The useContext hook in React | Sigma Web Development Course - Tutorial #116"
Please make videos on redux. It is an important topic for react developers.
Helpfull Harry bhai❤
Code with Harry baba kii Jay🙌
thank you haris bhai
Title is incoreect Harry Brother
“Learn as if you will live forever, live like you will die tomorrow.”
Thank You. For this awesome Video
Thks harry bhai.
#CodeWithHarryRocks & #React Batch OP 🤟👍
It took me 55 mins to complete this video, I learned the shortcut method to open the project in the vs-code itself, without using file explorer, I was coding along, made a short soft note on useContext, passed it using 2 different ways and then the actual concept of useContext hook. I understood all but don't you think 50 mins is way too much time?
If you understood deeply than it's good
love you bhaiya
course is awesome...
well explained
1st person , but i already have my own Framework which is like react bu different
Aryy Harry bhai title me useEffet hook aagya, lecture tho useContext ke bare me hain 😅😅
🎯 Key Takeaways for quick navigation:
00:00 *🎥 Introduction to the useContext hook in React*
- The video introduces the useContext hook in React.
00:20 *🔧 Using Context API in React*
- Context API allows passing data through the component tree without having to pass props down manually at every level.
01:01 *🔄 Prop drilling in React*
- Prop drilling refers to the process where props are passed from a component to its descendants down the component tree, even if intermediate components do not use the props.
01:56 *🎯 Advantages of using useContext hook*
- The useContext hook provides an easier way to access state across deeply nested components, avoiding prop drilling.
02:23 *🚀 Practical demonstration of useContext in React*
- A practical demonstration showing how to use the useContext hook in a real React application.
03:07 *🛠️ Creating Components in React*
- Demonstrates creating components in React.
- Includes creating a component folder, adding components like Button and Navbar, and organizing the components.
04:00 *🧩 Organizing Components with React Fragment*
- Uses React Fragment to organize components.
- Demonstrates importing and using a Button component inside another component.
05:07 *📦 Creating and Using External Components*
- Shows how to create an external component file.
- Imports and uses the external component (Button) in another component.
06:32 *🔄 Understanding the useContext hook in React*
- Explanation of how to use the useContext hook in React.
- Demonstrates how to pass and access props using useContext.
- Shows how to use destructuring to simplify accessing props.
07:12 *🔄 Implementing useContext in React components*
- Demonstrates how to implement useContext in multiple components.
- Shows how to access and display the context value.
- Explains how to refactor code to use useContext instead of passing props manually.
07:54 *🔄 Refactoring code to use useContext*
- Shows the process of refactoring code to use useContext instead of props drilling.
- Highlights the benefits of using useContext for cleaner code.
- Explains how to organize code in folders and files for better structure.
09:15 *📁 Context API Folder Structure*
- Creating a folder called "Context" for organizing context-related files.
- Avoiding confusion by keeping context-related files separate from other files.
09:58 *🔄 Using Context in Components*
- Creating a context folder with files for each context, e.g., "counter.js".
- Importing the context in the main app.js file and using it.
11:08 *🔗 Context Provider Usage*
- Using the context provider to wrap the entire app in app.js.
- Achieving a nested component structure where all components receive the context value.
12:18 *🔄 Using the useContext hook in React*
- Demonstrates how to use the useContext hook in React to access context values in nested components.
13:38 *🖱️ Changing context value with a button click*
- Shows how to change a context value by clicking a button, using the useState hook within the context provider.
14:50 *🔄 Updating context value using setState function*
- Explains how to update a context value using the setState function, ensuring the value is correctly updated and reflected in the UI.
15:16 *🔄 Updating state in nested components with useContext*
- Demonstrates how to update state in nested components using the useContext hook.
Made with HARPA AI
Harry bhaiya how to apply in your company?...pls give us full video on it.
Harry bhai love form pakistan
Harry ki Guarantee ✅✅
Thankyou bhai
Hi bro ❤
Is bar UA-cam clone create Karo
With full response like button login screen shot screen upload screen home screen posts screen and response nav bar database run time
Like one page to another page Kasi transfer ho gaya
❤❤
#SigmaBatchop
Love you bhaiya ❤
bhai AI par series banavo ne
Sigma batch op 🎉🎉
#doubt If we have useContext hook in react then why we use Redux for same operation?
Usecontext wont work for larger global state
Heading mein useEffect hai bhaiya.
sigma batch op>>>
Thank you
#SigmaBatchOp
#ReactOp
#Harry sir❤❤
Coming for you sooon
Sigma batch OP
React OP
Harry bhai VS code main knosi Theme use karte ho
Thanks ❤️
Assam / Hailakandi sa kown kown ha
good bhai
Sir, Which chrome theme are you using?
Harry Bhai Title mai useEffect hai
What is outletcontext
Bhaiya video ke title mein UseEffect likha hua hai
😂
Nahi too
Hlo harry bhai mai aap ka old web development follow karu ye new sigma wall wed devlopment please bata di confusion hai
Please koi bata do
New
react from Pakistan
Harry bhai title change kijeye
component 1 me jo const counter waly jo line hy us ki smjh nhi ai woh q likho
I Am coming wait for me❤❤
Sigma batch op
Hello SIR. I am from Bangladesh and I am a non CSE student. I have 3 to 4 years to learn coding. So should I start with C and C++?
Starting with java would be more beneficial
Nope if he is learning as a beginner he should start from python or c
Amazing
can you design Apple music
Source code 108 vedio tak hi show ho raha ha kindly do something haris bhai
I'm facing Error: Objects are not valid as a React child (found: object with keys {$$typeof, _currentValue, _currentValue2, _threadCount, Provider, Consumer, _defaultValue, _globalName, _currentRenderer, _currentRenderer2}). If you meant to render a collection of children, use an array instead.
can someone help me out with this ?
If you're encountering the "Objects are not valid as a React child" error while using the Context API, it typically means you're trying to render the context value directly, which is an object. Here’s how to address it:
Check Context Provider: Ensure that the value you are providing in your context is appropriate (e.g., a string or a number) or properly accessing the properties of the object when consuming the context.
Consuming Context: When you consume the context, ensure you're rendering a specific property of the object instead of the whole object.
Example: If your context provides an object, access a specific field:
Instead of rendering the entire object, render its properties (like value.name).
Debugging: Use console logs to inspect the context value and make sure you’re not trying to render the whole object.
React OP❤
#SIGMA_BATCH_OP❤
#JAVASCRIPT_OP
#React OP
#CodewithHarry
#ReactOP #SigmabatchOP #Harrybhai #C.W.H #CodeWithHarry
harry bhai ye topic thora confusing hai .