React परिचय गाइड: शून्य से अपना पहला यूजर इंटरफेस बनाएं

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

React क्यों चुनें?

React के निम्नलिखित फायदे हैं:

• घटक-आधारित: React यूजर इंटरफेस को स्वतंत्र, पुन: प्रयोज्य घटकों में विभाजित करता है। इससे कोड को बनाए रखना और समझना आसान हो जाता है।
• घोषणात्मक: React घोषणात्मक प्रोग्रामिंग शैली का उपयोग करता है, जिसका अर्थ है कि आपको केवल यह वर्णन करने की आवश्यकता है कि आप क्या प्रस्तुत करना चाहते हैं, और React स्वचालित रूप से अपडेट और रेंडरिंग को संभाल लेगा।
• कुशल: React वर्चुअल DOM और स्मार्ट डिफ एल्गोरिदम का उपयोग करता है, जो यूजर इंटरफेस को कुशलता से अपडेट करने और अनावश्यक रेंडरिंग को कम करने में सक्षम है।
• विशाल समुदाय समर्थन: React के पास एक विशाल समुदाय और समृद्ध पारिस्थितिकी तंत्र है, आप विकास में मदद करने के लिए बड़ी संख्या में ट्यूटोरियल, लाइब्रेरी और उपकरण पा सकते हैं।
• क्रॉस-प्लेटफ़ॉर्म क्षमता: React Native आपको React का उपयोग करके देशी मोबाइल एप्लिकेशन (iOS और Android) विकसित करने की अनुमति देता है।

तैयारी

शुरू करने से पहले, आपको यह सुनिश्चित करना होगा कि आपके कंप्यूटर पर निम्नलिखित उपकरण स्थापित हैं:

• Node.js: Node.js एक जावास्क्रिप्ट रनटाइम वातावरण है जिसका उपयोग React विकास उपकरण चलाने के लिए किया जाता है। आप इसे https://nodejs.org/ से डाउनलोड और इंस्टॉल कर सकते हैं।
• npm या yarn: npm (Node Package Manager) और yarn जावास्क्रिप्ट पैकेज मैनेजर हैं, जिनका उपयोग React की निर्भरता को स्थापित और प्रबंधित करने के लिए किया जाता है। आमतौर पर Node.js स्थापित करते समय npm भी स्थापित हो जाता है। yarn को https://yarnpkg.com/ से स्थापित किया जा सकता है।

अपना पहला React एप्लिकेशन बनाएं

हम create-react-app का उपयोग करके जल्दी से एक React प्रोजेक्ट बनाएंगे।

1. npm का उपयोग करके बनाएं:

npx create-react-app my-first-react-app
cd my-first-react-app
npm start

2. yarn का उपयोग करके बनाएं:

yarn create react-app my-first-react-app
cd my-first-react-app
yarn start

उपरोक्त कमांड को निष्पादित करने के बाद, create-react-app स्वचालित रूप से my-first-react-app नामक एक निर्देशिका बनाएगा, और उस निर्देशिका में एक React प्रोजेक्ट को इनिशियलाइज़ करेगा। npm start या yarn start कमांड एक विकास सर्वर शुरू करेगा, और आप अपने React एप्लिकेशन को देखने के लिए ब्राउज़र में http://localhost:3000 पर जा सकते हैं।

निर्देशिका संरचना

create-react-app द्वारा बनाई गई प्रोजेक्ट निर्देशिका संरचना इस प्रकार है:``` my-first-react-app/ ├── node_modules/ # परियोजना निर्भरता पुस्तकालय ├── public/ # स्थिर संसाधन (जैसे HTML फ़ाइलें) │ ├── index.html # एप्लिकेशन की प्रवेश HTML फ़ाइल │ └── ... ├── src/ # प्रतिक्रिया स्रोत कोड │ ├── App.css # App घटक की CSS शैली │ ├── App.js # App घटक │ ├── App.test.js # App घटक की परीक्षण फ़ाइल │ ├── index.css # वैश्विक CSS शैली │ ├── index.js # एप्लिकेशन की प्रवेश JavaScript फ़ाइल │ ├── logo.svg # प्रतिक्रिया लोगो │ └── ... ├── .gitignore # Git अनदेखी फ़ाइलें ├── package.json # परियोजना मेटाडेटा और निर्भरताएँ ├── README.md # परियोजना प्रलेखन └── yarn.lock # निर्भरता संस्करण लॉकिंग फ़ाइल (यदि yarn का उपयोग किया जाता है)

## प्रतिक्रिया घटकों को समझना

प्रतिक्रिया एप्लिकेशन घटकों से बने होते हैं। घटक स्वतंत्र, पुन: प्रयोज्य कोड ब्लॉक हैं जिनका उपयोग उपयोगकर्ता इंटरफ़ेस के विशिष्ट भागों को प्रस्तुत करने के लिए किया जाता है।

`src/App.js` फ़ाइल में, आप एक डिफ़ॉल्ट `App` घटक देख सकते हैं:

```javascript
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

कोड स्पष्टीकरण:

• import React from 'react'; प्रतिक्रिया लाइब्रेरी आयात करें।
• function App() { ... } App नामक एक फ़ंक्शन घटक को परिभाषित करें।
• return ( ... ) एक JSX अभिव्यक्ति लौटाता है जो वर्णन करता है कि घटक को क्या प्रस्तुत करना चाहिए।
• export default App; App घटक को निर्यात करता है ताकि इसे अन्य फ़ाइलों में उपयोग किया जा सके।

