S01L01 - React JS सेटअप करना

html


React.js के साथ शुरुआत: एक व्यापक शुरुआती मार्गदर्शिका
सामग्री सूची

परिचय
React.js क्यों चुनें?

React बनाम Angular बनाम Vue.js


अपना विकास वातावरण स्थापित करना

Node.js स्थापित करना
Visual Studio Code स्थापित करना


पहला React Application बनाना

Create React App का उपयोग करना
सामान्य त्रुटियों को सुलझाना


अपने React प्रोजेक्ट संरचना को समझना
अपने React Application को चलाना और एक्सप्लोर करना
निष्कर्ष
अतिरिक्त संसाधन


परिचय
React.js के साथ शुरुआत: एक व्यापक शुरुआती मार्गदर्शिका में आपका स्वागत है। फ्रंट-एंड विकास के लगातार विकसित हो रहे परिदृश्य में, सही तकनीक का चयन कुशल और स्केलेबल एप्लिकेशन बनाने के लिए महत्वपूर्ण है। यह eBook शुरुआती और उन डेवलपर्स के लिए एक विस्तृत, SEO-अनुकूलित मार्गदर्शिका प्रदान करने का उद्देश्य रखता है जिनके पास बुनियादी ज्ञान है और जो React.js में गहराई से उतरना चाहते हैं, जो उपयोगकर्ता इंटरफेस बनाने के लिए सबसे लोकप्रिय JavaScript लाइब्रेरी में से एक है।
React.js का अवलोकन
React.js, जिसे Facebook द्वारा विकसित और मेंटेन किया जाता है, ने अपनी कंपोनेंट-आधारित आर्किटेक्चर और वर्चुअल DOM के साथ फ्रंट-एंड विकास में क्रांति ला दी है। चाहे आप वेब एप्लिकेशन बनाने की योजना बना रहे हों या React Native के साथ मोबाइल विकास में आगे बढ़ना चाहते हों, React.js में महारत हासिल करना अवसरों की एक विस्तृत श्रृंखला खोलता है।
महत्व और उद्देश्य
यह मार्गदर्शिका आपको React.js के बुनियादी सिद्धांतों से ले कर इसकी लोकप्रियता को समझने, अपना विकास वातावरण स्थापित करने, पहला एप्लिकेशन बनाने और सामान्य चुनौतियों का नेविगेशन करने में मार्गदर्शन करेगी। इस eBook के अंत तक, आपके पास React.js यात्रा शुरू करने के लिए मजबूत आधार होगा।
React.js के लाभ और हानियां


लाभ
हानियां


लचीला और मॉड्यूलर: कंपोनेंट-आधारित आर्किटेक्चर पुन: प्रयोज्य कोड की अनुमति देता है।
सीखने में कठिनाई: JSX और state management की प्रारंभिक समझ चुनौतीपूर्ण हो सकती है।


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


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


SEO-फ्रेंडली: सर्वर-साइड रेंडरिंग क्षमताओं से SEO में सुधार होता है।
JSX एक बाधा के रूप में: HTML को JavaScript के साथ मिलाना कुछ डेवलपर्स के लिए अप्रिय हो सकता है।


React.js कब और कहाँ उपयोग करें
React.js एकल-पृष्ठ एप्लिकेशन (SPAs) के लिए गतिशील और प्रतिक्रियाशील उपयोगकर्ता इंटरफेस बनाने के लिए आदर्श है। यह वेब विकास में व्यापक रूप से उपयोग किया जाता है लेकिन React Native के माध्यम से मोबाइल ऐप विकास में इसकी बहुमुखी प्रतिभा तक बढ़ जाता है। चाहे आप एक सरल लैंडिंग पेज बना रहे हों या एक जटिल एंटरप्राइज एप्लिकेशन, React.js कुशल विकास के लिए आवश्यक उपकरण और लचीलापन प्रदान करता है।

React.js क्यों चुनें?
सही फ्रंट-एंड तकनीक का चयन आपके प्रोजेक्ट्स की सफलता के लिए महत्वपूर्ण है। React.js अपनी अनूठी विशेषताओं और व्यापक स्वीकृति के कारण अन्य फ्रेमवर्क और लाइब्रेरीज़ से अलग खड़ा है।
React बनाम Angular बनाम Vue.js
React.js, Angular और Vue.js के बीच के अंतर को समझना आपको यह निर्णय लेने में सहायता कर सकता है कि कौन सी तकनीक आपके प्रोजेक्ट की आवश्यकताओं के साथ सबसे अच्छा मेल खाती है।


विशेषता
React.js
Angular
Vue.js


प्रकार
Library
Framework
Framework


सीखने की दर
मध्यम
तीखा
नरम


समुदाय समर्थन
बड़ा
बड़ा
बढ़ता हुआ


प्रदर्शन
उच्च
उच्च
उच्च


लचीलापन
बहुत लचीला
रायप्रद
लचीला


सबसे अच्छा लिए
SPAs, मोबाइल एप्स
एंटरप्राइज एप्स
SPAs, क्रमिक अपनाना


लोकप्रियता और रुझान
Google Trends के अनुसार, React.js को Angular और Vue.js की तुलना में विश्वभर में काफी अधिक रुचि प्राप्त हो रही है। यह लोकप्रियता इसकी सीखने में आसानी, लचीलापन और मजबूत समुदाय समर्थन के कारण है, जो इसे शुरुआती और अनुभवी डेवलपर्स दोनों के लिए पसंदीदा विकल्प बनाता है।
अपनाने में आसानी
React.js को इसकी अपेक्षाकृत आसान सीखने की दर के लिए सराहा जाता है, जबकि यह Angular की तुलना में थोड़ा अधिक जटिल हो सकता है। इसकी मॉड्यूलर प्रकृति डेवलपर्स को React को धीरे-धीरे अपनाने की अनुमति देती है, जिससे इसे मौजूदा प्रोजेक्ट्स में बिना पूरी तरह से बदलें एकीकृत किया जा सकता है।

अपना विकास वातावरण स्थापित करना
React.js विकास में गहराई से उतरने से पहले, आवश्यक उपकरणों और सॉफ्टवेयर के साथ अपना विकास वातावरण सेट अप करना आवश्यक है।
Node.js स्थापित करना
Node.js एक JavaScript runtime है जो आपको सर्वर साइड पर JavaScript चलाने की अनुमति देता है। यह Node Package Manager (NPM) का उपयोग करके पैकेज और dependencies प्रबंधित करने के लिए महत्वपूर्ण है, जो React applications को चलाने और बनाने के लिए आवश्यक है।
Node.js स्थापित करने के चरण:

लाभ	हानियां
लचीला और मॉड्यूलर: कंपोनेंट-आधारित आर्किटेक्चर पुन: प्रयोज्य कोड की अनुमति देता है।	सीखने में कठिनाई: JSX और state management की प्रारंभिक समझ चुनौतीपूर्ण हो सकती है।
उच्च प्रदर्शन: वर्चुअल DOM कुशल रेंडरिंग सुनिश्चित करता है।	बार-बार अपडेट: नवीनतम परिवर्तनों के साथ बने रहना निरंतर सीखना आवश्यक बनाता है।
बड़ी समुदाय और इकोसिस्टम: विस्तृत लाइब्रेरीज़ और समुदाय समर्थन।	सिर्फ View लेयर: पूर्ण समाधान के लिए अन्य लाइब्रेरीज़ के साथ एकीकरण की आवश्यकता होती है।
SEO-फ्रेंडली: सर्वर-साइड रेंडरिंग क्षमताओं से SEO में सुधार होता है।	JSX एक बाधा के रूप में: HTML को JavaScript के साथ मिलाना कुछ डेवलपर्स के लिए अप्रिय हो सकता है।

