From fddc89dd572e469a1e33c753318fab736902fb95 Mon Sep 17 00:00:00 2001
From: Tushar Gaurav <tushar.gaurav416@gmail.com>
Date: Wed, 13 Nov 2024 10:49:41 +0530
Subject: [PATCH] fix: proof read and fixes

---
 src/content/learn/responding-to-events.md | 53 ++++++++++++-----------
 1 file changed, 27 insertions(+), 26 deletions(-)

diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md
index 36241af40..aa056239b 100644
--- a/src/content/learn/responding-to-events.md
+++ b/src/content/learn/responding-to-events.md
@@ -1,24 +1,24 @@
 ---
-title: इवेंट्स पर प्रतिक्रिया देना
+title: Events पर प्रतिक्रिया देना
 ---
 
 <Intro>
 
-React आपको अपने JSX में *इवेंट हैंडलर* डालने की सुविधा देता है। इवेंट हैंडलर आपकी स्वयं की फंक्शन्स होती हैं, जिन्हें क्लिक करना, होवर करना, फॉर्म इनपुट्स को फोकस करना आदि जैसी इंटरैक्शंस पर प्रतिक्रिया स्वरूप ट्रिगर किया जाता है।
+React आपको अपने JSX में *event handler* डालने की सुविधा देता है। Event handler आपकी स्वयं की फंक्शन्स होती हैं, जिन्हें क्लिक करना, होवर करना, फॉर्म इनपुट्स को फोकस करना आदि जैसी इंटरैक्शंस पर प्रतिक्रिया स्वरूप ट्रिगर किया जाता है।
 
 </Intro>
 
 <YouWillLearn>
 
-* इवेंट हैंडलर लिखने के विभिन्न तरीके
-* पैरेंट कौम्पोनॅन्ट से इवेंट हैंडलिंग लॉजिक को पास करने का तरीका
-* इवेंट्स का प्रचार कैसे होता है और इसे कैसे रोका जा सकता है
+* Event handler लिखने के विभिन्न तरीके
+* पैरेंट कौम्पोनॅन्ट से event handling लॉजिक को पास करने का तरीका
+* Events का प्रचार कैसे होता है और इसे कैसे रोका जा सकता है
 
 </YouWillLearn>
 
-## इवेंट हैंडलर डालना {/*adding-event-handlers*/}
+## Event handler डालना {/*adding-event-handlers*/}
 
-इवेंट हैंडलर जोड़ने के लिए, पहले एक फंक्शन को परिभाषित करें और फिर उसे प्रॉप के रूप में पास करें उपयुक्त JSX टैग में। उदाहरण के लिए, यहाँ एक बटन है जो अभी कुछ नहीं करता है:
+Event handler जोड़ने के लिए, पहले एक फंक्शन को परिभाषित करें और फिर उसे props के रूप में पास करें उपयुक्त JSX टैग में। उदाहरण के लिए, यहाँ एक बटन है जो अभी कुछ नहीं करता है:
 
 <Sandpack>
 
@@ -63,14 +63,14 @@ button { margin-right: 10px; }
 </Sandpack>
 
 
-आपने `handleClick` फंक्शन को परिभाषित किया और फिर इसे [props के रूप में पास किया](/learn/passing-props-to-a-component) `<button>` में। `handleClick` एक **इवेंट हैंडलर** है। इवेंट हैंडलर फंक्शन्स:
+आपने `handleClick` फंक्शन को परिभाषित किया और फिर इसे [props के रूप में पास किया](/learn/passing-props-to-a-component) `<button>` में। `handleClick` एक **event handler** है। Event हैंडलर फंक्शन्स:
 
 * आमतौर पर *अंदर* आपके कौम्पोनॅन्ट्स के परिभाषित होते हैं।
-* उनके नाम `handle` से शुरू होते हैं, इसके बाद इवेंट का नाम आता है।
+* उनके नाम `handle` से शुरू होते हैं, इसके बाद event का नाम आता है।
 
-परंपरा के अनुसार, इवेंट हैंडलर्स को `handle` और इवेंट के नाम के बाद नामित करना सामान्य है। आप अक्सर `onClick={handleClick}`, `onMouseEnter={handleMouseEnter}`, आदि देखते हैं।
+परंपरा के अनुसार, event handlers को `handle` और event के नाम के बाद नामित करना सामान्य है। आप अक्सर `onClick={handleClick}`, `onMouseEnter={handleMouseEnter}`, आदि देखते हैं।
 
-वैकल्पिक रूप से, आप JSX में इवेंट हैंडलर को इनलाइन भी परिभाषित कर सकते हैं:
+वैकल्पिक रूप से, आप JSX में event handler को इनलाइन भी परिभाषित कर सकते हैं:
 
 
 ```jsx
@@ -79,7 +79,7 @@ button { margin-right: 10px; }
 }}>
 ```
 
