From 1ff8537433e01a7422bc873ca2e6e2ab7dab0707 Mon Sep 17 00:00:00 2001 From: Sanchit Date: Sat, 15 Jan 2022 14:04:39 +0530 Subject: [PATCH 1/5] Done translation till line 258 --- beta/src/pages/learn/conditional-rendering.md | 253 +++++++++--------- 1 file changed, 127 insertions(+), 126 deletions(-) diff --git a/beta/src/pages/learn/conditional-rendering.md b/beta/src/pages/learn/conditional-rendering.md index 8c5288f8f..c56d30b59 100644 --- a/beta/src/pages/learn/conditional-rendering.md +++ b/beta/src/pages/learn/conditional-rendering.md @@ -1,24 +1,24 @@ --- -title: Conditional Rendering +title: कंडिशनल रेण्डरिंग --- -Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like `if` statements, `&&`, and `? :` operators. +आपके कौम्पोनॅन्ट को अक्सर अलग-अलग स्थितियों के आधार पर अलग-अलग चीजें प्रदर्शित करने की आवश्यकता होगी। React में, आप सशर्त रूप से JSX को जावास्क्रिप्ट सिंटैक्स जैसे `if` स्टेटमेंट्स, `&&`, और `? :` ऑपरेटरों। -* How to return different JSX depending on a condition -* How to conditionally include or exclude a piece of JSX -* Common conditional syntax shortcuts you’ll encounter in React codebases +* कैसे एक शर्त(कंडिशन) के आधार पर अलग JSX वापस करे +* कैसे JSX के एक टुकड़े को सशर्त(कंडिशनली) रूप से शामिल या बहिष्कृत करें +* सामान्य सशर्त सिंटैक्स शॉर्टकट जो आपको React कोडबेस में मिलेंगे -## Conditionally returning JSX {/*conditionally-returning-jsx*/} +## सशर्त रूप से JSX लौटाए {/*conditionally-returning-jsx*/} -Let’s say you have a `PackingList` component rendering several `Item`s, which can be marked as packed or not: +मान लें कि आपके पास एक `PackingList` कौम्पोनॅन्ट है जो कई `Item` प्रस्तुत करता है, जिसे पैक किया जा सकता है या नहीं: @@ -32,17 +32,17 @@ export default function PackingList() {

Sally Ride's Packing List

    - - -
