मुफ्त ट्यूटोरियल - वेबपैकर और रेल 5.1 के साथ रिएक्ट का उपयोग कैसे करें

यह रेल कोर्स पर मुफ्त पूर्ण प्रतिक्रिया से एक नया सबक है। पूर्ण पाठ्यक्रम देखें और जानें कि कुछ घंटों में रीलों के साथ रिएक्ट का उपयोग कैसे करें।

वेब 5.1 के लिए देशी समर्थन के साथ रेल 5.1 को भेजा गया और इसलिए, वेबपैकर मणि के माध्यम से रिएक्ट, कोणीय, Vue.js और अन्य पुस्तकालय।

इस पाठ में, हम देखेंगे कि रिएक्ट्स-रेल्स या रिएक्शन_ऑन_रिल्स जैसे रत्नों का उपयोग किए बिना रील्स ऐप में रिएक्ट का उपयोग कैसे करें।

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

निःशुल्क कैलेंडर पाठ्यक्रम पर मुफ्त प्रतिक्रिया से कैलेंडर नियुक्तियों एप्लिकेशन

प्रतिक्रिया-रेल के साथ प्रारंभिक बिंदु कोड यहाँ है और वेबपैक के साथ अंतिम कोड यहाँ है:

सबसे पहले, हमें Node.js और यार्न स्थापित करने की आवश्यकता है।

आप आधिकारिक वेबसाइट से अपने मंच के लिए बाइनरी डाउनलोड करके नोड को स्थापित कर सकते हैं।

यार्न स्थापित करने के लिए, आधिकारिक दस्तावेज देखें। मैक्स ओएस एक्स पर आप इसे काढ़ा के साथ स्थापित कर सकते हैं:

काढ़ा यार्न स्थापित करें

अब वेबपैक का उपयोग करने के लिए हमारे कैलेंडर अपॉइंटमेंट एप्लिकेशन को बदल दें।

चूंकि हमारा ऐप रेल्स 5.0 का उपयोग कर रहा है, इसलिए हमें वेबपैकर मणि को स्थापित करने की आवश्यकता होगी (जो रीलों संस्करणों को वापस 4.2 का समर्थन करता है)।

(यदि आप सीखना चाहते हैं कि बॉक्स से बाहर रिएक्ट सपोर्ट के साथ बिल्कुल नया रेल 5.1 ऐप कैसे बनाया जाए, तो नीचे दिए गए अनुभाग को देखें)।

पहले, आइए रत्‍न-रत्‍न मणि को मणिभ से निकालें और बंडल को चलाएँ।

इसके अलावा, इस लाइन को config / application.rb से निकालें:

config.react.addons = सच

अब, पहले वेबपैकर मणि स्थापित करके हमारे मौजूदा रेल एप्लिकेशन को रिएक्ट सपोर्ट जोड़ें। जेम्फाइल के लिए निम्नलिखित पंक्ति जोड़ें:

मणि 'वेबपैकर'

फिर भागो:

बंडल स्थापित करें

फिर वेबपैक इंस्टॉल स्क्रिप्ट चलाएं:

$ ./bin/rails वेबपैकर: स्थापित करें

और फिर रिएक्ट इंस्टॉल स्क्रिप्ट चलाएँ:

$ ./bin/rails वेबपैकर: स्थापित करें: प्रतिक्रिया

इंस्टॉलर यार्न का उपयोग करके सभी प्रासंगिक निर्भरताओं को जोड़ देगा, कॉन्फ़िगरेशन फ़ाइलों में कुछ बदलाव करेगा और एक नया ऐप / जावास्क्रिप्ट / पैक्स निर्देशिका बनाएगा जहां से वेबपैक किसी भी जावास्क्रिप्ट या सीएसएस को संकलित करेगा, जिसमें रिएक्ट घटक भी शामिल हैं।

इंस्टॉलर ऐप / जावास्क्रिप्ट / पैक में hello_react.jsx नामक एक रिएक्ट घटक फ़ाइल भी बनाता है।

हम इस निर्देशिका से प्रतिक्रिया घटकों को जावास्क्रिप्ट_पैक_टैग हेल्पर विधि का उपयोग करके देख सकते हैं। उदाहरण के लिए:

<% = javascript_pack_tag lo hello_react '%>

अब हमारे Calreact ऐप घटकों को ऐप / परिसंपत्तियों / जावास्क्रिप्ट / घटकों निर्देशिका से नए ऐप / जावास्क्रिप्ट / पैक्स निर्देशिका में ले जाएं।

इसके अलावा utils.js को उसी डायरेक्टरी में ले जाएँ।

