Context API in React JS in Hindi in 2020 #51
Vložit
- čas přidán 11. 06. 2020
- 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.thapatechnical.com/2020/0...
➡️ 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.thapatechnical.com/2020/0...
➡️ 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.thapatechnical.com/2019/1...
➡️ 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 CZcams 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.thapatechnical.com
Instagram Link: / vinodthapa55
Facebook Link: / vinodthapa55
Twitter Link: / vb55thapa
Facebook ThapaTechnical Page Link: vinodbahadur...
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
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!
You're a great teacher . I really appreciate your videos .
Excellent!!! bade bade Technical youtubers fail hain aapke saamne Sir.
Thankyou ,,awesome video, easy to understand, keep providing this kind of video❤
Thank you soo much bhaiya, you are the real provider ❤️🙏🏻
Finally Confusion got clear .Thanks for Making such types of videos...
that was very simple and easy to undestand, thankyou
amazing explanation thankyou so much..🔥💪💪
Your lectures are very underrated 👍
best explanation i got after watching 20 videos
Kamal ka technical methode bro learn only in this video context api
Wa Vinod bhai you killed it
You are an amazing teacher! Thank you very much!
Great explanation sir thanks for this
U made everything easy.Lots of thanks and respect.No doubt u r the best of best.
Your teaching is awesome bro
Bhot easy explanation kia h.. Thanks
bhai bhai jabardast
maza hi aa gaya
Thank you so much ☺️ n voice ko edit kiya hai na apne.. bold acha lag rha hai
It helps me alot thank you👍🏻
Ghanto waste hone se bacha diya. Succinct and informative!
2:11 most funniest part of this tutorial so far 😆
You're awesome man, Very simple and cool explanation
I like the part when you say "boom guys"..Thank you for the superb content
bhai mast video thi ek dam samjh a gaya
"Context Hell" could be the perfect word... BTW great video..thanks
Amazing explanation..!
Amazing video boss!
oh godd loved that example xD
love u sir ji maja aagya topic clear
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
Sir love your videos.Sir ek local storage pe video bnaoge pls
Great explanation 👍
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?
hellooo,Thapa technical!! you have explained so simply ,Thank youu and btw,your name seems to be Nepali?
bro ur explanation is super and each video is uploading morethan 1time in the playlist can u resolve this issue
awesome tutorial sir
why we are passing in Context as we are not using that in cosumner
Hi, can u please arrange a tutorial for persisting redux state with multiple reducers. Thanks in advance.
Thank you so much sir .
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
App m context h to aagar context ki value change hogi to sirf c refresh hoga ya a b and c ?
Sir COVID 19 india ke api ka use krke React Js mai bhi bnao 👌☺️
Jo data ko display kre properly 😋👌
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
Is there any way to find child components which using same props from upper level.
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
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.
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 😇
Amazing
why my component is rendering when i passing "hello world " in compA and calling comA in App.js ,anyone have any idea
yahe to chahiye tha ab start hui h asli react to
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..
And boom guys😍
Thanks Sir , This helped me a lot .
14:15 We have already export default App then why we need to export the FirstName again?
Flux pr video kab aayega....flux implementation
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
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
thank you so much sir
Ye code react 18 me kaam nahi kar rha, context api ko react 18 me remove kar diya hai kya ??
Can I pass data throw props. And how will be achieved. I am tried but not success
Thank u so much
Please add a video for context api with reducers
I couldn't understand why we are nesting all the contexts? Suppose we have a bunch of contexts.then?
Hi Vinod, instead of createContext() with variable can we do it by array?
Yes... Any object can be passed as parameter
How you will make array ?
😂 this specific tutorial is funny bcs of those errors
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.
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.
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 am getting an error- TypeError: Render is not a function.
Can anyone help me!
💥 guys
bro, please tell me how do you multi-line typing
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.
3 2 1 and boom guys XD
please make video on UseReducer.
Thanks bro
Everything is at its best . Just stop using the word "PURRRFECT" ;)
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 extention bta dain please apnay nichay createContext likha pr wo opper khud hi likha gaya is extention ka name bta dain plzz
How if i fetch the data in child A and show it to child B by context without making provider value in index/app.js
make a context for childA
Hello sir,please make video for photo resizer
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
Computer assembled 🤔
Bhai please Canvas tutorials bana do🙏
yes new pc build..
@@ThapaTechnical Congratulations 💗
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
hii whats difference here between js vs jsx file you created here
React uses jsx to create a component which render to react component which can be seen in index,js. JSX is javascript xml . Extension doesnt matter when creating file everything is js object. the things written in a component should be of jsx , which takes js objects embeded in xml defined tags.
what if we passed compC directly to the parent components?
Best way to do this is to create context and state component sepratelty.And passing the component as props child
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
Waiting for a website in react js
Sir ap app developer ka series lekar aaiye
child element kaise parent element ko value pass karega using contexts?
Thanks
3 2 1 boom guys😄
❤
how to create a code in asp.net core web Api for dynamic otp generated in my mobile number using swagger on post method and we will be save all field (as name , EmployeeId and Mobilenumber etc.. )in Db also , Plz Sir tell me it's urgent.
Thankss