@@ -52,9 +52,9 @@ export default function PackingList() { -Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✔) to packed items if `isPacked={true}`. +ध्यान दें कि कुछ `Item` कौम्पोनॅन्ट का `isPacked` प्रोप `false` के बजाय `true` पर सेट है। आप पैक किए गए आइटम में एक चेकमार्क (✔) जोड़ना चाहते हैं यदि `isPacked={true}` है। -You can write this as an [`if`/`else` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) like so: +आप इसे [`if`/`else` स्टेटमेंट](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) के रूप में लिख सकते हैं, इस तरह: ```js if (isPacked) { @@ -63,7 +63,7 @@ if (isPacked) { return
  • {name}
    • ; ``` -If the `isPacked` prop is `true`, this code **returns a different JSX tree**. With this change, some of the items get a checkmark at the end: +यदि `isPacked` prop `true` है, तो यह कोड **एक अलग JSX ट्री देता है**। इस परिवर्तन के साथ, कुछ वस्तुओं को अंत में एक चेकमार्क मिलता है: @@ -80,17 +80,17 @@ export default function PackingList() {

    Sally Ride's Packing List

      - - -
    @@ -100,13 +100,13 @@ export default function PackingList() {     -Try editing what gets returned in either case, and see how the result changes! +किसी भी मामले में जो वापस मिलता है उसे संपादित करने का प्रयास करें, और देखें कि परिणाम कैसे बदलता है! -Notice how you're creating branching logic with JavaScript's `if` and `return` statements. In React, control flow (like conditions) is handled by JavaScript. +ध्यान दें कि आप जावास्क्रिप्ट के `if` और `return` स्टेटमेंट के साथ ब्रांचिंग लॉजिक कैसे बना रहे हैं। React में, नियंत्रण प्रवाह (समान परिस्थितियों) को जावास्क्रिप्ट द्वारा नियंत्रित किया जाता है। ### Conditionally returning nothing with `null` {/*conditionally-returning-nothing-with-null*/} -In some situations, you won't want to render anything at all. For example, say you don't want to show packed items at all. A component must return something. In this case, you can return `null`: +कुछ स्थितियों में, आप कुछ भी प्रस्तुत नहीं करना चाहेंगे। उदाहरण के लिए, मान लें कि आप पैक्ड आइटम बिल्कुल नहीं दिखाना चाहते हैं। एक कौम्पोनॅन्ट को कुछ वापस करना होगा। इस मामले में, आप `null` वापस कर सकते हैं: ```js if (isPacked) { @@ -115,7 +115,7 @@ if (isPacked) { return
  • {name}
    • ; ``` -If `isPacked` is true, the component will return nothing, `null`. Otherwise, it will return JSX to render. +यदि `isPacked` सत्य है, तो कौम्पोनॅन्ट कुछ भी नहीं लौटाएगा, `null`। अन्यथा, यह JSX को रेंडर करने के लिए वापस कर देगा। @@ -132,17 +132,17 @@ export default function PackingList() {

    Sally Ride's Packing List

      - - -
    @@ -152,23 +152,23 @@ export default function PackingList() {     -In practice, returning `null` from a component isn't common because it might surprise a developer trying to render it. More often, you would conditionally include or exclude the component in the parent component's JSX. Here's how to do that! +व्यवहार में, किसी कौम्पोनॅन्ट से `null` लौटाना आम बात नहीं है क्योंकि यह इसे प्रस्तुत करने की कोशिश कर रहे डेवलपर को आश्चर्यचकित कर सकता है। अधिक बार, आप पैरेंट कौम्पोनॅन्ट के JSX में कौम्पोनॅन्ट को सशर्त रूप से शामिल या बहिष्कृत करेंगे। यहाँ यह कैसे करना है! ## Conditionally including JSX {/*conditionally-including-jsx*/} -In the previous example, you controlled which (if any!) JSX tree would be returned by the component. You may already have noticed some duplication in the render output: +पिछले उदाहरण में, आपने नियंत्रित किया था कि कौन सा (यदि कोई हो!) JSX ट्री कौम्पोनॅन्ट द्वारा लौटाया जाएगा। आपने पहले ही रेंडर आउटपुट में कुछ दोहराव देखा होगा: ```js
  • {name} ✔
    • ``` -is very similar to +बहुत समान है ```js
  • {name}
    • ``` -Both of the conditional branches return `
  • ...
    • `: +दोनों सशर्त शाखाएं `
  • ...
    • ` लौटाती हैं: ```js if (isPacked) { @@ -177,13 +177,13 @@ if (isPacked) { return
  • {name}
    • ; ``` -While this duplication isn't harmful, it could make your code harder to maintain. What if you want to change the `className`? You'd have to do it in two places in your code! In such a situation, you could conditionally include a little JSX to make your code more [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself). +हालांकि यह दोहराव हानिकारक नहीं है, लेकिन यह आपके कोड को बनाए रखना कठिन बना सकता है। क्या होगा यदि आप `className` को बदलना चाहते हैं? आपको इसे अपने कोड में दो स्थानों पर करना होगा! ऐसी स्थिति में, आप अपने कोड को और अधिक [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) बनाने के लिए सशर्त रूप से थोड़ा JSX शामिल कर सकते हैं। ### Conditional (ternary) operator (`? :`) {/*conditional-ternary-operator--*/} -JavaScript has a compact syntax for writing a conditional expression -- the [conditional operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) or "ternary operator." +सशर्त अभिव्यक्ति लिखने के लिए जावास्क्रिप्ट में एक कॉम्पैक्ट सिंटैक्स है - [सशर्त ऑपरेटर](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) या "टर्नरी ऑपरेटर।" -Instead of this: +इसके अलावा: ```js if (isPacked) { @@ -192,7 +192,7 @@ if (isPacked) { return
  • {name}
    • ; ``` -You can write this: +आप इसे लिख सकते हैं: ```js return ( @@ -202,15 +202,16 @@ return ( ); ``` -You can read it as *"if `isPacked` is true, then (`?`) render `name + ' ✔'`, otherwise (`:`) render `name`."*) +आप इसे इस प्रकार पढ़ सकते हैं *"यदि `isPacked` सत्य है, तो (`?`) `name +' ✔'` प्रस्तुत करें, अन्यथा (`:`) `name` प्रस्तुत करें।"*) - + -If you're coming from an object-oriented programming background, you might assume that the two examples above are subtly different because one of them may create two different "instances" of `
  • `. But JSX elements aren't "instances" because they don't hold any internal state and aren't real DOM nodes. They're lightweight descriptions, like blueprints. So these two examples, in fact, *are* completely equivalent. [Preserving and Resetting State](/learn/preserving-and-resetting-state) goes into detail about how this works. +यदि आप किसी ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग बैकग्राउंड से आ रहे हैं, तो आप मान सकते हैं कि ऊपर दिए गए दो उदाहरण सूक्ष्म रूप से भिन्न हैं क्योंकि उनमें से एक `
  • ` के दो अलग-अलग "इंस्टेंस" बना सकता है। लेकिन JSX तत्व "इंस्टेंस" नहीं हैं क्योंकि उनके पास कोई आंतरिक state नहीं है और वे वास्तविक DOM नोड नहीं हैं। वे हल्के विवरण हैं, जैसे ब्लूप्रिंट। तो ये दो उदाहरण, वास्तव में, *पूरी तरह* से समतुल्य हैं। [राज्य का संरक्षण और रीसेट करना](/learn/preserving-and-resetting-state) विस्तार से बताता है कि यह कैसे काम करता है। -Now let's say you want to wrap the completed item's text into another HTML tag, like `` to strike it out. You can add even more newlines and parentheses so that it's easier to nest more JSX each of the cases: +अब मान लें कि आप पूर्ण किए गए आइटम के टेक्स्ट को किसी अन्य HTML टैग में लपेटना चाहते हैं, जैसे `` को बाहर निकालने के लिए। आप और भी नई पंक्तियाँ और कोष्ठक जोड़ सकते हैं ताकि प्रत्येक मामले में अधिक JSX को घोंसला बनाना आसान हो: + @@ -234,17 +235,17 @@ export default function PackingList() {

    Sally Ride's Packing List

      - - -
    @@ -254,7 +255,7 @@ export default function PackingList() {     -This style works well for simple conditions, but use it in moderation. If your components get messy with too much nested conditional markup, consider extracting child components to clean things up. In React, markup is a part of your code, so you can use tools like variables and functions to tidy up complex expressions. +यह शैली साधारण परिस्थितियों के लिए अच्छी तरह से काम करती है, लेकिन इसे मॉडरेशन में उपयोग करें। यदि आपके कौम्पोनॅन्ट बहुत अधिक नेस्टेड सशर्त मार्कअप के साथ गड़बड़ हो जाते हैं, तो चीजों को साफ करने के लिए बाल कौम्पोनॅन्टस को निकालने पर विचार करें। React में, मार्कअप आपके कोड का एक हिस्सा है, इसलिए आप जटिल अभिव्यक्तियों को व्यवस्थित करने के लिए वेरिएबल और फ़ंक्शन जैसे टूल का उपयोग कर सकते हैं। ### Logical AND operator (`&&`) {/*logical-and-operator-*/} @@ -288,17 +289,17 @@ export default function PackingList() {

    Sally Ride's Packing List

      - - -
    @@ -369,17 +370,17 @@ export default function PackingList() {

    Sally Ride's Packing List

      - - -
    @@ -415,17 +416,17 @@ export default function PackingList() {

    Sally Ride's Packing List

      - - -
    @@ -472,17 +473,17 @@ export default function PackingList() {

    Sally Ride's Packing List

      - - -
    @@ -510,17 +511,17 @@ export default function PackingList() {

    Sally Ride's Packing List

      - - -
    @@ -558,17 +559,17 @@ export default function PackingList() {

    Sally Ride's Packing List

      - - -
    @@ -602,17 +603,17 @@ export default function PackingList() {

    Sally Ride's Packing List

      - - -
    From ed2184b2e98f16c135b651814f77d974a4bccb1a Mon Sep 17 00:00:00 2001 From: Sanchit Date: Sat, 15 Jan 2022 17:15:03 +0530 Subject: [PATCH 2/5] made the required chages after review 1 --- beta/src/pages/learn/conditional-rendering.md | 46 +++++++++---------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/beta/src/pages/learn/conditional-rendering.md b/beta/src/pages/learn/conditional-rendering.md index c56d30b59..6b655b995 100644 --- a/beta/src/pages/learn/conditional-rendering.md +++ b/beta/src/pages/learn/conditional-rendering.md @@ -1,24 +1,24 @@ --- -title: कंडिशनल रेण्डरिंग +title: कंडीशनल रेंडरिंग --- -आपके कौम्पोनॅन्ट को अक्सर अलग-अलग स्थितियों के आधार पर अलग-अलग चीजें प्रदर्शित करने की आवश्यकता होगी। React में, आप सशर्त रूप से JSX को जावास्क्रिप्ट सिंटैक्स जैसे `if` स्टेटमेंट्स, `&&`, और `? :` ऑपरेटरों। +आपके कौम्पोनॅन्ट को अक्सर अलग-अलग स्थितियों के आधार पर अलग-अलग चीजें डिस्प्ले करने की आवश्यकता होगी। React में, आप JSX को किसी कंडीशन के साथ JavaScript सिंटेक्स जैसे की `if` स्टेटमेंट्स, `&&`, एंड `?:` ऑपरेटर्स को इस्तेमाल करके रेंडर कर सकते है। -* कैसे एक शर्त(कंडिशन) के आधार पर अलग JSX वापस करे -* कैसे JSX के एक टुकड़े को सशर्त(कंडिशनली) रूप से शामिल या बहिष्कृत करें -* सामान्य सशर्त सिंटैक्स शॉर्टकट जो आपको React कोडबेस में मिलेंगे +* कैसे एक कंडीशन के आधार पर अलग JSX रिटर्न करे +* कैसे किसी कंडीशन के आधार पर JSX के एक पीस को शामिल करें या निकालें +* सामान्य कंडीशनल सिंटैक्स शॉर्टकट जो आपको React कोडबेस में मिलेंगे -## सशर्त रूप से JSX लौटाए {/*conditionally-returning-jsx*/} +## कंडीशन के आधार पर JSX को रिटर्न करें {/*conditionally-returning-jsx*/} -मान लें कि आपके पास एक `PackingList` कौम्पोनॅन्ट है जो कई `Item` प्रस्तुत करता है, जिसे पैक किया जा सकता है या नहीं: +मान लें कि आपके पास एक `PackingList` कौम्पोनॅन्ट है जो कई `Item` रेंडर करता है, जिसे मार्क जा सकता है या नहीं: @@ -52,7 +52,7 @@ export default function PackingList() { -ध्यान दें कि कुछ `Item` कौम्पोनॅन्ट का `isPacked` प्रोप `false` के बजाय `true` पर सेट है। आप पैक किए गए आइटम में एक चेकमार्क (✔) जोड़ना चाहते हैं यदि `isPacked={true}` है। +ध्यान दें कि कुछ `Item` कौम्पोनॅन्ट का `isPacked` prop `false` के बजाय `true` पर सेट है। आप पैक किए गए आइटम में एक चेकमार्क (✔) ऐड करना चाहते हैं यदि `isPacked={true}` है। आप इसे [`if`/`else` स्टेटमेंट](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) के रूप में लिख सकते हैं, इस तरह: @@ -63,7 +63,7 @@ if (isPacked) { return
  • {name}
    • ; ``` -यदि `isPacked` prop `true` है, तो यह कोड **एक अलग JSX ट्री देता है**। इस परिवर्तन के साथ, कुछ वस्तुओं को अंत में एक चेकमार्क मिलता है: +यदि `isPacked` prop `true` है, तो यह कोड **एक अलग JSX ट्री रिटर्न करता है**। इस परिवर्तन के साथ, कुछ चीज़ों को अंत में एक चेकमार्क मिलता है: @@ -100,13 +100,13 @@ export default function PackingList() { -किसी भी मामले में जो वापस मिलता है उसे संपादित करने का प्रयास करें, और देखें कि परिणाम कैसे बदलता है! +किसी भी केस में जो रिटर्न आता है उसे बदलने का प्रयास करें, और देखें कि परिणाम कैसे बदलता है! -ध्यान दें कि आप जावास्क्रिप्ट के `if` और `return` स्टेटमेंट के साथ ब्रांचिंग लॉजिक कैसे बना रहे हैं। React में, नियंत्रण प्रवाह (समान परिस्थितियों) को जावास्क्रिप्ट द्वारा नियंत्रित किया जाता है। +ध्यान दें कि आप JavaScript के `if` और `return` स्टेटमेंट के साथ ब्रांचिंग लॉजिक कैसे बना रहे हैं। React में, कण्ट्रोल फ्लो (जैसे की कंडीशंस) को JavaScript से नियंत्रित किया जाता है। -### Conditionally returning nothing with `null` {/*conditionally-returning-nothing-with-null*/} +### कंडीशनली के आधार पर `null` को रिटर्न करें {/*conditionally-returning-nothing-with-null*/} -कुछ स्थितियों में, आप कुछ भी प्रस्तुत नहीं करना चाहेंगे। उदाहरण के लिए, मान लें कि आप पैक्ड आइटम बिल्कुल नहीं दिखाना चाहते हैं। एक कौम्पोनॅन्ट को कुछ वापस करना होगा। इस मामले में, आप `null` वापस कर सकते हैं: +कुछ स्थितियों में, आप कुछ भी रेंडर नहीं करना चाहेंगे। उदाहरण के लिए, मान लें कि आप पैक्ड आइटम बिल्कुल नहीं दिखाना चाहते हैं। एक कौम्पोनॅन्ट को कुछ रिटर्न करना होगा। इस केस में, आप `null` रिटर्न कर सकते हैं: ```js if (isPacked) { @@ -115,7 +115,7 @@ if (isPacked) { return
  • {name}
    • ; ``` -यदि `isPacked` सत्य है, तो कौम्पोनॅन्ट कुछ भी नहीं लौटाएगा, `null`। अन्यथा, यह JSX को रेंडर करने के लिए वापस कर देगा। +यदि `isPacked` सत्य है, तो कौम्पोनॅन्ट कुछ भी नहीं लौटाएगा, `null`। अन्यथा, यह JSX को रेंडर करने के लिए रिटर्न कर देगा। @@ -152,11 +152,11 @@ export default function PackingList() { -व्यवहार में, किसी कौम्पोनॅन्ट से `null` लौटाना आम बात नहीं है क्योंकि यह इसे प्रस्तुत करने की कोशिश कर रहे डेवलपर को आश्चर्यचकित कर सकता है। अधिक बार, आप पैरेंट कौम्पोनॅन्ट के JSX में कौम्पोनॅन्ट को सशर्त रूप से शामिल या बहिष्कृत करेंगे। यहाँ यह कैसे करना है! +व्यवहार में, किसी कौम्पोनॅन्ट से `null` लौटाना आम बात नहीं है क्योंकि यह इसे रेंडर करने की कोशिश कर रहे डेवलपर को आश्चर्यचकित कर सकता है। अधिक बार, आप पैरेंट कौम्पोनॅन्ट के JSX में कौम्पोनॅन्ट को कंडीशनल रूप से शामिल या बहिष्कृत करेंगे। यहाँ यह कैसे करना है! -## Conditionally including JSX {/*conditionally-including-jsx*/} +## कंडीशन के आधार पर JSX को इन्क्लुडे करें {/*conditionally-including-jsx*/} -पिछले उदाहरण में, आपने नियंत्रित किया था कि कौन सा (यदि कोई हो!) JSX ट्री कौम्पोनॅन्ट द्वारा लौटाया जाएगा। आपने पहले ही रेंडर आउटपुट में कुछ दोहराव देखा होगा: +पिछले उदाहरण में, आपने नियंत्रित किया था कि कौन सा (यदि कोई हो!) JSX ट्री कौम्पोनॅन्ट से लौटाया जाएगा। आपने पहले ही रेंडर आउटपुट में कुछ दोहराव देखा होगा: ```js
  • {name} ✔
    • @@ -168,7 +168,7 @@ export default function PackingList() {
  • {name}
    • ``` -दोनों सशर्त शाखाएं `
  • ...
    • ` लौटाती हैं: +दोनों कंडीशनल शाखाएं `
  • ...
    • ` लौटाती हैं: ```js if (isPacked) { @@ -177,11 +177,11 @@ if (isPacked) { return
  • {name}
    • ; ``` -हालांकि यह दोहराव हानिकारक नहीं है, लेकिन यह आपके कोड को बनाए रखना कठिन बना सकता है। क्या होगा यदि आप `className` को बदलना चाहते हैं? आपको इसे अपने कोड में दो स्थानों पर करना होगा! ऐसी स्थिति में, आप अपने कोड को और अधिक [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) बनाने के लिए सशर्त रूप से थोड़ा JSX शामिल कर सकते हैं। +हालांकि यह दोहराव हानिकारक नहीं है, लेकिन यह आपके कोड को बनाए रखना कठिन बना सकता है। क्या होगा यदि आप `className` को बदलना चाहते हैं? आपको इसे अपने कोड में दो स्थानों पर करना होगा! ऐसी स्थिति में, आप अपने कोड को और अधिक [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) बनाने के लिए कंडीशनल रूप से थोड़ा JSX शामिल कर सकते हैं। ### Conditional (ternary) operator (`? :`) {/*conditional-ternary-operator--*/} -सशर्त अभिव्यक्ति लिखने के लिए जावास्क्रिप्ट में एक कॉम्पैक्ट सिंटैक्स है - [सशर्त ऑपरेटर](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) या "टर्नरी ऑपरेटर।" +कंडीशनल अभिव्यक्ति लिखने के लिए JavaScript में एक कॉम्पैक्ट सिंटैक्स है - [कंडीशनल ऑपरेटर](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) या "टर्नरी ऑपरेटर।" इसके अलावा: @@ -202,7 +202,7 @@ return ( ); ``` -आप इसे इस प्रकार पढ़ सकते हैं *"यदि `isPacked` सत्य है, तो (`?`) `name +' ✔'` प्रस्तुत करें, अन्यथा (`:`) `name` प्रस्तुत करें।"*) +आप इसे इस प्रकार पढ़ सकते हैं *"यदि `isPacked` सत्य है, तो (`?`) `name +' ✔'` रेंडर करें, अन्यथा (`:`) `name` रेंडर करें।"*) @@ -210,7 +210,7 @@ return ( -अब मान लें कि आप पूर्ण किए गए आइटम के टेक्स्ट को किसी अन्य HTML टैग में लपेटना चाहते हैं, जैसे `` को बाहर निकालने के लिए। आप और भी नई पंक्तियाँ और कोष्ठक जोड़ सकते हैं ताकि प्रत्येक मामले में अधिक JSX को घोंसला बनाना आसान हो: +अब मान लें कि आप पूर्ण किए गए आइटम के टेक्स्ट को किसी अन्य HTML टैग में लपेटना चाहते हैं, जैसे `` को बाहर निकालने के लिए। आप और भी नई पंक्तियाँ और कोष्ठक जोड़ सकते हैं ताकि प्रत्येक केस में अधिक JSX को घोंसला बनाना आसान हो: @@ -255,7 +255,7 @@ export default function PackingList() { -यह शैली साधारण परिस्थितियों के लिए अच्छी तरह से काम करती है, लेकिन इसे मॉडरेशन में उपयोग करें। यदि आपके कौम्पोनॅन्ट बहुत अधिक नेस्टेड सशर्त मार्कअप के साथ गड़बड़ हो जाते हैं, तो चीजों को साफ करने के लिए बाल कौम्पोनॅन्टस को निकालने पर विचार करें। React में, मार्कअप आपके कोड का एक हिस्सा है, इसलिए आप जटिल अभिव्यक्तियों को व्यवस्थित करने के लिए वेरिएबल और फ़ंक्शन जैसे टूल का उपयोग कर सकते हैं। +यह शैली साधारण परिस्थितियों के लिए अच्छी तरह से काम करती है, लेकिन इसे मॉडरेशन में उपयोग करें। यदि आपके कौम्पोनॅन्ट बहुत अधिक नेस्टेड कंडीशनल मार्कअप के साथ गड़बड़ हो जाते हैं, तो चीजों को साफ करने के लिए बाल कौम्पोनॅन्टस को निकालने पर विचार करें। React में, मार्कअप आपके कोड का एक हिस्सा है, इसलिए आप जटिल अभिव्यक्तियों को व्यवस्थित करने के लिए वेरिएबल और फ़ंक्शन जैसे टूल का उपयोग कर सकते हैं। ### Logical AND operator (`&&`) {/*logical-and-operator-*/} From 62cc8bcc72455e1c96fa58a887093ff2b20f57e6 Mon Sep 17 00:00:00 2001 From: Sanchit Date: Sat, 15 Jan 2022 21:05:19 +0530 Subject: [PATCH 3/5] done the required changes required till line 258 --- beta/src/pages/learn/conditional-rendering.md | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/beta/src/pages/learn/conditional-rendering.md b/beta/src/pages/learn/conditional-rendering.md index 6b655b995..ac353f617 100644 --- a/beta/src/pages/learn/conditional-rendering.md +++ b/beta/src/pages/learn/conditional-rendering.md @@ -104,9 +104,9 @@ export default function PackingList() { ध्यान दें कि आप JavaScript के `if` और `return` स्टेटमेंट के साथ ब्रांचिंग लॉजिक कैसे बना रहे हैं। React में, कण्ट्रोल फ्लो (जैसे की कंडीशंस) को JavaScript से नियंत्रित किया जाता है। -### कंडीशनली के आधार पर `null` को रिटर्न करें {/*conditionally-returning-nothing-with-null*/} +### `null` के साथ कंडीशन के आधार पर कुछ कुछ नहीं रिटर्न करना {/*conditionally-returning-nothing-with-null*/} -कुछ स्थितियों में, आप कुछ भी रेंडर नहीं करना चाहेंगे। उदाहरण के लिए, मान लें कि आप पैक्ड आइटम बिल्कुल नहीं दिखाना चाहते हैं। एक कौम्पोनॅन्ट को कुछ रिटर्न करना होगा। इस केस में, आप `null` रिटर्न कर सकते हैं: +कुछ स्थितियों में, आप कुछ भी रेंडर नहीं करना चाहेंगे। उदाहरण के लिए, मान लें कि आप पैक्ड आइटम बिल्कुल नहीं दिखाना चाहते हैं। लेकिन एक कौम्पोनॅन्ट को तो कुछ न कुछ रिटर्न करना होग। इस केस में, आप `null` रिटर्न कर सकते हैं: ```js if (isPacked) { @@ -115,7 +115,7 @@ if (isPacked) { return
  • {name}
    • ; ``` -यदि `isPacked` सत्य है, तो कौम्पोनॅन्ट कुछ भी नहीं लौटाएगा, `null`। अन्यथा, यह JSX को रेंडर करने के लिए रिटर्न कर देगा। +यदि `isPacked` true है, तो कौम्पोनॅन्ट कुछ भी नहीं लौटाएगा, `null`। नहीं तो, यह JSX को रेंडर करने के लिए रिटर्न कर देगा। @@ -152,23 +152,23 @@ export default function PackingList() { -व्यवहार में, किसी कौम्पोनॅन्ट से `null` लौटाना आम बात नहीं है क्योंकि यह इसे रेंडर करने की कोशिश कर रहे डेवलपर को आश्चर्यचकित कर सकता है। अधिक बार, आप पैरेंट कौम्पोनॅन्ट के JSX में कौम्पोनॅन्ट को कंडीशनल रूप से शामिल या बहिष्कृत करेंगे। यहाँ यह कैसे करना है! +अभ्यास में, किसी कौम्पोनॅन्ट से `null` लौटाना आम बात नहीं है क्योंकि यह इसे रेंडर करने की कोशिश कर रहे डेवलपर को आश्चर्यचकित कर सकता है। अधिक बार, आप पैरेंट कौम्पोनॅन्ट के JSX में कौम्पोनॅन्ट को कंडीशनल रूप से शामिल करेंगे या बहार रखेंगे। यहाँ यह कैसे करना है! -## कंडीशन के आधार पर JSX को इन्क्लुडे करें {/*conditionally-including-jsx*/} +## कंडीशन के आधार पर JSX को इंक्लूड करें {/*conditionally-including-jsx*/} -पिछले उदाहरण में, आपने नियंत्रित किया था कि कौन सा (यदि कोई हो!) JSX ट्री कौम्पोनॅन्ट से लौटाया जाएगा। आपने पहले ही रेंडर आउटपुट में कुछ दोहराव देखा होगा: +पिछले उदाहरण में, आपने नियंत्रित किया था कि कौन सा (यदि कोई हो!) JSX ट्री कौम्पोनॅन्ट से लौटाया जाएगा। आपने पहले ही रेंडर आउटपुट में कुछ डुप्लीकेशन देखा होगा: ```js
  • {name} ✔
    • ``` -बहुत समान है +इससे बहुत समान है ```js
  • {name}
    • ``` -दोनों कंडीशनल शाखाएं `
  • ...
    • ` लौटाती हैं: +दोनों कंडीशनल ब्रांचेज `
  • ...
    • ` रिटर्न करती हैं: ```js if (isPacked) { @@ -177,13 +177,13 @@ if (isPacked) { return
  • {name}
    • ; ``` -हालांकि यह दोहराव हानिकारक नहीं है, लेकिन यह आपके कोड को बनाए रखना कठिन बना सकता है। क्या होगा यदि आप `className` को बदलना चाहते हैं? आपको इसे अपने कोड में दो स्थानों पर करना होगा! ऐसी स्थिति में, आप अपने कोड को और अधिक [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) बनाने के लिए कंडीशनल रूप से थोड़ा JSX शामिल कर सकते हैं। +हालांकि यह डुप्लीकेशन हानिकारक नहीं है, लेकिन यह आपके कोड को मेन्टेन करना कठिन बना सकता है। क्या होगा यदि आप `className` को बदलना चाहते हैं? आपको इसे अपने कोड में दो स्थानों पर करना होगा! ऐसी स्थिति में, आप अपने कोड को और अधिक [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) बनाने के लिए कंडीशनल रूप से थोड़ा JSX शामिल कर सकते हैं। ### Conditional (ternary) operator (`? :`) {/*conditional-ternary-operator--*/} -कंडीशनल अभिव्यक्ति लिखने के लिए JavaScript में एक कॉम्पैक्ट सिंटैक्स है - [कंडीशनल ऑपरेटर](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) या "टर्नरी ऑपरेटर।" +कंडीशनल एक्सप्रेशन लिखने के लिए JavaScript में एक कॉम्पैक्ट सिंटैक्स है - [कंडीशनल ऑपरेटर](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) या "टर्नरी ऑपरेटर।" -इसके अलावा: +इसके बजाये: ```js if (isPacked) { @@ -202,15 +202,15 @@ return ( ); ``` -आप इसे इस प्रकार पढ़ सकते हैं *"यदि `isPacked` सत्य है, तो (`?`) `name +' ✔'` रेंडर करें, अन्यथा (`:`) `name` रेंडर करें।"*) +आप इसे इस प्रकार पढ़ सकते हैं *"यदि `isPacked` true है, तो (`?`) `name +' ✔'` रेंडर करें, नहीं तो (`:`) `name` रेंडर करें।"*) - + -यदि आप किसी ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग बैकग्राउंड से आ रहे हैं, तो आप मान सकते हैं कि ऊपर दिए गए दो उदाहरण सूक्ष्म रूप से भिन्न हैं क्योंकि उनमें से एक `
  • ` के दो अलग-अलग "इंस्टेंस" बना सकता है। लेकिन JSX तत्व "इंस्टेंस" नहीं हैं क्योंकि उनके पास कोई आंतरिक state नहीं है और वे वास्तविक DOM नोड नहीं हैं। वे हल्के विवरण हैं, जैसे ब्लूप्रिंट। तो ये दो उदाहरण, वास्तव में, *पूरी तरह* से समतुल्य हैं। [राज्य का संरक्षण और रीसेट करना](/learn/preserving-and-resetting-state) विस्तार से बताता है कि यह कैसे काम करता है। +यदि आप किसी ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग बैकग्राउंड से आ रहे हैं, तो आप मान सकते हैं कि ऊपर दिए गए दो उदाहरण सूक्ष्म रूप से भिन्न हैं क्योंकि उनमें से एक `
  • ` के दो अलग-अलग "इंस्टेंस" बना सकता है। लेकिन JSX एलिमेंट्स "इंस्टेंस" नहीं हैं क्योंकि उनके पास कोई आंतरिक state नहीं है और वे असली DOM नोड नहीं हैं। वे हल्के विवरण हैं, जैसे ब्लूप्रिंट। तो ये दो उदाहरण, असली में, *पूरी तरह* से समान हैं। [State को प्रेसेर्व और रीसेट करना](/learn/preserving-and-resetting-state) विस्तार से बताता है कि यह कैसे काम करता है। -अब मान लें कि आप पूर्ण किए गए आइटम के टेक्स्ट को किसी अन्य HTML टैग में लपेटना चाहते हैं, जैसे `` को बाहर निकालने के लिए। आप और भी नई पंक्तियाँ और कोष्ठक जोड़ सकते हैं ताकि प्रत्येक केस में अधिक JSX को घोंसला बनाना आसान हो: +अब मान लें कि आप पूर्ण किए गए आइटम के टेक्स्ट को किसी अन्य HTML टैग में ऐड करना चाहते हैं, जैसे `` को बाहर निकालने के लिए। आप और भी नई पंक्तियाँ और पैरेंथेसेस ऐड कर सकते हैं ताकि प्रत्येक केस में अधिक JSX को नेस्ट बनाना आसान हो: @@ -255,7 +255,7 @@ export default function PackingList() { -यह शैली साधारण परिस्थितियों के लिए अच्छी तरह से काम करती है, लेकिन इसे मॉडरेशन में उपयोग करें। यदि आपके कौम्पोनॅन्ट बहुत अधिक नेस्टेड कंडीशनल मार्कअप के साथ गड़बड़ हो जाते हैं, तो चीजों को साफ करने के लिए बाल कौम्पोनॅन्टस को निकालने पर विचार करें। React में, मार्कअप आपके कोड का एक हिस्सा है, इसलिए आप जटिल अभिव्यक्तियों को व्यवस्थित करने के लिए वेरिएबल और फ़ंक्शन जैसे टूल का उपयोग कर सकते हैं। +यह तरीका साधारण परिस्थितियों के लिए अच्छी तरह से काम करती है, लेकिन इसे मॉडरेशन में उपयोग करें। यदि आपके कौम्पोनॅन्ट बहुत अधिक नेस्टेड कंडीशनल मार्कअप के साथ कीच-पिच हो जाते हैं, तो चीजों को साफ करने के लिए चाइल्ड कौम्पोनॅन्टस को निकालने पर विचार करें। React में, मार्कअप आपके कोड का एक हिस्सा है, इसलिए आप काम्प्लेक्स एक्सप्रेशंस को व्यवस्थित करने के लिए वेरिएबल और फ़ंक्शन जैसे टूल का उपयोग कर सकते हैं। ### Logical AND operator (`&&`) {/*logical-and-operator-*/} From 2d8d61ff387e0789d75a130a73ec437055801963 Mon Sep 17 00:00:00 2001 From: Sanchit Date: Sat, 15 Jan 2022 21:24:34 +0530 Subject: [PATCH 4/5] changed line 213 --- beta/src/pages/learn/conditional-rendering.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/learn/conditional-rendering.md b/beta/src/pages/learn/conditional-rendering.md index ac353f617..5dcd426a6 100644 --- a/beta/src/pages/learn/conditional-rendering.md +++ b/beta/src/pages/learn/conditional-rendering.md @@ -210,7 +210,7 @@ return ( -अब मान लें कि आप पूर्ण किए गए आइटम के टेक्स्ट को किसी अन्य HTML टैग में ऐड करना चाहते हैं, जैसे `` को बाहर निकालने के लिए। आप और भी नई पंक्तियाँ और पैरेंथेसेस ऐड कर सकते हैं ताकि प्रत्येक केस में अधिक JSX को नेस्ट बनाना आसान हो: +अब मान लें कि आप पूर्ण किए गए आइटम के टेक्स्ट को किसी अन्य HTML टैग में ऐड करना चाहते हैं, जैसे `` को बाहर निकालने के लिए। आप और भी नई पंक्तियाँ और पैरेंथेसेस ऐड कर सकते हैं ताकि प्रत्येक केस में अधिक JSX को नेस्टेड करना आसान हो: From 91bc10534d77a318ac45aff9e516909ac1de2a0b Mon Sep 17 00:00:00 2001 From: Arshad Kazmi Date: Sat, 15 Jan 2022 21:54:00 +0530 Subject: [PATCH 5/5] Fix typo --- beta/src/pages/learn/conditional-rendering.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/beta/src/pages/learn/conditional-rendering.md b/beta/src/pages/learn/conditional-rendering.md index 5dcd426a6..422bf4ca1 100644 --- a/beta/src/pages/learn/conditional-rendering.md +++ b/beta/src/pages/learn/conditional-rendering.md @@ -206,7 +206,7 @@ return ( -यदि आप किसी ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग बैकग्राउंड से आ रहे हैं, तो आप मान सकते हैं कि ऊपर दिए गए दो उदाहरण सूक्ष्म रूप से भिन्न हैं क्योंकि उनमें से एक `
  • ` के दो अलग-अलग "इंस्टेंस" बना सकता है। लेकिन JSX एलिमेंट्स "इंस्टेंस" नहीं हैं क्योंकि उनके पास कोई आंतरिक state नहीं है और वे असली DOM नोड नहीं हैं। वे हल्के विवरण हैं, जैसे ब्लूप्रिंट। तो ये दो उदाहरण, असली में, *पूरी तरह* से समान हैं। [State को प्रेसेर्व और रीसेट करना](/learn/preserving-and-resetting-state) विस्तार से बताता है कि यह कैसे काम करता है। +यदि आप किसी ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग बैकग्राउंड से आ रहे हैं, तो आप मान सकते हैं कि ऊपर दिए गए दो उदाहरण सूक्ष्म रूप से भिन्न हैं क्योंकि उनमें से एक `
  • ` के दो अलग-अलग "इंस्टेंस" बना सकता है। लेकिन JSX एलिमेंट्स "इंस्टेंस" नहीं हैं क्योंकि उनके पास कोई आंतरिक state नहीं है और वे असली DOM नोड नहीं हैं। वे हल्के विवरण हैं, जैसे ब्लूप्रिंट। तो ये दो उदाहरण, असली में, *पूरी तरह* से समान हैं। [State को प्रीज़र्व और रीसेट करना](/learn/preserving-and-resetting-state) विस्तार से बताता है कि यह कैसे काम करता है। @@ -762,4 +762,4 @@ export default function DrinkList() { - \ No newline at end of file +