Web3 और DApp विकास की मूल बातें · पाठ

React और Web3 फ़्रेमवर्क

DApps के लिए गतिशील उपयोगकर्ता इंटरफ़ेस बनाने हेतु React जैसे फ्रंट-एंड फ़्रेमवर्क को Web3 लाइब्रेरी के साथ एकीकृत करें।

पाठ 1, कुल 3 में से11 चरण

React और Web3 फ़्रेमवर्क, CoddyKit पर Web3 और DApp विकास की मूल बातें का एक निःशुल्क पाठ है। यह 3 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Web3 और DApp विकास की मूल बातें सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Web3 और DApp विकास की मूल बातें पाठ्यक्रम में कुल 3 पाठ शामिल हैं।

विकेंद्रीकृत ऐप्लिकेशन को उपयोगकर्ता इंटरफ़ेस चाहिए

विकेंद्रीकृत ऐप्लिकेशन (डीऐप्स) केवल ब्लॉकचेन पर चलने वाले स्मार्ट कॉन्ट्रैक्ट नहीं होते। पारंपरिक ऐप्लिकेशन की तरह, लोगों के साथ इंटरैक्ट करने के लिए उन्हें उपयोगकर्ता इंटरफ़ेस (UI) की आवश्यकता होती है।

उपयोगकर्ता इसी UI को देखते और क्लिक करते हैं। यह उनके क्रिप्टो वॉलेट, जैसे MetaMask, से जुड़ता है और जानकारी दिखाने या लेन-देन भेजने के लिए ब्लॉकचेन के साथ संचार करता है।

गतिशील UI के लिए React

रिएक्ट आधुनिक यूज़र इंटरफ़ेस बनाने के लिए बहुत लोकप्रिय JavaScript लाइब्रेरी है। यह अपने घटक-आधारित आर्किटेक्चर के लिए जानी जाती है, जिसमें आपका यूज़र इंटरफ़ेस छोटे, दोबारा उपयोग किए जा सकने वाले हिस्सों में बाँट दिया जाता है।

रिएक्ट का उपयोग करने से डेवलपर अधिक कुशलता से गतिशील, प्रतिक्रियाशील और जटिल विकेंद्रीकृत ऐप के फ्रंट-एंड बना सकते हैं।

Web3 लाइब्रेरी: ब्लॉकचेन का पुल

अपने रिएक्ट ऐप को Ethereum ब्लॉकचेन से संवाद कराने के लिए आपको ‘Web3 लाइब्रेरी’ की आवश्यकता होती है। ये लाइब्रेरियाँ एक महत्वपूर्ण पुल का कार्य करती हैं और आपके JavaScript कोड को ऐसे कमांड में बदलती हैं जिन्हें ब्लॉकचेन समझ सके।

Web3.js: Ethereum ब्लॉकचेन के साथ इंटरैक्ट करने के लिए व्यापक रूप से उपयोग की जाने वाली एक संपूर्ण लाइब्रेरी।
Ethers.js: Web3.js का आधुनिक, हल्का और अक्सर पसंद किया जाने वाला विकल्प, जो अपने साफ़-सुथरे API के लिए जाना जाता है।

रिएक्ट प्रोजेक्ट सेट अप करना

आइए, एक नया रिएक्ट प्रोजेक्ट बनाकर शुरुआत करते हैं। हम create-react-app का उपयोग करेंगे। यह एक आम टूल है, जो अच्छी डिफ़ॉल्ट संरचना के साथ नया रिएक्ट ऐप तैयार करता है।

अपना टर्मिनल खोलें और निम्न कमांड चलाएँ:

npx create-react-app my-dapp-frontend

Web3 लाइब्रेरी इंस्टॉल करना

रिएक्ट प्रोजेक्ट बनाने और उसकी डायरेक्टरी में जाने के बाद अगला चरण Web3 लाइब्रेरी इंस्टॉल करना है। इस पाठ में हम Web3.js का उपयोग करेंगे।

अपने प्रोजेक्ट के टर्मिनल में यह कमांड चलाएँ:

npm install web3

Ethereum प्रोवाइडर से कनेक्ट करना

आपके विकेंद्रीकृत ऐप को Ethereum नेटवर्क से कनेक्शन की आवश्यकता होती है। यह कनेक्शन आम तौर पर यूज़र के ब्राउज़र वॉलेट, जैसे MetaMask, द्वारा उपलब्ध कराया जाता है। MetaMask ब्राउज़र में एक वैश्विक window.ethereum ऑब्जेक्ट इंजेक्ट करता है।

हम इस window.ethereum ऑब्जेक्ट का उपयोग अपने Web3.js इंस्टेंस को प्रारंभ करने के लिए करते हैं, जिससे हमारा ऐप ब्लॉकचेन से डेटा पढ़ और उसमें डेटा लिख सकता है।

कोड डेमो: Web3 प्रारंभ करना

यह रिएक्ट घटक माउंट होने पर Web3.js को प्रारंभ करता है। यह MetaMask प्रोवाइडर की जाँच करता है और कनेक्ट करने का प्रयास करता है, साथ ही कनेक्शन की स्थिति के आधार पर यूज़र इंटरफ़ेस को अपडेट करता है।

import React, { useEffect, useState } from 'react';
import Web3 from 'web3';