जब तक हम उन्हें सही ढंग से आयात करते हैं, तब तक हम इस निर्देशिका के तहत फ़ाइलों को किसी भी तरह से संरचना कर सकते हैं। लेकिन इस पाठ के लिए, उन्हें सीधे पैक निर्देशिका में रखें।

हमें फ़ाइलों का नाम बदलने की आवश्यकता है - .es6 एक्सटेंशन को हटा दें और उन्हें बस एक .jsx एक्सटेंशन के साथ नाम दें।

Application.js से प्रतिक्रिया फ़ाइलें, पल, प्रतिक्रिया-डेटाइम और घटक निकालें:

// = प्रतिक्रिया की आवश्यकता है
// = प्रतिक्रिया की आवश्यकता है
// = क्षण की आवश्यकता है
// = प्रतिक्रिया-डेटाइम.मिन की आवश्यकता है
// = घटकों की आवश्यकता है

परिसंपत्तियों के डायरेक्टरीज़ से फाइल कंपोनेंट्स.जेएस, मोमेंट.जेएस और रिएक्ट-डेटाइम.मिन.जेएस भी डिलीट करें। हमें किसी भी अधिक घटक निर्देशिका की आवश्यकता नहीं है।

यार्न का उपयोग करके पल और प्रतिक्रिया-डेटाइम स्थापित करें:

$ यार्न पल जोड़ें
$ यार्न प्रतिक्रिया-डेटाइम जोड़ते हैं

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

तो चलिए घटकों में आयात विवरण जोड़ते हैं।

नोट: घुंघराले ब्रेसिज़ में आयात को आयात नाम दिया गया है, जहां आयातित मॉड्यूल को नामित कास्ट के रूप में निर्यात किया गया है। घुंघराले ब्रेसिज़ के बिना आयात उन मॉड्यूलों के लिए हैं जो डिफ़ॉल्ट निर्यात हैं।

नियुक्तियों में .jsx:

'प्रतिक्रिया' से आयात प्रतिक्रिया
'रिएक्ट-डोम' से आयात ReactDOM
import ./appointment_form 'से नियुक्ति नियुक्ति करें
आयात {AppointmentsList} ‘./appointments_list 'से

नियुक्ति_फॉर्म में। Jsx:

'प्रतिक्रिया' से आयात प्रतिक्रिया
'रिएक्ट-डेटाइम' से आयात करें

नियुक्तियों_सूची में .jsx:

'प्रतिक्रिया' से आयात प्रतिक्रिया
आयात {नियुक्ति} ’। / नियुक्ति से’

नियुक्ति में ।jsx:

'प्रतिक्रिया' से आयात प्रतिक्रिया
पल ’से आयात पल
'./utils' से {formatDate} आयात करें

Utils.js में

पल ’से आयात पल

और हमें घटकों और कार्यों को निर्यात करने की भी आवश्यकता है:

Utils.js में:

