क्या आपको मौजूदा परियोजनाओं या वेबसाइटों पर प्रतिक्रिया जोड़नी चाहिए?

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

आपको कोड की कुछ पंक्तियों को टाइप करने की आवश्यकता है। यह आपके जीवन को बहुत आसान बना सकता है। लेकिन आप मौजूदा प्रोजेक्ट में रिएक्ट कैसे जोड़ सकते हैं? कदम क्या हैं? इस पोस्ट में आपको सारी जानकारी मिल जाएगी।

क्या किसी मौजूदा प्रोजेक्ट में रिएक्ट को जोड़ना वास्तव में आसान है?

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

मौजूदा परियोजना में प्रतिक्रिया जोड़ें: उपकरण की आवश्यकता

• सबसे पहले, आपको अपने पीसी पर नोड इंस्टॉल करना होगा। आप इसे nodejs.org से प्राप्त कर सकते हैं। आपके पास कम से कम नोड संस्करण 10 होना चाहिए।
• अगला, आपके पास नोड पैकेज मैनेजर (एनपीएम) होना चाहिए। यह आपके पीसी पर नोड के साथ स्वचालित रूप से स्थापित हो जाता है। एनपीएम संस्करण 5.2 या उच्चतर होना चाहिए।
• अंत में, आपके पास एक अच्छा कोड संपादक होना चाहिए। बाजार में बहुत सारे समाधान उपलब्ध हैं। उदाहरण के लिए, विजुअल स्टूडियो कोड एक सहज संपादक है। यह डेवलपर्स के बीच काफी लोकप्रिय है। आप इसे यहाँ से डाउनलोड कर सकते हैं।

मौजूदा प्रोजेक्ट या वेबसाइट पर रिएक्ट जोड़ें

इस खंड में, आप अपनी वेबसाइट के मौजूदा HTML पृष्ठ को संशोधित करने के लिए एक रिएक्ट घटक जोड़ेंगे। यहाँ कदम हैं:

चरण 1: HTML में DOM कंटेनर जोड़ना

सबसे पहले, वह HTML पेज खोलें जिसे आप बदलना चाहते हैं। एक खाली div तत्व बनाएँ। यह वह क्षेत्र है जहां आप परिवर्तनों को प्रदर्शित करने के लिए रिएक्ट का उपयोग करेंगे।

<div id="medium_blog_container">

<!-- Here we will mount our component -->

</div>

चरण 2: स्क्रिप्ट टैग या रिएक्ट टैग जोड़ें

इसके बाद, आपको क्लोजिंग </body> टैग से ठीक पहले HTML पेज में तीन <script> टैग जोड़ने होंगे।

पहले दो टैग रिएक्ट को लोड करते हैं। तीसरा आपके घटक कोड को लोड करता है।

चरण 3: एक प्रतिक्रिया घटक बनाएँ

अब, आपको अपने HTML पृष्ठ के बगल में एक JS फ़ाइल बनानी होगी, जिसे medium_post_component.js कहा जाता है।

आप या तो JSX के साथ या JSX के बिना रिएक्ट लिख सकते हैं। ऊपर दिखाया गया उदाहरण JSX के बिना है। यह सीधे ब्राउज़र पर चल सकता है।

इन दो पंक्तियों पर एक नज़र डालें:

इन दो पंक्तियों के साथ, आप उस <div> की तलाश कर रहे हैं जिसे आपने पहले चरण में जोड़ा था। फिर आप इसके अंदर "लाइक" बटन रिएक्ट कंपोनेंट प्रदर्शित करते हैं।

मौजूदा परियोजना में प्रतिक्रिया जोड़ें – JSX को एक परियोजना में जोड़ें

JSX को किसी प्रोजेक्ट में जोड़ने के लिए आपको बंडलर या डेवलपमेंट सर्वर जैसे जटिल टूल का उपयोग करने की आवश्यकता नहीं है। वास्तव में, यह CSS प्रीप्रोसेसर को जोड़ने के समान ही है। हालाँकि, आपके पास अपने पीसी पर Node.js स्थापित होना चाहिए। यह एकमात्र आवश्यकता है। JSX को जोड़ने की प्रक्रिया बहुत ही सरल है। आपको बस इन चरणों का पालन करने की आवश्यकता है:

1. सबसे पहले, टर्मिनल में अपने प्रोजेक्ट फोल्डर में जाएं।

   
   

2. अब, निम्न आदेश चलाएँ

   npm init -y

   
   

3. यदि उपरोक्त आदेश विफल रहता है, तो यह आदेश चलाएँ:

   npm install babel-cli@6 babel-preset-react-app@3

   बस! आपने सफलतापूर्वक अपने प्रोजेक्ट में उत्पादन-तैयार JSX सेटअप जोड़ लिया है।

   
   

मौजूदा प्रोजेक्ट में रिएक्ट जोड़ें - JSX प्रीप्रोसेसर चलाएँ

JSX प्रीप्रोसेसर चलाने के लिए, आपको “src” नाम का एक फोल्डर बनाना होगा। फिर इस कमांड को टर्मिनल में चलाएं:

