रिएक्ट ट्रेनिंग कोर्स, भाग 28: रिएक्ट मॉडर्न फीचर्स, प्रोजेक्ट आइडियाज, निष्कर्ष

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



→ भाग 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: पाठ्यक्रम परियोजना
→ भाग 28: वर्तमान प्रतिक्रिया सुविधाएँ, परियोजना विचार, निष्कर्ष
→ अंत!

पाठ 46. आधुनिक प्रतिक्रिया अनुप्रयोगों का विकास

→ मूल

फेसबुक पर बहुत सारे प्रोग्रामर रिएक्ट लाइब्रेरी पर काम कर रहे हैं, और रिएक्ट के आसपास के बड़े समुदाय के सदस्य प्रोजेक्ट में योगदान दे रहे हैं। यह सब इस तथ्य की ओर जाता है कि रिएक्ट बहुत तेज़ी से विकसित हो रहा है। उदाहरण के लिए, यदि आपने 2019 की शुरुआत में रिएक्ट का अध्ययन किया और इस पुस्तकालय की सामग्रियों को देखा, तो कहें, दो साल पहले, आप मदद नहीं कर सकते थे, लेकिन उन सामग्रियों के प्रकाशन के बाद से रिएक्ट में जो परिवर्तन हुए हैं, उन पर ध्यान दें। उदाहरण के लिए, रिएक्ट 16.3 में, कुछ नए घटक जीवन चक्र विधियां दिखाई दीं, और कुछ विधियां हटा दी गईं। और, कहते हैं, रिएक्ट 16.6 में और भी अधिक नई विशेषताएं हैं। रिएक्ट 17.0 और इस पुस्तकालय के भविष्य के संस्करणों में भारी संख्या में नवाचारों की उम्मीद है।

अब हम कुछ आधुनिक रिएक्ट फीचर्स के बारे में बात करेंगे।

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

आधुनिक जावास्क्रिप्ट सुविधाओं में से एक जो आप उपयोग कर सकते हैं जब रिएक्ट एप्लिकेशन विकसित करना तीर फ़ंक्शन सिंटैक्स का उपयोग करके वर्ग विधियों को घोषित करने की क्षमता है।

