शुरुआती लोगों के लिए ReactJS ट्यूटोरियल

रिएक्टजेएस क्या है?

ReactJS एक ओपन-सोर्स फ्रंट-एंड है Javaउपयोगकर्ता इंटरफेस निर्माण के लिए स्क्रिप्ट लाइब्रेरी. ReactJS फेसबुक और व्यक्तिगत डेवलपर्स और कंपनियों के एक समुदाय द्वारा इसका रखरखाव किया जाता है। इसका व्यापक रूप से एकल-पृष्ठ वेबसाइट और मोबाइल एप्लिकेशन बनाने में आधार के रूप में उपयोग किया जाता है। इसका उपयोग करना बहुत आसान है, और यह उपयोगकर्ताओं को पुन: प्रयोज्य UI घटक बनाने की अनुमति देता है।

ReactJS की विशेषताएं

जेएसएक्स : JSX जावास्क्रिप्ट का एक एक्सटेंशन है। हालाँकि रिएक्ट में JSX का उपयोग करना अनिवार्य नहीं है, लेकिन यह अच्छी सुविधाओं में से एक है और उपयोग में आसान है।

कॉम्पोनेंट्स : घटक शुद्ध जावास्क्रिप्ट फ़ंक्शन की तरह होते हैं जो तर्क को पुनः उपयोग करने योग्य स्वतंत्र कोड में विभाजित करके कोड को आसान बनाने में मदद करते हैं। हम घटकों को फ़ंक्शन के रूप में और घटकों को कक्षाओं के रूप में उपयोग कर सकते हैं। घटकों में एक स्थिति, प्रॉप्स भी होती है जो जीवन को आसान बनाती है। एक क्लास के अंदर, प्रत्येक प्रॉप्स की स्थिति को बनाए रखा जाता है।

आभासी डोम: रिएक्ट एक वर्चुअल डोम बनाता है, यानी इन-मेमोरी डेटा-स्ट्रक्चर कैश। DOM के केवल अंतिम परिवर्तन बाद में ब्राउज़र DOM में अपडेट किए गए हैं।

Javascript भाव: JS अभिव्यक्तियों का उपयोग jsx फ़ाइलों में कर्ली ब्रैकेट्स का उपयोग करके किया जा सकता है, उदाहरण के लिए {}.

ReactJS के लाभ

ReactJS का उपयोग करने के महत्वपूर्ण पक्ष/लाभ इस प्रकार हैं:

ReactJS वर्चुअल डोम का उपयोग करता है जो इन-मेमोरी डेटा-स्ट्रक्चर कैश का उपयोग करता है, और ब्राउज़र डोम में केवल अंतिम परिवर्तन अपडेट किए जाते हैं। इससे ऐप तेज़ हो जाता है।
आप रिएक्ट कॉम्पोनेंट फीचर का उपयोग करके अपनी पसंद के कॉम्पोनेंट बना सकते हैं। कॉम्पोनेंट का दोबारा इस्तेमाल किया जा सकता है और यह कोड रखरखाव में भी सहायक है।
Reactjs एक ओपन-सोर्स जावास्क्रिप्ट लाइब्रेरी है, इसलिए इसे शुरू करना आसान है।
ReactJS बहुत कम समय में बहुत लोकप्रिय हो गया है और इसे Facebook और Instagram द्वारा संचालित किया जाता है। इसका उपयोग Apple जैसी कई प्रसिद्ध कंपनियों द्वारा किया जाता है। Netflix, आदि
फेसबुक ReactJS लाइब्रेरी का रखरखाव करता है, इसलिए इसका रखरखाव अच्छी तरह से किया जाता है और इसे अद्यतन रखा जाता है।
ReactJS का उपयोग डेस्कटॉप और मोबाइल ऐप दोनों के लिए समृद्ध UI विकसित करने के लिए किया जा सकता है।
डिबग करना और परीक्षण करना आसान है क्योंकि अधिकांश कोडिंग की जाती है Javascript .. HTML के बजाय..

ReactJS के नुकसान

ReactJS का उपयोग करने के नुकसान इस प्रकार हैं:

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

CDN से ReactJS का उपयोग करना

रिएक्ट के साथ काम करना शुरू करने के लिए, हमें सबसे पहले रिएक्टजेएस इंस्टॉल करना होगा। आप CDN जावास्क्रिप्ट फ़ाइलों का उपयोग करके आसानी से रिएक्टजेएस का उपयोग शुरू कर सकते हैं, जैसा कि नीचे दिखाया गया है।

CDN लिंक प्राप्त करने के लिए reactjs की आधिकारिक साइट पर जाएं, अर्थात, https://reactjs.org/docs/cdn-links.html और आपको निम्नलिखित छवि को समझाने के लिए आवश्यक फ़ाइलें मिल जाएंगी।

देव के लिए

<script crossorigin src="https://unpkg.com/react@version/umd/react.development.js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.development.js"></script>

उत्पाद के लिए

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

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

यदि आप CDN फ़ाइलों का उपयोग करने की योजना बना रहे हैं, तो क्रॉस-ओरिजिन विशेषता को बनाए रखना सुनिश्चित करें, ताकि क्रॉस-डोमेन समस्याओं से बचा जा सके। Reactjs कोड को सीधे ब्राउज़र में निष्पादित नहीं किया जा सकता है और ब्राउज़र में निष्पादित करने से पहले इसे Babel का उपयोग करके जावास्क्रिप्ट में ट्रांसपायर किया जाना चाहिए।

यहां BabelJS स्क्रिप्ट दी गई है जिसका उपयोग किया जा सकता है:

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

यहां cdn फ़ाइलों और babeljs स्क्रिप्ट का उपयोग करके कार्यशील ReactJS उदाहरण दिया गया है।

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>   
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body> 
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, from Guru99 Tutorials!</h1>,
        document.getElementById('app')
      );
   </script>   
  </body>
</html>

आउटपुट:

हम अगले अध्याय में कोड के विवरण में जाएंगे, आइए यहां CDN फ़ाइलों के साथ काम करना देखें। ऐसा कहा जाता है कि सीधे बेबल स्क्रिप्ट का उपयोग करना एक अच्छा अभ्यास नहीं है, और नए लोग अभी के लिए रिएक्टजेएस सीखने के लिए इसका उपयोग कर सकते हैं। उत्पादन में, आपको npm पैकेज का उपयोग करके रिएक्ट इंस्टॉल करना होगा।

एनपीएम पैकेज का उपयोग करना

