From 0b2e4a0cd63ceb87af8d0b2b351e81cef1fd816a Mon Sep 17 00:00:00 2001 From: Sanchit Date: Sun, 16 Jan 2022 14:11:15 +0530 Subject: [PATCH 1/5] done till para Conditionally assigning JSX to a variable --- beta/src/pages/learn/conditional-rendering.md | 49 +++++++++---------- 1 file changed, 24 insertions(+), 25 deletions(-) diff --git a/beta/src/pages/learn/conditional-rendering.md b/beta/src/pages/learn/conditional-rendering.md index 5dcd426a6..b60f7946f 100644 --- a/beta/src/pages/learn/conditional-rendering.md +++ b/beta/src/pages/learn/conditional-rendering.md @@ -115,7 +115,7 @@ if (isPacked) { return
  • {name}
    • ; ``` -यदि `isPacked` true है, तो कौम्पोनॅन्ट कुछ भी नहीं लौटाएगा, `null`। नहीं तो, यह JSX को रेंडर करने के लिए रिटर्न कर देगा। +यदि `isPacked` true है, तो कौम्पोनॅन्ट कुछ भी नहीं रेतुर्नगा, `null`। नहीं तो, यह JSX को रेंडर करने के लिए रिटर्न कर देगा। @@ -179,7 +179,7 @@ return
  • {name}
    • ; हालांकि यह डुप्लीकेशन हानिकारक नहीं है, लेकिन यह आपके कोड को मेन्टेन करना कठिन बना सकता है। क्या होगा यदि आप `className` को बदलना चाहते हैं? आपको इसे अपने कोड में दो स्थानों पर करना होगा! ऐसी स्थिति में, आप अपने कोड को और अधिक [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) बनाने के लिए कंडीशनल रूप से थोड़ा JSX शामिल कर सकते हैं। -### Conditional (ternary) operator (`? :`) {/*conditional-ternary-operator--*/} +### कंडीशनल (टेरनरी) ऑपरेटर (`? :`) {/*conditional-ternary-operator--*/} कंडीशनल एक्सप्रेशन लिखने के लिए JavaScript में एक कॉम्पैक्ट सिंटैक्स है - [कंडीशनल ऑपरेटर](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) या "टर्नरी ऑपरेटर।" @@ -257,9 +257,9 @@ export default function PackingList() { यह तरीका साधारण परिस्थितियों के लिए अच्छी तरह से काम करती है, लेकिन इसे मॉडरेशन में उपयोग करें। यदि आपके कौम्पोनॅन्ट बहुत अधिक नेस्टेड कंडीशनल मार्कअप के साथ कीच-पिच हो जाते हैं, तो चीजों को साफ करने के लिए चाइल्ड कौम्पोनॅन्टस को निकालने पर विचार करें। React में, मार्कअप आपके कोड का एक हिस्सा है, इसलिए आप काम्प्लेक्स एक्सप्रेशंस को व्यवस्थित करने के लिए वेरिएबल और फ़ंक्शन जैसे टूल का उपयोग कर सकते हैं। -### Logical AND operator (`&&`) {/*logical-and-operator-*/} +### लॉजिकल और ऑपरेटर (`&&`) {/*logical-and-operator-*/} -Another common shortcut you'll encounter is the [JavaScript logical AND (`&&`) operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.). Inside React components, it often comes up when you want to render some JSX when the condition is true, **or render nothing otherwise.** With `&&`, you could conditionally render the checkmark only if `isPacked` is `true`: +एक और आम शॉर्टकट जो आपको मिलेगा वह है [JavaScript लॉजिकल एंड (`&&`) कंट्रोलर](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.)। React कंपोनेंट्स के अंदर, यह अक्सर तब सामने आता है जब आप स्थिति के सही होने पर कुछ JSX को रेंडर करना चाहते हैं, **या अन्यथा कुछ भी रेंडर नहीं करना चाहते हैं।** `&&` के साथ, आप कंडिशनली रूप से चेकमार्क तभी रेंडर कर सकते हैं जब `isPacked` `true` हो: ```js return ( @@ -269,9 +269,9 @@ return ( ); ``` -You can read this as *“if `isPacked`, then (`&&`) render the checkmark, otherwise, render nothing.”* +आप इसे इस रूप में पढ़ सकते हैं *“यदि `isPacked` है, तो (`&&`) चेकमार्क रेंडर करें, अन्यथा, कुछ भी रेंडर न करें।"* -Here it is in action: +यहाँ यह क्रिया में है: @@ -309,30 +309,29 @@ export default function PackingList() { -A [JavaScript && expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) returns the value of its right side (in our case, the checkmark) if the left side (our condition) is `true`. But if the condition is `false`, the whole expression becomes `false`. React considers `false` as a "hole" in the JSX tree, just like `null` or `undefined`, and doesn't render anything in its place. - +एक [JavaScript && एक्सप्रेशन](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) इसके दाईं ओर का वैल्यू देता है (हमारे केस में, चेकमार्क) यदि बाईं ओर (हमारी कंडीशन) `true` है। लेकिन अगर कंडीशन `false` है, तो पूरी एक्सप्रेशन `false` हो जाती है। React JSX ट्री में `true` को "होल" के रूप में मानता है, ठीक `null` या `undefined` की तरह, और इसके स्थान पर कुछ भी रेंडर नहीं करता है। -**Don't put numbers on the left side of `&&`.** +**`&&` के बाईं ओर नंबर न लगाएं।** -To test the condition, JavaScript converts the left side to a boolean automatically. However, if the left side is `0`, then the whole expression gets that value (`0`), and React will happily render `0` rather than nothing. +कंडीशन का परीक्षण करने के लिए, JavaScript स्वचालित रूप से बाईं ओर को बूलियन में परिवर्तित कर देता है। हालाँकि, यदि बाईं ओर `0` है, तो संपूर्ण एक्सप्रेशन को वह वैल्यू (`0`) प्राप्त होता है, और React खुशी से `0` को रेंडर करेगी, न कि कुछ भी नहीं। -For example, a common mistake is to write code like `messageCount &&

    New messages

    `. It's easy to assume that it renders nothing when `messageCount` is `0`, but it really renders the `0` itself! +उदाहरण के लिए, एक सामान्य गलती `messageCount &&

    New messages

    ` जैसा कोड लिखना है। यह मान लेना आसान है कि `messageCount` `0` होने पर यह कुछ भी रेंडर नहीं करता है, लेकिन यह वास्तव में `0` को ही रेंडर करता है! -To fix it, make the left side a boolean: `messageCount > 0 &&

    New messages

    `. +इसे ठीक करने के लिए, बाईं ओर एक बूलियन बनाएं: `messageCount > 0 &&

    New messages

    `।     -### Conditionally assigning JSX to a variable {/*conditionally-assigning-jsx-to-a-variable*/} +### कंडीशनली एक वैरिएबल को JSX असाइन कर रहा है {/*conditionally-assigning-jsx-to-a-variable*/} -When the shortcuts get in the way of writing plain code, try using an `if` statement and a variable. You can reassign variables defined with [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), so start by providing the default content you want to display, the name: +जब शॉर्टकट सादा कोड लिखने के रास्ते में आ जाते हैं, तो एक `if` स्टेटमेंट और एक वेरिएबल का उपयोग करने का प्रयास करें। आप [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) के साथ डिफाइंड वेरिएबल्स को फिर से असाइन कर सकते हैं, इसलिए डिफ़ॉल्ट कंटेंट प्रदान करके शुरु करें जिसे आप डिस्प्ले करना चाहते हैं , नाम: ```js let itemContent = name; ``` -Use an `if` statement to reassign a JSX expression to `itemContent` if `isPacked` is `true`: +यदि `isPacked` `true` है, तो JSX एक्सप्रेशन को `itemContent` पर फिर से असाइन करने के लिए `if` स्टेटमेंट का उपयोग करें: ```js if (isPacked) { @@ -340,7 +339,7 @@ if (isPacked) { } ``` -[Curly braces open the "window into JavaScript".](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) Embed the variable with curly braces in the returned JSX tree, nesting the previously calculated expression inside of JSX: +[कर्ली ब्रेसिज़ खोलते हैं "विंडो इन JavaScript"।](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world)लौटाए गए JSX ट्री में कर्ली ब्रेसिज़ वाले वेरिएबल को एम्बेड करें, JSX के अंदर पहले से कॅल्क्युलेटेड एक्सप्रेशन को नेस्ट करें: ```js
  • @@ -348,7 +347,7 @@ if (isPacked) {
    • ``` -This style is the most verbose, but it's also the most flexible. Here it is in action: +यह शैली सबसे अधिक क्रियात्मक है, लेकिन यह सबसे लचीली भी है। यहाँ यह क्रिया में है: @@ -390,7 +389,7 @@ export default function PackingList() { -Like before, this works not only for text, but for arbitrary JSX too: +पहले की तरह, यह न केवल टेक्स्ट के लिए, बल्कि मनमाने JSX के लिए भी काम करता है: @@ -436,16 +435,16 @@ export default function PackingList() { -If you're not familiar with JavaScript, this variety of styles might seem overwhelming at first. However, learning them will help you read and write any JavaScript code -- and not just React components! Pick the one you prefer for a start, and then consult this reference again if you forget how the other ones work. +यदि आप JavaScript से परिचित नहीं हैं, तो इस तरह की शैलियाँ पहली बार में भारी लग सकती हैं। हालांकि, उन्हें सीखने से आपको किसी भी JavaScript कोड को पढ़ने और लिखने में मदद मिलेगी - न कि केवल React कौम्पोनॅन्ट! शुरुआत के लिए आप जो पसंद करते हैं उसे चुनें, और फिर इस संदर्भ को फिर से देखें यदि आप भूल जाते हैं कि दूसरे कैसे काम करते हैं। -* In React, you control branching logic with JavaScript. -* You can return a JSX expression conditionally with an `if` statement. -* You can conditionally save some JSX to a variable and then include it inside other JSX by using the curly braces. -* In JSX, `{cond ? : }` means *"if `cond`, render ``, otherwise ``"*. -* In JSX, `{cond && }` means *"if `cond`, render ``, otherwise nothing"*. -* The shortcuts are common, but you don't have to use them if you prefer plain `if`. +* React में, आप JavaScript के साथ ब्रांचिंग लॉजिक को नियंत्रित करते हैं। +* आप एक `if` स्टेटमेंट के साथ कंडिशनली रूप से JSX एक्सप्रेशन रेतुर्न कर सकते हैं। +* आप कंडिशनली रूप से कुछ JSX को एक वेरिएबल में सेव कर सकते है और फिर कर्ली ब्रेसिज़ का उपयोग करके इसे अन्य JSX के अंदर शामिल कर सकते हैं। +* JSX में, `{cond ? : }` का अर्थ है *"यदि `cond` है, तो `` रेंडर करें, अन्यथा ``"*। +* JSX में, `{cond && }` का अर्थ है *"यदि `cond`, `` रेंडर करें, अन्यथा कुछ भी नहीं"*। +* शॉर्टकट सामान्य हैं, लेकिन यदि आप सादा `if` पसंद करते हैं तो आपको उनका उपयोग करने की आवश्यकता नहीं है। From 35a5f2bb74fba620eef8a52c7445580fc49fb45c Mon Sep 17 00:00:00 2001 From: Sanchit Date: Sun, 16 Jan 2022 15:12:40 +0530 Subject: [PATCH 2/5] done the required changes --- beta/src/pages/learn/conditional-rendering.md | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/beta/src/pages/learn/conditional-rendering.md b/beta/src/pages/learn/conditional-rendering.md index 81b00c722..118eab301 100644 --- a/beta/src/pages/learn/conditional-rendering.md +++ b/beta/src/pages/learn/conditional-rendering.md @@ -4,7 +4,7 @@ title: कंडीशनल रेंडरिंग -आपके कौम्पोनॅन्ट को अक्सर अलग-अलग स्थितियों के आधार पर अलग-अलग चीजें डिस्प्ले करने की आवश्यकता होगी। React में, आप JSX को किसी कंडीशन के साथ JavaScript सिंटेक्स जैसे की `if` स्टेटमेंट्स, `&&`, एंड `?:` ऑपरेटर्स को इस्तेमाल करके रेंडर कर सकते है। +आपके कौम्पोनॅन्ट को अक्सर अलग-अलग स्थितियों के आधार पर अलग-अलग चीजें डिस्प्ले करने की आवश्यकता होगी। React में, आप JSX को किसी कंडीशन के साथ JavaScript सिंटेक्स जैसे की `if` स्टेटमेंट्स, `&&`, AND `?:` ऑपरेटर्स को इस्तेमाल करके रेंडर कर सकते है। @@ -102,7 +102,7 @@ export default function PackingList() { किसी भी केस में जो रिटर्न आता है उसे बदलने का प्रयास करें, और देखें कि परिणाम कैसे बदलता है! -ध्यान दें कि आप JavaScript के `if` और `return` स्टेटमेंट के साथ ब्रांचिंग लॉजिक कैसे बना रहे हैं। React में, कण्ट्रोल फ्लो (जैसे की कंडीशंस) को JavaScript से नियंत्रित किया जाता है। +ध्यान दें कि आप JavaScript के `if` और `return` स्टेटमेंट के साथ ब्रांचिंग लॉजिक कैसे बना रहे हैं। React में, कण्ट्रोल फ्लो (जैसे की कंडीशंस) को JavaScript से कण्ट्रोल किया जाता है। ### `null` के साथ कंडीशन के आधार पर कुछ कुछ नहीं रिटर्न करना {/*conditionally-returning-nothing-with-null*/} @@ -115,7 +115,7 @@ if (isPacked) { return
  • {name}
    • ; ``` -यदि `isPacked` true है, तो कौम्पोनॅन्ट कुछ भी नहीं रेतुर्नगा, `null`। नहीं तो, यह JSX को रेंडर करने के लिए रिटर्न कर देगा। +यदि `isPacked` true है, तो कौम्पोनॅन्ट कुछ भी नहीं रिटर्न करेगा, `null`। नहीं तो, यह JSX को रेंडर करने के लिए रिटर्न कर देगा। @@ -156,7 +156,7 @@ export default function PackingList() { ## कंडीशन के आधार पर JSX को इंक्लूड करें {/*conditionally-including-jsx*/} -पिछले उदाहरण में, आपने नियंत्रित किया था कि कौन सा (यदि कोई हो!) JSX ट्री कौम्पोनॅन्ट से लौटाया जाएगा। आपने पहले ही रेंडर आउटपुट में कुछ डुप्लीकेशन देखा होगा: +पिछले उदाहरण में, आपने कण्ट्रोल किया था कि कौन सा (यदि कोई हो!) JSX ट्री कौम्पोनॅन्ट से लौटाया जाएगा। आपने पहले ही रेंडर आउटपुट में कुछ डुप्लीकेशन देखा होगा: ```js
  • {name} ✔
    • @@ -179,7 +179,7 @@ return
  • {name}
    • ; हालांकि यह डुप्लीकेशन हानिकारक नहीं है, लेकिन यह आपके कोड को मेन्टेन करना कठिन बना सकता है। क्या होगा यदि आप `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) या "टर्नरी ऑपरेटर।" @@ -257,9 +257,9 @@ export default function PackingList() { यह तरीका साधारण परिस्थितियों के लिए अच्छी तरह से काम करती है, लेकिन इसे मॉडरेशन में उपयोग करें। यदि आपके कौम्पोनॅन्ट बहुत अधिक नेस्टेड कंडीशनल मार्कअप के साथ कीच-पिच हो जाते हैं, तो चीजों को साफ करने के लिए चाइल्ड कौम्पोनॅन्टस को निकालने पर विचार करें। React में, मार्कअप आपके कोड का एक हिस्सा है, इसलिए आप काम्प्लेक्स एक्सप्रेशंस को व्यवस्थित करने के लिए वेरिएबल और फ़ंक्शन जैसे टूल का उपयोग कर सकते हैं। -### लॉजिकल और ऑपरेटर (`&&`) {/*logical-and-operator-*/} +### लॉजिकल AND ऑपरेटर (`&&`) {/*logical-and-operator-*/} -एक और आम शॉर्टकट जो आपको मिलेगा वह है [JavaScript लॉजिकल एंड (`&&`) कंट्रोलर](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.)। React कंपोनेंट्स के अंदर, यह अक्सर तब सामने आता है जब आप स्थिति के सही होने पर कुछ JSX को रेंडर करना चाहते हैं, **या अन्यथा कुछ भी रेंडर नहीं करना चाहते हैं।** `&&` के साथ, आप कंडिशनली रूप से चेकमार्क तभी रेंडर कर सकते हैं जब `isPacked` `true` हो: +एक और आम शॉर्टकट जो आपको मिलेगा वह है [JavaScript लॉजिकल AND (`&&`) ऑपरेटर](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.)। React कौम्पोनॅन्टस के अंदर, यह अक्सर तब सामने आता है जब आप कंडीशन के true होने पर कुछ JSX को रेंडर करना चाहते हैं, **या अन्यथा कुछ भी रेंडर नहीं करना चाहते हैं।** `&&` के साथ, आप कंडिशनल रूप से चेकमार्क तभी रेंडर कर सकते हैं जब `isPacked` `true` हो: ```js return ( @@ -269,9 +269,9 @@ return ( ); ``` -आप इसे इस रूप में पढ़ सकते हैं *“यदि `isPacked` है, तो (`&&`) चेकमार्क रेंडर करें, अन्यथा, कुछ भी रेंडर न करें।"* +आप इसे इस रूप में पढ़ सकते हैं *“यदि `isPacked` है, तो (`&&`) चेकमार्क रेंडर करे, अन्यथा, कुछ भी रेंडर न करे।"* -यहाँ यह क्रिया में है: +यहाँ यह इस्तेमाल में है: @@ -309,23 +309,23 @@ export default function PackingList() { -एक [JavaScript && एक्सप्रेशन](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) इसके दाईं ओर का वैल्यू देता है (हमारे केस में, चेकमार्क) यदि बाईं ओर (हमारी कंडीशन) `true` है। लेकिन अगर कंडीशन `false` है, तो पूरी एक्सप्रेशन `false` हो जाती है। React JSX ट्री में `true` को "होल" के रूप में मानता है, ठीक `null` या `undefined` की तरह, और इसके स्थान पर कुछ भी रेंडर नहीं करता है। +एक [JavaScript && एक्सप्रेशन](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) इसके दाईं ओर का वैल्यू रिटर्न करता है (हमारे केस में, चेकमार्क) यदि बाईं ओर (हमारी कंडीशन) `true` है। लेकिन अगर कंडीशन `false` है, तो पूरी एक्सप्रेशन `false` हो जाती है। React JSX ट्री में `true` को "होल" के रूप में मानता है, ठीक `null` या `undefined` की तरह, और इसके स्थान पर कुछ भी रेंडर नहीं करता है। **`&&` के बाईं ओर नंबर न लगाएं।** -कंडीशन का परीक्षण करने के लिए, JavaScript स्वचालित रूप से बाईं ओर को बूलियन में परिवर्तित कर देता है। हालाँकि, यदि बाईं ओर `0` है, तो संपूर्ण एक्सप्रेशन को वह वैल्यू (`0`) प्राप्त होता है, और React खुशी से `0` को रेंडर करेगी, न कि कुछ भी नहीं। +कंडीशन को टेस्ट करने के लिए, JavaScript ऑटोमेटिकली बाईं ओर को बूलियन में परिवर्तित कर देता है। हालाँकि, यदि बाईं ओर `0` है, तो संपूर्ण एक्सप्रेशन को वह वैल्यू (`0`) प्राप्त होता है, और React खुशी से `0` को रेंडर कर देगा, न कि कुछ भी नहीं। -उदाहरण के लिए, एक सामान्य गलती `messageCount &&

    New messages

    ` जैसा कोड लिखना है। यह मान लेना आसान है कि `messageCount` `0` होने पर यह कुछ भी रेंडर नहीं करता है, लेकिन यह वास्तव में `0` को ही रेंडर करता है! +उदाहरण के लिए, एक सामान्य गलती `messageCount &&

    New messages

    ` जैसा कोड लिखना है। यह मान लेना आसान है कि `messageCount` `0` होने पर कुछ भी रेंडर नहीं करता है, लेकिन यह वास्तव में `0` को ही रेंडर करता है! इसे ठीक करने के लिए, बाईं ओर एक बूलियन बनाएं: `messageCount > 0 &&

    New messages

    `।     -### कंडीशनली एक वैरिएबल को JSX असाइन कर रहा है {/*conditionally-assigning-jsx-to-a-variable*/} +### कंडीशनली एक वैरिएबल को JSX असाइन करना {/*conditionally-assigning-jsx-to-a-variable*/} -जब शॉर्टकट सादा कोड लिखने के रास्ते में आ जाते हैं, तो एक `if` स्टेटमेंट और एक वेरिएबल का उपयोग करने का प्रयास करें। आप [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) के साथ डिफाइंड वेरिएबल्स को फिर से असाइन कर सकते हैं, इसलिए डिफ़ॉल्ट कंटेंट प्रदान करके शुरु करें जिसे आप डिस्प्ले करना चाहते हैं , नाम: +जब शॉर्टकट प्लेन कोड लिखने के रास्ते में आ जाते हैं, तो एक `if` स्टेटमेंट और एक वेरिएबल का उपयोग करके देखें। आप [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) के साथ डिफाइंड वेरिएबल्स को फिर से असाइन कर सकते हैं, इसलिए डिफ़ॉल्ट कंटेंट देके करके शुरु करें जिसे आप डिस्प्ले करना चाहते हैं , नाम: ```js let itemContent = name; @@ -339,7 +339,7 @@ if (isPacked) { } ``` -[कर्ली ब्रेसिज़ खोलते हैं "विंडो इन JavaScript"।](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world)लौटाए गए JSX ट्री में कर्ली ब्रेसिज़ वाले वेरिएबल को एम्बेड करें, JSX के अंदर पहले से कॅल्क्युलेटेड एक्सप्रेशन को नेस्ट करें: +[कर्ली ब्रेसिज़ "जावास्क्रिप्ट के लिए एक रास्ता" खोलते है।](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) लौटाए गए JSX ट्री में कर्ली ब्रेसिज़ वाले वेरिएबल को एम्बेड करें, JSX के अंदर पहले से कैलकुलेट की हुई एक्सप्रेशन को नेस्ट करें: ```js
  • @@ -347,7 +347,7 @@ if (isPacked) {
    • ``` -यह शैली सबसे अधिक क्रियात्मक है, लेकिन यह सबसे लचीली भी है। यहाँ यह क्रिया में है: +यह तरीका सबसे अधिक वर्बोस है, लेकिन यह सबसे फ्लैक्सीबल भी है। यहाँ यह इस्तेमाल में है: @@ -435,16 +435,16 @@ export default function PackingList() { -यदि आप JavaScript से परिचित नहीं हैं, तो इस तरह की शैलियाँ पहली बार में भारी लग सकती हैं। हालांकि, उन्हें सीखने से आपको किसी भी JavaScript कोड को पढ़ने और लिखने में मदद मिलेगी - न कि केवल React कौम्पोनॅन्ट! शुरुआत के लिए आप जो पसंद करते हैं उसे चुनें, और फिर इस संदर्भ को फिर से देखें यदि आप भूल जाते हैं कि दूसरे कैसे काम करते हैं। +यदि आप JavaScript से परिचित नहीं हैं, तो इस तरह की तरीके पहली बार में भारी लग सकती हैं। हालांकि, उन्हें सीखने से आपको किसी भी JavaScript कोड को पढ़ने और लिखने में मदद मिलेगी - न कि केवल React कौम्पोनॅन्ट! शुरुआत के लिए आप जो पसंद करते हैं उसे चुनें, और अगर आप भूल जाते हैं कि दूसरे कैसे काम करते हैं तो इस रिफरेन्स को फिर से देखें। -* React में, आप JavaScript के साथ ब्रांचिंग लॉजिक को नियंत्रित करते हैं। -* आप एक `if` स्टेटमेंट के साथ कंडिशनली रूप से JSX एक्सप्रेशन रेतुर्न कर सकते हैं। -* आप कंडिशनली रूप से कुछ JSX को एक वेरिएबल में सेव कर सकते है और फिर कर्ली ब्रेसिज़ का उपयोग करके इसे अन्य JSX के अंदर शामिल कर सकते हैं। +* React में, आप JavaScript के साथ ब्रांचिंग लॉजिक को कण्ट्रोल करते हैं। +* आप एक `if` स्टेटमेंट के साथ कंडिशनल रूप से JSX एक्सप्रेशन रिटर्न कर सकते हैं। +* आप कंडिशनल रूप से कुछ JSX को एक वेरिएबल में सेव कर सकते है और फिर कर्ली ब्रेसिज़ का उपयोग करके इसे अन्य JSX में शामिल कर सकते हैं। * JSX में, `{cond ?     : }` का अर्थ है *"यदि `cond` है, तो `` रेंडर करें, अन्यथा ``"*। * JSX में, `{cond && }` का अर्थ है *"यदि `cond`, `` रेंडर करें, अन्यथा कुछ भी नहीं"*। -* शॉर्टकट सामान्य हैं, लेकिन यदि आप सादा `if` पसंद करते हैं तो आपको उनका उपयोग करने की आवश्यकता नहीं है। +* शॉर्टकट सामान्य हैं, लेकिन यदि आप प्लेन `if` पसंद करते हैं तो आपको उनका उपयोग करने की आवश्यकता नहीं है। From c205840c002ea52130406ce2f91e465fbf7accc4 Mon Sep 17 00:00:00 2001 From: Arshad Kazmi Date: Sun, 16 Jan 2022 15:20:41 +0530 Subject: [PATCH 3/5] typo fix --- 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 118eab301..2a0e0bea0 100644 --- a/beta/src/pages/learn/conditional-rendering.md +++ b/beta/src/pages/learn/conditional-rendering.md @@ -4,7 +4,7 @@ title: कंडीशनल रेंडरिंग -आपके कौम्पोनॅन्ट को अक्सर अलग-अलग स्थितियों के आधार पर अलग-अलग चीजें डिस्प्ले करने की आवश्यकता होगी। React में, आप JSX को किसी कंडीशन के साथ JavaScript सिंटेक्स जैसे की `if` स्टेटमेंट्स, `&&`, AND `?:` ऑपरेटर्स को इस्तेमाल करके रेंडर कर सकते है। +आपके कौम्पोनॅन्ट को अक्सर अलग-अलग स्थितियों के आधार पर अलग-अलग चीजें डिस्प्ले करने की आवश्यकता होगी। React में, आप JSX को किसी कंडीशन के साथ JavaScript सिंटेक्स जैसे की `if` स्टेटमेंट्स, `&&`, एंड `?:` ऑपरेटर्स को इस्तेमाल करके रेंडर कर सकते है। From e6df78f139f7d6ada51703bcb30fe557656d6b47 Mon Sep 17 00:00:00 2001 From: Sanchit Date: Mon, 17 Jan 2022 10:57:57 +0530 Subject: [PATCH 4/5] done with the page --- beta/src/pages/learn/conditional-rendering.md | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/beta/src/pages/learn/conditional-rendering.md b/beta/src/pages/learn/conditional-rendering.md index 2a0e0bea0..462529a01 100644 --- a/beta/src/pages/learn/conditional-rendering.md +++ b/beta/src/pages/learn/conditional-rendering.md @@ -452,9 +452,9 @@ export default function PackingList() { -### Show an icon for incomplete items with `? :` {/*show-an-icon-for-incomplete-items-with--*/} +### अधूरे आइटम के लिए `? :` के साथ एक आइकन दिखाएं {/*show-an-icon-for-incomplete-items-with--*/} -Use the conditional operator (`cond ? a : b`) to render a ❌ if `isPacked` isn’t `true`. +एक ❌ रेंडर करने के लिए कंडीशनल ऑपरेटर (`cond ? a : b`) का इस्तेमाल करें अगर `isPacked` `true` नहीं है। @@ -532,15 +532,15 @@ export default function PackingList() { -### Show the item importance with `&&` {/*show-the-item-importance-with-*/} +### आइटम का इम्पोर्टेंस `&&` के साथ दिखाएं {/*show-the-item-importance-with-*/} -In this example, each `Item` receives a numerical `importance` prop. Use the `&&` operator to render "_(Importance: X)_" in italics, but only for items that have non-zero difficulty. Your item list should end up looking like this: +इस उदाहरण में, प्रत्येक `Item` को एक संख्यात्मक `importance` prop प्राप्त होता है। इटैलिक में "_(Importance: X)_" रेंडर करने के लिए `&&` ऑपरेटर का उपयोग करें, लेकिन केवल उन आइटम्स के लिए जिनमें गैर-शून्य कठिनाई है। आपकी आइटम सूची इस तरह दिखनी चाहिए: * Space suit _(Importance: 9)_ * Helmet with a golden leaf * Photo of Tam _(Importance: 6)_ -Don't forget to add a space between the two labels! +दो लेबलों के बीच एक स्पेस जोड़ना न भूलें! @@ -580,7 +580,7 @@ export default function PackingList() { -This should do the trick: +यह काम कर जाना चाहिए: @@ -622,15 +622,15 @@ export default function PackingList() { -Note that you must write `importance > 0 && ...` rather than `importance && ...` so that if the `importance` is `0`, `0` isn't rendered as the result! +ध्यान दें कि आपको `importance && ...` के बजाय `importance > 0 && ...` लिखना होगा ताकि अगर `importance` `0` हो, तो `0` परिणाम के रूप में रेंडर नहीं हो! -In this solution, two separate conditions are used to insert a space between then name and the importance label. Alternatively, you could use a fragment with a leading space: `importance > 0 && <> ...` or add a space immediately inside the ``: `importance > 0 && ...`. +इस समाधान में, नाम और इम्पोर्टेंस लेबल के बीच एक स्पेस डालने के लिए दो अलग-अलग कंडीशंस का उपयोग किया गया है। वैकल्पिक रूप से, आप एक प्रमुख स्पेस के साथ एक फ्रेगमेंट का उपयोग कर सकते हैं: `importance > 0 && <> ...` या `` के अंदर तुरंत एक स्पेस जोड़ें: `importance > 0 && ...`। -### Refactor a series of `? :` to `if` and variables {/*refactor-a-series-of---to-if-and-variables*/} +### रिफैक्टर करे एक सीरीज `? :` से `if` और वेरिएबल्स {/*refactor-a-series-of---to-if-and-variables*/} -This `Drink` component uses a series of `? :` conditions to show different information depending on whether the `name` prop is `"tea"` or `"coffee"`. The problem is that the information about each drink is spread across multiple conditions. Refactor this code to use a single `if` statement instead of three `? :` conditions. +यह `Drink` कौम्पोनॅन्ट `? :` कंडीशंस की एक सीरीज का उपयोग करता है `name` prop `"tea"` या `"coffee"` के आधार पर अलग-अलग जानकारी दिखाने क लिए। समस्या यह है कि प्रत्येक ड्रिंक के बारे में जानकारी कई कंडीशंस में फैली हुई है। तीन `? :` कंडीशंस के बजाय एक `if` स्टेटमेंट का उपयोग करने के लिए इस कोड को दोबारा रिफैक्टर करे। @@ -663,11 +663,11 @@ export default function DrinkList() { -Once you've refactored the code to use `if`, do you have further ideas on how to simplify it? +एक बार जब आप `if` का उपयोग कर क कोड को रिफैक्टर कर लेते हैं, तो क्या आपके पास इसे सरल बनाने के बारे में और विचार हैं? -There are multiple ways you could go about this, but here is one starting point: +इसके बारे में आप कई तरीके अपना सकते हैं, लेकिन यहां एक प्रारंभिक बिंदु है: @@ -710,9 +710,9 @@ export default function DrinkList() { -Here the information about each drink is grouped together instead of being spread across multiple conditions. This makes it easier to add more drinks in the future. +यहां प्रत्येक ड्रिंक के बारे में जानकारी को कई स्थितियों में फैलाने के बजाय एक साथ समूहीकृत किया जाता है। इससे भविष्य में और ड्रिंक जोड़ना आसान हो जाता है। -Another solution would be to remove the condition altogether by moving the information into objects: +एक अन्य उपाय यह होगा कि जानकारी को ऑब्जेक्ट्स में स्थानांतरित करके कंडीशन को पूरी तरह से हटा दिया जाए: From e0eb2e3942fd6183e34802b7221dfd713e84f513 Mon Sep 17 00:00:00 2001 From: Sanchit Date: Mon, 17 Jan 2022 22:03:33 +0530 Subject: [PATCH 5/5] done the required changes --- beta/src/pages/learn/conditional-rendering.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/beta/src/pages/learn/conditional-rendering.md b/beta/src/pages/learn/conditional-rendering.md index 462529a01..f74f844f3 100644 --- a/beta/src/pages/learn/conditional-rendering.md +++ b/beta/src/pages/learn/conditional-rendering.md @@ -4,7 +4,7 @@ title: कंडीशनल रेंडरिंग -आपके कौम्पोनॅन्ट को अक्सर अलग-अलग स्थितियों के आधार पर अलग-अलग चीजें डिस्प्ले करने की आवश्यकता होगी। React में, आप JSX को किसी कंडीशन के साथ JavaScript सिंटेक्स जैसे की `if` स्टेटमेंट्स, `&&`, एंड `?:` ऑपरेटर्स को इस्तेमाल करके रेंडर कर सकते है। +आपके कौम्पोनॅन्ट को अक्सर अलग-अलग कंडीशंस के आधार पर अलग-अलग चीजें डिस्प्ले करने की आवश्यकता होगी। React में, आप JSX को किसी कंडीशन के साथ JavaScript सिंटेक्स जैसे की `if` स्टेटमेंट्स, `&&`, एंड `?:` ऑपरेटर्स को इस्तेमाल करके रेंडर कर सकते है। @@ -106,7 +106,7 @@ export default function PackingList() { ### `null` के साथ कंडीशन के आधार पर कुछ कुछ नहीं रिटर्न करना {/*conditionally-returning-nothing-with-null*/} -कुछ स्थितियों में, आप कुछ भी रेंडर नहीं करना चाहेंगे। उदाहरण के लिए, मान लें कि आप पैक्ड आइटम बिल्कुल नहीं दिखाना चाहते हैं। लेकिन एक कौम्पोनॅन्ट को तो कुछ न कुछ रिटर्न करना होग। इस केस में, आप `null` रिटर्न कर सकते हैं: +कुछ कंडीशंस में, आप कुछ भी रेंडर नहीं करना चाहेंगे। उदाहरण के लिए, मान लें कि आप पैक्ड आइटम बिल्कुल नहीं दिखाना चाहते हैं। लेकिन एक कौम्पोनॅन्ट को तो कुछ न कुछ रिटर्न करना होग। इस केस में, आप `null` रिटर्न कर सकते हैं: ```js if (isPacked) { @@ -255,7 +255,7 @@ export default function PackingList() { -यह तरीका साधारण परिस्थितियों के लिए अच्छी तरह से काम करती है, लेकिन इसे मॉडरेशन में उपयोग करें। यदि आपके कौम्पोनॅन्ट बहुत अधिक नेस्टेड कंडीशनल मार्कअप के साथ कीच-पिच हो जाते हैं, तो चीजों को साफ करने के लिए चाइल्ड कौम्पोनॅन्टस को निकालने पर विचार करें। React में, मार्कअप आपके कोड का एक हिस्सा है, इसलिए आप काम्प्लेक्स एक्सप्रेशंस को व्यवस्थित करने के लिए वेरिएबल और फ़ंक्शन जैसे टूल का उपयोग कर सकते हैं। +यह तरीका साधारण परिकंडीशंस के लिए अच्छी तरह से काम करती है, लेकिन इसे मॉडरेशन में उपयोग करें। यदि आपके कौम्पोनॅन्ट बहुत अधिक नेस्टेड कंडीशनल मार्कअप के साथ कीच-पिच हो जाते हैं, तो चीजों को साफ करने के लिए चाइल्ड कौम्पोनॅन्टस को निकालने पर विचार करें। React में, मार्कअप आपके कोड का एक हिस्सा है, इसलिए आप काम्प्लेक्स एक्सप्रेशंस को व्यवस्थित करने के लिए वेरिएबल और फ़ंक्शन जैसे टूल का उपयोग कर सकते हैं। ### लॉजिकल AND ऑपरेटर (`&&`) {/*logical-and-operator-*/} @@ -454,7 +454,7 @@ export default function PackingList() { ### अधूरे आइटम के लिए `? :` के साथ एक आइकन दिखाएं {/*show-an-icon-for-incomplete-items-with--*/} -एक ❌ रेंडर करने के लिए कंडीशनल ऑपरेटर (`cond ? a : b`) का इस्तेमाल करें अगर `isPacked` `true` नहीं है। +अगर `isPacked` `true` नहीं है तो एक ❌ रेंडर करने के लिए कंडीशनल ऑपरेटर (`cond ? a : b`) का इस्तेमाल करें। @@ -532,15 +532,15 @@ export default function PackingList() { -### आइटम का इम्पोर्टेंस `&&` के साथ दिखाएं {/*show-the-item-importance-with-*/} +### आइटम की अहमियत `&&` के साथ दिखाएं {/*show-the-item-importance-with-*/} -इस उदाहरण में, प्रत्येक `Item` को एक संख्यात्मक `importance` prop प्राप्त होता है। इटैलिक में "_(Importance: X)_" रेंडर करने के लिए `&&` ऑपरेटर का उपयोग करें, लेकिन केवल उन आइटम्स के लिए जिनमें गैर-शून्य कठिनाई है। आपकी आइटम सूची इस तरह दिखनी चाहिए: +इस उदाहरण में, प्रत्येक `Item` को एक संख्यात्मक `importance` prop मिलता है। इटैलिक में "_(Importance: X)_" रेंडर करने के लिए `&&` ऑपरेटर का उपयोग करें, लेकिन केवल उन आइटम्स के लिए जिनमें गैर-शून्य कठिनाई है। आपकी आइटम सूची इस तरह दिखनी चाहिए: * Space suit _(Importance: 9)_ * Helmet with a golden leaf * Photo of Tam _(Importance: 6)_ -दो लेबलों के बीच एक स्पेस जोड़ना न भूलें! +दो लेबल्स के बीच एक स्पेस जोड़ना न भूलें! @@ -624,7 +624,7 @@ export default function PackingList() { ध्यान दें कि आपको `importance && ...` के बजाय `importance > 0 && ...` लिखना होगा ताकि अगर `importance` `0` हो, तो `0` परिणाम के रूप में रेंडर नहीं हो! -इस समाधान में, नाम और इम्पोर्टेंस लेबल के बीच एक स्पेस डालने के लिए दो अलग-अलग कंडीशंस का उपयोग किया गया है। वैकल्पिक रूप से, आप एक प्रमुख स्पेस के साथ एक फ्रेगमेंट का उपयोग कर सकते हैं: `importance > 0 && <> ...` या `` के अंदर तुरंत एक स्पेस जोड़ें: `importance > 0 && ...`। +इस समाधान में, नाम और importance लेबल के बीच एक स्पेस डालने के लिए दो अलग-अलग कंडीशंस का उपयोग किया गया है। इसके अलावा, आप एक प्रमुख स्पेस के साथ एक फ्रेगमेंट का उपयोग भी कर सकते हैं: `importance > 0 && <> ...` या `` के अंदर शुरुआत में ही एक स्पेस जोड़ें: `importance > 0 && ...`। @@ -710,9 +710,9 @@ export default function DrinkList() { -यहां प्रत्येक ड्रिंक के बारे में जानकारी को कई स्थितियों में फैलाने के बजाय एक साथ समूहीकृत किया जाता है। इससे भविष्य में और ड्रिंक जोड़ना आसान हो जाता है। +यहां प्रत्येक ड्रिंक के बारे में जानकारी को कई कंडीशंस में फैलाने के बजाय एक साथ ग्रुप किया जाता है। इससे भविष्य में और ड्रिंक ऐड करना आसान हो जाता है। -एक अन्य उपाय यह होगा कि जानकारी को ऑब्जेक्ट्स में स्थानांतरित करके कंडीशन को पूरी तरह से हटा दिया जाए: +एक अन्य उपाय यह होगा कि जानकारी को ऑब्जेक्ट्स में मूव करके कंडीशन को पूरी तरह से हटा दिया जाए: