🏴󠁧󠁢󠁷󠁬󠁳󠁿 🤤 👨🏾‍🍳 कोड की 135 लाइनों के साथ चाइल्ड रिएक्टजेएस 🗒️ 👩🏿‍💻 👩🏾‍✈️

ReactJS के बारे में पहले से ही बहुत सारे लेख हैं। लेकिन नौसिखिए प्रोग्रामर का अध्ययन शुरू करने के लिए, आपको बहुत शुरुआत खोजने की आवश्यकता है जहां इसके निर्माण की नींव हैं। मैं यह दिखाना चाहता था कि इस ढांचे पर सीमावर्ती विकास के सिद्धांतों को समझने में कुछ भी जटिल नहीं है।

अध्ययन की एक विधि ने मुझे कई जटिल सॉफ्टवेयर सिस्टम की संरचना को समझने की अनुमति दी और यह इस तथ्य पर उबलता है कि आप जिस परियोजना का अध्ययन कर रहे हैं उसे फिर से लिखने की आवश्यकता है ताकि आपको किसी प्रकार का अज्ञात जानवर मिल जाए जो कम से कम थोड़ा चलता है और कुछ हद तक इसके प्रोटोटाइप के समान है।

मुझे यह स्वीकार करना होगा कि मैं बैक-एंड हूं और मुझे यह भी नहीं पता है कि मुझे जावास्क्रिप्ट में माइक्रोफ्रामवर्क लिखने के लिए किसने प्रेरित किया। लेकिन स्पष्ट रूप से, यह जेएस सीखने की इच्छा है।

वास्तव में, मॉड्यूल / घटकों के रूप में परियोजनाएं बनाने के लिए एक अच्छी प्रेरणा है। बैकएंड प्रोग्रामर्स के दृष्टिकोण में, JSON ऑब्जेक्ट्स की तरह सबसे अच्छा डेटा, उन्हें वांछित संरचना में बनाया जाना चाहिए और जहां आवश्यक हो, वहां भेजा जाना चाहिए और फिर जो कुछ भी आप उनके साथ चाहते हैं वह करें। सबसे अंत में, सबसे आदिम संस्करण में, आपको आईडी द्वारा आवश्यक एचटीएमएल तत्वों का चयन करना होगा और उनकी विशेषताओं को अपडेट करना होगा, साथ ही टेक्स्ट नोड्स को बदलना होगा। जावास्क्रिप्ट चौखटे के लिए जीवन आसान बनाओ।

एक बार जब मैंने अपना PHP-Slim-Framework लिखा, जो मूल से बहुत दूर है, लेकिन यह वास्तव में PHP परियोजनाओं में मेरी मदद करता है। आज मैं इस बारे में बात करना चाहता हूं कि मैंने रिएक्टजस विकास की उत्पत्ति कैसे प्रस्तुत की। मैंने कोड की 135 पंक्तियों में एक फ़ाइल लिखी है, इसे bots.js कहा है और यदि आप इसे कनेक्ट करते हैं और रिएक्ट में एक घटक लिखते हैं, तो आप ब्राउज़र में भी कुछ देख सकते हैं। मैंने उसे ReactKids कहा।

यह विचार है कि परियोजना को घटकों में विभाजित किया जाए, जावास्क्रिप्ट का उपयोग करके घटकों को जोड़ा जाए, और यह सुनिश्चित किया जाए कि घटकों के बीच कोई निर्भरता न हो।

HTML मानक संरचना:

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>HelloReactKids</title> <link href="style.css" rel="stylesheet"> </head> <body> <div id="root"></div> <script src="js/bots.js"></script> <script src="js/pict.js"></script> <script src="js/navbar.js"></script> <script src="js/label.js"></script> <script src="js/button.js"></script> <script src="js/app.js"></script> </body> </html>

आवेदन के लिए, आईडी = रूट निर्दिष्ट करें और bots.js कनेक्ट करें, फिर घटकों को कनेक्ट करें (या उन्हें स्वयं लिखें) और इसे ऐप .js. में चलाएं।