function App() {
  const [web3, setWeb3] = useState(null);
  const [isConnected, setIsConnected] = useState(false);

  useEffect(() => {
    const initWeb3 = async () => {
      if (window.ethereum) {
        try {
          // Request account access
          await window.ethereum.request({ method: 'eth_requestAccounts' });
          const web3Instance = new Web3(window.ethereum);
          setWeb3(web3Instance);
          setIsConnected(true);
          console.log('Web3 connected!');
        } catch (error) {
          console.error('User denied or connection error:', error);
        }
      } else {
        console.log('MetaMask not detected. Install it!');
      }
    };
    initWeb3();
  }, []); // Runs once on component mount

  return (
    <div>
      <h1>DApp Frontend</h1>
      {isConnected ? (
        <p>Connected to Ethereum!</p>
      ) : (
        <p>Not connected. Please install MetaMask.</p>
      )}
    </div>
  );
}

export default App;

यूज़र के अकाउंट का पता प्राप्त करना

Ethereum प्रोवाइडर से कनेक्ट होने के बाद, हम यूज़र के कनेक्ट किए गए वॉलेट पतों को प्राप्त करने के लिए अपने web3 इंस्टेंस का उपयोग कर सकते हैं। यह उन सभी विकेंद्रीकृत ऐप के लिए एक मूलभूत चरण है जिन्हें यूज़र-विशिष्ट डेटा दिखाना या लेन-देन की तैयारी करना हो।

हम आम तौर पर web3.eth.getAccounts() द्वारा लौटाई गई सूची से पहला अकाउंट प्राप्त करते हैं।

रिएक्ट स्थिति में अकाउंट दिखाना

अपने रिएक्ट ऐप्लिकेशन में कनेक्ट किए गए अकाउंट का पता दिखाने के लिए हम उसे useState हुक की सहायता से रिएक्ट की स्थिति में संग्रहीत करेंगे। इससे अकाउंट प्राप्त होने पर यूज़र इंटरफ़ेस अपने-आप अपडेट हो जाता है।

आइए, कनेक्ट किए गए अकाउंट को दिखाने के लिए अपना App.js अपडेट करें:

import React, { useEffect, useState } from 'react';
import Web3 from 'web3';

function App() {
  const [web3, setWeb3] = useState(null);
  const [account, setAccount] = useState(null);
  const [isConnected, setIsConnected] = useState(false);

  useEffect(() => {
    const initWeb3 = async () => {
      if (window.ethereum) {
        try {
          await window.ethereum.request({ method: 'eth_requestAccounts' });
          const web3Instance = new Web3(window.ethereum);
          setWeb3(web3Instance);
          setIsConnected(true);

          const accounts = await web3Instance.eth.getAccounts();
          setAccount(accounts[0]); // Store the first account
          console.log('Connected account:', accounts[0]);

        } catch (error) {
          console.error('Connection error:', error);
          setAccount(null);
          setIsConnected(false);
        }
      } else {
        console.log('MetaMask not detected.');
        setAccount(null);
        setIsConnected(false);
      }
    };
    initWeb3();
  }, []); // Empty dependency array means this runs once on mount

  return (
    <div>
      <h1>My DApp</h1>
      {isConnected && account ? (
        <p>Connected account: <code>{account}</code></p>
      ) : (
        <p>Please connect your wallet.</p>
      )}
    </div>
  );
}

export default App;

Web3 इंटीग्रेशन की जाँच

रिएक्ट विकेंद्रीकृत ऐप में Web3 लाइब्रेरी (जैसे Web3.js या Ethers.js) का मुख्य उद्देश्य निम्नलिखित में से क्या है?

इंटरैक्टिव पाठ में इसका उत्तर दें

रिएक्ट और Web3 इंटीग्रेशन का पुनरावलोकन

आज हमने विकेंद्रीकृत ऐप के फ्रंट-एंड बनाने की दिशा में अपने पहले कदम उठाए! हमने सीखा कि गतिशील यूज़र इंटरफ़ेस बनाने के लिए रिएक्ट उत्कृष्ट है और Web3.js जैसी Web3 लाइब्रेरियाँ इन यूज़र इंटरफ़ेस को Ethereum ब्लॉकचेन से जोड़ने के लिए आवश्यक हैं।

हमने रिएक्ट प्रोजेक्ट सेट अप करना, Web3.js इंस्टॉल करना, window.ethereum प्रोवाइडर का उपयोग करके कनेक्शन प्रारंभ करना और ऐप में दिखाने के लिए यूज़र के कनेक्ट किए गए वॉलेट का पता प्राप्त करना सीखा।

यह आधारभूत ज्ञान आपके विकेंद्रीकृत ऐप को इंटरैक्टिव और यूज़र-फ्रेंडली बनाने के लिए महत्वपूर्ण है। अगले चरण में हम वॉलेट कनेक्शन और लेन-देन को संभालने के तरीके को विस्तार से समझेंगे।

शुरुआत निःशुल्क

एआई शिक्षक के साथ Web3 और DApp विकास की मूल बातें सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 29
पाठ: 105

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “React और Web3 फ़्रेमवर्क” पाठ निःशुल्क है?

हाँ — Web3 और DApp विकास की मूल बातें अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “React और Web3 फ़्रेमवर्क” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Web3 और DApp विकास की मूल बातें पाठ्यक्रम में कुल 3 पाठ शामिल हैं।

“React और Web3 फ़्रेमवर्क” में मैं क्या सीखूँगा?

DApps के लिए गतिशील उपयोगकर्ता इंटरफ़ेस बनाने हेतु React जैसे फ्रंट-एंड फ़्रेमवर्क को Web3 लाइब्रेरी के साथ एकीकृत करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Web3 और DApp विकास की मूल बातें का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Web3 और DApp विकास की मूल बातें शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Web3 और DApp विकास की मूल बातें शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 3 में से 1वाँ पाठ है।

“React और Web3 फ़्रेमवर्क” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Web3 और DApp विकास की मूल बातें पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Web3 और DApp विकास की मूल बातें पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Web3 और DApp विकास की मूल बातें पर वापस जाएँ