JSX (JavaScript XML)

JSX एक JavaScript सिंटैक्स एक्सटेंशन है जो आपको JavaScript कोड में HTML जैसे कोड लिखने की अनुमति देता है। उपरोक्त उदाहरण में, ... एक JSX अभिव्यक्ति है। JSX कोड को Babel द्वारा मानक JavaScript कोड में परिवर्तित किया जाता है ताकि ब्राउज़र इसे समझ सके।

App घटक को संशोधित करना

आइए App घटक को संशोधित करें और एक साधारण काउंटर बनाएँ।

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
```  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# काउंटर

      वर्तमान गिनती: {count}

      +
      -
    
  );
}

export default App;

संशोधन विवरण:

• import React, { useState } from 'react'; useState हुक आयात करें। useState एक React हुक है, जिसका उपयोग फंक्शन कंपोनेंट्स में स्टेट जोड़ने के लिए किया जाता है।
• const [count, setCount] = useState(0); useState हुक का उपयोग करके count नामक एक स्टेट वेरिएबल बनाएं और इसे 0 से इनिशियलाइज़ करें। setCount count स्टेट को अपडेट करने के लिए एक फंक्शन है।
• const increment = () => { setCount(count + 1); }; increment नामक एक फंक्शन को परिभाषित करें, जिसका उपयोग count स्टेट में 1 जोड़ने के लिए किया जाता है।
• const decrement = () => { setCount(count - 1); }; decrement नामक एक फंक्शन को परिभाषित करें, जिसका उपयोग count स्टेट से 1 घटाने के लिए किया जाता है।
• वर्तमान गिनती: {count} पेज में count स्टेट का मान प्रदर्शित करें। {count} एक JSX एक्सप्रेशन है, जिसका उपयोग JSX कोड में जावास्क्रिप्ट वेरिएबल डालने के लिए किया जाता है।
• + और - दो बटन बनाएं, क्रमशः increment और decrement फंक्शन को बाइंड करें। onClick एक इवेंट हैंडलर है, जिसका उपयोग बटन क्लिक होने पर निर्दिष्ट फंक्शन को निष्पादित करने के लिए किया जाता है।

src/App.js फ़ाइल को सहेजने के बाद, ब्राउज़र स्वचालित रूप से रीफ्रेश हो जाएगा, और आपको एक सरल काउंटर दिखाई देगा। "+" बटन पर क्लिक करने से गिनती बढ़ जाएगी, और "-" बटन पर क्लिक करने से गिनती कम हो जाएगी।

CSS स्टाइल का उपयोग करना

आप अपने React एप्लिकेशन को सुंदर बनाने के लिए CSS का उपयोग कर सकते हैं। create-react-app CSS मॉड्यूल और सामान्य CSS फ़ाइलों का समर्थन करता है।

CSS मॉड्यूल का उपयोग करना:

CSS मॉड्यूल आपको प्रत्येक कंपोनेंट के लिए स्वतंत्र CSS स्टाइल बनाने की अनुमति देता है, जिससे स्टाइल संघर्ष से बचा जा सकता है। कंपोनेंट में CSS मॉड्यूल का उपयोग करने के लिए, आपको .module.css से समाप्त होने वाली एक फ़ाइल बनाने की आवश्यकता है।

उदाहरण के लिए, App.module.css नामक एक फ़ाइल बनाएं और उसमें निम्नलिखित CSS स्टाइल जोड़ें:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

फिर src/App.js फ़ाइल में CSS मॉड्यूल आयात करें:

import React, { useState } from 'react';
import styles from './App.module.css'; // CSS मॉड्यूल आयात करें

function App() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* CSS क्लास को संदर्भित करने के लिए styles ऑब्जेक्ट का उपयोग करें */}
      

# काउंटर

      वर्तमान गिनती: {count}

      +
      -
    
  );
}

export default App;

सामान्य CSS फ़ाइल का उपयोग करना:

आप वैश्विक शैलियों को परिभाषित करने के लिए एक सामान्य CSS फ़ाइल का भी उपयोग कर सकते हैं। src/index.css फ़ाइल में, आप वैश्विक शैलियों को परिभाषित कर सकते हैं।

उदाहरण के लिए, निम्नलिखित CSS शैली जोड़ें:

body {
  font-family: sans-serif;
}

यह शैली पूरे एप्लिकेशन के body तत्व पर लागू होगी।

अगला कदम

बधाई हो, आपने अपना पहला React एप्लिकेशन पूरा कर लिया है! इसके बाद, आप React के बारे में और अधिक जान सकते हैं, जैसे:

• घटक संचार: जानें कि विभिन्न घटकों को एक दूसरे के साथ कैसे संवाद करना है।
• फॉर्म हैंडलिंग: जानें कि फॉर्म कैसे बनाएं और हैंडल करें।
• राउटिंग: जानें कि React Router का उपयोग करके बहु-पृष्ठ एप्लिकेशन कैसे बनाएं।
• Redux या Context API: जानें कि एप्लिकेशन की स्थिति को कैसे प्रबंधित किया जाए।
• Hooks: React Hooks, जैसे useEffect, useContext आदि के बारे में गहराई से जानें।

याद रखें, React एक ऐसी तकनीक है जिसके लिए निरंतर अभ्यास और सीखने की आवश्यकता होती है। आपको सीखने में आनंद आए!