npx babel --watch src --out-dir . --presets react-app/prod

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

आपको प्रक्रिया समाप्त होने की प्रतीक्षा करने की आवश्यकता नहीं है। उपरोक्त आदेश JSX के लिए एक स्वचालित द्रष्टा आरंभ करता है।

यदि आप src फ़ोल्डर में like_button.js नामक फ़ाइल बनाते हैं, तो देखने वाला एक प्रीप्रोसेस्ड like_button.js फ़ाइल बनाएगा। इसमें ब्राउज़र के लिए उपयुक्त सादा जावास्क्रिप्ट कोड होगा।

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

ध्यान रखें कि एनपीएक्स टाइपो नहीं है। यह एक पैकेज रनर टूल है जो npm 5.2+ के साथ आता है।

मौजूदा प्रोजेक्ट में रिएक्ट जोड़ें - एजेएक्स और एपीआई कॉल-इन रिएक्ट फॉर कंपोनेंट

एपीआई कॉल करने के लिए कई पुस्तकालय हैं। हालाँकि, ये सबसे लोकप्रिय हैं:

• लाना
• Axios
• प्रतिक्रिया-Axios
• उपयोग-एचटीपी प्रतिक्रिया-अनुरोध और अधिक

मौजूदा प्रोजेक्ट में रिएक्ट जोड़ें - रिएक्ट में HTTP कॉल करने के लिए Fetch का उपयोग करना

Fetch() एक ब्राउज़र-आधारित API है। आप HTTP कॉल करने के लिए इसका इस्तेमाल कर सकते हैं। आइए Fetch API के मानक सिंटैक्स पर एक नज़र डालें।

let response = fetch(

API_URL,

.... (some more options)

);

यहां, आप getNames नाम के एक फंक्शन को कॉल कर रहे हैं। यह डेटा लाता है। साथ ही, यह अन्य पैरामीटर प्राप्त करता है। पसंद करना:

• तरीका: यह आपको यह निर्धारित करने में मदद करता है कि किस प्रकार का HTTP कॉल है
• शीर्षलेख: यह आपको प्राधिकरण या सामग्री के लिए अनुरोध शीर्षलेख परिभाषित करने में सक्षम बनाता है
• मोड: मोड मोड, कॉर्स या नो-कोर के प्रकार को परिभाषित करता है
• मुख्य भाग: आप अनुरोध निकाय के रूप में सर्वर को अतिरिक्त डेटा भेजने के लिए इसका उपयोग कर सकते हैं

यहाँ Fetch in React का उपयोग करने का एक उदाहरण दिया गया है:

async getName(){

//With .then and .catch section

let response = await fetch("https://jsonplaceholders.com/users") .then(resposne => { return response.json(); this.setState({ names:response })}) .catch(error => { console.log(error); }); }

मौजूदा प्रोजेक्ट में रिएक्ट जोड़ने के टिप्स

एक घटक का पुन: उपयोग करें

हो सकता है कि आप किसी HTML पृष्ठ पर रिएक्ट घटकों को कई स्थानों पर प्रदर्शित करना चाहें। ऐसा करने के लिए, आपको इन चरणों का पालन करना होगा:

अपनी एचटीएमएल फाइल पर जाएं। फिर इन पंक्तियों को जोड़ें:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Add React in One Minute</title> </head> <body> <h2>Add React in One Minute</h2> <p>This page demonstrates using React with no build tooling.</p> <p>React is loaded as a script tag.</p> <p> This is the first comment. <!-- We will put our React component inside this div. --> <div class="like_button_container" data-commentid="1"></div> </p> <p> This is the second comment. <!-- We will put our React component inside this div. --> <div class="like_button_container" data-commentid="2"></div> </p> <p> This is the third comment. <!-- We will put our React component inside this div. --> <div class="like_button_container" data-commentid="3"></div> </p> <!-- Load React. --> <!-- Note: when deploying, replace "development.js" with "production.min.js". --> <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> <!-- Load our React component. --> <script src="like_button.js"></script> </body> </html>

अपनी जावास्क्रिप्ट फ़ाइल पर जाएँ। यह कोड डालें:

'use strict'; const e = React.createElement; class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { return 'You liked comment number ' + this.props.commentID; } return e( 'button', { onClick: () => this.setState({ liked: true }) }, 'Like' ); } } // Find all DOM containers, and render Like buttons into them. document.querySelectorAll('.like_button_container') .forEach(domContainer => { // Read the comment ID from a data-* attribute. const commentID = parseInt(domContainer.dataset.commentid, 10); const root = ReactDOM.createRoot(domContainer); root.render( e(LikeButton, { commentID: commentID }) ); });

ध्यान रखें कि यह तरीका तब उपयोगी होता है जब पृष्ठ के हिस्से एक-दूसरे से अलग-थलग हों. लेकिन रिएक्ट कोड के अंदर, आपको घटक संरचना का उपयोग करना चाहिए। क्‍योंकि इसे इस्‍तेमाल करना ज्‍यादा आसान है।

