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

रिएक्ट को विभिन्न तकनीकों के साथ एकीकृत करना सीखें और आप कई स्रोतों से लाभ प्राप्त करेंगे।

1. रिएक्ट + रेडक्स

Redux एक राज्य प्रबंधन पुस्तकालय है जिसका उपयोग रिएक्ट के संयोजन में किया जाता है। Redux केंद्रीकृत अनुप्रयोग राज्य प्रबंधन की सुविधा देता है। कई राज्यों के साथ जटिल एप्लिकेशन बनाते समय, रिएक्ट और रिडक्स एक साथ अच्छी तरह से काम करते हैं।

यहाँ रिएक्ट के साथ Redux का उपयोग करने का एक उदाहरण दिया गया है:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात {क्रिएटस्टोर} से'रिडक्स';
आयात {प्रदाता} से'प्रतिक्रिया-रिडक्स';
कॉन्स्ट प्रारंभिक अवस्था = { गिनती करना: 0 };
समारोहकम करने(राज्य = प्रारंभिक अवस्था, क्रिया) {
बदलना (प्रक्रिया का प्रकार) {
मामला





instagram viewer
'इंक्रीमेंट':
वापस करना { गिनती करना: राज्य गिनती + 1 };
मामला'कमी':
वापस करना { गिनती करना: राज्य.गणना - 1 };
गलती करना:
वापस करना राज्य;
 }
}

कॉन्स्टआयात प्रतिक्रिया से'प्रतिक्रिया';
आयात {यूज़क्वेरी, जीक्यूएल} से'@अपोलो/क्लाइंट';
कॉन्स्ट GET_USERS = जीक्यूएल`
 क्वेरी GetUsers {
 उपयोगकर्ता {
 पहचान
 नाम
 }
 }
;
समारोहउपयोगकर्ताओं() {
कॉन्स्ट {लोड हो रहा है, त्रुटि, डेटा} = useQuery (GET_USERS);
अगर (लोड हो रहा है) वापस करना<पी>लोड हो रहा है...पी>;
अगर (गलती) वापस करना<पी>गलती :(पी>;
वापस करना (
स्टोर = क्रिएटस्टोर (रिड्यूसर);
समारोहविरोध करना() {
कॉन्स्ट गिनती = उपयोग चयनकर्ता (राज्य => राज्य। गिनती);
कॉन्स्ट प्रेषण = उपयोग डिस्पैच ();
वापस करना (


गणना: {गिनती</p>
 प्रेषण({ प्रकार: 'इंक्रीमेंट' })}>+</button>
 प्रेषण({ प्रकार: 'कमी' })}>-</button>
 </div>
 );
}
समारोहअनुप्रयोग() {
वापस करना (


 </Provider>
 );
}
निर्यातगलती करना अनुप्रयोग;

यह उदाहरण 0 की प्रारंभिक अवस्था के साथ एक Redux स्टोर बनाता है. एक रेड्यूसर फ़ंक्शन तब संभालता है वेतन वृद्धि और घटती संचालन। कोड का उपयोग करता है उपयोग चयनकर्ता और useDispatch चल रही गिनती प्राप्त करने और गतिविधियों को अलग-अलग भेजने के लिए हुक।

अंत में, स्टोर को पूरे एप्लिकेशन के लिए सुलभ बनाने के लिए, काउंटर घटक को प्रदाता घटक में लपेटें।

2. Next.js के साथ सर्वर-साइड रेंडरिंग

Next.js एक विकास ढांचा है जो वेबसाइट की गति को अनुकूलित करता है और एसईओ क्लाइंट्स को HTML ट्रांसमिट करके और उपयोग करके रणनीति रिएक्ट घटकों का सर्वर-साइड प्रतिपादन.

इसका शक्तिशाली टूलसेट रिएक्ट के साथ काम करता है, असाधारण प्रदर्शन और उच्च खोज इंजन रैंकिंग प्रदान करता है।

// पेज/इंडेक्स.जेएस
आयात प्रतिक्रिया से'प्रतिक्रिया';
समारोहघर() {
वापस करना (


हैलो, दुनिया!</h1>


यह एक सर्वर द्वारा प्रदान किया गया रिएक्ट घटक है। </p>
 </div>
 );
}
निर्यातगलती करना घर;

इस मॉडल में, आप एक रिएक्ट घटक की विशेषता बताते हैं जिसे कहा जाता है घर. Next.js इस घटक की सामग्री के साथ एक स्थिर HTML पृष्ठ बनाता है जब यह इसे सर्वर पर प्रस्तुत करता है। जब पृष्ठ क्लाइंट से एक विज़िट प्राप्त करता है, तो यह क्लाइंट को HTML भेजेगा और घटक को हाइड्रेट करेगा, जिससे यह एक गतिशील रिएक्ट घटक के रूप में कार्य कर सकेगा।

3. ग्राफक्यूएल के साथ डेटा प्राप्त करना

ग्राफ़कॉल एपीआई के लिए एक क्वेरी भाषा है जो आरईएसटी के लिए एक कुशल, मजबूत और अनुकूलनीय विकल्प प्रदान करती है। ग्राफक्यूएल के साथ, आप तेजी से डेटा प्राप्त कर सकते हैं और यूजर इंटरफेस को अधिक तेजी से अपडेट कर सकते हैं।

यह प्रतिक्रिया के साथ ग्राफक्यूएल का उपयोग करने के तरीके का एक उदाहरण है:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात {यूज़क्वेरी, जीक्यूएल} से'@अपोलो/क्लाइंट';
कॉन्स्ट GET_USERS = जीक्यूएल`
 क्वेरी GetUsers {
 उपयोगकर्ता {
 पहचान
 नाम
 }
 }
