रिएक्ट ट्यूटोरियल पार्ट 6: कोर्स, जेएसएक्स और जावास्क्रिप्ट की कुछ विशेषताएं

आज हम रिएक्ट प्रशिक्षण पाठ्यक्रम की निरंतरता प्रकाशित कर रहे हैं। यहां हम पाठ्यक्रम की कुछ विशेषताओं के बारे में बात करेंगे, विशेष रूप से, कोड की शैली के बारे में। यहां हम JSX और जावास्क्रिप्ट के बीच संबंधों के बारे में अधिक विस्तार से बात करते हैं।



→ भाग 1: पाठ्यक्रम अवलोकन, प्रतिक्रिया की प्रतिक्रिया के कारण, ReactDOM और JSX
→ भाग 2: कार्यात्मक घटक
→ भाग 3: घटक फाइलें, परियोजना संरचना
→ भाग 4: माता-पिता और बच्चे के घटक
→ भाग 5: एक TODO आवेदन, स्टाइलिंग की मूल बातें पर काम शुरू
→ भाग 6: पाठ्यक्रम की कुछ विशेषताओं के बारे में, जेएसएक्स और जावास्क्रिप्ट
→ भाग 7: इनलाइन शैली
→ भाग 8: TODO आवेदन पर काम जारी रखा, घटकों के गुणों से परिचित
→ भाग 9: घटक गुण
→ भाग 10: घटक गुणों और स्टाइल के साथ काम करने पर कार्यशाला
→ भाग 11: डायनेमिक मार्कअप जेनरेशन और मैप एरे विधि
→ भाग 12: कार्यशाला, एक TODO आवेदन पर काम का तीसरा चरण
→ भाग 13: वर्ग-आधारित घटक
→ भाग 14: वर्ग-आधारित घटकों, घटक स्थिति पर कार्यशाला
→ भाग 15: घटक स्वास्थ्य कार्यशालाएँ
→ भाग 16: TODO अनुप्रयोग, ईवेंट हैंडलिंग पर काम का चौथा चरण
→ भाग 17: TODO अनुप्रयोग पर काम का पांचवा चरण, घटकों की स्थिति को संशोधित करता है
→ भाग 18: TODO आवेदन पर काम का छठा चरण
→ भाग 19: घटक जीवन चक्र विधियाँ
भाग 20: सशर्त प्रतिपादन में पहला पाठ
→ भाग 21: सशर्त प्रतिपादन पर दूसरा पाठ और कार्यशाला
→ भाग 22: TODO आवेदन पर काम का सातवां चरण, बाहरी स्रोतों से डेटा डाउनलोड करना
→ भाग 23: रूपों के साथ काम करने पर पहला पाठ
→ भाग 24: दूसरा रूप पाठ
→ भाग 25: रूपों के साथ काम करने पर कार्यशाला
→ भाग 26: अनुप्रयोग वास्तुकला, कंटेनर / घटक पैटर्न
→ भाग 27: पाठ्यक्रम परियोजना

पाठ 13. पाठ्यक्रम की कुछ विशेषताओं के बारे में

→ मूल

इससे पहले कि हम जारी रखें, मैं इस पाठ्यक्रम में प्रदर्शित कोड की कुछ विशेषताओं के बारे में थोड़ी बात करना चाहूंगा। आपने देखा होगा कि आमतौर पर अर्धविराम का उपयोग कोड में नहीं किया जाता है। उदाहरण के लिए, जैसा कि आप देख सकते हैं, निम्नलिखित जैसे उदाहरणों में, वे नहीं हैं:

import React from "react" import ReactDOM from "react-dom" function App() {    return (       <h1>Hello world!</h1>    ) } ReactDOM.render(<App />, document.getElementById("root")) 

जहाँ भी संभव हो आपको अर्धविरामों के लिए उपयोग किया जा सकता है। फिर, उदाहरण के लिए, पिछले कोड टुकड़े की पहली दो पंक्तियाँ इस तरह दिखेंगी:

 import React from "react"; import ReactDOM from "react-dom"; 

मैंने हाल ही में फैसला किया है कि मैं उनके बिना करूंगा, नतीजतन, मुझे वह कोड मिलता है जिसे आप उदाहरणों में देखते हैं। बेशक, जावास्क्रिप्ट में ऐसे निर्माण हैं जो अर्धविराम के बिना नहीं हो सकते। कहते हैं, जब लूप के लिए वर्णन किया जाता है, तो इसका सिंटैक्स इस तरह दिखता है:

 for ([]; []; [ ]) 