निर्यात कॉन्स्टेबल प्रारूप = फ़ंक्शन (डी) {

नोट: आप इसे परिभाषित करने के बाद डिफॉल्ट के रूप में कॉस्ट को भी निर्यात कर सकते हैं और फिर इसे जहां भी जरूरत हो, बिना कर्ली ब्रेसेस के आयात करें:

डिफ़ॉल्ट स्वरूप निर्यात करें

नियुक्तियों में .jsx:

निर्यात डिफ़ॉल्ट वर्ग नियुक्तियाँ React.Component {का विस्तार करती है

नियुक्ति_फॉर्म में। Jsx:

निर्यात डिफ़ॉल्ट वर्ग नियुक्ति नियुक्ति React.Component {

नियुक्तियों_सूची में .jsx:

निर्यात कांस्टेबल अपॉइंटमेंट्सलिस्ट = ({नियुक्तियां}) =>

नियुक्ति में ।jsx:

निर्यात कांस्टेबल नियुक्ति = ({नियुक्ति}) =>

अभिकर्मक जोड़ अब हटा दिए गए हैं, इसलिए हमें अपरिवर्तनीय अपडेट के लिए अपरिवर्तनीयता-सहायक स्थापित करने की आवश्यकता है:

$ यार्न अपरिवर्तनीयता-सहायक जोड़ते हैं

फिर इसे आयात करें जहां हमें नियुक्तियों में इसकी आवश्यकता है ।jx:

'अपरिवर्तनीयता-सहायक' से आयात अद्यतन

और React.addons.update को बस अपॉइंटमेंट्स में अपडेट करने के लिए बदलें ।jsx:

addNewAppointment (नियुक्ति) {
    const अपॉइंटमेंट्स = अपडेट (यह .स्टेट। अपॉइंटमेंट्स, {$ पुश: [अपॉइंटमेंट]});

नियुक्तियों में .jsx, के साथ react_component सहायक विधि को प्रतिस्थापित करें:

# एपॉइंटमेंट्स_डेटा {डेटा: @ अपॉइंटमेंट्स.टो_जसन}
= javascript_pack_tag av नियुक्तियाँ '

यह अपॉइंटमेंट्स डेटा को पेज पर आईडी अपॉइंटमेंट्स_डाटा के साथ एक डिव के डेटा फीचर में डाल देगा। लेकिन हमें अभी भी इसे अपने रिएक्ट कंपोनेंट में पास करना होगा।

ऐसा करने के लिए, हमें अपने अपॉइंटमेंट घटक में निम्नलिखित कोड जोड़ना होगा:

नियुक्तियों में .jsx:

document.addEventListener (ont DOMContentLoaded ’, () => {
 const नोड = document.getElementById (_ नियुक्तियां_डेटा)
 const data = JSON.parse (node.getAttribute () data '))
ReactDOM.render (
 <अपॉइंटमेंट्स अपॉइंटमेंट्स = {डेटा} />,
 document.body.appendChild (document.createElement ( 'div')),
 )
})

प्रतिक्रिया-रेल (और react_on_rails) द्वारा प्रदान किया जाने वाला react_component सहायक विधि पर्दे के पीछे हमारे लिए करता है। यदि आप इसका उपयोग करना चाहते हैं, तो आप वेबपैकर-प्रतिक्रिया रत्न का उपयोग करके ऐसा कर सकते हैं।

अब हम वेबपैक का उपयोग कर रहे हैं, हम परिसंपत्ति पाइपलाइन पर निर्भर होने के बजाय अपने रिएक्ट घटकों के लिए सीएसएस आयात का भी उपयोग कर सकते हैं।

विक्रेता के संपत्ति फ़ोल्डर से रिएक्ट-डेटाइम सीएसएस फ़ाइल को हटा दें और इसके बजाय इसे ऐप के रूट में नोड_मॉडल निर्देशिका में पहले से स्थापित एनपीएम पैकेज से आयात करें।

नियुक्ति_फॉर्म में। Jsx:

आयात ‘प्रतिक्रिया-डेटाटाइम / css / प्रतिक्रिया-डेटाटाइम’

हमें CSS आयात कार्य करने के लिए स्टाइलशीट_पैक_टैग हेल्पर विधि का उपयोग करने की भी आवश्यकता है। इस लाइन को नियुक्तियों / index.html.haml में जोड़ें:

= स्टाइलशीट_पैक_टाग ‘अपॉइंटमेंट्स’

अंत में, हमें वे सभी परिवर्तन करने होंगे जिनकी हमें आवश्यकता है और अब ऐप चला सकते हैं।

रेल सर्वर चलाएं:

$ रेल s

हमें अपने रिएक्ट घटकों की सेवा के लिए वेबपैक देव सर्वर चलाने की भी आवश्यकता है:

$ ./bin/webpack-dev-server

अब हमारा अपडेटेड कैलेंडर अप्वाइंटमेंट ऐप पोर्ट 3000 पर चलेगा और वेबपैक 8080 से हमारे रिएक्ट घटकों को काम करेगा।

यदि आपको j obj not define ’कहने में कोई त्रुटि मिलती है, तो इस लाइन को handle_hange तरीके से नियुक्ति_फॉर्म में बदल दें ।jpg:

obj = {};

सेवा मेरे:

const obj = {};

एक नई रेल 5.1 ऐप के साथ रिएक्ट का उपयोग करना

रेल के पुराने संस्करण को चलाने वाले ऐप को अपग्रेड करने के बजाय, आप बॉक्स से बाहर वेबपैक रिएक्ट समर्थन के साथ एक नई रेल 5.1 ऐप भी शुरू कर सकते हैं। पहले सुनिश्चित करें कि आपके पास रेल रत्न संस्करण 5.1 स्थापित है।

रत्न स्थापित रेल -v 5.1

फिर हम इस तरह रिएक्ट सपोर्ट के साथ एक नया रेल 5.1 ऐप बना सकते हैं:

$ नई रेलरेक्ट --webpack = प्रतिक्रिया रेल

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

यह द फ्री कंप्लीट रिएक्ट ऑन रेल्स कोर्स का एक सबक है, जहां मैं आपको सिखाऊंगा कि कैसे कुछ मजेदार चीजें बनाते हुए, रिएक्ट विथ रेल्स का उपयोग किया जाए।