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

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

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

React कोड की पहली पंक्ति लिखने से पहले, यह जानना उपयोगी होगा कि यह लाइब्रेरी सामान्य लाइब्रेरी से किस प्रकार भिन्न है। Javaस्क्रिप्ट। अगला भाग इसकी मुख्य विशेषताओं के बारे में विस्तार से बताता है।

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

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

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

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

Javaस्क्रिप्ट अभिव्यक्तियाँ: JSX फ़ाइलों में JS अभिव्यक्तियों का उपयोग कर्ली ब्रैकेट (उदाहरण के लिए {}) का उपयोग करके किया जा सकता है।

ReactJS के लाभ

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

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

ReactJS के नुकसान

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

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

सभी फायदे और नुकसानों को समझने के बाद, आप React को सेटअप करने के लिए तैयार हैं। इसे आज़माने का सबसे तेज़ तरीका CDN से सीधे उपयोग करना है, जिसके बारे में हम पहले चर्चा करेंगे; इसके बाद वास्तविक प्रोजेक्ट्स के लिए npm-आधारित सेटअप के बारे में बताया जाएगा।

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

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

सीडीएन लिंक प्राप्त करने के लिए पुरानी रिएक्ट डॉक्यूमेंटेशन साइट पर जाएं, उदाहरण के लिए, https://legacy.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>

बदलें संस्करण कृपया react.development.js और react-dom.development.js दोनों के लिए इच्छित React संस्करण का चयन करें। इस पृष्ठ पर हम संस्करण 16 का उपयोग कर रहे हैं, इसलिए नीचे दिए गए उदाहरण बिना किसी बदलाव के चलेंगे।

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

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

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

यहां सीडीएन फाइलों और बेबलजेएस स्क्रिप्ट का उपयोग करके काम करने वाला रिएक्टजेएस उदाहरण दिया गया है।

<!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 फ़ाइलों के साथ इसकी कार्यप्रणाली देखते हैं। बेबल स्क्रिप्ट का सीधे उपयोग करना उचित नहीं है, और नए उपयोगकर्ताओं को अभी इसका उपयोग केवल ReactJS सीखने के लिए ही करना चाहिए। उत्पादन में, आपको npm पैकेज का उपयोग करके React इंस्टॉल करना होगा।

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

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

Node.js इंस्टॉल करने के बाद, एक फ़ोल्डर बनाएं रिएक्टप्रोज/.

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

फोल्डर संरचना कुछ इस तरह दिखेगी:

reactproj\
package.json

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

यहां ReactJS के लिए पैकेजों की सूची दी गई है। हमने React को संस्करण 16 पर पिन किया है, इसलिए ReactDOM.render इस पृष्ठ पर दिए गए उदाहरण ठीक उसी प्रकार चलते हैं जैसे दिखाए गए हैं:

npm install react@16 --save
npm install react-dom@16 --save
npm install react-scripts --save

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

एक फोल्डर बनाएं src / जहां सारा JS कोड रखा जाएगा। ReactJS प्रोजेक्ट का सारा कोड src/ फोल्डर में उपलब्ध होगा। index.js नाम की एक फाइल बनाएं और उसमें 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')
);

हमने ReactJS के लिए बेसिक कोड लिख लिया है। हम अगले अध्याय में इसके विस्तृत विवरण को समझेंगे। हम प्रदर्शित करना चाहते हैं नमस्कार, Guru99 ट्यूटोरियलऔर यही मान "root" आईडी वाले DOM एलिमेंट को दिया जाता है। इसे 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>

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

 "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",
  "dependencies": {
    "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

यह ब्राउज़र को खोलेगा URL 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>

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

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

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

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

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

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

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

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

ReactDOM.render(

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

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

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

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

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

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

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

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

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

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

npm run start

जब आप उपरोक्त कमांड चलाएंगे, तो यह फ़ाइलों को कंपाइल करेगा और किसी भी त्रुटि की सूचना देगा। यदि सब कुछ ठीक रहा, तो यह ब्राउज़र खोलेगा और पेज को चलाएगा। http://localhost:3000/

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

C:\reactproj>npm run start

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

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

Vite के साथ React को कैसे सेट अप करें (आधुनिक दृष्टिकोण)

ऊपर दिया गया रिएक्ट-स्क्रिप्ट सेटअप क्रिएट रिएक्ट ऐप (सीआरए) से लिया गया है, जो कई वर्षों तक मानक स्टार्टर रहा। रिएक्ट टीम ने फरवरी 2025 में क्रिएट रिएक्ट ऐप को आधिकारिक तौर पर अप्रचलित घोषित कर दिया, इसलिए नए प्रोजेक्ट्स को इसके बजाय एक आधुनिक बिल्ड टूल का उपयोग करना चाहिए। आज सबसे लोकप्रिय विकल्प यह है: रहता हैजो तेजी से शुरू होता है और छोटे निर्माण करता है।

Vite का उपयोग करके एक नया React प्रोजेक्ट बनाने का तरीका यहाँ दिया गया है:

चरण 1) अपने टर्मिनल में स्कैफोल्डिंग कमांड चलाएँ:

npm create vite@latest my-react-app -- --template react

चरण 2) उस फोल्डर में जाएं और आवश्यक शर्तें इंस्टॉल करें:

cd my-react-app
npm install

चरण 3) डेवलपमेंट सर्वर शुरू करें:

npm run dev

Vite ऐप को निम्नलिखित स्थान पर उपलब्ध कराता है: http://localhost:5173/ यह डिफ़ॉल्ट रूप से सक्रिय रहता है और फ़ाइल सहेजने पर तुरंत पुनः लोड हो जाता है।

इस पृष्ठ पर पुराने सेटअप से मुख्य अंतर:

• प्रविष्टि फ़ाइल है src/main.jsx src/index.js के बजाय।
• यह नवीनतम रिएक्ट को स्थापित करता है, जो उपयोग करता है रूट बनाएँ ReactDOM.render के बजाय।
• index.html फ़ाइल प्रोजेक्ट के रूट फ़ोल्डर में स्थित है, न कि public/ फ़ोल्डर में।
• बिल्ड का उत्पादन इसके साथ किया जाता है npm run build dist/ फ़ोल्डर में।

राउटिंग और सर्वर रेंडरिंग जैसी फुल-स्टैक आवश्यकताओं के लिए, रिएक्ट टीम निम्नलिखित जैसे फ्रेमवर्क की भी अनुशंसा करती है। Next.jsनीचे दिए गए अध्यायों में आप जो कुछ भी सीखेंगे — JSX, कंपोनेंट्स, स्टेट और प्रॉप्स — वह सब Vite या Next.js प्रोजेक्ट में बिना किसी बदलाव के लागू होता है।

JSX क्या है?

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

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

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

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

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

React के मामले में, यह हमें HTML का उपयोग करने की अनुमति देता है और Javaस्क्रिप्ट को उसी फाइल में रखें और DOM में होने वाले स्टेट परिवर्तनों को कुशलतापूर्वक संभालें।

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')
);

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

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 में test.jsx फ़ाइल का उपयोग करेंगे। हम चाहते हैं कि h1टैग index.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 में घटक क्या हैं?

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

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

टेस्ट.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;

घटक नमस्ते इसका उपयोग एचटीएमएल टैग के रूप में किया जाता है, यानी , जिसे सौंपा गया है हेलो_कंप यह एक वेरिएबल है, और इसे एक्सपोर्ट का उपयोग करके एक्सपोर्ट किया जाता है।

आइए अब इस कंपोनेंट को 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')
);

Hello कंपोनेंट का उपयोग HTML टैग के रूप में किया जाता है, यानी, .

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

क्लास कंपोनेंट्स बनाम फंक्शन कंपोनेंट्स और हुक्स

अब आपने कंपोनेंट लिखने के दोनों तरीके देख लिए हैं, तो आपको कौन सा तरीका इस्तेमाल करना चाहिए? यह पेज क्लास कंपोनेंट के बारे में बताता है क्योंकि ये स्टेट और लाइफसाइकिल की अवधारणाओं को स्पष्ट करते हैं, जो शुरुआती लोगों के लिए उपयोगी है और पुराने कोडबेस में भी मौजूद है। हालांकि, React 16.8 में हुक्स के आने के बाद से, फंक्शन कंपोनेंट भी स्टेट को संभाल सकते हैं, और सभी नए कोड के लिए यही अनुशंसित तरीका है।

पहलू	क्लास कंपोनेंट	हुक्स के साथ फंक्शन कंपोनेंट
राज्य	this.state और this.setState()	useState() हुक
जीवन चक्र	componentDidMount, componentDidUpdate, componentWillUnmount	useEffect() हुक तीनों को कवर करता है
वाक्य - विन्यास	और भी अधिक मानक कोड (कंस्ट्रक्टर, बाइंड, दिस)	संक्षिप्त, यह कीवर्ड नहीं
स्थिति	समर्थित, विरासत शैली	नए कोड के लिए अनुशंसित

