S01L02 - React के साथ शुरुआत करना

html

React में महारत हासिल करना: React विकास शुरू करने के लिए एक व्यापक मार्गदर्शिका
सामग्री तालिका

परिचय
अपने React प्रोजेक्ट की स्थापना
परियोजना संरचना को समझना
VS Code एक्सटेंशन्स के साथ अपने विकास पर्यावरण को बेहतर बनाना

ES7+ React/Redux/React-Native स्निपेट्स
VS Code React रिफैक्टर
Prettier - कोड फॉर्मैटर
मैटेरियल आइकन थीम


अपने एप्लिकेशन को चलाना और परीक्षण करना
निष्कर्ष


परिचय
“React में महारत हासिल करना: React विकास शुरू करने के लिए एक व्यापक मार्गदर्शिका” में आपका स्वागत है। यह ईबुक नए शुरुआती और डेवलपर्स को React विकास पर्यावरण सेट अप करने और अनुकूलित करने की बुनियादी समझ प्रदान करने के लिए डिज़ाइन किया गया है। चाहे आप React के नए हों या अपनी सेटअप को परिष्कृत करना चाहते हों, यह मार्गदर्शिका आवश्यक विषयों को कवर करती है, जिसमें परियोजना प्रारंभिकरण, परियोजना संरचना को समझना, और शक्तिशाली VS Code एक्सटेंशन्स के साथ अपने विकास कार्यप्रवाह को बेहतर बनाना शामिल है।
React क्यों?
React गतिशील और प्रतिक्रियाशील उपयोगकर्ता इंटरफेस बनाने के लिए सबसे लोकप्रिय JavaScript लाइब्रेरीज़ में से एक बन गई है। इसकी कॉम्पोनेंट-आधारित आर्किटेक्चर और कुशल Virtual DOM कार्यान्वयन इसे आधुनिक वेब विकास के लिए शीर्ष पसंद बनाता है।
React के उपयोग के फायदे और नुकसान


फायदे
नुकसान


कॉम्पोनेंट-आधारित आर्किटेक्चर
शुरुआती लोगों के लिए कठिन सीखने की वक्र


उत्तम प्रदर्शन के लिए Virtual DOM
JSX सिंटैक्स डरावना हो सकता है


मजबूत समुदाय और व्यापक संसाधन
बार-बार अपडेट्स समायोजन की आवश्यकता हो सकती है


कॉम्पोनेंट्स की पुन: उपयोगिता
स्टेट मैनेजमेंट के लिए अतिरिक्त लाइब्रेरीज़ की समझ आवश्यक है


React का उपयोग कब और कहाँ करें
React सिंगल-पेज एप्लिकेशन्स (SPAs), React Native के साथ मोबाइल एप्लिकेशन्स, और जटिल उपयोगकर्ता इंटरफेस के निर्माण के लिए आदर्श है जहाँ प्रदर्शन और स्केलेबिलिटी महत्वपूर्ण हैं। इसकी लचीलापन विभिन्न बैक-एंड तकनीकों के साथ एकीकरण की अनुमति देती है, जिससे यह विविध परियोजना आवश्यकताओं के लिए उपयुक्त बनता है।


विशेषता
React
अन्य लाइब्रेरीज़


कॉम्पोनेंट-आधारित
हाँ
भिन्न


Virtual DOM
हाँ
नहीं


सीखने की वक्र
मध्यम
भिन्न



अपने React प्रोजेक्ट की स्थापना
React के साथ अपनी यात्रा शुरू करने के लिए, आपको एक नया React प्रोजेक्ट स्थापित करने की आवश्यकता है। इसमें परियोजना निर्देशिका को प्रारंभ करना और आवश्यक निर्भरताओं को स्थापित करना शामिल है।
कदम-ब-कदम मार्गदर्शिका

अपनी परियोजना निर्देशिका पर नेविगेट करें

     टर्मिनल खोलें और उस निर्देशिका में नेविगेट करें जहाँ आप अपना React प्रोजेक्ट बनाना चाहते हैं:

     



		
		
			
			
Java
			
			<strong>cd react-getting-started</strong>
			
				
					
				
					1
				
						<strong>cd react-getting-started</strong>
					
				
			
		


  
React एप्लिकेशन को प्रारंभ करें

     Create React App टूल का उपयोग करके परियोजना संरचना सेट अप करें:

     



		
		
			
			
Java
			
			<strong>npx create-react-app my-app
cd my-app</strong>
			
				
					
				
					1
2
				
						<strong>npx create-react-app my-app
cd my-app</strong>
					
				
			
		


  
विकास सर्वर शुरू करें

     npm का उपयोग करके एप्लिकेशन लॉन्च करें:

     



		
		
			
			
Java
			
			<strong>npm start</strong>
			
				
					
				
					1
				
						<strong>npm start</strong>
					
				
			
		


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


परियोजना संरचना को समझना
Create React App के साथ बनाई गई एक सामान्य React परियोजना में निम्नलिखित संरचना होती है:




		
		
			
			
Java
			
			my-app/
├── 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
				
						my-app/
├── 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
					
				
			
		


मुख्य घटक

public/: स्थिर संपत्तियाँ और index.html फ़ाइल शामिल हैं जहाँ आपका React ऐप जुड़ता है।
src/: स्रोत कोड फाइलें रखती है, जिसमें React कॉम्पोनेंट्स, स्टाइलशीट्स, और टेस्ट फाइलें शामिल हैं।
package.json: परियोजना की निर्भरताओं और स्क्रिप्ट्स की सूची प्रदान करती है।
.gitignore: Git द्वारा अनदेखी की जाने वाली फाइल्स और डायरेक्टरीज़ को निर्दिष्ट करती है।

इस संरचना को समझना आपकी परियोजना फाइलों के कुशल नेविगेशन और प्रबंधन के लिए महत्वपूर्ण है।

VS Code एक्सटेंशन्स के साथ अपने विकास पर्यावरण को बेहतर बनाना
Visual Studio Code (VS Code) एक शक्तिशाली और बहुमुखी कोड एडिटर है जिसे React विकास के लिए अनुकूलित एक्सटेंशन्स के साथ और भी बेहतर बनाया जा सकता है। इन एक्सटेंशन्स को स्थापित करने से आपकी कोडिंग दक्षता और परियोजना प्रबंधन में काफी सुधार हो सकता है।
4.1 ES7+ React/Redux/React-Native स्निपेट्स
विवरण:
यह एक्सटेंशन JavaScript, React, Redux, और React Native विकास के लिए उपयोगी स्निपेट्स का एक संग्रह प्रदान करता है, जिससे आप शॉर्टहैंड कमांड्स के साथ तेजी से कोड लिख सकते हैं।
मुख्य विशेषताएँ:

React कॉम्पोनेंट्स जल्दी से उत्पन्न करें।
Redux एक्शंस और रिड्यूसर्स प्रभावी ढंग से बनाएं।
संबंधित स्निपेट्स के साथ React Native विकास को सरल बनाएं।

स्थापना:

VS Code खोलें।
Extensions व्यू पर जाएं (Ctrl+Shift+X या Cmd+Shift+X)।
ES7+ React/Redux/React-Native स्निपेट्स खोजें।
Install पर क्लिक करें।

4.2 VS Code React रिफैक्टर
विवरण:
React Refactor विशेष रूप से React परियोजनाओं के लिए रिफैक्टरिंग टूल्स का सेट प्रदान करता है, जो आपको स्वच्छ और कुशल कोडबेस बनाए रखने में मदद करता है।
मुख्य विशेषताएँ:

JSX से आसानी से कॉम्पोनेंट्स निकालें।
विश्वास के साथ वेरिएबल्स और फंक्शन्स का नाम बदलें।
अपने React कोड संरचना को अनुकूलित करें।

स्थापना:

VS Code खोलें।
Extensions व्यू पर नेविगेट करें।
VS Code React Refactor खोजें।
Install पर क्लिक करें।

4.3 Prettier - कोड फॉर्मैटर
विवरण:
Prettier एक रायवादी कोड फॉर्मैटर है जो आपके कोडबेस में स्थिर शैली सुनिश्चित करता है, स्वचालित रूप से आपके कोड को सेव करने पर फॉर्मैट करता है।
मुख्य विशेषताएँ:

कई भाषाओं और फ्रेमवर्क्स का समर्थन करता है।
VS Code के साथ सहजता से एकीकृत होता है।
कस्टमाइज़ेबल फॉर्मैटिंग नियम।

स्थापना:

VS Code खोलें।
Extensions व्यू तक पहुंचें।
Prettier - कोड फॉर्मैटर खोजें।
Install पर क्लिक करें।
(वैकल्पिक) अपने VS Code सेटिंग्स में Prettier को डिफ़ॉल्ट फॉर्मैटर सेट करें:

    



		
		
			
			
Java
			
			{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}
			
				
					
				
					1
2
3
4
				
						{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}
					
				
			
		


  

4.4 मैटेरियल आइकन थीम
विवरण:
मैटेरियल आइकन थीम आपके प्रोजेक्ट की दृश्य अपील को बढ़ाता है विभिन्न फाइल प्रकारों के लिए icon के व्यापक диапазन प्रदान करके, जिससे नेविगेशन आसान हो जाता है।
मुख्य विशेषताएँ:

मैटेरियल डिज़ाइन सिद्धांतों के अनुरूप विस्तृत संग्रह के आइकन प्रदान करता है।
फाइल प्रकार के आधार पर स्वचालित रूप से आइकन असाइन करता है।
कुल प्रोजेक्ट पठनीयता और सौंदर्यशास्त्र में सुधार करता है।

स्थापना:

VS Code खोलें।
Extensions व्यू पर जाएं।
Material Icon Theme खोजें।
Install पर क्लिक करें।
कमांड पैलेट (Ctrl+Shift+P या Cmd+Shift+P) से थीम सक्रिय करें और Material Icon Theme: Activate टाइप करें।



Extension
विवरण
मुख्य लाभ


ES7+ React/Redux/React-Native स्निपेट्स
तेजी से React विकास के लिए कोड स्निपेट्स प्रदान करता है
कोडिंग गति बढ़ाता है, दोहरावदार कोड को कम करता है


VS Code React Refactor
React-विशिष्ट रिफैक्टरिंग टूल्स प्रदान करता है
कोड गुणवत्ता में सुधार करता है, रिफैक्टरिंग को सरल बनाता है


Prettier - कोड फॉर्मैटर
संघर्ष में स्वचालित रूप से कोड को फॉर्मैट करता है
कोड शैली बनाए रखता है, पठनीयता में सुधार करता है


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



अपने एप्लिकेशन को चलाना और परीक्षण करना
अपने React प्रोजेक्ट को स्थापित करने और अपने विकास पर्यावरण को बेहतर बनाने के बाद, आप अब अपने एप्लिकेशन को चलाने और परीक्षण करने के लिए तैयार हैं।
विकास सर्वर शुरू करना
अपने एप्लिकेशन को लॉन्च करने के लिए, अपनी परियोजना निर्देशिका में नेविगेट करें और चलाएं:




		
		
			
			
Java
			
			<strong>npm start</strong>
			
				
					
				
					1
				
						<strong>npm start</strong>
					
				
			
		


यह कमांड विकास सर्वर शुरू करती है और आपके एप्लिकेशन को डिफ़ॉल्ट वेब ब्राउज़र में http://localhost:3000/ पर खोलती है। सर्वर हॉट रीलोडिंग का समर्थन करता है, जिससे आप वास्तविक समय में बदलाव देख सकते हैं बिना मैन्युअल रीफ्रेश के।
कोड का अन्वेषण करना
आइए अपने React एप्लिकेशन को प्रारंभिक करने और चलाने के लिए जिम्मेदार मुख्य फाइलों को करीब से देखें।
src/index.js




		
		
			
			
Java
			
			
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

// मुख्य App कॉम्पोनेंट को इनिशियलाइज़ और रेंडर करें
ReactDOM.render(
  &lt;React.StrictMode&gt;
    &lt;App /&gt;
  &lt;/React.StrictMode&gt;,
  document.getElementById('root')
);

// ऐप में प्रदर्शन को मापें
reportWebVitals();

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
				
						 
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
 
// मुख्य App कॉम्पोनेंट को इनिशियलाइज़ और रेंडर करें
ReactDOM.render(
  &lt;React.StrictMode&gt;
    &lt;App /&gt;
  &lt;/React.StrictMode&gt;,
  document.getElementById('root')
);
 
// ऐप में प्रदर्शन को मापें
reportWebVitals();
 
					
				
			
		


व्याख्या:

आवश्यक मॉड्यूल्स और स्टाइल्स आयात करता है।
App कॉम्पोनेंट को index.html में root div में रेंडर करता है।
संभावित समस्याओं को उजागर करने के लिए React.StrictMode का उपयोग करता है।
reportWebVitals के माध्यम से प्रदर्शन माप को शामिल करता है।

src/App.js




		
		
			
			
Java
			
			
import React from 'react';
import './App.css';

// मुख्य App कॉम्पोनेंट
function App() {
  return (
    &lt;div className="App"&gt;
      &lt;header className="App-header"&gt;
        &lt;p>Edit <code>src/App.js</code> and save to reload.&lt;/p&gt;
        &lt;h1&gt;Hello React!&lt;/h1&gt;
      &lt;/header&gt;
    &lt;/div&gt;
  );
}

export default App;

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
				
						 
import React from 'react';
import './App.css';
 
// मुख्य App कॉम्पोनेंट
function App() {
  return (
    &lt;div className="App"&gt;
      &lt;header className="App-header"&gt;
        &lt;p>Edit <code>src/App.js</code> and save to reload.&lt;/p&gt;
        &lt;h1&gt;Hello React!&lt;/h1&gt;
      &lt;/header&gt;
    &lt;/div&gt;
  );
}
 
export default App;
 
					
				
			
		


व्याख्या:

React और संबंधित CSS आयात करता है।
App कॉम्पोनेंट को परिभाषित करता है, जो एक हेडर के साथ स्वागत संदेश रेंडर करता है।
परिवर्तनों पर सेव करते समय टेक्स्ट अपडेट करके हॉट रीलोडिंग को दर्शाता है।

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

प्रदर्शन दक्षता: वास्तविक DOM में सीधे हेरफेर की संख्या को कम करता है, गति बढ़ाता है।
उन्नत उपयोगकर्ता अनुभव: हॉट रीलोडिंग के माध्यम से कोड परिवर्तनों पर त्वरित प्रतिक्रिया प्रदान करता है।
सरलीकृत विकास: जटिल DOM संचालन को सारलीकृत करता है, जिससे डेवलपर्स को कॉम्पोनेंट लॉजिक पर ध्यान केंद्रित करने की अनुमति मिलती है।


निष्कर्ष
React विकास पर्यावरण सेट अप करना गतिशील और कुशल वेब एप्लिकेशन्स के निर्माण की दिशा में एक महत्वपूर्ण पहला कदम है। अपनी परियोजना को सही तरीके से प्रारंभ करके, परियोजना संरचना को समझकर, और शक्तिशाली VS Code एक्सटेंशन्स का लाभ उठाकर, आप अपने विकास कार्यप्रवाह को सुव्यवस्थित कर सकते हैं और कोड गुणवत्ता में सुधार कर सकते हैं।
मुख्य बिंदु:

परियोजना प्रारंभिकरण: Create React App का उपयोग मानकीकृत परियोजना सेटअप के लिए करें।
परियोजना संरचना: आवश्यक डायरेक्टरीज़ और फाइलों के साथ परिचित हों।
VS Code एक्सटेंशन्स: ES7+ स्निपेट्स, React Refactor, Prettier, और Material Icon Theme जैसे एक्सटेंशन्स के साथ उत्पादकता बढ़ाएं।
हॉट रीलोडिंग और Virtual DOM: वास्तविक समय कोड अपडेट और अनुकूलित रेंडरिंग से लाभान्वित हों।

इन बुनियादी चरणों के साथ अपने React यात्रा की शुरुआत करना आपको सफलता के लिए तैयार करेगा, जिससे आप आसानी से मजबूत और स्केलेबल एप्लिकेशन्स बना सकेंगे। खुश कोडिंग!
SEO कीवर्ड्स: React विकास, React के साथ शुरू करना, React प्रोजेक्ट सेटअप, VS Code एक्सटेंशन्स for React, React Virtual DOM, React में हॉट रीलोडिंग, React परियोजना संरचना, ES7 React स्निपेट्स, React Refactor, Prettier कोड फॉर्मैटर, Material Icon Theme, शुरुआती React मार्गदर्शिका, React ट्यूटोरियल्स, React सर्वोत्तम प्रथाएँ।
नोट: यह लेख AI द्वारा उत्पन्न किया गया है।
फायदे	नुकसान
कॉम्पोनेंट-आधारित आर्किटेक्चर	शुरुआती लोगों के लिए कठिन सीखने की वक्र
उत्तम प्रदर्शन के लिए Virtual DOM	JSX सिंटैक्स डरावना हो सकता है
मजबूत समुदाय और व्यापक संसाधन	बार-बार अपडेट्स समायोजन की आवश्यकता हो सकती है
कॉम्पोनेंट्स की पुन: उपयोगिता	स्टेट मैनेजमेंट के लिए अतिरिक्त लाइब्रेरीज़ की समझ आवश्यक है
विशेषता	React	अन्य लाइब्रेरीज़
कॉम्पोनेंट-आधारित	हाँ	भिन्न
Virtual DOM	हाँ	नहीं
सीखने की वक्र	मध्यम	भिन्न
Extension	विवरण	मुख्य लाभ
ES7+ React/Redux/React-Native स्निपेट्स	तेजी से React विकास के लिए कोड स्निपेट्स प्रदान करता है	कोडिंग गति बढ़ाता है, दोहरावदार कोड को कम करता है
VS Code React Refactor	React-विशिष्ट रिफैक्टरिंग टूल्स प्रदान करता है	कोड गुणवत्ता में सुधार करता है, रिफैक्टरिंग को सरल बनाता है
Prettier - कोड फॉर्मैटर	संघर्ष में स्वचालित रूप से कोड को फॉर्मैट करता है	कोड शैली बनाए रखता है, पठनीयता में सुधार करता है
मैटेरियल आइकन थीम	फाइलों के लिए मैटेरियल डिज़ाइन आइकन प्रदान करता है	प्रोजेक्ट नेविगेशन को बेहतर बनाता है, सौंदर्यशास्त्र में सुधार करता है