उत्पादन के लिए जावास्क्रिप्ट को छोटा करें

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

क्या आपने पहले ही अपनी एप्लिकेशन स्क्रिप्ट को कम कर दिया है? क्या आपने यह सुनिश्चित किया है कि परिनियोजित HTML रिएक्ट के उन संस्करणों को लोड करता है जिनके अंत में production.min.js फ़ाइल है? यदि यह हो गया है, तो आपकी साइट प्रोडक्शन के लिए तैयार है।

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>

यदि आपके पास अपनी स्क्रिप्ट के लिए कोई छोटा करने का चरण नहीं है, तो आप इन चरणों का पालन करके इसे सेट अप कर सकते हैं:

सबसे पहले, आपको Node.js इंस्टॉल करना होगा

फिर अपने प्रोजेक्ट फ़ोल्डर में निम्न कमांड चलाएँ:

npm init -y

अगला, यह कमांड चलाएँ:

npm install terser

अंत में, फ़ाइल को छोटा करने का समय आ गया है। यदि आप एक फ़ाइल को छोटा करना चाहते हैं, जिसे like_button.js कहा जाता है, तो बस इस कमांड को टर्मिनल में चलाएँ:

npx terser -c -m -o like_button.min.js -- like_button.js

आप like_button.min.js नामक एक नई फ़ाइल का निर्माण देखेंगे। इसमें सभी न्यूनतम कोड शामिल होंगे।

जल्दी से JSX आजमाएं

आप अपने पेज पर निम्न <script> टैग जोड़कर अपने प्रोजेक्ट में JSX को जल्दी से आज़मा सकते हैं:

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

अब, आप किसी <script> टैग में JSX का उपयोग शुरू कर सकते हैं। आपको बस इसमें टाइप = "टेक्स्ट / बेबेल" विशेषता जोड़ने की जरूरत है।

यहाँ JSX के साथ HTML फ़ाइल का एक उदाहरण दिया गया है:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script src="https://unpkg.com/react@18/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <!-- Don't use this in production: --> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> function MyApp() { return <h1>Hello, world!</h1>; } const container = document.getElementById('root'); const root = ReactDOM.createRoot(container); root.render(<MyApp />); </script> <!-- Note: this page is a great way to try React but it's not suitable for production. It slowly compiles JSX with Babel in the browser and uses a large development build of React. Read this section for a production-ready setup with JSX: https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project In a larger project, you can use an integrated toolchain that includes JSX instead: https://reactjs.org/docs/create-a-new-react-app.html You can also use React without JSX, in which case you can remove Babel: https://reactjs.org/docs/react-without-jsx.html --> </body> </html>

पेश है फाइलस्टैक का रिएक्ट एसडीके

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

मैं अपने आवेदन में फाइलस्टैक के रिएक्ट एसडीके का उपयोग कैसे कर सकता हूं?

सबसे पहले, आपको इस कमांड के साथ फाइलस्टैक का रिएक्ट एसडीके इंस्टॉल करना होगा:

npm install filestack-react

इसके बाद, आप अपने ऐप में फाइलस्टैक-रिएक्शन डाल सकते हैं।

import { PickerOverlay } from 'filestack-react'; <PickerOverlay apikey={YOUR_API_KEY} onSuccess={(res) => console.log(res)} onUploadDone={(res) => console.log(res)} />

आप इसे आसानी से विभिन्न कार्यों को जोड़ने के लिए उपयोग कर सकते हैं। उदाहरण के लिए, आप इस लाइन का उपयोग करके एक मूल ड्रॉप पेन पिकर प्रस्तुत कर सकते हैं:

<PickerDropPane apikey='YOUR_APIKEY'/>

रिएक्ट में फ़ाइल अपलोडिंग को आसानी से सक्षम करने के लिए आप फाइलस्टैक का उपयोग कर सकते हैं। आप विवरण यहीं पा सकते हैं।

निष्कर्ष

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

मौजूदा परियोजना में प्रतिक्रिया जोड़ें - अक्सर पूछे जाने वाले प्रश्न

एक प्रतिक्रिया घटक क्या है?

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

मैं एनपीएक्स के साथ प्रतिक्रिया ऐप कैसे बना सकता हूं?

आप इस आदेश का उपयोग करके npx के साथ रिएक्शन ऐप बना सकते हैं: "npx क्रिएट रिएक्शन ऐप"।

कोडिंग में रिएक्ट क्या है?

प्रतिक्रिया एक कुशल और लचीली जावास्क्रिप्ट लाइब्रेरी है। यह आपको "घटक" कहे जाने वाले कोड के छोटे और पृथक टुकड़ों का उपयोग करके आसानी से जटिल उपयोगकर्ता इंटरफ़ेस बनाने में सक्षम बनाता है।

आज ही फाइलस्टैक के साथ नि:शुल्क साइन अप करें और अपने वेब एप्लिकेशन के लिए सर्वश्रेष्ठ फाइल अपलोडिंग समाधान का अनुभव लें।