Understanding Context API with Project | Complete React Tutorial Series in Hindi

इस लेख में हम देखेंगे कि कैसे हम Context API का उपयोग करके React में स्टेट मैनेज कर सकते हैं। Context API का उपयोग करके हम बिना props के खोज किए हर component को state पहुंचा सकते हैं, जिससे की हमारे code का redundancy काफी कम हो जाता है।

हमें इस tutorial सीरीज के पिछले पार्ट में पेश किए गए हर concept को समझने के बाद, अब यहाँ एक प्रोजेक्ट के जरिए देखेंगे कि कैसे हम context API का उपयोग कर सकते हैं।

शुरुआत

पहले हमें एक नया React project बनाना होगा। इसके लिए आप अपने terminal में निम्नलिखित command को run करें:


npx create-react-app context-api-project
cd context-api-project
npm start


बस, आपका project तैयार है! अब हमें context API का उपयोग करके एक project में state को manage करना सीखना है।

Project में Context API का उपयोग

हमारे project में हम एक counter component बनाएंगे जिसका state हम context API का उपयोग करके manage करेंगे।

उसके लिए, हमें निम्नलिखित steps को follow करना होगा:

1. नए context file को create करें

हमें एक नया file createContext.js क्रिएट करेंगे जो हमारे context को create करेगा।

2. State और function को createContext में define करें

हमारे createContext.js में, हम अपना state और state को update करने वाली function को define करेंगे।

3. Context को use करें

हमारे counter component में, हम context को use करके state को access करेंगे।

इस project के दौरान, हमें अधिकतम ध्यान देना होगा कि कैसे हम context API का उपयोग करके state को manage कर सकते हैं।

समाप्ति

इस tutorial में हमने context API का उपयोग करके React में state को manage करना सीखा। आशा करते हैं कि आपको यह tutorial पसंद आया होगा और आपने इससे कुछ नया सीखा होगा।

धन्यवाद!