-Or, more concisely, using an arrow function:
+या, अधिक संक्षेप में, एरो फंक्शन का उपयोग करते हुए:
 
 ```jsx
 <button onClick={() => {
@@ -87,7 +87,8 @@ Or, more concisely, using an arrow function:
 }}>
 ```
 
-All of these styles are equivalent. Inline event handlers are convenient for short functions.
+इन सभी स्टाइल्स समकक्ष हैं। इनलाइन event handlers छोटे फंक्शन्स के लिए सुविधाजनक होते हैं।
+
 
 <Pitfall>
 
@@ -130,9 +131,9 @@ Event handlers में पास की गई फंक्शन्स को
 
 </Pitfall> 
 
-### इवेंट हैंडलर्स में props को पढ़ना {/*reading-props-in-event-handlers*/}
+### Event हैंडलर्स में props को पढ़ना {/*reading-props-in-event-handlers*/}
 
-चूंकि इवेंट हैंडलर कौम्पोनॅन्ट के अंदर परिभाषित होते हैं, उन्हें कौम्पोनॅन्ट की props तक पहुंच प्राप्त होती है। यहाँ एक बटन है, जो क्लिक होने पर अपनी `message` props के साथ एक अलर्ट दिखाता है:
+चूंकि event हैंडलर कौम्पोनॅन्ट के अंदर परिभाषित होते हैं, उन्हें कौम्पोनॅन्ट की props तक पहुंच प्राप्त होती है। यहाँ एक बटन है, जो क्लिक होने पर अपनी `message` props के साथ एक अलर्ट दिखाता है:
 
 
 <Sandpack>
@@ -166,14 +167,14 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-This lets these two buttons show different messages. Try changing the messages passed to them.
+यह इन दो बटनों को अलग-अलग संदेश दिखाने देता है। उनके पास किए गए संदेशों को बदलकर देखें।
 
 
-### इवेंट हैंडलर्स को props के रूप में पास करना {/*passing-event-handlers-as-props*/}
+### Event हैंडलर्स को props के रूप में पास करना {/*passing-event-handlers-as-props*/}
 
-अक्सर आपको पैरेंट कौम्पोनॅन्ट को बच्चे के इवेंट हैंडलर को निर्दिष्ट करने की आवश्यकता होती है। बटनों पर विचार करें: जिस स्थान पर आप `Button` कौम्पोनॅन्ट का उपयोग कर रहे हैं, वहां आप एक अलग फंक्शन चलाना चाह सकते हैं—शायद एक फिल्म चलाता है और दूसरा इमेज अपलोड करता है। 
+अक्सर आपको पैरेंट कौम्पोनॅन्ट को बच्चे के event हैंडलर को निर्दिष्ट करने की आवश्यकता होती है। बटनों पर विचार करें: जिस स्थान पर आप `Button` कौम्पोनॅन्ट का उपयोग कर रहे हैं, वहां आप एक अलग फंक्शन चलाना चाह सकते हैं—शायद एक फिल्म चलाता है और दूसरा इमेज अपलोड करता है। 
 
-इसके लिए, उस इवेंट हैंडलर के रूप में props को पास करें जो कौम्पोनॅन्ट अपने पैरेंट से प्राप्त करता है, जैसे कि:
+इसके लिए, उस event हैंडलर के रूप में props को पास करें जो कौम्पोनॅन्ट अपने पैरेंट से प्राप्त करता है, जैसे कि:
 
 
 <Sandpack>
@@ -231,14 +232,14 @@ button { margin-right: 10px; }
 
 अंत में, आपका `Button` कौम्पोनॅन्ट एक prop स्वीकार करता है जिसे `onClick` कहा जाता है। यह prop को सीधे बिल्ट-इन ब्राउज़र `<button>` में `onClick={onClick}` के साथ पास करता है। यह React को यह बताता है कि क्लिक पर पास किया गया फंक्शन कॉल किया जाए।
 
-यदि आप [डिज़ाइन सिस्टम](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969) का उपयोग करते हैं, तो यह सामान्य है कि बटनों जैसे कौम्पोनॅन्ट्स में स्टाइलिंग होती है लेकिन व्यवहार निर्दिष्ट नहीं होता। इसके बजाय, `PlayButton` और `UploadButton` जैसे कौम्पोनॅन्ट्स इवेंट हैंडलर्स को पास करेंगे।
+यदि आप [डिज़ाइन सिस्टम](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969) का उपयोग करते हैं, तो यह सामान्य है कि बटनों जैसे कौम्पोनॅन्ट्स में स्टाइलिंग होती है लेकिन व्यवहार निर्दिष्ट नहीं होता। इसके बजाय, `PlayButton` और `UploadButton` जैसे कौम्पोनॅन्ट्स event हैंडलर्स को पास करेंगे।
 
 
-### इवेंट हैंडलर props का नामकरण {/*naming-event-handler-props*/}
+### Event हैंडलर props का नामकरण {/*naming-event-handler-props*/}
 
