रिएक्ट का उपयोग करने के लाभों में से एक यह है कि आप यूआई घटकों को बना सकते हैं, उन्हें अपने पूरे एप्लिकेशन में पुन: उपयोग कर सकते हैं और अंततः कोड मंथन से बच सकते हैं। फिर भी, अकेले रिएक्ट के साथ पूरी तरह से स्वतंत्र यूआई घटक बनाना मुश्किल है। इन घटकों को देखने के लिए आपको ऐसे दृश्य बनाने होंगे जो इन घटकों को प्रदर्शित करते हों।
यहीं पर स्टोरीबुक आती है। यह आपको एक स्वतंत्र रनटाइम वातावरण में यूआई घटकों को बनाने और परीक्षण करने की अनुमति देता है और इस ट्यूटोरियल में आप सीखेंगे कि इसे रिएक्ट में कैसे उपयोग किया जाए। इस पोस्ट के अंत तक, आपने एक बटन घटक बनाया होगा और इसके कुछ संभावित राज्यों को रिएक्ट में प्रलेखित किया होगा।
स्टोरीबुक क्या है?
कहानियों का संग्रह एक विकास उपकरण है जो आपको संपूर्ण प्रतिक्रिया वातावरण के बिना अपने UI घटकों को चलाने और परीक्षण करने देता है। यह बनाता है घटक संचालित विकास आसान है क्योंकि आप घटकों को अलगाव में विकसित कर सकते हैं।
स्टोरीबुक के साथ, एक बार जब आप एक घटक बना लेते हैं, तो आप कई कहानियाँ बना सकते हैं जो घटक की विभिन्न अवस्थाओं को परिभाषित करती हैं। एक बटन घटक के लिए, इन राज्यों में प्राथमिक राज्य, माध्यमिक राज्य, अक्षम राज्य, आदि शामिल हो सकते हैं।
चूंकि स्टोरीबुक आपको कहानियां बनाते समय कोड शामिल करने की अनुमति देता है, यह एक दस्तावेज़ीकरण उपकरण के रूप में भी काम कर सकता है।
स्टोरीबुक का उपयोग करने के लिए, आपको अपनी मशीन पर नोड स्थापित करना होगा और रिएक्ट की बुनियादी समझ होनी चाहिए।
एक प्रतिक्रिया आवेदन बनाना
स्टोरीबुक का उपयोग शुरू करने के लिए, आप सबसे पहले एक रिएक्ट प्रोजेक्ट बनाएंगे और फिर घटक और उनकी कहानियां बनाएं।
रिएक्ट एप्लिकेशन बनाने के लिए निम्न कमांड चलाएँ:
एनपीएक्स सृजन करना-रिएक्ट-ऐप बीटीएन-स्टोरीबुक
यह बीटीएन-स्टोरीबुक नामक एक फ़ोल्डर उत्पन्न करेगा जिसमें सभी निर्भरताओं के साथ एक रिएक्ट एप्लिकेशन की आवश्यकता होगी।
इसके बाद, बस कुछ और चरणों के साथ, आप Storybook को स्थापित और चला सकते हैं।
स्टोरीबुक स्थापित करना
बीटीएन-स्टोरीबुक फ़ोल्डर में नेविगेट करें और स्टोरीबुक स्थापित करें:
सीडी बीटीएन-स्टोरीबुक
एनपीएक्स स्टोरीबुक init
चूंकि आपने क्रिएट-रिएक्शन-ऐप का उपयोग किया है, इसलिए स्टोरीबुक सेट करने के लिए आपको यही एकमात्र कमांड चलाने की आवश्यकता है। Storybook सभी आवश्यक निर्भरताएँ स्थापित करेगी और सभी आवश्यक कॉन्फ़िगरेशन निष्पादित करेगी। यह आपको आरंभ करने के लिए कुछ बॉयलरप्लेट कहानियां भी बनाएगा।
एक बार उपरोक्त कमांड चलने के बाद, निम्नलिखित कोड का उपयोग करके स्टोरीबुक शुरू करें।
एनपीएम रन स्टोरीबुक
इससे आपके ब्राउज़र में स्टोरीबुक डैशबोर्ड खुल जाएगा। यह कुछ इस तरह दिखना चाहिए:
बटन घटक बनाना
./src फोल्डर में कंपोनेंट्स नाम का फोल्डर बनाएं और उसमें बटन नाम का फोल्डर बनाएं। बटन फ़ोल्डर इस पथ में होना चाहिए: ./src/Components/Button.
अब, इस फ़ोल्डर में, बटन बनाएं और निम्न कोड जोड़ें:
आयात प्रॉपटाइप्स से "प्रोप-प्रकार"
फ़ंक्शन बटन ({लेबल, पृष्ठभूमि रंग = "#6B4EFF", रंग = "सफेद", सीमात्रिज्या ="48px", सीमा ="कोई भी नहीं"}) {
स्थिरांक शैली = {
पीछे का रंग,
गद्दी: "0.5rem 1rem",
रंग,
सीमा त्रिज्या,
सीमा
}
वापसी (
<बटन शैली = {शैली}>
{लेबल}
</button>
)
}
Button.propTypes = {
लेबल: प्रॉपटाइप्स।डोरी,
पीछे का रंग: प्रॉपटाइप्स।डोरी,
रंग: प्रॉपटाइप्स।डोरी,
सीमा:PropTypes.string,
सीमात्रिज्या: प्रॉपटाइप्स।डोरी,
}
निर्यात करनाचूक बटन;
यह घटक कुछ स्वीकार करता है प्रतिक्रिया सहारा जिसमें बटन लेबल और उसकी शैलियाँ शामिल हैं। यदि आप गलत प्रकार का उपयोग करते हैं तो आप पास किए गए प्रोप के प्रकारों की जांच करने और चेतावनी देने के लिए प्रोपटाइप का भी उपयोग कर रहे हैं। घटक एक बटन तत्व देता है।
बटन कहानियां बनाना
जब आप रिएक्ट प्रोजेक्ट में स्टोरीबुक स्थापित करते हैं, तो यह कुछ कहानी उदाहरणों वाला एक फ़ोल्डर उत्पन्न करता है, जिसका नाम है कहानियों. उस फ़ोल्डर में नेविगेट करें और उसमें सब कुछ हटा दें। आप शुरू से कहानियाँ बना रहे होंगे।
आप प्राथमिक बटन और द्वितीयक बटन का प्रतिनिधित्व करने वाली दो कहानियां बना रहे होंगे। इनमें से प्रत्येक बटन की एक अलग शैली है जो इसे बाकियों से अलग करती है। स्टोरीज बनाने के बाद आप उनमें से प्रत्येक को स्टोरीबुक डैशबोर्ड में देख पाएंगे।
स्टोरीज फोल्डर में, बटन.स्टोरीज.जेएस नामक एक नई फाइल बनाएं। शामिल करना महत्वपूर्ण है ।कहानियों पहले .js जैसा कि Storybook बताता है जो एक कहानी फ़ाइल है।
बटन घटक आयात करें।
आयात बटन से "../घटक/बटन/बटन"
अगला घटक और घटक का शीर्षक ही निर्यात करें। ध्यान दें कि शीर्षक वैकल्पिक है।
निर्यात करनाचूक {
शीर्षक: "अवयव/बटन",
घटक: बटन,
}
पहली कहानी जो आप बनाएंगे वह प्राथमिक बटन के लिए है। तो, प्राथमिक नामक एक नया फ़ंक्शन बनाएं और इसे निर्यात करें।
निर्यात स्थिरांक प्राथमिक = () =><बटन पृष्ठभूमि रंग ="#6B4EFF" लेबल ="मुख्य"/>
अब अगर आप Storybook के डैशबोर्ड पर जाएंगे तो आपको रेंडर्ड बटन दिखाई देगा।
रेंडर किए गए घटक को लाइव संपादित करने और स्टोरीबुक डैशबोर्ड पर इसकी स्थिति बदलने के लिए आप args का उपयोग करेंगे। Args आपको Storybook पर तर्क पारित करने की अनुमति देता है, जो बदले जाने पर घटक को फिर से प्रस्तुत करने का कारण बनता है।
बटन स्टोरी के आर्ग्स को परिभाषित करने के लिए, एक फंक्शन टेम्प्लेट बनाएं।
कास्ट टेम्पलेट = args =><बटन {...args}/>
यह टेम्प्लेट आर्ग्स को स्वीकार करता है और उन्हें बटन घटक के लिए प्रॉप्स के रूप में पास करता है।
अब आप नीचे दिखाए गए टेम्पलेट का उपयोग करके प्राथमिक कहानी को फिर से लिख सकते हैं।
निर्यात करनास्थिरांक प्राथमिक = Template.bind({})
प्राथमिक.आर्ग्स = {
पीछे का रंग: "#6B4EFF",
लेबल: "मुख्य",
}
यदि आप स्टोरीबुक डैशबोर्ड की जांच करते हैं, तो आपको नीचे नियंत्रण देखना चाहिए। ये नियंत्रण आपको यह बदलने की अनुमति देते हैं कि बटन कैसे प्रदर्शित होता है। आप बैकग्राउंड का रंग, टेक्स्ट का रंग, लेबल, बॉर्डर और बॉर्डर-त्रिज्या बदल सकते हैं।
अन्य कहानियों को बनाने के लिए आपको केवल args मानों को बदलने की आवश्यकता है। उदाहरण के लिए द्वितीयक बटन बनाने के लिए, निम्न कोड का उपयोग करें।
निर्यात करनास्थिरांक माध्यमिक = Template.bind({})
माध्यमिक.आर्ग्स = {
पीछे का रंग: "#E7E7FF",
रंग: "#6B4EFF",
लेबल: "माध्यमिक",
}
स्टोरीबुक डैशबोर्ड पर साइडबार में विभिन्न कहानियों पर क्लिक करके उन पर नेविगेट करें। आप देखेंगे कि प्रत्येक कैसे प्रस्तुत करता है। आप अपनी इच्छानुसार बटन कहानियों में और स्थितियाँ जोड़ना जारी रख सकते हैं। एक रूपरेखा या एक रूपरेखा कहानी जोड़ने का प्रयास करें।
यूआई घटकों का परीक्षण
इस ट्यूटोरियल ने आपको रिएक्ट यूआई घटकों के साथ स्टोरीबुक का उपयोग करने के लिए एक संक्षिप्त परिचय दिया। आपने सीखा कि स्टोरीबुक को रिएक्ट प्रोजेक्ट में कैसे जोड़ा जाता है और आर्ग्स के साथ बटन घटक के लिए एक बुनियादी कहानी कैसे बनाई जाती है।
आपने देखा होगा कि इस प्रक्रिया के दौरान, आप परीक्षण कर रहे थे कि विभिन्न राज्यों में बटन घटक कैसे प्रस्तुत किया जाता है। हो सकता है कि आप अधिक कोड लिख रहे हों, लेकिन एक बार जब आप घटक कहानियां लिख लेते हैं, तो आप अपने एप्लिकेशन में घटकों का पुन: उपयोग करते समय उत्पन्न होने वाली किसी भी त्रुटि को कम कर देंगे। इसके अलावा, यदि ऐसा होता है तो त्रुटि को ट्रैक करना आसान होगा। यही घटक-संचालित विकास की सुंदरता है।