ReactKids में घटक इस तरह दिखता है:

 function Button(attr) { // attribute components default values if(!attr.labelButton) attr.labelButton = "Click Me" return elem( "button", { padding: "0.65rem", marginTop: "0.4rem", color: "gray", border: "1px solid gray", borderRadius: "0.5rem", background: "#fff", fontSize: "large", cursor: "pointer", }, { id: "btn1", click: btn1Click, }, attr.labelButton ) } function btn1Click(e) { console.log("Clicked!") setAttr(Label({labelContent: "iii!!!"}), 0.6) }

हमारे मामले में घटक केवल एक फ़ंक्शन हो सकता है जिसमें params को attr कहा जाता है।
यहां आपको ध्यान देना चाहिए कि यह एटर उपयोगी क्यों हो सकता है। खैर, सबसे पहले, जो लोग प्रतिक्रिया से परिचित हैं, वे जानते हैं कि उनकी बेटी के घटकों को डेटा "कम" करना संभव है। यही है, एक घटक एक घटक को लौटाता है जो एक घटक को वापस करता है, और इसी तरह एक घटक जब तक कि कोई बच्चा न हो। हालाँकि, इनका उपयोग सर्वर से आने वाले डेटा के लिए पैकेज के रूप में भी किया जाता है। बैकएंड के अनुरोध फ़ंक्शन से भेजे गए अधिकांश भाग के लिए हैं जो उपयोगकर्ता इंटरफ़ेस के साथ बातचीत से संबंधित घटनाओं को संभालते हैं।

जब सर्वर वापस JSON (आमतौर पर पाठ में) भेजता है, तो इसे JS ऑब्जेक्ट में बदलना होगा और कहीं किया जाना चाहिए। हमारे बच्चे के क्रियान्वयन में यही कारण है कि रिएक्ट और एटर में पैरामेट्स हैं।
Attr में, आप सर्वर से प्राप्त संपूर्ण JSON ऑब्जेक्ट को रटना कर सकते हैं, या आप केवल ~~सबसे अच्छा~~ डेटा प्राप्त कर सकते हैं जो आपको आवश्यक है, और संभवतः, अन्य आवश्यक डेटा के साथ पूरक है।

अगला, हम वयस्क प्रतिक्रिया के तर्क का पालन करते हैं - फ़ंक्शन की शुरुआत में, हम एटर ऑब्जेक्ट को संसाधित करते हैं और अन्य व्यावसायिक मामलों का प्रदर्शन करते हैं। फिर आपको एलएम () फ़ंक्शन को कॉल करने का परिणाम वापस करने की आवश्यकता है, जिसका कार्यान्वयन bots.js. में है। निम्नलिखित मापदंडों को कॉल पैरामीटर में स्थानांतरित किया जाता है:

टैग का नाम।
शैलियों के साथ वस्तु (जेएस प्रारूप में)
टैग के लिए विशेषताएँ।
पाठ, एक अन्य टैग या घटक (बच्चा) या कुछ भी पारित नहीं हुआ है।

App.js पर एक नज़र डालें:

 var attr = { labelContent: "Hello React Kids", labelButton: "This button", } rend(document.getElementById("root"), App(attr)) function App(attr) { return elem( "div", { fontFamily: "segoe ui", color: "gray", textAlign: "center", }, { id: "app", }, [ Navbar(attr), Pict(attr), Label(attr), Button(attr), ] ) }

यहां कुछ भी असामान्य नहीं है। यहाँ एक ही अधिक जटिल है:

 function App(attr) { var cpic1 = CirclePict({id: "img1", src: "./img/img1.jpg", height: "200px"}) var cpic2 = CirclePict({id: "img1", src: "./img/img2.jpg", height: "200px"}) var cpic3 = CirclePict({id: "img1", src: "./img/img3.jpg", height: "200px"}) var txt1 = "   .          ."; var txt2 = "   ,          ."; return elem( "div", { fontFamily: "segoe ui", color: "gray", }, { id: "app", }, [ Pict({id: "logo", src: "./img/logo.png", height: "90%"}), Text({id: "info", text: "you number", direction: "right"}), Label(attr), Outer({id: "outer1", content: [cpic1, cpic2, cpic3]}), Text({id: "txt1", text: txt1, width: "450px"}), Button(attr), Label({id: "lbl2", labelContent: "   "}), Text({id: "txt2", text: txt2, width: "650px", direction: "center"}), RoundPict({id: "well", src: "./img/well.jpg", height: "280px", width: "550"}) ] ) }

जैसा कि आप देख सकते हैं, हमने बाहरी 3 घटक में CirclePict घटक को एम्बेड किया है।

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

अब आपको यह देखने की जरूरत है कि यह अब bots.js. में कैसे लागू किया जाता है। फ्रेमवर्क में पूरे 3 कार्य होते हैं, वास्तव में एलएम () और सेटअट्र्र (), पहला जो बनाने के लिए, दूसरा घटक की स्थिति को अपडेट करने के लिए और रेंडर () को app.js. में प्रदर्शित करने के लिए।

 function elem(elt, style, attr, item) { /*element */ if(elt) { //  ,      var el = document.createElement(elt); } else { console.log("elt fail") return } /* style */ if(style) { if(typeof(style) == "object") { for(var itm in style) { el.style[itm] = style[itm] } } else { console.log("style is not object type") } } else { console.log("style fail") } /* attr */ if(attr) { if(typeof(attr) == "object") { for(var itm in attr) { if(typeof(attr[itm]) == "function") { el.addEventListener(itm, attr[itm]) } else { // standart el[itm] = attr[itm] } } } else { console.log("attr is not object type") } } else { console.log("attr fail (add ID for element)") } /* item */ if(item) { if(typeof(item) == "string") { var text = document.createTextNode(item) el.appendChild(text) } else if(typeof(item) == "object") { if(Array.isArray(item)) { if(item.length < 1) { console.log("not items in array") return } item.map(function(itm) { el.appendChild(itm) }) } else { el.appendChild(item) } } else { console.log("text is not string or object type") } } else { console.log("text fail") } return el }

फ़ंक्शन उसी क्रम में इसे दिए गए मापदंडों को संसाधित करता है:

दस्तावेज़ ट्री में एक घटक बनाएँ।
इसमें शैलियाँ जोड़ रहे हैं।
जिम्मेदार बताते हैं।
पाठ या अन्य तत्व के रूप में एक बाल तत्व जोड़ना।

विशेषताओं को संसाधित करते समय, हम उनके प्रकार की भी जांच करते हैं, यदि कोई फ़ंक्शन मान के रूप में प्राप्त होता है, तो यह माना जाता है कि यह एक घटना है और हम इस पर एक वायरटैप लटकाते हैं। इसलिए, यह केवल एक घटना के रूप में संकेतित फ़ंक्शन को घोषित करने और लागू करने के लिए रहता है।

यह इस ईवेंट हैंडलिंग फ़ंक्शन में है जिसे हम सेटआर्ट कहते हैं (), ऑब्जेक्ट को स्वयं अपडेट किए गए एटर के साथ पास कर रहे हैं। वहाँ एक बात है लेकिन - प्रत्येक तत्व के लिए attr में बनाया जाना चाहिए, आपको id निर्दिष्ट करनी होगी, अन्यथा, इसे setArr के माध्यम से अपडेट नहीं किया जाएगा। वह आईडी से उसे डोम में पाता है।

सेटआर्ट () के लिए, सब कुछ रिएक्ट से भी बदतर है, हालांकि सिद्धांतों को समझने के लिए यह पर्याप्त है (अच्छी तरह से, या लगभग पर्याप्त)।

 function setAttr(update, slow) { if(slow) { var replace = document.getElementById(update.id) var opamax = 0.99 var opaint = 0.01 var outslow = setInterval(function() { opamax = opamax - opaint if(opamax <= 0) { clearInterval(outslow) update.style.opacity = opamax replace.parentNode.replaceChild(update, replace) var inslow = setInterval(function() { opamax = opamax + opaint update.style.opacity = opamax if(opamax >= 1) { clearInterval(inslow) } }, slow) } replace.style.opacity = opamax }, slow) } else { var replace = document.getElementById(update.id) replace.parentNode.replaceChild(update, replace) } }

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

हमारे बच्चों के ढांचे में सबसे ठंडी चीज है रेंडरिंग फंक्शन:

 function rend(root, elem) { root.appendChild(elem) }

मैंने देखा कि नौसिखिए प्रोग्रामर के लिए रिएक्ट जैसी चीजों को मनोवैज्ञानिक रूप से सीखना शुरू करना मुश्किल है। पुस्तकालयों के सैकड़ों मेगाबाइट और कोड की लाखों लाइनों को देखने के बाद, आपको उदास होना होगा और कुछ और देखना होगा। विशेष रूप से, वे Vue पर स्विच कर रहे हैं। बेशक, यह भी एक अच्छा ढांचा है, लेकिन विकास को आगे बढ़ाने के लिए दोनों दृष्टिकोणों को समझना और भी बेहतर है।

यह पता चला है कि जटिल सॉफ्टवेयर वातावरण छोटे लेकिन प्रभावी समाधानों से उत्पन्न होते हैं। इसलिए, मैं उन सभी को शुभकामनाएं देता हूं जो रिएक्ट का ज्ञान चाहते हैं। हमारे साथ बल आ सकता है!

कोड की 135 लाइनों के साथ चाइल्ड रिएक्टजेएस

More articles: