रिएक्ट ट्रेनिंग कोर्स पार्ट 27: कोर्स प्रोजेक्ट

रिएक्ट प्रशिक्षण पाठ्यक्रम के अनुवाद के इस भाग में, आपको एक मेम जनरेटर बनाने के लिए कहा जाता है।



→ भाग 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: पाठ्यक्रम परियोजना

पाठ 45. पाठ्यक्रम परियोजना। मेमे जनरेटर

→ मूल

तो हम पाठ्यक्रम परियोजना के लिए मिला है। आइए एक एप्लिकेशन बनाएं जो मेमों को उत्पन्न करेगा। आइए इस कमांड का उपयोग करके बनाई गई मानक बनाएँ प्रतिक्रिया-ऐप परियोजना के साथ शुरू करें:

npx create-react-app meme-generator 

यहां आप इसके उपयोग की विशेषताओं के बारे में जानकारी पा सकते हैं।

इस परियोजना पर काम के दौरान, आपको इसके कुछ हिस्सों को स्वयं लागू करने के लिए कहा जाएगा, और फिर उनके बारे में स्पष्टीकरण पढ़ा जाएगा। मानक परियोजना में पहले से ही बॉयलरप्लेट कोड स्थित है, विशेष रूप से, index.js और App.js । आप इस कोड को पूरी तरह से हटा सकते हैं और प्रतिक्रिया-अनुप्रयोगों के मानक तंत्र के कार्यान्वयन में खुद का परीक्षण करने के लिए इसे स्वयं लिखने का प्रयास कर सकते हैं।

