2 मिनट में React को समझें: कंपोनेंट्स, हुक्स और बेस्ट प्रैक्टिसेज!

नमस्कार, उत्साही डेवलपर! आज, हम React के बारे में जानेंगे, एक JavaScript लाइब्रेरी जो यूजर इंटरफेस डेवलपमेंट में क्रांति ला रही है। कुछ ही मिनटों में, आप जानेंगे कि कैसे आधुनिक और रिएक्टिव वेब एप्लिकेशन बनाए जाते हैं।

React क्या है? 🤔

React एक JavaScript लाइब्रेरी है जिसे Facebook (Meta) ने विकसित किया है और जो कंपोज़ेबल और पुन: प्रयोज्य यूजर इंटरफेस बनाने की सुविधा देती है। इसका मूल सिद्धांत? वर्चुअल DOM और एक डिक्लेरेटिव दृष्टिकोण जो आपके कोड को अधिक अनुमानित और डीबग करने में आसान बनाता है।

कंपोनेंट्स: सब कुछ की नींव

React में, हर चीज एक कंपोनेंट है। एक कंपोनेंट एक सरल बटन जितना छोटा या पूरे पेज जितना बड़ा हो सकता है। यहाँ कंपोनेंट्स बनाने के विभिन्न तरीके दिए गए हैं:

jsx
1// सरल फंक्शनल कंपोनेंट
2const Welcome = ({ name }) => {
3  return <h1>नमस्ते, {name}! 👋</h1>;
4};
5
6// प्रॉप्स और चिल्ड्रन के साथ कंपोनेंट
7const Card = ({ title, children }) => {
8  return (
9    <div className="card">
10      <h2>{title}</h2>
11      <div className="card-content">{children}</div>
12    </div>
13  );
14};
15
16// उपयोग
17const App = () => {
18  return (
19    <Card title="मेरा पहला कार्ड">
20      <Welcome name="डेवलपर" />
21      <p>React की दुनिया में आपका स्वागत है!</p>
22    </Card>
23  );
24};

स्टेट मैनेजमेंट: रिएक्टिविटी का दिल 🧠

React में स्टेट बहुत महत्वपूर्ण है। यह आपके कंपोनेंट्स को अपना आंतरिक डेटा बनाए रखने और अपडेट करने की क्षमता देता है।

jsx
1import { useState } from 'react';
2
3const Counter = () => {
4  const [count, setCount] = useState(0);
5  const [isActive, setIsActive] = useState(false);
6
7  const handleIncrement = () => {
8    setCount((prevCount) => prevCount + 1);
9    setIsActive(true);
10  };
11
12  return (
13    <div className="counter">
14      <p>काउंटर: {count}</p>
15      <p>स्थिति: {isActive ? 'सक्रिय' : 'निष्क्रिय'}</p>
16      <button onClick={handleIncrement} className={isActive ? 'active' : ''}>
17        बढ़ाएं
18      </button>
19    </div>
20  );
21};

आवश्यक हुक्स: useState से आगे 🎣

useEffect: साइड इफेक्ट्स का प्रबंधन

jsx
1import { useState, useEffect } from 'react';
2
3const WindowResizeTracker = () => {
4  const [windowSize, setWindowSize] = useState({
5    width: window.innerWidth,
6    height: window.innerHeight,
7  });
8
9  useEffect(() => {
10    // विंडो साइज अपडेट करने का हैंडलर
11    const handleResize = () => {
12      setWindowSize({
13        width: window.innerWidth,
14        height: window.innerHeight,
15      });
16    };
17
18    // इवेंट लिसनर जोड़ें
19    window.addEventListener('resize', handleResize);
20
21    // क्लीनअप फंक्शन: बहुत महत्वपूर्ण
22    return () => {
23      window.removeEventListener('resize', handleResize);
24    };
25  }, []);
26
27  return (
28    <div className="window-size">
29      <h2>विंडो का आकार:</h2>
30      <p>चौड़ाई: {windowSize.width}px</p>
31      <p>ऊंचाई: {windowSize.height}px</p>
32    </div>
33  );
34};
35
36// एक और उदाहरण: क्लीनअप के साथ टाइमर
37const Timer = () => {
38  const [seconds, setSeconds] = useState(0);
39  const [isRunning, setIsRunning] = useState(false);
40
41  useEffect(() => {
42    let intervalId;
43
44    if (isRunning) {
45      intervalId = setInterval(() => {
46        setSeconds((prevSeconds) => prevSeconds + 1);
47      }, 1000);
48    }
49
50    return () => {
51      if (intervalId) {
52        clearInterval(intervalId);
53      }
54    };
55  }, [isRunning]);
56
57  const handleToggle = () => {
58    setIsRunning((prev) => !prev);
59  };
60
61  const handleReset = () => {
62    setIsRunning(false);
63    setSeconds(0);
64  };
65
66  return (
67    <div className="timer">
68      <h2>टाइमर</h2>
69      <p>बीता समय: {seconds} सेकंड</p>
70      <button onClick={handleToggle}>
71        {isRunning ? 'रोकें' : 'शुरू करें'}
72      </button>
73      <button onClick={handleReset}>रीसेट</button>
74    </div>
75  );
76};

[बाकी का अनुवाद जारी है... क्या आप चाहेंगे कि मैं पूरा अनुवाद जारी रखूं?]