सुनिश्चित करें कि आपके पास nodejs इंस्टॉल है। यदि इंस्टॉल नहीं है, तो nodejs के लिए इस ट्यूटोरियल को देखें (https://www.guru99.com/node-js-tutorial.html) स्थापना.

एक बार जब आप nodejs स्थापित कर लें, तो एक फ़ोल्डर बनाएं रिएक्टप्रोज/.

प्रोजेक्ट सेटअप शुरू करने के लिए, कमांड चलाएँ एनपीएम init.

फ़ोल्डर संरचना इस प्रकार दिखाई देगी:

reactproj\
package.json

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

रिएक्टजेएस के लिए पैकेजों की सूची यहां दी गई है:

npm install react --save-dev
npm install react-dom --save-dev
npm install react-scripts --save-dev

कमांड प्रॉम्प्ट खोलें और reactproj/ फ़ोल्डर के अंदर उपरोक्त कमांड चलाएँ।

एक फोल्डर बनाएं src / जहाँ सारा js कोड उस फ़ोल्डर में आएगा। Reactjs प्रोजेक्ट के लिए सारा कोड src/ फ़ोल्डर में उपलब्ध होगा। एक फ़ाइल index.js बनाएँ और import react और react-dom जोड़ें, जैसा कि नीचे दिखाया गया है।

index.js

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

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

हमने रिएक्टजेएस के लिए मूल कोड लौटा दिया है। हम अगले अध्याय में इसके बारे में विस्तार से बताएंगे। हम प्रदर्शित करना चाहते हैं नमस्कार, गुरु99 ट्यूटोरियल्स से और यही आईडी “रूट” वाले डोम तत्व को दिया गया है। इसे index.html फ़ाइल से लिया गया है, जो कि प्रारंभ फ़ाइल है, जैसा कि नीचे दिखाया गया है।

एक फ़ोल्डर public/ बनाएं और उसमें index.html जोड़ें जैसा कि नीचे दिखाया गया है

सूचकांक

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
   </body>
</html>

पैकेज रिएक्ट-स्क्रिप्ट कोड को संकलित करने और HTML फ़ाइल यानी index.html को प्रदर्शित करने के लिए सर्वर को शुरू करने का ध्यान रखेगा। आपको package.json में कमांड जोड़ने की ज़रूरत है जो कोड को संकलित करने और सर्वर को शुरू करने के लिए रिएक्ट-स्क्रिप्ट का उपयोग करने का ध्यान रखेगा जैसा कि नीचे दिखाया गया है:

 "scripts": {
    "start": "react-scripts start" 
  }

सभी पैकेजों को स्थापित करने और उपरोक्त कमांड जोड़ने के बाद, अंतिम package.json इस प्रकार है:

पैकेज.json

{
  "name": "reactproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

Reactjs का परीक्षण शुरू करने के लिए कमांड चलाएँ

npm run start

C:\reactproj>npm run start		
> reactproj@1.0.0 start C:\reactproj		
> react-scripts start

यह यूआरएल के साथ ब्राउज़र खोलेगा http://localhost:3000/ के रूप में नीचे दिखाया गया है:

सार्वजनिक/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

हम अगले अध्यायों में भी जावास्क्रिप्ट फ़ाइलों को निष्पादित करने के लिए उसी प्रक्रिया का उपयोग करने जा रहे हैं। अपनी सभी js और .jsx फ़ाइल को src/ फ़ोल्डर में जोड़ें। फ़ाइल संरचना इस प्रकार होगी:

reatproj/
	 src/
	    index.js
	 node_modules/
	 public/
                index.html
	 package.json

अपना पहला रिएक्ट प्रोजेक्ट सेटअप कैसे बनाएं

इस ReactJS ट्यूटोरियल में पहले रिएक्ट एप्लिकेशन के साथ शुरुआत करने के लिए चरण-दर-चरण मार्गदर्शिका दी गई है।

चरण 1) प्रतिक्रिया पैकेज आयात करें.
1. ReactJS शुरू करने के लिए, हमें सबसे पहले रिएक्ट पैकेजों को निम्नानुसार आयात करना होगा।

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

2. फ़ाइल को src/ फ़ोल्डर में index.js के रूप में सहेजें

चरण 2) सरल कोड लिखें.
हम इस ट्यूटोरियल React JS में एक सरल कोड लिखेंगे, जिसमें हम संदेश प्रदर्शित करेंगे “नमस्ते, गुरु99 ट्यूटोरियल्स से!”

ReactDOM.render(

<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

रिएक्टडोम.रेंडर जोड़ देगा टैग को root आईडी वाले तत्व से जोड़ें। हमारे पास यह HTML फ़ाइल है:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

चरण 3) कोड संकलित करें.

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

फ़ोल्डर संरचना इस प्रकार है:

reactproj/
     node_modules/
     src/
       index.js
     package.json
     public/
          index.html

हमने package.json में अंतिम फ़ाइल संकलित करने के लिए निम्नलिखित कमांड जोड़े हैं:

"scripts": {
    "start": "react-scripts start"
  },

अंतिम फ़ाइल संकलित करने के लिए निम्नलिखित आदेश चलाएँ:

npm run start

जब आप उपरोक्त आदेश चलाते हैं, तो यह फ़ाइलों को संकलित करेगा और यदि कोई त्रुटि हो तो आपको सूचित करेगा, यदि सब ठीक दिखता है, तो यह ब्राउज़र खोलेगा और index.html फ़ाइल को चलाएगा http://localhost:3000/index.html

आदेश: npm रन प्रारंभ:

C:\reactproj>npm run start

> reactproj@1.0.0 start C:\reactproj
> react-scripts start

चरण 4) आउटपुट की जाँच करें.
URL http://localhost:3000 कोड संकलित होने के बाद यह ब्राउज़र में खुलेगा जैसा कि नीचे दिखाया गया है:

JSX क्या है?

JSX जावास्क्रिप्ट का एक एक्सटेंशन है। यह एक टेम्पलेट स्क्रिप्ट है जहाँ आपको HTML और का उपयोग करने की शक्ति मिलेगी Javascript एक साथ.

यहाँ JSX कोड का एक सरल उदाहरण दिया गया है।

const h1tag = "<h1>Hello, from Guru99 Tutorials!</h1>";

हमें React में JSX की आवश्यकता क्यों है?

यूआई के लिए, हमें HTML की आवश्यकता होती है, और डोम में प्रत्येक तत्व को संभालने के लिए इवेंट, स्थिति परिवर्तन आदि की आवश्यकता होगी।

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

JSX में अभिव्यक्तियाँ

JSX में अभिव्यक्तियों का उपयोग करने का एक सरल उदाहरण यहां दिया गया है।

पहले ReactJS उदाहरणों में, हमने कुछ इस तरह लिखा था:

index.js

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

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

अब हम एक्सप्रेशन जोड़ने के लिए ऊपर दिए गए कोड को बदलेंगे। एक्सप्रेशन का उपयोग कर्ली ब्रैकेट {} के अंदर किया जाता है, और रन टाइम के दौरान उनका विस्तार किया जाता है। रिएक्ट में एक्सप्रेशन जावास्क्रिप्ट एक्सप्रेशन के समान ही होते हैं।

index.js

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

const display = "Hello, from Guru99 Tutorials!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

आइये अब इसका परीक्षण ब्राउज़र में करें।

आप देख सकते हैं कि {display} एक्सप्रेशन को प्रतिस्थापित नहीं किया गया है। जब .js फ़ाइल के अंदर एक्सप्रेशन का उपयोग किया जाता है, तो React को पता नहीं होता कि क्या करना है।

आइए अब परिवर्तन करें और एक .jsx फ़ाइल बनाएं, जैसा कि नीचे दिखाया गया है:

टेस्ट.jsx

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

const display = "Hello, to Guru99 Tutorials";
const h1tag =<h1>{display}</h1>;
export default h1tag;

हमने आवश्यक कोड जोड़ दिया है और index.js में text.jsx फ़ाइल का उपयोग करेंगे। हम चाहते हैं h1टैग script.js के अंदर उपयोग किया जाने वाला चर, इसलिए इसे test.jsx में ऊपर दिखाए अनुसार निर्यात किया जाता है

index.js में संशोधित कोड यहां दिया गया है

import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

index.js में test.jsx का उपयोग करने के लिए हमें पहले इसे आयात करना होगा जैसा कि नीचे दिखाया गया है:

import h1tag from './test.jsx';

अब हम ReactDOM.render में h1tag का उपयोग कर सकते हैं जैसा कि नीचे दिखाया गया है:

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

जब हम इसे ब्राउज़र में जाँचते हैं तो आउटपुट इस प्रकार है:

ReactJS में घटक क्या हैं?

घटक शुद्ध जावास्क्रिप्ट फ़ंक्शन की तरह होते हैं जो तर्क को पुनः प्रयोज्य स्वतंत्र कोड में विभाजित करके कोड को आसान बनाने में मदद करते हैं।

