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

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};

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};

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};