इस परियोजना में, आपको निम्नलिखित शैलियों का उपयोग करने के लिए आमंत्रित किया गया है:

 * {   box-sizing: border-box; } body {   margin: 0;   background-color: whitesmoke; } header {   height: 100px;   display: flex;   align-items: center;   background: #6441A5;  /* fallback for old browsers */   background: -webkit-linear-gradient(to right, #2a0845, #6441A5);  /* Chrome 10-25, Safari 5.1-6 */   background: linear-gradient(to right, #2a0845, #6441A5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } header > img {   height: 80%;   margin-left: 10%; } header > p {   font-family: VT323, monospace;   color: whitesmoke;   font-size: 50px;   margin-left: 60px; } .meme {   position: relative;   width: 90%;   margin: auto; } .meme > img {   width: 100%; } .meme > h2 {   position: absolute;   width: 80%;   text-align: center;   left: 50%;   transform: translateX(-50%);   margin: 15px 0;   padding: 0 5px;   font-family: impact, sans-serif;   font-size: 2em;   text-transform: uppercase;   color: white;   letter-spacing: 1px;   text-shadow:       2px 2px 0 #000,       -2px -2px 0 #000,       2px -2px 0 #000,       -2px 2px 0 #000,       0 2px 0 #000,       2px 0 0 #000,       0 -2px 0 #000,       -2px 0 0 #000,       2px 2px 5px #000; } .meme > .bottom {   bottom: 0; } .meme > .top {   top: 0; } .meme-form {   width: 90%;   margin: 20px auto;   display: flex;   justify-content: space-between; } .meme-form > input {   width: 45%;   height: 40px; } .meme-form > button {   border: none;   font-family: VT323, monospace;   font-size: 25px;   letter-spacing: 1.5px;   color: white;   background: #6441A5; } .meme-form > input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-family: VT323, monospace; font-size: 25px; text-align: cen } .meme-form > input::-moz-placeholder { /* Firefox 19+ */ font-family: VT323, monospace; font-size: 25px; text-align: cen } .meme-form > input:-ms-input-placeholder { /* IE 10+ */ font-family: VT323, monospace; font-size: 25px; text-align: cen } .meme-form > input:-moz-placeholder { /* Firefox 18- */ font-family: VT323, monospace; font-size: 25px; text-align: cen } 

इन शैलियों को पहले ही प्रोजेक्ट में index.css फ़ाइल में शामिल किया जा सकता है और index.js फ़ाइल में index.css किया जा सकता है।

इसलिए, इस धारणा के आधार पर कि index.js और App.js फाइलें अभी खाली हैं, आप, पहले कार्य के रूप में, index.js कोड लिखने के लिए आमंत्रित किए जाते हैं, App.js में सबसे सरल घटक App.js और इसे index.js आउटपुट करते हैं।

यहाँ है कि index.js में क्या दिखना चाहिए:

 import React from "react" import ReactDOM from "react-dom" import './index.css' import App from "./App" ReactDOM.render(<App />, document.getElementById("root")) 

यहाँ हम React और ReactDOM आयात करते हैं, index.css और App घटक से आयात शैलियों। उसके बाद, ReactDOM.render() विधि का उपयोग करके, हम यह ReactDOM.render() करते हैं कि App घटक क्या root पहचानकर्ता ( <div id="root"></div> ) के साथ index.html पृष्ठ के तत्व में बनाता है।

यहां App.js फाइल App.js सकती है:

 import React from "react" function App() {   return (       <h1>Hello world!</h1>   ) } export default App 

यहाँ अब सबसे सरल कार्यात्मक घटक प्रस्तुत किया गया है।

इस स्तर पर, परियोजना नीचे दिखाए गए की तरह दिखती है।


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

अब दो फाइलों में दो नए घटक बनाएं, जिनके नाम घटकों के नामों के अनुरूप हैं:

• Header घटक जिसका उपयोग एप्लिकेशन हेडर को प्रदर्शित करने के लिए किया जाएगा।
• MemeGenerator घटक, जिसमें एप्लिकेशन को सौंपे गए मुख्य कार्य हल किए जाएंगे। अर्थात्, एपीआई के लिए कॉल यहाँ किया जाएगा। एप्लिकेशन डेटा यहां संग्रहीत किया जाएगा।

इन घटकों को कौन से कार्य सौंपे जाते हैं, इस पर विचार करते हुए कि वे क्या होने चाहिए।

यहाँ Header.js फ़ाइल की सामग्री है:

 import React from "react" function Header() {   return (       <h1>HEADER</h1>   ) } export default Header 

चूंकि यह घटक केवल एप्लिकेशन हेडर को प्रदर्शित करने के लिए उपयोग किया जाएगा, इसलिए हमने इसे एक कार्यात्मक घटक के रूप में डिज़ाइन किया है।

यहाँ MemeGenerator.js फ़ाइल के लिए कोड है:

 import React, {Component} from "react" class MemeGenerator extends Component {   constructor() {       super()       this.state ={}   }     render() {       return (           <h1>MEME GENERATOR SECTION</h1>       )   } } export default MemeGenerator 

यहां, उन कार्यों को ध्यान में रखते हुए जिन्हें MemeGenerator घटक के माध्यम से हल किया जाना है, हम कक्षा के आधार पर एक घटक का उपयोग करेंगे। यहां एक कंस्ट्रक्टर है जिसमें हम एक खाली ऑब्जेक्ट के साथ राज्य को इनिशियलाइज़ करते हैं।

इन फ़ाइलों को बनाने के बाद, हम उन्हें App.js में आयात करते हैं और App के कार्यात्मक घटक से मार्कअप लौटाते हैं, जो इन घटकों के उदाहरणों का उपयोग करता है, यह नहीं भूलना चाहिए कि यदि कार्यात्मक घटक कई तत्वों को वापस करता है, तो उन्हें कुछ में App.js आवश्यकता होती है। हमारे मामले में, यह <div> । यहां अपडेट किया गया App.js कोड है:

 import React from "react" import Header from "./Header" import MemeGenerator from "./MemeGenerator" function App() {   return (       <div>           <Header />           <MemeGenerator />       </div>   ) } export default App 

आवेदन की उपस्थिति की जाँच करें।


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

अब Header घटक पर काम करते हैं। यहां हम शब्दार्थ तत्व HTML5 <header> उपयोग करेंगे। इस टैग में चित्र और पाठ होगा। अब Header.js फ़ाइल का कोड इस तरह दिखेगा:

 import React from "react" function Header() {   return (       <header>           <img               src="http://www.pngall.com/wp-content/uploads/2016/05/Trollface.png"               alt="Problem?"           />           <p>Meme Generator</p>       </header>   ) } export default Header 

यहां बताया गया है कि ऐप का लुक कैसे बदलेगा।


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

एप्लिकेशन शीर्षक को पहले index.js में index.js शैलियों के अनुसार बनाया गया है। Header घटक पर काम अब पूरा हो गया है।

हम MemeGenerator घटक के साथ काम करना जारी रखेंगे। अब आपको निम्नलिखित डेटा को लिखकर इस घटक की स्थिति को स्वतंत्र रूप से शुरू करने के लिए आमंत्रित किया गया है:

• मेमे के शीर्ष पर प्रदर्शित पाठ ( topText प्रॉपर्टी)।
• मेमे के तल पर प्रदर्शित पाठ ( bottomText संपत्ति)।
• यादृच्छिक छवि ( randomImage गुण जो लिंक http://i.imgflip.com/1bij.jpg ) के साथ आरंभ करने की आवश्यकता है।

यह राज्य को प्रारंभ करने के बाद MemeGenerator.js कोड होगा:

 import React, {Component} from "react" class MemeGenerator extends Component {   constructor() {       super()       this.state = {           topText: "",           bottomText: "",           randomImg: "http://i.imgflip.com/1bij.jpg"       }   }     render() {       return (           <h1>MEME GENERATOR SECTION</h1>       )   } } export default MemeGenerator 

अब आवेदन की उपस्थिति प्रभावित नहीं होगी।

हम एपीआई के लिए कॉल का उपयोग करेंगे, जो छवियों के लिए लिंक वाली वस्तुओं की एक सरणी देता है, जिसके आधार पर मेम बनाए जा सकते हैं। परियोजना पर काम के इस चरण में, आपको MemeGenerator घटक में निम्नलिखित कार्यक्षमता को लागू करने के लिए आमंत्रित किया जाता है:

• एपीआई https://api.imgflip.com/get_memes/ पर कॉल करें ।
• नई स्टेट प्रॉपर्टी ( allMemeImgs ) में response.data.memes एरे के रूप में प्रतिक्रिया में उपलब्ध डेटा को सहेजें।

यहाँ, इसे स्पष्ट करने के लिए, JSON डेटा का एक टुकड़ा इस एपीआई तक पहुँचते समय वापस आया:

 {   "success":true,  "data":{      "memes":[         {           "id":"112126428",           "name":"Distracted Boyfriend",           "url":"https:\/\/i.imgflip.com\/1ur9b0.jpg",           "width":1200,           "height":800,           "box_count":3        },        {           "id":"87743020",           "name":"Two Buttons",           "url":"https:\/\/i.imgflip.com\/1g8my4.jpg",           "width":600,           "height":908,           "box_count":2        },        {           "id":"129242436",           "name":"Change My Mind",           "url":"https:\/\/i.imgflip.com\/24y43o.jpg",           "width":482,           "height":361,           "box_count":2        },        ….  ]  } } 

ऊपर प्रस्तुत समस्या का समाधान करते हुए, इस तथ्य को ध्यान में रखना आवश्यक है कि हम उस डेटा के बारे में बात कर रहे हैं जो घटक को आवेदन की शुरुआत में ही चाहिए।

इसलिए, उन्हें लोड करने के लिए, हम componentDidMount() जीवन चक्र विधि का सहारा लेंगे। यहां हम, मानक fetch() विधि का उपयोग करके, एपीआई को कॉल करेंगे। यह एक वादा वापस करता है। डेटा लोड करने के बाद, प्रतिक्रिया ऑब्जेक्ट हमारे लिए उपलब्ध होगा, हम memes एरे को इसमें से निकालते हैं और इसे नए स्टेट प्रॉपर्टी allMemeImgs , जिसे खाली एरे से तैयार किया जाता है। चूंकि यह डेटा अभी तक स्क्रीन पर प्रदर्शित होने वाली किसी चीज़ को बनाने के लिए उपयोग नहीं किया जाता है, हम डेटा लोडिंग तंत्र के सही संचालन की जांच करने के लिए कंसोल के पहले तत्व को प्रिंट करेंगे।

यहाँ काम के इस स्तर पर MemeGenerator घटक का कोड है:

 import React, {Component} from "react" class MemeGenerator extends Component {   constructor() {       super()       this.state = {           topText: "",           bottomText: "",           randomImg: "http://i.imgflip.com/1bij.jpg",           allMemeImgs: []       }   }     componentDidMount() {       fetch("https://api.imgflip.com/get_memes")           .then(response => response.json())           .then(response => {               const {memes} = response.data               console.log(memes[0])               this.setState({ allMemeImgs: memes })           })   }     render() {       return (           <h1>MEME GENERATOR SECTION</h1>       )   } } export default MemeGenerator 

डेटा को सफलतापूर्वक लोड करने के बाद कंसोल को यही मिलता है।


ब्राउज़र में एप्लिकेशन, लोड किए गए सरणी के पहले तत्व के कंसोल पर आउटपुट

ध्यान दें कि छवि कई गुणों का उपयोग करके वर्णित है। हम केवल url संपत्ति का उपयोग करेंगे, जो छवि को डाउनलोड करने के लिए लिंक तक पहुंच प्रदान करता है।

पाठ्यक्रम की शुरुआत में, हमने इस बारे में बात की कि यह आवेदन कैसे दिखेगा।


मेमे जनरेटर

विशेष रूप से, इसके इंटरफ़ेस में पाठ दर्ज करने के लिए कुछ फ़ील्ड हैं, जो छवि के ऊपरी और निचले हिस्सों में प्रदर्शित होंगे। अब आपको नीचे दिखाए गए MemeGenerator घटक के अपडेट किए गए कोड के आधार पर लेने के लिए आमंत्रित किया गया है, जो इस घटक के उपरोक्त कोड से अलग है जिसमें एक फ़ॉर्म रिक्त यहां जोड़ा गया है, पाठ फ़ील्ड, topText और bottomText टेक्स्ट के एक जोड़े को बनाने के लिए। ध्यान रखें कि ये प्रबंधित घटक होने चाहिए। उनमें आवश्यक विशेषताएँ जोड़ें। इन फ़ील्ड्स के onChange एक onChange ईवेंट onChange बनाएं, जिसमें आपको संबंधित स्टेट संपत्तियों को अपडेट करने की आवश्यकता है क्योंकि आप उनमें टेक्स्ट दर्ज करते हैं।

 import React, {Component} from "react" class MemeGenerator extends Component {   constructor() {       super()       this.state = {           topText: "",           bottomText: "",           randomImg: "http://i.imgflip.com/1bij.jpg",           allMemeImgs: []       }   }     componentDidMount() {       fetch("https://api.imgflip.com/get_memes")           .then(response => response.json())           .then(response => {               const {memes} = response.data               this.setState({ allMemeImgs: memes })           })   }     render() {       return (           <div>               <form className="meme-form">                   {                       //                        }                                 <button>Gen</button>               </form>           </div>       )   } } export default MemeGenerator 

वैसे, इस तथ्य पर ध्यान दें कि render() विधि द्वारा लौटाए गए कोड में एक टिप्पणी शामिल करने के लिए, हमने सिस्टम को इंगित करने के लिए इसे घुंघराले ब्रैकेट में संलग्न किया था कि इस टुकड़े को जावास्क्रिप्ट कोड के रूप में व्याख्या किया जाना चाहिए।

आवेदन पर काम के इस स्तर पर आपको क्या मिलना चाहिए:

 import React, {Component} from "react" class MemeGenerator extends Component {   constructor() {       super()       this.state = {           topText: "",           bottomText: "",           randomImg: "http://i.imgflip.com/1bij.jpg",           allMemeImgs: []       }       this.handleChange = this.handleChange.bind(this)   }     componentDidMount() {       fetch("https://api.imgflip.com/get_memes")           .then(response => response.json())           .then(response => {               const {memes} = response.data               this.setState({ allMemeImgs: memes })           })   }     handleChange(event) {       const {name, value} = event.target       this.setState({ [name]: value })   }     render() {       return (           <div>               <form className="meme-form">                   <input                       type="text"                       name="topText"                       placeholder="Top Text"                       value={this.state.topText}                       onChange={this.handleChange}                   />                   <input                       type="text"                       name="bottomText"                       placeholder="Bottom Text"                       value={this.state.bottomText}                       onChange={this.handleChange}                   />                                 <button>Gen</button>               </form>           </div>       )   } } export default MemeGenerator 

अब आवेदन पृष्ठ नीचे दिखाए गए जैसा दिखाई देगा।


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

जबकि केवल मदद पाठ वाले फ़ील्ड प्रदर्शित किए जाते हैं, उनमें डेटा दर्ज करने से इंटरफ़ेस में परिवर्तन नहीं होता है। यहां कार्यान्वित तंत्र के सही संचालन को सत्यापित करने के लिए, आप console.log() कमांड का उपयोग कर सकते हैं।

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

यहाँ MemeGenerator घटक के लिए अद्यतन कोड दिया गया है। यहां, फॉर्म विवरण कोड के नीचे render() विधि में, एक <div> तत्व है, जिसमें एक <img> तत्व शामिल है जो एक छवि प्रदर्शित करता है, और <h2> तत्वों का एक जोड़ा जो लेबल प्रदर्शित करता है। <div> और <h2> तत्व उन शैलियों का उपयोग करके बनाए गए हैं, जिन्हें हमने प्रोजेक्ट पर काम की शुरुआत में जोड़ा था।

 import React, {Component} from "react" class MemeGenerator extends Component {   constructor() {       super()       this.state = {           topText: "",           bottomText: "",           randomImg: "http://i.imgflip.com/1bij.jpg",           allMemeImgs: []       }       this.handleChange = this.handleChange.bind(this)   }     componentDidMount() {       fetch("https://api.imgflip.com/get_memes")           .then(response => response.json())           .then(response => {               const {memes} = response.data               this.setState({ allMemeImgs: memes })           })   }     handleChange(event) {       const {name, value} = event.target       this.setState({ [name]: value })   }     render() {       return (           <div>               <form className="meme-form">                   <input                       type="text"                       name="topText"                       placeholder="Top Text"                       value={this.state.topText}                       onChange={this.handleChange}                   />                   <input                       type="text"                       name="bottomText"                       placeholder="Bottom Text"                       value={this.state.bottomText}                       onChange={this.handleChange}                   />                                 <button>Gen</button>               </form>               <div className="meme">                   <img align="center" src={this.state.randomImg} alt="" />                   <h2 className="top">{this.state.topText}</h2>                   <h2 className="bottom">{this.state.bottomText}</h2>               </div>           </div>       )   } } export default MemeGenerator 

यहां देखें कि ऐप अब कैसा दिखता है।


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

इस तथ्य पर ध्यान दें कि राज्य को इनिशियलाइज़ करने वाली छवि यहाँ प्रदर्शित है। हम अभी तक उन छवियों का उपयोग नहीं करते हैं जो राज्य संपत्ति allMemeImgs में संग्रहीत हैं। पाठ फ़ील्ड में कुछ दर्ज करने का प्रयास करते हैं।


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

जैसा कि आप देख सकते हैं, टेक्स्ट के साथ काम करने के लिए जिम्मेदार एप्लिकेशन सबसिस्टम अपेक्षा के अनुरूप कार्य कर रहे हैं। अब यह केवल यह सुनिश्चित करने के लिए बना हुआ है कि Gen बटन दबाकर छवि डेटा के साथ सरणी से एक यादृच्छिक छवि का चयन किया जाए और <img> तत्व में लोड किया जाए, जो पाठ इनपुट फ़ील्ड के नीचे पृष्ठ पर मौजूद है।

इस सुविधा से एप्लिकेशन को लैस करने के लिए - निम्नलिखित कार्य करें। जब आप Gen बटन पर क्लिक करते हैं तो एक विधि बनाते हैं। इस पद्धति में छवियों में से एक का चयन करना चाहिए, जिसके बारे में जानकारी राज्य संपत्ति allMemeImgs में संग्रहीत है, और फिर ऐसी क्रियाएं करें जो आपको पाठ इनपुट फ़ील्ड के तहत स्थित <img> तत्व में इस छवि को प्रदर्शित करने की अनुमति देती हैं। allMemeImgs कि allMemeImgs चित्रों का वर्णन करने वाली वस्तुओं की एक सरणी संग्रहीत करता है, और इस सरणी के प्रत्येक ऑब्जेक्ट में एक url गुण होता है।

यहाँ कोड है जो इस समस्या का समाधान प्रदान करता है:

 import React, {Component} from "react" class MemeGenerator extends Component {   constructor() {       super()       this.state = {           topText: "",           bottomText: "",           randomImg: "http://i.imgflip.com/1bij.jpg",           allMemeImgs: []       }       this.handleChange = this.handleChange.bind(this)       this.handleSubmit = this.handleSubmit.bind(this)   }     componentDidMount() {       fetch("https://api.imgflip.com/get_memes")           .then(response => response.json())           .then(response => {               const {memes} = response.data               this.setState({ allMemeImgs: memes })           })   }     handleChange(event) {       const {name, value} = event.target       this.setState({ [name]: value })   }     handleSubmit(event) {       event.preventDefault()       const randNum = Math.floor(Math.random() * this.state.allMemeImgs.length)       const randMemeImg = this.state.allMemeImgs[randNum].url       this.setState({ randomImg: randMemeImg })   }     render() {       return (           <div>               <form className="meme-form" onSubmit={this.handleSubmit}>                   <input                       type="text"                       name="topText"                       placeholder="Top Text"                       value={this.state.topText}                       onChange={this.handleChange}                   />                   <input                       type="text"                       name="bottomText"                       placeholder="Bottom Text"                       value={this.state.bottomText}                       onChange={this.handleChange}                   />                                 <button>Gen</button>               </form>               <div className="meme">                   <img align="center" src={this.state.randomImg} alt="" />                   <h2 className="top">{this.state.topText}</h2>                   <h2 className="bottom">{this.state.bottomText}</h2>               </div>           </div>       )   } } export default MemeGenerator 

Gen बटन को एक ईवेंट हैंडलर सौंपा जा सकता है, जब आप उस पर क्लिक करते हैं, जैसा कि किसी अन्य बटन के साथ होता है। हालांकि, इस तथ्य को देखते हुए कि इस बटन का उपयोग फॉर्म जमा करने के लिए किया जाता है, फॉर्म के onSubmit इवेंट onSubmit उपयोग करना बेहतर होता है। इस हैंडलर में, handleSubmit() , हम मानक फॉर्म event.preventDefault() प्रक्रिया को रद्द करने के लिए ईवेंट की विधि को लागू करते हैं। इस event.preventDefault() में आने वाले इवेंट को रद्द कर दिया जाता है, जिसके दौरान पेज को फिर से लोड किया जाता है। इसके बाद, हम 0 से रेंज में एक यादृच्छिक संख्या प्राप्त करते हैं, जो allMemeImgs सरणी के अंतिम तत्व के अनुक्रमणिका से संबंधित है और इसी संख्या का उपयोग संबंधित सूचकांक के साथ तत्व को संदर्भित करने के लिए करता है। उस तत्व की ओर मुड़ते हुए, जो वस्तु है, हमें इस ऑब्जेक्ट की संपत्ति url मिलती है और इसे राज्य संपत्ति randomImg । उसके बाद, घटक को फिर से प्रस्तुत किया जाता है और पृष्ठ की उपस्थिति बदल जाती है।


ब्राउज़र में एप्लिकेशन पेज

कोर्स प्रोजेक्ट पूरा हुआ।

परिणाम

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

प्रिय पाठकों! क्या आपने इस कोर्स की परियोजना को पूरा करते समय कोई कठिनाइयों का सामना किया है?