इस पेज से स्टेट का उदाहरण यहां दिया गया है, जिसे useState हुक का उपयोग करके दोबारा लिखा गया है:

import React, { useState } from 'react';

function Hello() {
  const [msg] = useState("Hello, from Guru99 Tutorials!");
  return <h1>{msg}</h1>;
}
export default Hello;

दोनों संस्करण एक ही आउटपुट देते हैं। नीचे दिए गए अध्यायों में प्रयुक्त क्लास सिंटैक्स सीखें, फिर प्रत्येक उदाहरण को हुक्स में परिवर्तित करने का अभ्यास करें।

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

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

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

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

टेस्ट.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 को चरण दर चरण सीखें

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

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

यहां प्रत्येक चरण का विस्तृत विवरण दिया गया है।

ReactJS में एक कंपोनेंट के निम्नलिखित चरण होते हैं:

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

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

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

• render(): यह विधि आपके द्वारा बनाए गए सभी घटकों के लिए उपलब्ध है। यह HTML नोड लौटाती है।
• componentDidMount(): यह फ़ंक्शन कंपोनेंट को DOM में जोड़ने के तुरंत बाद कॉल किया जाता है।

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

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

• shouldComponentUpdate(): पुनः रेंडरिंग से पहले कॉल किया जाता है; यह आपको यह तय करने देता है कि घटक को अपडेट किया जाना चाहिए या नहीं। true लौटाने पर घटक पुनः रेंडर हो जाता है।
• componentDidUpdate(): कंपोनेंट अपडेट होने के बाद कॉल किया जाता है।

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

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

• componentWillUnmount(): कंपोनेंट को हटाने या नष्ट करने से ठीक पहले कॉल किया जाता है।

जीवन चक्र विधियों का कार्यशील उदाहरण

यहां एक कार्यशील उदाहरण दिया गया है जो प्रत्येक चरण में उपयोग किए जाने वाले तरीकों को दर्शाता है।

उदाहरण: 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 /> और <select /> की अपनी-अपनी स्थिति होती है और उपयोगकर्ता के साथ इंटरैक्ट करने पर setState() विधि का उपयोग करके उन्हें अपडेट करने की आवश्यकता होती है।

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

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

फॉर्म.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;

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

हमने टेक्स्टबॉक्स और सबमिट बटन पर 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) टेक्स्टबॉक्स में अपना नाम दर्ज करें:

चरण 2) सबमिट बटन पर क्लिक करें:

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

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

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

इवेंट.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;

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

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

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 के साथ कार्य करना

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

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 फ़ाइल बनाते हैं। इसके लिए, 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>
  </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')
);

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

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

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

ReactDOM.render को createRoot से क्यों बदला गया?

इस पेज पर दिए गए सभी उदाहरण ऐप को ReactDOM.render के साथ माउंट करते हैं, जो React 16 और 17 के लिए सही है, ये वही वर्शन हैं जिन्हें यह कोर्स लक्षित करता है। मार्च 2022 में जारी React 18 ने इस एंट्री पॉइंट को createRoot API से बदल दिया, और React 19 ने ReactDOM.render को पूरी तरह से हटा दिया। इसका कारण कॉन्करेंसी है: createRoot React को एक ही समय में UI के कई वर्शन तैयार करने, कम प्राथमिकता वाले रेंडरिंग को रोकने और ty को बनाए रखने में सक्षम बनाता है।ping और एनिमेशन सुचारू रूप से चलते हैं। ऑटोमैटिक बैचिंग, ट्रांज़िशन का उपयोग और सस्पेंस-आधारित स्ट्रीमिंग जैसी सभी सुविधाएं इसी पर निर्भर करती हैं।

इस पूरे पेज पर इस्तेमाल की गई index.js फ़ाइल का आधुनिक रूप कुछ इस तरह दिखता है:

import { createRoot } from 'react-dom/client';

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

आपने यहाँ जो कुछ भी सीखा है — कंपोनेंट्स, JSX, स्टेट, प्रॉप्स और इवेंट्स — वह एंट्री पॉइंट पर इस एक लाइन के बदलाव के बाद भी उसी तरह काम करता है। इस तरह के वर्ज़न अंतर अक्सर सामने आते हैं। रिएक्ट जेएस साक्षात्कार प्रश्नइसलिए दोनों एपीआई को समझना फायदेमंद है।

अक्सर पूछे जाने वाले प्रश्न

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