From d5d59a0ab7a2bfe583c0529edc041574e6055bcb Mon Sep 17 00:00:00 2001
From: Jug Patel <87638820+MadDevMax@users.noreply.github.com>
Date: Tue, 24 Dec 2024 12:26:56 +0530
Subject: [PATCH 1/9] Update manipulating-the-dom-with-refs.md
translated manipulating dom page.
---
.../learn/manipulating-the-dom-with-refs.md | 205 +++++++++---------
1 file changed, 103 insertions(+), 102 deletions(-)
diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
index e366ea7cc..a3ca98b35 100644
--- a/src/content/learn/manipulating-the-dom-with-refs.md
+++ b/src/content/learn/manipulating-the-dom-with-refs.md
@@ -1,52 +1,52 @@
---
-title: 'Manipulating the DOM with Refs'
+title: 'Refs के साथ DOM में बदलाव करना'
---
-React automatically updates the [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) to match your render output, so your components won't often need to manipulate it. However, sometimes you might need access to the DOM elements managed by React--for example, to focus a node, scroll to it, or measure its size and position. There is no built-in way to do those things in React, so you will need a *ref* to the DOM node.
+React स्वचालित रूप से [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) को आपके रेंडर आउटपुट के अनुसार अपडेट करता है, जिससे आपके कंपोनेंट्स को अक्सर इसे मैन्युपुलेट करने की आवश्यकता नहीं होती। हालांकि, कभी-कभी आपको React द्वारा मैनेज किए गए DOM एलिमेंट्स तक पहुंचने की आवश्यकता हो सकती है—जैसे किसी नोड को फोकस करना, स्क्रॉल करना, या उसका आकार और स्थिति मापना। React में इन चीज़ों के लिए कोई बिल्ट-इन तरीका नहीं है, इसलिए आपको DOM नोड के लिए एक *ref* की आवश्यकता होगी।
-- How to access a DOM node managed by React with the `ref` attribute
-- How the `ref` JSX attribute relates to the `useRef` Hook
-- How to access another component's DOM node
-- In which cases it's safe to modify the DOM managed by React
+- React द्वारा मैनेज किए गए DOM नोड तक `ref` एट्रिब्यूट के साथ कैसे पहुंचें
+- `ref` JSX एट्रिब्यूट का `useRef` हुक से क्या संबंध है
+- किसी दूसरे कंपोनेंट के DOM नोड तक कैसे पहुंचें
+- किन मामलों में React द्वारा मैनेज किए गए DOM को बदलना सुरक्षित है
-## Getting a ref to the node {/*getting-a-ref-to-the-node*/}
+## नोड के लिए ref प्राप्त करना {/*getting-a-ref-to-the-node*/}
-To access a DOM node managed by React, first, import the `useRef` Hook:
+React द्वारा मैनेज किए गए DOM नोड तक पहुंचने के लिए, सबसे पहले `useRef` हुक को इम्पोर्ट करें:
```js
import { useRef } from 'react';
```
-Then, use it to declare a ref inside your component:
+फिर, इसे अपने कंपोनेंट के अंदर एक ref घोषित करने के लिए उपयोग करें:
```js
const myRef = useRef(null);
```
-Finally, pass your ref as the `ref` attribute to the JSX tag for which you want to get the DOM node:
+अंत में, अपने ref को उस JSX टैग के `ref` एट्रिब्यूट के रूप में पास करें जिसके लिए आप DOM नोड प्राप्त करना चाहते हैं:
```js
```
-The `useRef` Hook returns an object with a single property called `current`. Initially, `myRef.current` will be `null`. When React creates a DOM node for this `
`, React will put a reference to this node into `myRef.current`. You can then access this DOM node from your [event handlers](/learn/responding-to-events) and use the built-in [browser APIs](https://developer.mozilla.org/docs/Web/API/Element) defined on it.
+`useRef` हुक एक ऑब्जेक्ट रिटर्न करता है जिसमें एकमात्र प्रॉपर्टी होती है, जिसे `current` कहा जाता है। शुरुआत में, `myRef.current` का मान `null` होगा। जब React इस `
` के लिए एक DOM नोड बनाएगा, तो React इस नोड का रेफरेंस `myRef.current` में डाल देगा। इसके बाद आप इस DOM नोड को अपने [इवेंट हैंडलर्स](/learn/responding-to-events) से एक्सेस कर सकते हैं और उस पर परिभाषित [ब्राउज़र APIs](https://developer.mozilla.org/docs/Web/API/Element) का उपयोग कर सकते हैं।
```js
-// You can use any browser APIs, for example:
+// आप किसी भी ब्राउज़र API का उपयोग कर सकते हैं, उदाहरण के लिए:
myRef.current.scrollIntoView();
```
-### Example: Focusing a text input {/*example-focusing-a-text-input*/}
+### उदाहरण: टेक्स्ट इनपुट पर फोकस करना {/*example-focusing-a-text-input*/}
-In this example, clicking the button will focus the input:
+इस उदाहरण में, बटन पर क्लिक करने से इनपुट पर फोकस होगा:
@@ -64,7 +64,7 @@ export default function Form() {
<>
);
@@ -73,18 +73,18 @@ export default function Form() {
-To implement this:
+इसका उपयोग करने के लिए:
-1. Declare `inputRef` with the `useRef` Hook.
-2. Pass it as ``. This tells React to **put this ``'s DOM node into `inputRef.current`.**
-3. In the `handleClick` function, read the input DOM node from `inputRef.current` and call [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on it with `inputRef.current.focus()`.
-4. Pass the `handleClick` event handler to `