विशेषता	React.js	Angular	Vue.js
प्रकार	Library	Framework	Framework
सीखने की दर	मध्यम	तीखा	नरम
समुदाय समर्थन	बड़ा	बड़ा	बढ़ता हुआ
प्रदर्शन	उच्च	उच्च	उच्च
लचीलापन	बहुत लचीला	रायप्रद	लचीला
सबसे अच्छा लिए	SPAs, मोबाइल एप्स	एंटरप्राइज एप्स	SPAs, क्रमिक अपनाना


इंस्टॉलर डाउनलोड करें:

आधिकारिक Node.js वेबसाइट पर जाएं और अपने ऑपरेटिंग सिस्टम के आधार पर उपयुक्त MSI विंडोज इंस्टॉलर डाउनलोड करें।

इंस्टॉलर चलाएं:
डाउनलोड की गई .msi फ़ाइल पर डबल-क्लिक करें जिससे इंस्टॉलेशन शुरू हो जाएगा।
स्क्रीन पर आने वाले निर्देशों का पालन करें: Next पर क्लिक करें, लाइसेंस समझौते को स्वीकार करें, और इंस्टॉलेशन के साथ आगे बढ़ें। आवश्यक टूल्स को इंस्टॉल करने का विकल्प सुनिश्चित करें।


इंस्टॉलेशन सत्यापित करें:

    



		
		
			
			
Java
			
			node -v
npm -v
			
				
					
				
					1
2
				
						node -v
npm -v
					
				
			
		


आपको Node.js और NPM के version नंबर दिखने चाहिए, जो सफल इंस्टॉलेशन की पुष्टि करता है।


Visual Studio Code स्थापित करना
Visual Studio Code (VS Code) एक शक्तिशाली, हल्का कोड एडिटर है जो विभिन्न प्रकार के एक्सटेंशनों का समर्थन करता है, जिससे यह React विकास के लिए आदर्श बन जाता है।
VS Code स्थापित करने के चरण:

VS Code डाउनलोड करें:

आधिकारिक VS Code वेबसाइट पर जाएं और अपने ऑपरेटिंग सिस्टम के लिए उपयुक्त इंस्टॉलर डाउनलोड करें।


इंस्टॉलर चलाएं:

डाउनलोड की गई इंस्टॉलर चलाएं और इंस्टॉलेशन निर्देशों का पालन करें।
आसान पहुँच के लिए VS Code को सिस्टम PATH में जोड़ने का विकल्प चुनें।


VS Code लॉन्च करें:

इंस्टॉलेशन के बाद, VS Code खोलें।
अपने विकास अनुभव को बेहतर बनाने के लिए ESLint, Prettier, और React Extension Pack जैसे आवश्यक प्लगइन्स इंस्टॉल करें।




पहला React Application बनाना
अपने विकास वातावरण को सेट अप करने के बाद, आप Create React App का उपयोग करके अपना पहला React application बनाने के लिए तैयार हैं, एक टूल जो प्रारंभिक प्रोजेक्ट संरचना सेट अप करता है।
Create React App का उपयोग करना
Create React App एक आधिकारिक रूप से समर्थित CLI टूल है जो एक मानकीकृत संरचना के साथ एक boilerplate React प्रोजेक्ट प्रदान करके सेटअप प्रक्रिया को सरल बनाता है।
React App बनाने के चरण:

VS Code में टर्मिनल खोलें:
VS Code में एकीकृत टर्मिनल खोलने के लिए Ctrl + ‘ दबाएं।


Create React App कमांड चलाएं:

    



		
		
			
			
Java
			
			npx create-react-app studyeasy-demo --version 5.0.1
			
				
					
				
					1
				
						npx create-react-app studyeasy-demo --version 5.0.1
					
				
			
		



npx सुनिश्चित करता है कि आप Create React App का नवीनतम संस्करण उपयोग कर रहे हैं।
studyeasy-demo आपके प्रोजेक्ट का नाम है।
--version 5.0.1 निर्दिष्ट करने से संगतता और स्थिरता सुनिश्चित होती है।

