From f36fa24ec06512790923ab741c77d3359223dc43 Mon Sep 17 00:00:00 2001 From: gunadhya11 Date: Thu, 25 Jul 2024 00:16:03 +0530 Subject: [PATCH 01/11] first test commit --- src/content/learn/preserving-and-resetting-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md index d35071845..7cbff3cd5 100644 --- a/src/content/learn/preserving-and-resetting-state.md +++ b/src/content/learn/preserving-and-resetting-state.md @@ -4,7 +4,7 @@ title: Preserving and Resetting State -State is isolated between components. React keeps track of which state belongs to which component based on their place in the UI tree. You can control when to preserve state and when to reset it between re-renders. +State is isolated between कॉम्पोनेन्ट. React keeps track of which state belongs to which component based on their place in the UI tree. You can control when to preserve state and when to reset it between re-renders. From 8d7b10385e744dc083c7cbdb9e4435f624d16614 Mon Sep 17 00:00:00 2001 From: gunadhya11 Date: Thu, 25 Jul 2024 00:26:25 +0530 Subject: [PATCH 02/11] introduction translated --- src/content/learn/preserving-and-resetting-state.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md index 7cbff3cd5..ee6e9c14f 100644 --- a/src/content/learn/preserving-and-resetting-state.md +++ b/src/content/learn/preserving-and-resetting-state.md @@ -2,9 +2,9 @@ title: Preserving and Resetting State --- - + -State is isolated between कॉम्पोनेन्ट. React keeps track of which state belongs to which component based on their place in the UI tree. You can control when to preserve state and when to reset it between re-renders. +State हर एक कॉम्पोनेन्ट के लिए अलग है |. कॉम्पोनेन्ट ui ट्री में कहा है इस आधार पर react state का हिसाब रखता है की कोनसा स्टेट कोनसे कॉम्पोनेन्ट का है | आप पुनश्च रेंडर में state को कब संरक्षित करना है और कब रिसेट करना नियंत्रित कर सकते है | From 5b761503ecb2db5ffab6f1b4b31268e2ec0139ba Mon Sep 17 00:00:00 2001 From: gunadhya11 Date: Thu, 25 Jul 2024 01:05:27 +0530 Subject: [PATCH 03/11] translating first page --- src/content/learn/preserving-and-resetting-state.md | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md index ee6e9c14f..05924ea7c 100644 --- a/src/content/learn/preserving-and-resetting-state.md +++ b/src/content/learn/preserving-and-resetting-state.md @@ -4,25 +4,27 @@ title: Preserving and Resetting State -State हर एक कॉम्पोनेन्ट के लिए अलग है |. कॉम्पोनेन्ट ui ट्री में कहा है इस आधार पर react state का हिसाब रखता है की कोनसा स्टेट कोनसे कॉम्पोनेन्ट का है | आप पुनश्च रेंडर में state को कब संरक्षित करना है और कब रिसेट करना नियंत्रित कर सकते है | +State हर एक कॉम्पोनेन्ट के लिए अलग है |. कॉम्पोनेन्ट ui ट्री में कहा है इस आधार पर react state का हिसाब रखता है की कोनसा स्टेट कोनसे कॉम्पोनेन्ट का है | आप पुनश्च रेंडर में state को कब संरक्षित करना है और कब रिसेट करना है यह नियंत्रित कर सकते है | -* When React chooses to preserve or reset the state -* How to force React to reset component's state -* How keys and types affect whether the state is preserved +* react state संरक्षित करना है अथवा रिसेट करना है इसका चयन कब करता है +* कैसे react बलपूर्वक कॉम्पोनेन्ट का state रिसेट कर सकता है +* state संरक्षित करने में keys और types कैसे प्रभावित करते है ## State is tied to a position in the render tree {/*state-is-tied-to-a-position-in-the-tree*/} React builds [render trees](learn/understanding-your-ui-as-a-tree#the-render-tree) for the component structure in your UI. +react आपके उपयोगकर्ता इंटरफ़ेस में कॉम्पोनेन्ट संरचना के लिए (रेंडर ट्रीज)बनाता है | -When you give a component state, you might think the state "lives" inside the component. But the state is actually held inside React. React associates each piece of state it's holding with the correct component by where that component sits in the render tree. +जब आप एक कॉम्पोनेन्ट को state देते हो , तो आप यह कल्पना कर सकते हो की state कॉम्पोनेन्ट के अंदर 'रहता ' है | परन्तु state वास्तव में react में पकड़ा हुआ होता है react हर एक कॉम्पोनेन्ट को state का हर एक भाग जो उसने पकड़ा हुआ है , उसे सही कॉम्पोनेन्ट से जोड़ता है की वो कॉम्पोनेन्ट render tree में कहा है Here, there is only one `` JSX tag, but it's rendered at two different positions: +यहाँ वास्तव में केवल एक `` jsx टैग है, परन्तु वह दो अलग जगह पर रेंडर हुआ है| @@ -87,6 +89,7 @@ label { Here's how these look as a tree: +यहां बताया गया है कि ये tree के स्वरुप में कैसे दिखता है | From 17e950f2307ab46f789f6b7bdbca663f1fc6d0dc Mon Sep 17 00:00:00 2001 From: gunadhya11 Date: Thu, 25 Jul 2024 01:44:07 +0530 Subject: [PATCH 04/11] translating introduction --- src/content/learn/preserving-and-resetting-state.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md index 05924ea7c..5842e0a2d 100644 --- a/src/content/learn/preserving-and-resetting-state.md +++ b/src/content/learn/preserving-and-resetting-state.md @@ -101,11 +101,11 @@ React tree -**These are two separate counters because each is rendered at its own position in the tree.** You don't usually have to think about these positions to use React, but it can be useful to understand how it works. +**ये दो अलग अलग counters है क्योंकि हर एक कॉम्पोनेन्ट tree में अपने स्वतंत्र स्थान पर रेंडर हुआ है |** आम तौर पर आप को इन स्थानो के बारे में सोचने की आवश्यकता नहीं है, परन्तु यह कैसे काम करता है यह समझने के लिए उपयुक्त होगा | -In React, each component on the screen has fully isolated state. For example, if you render two `Counter` components side by side, each of them will get its own, independent, `score` and `hover` states. +React में, स्क्रीन पर हर एक कॉम्पोनेन्ट का पूरी तरह से अलग state होता है | उदहारण के तौर पर , यदि आप दी counter कॉम्पोनेंट्स एक के बाजु में एक रेंडर करेंगे, तो उनमे से हर एक को अपना स्वतंत्र 'score ' और 'hover ' state मिलेगा| -Try clicking both counters and notice they don't affect each other: +दोनों counters को क्लिक करने का प्रयत्न करें और ध्यान दें की वह दोनों एक दूसरे को प्रभावित नहीं करते: From 5c8dd5e4ee10db06edf50fadfade4d03550ab54e Mon Sep 17 00:00:00 2001 From: gunadhya11 Date: Thu, 25 Jul 2024 23:11:24 +0530 Subject: [PATCH 05/11] adding hindi translation --- .../learn/preserving-and-resetting-state.md | 31 ++++++++++--------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md index 5842e0a2d..2096c888c 100644 --- a/src/content/learn/preserving-and-resetting-state.md +++ b/src/content/learn/preserving-and-resetting-state.md @@ -164,7 +164,7 @@ function Counter() { As you can see, when one counter is updated, only the state for that component is updated: - +जैसा की आप देख सकते हैं , जब एक counter अपडेट होता है तो केवल उसी कॉम्पोनेन्ट की state अपडेट होती है | @@ -176,8 +176,7 @@ Updating state - -React will keep the state around for as long as you render the same component at the same position in the tree. To see this, increment both counters, then remove the second component by unchecking "Render the second counter" checkbox, and then add it back by ticking it again: +जब तक आप tree में एक कॉम्पोनेन्ट समान स्थान पर रेंडर करते हैं, तब तक React कॉम्पोनेन्ट state को बनाए रखेगा। इसे देखने के लिए, दोनों counter बढ़ाएँ, फिर "Render the second counter" चेकबॉक्स को अनचेक करके दूसरे कॉम्पोनेन्ट को हटा दें, और फिर उसी चेकबॉक्स को पुनः चेक करके वापस जोड़ दें | @@ -251,35 +250,36 @@ label { -Notice how the moment you stop rendering the second counter, its state disappears completely. That's because when React removes a component, it destroys its state. +ध्यान दें कि जैसे ही आप दूसरे counter को रेंडर करना बंद करते हैं, उसकी state पूरी तरह से गायब हो जाती है। ऐसा इसलिए है क्योंकि जब react किसी कॉम्पोनेन्ट को हटाता है, तो यह उसकी State को नष्ट कर देता है। -Deleting a component +एक कॉम्पोनेन्ट हटाना -When you tick "Render the second counter", a second `Counter` and its state are initialized from scratch (`score = 0`) and added to the DOM. +जब आप "Render the second counter" पर टिक करते हैं, +एक दूसरे `Counter` और उसकी state को स्क्रैच (`score = 0`) से आरंभ किया जाता है और DOM में जोड़ा जाता है। -Adding a component +एक कॉम्पोनेन्ट जोड़ना -**React preserves a component's state for as long as it's being rendered at its position in the UI tree.** If it gets removed, or a different component gets rendered at the same position, React discards its state. +**रिएक्ट एक कॉम्पोनेन्ट की state को तब तक सुरक्षित रखता है जब तक इसे UI tree में अपनी state में रेंडर किया जा रहा है।** यदि इसे हटा दिया जाता है, या एक अलग कॉम्पोनेन्ट को उसी state में रेंडर किया जाता है, तो react अपनी state को त्याग देता है। ## Same component at the same position preserves state {/*same-component-at-the-same-position-preserves-state*/} -In this example, there are two different `` tags: +इस उदाहरण में, दो अलग-अलग `` टैग हैं: @@ -364,24 +364,24 @@ label { -When you tick or clear the checkbox, the counter state does not get reset. Whether `isFancy` is `true` or `false`, you always have a `` as the first child of the `div` returned from the root `App` component: +जब आप चेकबॉक्स को टिक या clear करते हैं, तो counter state रीसेट नहीं होती है। चाहे `isFancy` `true` हो या `false`, आपके पास रूट `App` कॉम्पोनेन्ट से लौटाए गए `div` के पहले चाइल्ड नोड के रूप में हमेशा एक `` होता है: -Updating the `App` state does not reset the `Counter` because `Counter` stays in the same position +`App` की स्थिति को अपडेट करने से `Counter` रीसेट नहीं होता क्योंकि `Counter` उसी state में रहता है। -It's the same component at the same position, so from React's perspective, it's the same counter. +यह एक ही state में एक ही कॉम्पोनेन्ट है, इसलिए React के दृष्टिकोण से, यह एक ही Counter है। -Remember that **it's the position in the UI tree--not in the JSX markup--that matters to React!** This component has two `return` clauses with different `` JSX tags inside and outside the `if`: +इसे याद रखें की **यह यूआई ट्री में state है - JSX मार्कअप में नहीं - जो React के लिए मायने रखती है!** इस कॉम्पोनेन्ट में `if` के अंदर और बाहर अलग-अलग `` JSX टैग के साथ दो `return` क्लॉज हैं: @@ -479,9 +479,10 @@ label { -You might expect the state to reset when you tick checkbox, but it doesn't! This is because **both of these `` tags are rendered at the same position.** React doesn't know where you place the conditions in your function. All it "sees" is the tree you return. +जब आप चेकबॉक्स पर टिक करेंगे तो आप उम्मीद कर सकते हैं कि state रीसेट हो जाएगी, लेकिन ऐसा नहीं होता है! ऐसा इसलिए क्योंकि **ये दोनों `` टैग एक ही state में रेंडर किए गए हैं।** रिएक्ट को यह नहीं पता कि आप अपने function में conditions कहां रखते हैं। यह सब "देखता" वह tree है जिसे आप लौटाते हैं। + -In both cases, the `App` component returns a `
` with `` as a first child. To React, these two counters have the same "address": the first child of the first child of the root. This is how React matches them up between the previous and next renders, regardless of how you structure your logic. +दोनों मामलों में, `App` कॉम्पोनेन्ट पहले child के रूप में `` के साथ `
` लौटाता है। React के लिए, इन दोनों Counter का एक ही "पता" है: रूट के पहले child का पहला child। इस प्रकार React पिछले और अगले रेंडर के बीच उनका मेल करता है, भले ही आप अपने तर्क की संरचना कैसे भी करते हों। From fd4a8c93c73f21a8971593c3e4b60b0bb949d88c Mon Sep 17 00:00:00 2001 From: gunadhya11 Date: Sun, 28 Jul 2024 01:59:53 +0530 Subject: [PATCH 06/11] changes for translation --- .../learn/preserving-and-resetting-state.md | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md index 2096c888c..70280c747 100644 --- a/src/content/learn/preserving-and-resetting-state.md +++ b/src/content/learn/preserving-and-resetting-state.md @@ -486,9 +486,9 @@ label { -## Different components at the same position reset state {/*different-components-at-the-same-position-reset-state*/} +## एक ही स्थान में विभिन्न कॉम्पोनेन्ट state को रीसेट करते हैं {/*different-components-at-the-same-position-reset-state*/} -In this example, ticking the checkbox will replace `` with a `

`: +इस उदाहरण में, चेकबॉक्स पर टिक करने से `` को `

` से बदल दिया जाएगा: @@ -565,13 +565,13 @@ label { -Here, you switch between _different_ component types at the same position. Initially, the first child of the `

` contained a `Counter`. But when you swapped in a `p`, React removed the `Counter` from the UI tree and destroyed its state. +यहां, आप एक ही स्थान में _different_ कॉम्पोनेन्ट प्रकारों के बीच स्विच करते हैं। प्रारंभ में, `
` के पहले child में एक `Counter` था। लेकिन जब आपने `p` में स्वैप किया, तो रिएक्ट ने यूआई ट्री से `Counter` को हटा दिया और इसकी state को नष्ट कर दिया। -When `Counter` changes to `p`, the `Counter` is deleted and the `p` is added +जब `Counter` `p` में बदल जाता है, तो `Counter` हटा दिया जाता है और `p` जोड़ा जाता है। @@ -581,13 +581,12 @@ When `Counter` changes to `p`, the `Counter` is deleted and the `p` is added -When switching back, the `p` is deleted and the `Counter` is added +वापस स्विच करने पर, `p` हटा दिया जाता है और `Counter` जोड़ा जाता है। - -Also, **when you render a different component in the same position, it resets the state of its entire subtree.** To see how this works, increment the counter and then tick the checkbox: +साथ ही, **जब आप किसी भिन्न कॉम्पोनेन्ट को एक ही स्थान में प्रस्तुत करते हैं, तो यह उसके संपूर्ण उपवृक्ष की state को रीसेट कर देता है।** यह कैसे काम करता है यह देखने के लिए, काउंटर बढ़ाएं और फिर चेकबॉक्स पर टिक करें: @@ -676,13 +675,14 @@ label { -The counter state gets reset when you click the checkbox. Although you render a `Counter`, the first child of the `div` changes from a `div` to a `section`. When the child `div` was removed from the DOM, the whole tree below it (including the `Counter` and its state) was destroyed as well. +जब आप चेकबॉक्स पर क्लिक करते हैं तो काउंटर state रीसेट हो जाती है। यद्यपि आप एक `काउंटर` प्रस्तुत करते हैं, `div` का पहला child `div` से `सेक्शन` में बदल जाता है। जब child `div` को DOM से हटा दिया गया, तो उसके नीचे का पूरा tree (`Counter` और उसकी state सहित) भी नष्ट हो गया। -When `section` changes to `div`, the `section` is deleted and the new `div` is added + +जब `section` `div` में बदलता है, तो `section` हटा दिया जाता है और नया `div` जोड़ा जाता है @@ -692,13 +692,13 @@ When `section` changes to `div`, the `section` is deleted and the new `div` is a -When switching back, the `div` is deleted and the new `section` is added +वापस स्विच करने पर, `div` हटा दिया जाता है और नया `section` जोड़ा जाता है -As a rule of thumb, **if you want to preserve the state between re-renders, the structure of your tree needs to "match up"** from one render to another. If the structure is different, the state gets destroyed because React destroys state when it removes a component from the tree. +एक सामान्य नियम के रूप में, **यदि आप री-रेंडर के बीच state को संरक्षित करना चाहते हैं, तो आपके पेड़ की संरचना को एक रेंडर से दूसरे रेंडर में "match up" करना होगा**। यदि संरचना भिन्न है, तो state नष्ट हो जाता है क्योंकि जब react tree से एक कॉम्पोनेन्ट को हटाता है तो वह state को नष्ट कर देता है। From a06d5e28efa3520e0181abd8d092e47b83d3c74f Mon Sep 17 00:00:00 2001 From: gunadhya11 Date: Sun, 28 Jul 2024 17:14:31 +0530 Subject: [PATCH 07/11] changes for translation --- .../learn/preserving-and-resetting-state.md | 72 ++++++++++--------- 1 file changed, 40 insertions(+), 32 deletions(-) diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md index 70280c747..360116a8e 100644 --- a/src/content/learn/preserving-and-resetting-state.md +++ b/src/content/learn/preserving-and-resetting-state.md @@ -698,7 +698,7 @@ label { -एक सामान्य नियम के रूप में, **यदि आप री-रेंडर के बीच state को संरक्षित करना चाहते हैं, तो आपके पेड़ की संरचना को एक रेंडर से दूसरे रेंडर में "match up" करना होगा**। यदि संरचना भिन्न है, तो state नष्ट हो जाता है क्योंकि जब react tree से एक कॉम्पोनेन्ट को हटाता है तो वह state को नष्ट कर देता है। +एक सामान्य नियम के रूप में, **यदि आप री-रेंडर के बीच state को संरक्षित करना चाहते हैं, तो आपके tree की संरचना को एक रेंडर से दूसरे रेंडर में "match up" करना होगा**। यदि संरचना भिन्न है, तो state नष्ट हो जाता है क्योंकि जब react tree से एक कॉम्पोनेन्ट को हटाता है तो वह state को नष्ट कर देता है। @@ -738,14 +738,14 @@ export default function MyComponent() { - -Every time you click the button, the input state disappears! This is because a *different* `MyTextField` function is created for every render of `MyComponent`. You're rendering a *different* component in the same position, so React resets all state below. This leads to bugs and performance problems. To avoid this problem, **always declare component functions at the top level, and don't nest their definitions.** +हर बार जब आप बटन क्लिक करते हैं, तो इनपुट state गायब हो जाती है! ऐसा इसलिए है क्योंकि `MyComponent` के प्रत्येक रेंडर के लिए एक *अलग* `MyTextField` function बनाया जाता है। +आप एक *अलग* कॉम्पोनेन्ट को एक ही स्थान में प्रस्तुत कर रहे हैं, इसलिए रिएक्ट नीचे दी गई सभी state को रीसेट कर देता है। इससे बग और प्रदर्शन संबंधी समस्याएं उत्पन्न होती हैं। इस समस्या से बचने के लिए, **हमेशा शीर्ष स्तर पर कॉम्पोनेन्ट कार्यों की घोषणा करें, और उनकी परिभाषाओं को घोंसला न बनाएं।** -## Resetting state at the same position {/*resetting-state-at-the-same-position*/} +## state को उसी स्थान में रीसेट करना {/*resetting-state-at-the-same-position*/} -By default, React preserves state of a component while it stays at the same position. Usually, this is exactly what you want, so it makes sense as the default behavior. But sometimes, you may want to reset a component's state. Consider this app that lets two players keep track of their scores during each turn: +डिफ़ॉल्ट रूप से, रिएक्ट एक कॉम्पोनेन्ट की state को संरक्षित करता है जबकि वह उसी स्थान में रहता है। आमतौर पर, यह वही है जो आप चाहते हैं, इसलिए यह डिफ़ॉल्ट व्यवहार के रूप में समझ में आता है। लेकिन कभी-कभी, आप किसी कॉम्पोनेन्ट की state को रीसेट करना चाह सकते हैं। इस ऐप पर विचार करें जो दो खिलाड़ियों को प्रत्येक मोड़ के दौरान उनके स्कोर पर नज़र रखने की सुविधा देता है: @@ -815,19 +815,20 @@ h1 { -Currently, when you change the player, the score is preserved. The two `Counter`s appear in the same position, so React sees them as *the same* `Counter` whose `person` prop has changed. +वर्तमान में, जब आप खिलाड़ी बदलते हैं, तो स्कोर संरक्षित रहता है। दो `Counter` एक ही स्थान में दिखाई देते हैं, इसलिए रिएक्ट उन्हें *उसी* `Counter` के रूप में देखता है जिसका `person` प्रोप बदल गया है। + +लेकिन वैचारिक रूप से, इस ऐप में वे दो अलग-अलग काउंटर होने चाहिए। वे यूआई में एक ही स्थान पर दिखाई दे सकते हैं, लेकिन एक Taylor के लिए एक counter है, और दूसरा Sarah के लिए एक counter है। -But conceptually, in this app they should be two separate counters. They might appear in the same place in the UI, but one is a counter for Taylor, and another is a counter for Sarah. -There are two ways to reset state when switching between them: +उनके बीच स्विच करते समय state को रीसेट करने के दो तरीके हैं: -1. Render components in different positions -2. Give each component an explicit identity with `key` +1. कॉम्पोनेन्ट को विभिन्न स्थानों में प्रस्तुत करें +2. प्रत्येक कॉम्पोनेन्ट को `key` के साथ एक स्पष्ट पहचान दें -### Option 1: Rendering a component in different positions {/*option-1-rendering-a-component-in-different-positions*/} +### विकल्प 1: एक कॉम्पोनेन्ट को विभिन्न स्थानों में प्रस्तुत करना {/*option-1-rendering-a-component-in-different-positions*/} -If you want these two `Counter`s to be independent, you can render them in two different positions: +यदि आप चाहते हैं कि ये दोनों `Counter` स्वतंत्र हों, तो आप उन्हें दो अलग-अलग स्थानों में प्रस्तुत कर सकते हैं: @@ -898,14 +899,14 @@ h1 { -* Initially, `isPlayerA` is `true`. So the first position contains `Counter` state, and the second one is empty. -* When you click the "Next player" button the first position clears but the second one now contains a `Counter`. +* प्रारंभ में, `isPlayerA` `true` है। तो पहला स्थान में `Counter' state है, और दूसरी state खाली है। +* जब आप "Next player" बटन पर क्लिक करते हैं तो पहला स्थान साफ़ हो जाती है लेकिन दूसरे में अब एक `Counter` होता है। -Initial state +आरंभिक state @@ -923,17 +924,19 @@ Clicking "next" again -Each `Counter`'s state gets destroyed each time it's removed from the DOM. This is why they reset every time you click the button. -This solution is convenient when you only have a few independent components rendered in the same place. In this example, you only have two, so it's not a hassle to render both separately in the JSX. +प्रत्येक `Counter` की state हर बार DOM से हटाए जाने पर नष्ट हो जाती है। यही कारण है कि जब भी आप बटन क्लिक करते हैं तो वे रीसेट हो जाते हैं। + +यह समाधान तब सुविधाजनक होता है जब आपके पास एक ही स्थान पर केवल कुछ स्वतंत्र कॉम्पोनेन्ट प्रस्तुत हों। इस उदाहरण में, आपके पास केवल दो हैं, इसलिए JSX में दोनों को अलग-अलग प्रस्तुत करना कोई परेशानी नहीं है। -### Option 2: Resetting state with a key {/*option-2-resetting-state-with-a-key*/} +### विकल्प 2: एक key के साथ state को रीसेट करना {/*option-2-resetting-state-with-a-key*/} -There is also another, more generic, way to reset a component's state. +किसी कॉम्पोनेन्ट की state को रीसेट करने का एक और, अधिक सामान्य तरीका भी है। -You might have seen `key`s when [rendering lists.](/learn/rendering-lists#keeping-list-items-in-order-with-key) Keys aren't just for lists! You can use keys to make React distinguish between any components. By default, React uses order within the parent ("first counter", "second counter") to discern between components. But keys let you tell React that this is not just a *first* counter, or a *second* counter, but a specific counter--for example, *Taylor's* counter. This way, React will know *Taylor's* counter wherever it appears in the tree! +आपने [सूचियाँ प्रस्तुत करते समय] `key` देखी होगी।(/learn/rendering-lists#keeping-list-items-in-order-with-key) keys केवल सूचियों के लिए नहीं हैं! आप रिएक्ट को किसी भी कॉम्पोनेन्ट के बीच अंतर करने के लिए keys का उपयोग कर सकते हैं। डिफ़ॉल्ट रूप से, रिएक्ट कॉम्पोनेन्ट के बीच अंतर करने के लिए parent ("पहला काउंटर", "दूसरा काउंटर") के भीतर ऑर्डर का उपयोग करता है। +लेकिन keys आपको रिएक्ट को यह बताने देती हैं कि यह केवल *पहला* काउंटर, या *दूसरा* काउंटर नहीं है, बल्कि एक विशिष्ट काउंटर है - उदाहरण के लिए, *Taylor* काउंटर। इस तरह, React को tree में जहां भी दिखाई देगा, *Taylor* के काउंटर का पता चल जाएगा! -In this example, the two ``s don't share state even though they appear in the same place in JSX: +इस उदाहरण में, दो ``की state साझा नहीं करते हैं, भले ही वे JSX में एक ही स्थान पर दिखाई देते हों: @@ -1013,19 +1016,20 @@ Switching between Taylor and Sarah does not preserve the state. This is because )} ``` -Specifying a `key` tells React to use the `key` itself as part of the position, instead of their order within the parent. This is why, even though you render them in the same place in JSX, React sees them as two different counters, and so they will never share state. Every time a counter appears on the screen, its state is created. Every time it is removed, its state is destroyed. Toggling between them resets their state over and over. +`key` निर्दिष्ट करना रिएक्ट को मूल स्थान के भीतर उनके आदेश के बजाय, state के हिस्से के रूप में `key` का उपयोग करने के लिए कहता है। यही कारण है कि, भले ही आप उन्हें JSX में एक ही स्थान पर प्रस्तुत करते हैं, रिएक्ट उन्हें दो अलग-अलग काउंटरों के रूप में देखता है, और इसलिए वे कभी भी state साझा नहीं करेंगे। जब भी कोई काउंटर स्क्रीन पर दिखाई देता है, तो उसकी state बन जाती है। हर बार जब इसे हटाया जाता है, तो इसकी state नष्ट हो जाती है। +उनके बीच टॉगल करने से उनकी state बार-बार रीसेट हो जाती है। -Remember that keys are not globally unique. They only specify the position *within the parent*. +याद रखें कि keys विश्व स्तर पर अद्वितीय नहीं हैं। वे केवल *parent के भीतर* स्थान निर्दिष्ट करते हैं। -### Resetting a form with a key {/*resetting-a-form-with-a-key*/} +### एक key के साथ फॉर्म को रीसेट करना {/*resetting-a-form-with-a-key*/} -Resetting state with a key is particularly useful when dealing with forms. +forms से निपटते समय key के साथ state को रीसेट करना विशेष रूप से उपयोगी होता है। -In this chat app, the `` component contains the text input state: +इस चैट ऐप में, `` कॉम्पोनेन्ट में टेक्स्ट इनपुट state शामिल है: @@ -1120,17 +1124,21 @@ textarea { -Try entering something into the input, and then press "Alice" or "Bob" to choose a different recipient. You will notice that the input state is preserved because the `` is rendered at the same position in the tree. +इनपुट में कुछ दर्ज करने का प्रयास करें, और फिर एक अलग प्राप्तकर्ता चुनने के लिए "Alice" या "Bob" दबाएँ। आप देखेंगे कि इनपुट state संरक्षित है क्योंकि `` को tree में उसी state में प्रस्तुत किया गया है। + + -**In many apps, this may be the desired behavior, but not in a chat app!** You don't want to let the user send a message they already typed to a wrong person due to an accidental click. To fix it, add a `key`: +**कई ऐप्स में, यह वांछित व्यवहार हो सकता है, लेकिन चैट ऐप में नहीं!** +आप किसी आकस्मिक क्लिक के कारण उपयोगकर्ता को वह संदेश किसी गलत व्यक्ति को भेजने नहीं देना चाहेंगे जो उन्होंने पहले ही टाइप कर दिया है। इसे ठीक करने के लिए, एक `key` जोड़ें: ```js ``` -This ensures that when you select a different recipient, the `Chat` component will be recreated from scratch, including any state in the tree below it. React will also re-create the DOM elements instead of reusing them. +यह सुनिश्चित करता है कि जब आप एक अलग प्राप्तकर्ता का चयन करते हैं, तो `Chat` कॉम्पोनेन्ट को स्क्रैच से फिर से बनाया जाएगा, जिसमें इसके नीचे के tree में कोई भी state शामिल होगी। +रिएक्ट DOM तत्वों का पुन: उपयोग करने के बजाय उन्हें फिर से बनाएगा। -Now switching the recipient always clears the text field: +अब प्राप्तकर्ता को स्विच करने से हमेशा टेक्स्ट फ़ील्ड साफ़ हो जाता है: @@ -1227,9 +1235,9 @@ textarea { -#### Preserving state for removed components {/*preserving-state-for-removed-components*/} +#### हटाए गए कॉम्पोनेन्ट के लिए state का संरक्षण {/*preserving-state-for-removed-components*/} -In a real chat app, you'd probably want to recover the input state when the user selects the previous recipient again. There are a few ways to keep the state "alive" for a component that's no longer visible: +एक वास्तविक चैट ऐप में, जब उपयोगकर्ता पिछले प्राप्तकर्ता को फिर से चुनता है तो आप शायद इनपुट state को पुनर्प्राप्त करना चाहेंगे। ऐसे कॉम्पोनेन्ट की state को "जीवित" रखने के कुछ तरीके हैं जो अब दिखाई नहीं देते हैं: - You could render _all_ chats instead of just the current one, but hide all the others with CSS. The chats would not get removed from the tree, so their local state would be preserved. This solution works great for simple UIs. But it can get very slow if the hidden trees are large and contain a lot of DOM nodes. - You could [lift the state up](/learn/sharing-state-between-components) and hold the pending message for each recipient in the parent component. This way, when the child components get removed, it doesn't matter, because it's the parent that keeps the important information. This is the most common solution. From f48d0ff79f7868ac6703c542183235859caa0dd9 Mon Sep 17 00:00:00 2001 From: gunadhya11 Date: Tue, 30 Jul 2024 00:19:58 +0530 Subject: [PATCH 08/11] hindi translation --- .../learn/preserving-and-resetting-state.md | 25 +++++++++---------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md index 360116a8e..eb8e18c97 100644 --- a/src/content/learn/preserving-and-resetting-state.md +++ b/src/content/learn/preserving-and-resetting-state.md @@ -1005,8 +1005,7 @@ h1 { ``` - -Switching between Taylor and Sarah does not preserve the state. This is because **you gave them different `key`s:** +Taylor और Sarah के बीच स्विच करने से state सुरक्षित नहीं रहता। ऐसा इसलिए है क्योंकि **आपने उन्हें अलग-अलग `keys` दी हैं:** ```js {isPlayerA ? ( @@ -1239,20 +1238,20 @@ textarea { एक वास्तविक चैट ऐप में, जब उपयोगकर्ता पिछले प्राप्तकर्ता को फिर से चुनता है तो आप शायद इनपुट state को पुनर्प्राप्त करना चाहेंगे। ऐसे कॉम्पोनेन्ट की state को "जीवित" रखने के कुछ तरीके हैं जो अब दिखाई नहीं देते हैं: -- You could render _all_ chats instead of just the current one, but hide all the others with CSS. The chats would not get removed from the tree, so their local state would be preserved. This solution works great for simple UIs. But it can get very slow if the hidden trees are large and contain a lot of DOM nodes. -- You could [lift the state up](/learn/sharing-state-between-components) and hold the pending message for each recipient in the parent component. This way, when the child components get removed, it doesn't matter, because it's the parent that keeps the important information. This is the most common solution. -- You might also use a different source in addition to React state. For example, you probably want a message draft to persist even if the user accidentally closes the page. To implement this, you could have the `Chat` component initialize its state by reading from the [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), and save the drafts there too. - -No matter which strategy you pick, a chat _with Alice_ is conceptually distinct from a chat _with Bob_, so it makes sense to give a `key` to the `` tree based on the current recipient. +- आप केवल वर्तमान चैट के बजाय _all_ चैट प्रस्तुत कर सकते हैं, लेकिन CSS के साथ अन्य सभी को छिपा सकते हैं। चैट को tree से नहीं हटाया जाएगा, इसलिए उनकी स्थानीय state संरक्षित रहेगी। यह समाधान सरल UI के लिए बढ़िया काम करता है। लेकिन यदि छिपे हुए tree बड़े हैं और उनमें बहुत सारे DOM नोड हैं तो यह बहुत धीमा हो सकता है। +- आप [state को ऊपर उठा सकते हैं](/learn/sharing-state-between-components) और मूल कॉम्पोनेन्ट में प्रत्येक प्राप्तकर्ता के लिए लंबित संदेश को रोक कर रख सकते हैं। इस तरह, जब चाइल्ड कॉम्पोनेन्ट हटा दिए जाते हैं, तो इससे कोई फर्क नहीं पड़ता, क्योंकि यह parent ही हैं जो महत्वपूर्ण जानकारी रखते हैं। यह सबसे आम समाधान है. +- आप React state के अतिरिक्त किसी भिन्न स्रोत का भी उपयोग कर सकते हैं। उदाहरण के लिए, आप संभवतः चाहते हैं कि संदेश ड्राफ्ट बना रहे, भले ही उपयोगकर्ता गलती से page बंद कर दे। इसे लागू करने के लिए, आप 'Chat' कॉम्पोनेन्ट को [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) से पढ़कर अपनी state आरंभ करवा सकते हैं। और वहां ड्राफ्ट भी सहेजें। + +इससे कोई फर्क नहीं पड़ता कि आप कौन सी रणनीति चुनते हैं, Alice_ के साथ चैट वैचारिक रूप से Bob_ के साथ चैट से अलग है, इसलिए वर्तमान प्राप्तकर्ता के आधार पर `` ट्री को `key' देना समझ में आता है। -- React keeps state for as long as the same component is rendered at the same position. -- State is not kept in JSX tags. It's associated with the tree position in which you put that JSX. -- You can force a subtree to reset its state by giving it a different key. -- Don't nest component definitions, or you'll reset state by accident. +- React तब तक state बनाए रखता है जब तक एक ही कॉम्पोनेन्ट को एक ही स्थान में प्रस्तुत किया जाता है। +- state को JSX टैग में नहीं रखा गया है। यह उस tree की state से जुड़ा है जिसमें आपने उस JSX को रखा है। +- आप किसी subtree को एक अलग keys देकर उसकी state को रीसेट करने के लिए बाध्य कर सकते हैं। +- कॉम्पोनेन्ट परिभाषाओं को घोंसला न बनाएं, अन्यथा आप दुर्घटनावश state रीसेट कर देंगे। @@ -1260,9 +1259,9 @@ No matter which strategy you pick, a chat _with Alice_ is conceptually distinct -#### Fix disappearing input text {/*fix-disappearing-input-text*/} +#### गायब हो रहे इनपुट टेक्स्ट को ठीक करें {/*fix-disappearing-input-text*/} -This example shows a message when you press the button. However, pressing the button also accidentally resets the input. Why does this happen? Fix it so that pressing the button does not reset the input text. +जब आप बटन दबाते हैं तो यह उदाहरण एक संदेश दिखाता है। हालाँकि, बटन दबाने से भी गलती से इनपुट रीसेट हो जाता है। ऐसा क्यूँ होता है? इसे ठीक करें ताकि बटन दबाने से इनपुट टेक्स्ट रीसेट न हो। From aa2b971163156753bd5bb2267862fa0a494dc49b Mon Sep 17 00:00:00 2001 From: gunadhya11 Date: Tue, 6 Aug 2024 00:02:26 +0530 Subject: [PATCH 09/11] hindi translation --- .../learn/preserving-and-resetting-state.md | 46 ++++++++++--------- 1 file changed, 25 insertions(+), 21 deletions(-) diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md index eb8e18c97..2a2e15e49 100644 --- a/src/content/learn/preserving-and-resetting-state.md +++ b/src/content/learn/preserving-and-resetting-state.md @@ -1310,9 +1310,10 @@ textarea { display: block; margin: 10px 0; } -The problem is that `Form` is rendered in different positions. In the `if` branch, it is the second child of the `
`, but in the `else` branch, it is the first child. Therefore, the component type in each position changes. The first position changes between holding a `p` and a `Form`, while the second position changes between holding a `Form` and a `button`. React resets the state every time the component type changes. +समस्या यह है कि `Form` को विभिन्न स्थानों में प्रस्तुत किया जाता है। `if` शाखा में, यह `
` का दूसरा child है, लेकिन `else` शाखा में, यह पहला child है। इसलिए, प्रत्येक स्थान में कॉम्पोनेन्ट प्रकार बदलता है। पहला स्थान `p` और `form` को पकड़ने के बीच बदलता है, जबकि दूसरा स्थान `form` और `button` को पकड़ने के बीच बदलता है। हर बार कॉम्पोनेन्ट प्रकार बदलने पर REact state को रीसेट कर देता है। -The easiest solution is to unify the branches so that `Form` always renders in the same position: + +सबसे आसान समाधान शाखाओं को एकजुट करना है ताकि 'Form' हमेशा एक ही स्थान में प्रस्तुत हो: @@ -1357,8 +1358,7 @@ textarea { display: block; margin: 10px 0; } - -Technically, you could also add `null` before `
` in the `else` branch to match the `if` branch structure: +तकनीकी रूप से, आप `if` शाखा संरचना से match करने के लिए `else` शाखा में `` से पहले `null` भी जोड़ सकते हैं: @@ -1406,19 +1406,21 @@ textarea { display: block; margin: 10px 0; } -This way, `Form` is always the second child, so it stays in the same position and keeps its state. But this approach is much less obvious and introduces a risk that someone else will remove that `null`. +इस तरह, `Form` हमेशा दूसरा child होता है, इसलिए यह उसी स्थान में रहता है और अपनी state बनाए रखता है। +लेकिन यह दृष्टिकोण बहुत कम स्पष्ट है और यह जोखिम पैदा करता है कि कोई अन्य व्यक्ति उस `null` को हटा देगा। -#### Swap two form fields {/*swap-two-form-fields*/} +#### दो form fields स्वैप करें {/*swap-two-form-fields*/} + +यह फॉर्म आपको पहला और उपनाम दर्ज करने की सुविधा देता है। इसमें एक चेकबॉक्स भी है जो नियंत्रित करता है कि कौन सा फ़ील्ड पहले जाएगा। जब आप चेकबॉक्स पर टिक करते हैं, तो "Last name" फ़ील्ड "First name" फ़ील्ड से पहले दिखाई देगी। -This form lets you enter first and last name. It also has a checkbox controlling which field goes first. When you tick the checkbox, the "Last name" field will appear before the "First name" field. -It almost works, but there is a bug. If you fill in the "First name" input and tick the checkbox, the text will stay in the first input (which is now "Last name"). Fix it so that the input text *also* moves when you reverse the order. +यह लगभग काम करता है, लेकिन इसमें एक bug है। यदि आप "First name" इनपुट भरते हैं और चेकबॉक्स पर टिक करते हैं, तो टेक्स्ट पहले इनपुट (जो अब "Last name" है) में रहेगा। इसे ठीक करें ताकि जब आप ऑर्डर उलटें तो इनपुट टेक्स्ट *भी* चले। -It seems like for these fields, their position within the parent is not enough. Is there some way to tell React how to match up the state between re-renders? +ऐसा लगता है कि इन fields के लिए, मूल क्षेत्र में उनकी स्थिति पर्याप्त नहीं है। क्या रिएक्ट को यह बताने का कोई तरीका है कि री-रेंडर के बीच की state का match कैसे किया जाए? @@ -1482,7 +1484,8 @@ label { display: block; margin: 10px 0; } -Give a `key` to both `` components in both `if` and `else` branches. This tells React how to "match up" the correct state for either `` even if their order within the parent changes: + +`if` और `else` दोनों शाखाओं में `` दोनों घटकों को `key` दें। यह React को बताता है कि `` के लिए सही state का "match" कैसे किया जाए, भले ही उनका क्रम parent के भीतर बदल जाए: @@ -1544,11 +1547,12 @@ label { display: block; margin: 10px 0; } -#### Reset a detail form {/*reset-a-detail-form*/} +#### विवरण form रीसेट करें {/*reset-a-detail-form*/} + -This is an editable contact list. You can edit the selected contact's details and then either press "Save" to update it, or "Reset" to undo your changes. +यह एक संपादन योग्य संपर्क सूची है. आप चयनित संपर्क के विवरण को संपादित कर सकते हैं और फिर इसे अपडेट करने के लिए या तो "Save" दबा सकते हैं, या अपने परिवर्तनों को पूर्ववत करने के लिए "Reset" दबा सकते हैं। -When you select a different contact (for example, Alice), the state updates but the form keeps showing the previous contact's details. Fix it so that the form gets reset when the selected contact changes. +जब आप कोई भिन्न संपर्क चुनते हैं (उदाहरण के लिए, Alice), तो state अपडेट हो जाती है लेकिन form पिछले संपर्क का विवरण दिखाता रहता है। इसे ठीक करें ताकि चयनित संपर्क बदलने पर form रीसेट हो जाए। @@ -1700,7 +1704,7 @@ button { -Give `key={selectedId}` to the `EditContact` component. This way, switching between different contacts will reset the form: +`EditContact` कॉम्पोनेन्ट को `key={selectedId}` दें। इस तरह, विभिन्न संपर्कों के बीच switch करने से form रीसेट हो जाएगा: @@ -1853,13 +1857,13 @@ button { -#### Clear an image while it's loading {/*clear-an-image-while-its-loading*/} +#### लोड होते समय छवि साफ़ करें {/*clear-an-image-while-its-loading*/} -When you press "Next", the browser starts loading the next image. However, because it's displayed in the same `` tag, by default you would still see the previous image until the next one loads. This may be undesirable if it's important for the text to always match the image. Change it so that the moment you press "Next", the previous image immediately clears. +जब आप "Next" दबाते हैं, तो browser अगली छवि लोड करना शुरू कर देता है। हालाँकि, क्योंकि यह उसी `` टैग में प्रदर्शित होता है, डिफ़ॉल्ट रूप से आपको अगली छवि लोड होने तक पिछली छवि दिखाई देगी। यह अवांछनीय हो सकता है यदि पाठ का हमेशा छवि से मेल खाना महत्वपूर्ण हो। इसे बदलें ताकि जैसे ही आप "Next" दबाएँ, पिछली छवि तुरंत साफ़ हो जाए। -Is there a way to tell React to re-create the DOM instead of reusing it? +क्या रिएक्ट को दोबारा उपयोग करने के बजाय DOM को दोबारा बनाने के लिए कहने का कोई तरीका है? @@ -1929,7 +1933,7 @@ img { width: 150px; height: 150px; } -You can provide a `key` to the `` tag. When that `key` changes, React will re-create the `` DOM node from scratch. This causes a brief flash when each image loads, so it's not something you'd want to do for every image in your app. But it makes sense if you want to ensure the image always matches the text. +आप `` टैग के लिए `key` प्रदान कर सकते हैं। जब वह `key` बदलती है, तो रिएक्ट स्क्रैच से `` DOM नोड को फिर से बनाएगा। प्रत्येक छवि लोड होने पर यह एक संक्षिप्त फ्लैश का कारण बनता है, इसलिए यह ऐसा कुछ नहीं है जो आप अपने ऐप में प्रत्येक छवि के लिए करना चाहेंगे। लेकिन यदि आप यह सुनिश्चित करना चाहते हैं कि छवि हमेशा पाठ से मेल खाती है तो यह समझ में आता है। @@ -1997,11 +2001,11 @@ img { width: 150px; height: 150px; } -#### Fix misplaced state in the list {/*fix-misplaced-state-in-the-list*/} +#### सूची में ग़लत state ठीक करें {/*fix-misplaced-state-in-the-list*/} -In this list, each `Contact` has state that determines whether "Show email" has been pressed for it. Press "Show email" for Alice, and then tick the "Show in reverse order" checkbox. You will notice that it's _Taylor's_ email that is expanded now, but Alice's--which has moved to the bottom--appears collapsed. +इस सूची में, प्रत्येक `Contact` में एक state होती है जो यह निर्धारित करती है कि इसके लिए "Show email" दबाया गया है या नहीं। Alice के लिए "Show email" दबाएँ, और फिर "Show in reverse order" चेकबॉक्स पर टिक करें। आप देखेंगे कि यह _Taylor_ का ईमेल है जिसे अब विस्तारित किया गया है, लेकिन Alice का - जो नीचे चला गया है - ढह गया प्रतीत होता है। -Fix it so that the expanded state is associated with each contact, regardless of the chosen ordering. +इसे ठीक करें ताकि चयनित ऑर्डर की परवाह किए बिना विस्तारित state प्रत्येक संपर्क से संबद्ध हो। From 0a89b3790c200c29e31b0e882ccd966cb110f72e Mon Sep 17 00:00:00 2001 From: gunadhya11 Date: Thu, 22 Aug 2024 16:08:40 +0530 Subject: [PATCH 10/11] changes for hindi translation --- src/content/learn/preserving-and-resetting-state.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md index 2a2e15e49..2552cee0c 100644 --- a/src/content/learn/preserving-and-resetting-state.md +++ b/src/content/learn/preserving-and-resetting-state.md @@ -2095,16 +2095,16 @@ button { -The problem is that this example was using index as a `key`: +समस्या यह है कि यह उदाहरण index को `key` के रूप में उपयोग कर रहा था: ```js {displayedContacts.map((contact, i) =>
  • ``` -However, you want the state to be associated with _each particular contact_. +हालाँकि, आप चाहते हैं कि state _each particular contact_ से संबद्ध हो। -Using the contact ID as a `key` instead fixes the issue: +इसके बजाय संपर्क ID को `key` के रूप में उपयोग करने से समस्या ठीक हो जाती है: @@ -2192,7 +2192,7 @@ button { -State is associated with the tree position. A `key` lets you specify a named position instead of relying on order. +State का सम्बन्ध tree के स्थान से है। एक `key` आपको ऑर्डर पर निर्भर रहने के बजाय एक नामित स्थान निर्दिष्ट करने देती है। From bad96647532b3a6e68561980017ed65dd0f7f479 Mon Sep 17 00:00:00 2001 From: gunadhya11 Date: Thu, 22 Aug 2024 17:31:46 +0530 Subject: [PATCH 11/11] changes for proof reading --- src/components/MDX/Challenges/Challenges.tsx | 2 +- src/components/MDX/ExpandableCallout.tsx | 2 +- src/components/MDX/MDXComponents.tsx | 2 +- .../learn/preserving-and-resetting-state.md | 40 ++++++++----------- 4 files changed, 20 insertions(+), 26 deletions(-) diff --git a/src/components/MDX/Challenges/Challenges.tsx b/src/components/MDX/Challenges/Challenges.tsx index 661269f0e..106fc3c61 100644 --- a/src/components/MDX/Challenges/Challenges.tsx +++ b/src/components/MDX/Challenges/Challenges.tsx @@ -78,7 +78,7 @@ export function Challenges({ children, isRecipes, noTitle, - titleText = isRecipes ? 'Try out some examples' : 'Try out some challenges', + titleText = isRecipes ? 'Try out some examples' : 'कुछ चुनौतियाँ आज़माएँ', titleId = isRecipes ? 'examples' : 'challenges', }: ChallengesProps) { const challenges = parseChallengeContents(children); diff --git a/src/components/MDX/ExpandableCallout.tsx b/src/components/MDX/ExpandableCallout.tsx index 415d5d867..f1481dedc 100644 --- a/src/components/MDX/ExpandableCallout.tsx +++ b/src/components/MDX/ExpandableCallout.tsx @@ -26,7 +26,7 @@ const variantMap = { 'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)', }, note: { - title: 'Note', + title: 'टिप्पणी', Icon: IconNote, containerClasses: 'bg-green-5 dark:bg-green-60 dark:bg-opacity-20 text-primary dark:text-primary-dark text-lg', diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx index 6f99121f7..3d83de495 100644 --- a/src/components/MDX/MDXComponents.tsx +++ b/src/components/MDX/MDXComponents.tsx @@ -197,7 +197,7 @@ function YouWillLearn({ children: any; isChapter?: boolean; }) { - let title = isChapter ? 'In this chapter' : 'You will learn'; + let title = isChapter ? 'In this chapter' : 'आप सीखेंगे '; return {children}; } diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md index 2552cee0c..b6fe88205 100644 --- a/src/content/learn/preserving-and-resetting-state.md +++ b/src/content/learn/preserving-and-resetting-state.md @@ -1,10 +1,10 @@ --- -title: Preserving and Resetting State +title: State का संरक्षण और उसे रिसेट करना --- -State हर एक कॉम्पोनेन्ट के लिए अलग है |. कॉम्पोनेन्ट ui ट्री में कहा है इस आधार पर react state का हिसाब रखता है की कोनसा स्टेट कोनसे कॉम्पोनेन्ट का है | आप पुनश्च रेंडर में state को कब संरक्षित करना है और कब रिसेट करना है यह नियंत्रित कर सकते है | +State हर एक कॉम्पोनेन्ट के लिए अलग है | कॉम्पोनेन्ट ui ट्री में कहा है इस आधार पर react state का हिसाब रखता है की कोनसा state कोनसे कॉम्पोनेन्ट का है | आप पुनश्च रेंडर में state को कब संरक्षित करना है और कब रिसेट करना है यह नियंत्रित कर सकते है | @@ -12,19 +12,17 @@ State हर एक कॉम्पोनेन्ट के लिए अलग * react state संरक्षित करना है अथवा रिसेट करना है इसका चयन कब करता है * कैसे react बलपूर्वक कॉम्पोनेन्ट का state रिसेट कर सकता है -* state संरक्षित करने में keys और types कैसे प्रभावित करते है +* state संरक्षित करने को keys और types कैसे प्रभावित करते है -## State is tied to a position in the render tree {/*state-is-tied-to-a-position-in-the-tree*/} +## state रेंडर ट्री में एक स्थान से बंधा हुआ है {/*state-is-tied-to-a-position-in-the-tree*/} -React builds [render trees](learn/understanding-your-ui-as-a-tree#the-render-tree) for the component structure in your UI. -react आपके उपयोगकर्ता इंटरफ़ेस में कॉम्पोनेन्ट संरचना के लिए (रेंडर ट्रीज)बनाता है | +react आपके उपयोगकर्ता इंटरफ़ेस में कॉम्पोनेन्ट संरचना के लिए [render trees](learn/understanding-your-ui-as-a-tree#the-render-tree) बनाता है | -जब आप एक कॉम्पोनेन्ट को state देते हो , तो आप यह कल्पना कर सकते हो की state कॉम्पोनेन्ट के अंदर 'रहता ' है | परन्तु state वास्तव में react में पकड़ा हुआ होता है react हर एक कॉम्पोनेन्ट को state का हर एक भाग जो उसने पकड़ा हुआ है , उसे सही कॉम्पोनेन्ट से जोड़ता है की वो कॉम्पोनेन्ट render tree में कहा है +जब आप एक कॉम्पोनेन्ट को state देते हो, तो आप यह कल्पना कर सकते हो की state कॉम्पोनेन्ट के अंदर 'रहता ' है। परन्तु state वास्तव में react में पकड़ा हुआ होता है react हर एक कॉम्पोनेन्ट को state का हर एक भाग जो उसने पकड़ा हुआ है, उसे इस आधार पर सही कॉम्पोनेन्ट से जोड़ता है की वो कॉम्पोनेन्ट render tree में कहा है। -Here, there is only one `` JSX tag, but it's rendered at two different positions: -यहाँ वास्तव में केवल एक `` jsx टैग है, परन्तु वह दो अलग जगह पर रेंडर हुआ है| +यहाँ वास्तव में केवल एक `` jsx टैग है, परन्तु वह दो अलग जगह पर रेंडर हुआ है: @@ -87,8 +85,7 @@ label { ``` - -Here's how these look as a tree: + यहां बताया गया है कि ये tree के स्वरुप में कैसे दिखता है | @@ -103,7 +100,7 @@ React tree **ये दो अलग अलग counters है क्योंकि हर एक कॉम्पोनेन्ट tree में अपने स्वतंत्र स्थान पर रेंडर हुआ है |** आम तौर पर आप को इन स्थानो के बारे में सोचने की आवश्यकता नहीं है, परन्तु यह कैसे काम करता है यह समझने के लिए उपयुक्त होगा | -React में, स्क्रीन पर हर एक कॉम्पोनेन्ट का पूरी तरह से अलग state होता है | उदहारण के तौर पर , यदि आप दी counter कॉम्पोनेंट्स एक के बाजु में एक रेंडर करेंगे, तो उनमे से हर एक को अपना स्वतंत्र 'score ' और 'hover ' state मिलेगा| +React में, स्क्रीन पर हर एक कॉम्पोनेन्ट का पूरी तरह से अलग state होता है| उदहारण के तौर पर, यदि आप दो counter कॉम्पोनेंट्स एक के बाजु में एक रेंडर करेंगे, तो उनमे से हर एक को अपना स्वतंत्र 'score' और 'hover' state मिलेगा| दोनों counters को क्लिक करने का प्रयत्न करें और ध्यान दें की वह दोनों एक दूसरे को प्रभावित नहीं करते: @@ -163,20 +160,19 @@ function Counter() { -As you can see, when one counter is updated, only the state for that component is updated: -जैसा की आप देख सकते हैं , जब एक counter अपडेट होता है तो केवल उसी कॉम्पोनेन्ट की state अपडेट होती है | +जैसा की आप देख सकते हैं, जब एक counter अपडेट होता है तो केवल उसी कॉम्पोनेन्ट की state अपडेट होती है: -Updating state +State को अपडेट करना -जब तक आप tree में एक कॉम्पोनेन्ट समान स्थान पर रेंडर करते हैं, तब तक React कॉम्पोनेन्ट state को बनाए रखेगा। इसे देखने के लिए, दोनों counter बढ़ाएँ, फिर "Render the second counter" चेकबॉक्स को अनचेक करके दूसरे कॉम्पोनेन्ट को हटा दें, और फिर उसी चेकबॉक्स को पुनः चेक करके वापस जोड़ दें | +जब तक आप tree में एक कॉम्पोनेन्ट समान स्थान पर रेंडर करते हैं, तब तक React कॉम्पोनेन्ट state को बनाए रखेगा। इसे देखने के लिए, दोनों counter बढ़ाएँ, फिर "Render the second counter" चेकबॉक्स को अनचेक करके दूसरे कॉम्पोनेन्ट को हटा दें, और फिर उसी चेकबॉक्स को पुनः चेक करके वापस जोड़ दें। @@ -277,7 +273,7 @@ label { **रिएक्ट एक कॉम्पोनेन्ट की state को तब तक सुरक्षित रखता है जब तक इसे UI tree में अपनी state में रेंडर किया जा रहा है।** यदि इसे हटा दिया जाता है, या एक अलग कॉम्पोनेन्ट को उसी state में रेंडर किया जाता है, तो react अपनी state को त्याग देता है। -## Same component at the same position preserves state {/*same-component-at-the-same-position-preserves-state*/} +## समान स्थान में समान कॉम्पोनेन्ट state को सुरक्षित रखता है {/*same-component-at-the-same-position-preserves-state*/} इस उदाहरण में, दो अलग-अलग `` टैग हैं: @@ -745,7 +741,7 @@ export default function MyComponent() { ## state को उसी स्थान में रीसेट करना {/*resetting-state-at-the-same-position*/} -डिफ़ॉल्ट रूप से, रिएक्ट एक कॉम्पोनेन्ट की state को संरक्षित करता है जबकि वह उसी स्थान में रहता है। आमतौर पर, यह वही है जो आप चाहते हैं, इसलिए यह डिफ़ॉल्ट व्यवहार के रूप में समझ में आता है। लेकिन कभी-कभी, आप किसी कॉम्पोनेन्ट की state को रीसेट करना चाह सकते हैं। इस ऐप पर विचार करें जो दो खिलाड़ियों को प्रत्येक मोड़ के दौरान उनके स्कोर पर नज़र रखने की सुविधा देता है: +डिफ़ॉल्ट रूप से, रिएक्ट एक कॉम्पोनेन्ट की state को संरक्षित करता है जबकि वह उसी स्थान में रहता है। आमतौर पर, यह वही है जो आप चाहते हैं, इसलिए यह डिफ़ॉल्ट व्यवहार के रूप में समझ में आता है। लेकिन कभी-कभी, आप किसी कॉम्पोनेन्ट की state को रीसेट करना चाह सकते हैं। इस ऐप पर विचार करें जो दो players को प्रत्येक मोड़ के दौरान उनके स्कोर पर नज़र रखने की सुविधा देता है: @@ -815,14 +811,12 @@ h1 { -वर्तमान में, जब आप खिलाड़ी बदलते हैं, तो स्कोर संरक्षित रहता है। दो `Counter` एक ही स्थान में दिखाई देते हैं, इसलिए रिएक्ट उन्हें *उसी* `Counter` के रूप में देखता है जिसका `person` प्रोप बदल गया है। +वर्तमान में, जब आप player बदलते हैं, तो स्कोर संरक्षित रहता है। दो `Counter` एक ही स्थान में दिखाई देते हैं, इसलिए रिएक्ट उन्हें *उसी* `Counter` के रूप में देखता है जिसका `person` प्रोप बदल गया है। लेकिन वैचारिक रूप से, इस ऐप में वे दो अलग-अलग काउंटर होने चाहिए। वे यूआई में एक ही स्थान पर दिखाई दे सकते हैं, लेकिन एक Taylor के लिए एक counter है, और दूसरा Sarah के लिए एक counter है। - उनके बीच स्विच करते समय state को रीसेट करने के दो तरीके हैं: - 1. कॉम्पोनेन्ट को विभिन्न स्थानों में प्रस्तुत करें 2. प्रत्येक कॉम्पोनेन्ट को `key` के साथ एक स्पष्ट पहचान दें @@ -912,13 +906,13 @@ h1 { -Clicking "next" +"next" क्लिक करना -Clicking "next" again +फिर से "next" क्लिक करना