घटक के रूप में कार्य

टेस्ट.jsx

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
} 
const Hello_comp = <Hello />;
export default Hello_comp;

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

const Hello_comp = <Hello />;
export default Hello_comp;

घटक नमस्ते एक HTML टैग के रूप में प्रयोग किया जाता है, अर्थात, और सौंपा गया हेलो_कंप चर और उसी का उपयोग कर निर्यात किया जाता है export.

आइए अब इस घटक का उपयोग index.js फ़ाइल में करें जैसा कि नीचे दिखाया गया है:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

ब्राउज़र में आउटपुट इस प्रकार है:

घटक के रूप में वर्ग

यहाँ एक ReactJS उदाहरण दिया गया है जो एक क्लास को घटक के रूप में उपयोग करता है।

टेस्ट.jsx

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

class Hello extends React. Component {
  render() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
  }
}
export default Hello;

हम index.js फ़ाइल में Hello घटक का उपयोग निम्नानुसार कर सकते हैं:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

घटक हैलो का उपयोग HTML टैग के रूप में किया जाता है, अर्थात, .

इसका परिणाम यहां दिया गया है।

ReactJS में स्टेट क्या है?

स्टेट एक जावास्क्रिप्ट ऑब्जेक्ट है जो प्रॉप्स के समान है जिसमें रिएक्टजेएस रेंडर के साथ उपयोग किए जाने वाले डेटा होते हैं। स्टेट डेटा एक निजी ऑब्जेक्ट है और इसका उपयोग क्लास के अंदर घटकों के भीतर किया जाता है।

राज्य का उदाहरण

यहां एक क्लास के अंदर स्टेट का उपयोग करने का एक कार्यशील उदाहरण दिया गया है।

टेस्ट.jsx

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

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       msg: "Hello, from Guru99 Tutorials!"
    }
  }
  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
export default Hello;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

जब हम ब्राउज़र में इसका परीक्षण करते हैं तो हमें यह मिलता है:

ReactJS में प्रॉप्स क्या हैं?

प्रॉप्स कॉम्पोनेंट के अंदर इस्तेमाल किए जाने वाले गुण हैं। वे वैश्विक ऑब्जेक्ट या वैरिएबल के रूप में कार्य करते हैं जिनका इस्तेमाल कॉम्पोनेंट के अंदर किया जा सकता है।

फ़ंक्शन घटक के लिए प्रॉप्स

यहां फ़ंक्शन घटक को प्रॉप्स पास करने का एक उदाहरण दिया गया है।

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

जैसा कि ऊपर दिखाया गया है, हमने जोड़ा है msg विशेषता घटक। इसे इस प्रकार एक्सेस किया जा सकता है रंगमंच की सामग्री हैलो फ़ंक्शन के अंदर, जो एक ऑब्जेक्ट है जिसमें होगा msg विशेषता विवरण, और उसी का उपयोग अभिव्यक्ति के रूप में किया जाता है।

index.js में घटक का उपयोग इस प्रकार किया जाता है:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

ब्राउज़र में आउटपुट इस प्रकार है:

क्लास घटक के लिए प्रॉप्स

किसी क्लास में प्रॉप्स तक पहुंचने के लिए हम निम्न प्रकार से कार्य कर सकते हैं:

टेस्ट.jsx

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

class Hello extends React.Component {
  render() {
    return <h1>{this.props.msg}</h1>;
  }
}
export default Hello;

RSI msg विशेषता index.js में घटक को इस प्रकार पास की जाती है:

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello msg="Hello, from Guru99 Tutorials!" />,
    document.getElementById('root')
);

ब्राउज़र में आउटपुट इस प्रकार है:

यह भी जांचें: - शुरुआती लोगों के लिए AngularJS ट्यूटोरियल: AngularJS को चरण दर चरण सीखें

एक घटक का जीवन चक्र