-बिल्ट-इन कौम्पोनॅन्ट्स जैसे `<button>` और `<div>` केवल [ब्राउज़र इवेंट नामों](/reference/react-dom/components/common#common-props) का समर्थन करते हैं जैसे `onClick`। हालांकि, जब आप अपने खुद के कौम्पोनॅन्ट्स बना रहे होते हैं, तो आप उनके इवेंट हैंडलर props का नाम किसी भी तरीके से रख सकते हैं जो आपको पसंद हो।
+बिल्ट-इन कौम्पोनॅन्ट्स जैसे `<button>` और `<div>` केवल [ब्राउज़र event नामों](/reference/react-dom/components/common#common-props) का समर्थन करते हैं जैसे `onClick`। हालांकि, जब आप अपने खुद के कौम्पोनॅन्ट्स बना रहे होते हैं, तो आप उनके event हैंडलर props का नाम किसी भी तरीके से रख सकते हैं जो आपको पसंद हो।
 
-परंपरा के अनुसार, इवेंट हैंडलर props को `on` से शुरू करना चाहिए, इसके बाद एक बड़ा अक्षर होना चाहिए।
+परंपरा के अनुसार, event हैंडलर props को `on` से शुरू करना चाहिए, इसके बाद एक बड़ा अक्षर होना चाहिए।
 
 उदाहरण के लिए, `Button` कौम्पोनॅन्ट के `onClick` prop को `onSmash` भी कहा जा सकता था:
 
@@ -277,7 +278,7 @@ button { margin-right: 10px; }
 
 इस उदाहरण में, `<button onClick={onSmash}>` यह दिखाता है कि ब्राउज़र `<button>` (लोअरकेस) को अभी भी `onClick` नामक prop की आवश्यकता होती है, लेकिन आपकी कस्टम `Button` कौम्पोनॅन्ट द्वारा प्राप्त prop का नाम आपके ऊपर है!
 
-जब आपका कौम्पोनॅन्ट कई इंटरएक्शन्स का समर्थन करता है, तो आप इवेंट हैंडलर props को ऐप-स्पेसिफिक अवधारणाओं के लिए नाम दे सकते हैं। उदाहरण के लिए, यह `Toolbar` कौम्पोनॅन्ट `onPlayMovie` और `onUploadImage` इवेंट हैंडलर्स प्राप्त करता है:
+जब आपका कौम्पोनॅन्ट कई इंटरएक्शन्स का समर्थन करता है, तो आप event हैंडलर props को ऐप-स्पेसिफिक अवधारणाओं के लिए नाम दे सकते हैं। उदाहरण के लिए, यह `Toolbar` कौम्पोनॅन्ट `onPlayMovie` और `onUploadImage` event हैंडलर्स प्राप्त करता है:
 
 
 <Sandpack>
@@ -374,7 +375,7 @@ button { margin: 5px; }
 
 <Pitfall>
 
-सभी इवेंट्स React में प्रचारित होते हैं, सिवाय `onScroll` के, जो केवल उसी JSX टैग पर काम करता है जिसे आपने इसे अटैच किया है।
+सभी events्स React में प्रचारित होते हैं, सिवाय `onScroll` के, जो केवल उसी JSX टैग पर काम करता है जिसे आपने इसे अटैच किया है।
 
 </Pitfall>
 
@@ -481,7 +482,7 @@ function Button({ onClick, children }) {
 }
 ```
 
-आप इस हैंडलर में पैरेंट के `onClick` event handler को कॉल करने से पहले और भी कोड जोड़ सकते हैं। यह पैटर्न प्रचारण का एक *विकल्प* प्रदान करता है। यह बच्चे के कौम्पोनॅन्ट को इवेंट को संभालने देता है, जबकि पैरेंट कौम्पोनॅन्ट को कुछ अतिरिक्त व्यवहार निर्दिष्ट करने की अनुमति देता है। प्रचारण के विपरीत, यह स्वचालित नहीं होता है। लेकिन इस पैटर्न का लाभ यह है कि आप उस पूरी कोड चेन को स्पष्ट रूप से देख सकते हैं जो किसी event के परिणामस्वरूप निष्पादित होती है।
+आप इस हैंडलर में पैरेंट के `onClick` event handler को कॉल करने से पहले और भी कोड जोड़ सकते हैं। यह पैटर्न प्रचारण का एक *विकल्प* प्रदान करता है। यह बच्चे के कौम्पोनॅन्ट को event को संभालने देता है, जबकि पैरेंट कौम्पोनॅन्ट को कुछ अतिरिक्त व्यवहार निर्दिष्ट करने की अनुमति देता है। प्रचारण के विपरीत, यह स्वचालित नहीं होता है। लेकिन इस पैटर्न का लाभ यह है कि आप उस पूरी कोड चेन को स्पष्ट रूप से देख सकते हैं जो किसी event के परिणामस्वरूप निष्पादित होती है।
 
 अगर आप प्रचारण पर निर्भर हैं और यह ट्रेस करना मुश्किल हो कि कौन से हैंडलर्स निष्पादित होते हैं और क्यों, तो इसके बजाय यह तरीका आजमाएं।