संभावित त्रुटियों को संभालना:
यदि आपको त्रुटि आ रही है कि npm फ़ोल्डर नहीं बनाया गया है, तो मैन्युअल रूप से फ़ोल्डर बनाएं:
Windows Explorer में निर्दिष्ट पथ पर जाएं।
npm नाम का नया फ़ोल्डर बनाएं।


प्रोजेक्ट निर्माण को अंतिम रूप देना:
किसी भी त्रुटियों को संबोधित करने के बाद Create React App कमांड को पुनः चलाएं। टूल प्रोजेक्ट को स्कैफोल्ड करेगा, आवश्यक dependencies स्थापित करेगा और प्रोजेक्ट संरचना सेट अप करेगा।


सामान्य त्रुटियों को सुलझाना
सेटअप के दौरान, आप निम्नलिखित सामान्य समस्याओं का सामना कर सकते हैं:

Node पहचाना नहीं गया:

सुनिश्चित करें कि Node.js स्थापित करने के बाद आपने अपने सिस्टम को पुनः आरंभ किया है।
टर्मिनल में node -v चलाकर इंस्टॉलेशन सत्यापित करें।


परमिशन संबंधित समस्याएं:

परमिशन-संबंधी त्रुटियों से बचने के लिए टर्मिनल को एडमिनिस्ट्रेटर के रूप में चलाएं।


नेटवर्क कनेक्टिविटी:

NPM को आवश्यक पैकेजों को फेच करने के लिए स्थिर इंटरनेट कनेक्शन सुनिश्चित करें।




अपने React प्रोजेक्ट संरचना को समझना
React app बनाने के बाद, प्रोजेक्ट संरचना को समझना कुशल विकास और रखरखाव के लिए महत्वपूर्ण है।
प्रोजेक्ट संरचना अवलोकन




		
		
			
			
Java
			
			studyeasy-demo/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package.json
├── package-lock.json
└── README.md
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
				
						studyeasy-demo/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package.json
├── package-lock.json
└── README.md
					
				
			
		


मुख्य निर्देशिकाएं और फ़ाइलें

node_modules/: प्रोजेक्ट के लिए आवश्यक सभी dependencies और पैकेजेस शामिल हैं।
public/: स्थिर फ़ाइलें जैसे index.html, इमेजेस, और अन्य assets जो Webpack द्वारा प्रोसेस नहीं की जातीं, रखती हैं।
src/: आपका React application का मूल, जहां आप अपने React कंपोनेंट्स, स्टाइल्स, और टेस्ट लिखेंगे।
package.json: प्रोजेक्ट dependencies और स्क्रिप्ट्स को सूचीबद्ध करता है जो एप्लिकेशन को बनाने और चलाने के लिए आवश्यक हैं।
.gitignore: Git version control द्वारा अनदेखा किए जाने वाले फ़ाइलों और निर्देशिकाओं को निर्दिष्ट करता है।
README.md: प्रोजेक्ट का अवलोकन और निर्देश प्रदान करता है।


अपने React Application को चलाना और एक्सप्लोर करना
प्रोजेक्ट सेटअप करने के बाद, application चलाने से आप अपने React एप्लिकेशन को एक्शन में देख सकते हैं और इसे अपनी आवश्यकताओं के अनुसार ढालना शुरू कर सकते हैं।
विकास सर्वर शुरू करना

प्रोजेक्ट डायरेक्टरी में नेविगेट करें:

    



		
		
			
			
Java
			
			cd studyeasy-demo
			
				
					
				
					1
				
						cd studyeasy-demo
					
				
			
		


  
एप्लिकेशन शुरू करें:

    



		
		
			
			
Java
			
			npm start
			
				
					
				
					1
				
						npm start
					
				
			
		



यह कमांड विकास सर्वर लॉन्च करता है।
अपने ब्राउज़र में http://localhost:3000 खोलें ताकि आप एप्लिकेशन देख सकें।



डिफ़ॉल्ट एप्लिकेशन एक्सप्लोर करना
चलाने पर, आप एक सरल React एप्लिकेशन देखेंगे जिसमें निम्नलिखित विशेषताएं हैं:

लोगो एनीमेशन:

React लोगो घूमता है, जिससे React की गतिशील क्षमताओं का प्रदर्शन होता है।


Learn React लिंक:

Learn React पर क्लिक करने से आप आधिकारिक React दस्तावेजीकरण पर रीडायरेक्ट होते हैं, जो आगे सीखने के लिए व्यापक संसाधन प्रदान करता है।



एप्लिकेशन को संशोधित करना
आइए App.js फ़ाइल को संशोधित करके समझते हैं कि React कंपोनेंट्स कैसे काम करते हैं।
मूल App.js:




		
		
			
			
Java
			
			import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit src/App.js and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org/"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
				
						import logo from './logo.svg';
import './App.css';
 
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit src/App.js and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org/"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
 
export default App;
					
				
			
		


संशोधित App.js:
मान लीजिए आप स्वागत संदेश बदलना चाहते हैं।




		
		
			
			
Java
			
			import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Welcome to Your First React App!
        </p>
        <a
          className="App-link"
          href="https://reactjs.org/"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn More About React
        </a>
      </header>
    </div>
  );
}

export default App;
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
				
						import logo from './logo.svg';
import './App.css';
 
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Welcome to Your First React App!
        </p>
        <a
          className="App-link"
          href="https://reactjs.org/"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn More About React
        </a>
      </header>
    </div>
  );
}
 
export default App;
					
				
			
		


व्याख्या:

Import Statements:

import logo from './logo.svg';: लोगो इमेज को इम्पोर्ट करता है।
import './App.css';: CSS स्टाइलिंग को इम्पोर्ट करता है।


App Component:

JSX संरचना लौटाता है जिसमें एक हेडर, इमेज, पैराग्राफ, और लिंक शामिल हैं।
<p> टैग के अंदर का टेक्स्ट उपयोगकर्ताओं का स्वागत करने के लिए अपडेट किया गया है।


Export Statement:

export default App;: App कंपोनेंट को एप्लिकेशन के अन्य हिस्सों में उपयोग के लिए निर्यात करता है।



संशोधित एप्लिकेशन चलाना:

परिवर्तनों को सहेजने के बाद, विकास सर्वर स्वचालित रूप से एप्लिकेशन को रीलोड करता है, जिससे अपडेटेड स्वागत संदेश प्रतिबिंबित होता है।


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

React.js की लोकप्रियता: React की लचीलापन, प्रदर्शन, और विशाल समुदाय समर्थन इसे फ्रंट-एंड विकास के लिए शीर्ष विकल्प बनाते हैं।
सेट अप: Node.js और VS Code की उचित स्थापना एक सुचारू विकास अनुभव के लिए आवश्यक है।
Create React App: प्रोजेक्ट्स को कुशलतापूर्वक स्कैफोल्ड करने के लिए Create React App का उपयोग करें, जिससे एक मानकीकृत संरचना सुनिश्चित होती है।
प्रोजेक्ट संरचना: React प्रोजेक्ट डायरेक्टरी को समझने से आपके कोड को व्यवस्थित और प्रबंधित करने में मदद मिलती है।
विकास वर्कफ़्लो: अपने React एप्लिकेशन को चलाना और संशोधित करना कंपोनेंट-आधारित आर्किटेक्चर और JSX की समझ को बढ़ाता है।

SEO-अनुकूलित कीवर्ड्स
React.js, React ट्यूटोरियल, शुरुआती React गाइड, फ्रंट-एंड विकास, create react app, React vs Angular, React vs Vue.js, Node.js स्थापना, Visual Studio Code सेटअप, React प्रोजेक्ट संरचना, React सीखना, शुरुआती के लिए React, JavaScript लाइब्रेरी, React एप्लिकेशन बनाना, React स्थापना मार्गदर्शिका।

अतिरिक्त संसाधन

आधिकारिक React दस्तावेजीकरण
Node.js आधिकारिक वेबसाइट
Visual Studio Code एक्सटेंशन्स
Create React App GitHub Repository
React समुदाय Stack Overflow पर


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