एक घटक जीवन चक्र को आरंभीकरण, माउंटिंग, अद्यतन और अनमाउंटिंग चरणों में विभाजित किया जाता है।

यहां प्रत्येक घटक के बारे में विस्तृत विवरण दिया गया है।

रिएक्टजेएस में एक घटक के निम्नलिखित चरण होते हैं:

आरंभीकरणयह घटक जीवन चक्र का पहला चरण है।

यहां प्रारंभिक स्तर पर डिफ़ॉल्ट प्रॉप्स और स्थिति होगी।

बढ़ते: इस चरण में, घटक डोम के अंदर रेंडर किया जाता है। हम माउंटिंग अवस्था में निम्नलिखित विधियों का उपयोग करते हैं।

componentsDidMount(): इसे तब भी बुलाया जाता है जब घटक को डोम में जोड़ा जाता है।

रेंडर(): आपके पास बनाए गए सभी घटकों के लिए यह विधि है। यह Html नोड लौटाता है।

अपडेट: इस स्थिति में, डोम को उपयोगकर्ता द्वारा इंटरैक्ट किया जाता है और अपडेट किया जाता है। उदाहरण के लिए, आप टेक्स्टबॉक्स में कुछ दर्ज करते हैं, इसलिए स्टेट प्रॉपर्टी अपडेट हो जाती हैं।

अद्यतन स्थिति में उपलब्ध विधियाँ निम्नलिखित हैं:

shouldComponentUpdate() : घटक अद्यतन होने पर कॉल किया जाता है.

componentsDidUpdate() : घटक अद्यतन होने के बाद.

अनमाउंटिंग: यह स्थिति तब सामने आती है जब घटक की आवश्यकता नहीं होती या उसे हटा दिया जाता है।

अनमाउंट अवस्था में उपलब्ध विधियाँ निम्नलिखित हैं:

घटक willUnmount(): घटक को हटाए जाने या नष्ट किए जाने पर बुलाया जाता है।

कार्यशील उदाहरण

यहां एक कार्यशील उदाहरण दिया गया है जो प्रत्येक अवस्था में बुलाई गई विधियों को दर्शाता है।