;
समारोहउपयोगकर्ताओं() {
कॉन्स्ट {लोड हो रहा है, त्रुटि, डेटा} = useQuery (GET_USERS);
अगर (लोड हो रहा है) वापस करना<पी>लोड हो रहा है...पी>;
अगर (गलती) वापस करना<पी>गलती :(पी>;
वापस करना (


 {data.users.map(उपयोगकर्ता => (
{उपयोगकर्ता नाम</li>
 ))}
 </ul>
 );
}
समारोहअनुप्रयोग() {
वापस करना (


उपयोगकर्ता</h1>

 </div>
 );
}
निर्यातगलती करना अनुप्रयोग;

यह मॉडल कॉल करता है useQuery समारोह से @ अपोलो/क्लाइंट ग्राफ़िकल प्रोग्रामिंग इंटरफ़ेस से ग्राहकों की सूची लाने के लिए पुस्तकालय। उपयोगकर्ता सूची तब UI में प्रदर्शित की जाती है।

4. सीएसएस-इन-जेएस के साथ स्टाइलिंग

CSS-in-JS रिएक्ट घटकों को स्टाइल करने के लिए एक जावास्क्रिप्ट-आधारित विधि है। यह जटिल स्टाइलशीट को प्रबंधित करना आसान बनाता है और आपको मॉड्यूलर और घटक-आधारित शैली में स्टाइल लिखने देता है।

यहाँ रिएक्ट के साथ CSS-in-JS का उपयोग करने का एक उदाहरण दिया गया है:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात स्टाइल से'शैली-घटक';
कॉन्स्ट बटन = स्टाइल.बटन`
 पृष्ठभूमि का रंग: #007bff;
 रंग: #fff;
 गद्दी: 10पिक्सल 20पीएक्स;
 सीमा-त्रिज्या: 5पीएक्स;
 फ़ॉन्ट आकार: 16पीएक्स;
 कर्सर: सूचक;
 &: होवर {
 पृष्ठभूमि का रंग: #0069डी 9;
 }
;
समारोहअनुप्रयोग() {
वापस करना (


मुझे क्लिक करें! </Button>
 </div>
 );
}
निर्यातगलती करना अनुप्रयोग;

यह उदाहरण एक बनाता है स्टाइल बटन घटक का उपयोग करना स्टाइल समारोह। यह बटन के अनुभव टोन, टेक्स्ट टोन, कुशनिंग, लाइन स्वीप, टेक्स्ट डायमेंशन और कर्सर को परिभाषित करता है।

एक होवर स्थिति जो उपयोगकर्ता के बटन पर होवर करने पर पृष्ठभूमि का रंग बदल देती है, उसे भी परिभाषित किया जाता है। बटन को अंत में एक रिएक्ट घटक का उपयोग करके प्रस्तुत किया गया है।

5. डेटा विज़ुअलाइज़ेशन के लिए D3 के साथ एकीकरण

D3 एक डेटा हेरफेर और विज़ुअलाइज़ेशन JavaScript लाइब्रेरी है। आप रिएक्ट का उपयोग करके शक्तिशाली और इंटरैक्टिव डेटा विज़ुअलाइज़ेशन बना सकते हैं। रिएक्ट के साथ डी3 का उपयोग कैसे करें इसका एक उदाहरण इस प्रकार है:

आयात प्रतिक्रिया, {useRef, useEffect} से'प्रतिक्रिया';
आयात * जैसा d3 से'डी3';
समारोहबार चार्ट({ आंकड़े }) {
कॉन्स्ट रेफ = यूसेरफ ();
 उपयोग प्रभाव (() => {
कॉन्स्ट svg = d3.select (Ref.current);
कॉन्स्ट चौड़ाई = svg.attr ('चौड़ाई');
कॉन्स्ट ऊँचाई = svg.attr ('ऊंचाई');
कॉन्स्ट एक्स = डी 3.स्केलबैंड ()
 .डोमेन (डेटा.मैप ((डी) => डी.लेबल))
 ।श्रेणी([0, चौड़ाई])
 ।गद्दी(0.5);
कॉन्स्ट y = d3.scaleLinear ()
 ।कार्यक्षेत्र([0, d3.max (डेटा, (d) => d.value)])
 रेंज ([ऊंचाई, 0]);
 svg.selectAll('रेक्ट')
 डेटा (डेटा)
 ।प्रवेश करना()
 .परिशिष्ट('रेक्ट')
 .एटीआर ('एक्स', (डी) => एक्स (डी.लेबल))
 .एटीआर ('य', (डी) => वाई (डी.वैल्यू))
 .एटीआर ('चौड़ाई', एक्स बैंडविड्थ ())
 .एटीआर ('ऊंचाई', (डी) => ऊंचाई - वाई (डी.वैल्यू))
 .एटीआर ('भरना', '#007bff');
 }, [आंकड़े]);
वापस करना (
400}>
 {/ * कुल्हाड़ियों यहाँ जाओ * /}
 </svg>
 );
}
निर्यातगलती करना बार चार्ट;

यह कोड एक परिभाषित करता है बार चार्ट घटक जो a को स्वीकार करता है आंकड़े पिछले कोड स्निपेट में प्रोप। यह कॉल करता है उपयोग संदर्भ एसवीजी घटक का संदर्भ बनाने के लिए हुक जो इसका उपयोग रूपरेखा तैयार करने के लिए करेगा।

उसके बाद, यह चार्ट के बार्स को रेंडर करता है और स्केल्स को परिभाषित करता है यूज़ इफेक्ट () हुक, जो डेटा के मानों को स्क्रीन के निर्देशांकों से मैप करता है।

6. WebSockets के साथ रीयल-टाइम कार्यात्मकता जोड़ना

WebSockets को लागू करने से क्लाइंट और सर्वर के बीच निरंतर संचार को सक्षम करने वाला एक पूरी तरह से चालू दो-तरफ़ा एवेन्यू स्थापित होता है। वे रिएक्ट को वेब एप्लिकेशन में निरंतर उपयोगिता जोड़ने के लिए सक्षम करते हैं, उदाहरण के लिए, चर्चा बोर्ड, लाइव अपडेट और चेतावनियां।

आप रिएक्ट के साथ निम्नलिखित तरीके से वेबसाकेट का उपयोग करते हैं:

आयात प्रतिक्रिया, {useState, useEffect} से'प्रतिक्रिया';
आयात आईओ से'सॉकेट.आईओ-क्लाइंट';
समारोहगपशप करने का कमरा() {
कॉन्स्ट [संदेश, सेटमैसेज] = यूज़स्टेट ([]);
कॉन्स्ट [inputValue, setInputValue] = useState('');
कॉन्स्ट सॉकेट = आईओ (' http://localhost: 3001');
 उपयोग प्रभाव (() => {
 सॉकेट.ऑन ('संदेश', (संदेश) => {
 सेटमैसेज ([... संदेश, संदेश]);
 });
 }, [संदेश, सॉकेट]);
कॉन्स्ट हैंडल सबमिट करें = (इ) => {
 e.preventDefault ();
 सॉकेट.एमिट ('संदेश', इनपुटवैल्यू);
 सेट इनपुट वैल्यू ('');
 };
वापस करना (




 {संदेश.नक्शा((संदेश, आई) => (
{संदेश</li>
 ))}
 </ul>


 टाइप ="मूलपाठ"
 मान = {इनपुटवैल्यू}
 onChange={(e) => setInputValue (e.target.value)}
 />
"जमा करना">भेजें</button>
 </form>
 </div>
 );
}
निर्यातगलती करना गपशप करने का कमरा;

इस उदाहरण में, आप एक परिभाषित करते हैं गपशप करने का कमरा घटक जो उपयोग करता है सॉकेट.आईओ-क्लाइंट पुस्तकालय एक WebSocket सर्वर से कनेक्ट करने के लिए। आप उपयोग कर सकते हैं useState संदेशों की सूची और सूचना सम्मान से निपटने के लिए हुक।

एक नया संदेश प्राप्त करने पर, useEffect संदेश सूची में एक संदेश घटना अद्यतन को ट्रिगर करने के लिए हुक एक श्रोता को पंजीकृत करता है। इवेंट मैसेज के लिए एक इनपुट वैल्यू को क्लियर करने और भेजने के लिए, मौजूद होता है हैंडल सबमिट करें समारोह।

इसके बाद, इनपुट फ़ील्ड और बटन के साथ-साथ अपडेट की गई संदेश सूची दोनों फॉर्म स्क्रीन पर दिखाई देंगे।

प्रत्येक फॉर्म सबमिशन के साथ, कॉल करना हैंडल सबमिट करें समारोह अपरिहार्य है। संदेश को सर्वर तक पहुंचाने के लिए, यह विधि सॉकेट का उपयोग करती है।

7. मोबाइल विकास के लिए रिएक्ट नेटिव के साथ एकीकरण

रिएक्ट लोकल रिएक्ट का उपयोग करके स्थानीय सार्वभौमिक अनुप्रयोगों के निर्माण के लिए एक प्रणाली है, जो आईओएस और एंड्रॉइड चरणों के लिए पोर्टेबल एप्लिकेशन को बढ़ावा देने के लिए जुड़ती है।

रिएक्ट के साथ रिएक्टिव नेटिव के एकीकरण का उपयोग करके, आप घटक-आधारित डिज़ाइन और रिएक्ट के पुन: प्रयोज्य कोड का उपयोग मोबाइल और वेब प्लेटफॉर्म पर कर सकते हैं। यह मोबाइल ऐप विकास चक्र और बाजार में लगने वाले समय को कम करता है। रिएक्ट नेटिव देशी मोबाइल ऐप विकसित करने के लिए एक लोकप्रिय ढांचा है जो रिएक्ट लाइब्रेरी का उपयोग करता है।

महत्वपूर्ण प्रोग्रामिंग और पुस्तकालयों का परिचय, जैसे नोड.जेएस, स्थानीय सीएलआई का जवाब दें, और एक्सकोड या एंड्रॉइड स्टूडियो, आईओएस और एंड्रॉइड के साथ अलग-अलग काम करने वाले डिजाइनरों के लिए मौलिक है। अंत में, साधारण रिएक्ट नेटिव घटक डेवलपर्स को आईओएस और एंड्रॉइड प्लेटफॉर्म के लिए मजबूत और सुविधा संपन्न मोबाइल एप्लिकेशन बनाने में सक्षम बनाते हैं।

अन्य तकनीकों के साथ रिएक्ट को मिलाएं

ऑनलाइन ऐप्स बनाने के लिए रिएक्ट एक लोकप्रिय और प्रभावी लाइब्रेरी है। उपयोगकर्ता इंटरफ़ेस बनाने के लिए रिएक्ट एक बढ़िया विकल्प है, लेकिन इसकी क्षमताओं को बढ़ाने के लिए इसका उपयोग अन्य तकनीकों के साथ भी किया जाता है।

इन तकनीकों के साथ रिएक्ट को एकीकृत करके, डेवलपर अधिक जटिल और उन्नत ऐप बना सकते हैं जो एक बेहतर उपयोगकर्ता अनुभव प्रदान करते हैं। रिएक्ट और इसके टूल्स और लाइब्रेरी का इकोसिस्टम एक बुनियादी वेबसाइट या एक जटिल वेब एप्लिकेशन बनाने के लिए आवश्यक सभी चीजों को कवर करता है।