लेकिन ज्यादातर मामलों में आप लाइनों के अंत में अर्धविराम के बिना कर सकते हैं। और कोड में उनकी अनुपस्थिति इसके काम में हस्तक्षेप नहीं करेगी। दरअसल, कोड में अर्धविराम का उपयोग करने का प्रश्न प्रोग्रामर की व्यक्तिगत प्राथमिकताओं का सवाल है।

कोड की एक और विशेषता जो मैं लिख रहा हूं वह यह है कि हालांकि ES6 तकनीकी रूप से आपको उन मामलों में तीर फ़ंक्शन का उपयोग करने की अनुमति देता है जहां function कीवर्ड का उपयोग करके function घोषित किए जाते हैं, मैं इसका उपयोग नहीं करता हूं।

उदाहरण के लिए, ऊपर दिए गए कोड को इस तरह से फिर से लिखा जा सकता है:

 import React from "react" import ReactDOM from "react-dom" const App = () => <h1>Hello world!</h1> ReactDOM.render(<App />, document.getElementById("root")) 

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

पाठ 14. जेएसएक्स और जावास्क्रिप्ट

→ मूल

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

क्या होगा यदि एक निश्चित चर है जिसका मूल्य कार्यात्मक घटक द्वारा लौटाए गए JSX कोड में प्रतिस्थापित किया जाना है?

मान लीजिए कि हमारे पास एक कोड है:

 import React from "react" import ReactDOM from "react-dom" function App() { return (   <h1>Hello world!</h1> ) } ReactDOM.render(<App />, document.getElementById("root")) 

उपयोगकर्ता के पहले और अंतिम नाम वाले चर के एक जोड़े को कार्यात्मक घटक में जोड़ें।

 function App() { const firstName = "Bob" const lastName = "Ziroll" return (   <h1>Hello world!</h1> ) } 

अब हम चाहते हैं कि पाठ को Hello world! साथ कार्यात्मक घटक पहले स्तर का शीर्ष लेख न बने Hello world! , और Hello Bob Ziroll! जैसे अभिवादन वाले हेडर Hello Bob Ziroll! जो घटक में उपलब्ध चर का उपयोग करके बनाया गया है।

आइए फिर से लिखने की कोशिश करें कि घटक क्या देता है, इस तरह से:

 <h1>Hello firstName + " " + lastName!</h1> 

यदि आप इस तरह के कोड को संसाधित करने के बाद पृष्ठ पर दिखाई देते हैं, तो यह पता चलता है कि यह वैसा नहीं दिखता जैसा हमें चाहिए। अर्थात्, Hello firstName + " " + lastName! । उसी समय, यदि create-react-app टूल द्वारा बनाई गई मानक परियोजना का उपयोग उदाहरण को चलाने के लिए किया जाता है, तो हमें चेतावनी दी जाएगी कि firstName और अंतिम firstName lastName मानों lastName असाइन किए गए हैं जो कहीं भी उपयोग नहीं किए जाते हैं। सच है, यह पाठ के पृष्ठ पर उपस्थिति को रोक नहीं पाएगा जो कि वास्तव में कार्यात्मक घटक द्वारा लौटाया गया था, इसके बजाय प्रतिस्थापित करने के बिना कि हमें चर, उनके मूल्यों के नाम क्या लग रहे थे। सिस्टम इस रूप में चर नामों को सादा पाठ मानता है।

हम पूछेंगे कि JSX कोड में जावास्क्रिप्ट का लाभ कैसे उठाया जाए। वास्तव में, ऐसा करना काफी सरल है। हमारे मामले में, यह केवल यह बताने के लिए पर्याप्त है कि घुंघराले ब्रेसिज़ में जावास्क्रिप्ट कोड के रूप में क्या व्याख्या की जानी चाहिए। नतीजतन, घटक रिटर्न इस तरह दिखेगा:

 <h1>Hello {firstName + " " + lastName}!</h1> 

उसी समय, पाठ Hello Bob Ziroll! । आप जेएसएक्स कोड के इन टुकड़ों में नियमित जावास्क्रिप्ट कंस्ट्रक्शन का उपयोग कर सकते हैं, जो कर्ली ब्रेसिज़ के साथ हाइलाइट किए गए हैं। यहां बताया गया है कि कोड ब्राउज़र में आउटपुट क्या करेगा:


जेएसएक्स और जावास्क्रिप्ट द्वारा निर्मित मार्कअप के साथ एक पृष्ठ

चूंकि आधुनिक परिस्थितियों में तार के साथ काम करते हैं, इसलिए ES6 सुविधाओं का मुख्य रूप से उपयोग किया जाता है, हम उनका उपयोग करके कोड को फिर से लिखते हैं। अर्थात्, हम backticks ( ` ` ) का उपयोग करके तैयार किए गए टेम्पलेट शाब्दिक के बारे में बात कर रहे हैं। इस तरह के तार में ${} फॉर्म के निर्माण शामिल हो सकते हैं। टेम्पलेट शाब्दिक के मानक व्यवहार में घुंघराले ब्रेस में निहित भावों की गणना करना और एक स्ट्रिंग के साथ क्या होता है, इसे परिवर्तित करना शामिल है। हमारे मामले में, यह इस तरह दिखेगा:

 <h1>Hello {`${firstName} ${lastName}`}!</h1> 

कृपया ध्यान दें कि पहले और अंतिम नामों को एक स्थान से अलग किया जाता है, जिसकी व्याख्या यहां एक नियमित चरित्र के रूप में की जाती है। इस कोड को निष्पादित करने का परिणाम वही होगा जो ऊपर दिखाया गया है। सामान्य तौर पर, अब आपको जो सबसे महत्वपूर्ण बात समझनी चाहिए वह यह है कि जेएसएक्स कोड में स्थित घुंघराले ब्रेसिज़ में जो संलग्न है वह साधारण जेएस है।

एक अन्य उदाहरण पर विचार करें। अर्थात्, हम अपने कोड को फिर से लिखते हैं ताकि अगर इसे सुबह कहा जाए, तो यह पाठ को Good morning प्रदर्शित करेगा, यदि दोपहर में - Good afternoon , और यदि शाम को - Good night । शुरुआत करने के लिए, हम एक कार्यक्रम लिखेंगे जो रिपोर्ट करता है कि यह किस समय है। यहाँ App कार्यात्मक घटक का कोड है जो इस समस्या को हल करता है:

 function App() { const date = new Date() return (   <h1>It is currently about {date.getHours() % 12} o'clock!</h1> ) } 

यहां Date ऑब्जेक्ट का एक नया उदाहरण बनाया जाता है। JSX जावास्क्रिप्ट कोड का उपयोग करता है, जिसकी date.getHours() हम date.getHours() विधि को कॉल करके पता date.getHours() , जो अब एक घंटा है, जिसके बाद, इस संख्या को 12 से विभाजित करने के शेष की गणना करते हुए, हम समय को 12-घंटे के प्रारूप में बदलते हैं। इसी तरह, समय की जाँच करके, हम अपनी ज़रूरत की रेखा बना सकते हैं। उदाहरण के लिए, यह इस तरह दिख सकता है:

 function App() { const date = new Date() const hours = date.getHours() let timeOfDay if (hours < 12) {   timeOfDay = "morning" } else if (hours >= 12 && hours < 17) {   timeOfDay = "afternoon" } else {   timeOfDay = "night" } return (   <h1>Good {timeOfDay}!</h1> ) } 

एक चर timeOfDay , और if निर्माण का उपयोग करके वर्तमान समय का विश्लेषण किया जाता है, तो हम दिन का समय पता करते हैं और इसे इस चर पर लिखते हैं। उसके बाद, हम JSX कोड द्वारा दिए गए घटक में चर का उपयोग करते हैं।

हमेशा की तरह, आज हमने जो सीखा है, उसके साथ प्रयोग करने की सिफारिश की गई है।

परिणाम

इस पाठ में, हमने इस पाठ्यक्रम में उपयोग की जाने वाली कुछ कोड शैली सुविधाओं के बारे में बात की, साथ ही JSX और जावास्क्रिप्ट की सहभागिता भी। JSX में जावास्क्रिप्ट-कोड का उपयोग करने से महान अवसर खुलते हैं, जिसकी व्यावहारिक उपयोगिता हमें अगले पाठ में महसूस होगी, जब हम अंतर्निहित शैलियों से निपटेंगे।

प्रिय पाठकों! क्या आप अपने जावास्क्रिप्ट कोड में अर्धविराम का उपयोग करते हैं?