यहाँ App घटक के लिए कोड है जो पाठ फ़ील्ड प्रदर्शित करता है:

 import React, {Component} from "react" class App extends Component {   //        constructor() {       super()       this.state = {           firstName: ""       }       this.handleChange = this.handleChange.bind(this)   }     //        handleChange(event) {       const { name, value } = event.target       this.setState({           [name]: value       })   }     render() {       return (           <main>               <form>                   <input                       type="text"                       name="firstName"                       value={this.state.firstName}                       onChange={this.handleChange}                       placeholder="First Name"                   />               </form>               <h1>{this.state.firstName}</h1>           </main>       )   } } export default App 

यह एक ब्राउज़र में इस एप्लिकेशन का पृष्ठ कैसा दिखता है।


ब्राउज़र में अनुप्रयोग

हम एरो फ़ंक्शन के रूप में handleChange() विधि को फिर से handleChange() , घटक कोड को निम्न रूप में लाते हैं:

 import React, {Component} from "react" class App extends Component {   //        constructor() {       super()       this.state = {           firstName: ""       }   }     //        handleChange = (event) => {       const { name, value } = event.target       this.setState({           [name]: value       })   }     render() {       return (           <main>               <form>                   <input                       type="text"                       name="firstName"                       value={this.state.firstName}                       onChange={this.handleChange}                       placeholder="First Name"                   />               </form>               <h1>{this.state.firstName}</h1>           </main>       )   } } export default App 

इस रूपांतरण के दौरान, कोड में छोटे बदलाव किए गए थे, लेकिन इन परिवर्तनों का एक गंभीर प्रभाव है कि विधि कैसे काम करेगी। एरो फ़ंक्शंस में this लेक्सिकल स्कोप को इंगित करता है जिसमें वे स्थित हैं। ये कार्य this बंधन का समर्थन नहीं करते हैं। एरो फ़ंक्शंस की यह विशेषता इस तथ्य की ओर ले जाती है कि उनका उपयोग करने के लिए घोषित तरीकों को क्लास कंस्ट्रक्टर में इसके लिए बाध्य होने की आवश्यकता नहीं है।

एक और संभावना है कि हम यहां पर विचार करेंगे कि वर्ग गुणों का उपयोग करना है। अब, कंस्ट्रक्टर में राज्य को इनिशियलाइज़ करते समय, हम इस। this.state उपयोग करते हैं। इसलिए हम क्लास की एक इंस्टेंस प्रॉपर्टी बनाते हैं। अब, गुण कंस्ट्रक्टर के बाहर बनाए जा सकते हैं। परिणामस्वरूप, आप निम्नानुसार कोड परिवर्तित कर सकते हैं:

 import React, {Component} from "react" class App extends Component {   //        state = { firstName: "" }     //        handleChange = (event) => {       const { name, value } = event.target       this.setState({           [name]: value       })   }     render() {       return (           <main>               <form>                   <input                       type="text"                       name="firstName"                       value={this.state.firstName}                       onChange={this.handleChange}                       placeholder="First Name"                   />               </form>               <h1>{this.state.firstName}</h1>           </main>       )   } } export default App 

कृपया ध्यान दें कि यहाँ हम संबंधित संपत्ति की घोषणा करते समय राज्य को आरंम्भ करके निर्माणकर्ता से छुटकारा पा लेते हैं। सब कुछ इंगित करता है कि यह जेएस सुविधा भविष्य के भविष्य के लिए मानक में शामिल की जाएगी।

यहाँ प्रतिक्रिया सुविधाओं की एक सूची है।

• संदर्भ एपीआई इसका उपयोग Redux के बजाय किया जा सकता है, हालांकि इसका मतलब यह नहीं है कि Redux लाइब्रेरी ने अपनी प्रासंगिकता खो दी है।
• त्रुटियों की सीमा ।
• रेंडर प्रॉप्स टेम्प्लेट ।
• उच्च क्रम के घटक ।
• अभिक्रिया राउटर ।
• रिएक्ट करें ।
• प्रतिक्रिया की नई विशेषताएं 16.6 ।

सामान्य तौर पर, यह ध्यान दिया जा सकता है कि चूंकि रिएक्ट बहुत तेज़ी से विकसित हो रहा है, इसलिए यह सिफारिश की जाती है कि रिएक्ट विकास में शामिल हर कोई इस पुस्तकालय के नवाचारों की लगातार निगरानी करे।

पाठ 47. रिएक्ट प्रोजेक्ट आइडियाज

→ मूल

रिएक्ट के विकास के दौरान, आपने और मैंने कुछ प्रोजेक्ट बनाए - एक टोडो एप्लीकेशन और एक मेम जनरेटर। यह संभव है कि आप पहले से ही जानते हैं कि आप रिएक्ट का उपयोग करके क्या बनाना चाहते हैं। हो सकता है कि आप पहले से ही अपना खुद का एप्लिकेशन विकसित कर रहे हों। यदि आपने अभी तक निर्णय नहीं लिया है, और उस अभ्यास को कंप्यूटर प्रौद्योगिकी सीखने का सबसे अच्छा तरीका है, तो आप यहाँ हैं - ऐसी सामग्री जहाँ आपको वेब अनुप्रयोगों के लिए विचारों का एक पूरा गुच्छा मिलेगा, जिन्हें रिएक्ट का उपयोग करके बनाया जा सकता है।

पाठ 48. निष्कर्ष

→ मूल

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

आइए उन बुनियादी अवधारणाओं से गुजरें जो आपने इस पाठ्यक्रम के विकास के दौरान सीखी थीं।

• JSX। JSX आपको नियमित HTML कोड के समान सिंटैक्स का उपयोग करके उपयोगकर्ता इंटरफ़ेस का वर्णन करने की अनुमति देता है।
• घटक विकास के लिए दो दृष्टिकोण। कक्षा आधारित और कार्यात्मक घटक।
• अलग-अलग तरीकों से रीएक्ट एप्लिकेशन को स्टाइल करें।
• माता-पिता के घटकों से बच्चे के घटकों के गुण पास करना।
• डेटा के साथ स्टोर और काम करने के लिए घटकों की स्थिति का उपयोग करना।
• सशर्त प्रतिपादन।
• प्रतिक्रिया में रूपों के साथ काम करें।

आपका ध्यान के लिए धन्यवाद!

प्रिय पाठकों! हम आपको इस पाठ्यक्रम के अपने इंप्रेशन को साझा करने के लिए कहते हैं और हमें बताएं कि आप रिएक्ट का उपयोग करके क्या विकास करना चाहते हैं (या पहले से ही विकसित कर रहे हैं)।