Context API in React JS in Hindi in 2020 #51
Вставка
- Опубліковано 25 сер 2024
- React Context API is a way to essentially create global variables that can be passed around in a React app. This is the alternative to "prop drilling", or passing props from grandparent to parent to child, and so on. Context is often touted as a simpler, lighter solution to using Redux for state management.
In a typical React application, data is passed top-down (parent to child) via props, but this can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.
************ Must Watch Videos For Web Development ************
➡️ Hooks in React JS in Hindi | useState in Hook in React JS: • #30: Hooks in React J...
➡️ React DevTools & Source Code Link: www.thapatechn...
➡️ ReactJS Tutorial in Hindi 2020 Playlist Link: • React JS Tutorial in H...
➡️ ReactJS JavaScript Array Map Method in Hindi with Example: • ReactJS JavaScript Arr...
➡️ Fat Arrow Function in JavaScript in Hindi 2020: • ES6 Tutorial #8: Fat A...
➡️ #22: React JS Project Netflix App Part #1 in Hindi in 2020: • #22: Props in React Js...
➡️ Install VS Code for ReactJS LINK: www.thapatechn...
➡️ Check Complete Reactjs in One video here 👇 • ReactJS For Beginners ...
➡️ HTML in One Video: • Learn HTML in One Vide...
➡️ CSS in One video: • Learn Complete CSS In ...
➡️ CSS FlexBox in 30 Minutes: • CSS FlexBox in 30 Minu...
➡️ JavaScript in One video: • JavaScript in One Vide...
➡️ ECMAScript 6 in One Video: • ES5 & ES6 | ECMAScript...
➡️ HTML5 in one video: • HTML5 Tutorial in One ...
➡️ CSS3 in one video: • Learn Complete CSS3 In...
➡️ Bootstrap4 in One video: • Bootstrap 4 in One Vid...
➡️ Jquery in One video: • jQuery in One Video in...
➡️ JSON in one video: • JSON in One Video in H...
➡️ ReactJS in one video: • ReactJS For Beginners ...
➡️ PHP in One Video: • PHP TUTORIAL IN ONE VI...
➡️ NodeJS in one video: / ipnwakoibt
➡️ MySQL in one video: • Complete SQL & MySQL i...
********** CLICK HERE TO WATCH ************
➡️ Fetch API in JavaScript: • Fetch API in JavaScrip...
➡️ AJAX tutorial for beginners in Hindi: • AJAX tutorial for begi...
➡️ Template literals (Template strings) in ES6 in JavaScript in Hindi: • ES6 Tutorial #3: Templ...
➡️ Async Await in JavaScript in Hindi: • Async Await in JavaScr...
➡️ Promises in JavaScript in Hindi: • Master The Promises in...
➡️ Callback Hell in JavaScript: • Callback Hell in JavaS...
➡️ Advanced JavaScript in Hindi Playlist: • Advanced JavaScript Tu...
➡️ ECMAScript Tutorial in Hindi 2020: • Modern JavaScript ES6 ...
➡️ ES5 & ES6 | ECMAScript 6 in One Video in Hindi: • ES5 & ES6 | ECMAScript...
➡️ JavaScript Game Development Series in 2020: • JavaScript Game Develo...
➡️ Source Code Link: www.thapatechn...
➡️ Top 5 Programming Languages in 2020: • Top 5 Programming Lang...
➡️ Ludo Game JavaScript Link: • JavaScript Game in Hin...
➡️Plz show some love to My Siter UA-cam Channel and Plz Subscribe Link: / @mayabeautyvlogs878
**************** MUST WATCH VIDEOS *****************
➡️ How to become a Full Stack Developer 2020: • How to become a Full S...
➡️ How To Become a Web Developer 2020: • How To Become a Web De...
➡️ How JavaScript Works: • How JavaScript Works i...
➡️ Follow me on Instagram: / vinodthapa55
Make Website Responsive Using Media Queries in One Video in Hindi | Web Design Tutorial in Hindi
➡️ Link: • Make Website Responsiv...
Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.
Don't Forget to Follow me on all Social Network,
Website Link: www.thapatechn...
Instagram Link: / vinodthapa55
Facebook Link: / vinodthapa55
Twitter Link: / vb55thapa
Facebook ThapaTechnical Page Link: www.facebook.c...
Guys, Finally video after 2 long days :) everything is fine now... Hope you like the video :)
Sir COVID 19 india ke api ka use krke React Js mai bhi bnao 👌☺️
Jo data ko display kre properly 😋👌
🤣🤣🤣 wtf I was doing 2 months ago.
hii vinod your doing very good job we are fallowing your tutorial but it is not good to ask money in the middle of the cousre for code you can do live coding we will super chat you..hope you understand
@Thapa%Technical Can you please make a video for Global state Context and Hooks
const Firstname= useContext ();
when I am exporting Firstname
Showing:-
Export 'Firstname' is not defined
Bhai, I am a Tamil. My Hindi is average but I am able to understand your tutorials very well. You are an amazing teacher! Thank you very much!
You need to learn Hindi bro
@@entertainmentcreations7661
Why he should learn Hindi ?
@@raviiirathore9984vinod is from nepal pokhara
@@raviiirathore9984 bcz i am in karnataka they are forcing me to learn kannada so he need to learn HINDI.
your method is very amazing thank you so much dill kya aj comment krny ko you are best teacher Allah apko hmsha slamat rkhy FROM PAKISTAN
Your lectures are very underrated 👍
Excellent!!! bade bade Technical youtubers fail hain aapke saamne Sir.
Kamal ka technical methode bro learn only in this video context api
You are an amazing teacher! Thank you very much!
Thank you soo much bhaiya, you are the real provider ❤️🙏🏻
Vai, amazing. I just got to context api two days ago, watched some videos, and was confused. A lot of things got cleared after watching this video, waiting eagerly for the video on useContext. Thank you!
why we are passing in Context as we are not using that in cosumner
Finally Confusion got clear .Thanks for Making such types of videos...
best explanation i got after watching 20 videos
2:11 most funniest part of this tutorial so far 😆
Thank you so much ☺️ n voice ko edit kiya hai na apne.. bold acha lag rha hai
bhai mast video thi ek dam samjh a gaya
You're a great teacher . I really appreciate your videos .
bhai bhai jabardast
maza hi aa gaya
Ghanto waste hone se bacha diya. Succinct and informative!
that was very simple and easy to undestand, thankyou
amazing explanation thankyou so much..🔥💪💪
Thankyou ,,awesome video, easy to understand, keep providing this kind of video❤
Your teaching is awesome bro
U made everything easy.Lots of thanks and respect.No doubt u r the best of best.
Sir love your videos.Sir ek local storage pe video bnaoge pls
Bhot easy explanation kia h.. Thanks
Wa Vinod bhai you killed it
Sir COVID 19 india ke api ka use krke React Js mai bhi bnao 👌☺️
Jo data ko display kre properly 😋👌
I like the part when you say "boom guys"..Thank you for the superb content
"Context Hell" could be the perfect word... BTW great video..thanks
bro ur explanation is super and each video is uploading morethan 1time in the playlist can u resolve this issue
love u sir ji maja aagya topic clear
we can create a variable with value and export it and directly access it in any component, then why we need this. In both cases exporting and importing is required. ulta simpla variable se code kam ho jayega..
Hi, can u please arrange a tutorial for persisting redux state with multiple reducers. Thanks in advance.
Thank you so much sir .
And boom guys😍
Difference between redux and context api??
there is no App.jsx file in my react app
it might be named app.js , js is a defined term for javascript xml . either of this is perfect. Redux is a global state management which store the data in the store and we can retrieve the values in the component where it is needed in spite of the parent / children component. Context api also does the same but not meant for large scale . In company projects ots used to maintain theme , small arc in it which can be changed when needed but not frequently.
It helps me alot thank you👍🏻
thapa bhai please also create a mega project using react js like ecommerce web app or chat app
thanku so much upload this video it 's need
Great explanation sir thanks for this
hellooo,Thapa technical!! you have explained so simply ,Thank youu and btw,your name seems to be Nepali?
sir 1 confusion ha kay jab app.jsx main saye data export ho kar component C main show ho raha tho ap nay firsname context kay ndr compA ko kun rakha is matlab data tho link ha dubara hum agar
You're awesome man, Very simple and cool explanation
Amazing explanation..!
Amazing video boss!
Great explanation 👍
3 2 1 boom guys😄
yahe to chahiye tha ab start hui h asli react to
3 2 1 and boom guys XD
Thanks
You can pass value by export import method also then why we use context api is it necessary?
Yes i have this doubt too
3 2 1 and boom guys. !!
hard coded constant data yes, can be used via exports. But using context we can pass in states and setState method which constantly update.
awesome tutorial sir
Thanks bro
"And Boom Guys " --ye bhi ek contest hai
Brother I want to ask one question can you help me (I am perfect in frontend development but I am weak in programming logic building) can you help me
oh godd loved that example xD
thank you so much sir
Rendering directly is not supported and will be removed in a future major release. Did you mean to render instead?
I get this error what do I do?
Good
Consumer mai jo function bnaya hua hai, with name ka function hai, waise aise function ko kya bolte hai..... bhai ye muje smj nhi aa rha hai.
useContent can be used out of the component? I'm doing so but getting error. Following the same method but getting an error on export { DataVar } "Parsing error: Export 'DataVar' is not defined"
Please guide me. Thanks
sir can u help me why value show undefined
please check the code
codesandbox.io/s/winter-moon-1zhmw?file=/src/App.js
i have same problem sir can u help me
@@steplittle3516 i cant see any prob in your file , you have used useContext to set up a consumer to Tab component
Thankss
💥 guys
Error: App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
why this error occured
Thank u so much
Bro we can use props right i mean we can import component C in app.js and add some props we can use same props in compC by importing App right.... is that wrong practice????
its better idea
if you import compc , the details provided in com a and comb b wont be available in screen coz your providing directly and updating in virtual dom. Since, Vinod hasn't done anything in Com A and Com B , you thought it will be easy to import that, but if it has values in it. We have to use state management.
I couldn't understand why we are nesting all the contexts? Suppose we have a bunch of contexts.then?
😂 this specific tutorial is funny bcs of those errors
And boom guys
Flux pr video kab aayega....flux implementation
Amazing
14:15 We have already export default App then why we need to export the FirstName again?
Everything is at its best . Just stop using the word "PURRRFECT" ;)
Bhai how come this is call back hell , we are not passing a function as an argument to another function where we will return the parameter and call the previous function indefinitely. I think the most suitable thing to refers is high order function which accepts a parameter as function and returns another functions. Btw , learned a lot from you. Thank you and keep going.
Helpful 😇
Ye code react 18 me kaam nahi kar rha, context api ko react 18 me remove kar diya hai kya ??
3 2 1 boooom Context API Funda clear.
App m context h to aagar context ki value change hogi to sirf c refresh hoga ya a b and c ?
Computer assembled 🤔
Bhai please Canvas tutorials bana do🙏
yes new pc build..
@@ThapaTechnical Congratulations 💗
please make video on UseReducer.
I am getting this warning when i am returning any thing inside the Consumer. How can I solve this ?
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it
Please add a video for context api with reducers
Sir why r u calling in App.js ...
becozz data of comC will pass to comB, data of comB will pass to comA, data of comA will pass to App.jsx....and finally data of App.jsx will pass to index.js
coz thats the parent component of ComB and ComC. So the value from a to c or c to a (children to parent) has to be passed so that it can update in app.js which can update in index,js
Yup exactly same question.. If I consider these two answers than the question is why we use context... Because we say we want to directly exchange data between App.jsx and comC.jsx
So the question is again
Why we import comA in App.jsx?
The game was - "chinese whispering"
why my component is rendering when i passing "hello world " in compA and calling comA in App.js ,anyone have any idea
Waiting for a website in react js
Sir is it a replacement for redux?
Yes. UseContext hook and Context Api when work together minimize the need of Redux to a great extent.
Sir component c ko bhi to hum directly App.js me call krr skte hai import krk
if you import compc , the details provided in com a and comb b wont be available in screen coz your providing directly and updating in virtual dom. Since, Vinod hasn't done anything in Com A and Com B , you thought it will be easy to import that, but if it has values in it. We have to use state management
This is oxm vedio...
But Sir how we can pass the value without wrap a component inside Context.Provider??
Like,
No any component...
Onliy some JSX
Sir plz answer this.. kindly
without any component to whom you are providing the value?
what's the use of context if you don't want to pass down value
Can I pass data throw props. And how will be achieved. I am tried but not success
I am getting an error- TypeError: Render is not a function.
Can anyone help me!
❤
I am not getting that why you import 'ComA' inside App.jsx and use while working with "createContext" . if I import either of ComB Or ComC inside "App.jsx" even then the project also works.
Request to povide the Clarification on it
Regards
the main use of context is to drill or pass data to children component which is very complicated if you use props because you will have to pass props in every component in the hierarchy to get to the lowest component. That's why he made ComC so that he can show how to pass data from parent element i.e. App> ComA>ComB>ComC.
Is there any way to find child components which using same props from upper level.
Thanks Sir , This helped me a lot .
I call in context API used in API Call is possible
we can use multiple values with single context Api for first and last name no need to repeat code
using objects? we pass the object in the value of Provider
child element kaise parent element ko value pass karega using contexts?
Thapa technical 🍵
Redux pr bhi video bnayoge kya please reply?
ys bro actually we want