उदाहरण: complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }
  
  componentDidMount() {  
    console.log('Mounting State : calling method componentDidMount');
  }   
 
  shouldComponentUpdate() {  
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }  

  componentDidUpdate() {  
    console.log('Update  State : calling method componentDidUpdate')  
  }  
  componentWillUnmount() {  
    console.log('UnMounting State : calling method componentWillUnmount');
  }  

  render() {
    return (
      <div>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import COMP_LIFE from './complife.jsx';

ReactDOM.render(
    <COMP_LIFE />,
    document.getElementById('root')
);

जब आप ब्राउज़र में आउटपुट की जांच करते हैं

ब्राउज़र कंसोल में आपको मिलता है:

जब उपयोगकर्ता टेक्स्टबॉक्स में प्रवेश करता है:

कंसोल में निम्नलिखित संदेश प्रदर्शित होते हैं:

फॉर्म के साथ काम करना

Reactjs में Html इनपुट तत्व जैसे , और <select /> की अपनी स्थिति होती है और जब उपयोगकर्ता setState() विधि का उपयोग करके इंटरैक्ट करता है तो उसे अपडेट करने की आवश्यकता होती है।

इस अध्याय में, हम देखेंगे कि रिएक्टजेएस में फॉर्म के साथ कैसे काम किया जाए।

यहाँ एक कार्यशील उदाहरण दिया गया है:

फॉर्म.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

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

हमने टेक्स्टबॉक्स और सबमिट बटन पर onChange और onClick इवेंट का इस्तेमाल किया है। जब उपयोगकर्ता टेक्स्टबॉक्स के अंदर प्रवेश करता है तो onChange इवेंट को कॉल किया जाता है, और स्टेट ऑब्जेक्ट स्टेट के अंदर नाम फ़ील्ड को नीचे दिखाए अनुसार अपडेट किया जाता है:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';

ReactDOM.render(
    <Form />,
    document.getElementById('root')
);

ब्राउज़र में आउटपुट इस प्रकार है:

चरण 1) टेक्स्ट बॉक्स में अपना नाम दर्ज करें:

सबमिट बटन पर क्लिक करें

ReactJS में इवेंट्स के साथ काम करना

रिएक्टजेएस में इवेंट के साथ काम करना वैसा ही है जैसा आप जावास्क्रिप्ट में करते हैं। आप जावास्क्रिप्ट में इस्तेमाल किए जाने वाले सभी इवेंट हैंडलर का इस्तेमाल कर सकते हैं। जब उपयोगकर्ता किसी HTML एलिमेंट के साथ इंटरैक्ट करता है, तो स्टेट को अपडेट करने के लिए setState() विधि का इस्तेमाल किया जाता है।

यहाँ पर reactjs में इवेंट्स का उपयोग करने का एक कार्यशील उदाहरण दिया गया है।

इवेंट.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <div>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default EventTest;

हमने घटनाओं का उपयोग किया है परिवर्तन पर और क्लिक पर टेक्स्टबॉक्स और बटन पर। जब उपयोगकर्ता टेक्स्टबॉक्स के अंदर प्रवेश करता है परिवर्तन पर event को कॉल किया जाता है, और state ऑब्जेक्ट state के अंदर नाम फ़ील्ड को नीचे दिखाए अनुसार अपडेट किया जाता है:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';

ReactDOM.render(
    <EventTest />,
    document.getElementById('root')
);

ब्राउज़र में आउटपुट इस प्रकार है:

जब कोई उपयोगकर्ता नाम दर्ज करता है:

जब उपयोगकर्ता यहां क्लिक करें बटन पर क्लिक करता है:

ReactJS में इनलाइन CSS के साथ कार्य करना

Reactjs में इनलाइन CSS की कार्यप्रणाली को समझने के लिए एक कार्यशील उदाहरण पर नजर डालेंगे।

addstyle.jsx

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

const h1Style = {
    color: 'red'
};
  
function Hello(props) {
    return <h1 style={h1Style}>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

मैंने h1 टैग में color: 'red' शैली जोड़ दी है।

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

ब्राउज़र में आउटपुट इस प्रकार है:

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

ReactJS में बाहरी CSS के साथ कार्य करना

आइए एक बाहरी सीएसएस बनाएं, इसके लिए एक फ़ोल्डर css/ बनाएं और इसमें style.css जोड़ें।

style.css

.h1tag {
color:red;
}

style.css को अपनी index.html फ़ाइल में जोड़ें

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head> 
  <body>
    <div id = "root"></div>
    <script src = "out/script.min.js"></script>
  </body>
</html>

अब हम .jsx फ़ाइल में h1 टैग में क्लास जोड़ते हैं

addstyle.jsx

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

let classforh1 = 'h1tag';
  
function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

क्लासनाम विशेषता को क्लास विवरण दिया गया है। अब ब्राउज़र में परीक्षण करते हैं।

जब आप ब्राउज़र में h1 टैग का निरीक्षण करते हैं तो आपको यह दिखाई देता है:

आप देख सकते हैं कि class="h1tag" को h1 टैग में सफलतापूर्वक जोड़ दिया गया है।

सारांश

ReactJS एक ओपन-सोर्स फ्रंट-एंड है Javaयूजर इंटरफ़ेस बनाने के लिए स्क्रिप्ट लाइब्रेरी। इसका रखरखाव फेसबुक द्वारा किया जाता है और आज कई कंपनियां यूआई विकास के लिए इसका इस्तेमाल करती हैं।
ReactJS की मुख्य विशेषताओं में JSX, घटक (कार्यात्मक घटक और वर्ग-आधारित घटक), घटक का जीवन चक्र, घटक के लिए प्रॉप्स और स्थिति समर्थन, जावास्क्रिप्ट अभिव्यक्तियों के साथ काम करना शामिल है।
ReactJS का प्रोजेक्ट सेटअप CDN फ़ाइलों का उपयोग करके और प्रोजेक्ट बनाने के लिए npm पैकेजों का उपयोग करके समझाया गया है।
JSX जावास्क्रिप्ट का एक एक्सटेंशन है। यह एक टेम्पलेट स्क्रिप्ट है जहाँ आपको HTML और जावास्क्रिप्ट को एक साथ उपयोग करने की शक्ति मिलेगी।
घटक शुद्ध जावास्क्रिप्ट फ़ंक्शन की तरह होते हैं जो तर्क को पुनः प्रयोज्य स्वतंत्र कोड में विभाजित करके कोड को आसान बनाने में मदद करते हैं।
स्टेट एक जावास्क्रिप्ट ऑब्जेक्ट है जो प्रॉप्स के समान है जिसमें रिएक्टजेएस रेंडर के साथ उपयोग किए जाने वाले डेटा होते हैं। स्टेट डेटा एक निजी ऑब्जेक्ट है और इसका उपयोग क्लास के अंदर घटकों के भीतर किया जाता है।
प्रॉप्स किसी घटक के अंदर उपयोग किए जाने वाले गुण हैं।
एक घटक जीवन चक्र को आरंभीकरण, माउंटिंग, अद्यतन और अनमाउंटिंग चरणों में विभाजित किया जाता है।
Reactjs में HTML इनपुट तत्व जैसे , और <select /> की अपनी स्थिति होती है और जब उपयोगकर्ता setState() विधि का उपयोग करके इंटरैक्ट करता है तो उसे अपडेट करने की आवश्यकता होती है।
रिएक्टजेएस में इवेंट के साथ काम करना वैसा ही है जैसा आप जावास्क्रिप्ट में करते हैं। आप जावास्क्रिप्ट में इस्तेमाल किए जाने वाले सभी इवेंट हैंडलर का इस्तेमाल कर सकते हैं। जब उपयोगकर्ता किसी HTML एलिमेंट के साथ इंटरैक्ट करता है, तो स्टेट को अपडेट करने के लिए setState() विधि का इस्तेमाल किया जाता है।
ReactJS आपको जावास्क्रिप्ट अभिव्यक्ति का उपयोग करके बाहरी सीएसएस के साथ-साथ इनलाइन सीएसएस के साथ काम करने की अनुमति देता है।

यह भी जांचें: - शीर्ष 70 रिएक्ट साक्षात्कार प्रश्न और उत्तर (अपडेट)

रिएक्टजेएस क्या है?

ReactJS की विशेषताएं

ReactJS के लाभ

ReactJS के नुकसान

CDN से ReactJS का उपयोग करना

देव के लिए

उत्पाद के लिए

संबंधित आलेख

एनपीएम पैकेज का उपयोग करना

अपना पहला रिएक्ट प्रोजेक्ट सेटअप कैसे बनाएं

JSX क्या है?

हमें React में JSX की आवश्यकता क्यों है?

JSX में अभिव्यक्तियाँ

ReactJS में घटक क्या हैं?

घटक के रूप में कार्य

घटक के रूप में वर्ग

ReactJS में स्टेट क्या है?

राज्य का उदाहरण

ReactJS में प्रॉप्स क्या हैं?

फ़ंक्शन घटक के लिए प्रॉप्स

क्लास घटक के लिए प्रॉप्स

एक घटक का जीवन चक्र

कार्यशील उदाहरण

फॉर्म के साथ काम करना

ReactJS में इवेंट्स के साथ काम करना

ReactJS में इनलाइन CSS के साथ कार्य करना

ReactJS में बाहरी CSS के साथ कार्य करना

सारांश

न्यूज़लैटर के लिए साइन अप करें