From c23f91e8a3e95664184f76bd1410ee6be5d07703 Mon Sep 17 00:00:00 2001 From: Ashish Kamble Date: Tue, 9 Jul 2019 10:37:41 +0530 Subject: [PATCH 01/19] Update conditional-rendering.md --- content/docs/conditional-rendering.md | 50 ++++++++++++++------------- 1 file changed, 26 insertions(+), 24 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 7df19bb98..8e102df6e 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -8,11 +8,11 @@ redirect_from: - "tips/false-in-jsx.html" --- -In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application. +React में, आप अलग-अलग कौम्पोनॅन्ट बना सकते हैं जो आपके लिए आवश्यक व्यवहार को संक्षिप्त करते हैं। फिर, आप अपने ऍप की स्टेट के आधार पर उनमें से कुछ को ही रिप्रेजेंट कर सकते हैं। -Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) or the [conditional operator](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) to create elements representing the current state, and let React update the UI to match them. +कंडीशनल रेंडरिंग React में वैसे ही काम करता हे जैसे कंडीशंस जावास्क्रिप्ट में करते हे। जावास्क्रिप्ट ऑपरेटर्स जैसे [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) और [`कंडीशनल ऑपरेटर्स `](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) जो एलिमेंट्स बनके करंट स्टेट को रिप्रेजेंट करते हे। फिर React UI को अपडेट करके मैच कर देगा। -Consider these two components: +उदाहरण के तौर पे यह दो कॉम्पोनेन्ट देखो: ```js function UserGreeting(props) { @@ -24,7 +24,7 @@ function GuestGreeting(props) { } ``` -We'll create a `Greeting` component that displays either of these components depending on whether a user is logged in: +हम `Greeting` कॉम्पोनेन्ट बना रहे हे। अगर यूजर लॉगिन हे तभी देखेगा : ```javascript{3-7,11,12} function Greeting(props) { @@ -44,13 +44,14 @@ ReactDOM.render( [**Try it on CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) -This example renders a different greeting depending on the value of `isLoggedIn` prop. +यह उदहारण `isLoggedIn` प्रोप के वैल्यू के अनुसार अलग अलग ग्रीटिंग्स रेंडर करता हे। -### Element Variables {#element-variables} +### एलिमेंट वेरिएबल {#element-variables} -You can use variables to store elements. This can help you conditionally render a part of the component while the rest of the output doesn't change. +आप एलिमेंट्स को स्टोर करने के लिए वेरिएबल्स का उसे कर सकते हो। +जिससे आपको कंडीशनल रेंडरिंग में मदत होगी और बाकि का आउटपुट चेंज नहीं होगा। -Consider these two new components representing Logout and Login buttons: +अब लॉगिन और लॉगआउट बटन्स नए कौम्पोनॅन्टस को देखो : ```js function LoginButton(props) { @@ -70,9 +71,10 @@ function LogoutButton(props) { } ``` -In the example below, we will create a [stateful component](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) called `LoginControl`. -It will render either `` or `` depending on its current state. It will also render a `` from the previous example: +इस उदहारण में हम बना रहे हे [स्टेटफुल कौम्पोनॅन्ट](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) जिसे बोलते हे `LoginControl`. + +जो करंट स्टेट के हिसाब से `` या `` को रेंडर करेगा। वो `` को भी रेंडर करेगा जैसे पिछले एक्साम्पल में बताया था: ```javascript{20-25,29,30} class LoginControl extends React.Component { @@ -118,11 +120,11 @@ ReactDOM.render( [**Try it on CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) -While declaring a variable and using an `if` statement is a fine way to conditionally render a component, sometimes you might want to use a shorter syntax. There are a few ways to inline conditions in JSX, explained below. +वेरिएबल डिक्लेअर करके और `if` स्टेटमेंट का यूज़ करना जिससे हम कॉम्पोनेन्ट को कंडशनल रेंडर कर सके यह अच्छी बात हे, कभी आपको छोटा शार्ट सिंटेक्स उसे करना पड़ सकता हे .यहाँ नीचे, JSX में इन लाइन कंडीशंस के कुछ पर्याय दिए हे। -### Inline If with Logical && Operator {#inline-if-with-logical--operator} +### लॉजिकल && ऑपरेटर के साथ इन लाइन `if` का इस्तेमाल {#inline-if-with-logical--operator} -You may [embed any expressions in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) by wrapping them in curly braces. This includes the JavaScript logical `&&` operator. It can be handy for conditionally including an element: +आप [कोई भी एक्सप्रेशन `jsx` में डाल सकते हे](/docs/introducing-jsx.html#embedding-expressions-in-jsx) उसको कर्ली ब्रेसेस के अंदर व्रैप करना पड़ेगा. इसमें जावास्क्रिप्ट का लॉजिकल `&&` ऑपरेटर भी शामिल हे. इसकी मदत से हम कोई एलिमेंट को कंडीशंस से इन्क्लूड कर सकते हे: ```js{6-10} function Mailbox(props) { @@ -148,15 +150,15 @@ ReactDOM.render( [**Try it on CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010) -It works because in JavaScript, `true && expression` always evaluates to `expression`, and `false && expression` always evaluates to `false`. +जैवसक्रिप्ट मे यह काम करता हे, `true && expression` हमेशा `expression` होता हे, और `false && expression` हमेशा `false` होता हे। -Therefore, if the condition is `true`, the element right after `&&` will appear in the output. If it is `false`, React will ignore and skip it. +इसीलिए, अगर कोई कंडीशन `true` हे, तोह `&&` के आगे का एलिमेंट आउटपुट में आ जाता हे। अगर यह `false` हे, फिर रियेक्ट इसको इग्नोर कर स्किप करेगा। -### Inline If-Else with Conditional Operator {#inline-if-else-with-conditional-operator} +### कंडीशनल ऑपरेटर्स के साथ इन लाइन if-else {#inline-if-else-with-conditional-operator} -Another method for conditionally rendering elements inline is to use the JavaScript conditional operator [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator). +जावास्क्रिप्ट की कंडीशनल ऑपरेटर्स का उसे करना [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) यह इन लाइन एलिमेंट्स की कंडीशनल रेंडरिंग की दूसरी पद्धति हे। -In the example below, we use it to conditionally render a small block of text. +जैसे नीचे के एक्साम्पल में, कंडीशनल रेंडर कर छोटे टेक्स्ट ब्लॉक को रेंडर किआ। ```javascript{5} render() { @@ -169,7 +171,7 @@ render() { } ``` -It can also be used for larger expressions although it is less obvious what's going on: +इसे हम बड़े एक्सप्रेशन्स के साथ भी उसे कर सकते हे इससे कैसे काम हो रहा हे यह समझना आसान हो जाता हे: ```js{5,7,9} render() { @@ -186,13 +188,13 @@ render() { } ``` -Just like in JavaScript, it is up to you to choose an appropriate style based on what you and your team consider more readable. Also remember that whenever conditions become too complex, it might be a good time to [extract a component](/docs/components-and-props.html#extracting-components). +जैसे की जावास्क्रिप्ट में होता हे, यह हम पे निर्भर करता हे की कोनसा स्टाइल उसे करे जिससे आप और आपि टीम को समझना आसान हो. यह भी याद रहना की जैसे कंडीशंस बड़ी और बेचिदा हो, तब कॉम्पोनेन्ट को एक्सट्रेक्ट करना अच्छा रहता हे [कॉम्पोनेन्ट को एक्सट्रेक्ट](/docs/components-and-props.html#extracting-components)। -### Preventing Component from Rendering {#preventing-component-from-rendering} +### कॉम्पोनेन्ट को रेंडर करने से बचाये {#preventing-component-from-rendering} -In rare cases you might want a component to hide itself even though it was rendered by another component. To do this return `null` instead of its render output. +कुछ केसेस में कंपोनेंट को छिपाना पड़ता हे जब की वह किसी दूसरे कॉम्पोनेन्ट में रेंडर हो रहे हो. तब हमको आउटपुट को रेंडर करने के अलावा `null` रीटर्न करना हे। -In the example below, the `` is rendered depending on the value of the prop called `warn`. If the value of the prop is `false`, then the component does not render: +जैसे नीचे के एक्साम्पल में, `` यह कॉम्पोनेन्ट `warn` प्रोप के वैल्यू के अनुसार रेंडर हुआ हे. अगर इसकी वैल्यू `false` रहती तोह कॉम्पोनेन्ट रेंडर नहीं होता: ```javascript{2-4,29} function WarningBanner(props) { @@ -240,4 +242,4 @@ ReactDOM.render( [**Try it on CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) -Returning `null` from a component's `render` method does not affect the firing of the component's lifecycle methods. For instance `componentDidUpdate` will still be called. +कॉम्पोनेन्ट के `रेंडर` से `null` रीटर्न करने का और कॉम्पोनेन्ट के लाइफ साइकिल मेथड्स पर कोई असर नहीं पड़ता। जैसे की `componentDidUpdate` फिर भी कॉल होगा। From 0b28fae485995016a4feff6134ac6dff5aaec372 Mon Sep 17 00:00:00 2001 From: Ashish Kamble Date: Tue, 9 Jul 2019 10:38:57 +0530 Subject: [PATCH 02/19] Update conditional-rendering.md --- content/docs/conditional-rendering.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 8e102df6e..5bbb72840 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -12,7 +12,7 @@ React में, आप अलग-अलग कौम्पोनॅन्ट कंडीशनल रेंडरिंग React में वैसे ही काम करता हे जैसे कंडीशंस जावास्क्रिप्ट में करते हे। जावास्क्रिप्ट ऑपरेटर्स जैसे [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) और [`कंडीशनल ऑपरेटर्स `](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) जो एलिमेंट्स बनके करंट स्टेट को रिप्रेजेंट करते हे। फिर React UI को अपडेट करके मैच कर देगा। -उदाहरण के तौर पे यह दो कॉम्पोनेन्ट देखो: +उदाहरण के तौर पे यह दो कौम्पोनॅन्ट देखो: ```js function UserGreeting(props) { @@ -24,7 +24,7 @@ function GuestGreeting(props) { } ``` -हम `Greeting` कॉम्पोनेन्ट बना रहे हे। अगर यूजर लॉगिन हे तभी देखेगा : +हम `Greeting` कौम्पोनॅन्ट बना रहे हे। अगर यूजर लॉगिन हे तभी देखेगा : ```javascript{3-7,11,12} function Greeting(props) { @@ -120,7 +120,7 @@ ReactDOM.render( [**Try it on CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) -वेरिएबल डिक्लेअर करके और `if` स्टेटमेंट का यूज़ करना जिससे हम कॉम्पोनेन्ट को कंडशनल रेंडर कर सके यह अच्छी बात हे, कभी आपको छोटा शार्ट सिंटेक्स उसे करना पड़ सकता हे .यहाँ नीचे, JSX में इन लाइन कंडीशंस के कुछ पर्याय दिए हे। +वेरिएबल डिक्लेअर करके और `if` स्टेटमेंट का यूज़ करना जिससे हम कौम्पोनॅन्ट को कंडशनल रेंडर कर सके यह अच्छी बात हे, कभी आपको छोटा शार्ट सिंटेक्स उसे करना पड़ सकता हे .यहाँ नीचे, JSX में इन लाइन कंडीशंस के कुछ पर्याय दिए हे। ### लॉजिकल && ऑपरेटर के साथ इन लाइन `if` का इस्तेमाल {#inline-if-with-logical--operator} @@ -188,13 +188,13 @@ render() { } ``` -जैसे की जावास्क्रिप्ट में होता हे, यह हम पे निर्भर करता हे की कोनसा स्टाइल उसे करे जिससे आप और आपि टीम को समझना आसान हो. यह भी याद रहना की जैसे कंडीशंस बड़ी और बेचिदा हो, तब कॉम्पोनेन्ट को एक्सट्रेक्ट करना अच्छा रहता हे [कॉम्पोनेन्ट को एक्सट्रेक्ट](/docs/components-and-props.html#extracting-components)। +जैसे की जावास्क्रिप्ट में होता हे, यह हम पे निर्भर करता हे की कोनसा स्टाइल उसे करे जिससे आप और आपि टीम को समझना आसान हो. यह भी याद रहना की जैसे कंडीशंस बड़ी और बेचिदा हो, तब कौम्पोनॅन्ट को एक्सट्रेक्ट करना अच्छा रहता हे [कौम्पोनॅन्ट को एक्सट्रेक्ट](/docs/components-and-props.html#extracting-components)। -### कॉम्पोनेन्ट को रेंडर करने से बचाये {#preventing-component-from-rendering} +### कौम्पोनॅन्ट को रेंडर करने से बचाये {#preventing-component-from-rendering} -कुछ केसेस में कंपोनेंट को छिपाना पड़ता हे जब की वह किसी दूसरे कॉम्पोनेन्ट में रेंडर हो रहे हो. तब हमको आउटपुट को रेंडर करने के अलावा `null` रीटर्न करना हे। +कुछ केसेस में कंपोनेंट को छिपाना पड़ता हे जब की वह किसी दूसरे कौम्पोनॅन्ट में रेंडर हो रहे हो. तब हमको आउटपुट को रेंडर करने के अलावा `null` रीटर्न करना हे। -जैसे नीचे के एक्साम्पल में, `` यह कॉम्पोनेन्ट `warn` प्रोप के वैल्यू के अनुसार रेंडर हुआ हे. अगर इसकी वैल्यू `false` रहती तोह कॉम्पोनेन्ट रेंडर नहीं होता: +जैसे नीचे के एक्साम्पल में, `` यह कौम्पोनॅन्ट `warn` प्रोप के वैल्यू के अनुसार रेंडर हुआ हे. अगर इसकी वैल्यू `false` रहती तोह कौम्पोनॅन्ट रेंडर नहीं होता: ```javascript{2-4,29} function WarningBanner(props) { @@ -242,4 +242,4 @@ ReactDOM.render( [**Try it on CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) -कॉम्पोनेन्ट के `रेंडर` से `null` रीटर्न करने का और कॉम्पोनेन्ट के लाइफ साइकिल मेथड्स पर कोई असर नहीं पड़ता। जैसे की `componentDidUpdate` फिर भी कॉल होगा। +कौम्पोनॅन्ट के `रेंडर` से `null` रीटर्न करने का और कौम्पोनॅन्ट के लाइफ साइकिल मेथड्स पर कोई असर नहीं पड़ता। जैसे की `componentDidUpdate` फिर भी कॉल होगा। From e380d3da7919fcb1f571fb82d2d1d4e46584707a Mon Sep 17 00:00:00 2001 From: Ashish Kamble Date: Tue, 9 Jul 2019 10:40:24 +0530 Subject: [PATCH 03/19] Update conditional-rendering.md --- content/docs/conditional-rendering.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 5bbb72840..2504ffdd7 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -49,7 +49,7 @@ ReactDOM.render( ### एलिमेंट वेरिएबल {#element-variables} आप एलिमेंट्स को स्टोर करने के लिए वेरिएबल्स का उसे कर सकते हो। -जिससे आपको कंडीशनल रेंडरिंग में मदत होगी और बाकि का आउटपुट चेंज नहीं होगा। +जिससे आपको कंडीशनल रेंडरिंग में मदद होगी और बाकि का आउटपुट चेंज नहीं होगा। अब लॉगिन और लॉगआउट बटन्स नए कौम्पोनॅन्टस को देखो : @@ -124,7 +124,7 @@ ReactDOM.render( ### लॉजिकल && ऑपरेटर के साथ इन लाइन `if` का इस्तेमाल {#inline-if-with-logical--operator} -आप [कोई भी एक्सप्रेशन `jsx` में डाल सकते हे](/docs/introducing-jsx.html#embedding-expressions-in-jsx) उसको कर्ली ब्रेसेस के अंदर व्रैप करना पड़ेगा. इसमें जावास्क्रिप्ट का लॉजिकल `&&` ऑपरेटर भी शामिल हे. इसकी मदत से हम कोई एलिमेंट को कंडीशंस से इन्क्लूड कर सकते हे: +आप [कोई भी एक्सप्रेशन `jsx` में डाल सकते हे](/docs/introducing-jsx.html#embedding-expressions-in-jsx) उसको कर्ली ब्रेसेस के अंदर व्रैप करना पड़ेगा. इसमें जावास्क्रिप्ट का लॉजिकल `&&` ऑपरेटर भी शामिल हे. इसकी मदद से हम कोई एलिमेंट को कंडीशंस से इन्क्लूड कर सकते हे: ```js{6-10} function Mailbox(props) { From d4dc9bdbfdb15181e642344ce5bfb7d472b72d39 Mon Sep 17 00:00:00 2001 From: Ashish Kamble Date: Mon, 15 Jul 2019 10:07:52 +0530 Subject: [PATCH 04/19] done all suggested modifications --- content/docs/conditional-rendering.md | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 2504ffdd7..ea206713b 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -24,7 +24,7 @@ function GuestGreeting(props) { } ``` -हम `Greeting` कौम्पोनॅन्ट बना रहे हे। अगर यूजर लॉगिन हे तभी देखेगा : +हम `Greeting` कौम्पोनॅन्ट बना रहे हे। अगर यूजर लॉगिन हे तभी देखेगा: ```javascript{3-7,11,12} function Greeting(props) { @@ -48,8 +48,7 @@ ReactDOM.render( ### एलिमेंट वेरिएबल {#element-variables} -आप एलिमेंट्स को स्टोर करने के लिए वेरिएबल्स का उसे कर सकते हो। -जिससे आपको कंडीशनल रेंडरिंग में मदद होगी और बाकि का आउटपुट चेंज नहीं होगा। +आप एलिमेंट्स को स्टोर करने के लिए वेरिएबल्स का उसे कर सकते हो। जिससे आपको कंडीशनल रेंडरिंग में मदद होगी और बाकि का आउटपुट चेंज नहीं होगा। अब लॉगिन और लॉगआउट बटन्स नए कौम्पोनॅन्टस को देखो : @@ -72,9 +71,9 @@ function LogoutButton(props) { ``` -इस उदहारण में हम बना रहे हे [स्टेटफुल कौम्पोनॅन्ट](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) जिसे बोलते हे `LoginControl`. +इस उदहारण में हम बना रहे हे [स्टेटफुल कौम्पोनॅन्ट](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) जिसे बोलते हे `LoginControl`। -जो करंट स्टेट के हिसाब से `` या `` को रेंडर करेगा। वो `` को भी रेंडर करेगा जैसे पिछले एक्साम्पल में बताया था: +जो करंट स्टेट के हिसाब से `` या `` को रेंडर करेगा। वो `` को भी रेंडर करेगा जैसे पिछले उदहारण में बताया था: ```javascript{20-25,29,30} class LoginControl extends React.Component { @@ -120,11 +119,11 @@ ReactDOM.render( [**Try it on CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) -वेरिएबल डिक्लेअर करके और `if` स्टेटमेंट का यूज़ करना जिससे हम कौम्पोनॅन्ट को कंडशनल रेंडर कर सके यह अच्छी बात हे, कभी आपको छोटा शार्ट सिंटेक्स उसे करना पड़ सकता हे .यहाँ नीचे, JSX में इन लाइन कंडीशंस के कुछ पर्याय दिए हे। +वेरिएबल डिक्लेअर करते वक्त, `if` स्टेटमेंट उसे कर्कटे कौम्पोनॅन्ट को कण्डीशनली रेंडर करना सही तरीका है, कभी आपको छोटा शार्ट सिंटेक्स उसे करना पड़ सकता हे। यहाँ नीचे, JSX में इन लाइन कंडीशंस के कुछ पर्याय दिए गए हैं। ### लॉजिकल && ऑपरेटर के साथ इन लाइन `if` का इस्तेमाल {#inline-if-with-logical--operator} -आप [कोई भी एक्सप्रेशन `jsx` में डाल सकते हे](/docs/introducing-jsx.html#embedding-expressions-in-jsx) उसको कर्ली ब्रेसेस के अंदर व्रैप करना पड़ेगा. इसमें जावास्क्रिप्ट का लॉजिकल `&&` ऑपरेटर भी शामिल हे. इसकी मदद से हम कोई एलिमेंट को कंडीशंस से इन्क्लूड कर सकते हे: +आप [कोई भी एक्सप्रेशन `jsx` में डाल सकते हे](/docs/introducing-jsx.html#embedding-expressions-in-jsx) उसको कर्ली ब्रेसेस के अंदर व्रैप करना पड़ेगा। इसमें जावास्क्रिप्ट का लॉजिकल `&&` ऑपरेटर भी शामिल हे. इसकी मदद से हम कोई एलिमेंट को कंडीशंस से इन्क्लूड कर सकते हे: ```js{6-10} function Mailbox(props) { From 00f2f2d37f9d911b7b0e20888ea5288535ef8d03 Mon Sep 17 00:00:00 2001 From: Ashish Kamble Date: Mon, 15 Jul 2019 13:52:16 +0530 Subject: [PATCH 05/19] Update conditional-rendering.md --- content/docs/conditional-rendering.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index ea206713b..cbf1de3e4 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -71,7 +71,7 @@ function LogoutButton(props) { ``` -इस उदहारण में हम बना रहे हे [स्टेटफुल कौम्पोनॅन्ट](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) जिसे बोलते हे `LoginControl`। +इस उदहारण में हम बना रहे हे [स्टेटफुल कौम्पोनॅन्ट](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) जिसे बोलते हे `LoginControl`। जो करंट स्टेट के हिसाब से `` या `` को रेंडर करेगा। वो `` को भी रेंडर करेगा जैसे पिछले उदहारण में बताया था: @@ -119,7 +119,7 @@ ReactDOM.render( [**Try it on CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) -वेरिएबल डिक्लेअर करते वक्त, `if` स्टेटमेंट उसे कर्कटे कौम्पोनॅन्ट को कण्डीशनली रेंडर करना सही तरीका है, कभी आपको छोटा शार्ट सिंटेक्स उसे करना पड़ सकता हे। यहाँ नीचे, JSX में इन लाइन कंडीशंस के कुछ पर्याय दिए गए हैं। +वेरिएबल डिक्लेअर करते वक्त, `if` टमेंट से कौम्पोनॅन्ट को कण्डीशनली रेंडर करना सही तरीका है, कभी आपको छोटा शार्ट सिंटेक्स उसे करना पड़ सकता हे। यहाँ नीचे, JSX में इन लाइन कंडीशंस के कुछ पर्याय दिए गए हैं। ### लॉजिकल && ऑपरेटर के साथ इन लाइन `if` का इस्तेमाल {#inline-if-with-logical--operator} @@ -149,7 +149,7 @@ ReactDOM.render( [**Try it on CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010) -जैवसक्रिप्ट मे यह काम करता हे, `true && expression` हमेशा `expression` होता हे, और `false && expression` हमेशा `false` होता हे। +जैवसक्रिप्ट मे यह काम करता हे, `true && expression` हमेशा `expression` होता हे, और `false && expression` हमेशा `false` होता हे। इसीलिए, अगर कोई कंडीशन `true` हे, तोह `&&` के आगे का एलिमेंट आउटपुट में आ जाता हे। अगर यह `false` हे, फिर रियेक्ट इसको इग्नोर कर स्किप करेगा। From 497fdead1b8c6a18775e6a66a5bf899633feff83 Mon Sep 17 00:00:00 2001 From: Ashish Kamble Date: Mon, 15 Jul 2019 13:56:27 +0530 Subject: [PATCH 06/19] done with all suggestions --- content/docs/conditional-rendering.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index cbf1de3e4..3f2c70ce0 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -119,7 +119,7 @@ ReactDOM.render( [**Try it on CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) -वेरिएबल डिक्लेअर करते वक्त, `if` टमेंट से कौम्पोनॅन्ट को कण्डीशनली रेंडर करना सही तरीका है, कभी आपको छोटा शार्ट सिंटेक्स उसे करना पड़ सकता हे। यहाँ नीचे, JSX में इन लाइन कंडीशंस के कुछ पर्याय दिए गए हैं। +वेरिएबल डिक्लेअर करते वक्त, `if` स्टेटमेंट से कौम्पोनॅन्ट को कण्डीशनली रेंडर करना सही तरीका है, कभी आपको छोटा शार्ट सिंटेक्स उसे करना पड़ सकता हे। यहाँ नीचे, JSX में इन लाइन कंडीशंस के कुछ पर्याय दिए गए हैं। ### लॉजिकल && ऑपरेटर के साथ इन लाइन `if` का इस्तेमाल {#inline-if-with-logical--operator} From 8484f2f86ba64962cc485469a573df94dc8b063b Mon Sep 17 00:00:00 2001 From: Ashish Kamble Date: Mon, 15 Jul 2019 15:33:01 +0530 Subject: [PATCH 07/19] Update conditional-rendering.md --- content/docs/conditional-rendering.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 3f2c70ce0..1f148b857 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -71,7 +71,7 @@ function LogoutButton(props) { ``` -इस उदहारण में हम बना रहे हे [स्टेटफुल कौम्पोनॅन्ट](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) जिसे बोलते हे `LoginControl`। +इस उदहारण में हम बना रहे हे [स्टेटफुल कौम्पोनॅन्ट](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) जिसे बोलते हैं `LoginControl`। जो करंट स्टेट के हिसाब से `` या `` को रेंडर करेगा। वो `` को भी रेंडर करेगा जैसे पिछले उदहारण में बताया था: @@ -123,7 +123,7 @@ ReactDOM.render( ### लॉजिकल && ऑपरेटर के साथ इन लाइन `if` का इस्तेमाल {#inline-if-with-logical--operator} -आप [कोई भी एक्सप्रेशन `jsx` में डाल सकते हे](/docs/introducing-jsx.html#embedding-expressions-in-jsx) उसको कर्ली ब्रेसेस के अंदर व्रैप करना पड़ेगा। इसमें जावास्क्रिप्ट का लॉजिकल `&&` ऑपरेटर भी शामिल हे. इसकी मदद से हम कोई एलिमेंट को कंडीशंस से इन्क्लूड कर सकते हे: +आप [किसी भी एक्सप्रेशन को `jsx`](/docs/introducing-jsx.html#embedding-expressions-in-jsx) में कर्ली ब्रेसेस इस्तेमाल करके ड़ाल सकते हैं। इसमें जावास्क्रिप्ट का लॉजिकल `&&` ऑपरेटर भी शामिल हे। इसकी मदद से हम किसी भी एलिमेंट को कंडीशंस से इन्क्लूड कर सकते हे: ```js{6-10} function Mailbox(props) { @@ -149,9 +149,9 @@ ReactDOM.render( [**Try it on CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010) -जैवसक्रिप्ट मे यह काम करता हे, `true && expression` हमेशा `expression` होता हे, और `false && expression` हमेशा `false` होता हे। +जैवसक्रिप्ट मे यह काम करता है क्यूंकि, `true && expression` हमेशा `expression` बन जाता है, और `false && expression` हमेशा `false` बन जाता है। -इसीलिए, अगर कोई कंडीशन `true` हे, तोह `&&` के आगे का एलिमेंट आउटपुट में आ जाता हे। अगर यह `false` हे, फिर रियेक्ट इसको इग्नोर कर स्किप करेगा। +इसीलिए, अगर कोई कंडीशन `true` है, तोह `&&` के आगे का एलिमेंट आउटपुट में आ जाता हे। अगर यह `false` है, फिर React इसको रेंडर नहीं करता है। ### कंडीशनल ऑपरेटर्स के साथ इन लाइन if-else {#inline-if-else-with-conditional-operator} From 03a0074d620d7d9a52fa1b94ec16e8de091a6913 Mon Sep 17 00:00:00 2001 From: Ashish Kamble Date: Mon, 15 Jul 2019 15:34:03 +0530 Subject: [PATCH 08/19] done with suggested modification --- content/docs/conditional-rendering.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 1f148b857..c605a9738 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -157,7 +157,7 @@ ReactDOM.render( जावास्क्रिप्ट की कंडीशनल ऑपरेटर्स का उसे करना [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) यह इन लाइन एलिमेंट्स की कंडीशनल रेंडरिंग की दूसरी पद्धति हे। -जैसे नीचे के एक्साम्पल में, कंडीशनल रेंडर कर छोटे टेक्स्ट ब्लॉक को रेंडर किआ। +जैसे नीचे के उदहारण में, कंडीशनल रेंडर कर छोटे टेक्स्ट ब्लॉक को रेंडर किआ। ```javascript{5} render() { @@ -193,7 +193,7 @@ render() { कुछ केसेस में कंपोनेंट को छिपाना पड़ता हे जब की वह किसी दूसरे कौम्पोनॅन्ट में रेंडर हो रहे हो. तब हमको आउटपुट को रेंडर करने के अलावा `null` रीटर्न करना हे। -जैसे नीचे के एक्साम्पल में, `` यह कौम्पोनॅन्ट `warn` प्रोप के वैल्यू के अनुसार रेंडर हुआ हे. अगर इसकी वैल्यू `false` रहती तोह कौम्पोनॅन्ट रेंडर नहीं होता: +जैसे नीचे के उदहारण में, `` यह कौम्पोनॅन्ट `warn` प्रोप के वैल्यू के अनुसार रेंडर हुआ हे. अगर इसकी वैल्यू `false` रहती तोह कौम्पोनॅन्ट रेंडर नहीं होता: ```javascript{2-4,29} function WarningBanner(props) { From 5e6b1e13c403cd087e6c51b1b26a8698d2d54a4e Mon Sep 17 00:00:00 2001 From: Ashish Kamble Date: Tue, 16 Jul 2019 12:23:12 +0530 Subject: [PATCH 09/19] done with review one modifications ready to go for second review --- content/docs/conditional-rendering.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index c605a9738..70f22bb47 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -153,11 +153,11 @@ ReactDOM.render( इसीलिए, अगर कोई कंडीशन `true` है, तोह `&&` के आगे का एलिमेंट आउटपुट में आ जाता हे। अगर यह `false` है, फिर React इसको रेंडर नहीं करता है। -### कंडीशनल ऑपरेटर्स के साथ इन लाइन if-else {#inline-if-else-with-conditional-operator} +### कंडीशनल ऑपरेटर्स के साथ इन लाइन If-Else {#inline-if-else-with-conditional-operator} -जावास्क्रिप्ट की कंडीशनल ऑपरेटर्स का उसे करना [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) यह इन लाइन एलिमेंट्स की कंडीशनल रेंडरिंग की दूसरी पद्धति हे। +जावास्क्रिप्ट कंडीशनल ऑपरेटर [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) इस्तेमाल करके एलिमेंट्स को इन लाइन में कण्डीशनली रेंडर भी कर सकते हैं। -जैसे नीचे के उदहारण में, कंडीशनल रेंडर कर छोटे टेक्स्ट ब्लॉक को रेंडर किआ। +जैसे नीचे के उदहारण में, छोटे टेक्स्ट ब्लॉक को इसे इस्तेमाल करके कण्डीशनली रेंडर किया है। ```javascript{5} render() { @@ -170,7 +170,7 @@ render() { } ``` -इसे हम बड़े एक्सप्रेशन्स के साथ भी उसे कर सकते हे इससे कैसे काम हो रहा हे यह समझना आसान हो जाता हे: +इसे हम बड़े एक्सप्रेशन्स के साथ भी उसे कर सकते है हालांकि यह जानना कम स्पष्ट है कि क्या हो रहा है: ```js{5,7,9} render() { @@ -187,13 +187,13 @@ render() { } ``` -जैसे की जावास्क्रिप्ट में होता हे, यह हम पे निर्भर करता हे की कोनसा स्टाइल उसे करे जिससे आप और आपि टीम को समझना आसान हो. यह भी याद रहना की जैसे कंडीशंस बड़ी और बेचिदा हो, तब कौम्पोनॅन्ट को एक्सट्रेक्ट करना अच्छा रहता हे [कौम्पोनॅन्ट को एक्सट्रेक्ट](/docs/components-and-props.html#extracting-components)। +जैसे की जावास्क्रिप्ट में होता हे, यह हम पे निर्भर करता हे की कोनसा स्टाइल इस्तेमाल करें जिससे आप और आपकी टीम को समझना आसान हो. यह भी याद रहना की जैसे कंडीशंस बड़ी और पेचीदा हो, तब कौम्पोनॅन्ट को एक्सट्रेक्ट करना अच्छा रहता है [कौम्पोनॅन्ट एक्सट्रेक्ट करना](/docs/components-and-props.html#extracting-components)। -### कौम्पोनॅन्ट को रेंडर करने से बचाये {#preventing-component-from-rendering} +### कौम्पोनॅन्ट को रेंडर होने से रोकें {#preventing-component-from-rendering} -कुछ केसेस में कंपोनेंट को छिपाना पड़ता हे जब की वह किसी दूसरे कौम्पोनॅन्ट में रेंडर हो रहे हो. तब हमको आउटपुट को रेंडर करने के अलावा `null` रीटर्न करना हे। +कुछ केसेस में कौम्पोनॅन्ट को छिपाना पड़ता हे जब की वह किसी दूसरे कौम्पोनॅन्ट में रेंडर हो रहे हो। तब हमको आउटपुट को रेंडर करने के बजाये `null` रीटर्न करना है। -जैसे नीचे के उदहारण में, `` यह कौम्पोनॅन्ट `warn` प्रोप के वैल्यू के अनुसार रेंडर हुआ हे. अगर इसकी वैल्यू `false` रहती तोह कौम्पोनॅन्ट रेंडर नहीं होता: +जैसे नीचे के उदहारण में, `` यह कौम्पोनॅन्ट `warn` प्रोप के वैल्यू के अनुसार रेंडर हुआ है। अगर इसकी वैल्यू `false` रहती तो कौम्पोनॅन्ट रेंडर नहीं होता: ```javascript{2-4,29} function WarningBanner(props) { @@ -241,4 +241,4 @@ ReactDOM.render( [**Try it on CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) -कौम्पोनॅन्ट के `रेंडर` से `null` रीटर्न करने का और कौम्पोनॅन्ट के लाइफ साइकिल मेथड्स पर कोई असर नहीं पड़ता। जैसे की `componentDidUpdate` फिर भी कॉल होगा। +कौम्पोनॅन्ट के `रेंडर` से `null` रीटर्न करने का कौम्पोनॅन्ट के लाइफ साइकिल मेथड्स पर कोई असर नहीं पड़ता। जैसे की `componentDidUpdate` फिर भी कॉल होगा। From c32218e425aeea1796cb85aa216a6ef752f6220e Mon Sep 17 00:00:00 2001 From: Ashish Kamble Date: Wed, 17 Jul 2019 10:59:04 +0530 Subject: [PATCH 10/19] Done with all reaming changes --- content/docs/conditional-rendering.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 70f22bb47..eb6a0aa4f 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -10,7 +10,7 @@ redirect_from: React में, आप अलग-अलग कौम्पोनॅन्ट बना सकते हैं जो आपके लिए आवश्यक व्यवहार को संक्षिप्त करते हैं। फिर, आप अपने ऍप की स्टेट के आधार पर उनमें से कुछ को ही रिप्रेजेंट कर सकते हैं। -कंडीशनल रेंडरिंग React में वैसे ही काम करता हे जैसे कंडीशंस जावास्क्रिप्ट में करते हे। जावास्क्रिप्ट ऑपरेटर्स जैसे [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) और [`कंडीशनल ऑपरेटर्स `](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) जो एलिमेंट्स बनके करंट स्टेट को रिप्रेजेंट करते हे। फिर React UI को अपडेट करके मैच कर देगा। +कंडीशनल रेंडरिंग React में वैसे ही काम करता है जैसे कंडीशंस जावास्क्रिप्ट में करते है। जावास्क्रिप्ट ऑपरेटर्स जैसे [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) और [`कंडीशनल ऑपरेटर्स `](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) जो एलिमेंट्स बनके करंट स्टेट को रिप्रेजेंट करते है। फिर React UI को अपडेट करके मैच कर देगा। उदाहरण के तौर पे यह दो कौम्पोनॅन्ट देखो: @@ -24,7 +24,7 @@ function GuestGreeting(props) { } ``` -हम `Greeting` कौम्पोनॅन्ट बना रहे हे। अगर यूजर लॉगिन हे तभी देखेगा: +हम `Greeting` कौम्पोनॅन्ट बना रहै है। अगर यूजर लॉगिन है तभी देखेगा: ```javascript{3-7,11,12} function Greeting(props) { @@ -44,7 +44,7 @@ ReactDOM.render( [**Try it on CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) -यह उदहारण `isLoggedIn` प्रोप के वैल्यू के अनुसार अलग अलग ग्रीटिंग्स रेंडर करता हे। +यह उदहारण `isLoggedIn` प्रोप के वैल्यू के अनुसार अलग अलग ग्रीटिंग्स रेंडर करता है। ### एलिमेंट वेरिएबल {#element-variables} @@ -71,7 +71,7 @@ function LogoutButton(props) { ``` -इस उदहारण में हम बना रहे हे [स्टेटफुल कौम्पोनॅन्ट](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) जिसे बोलते हैं `LoginControl`। +इस उदहारण में हम बना रहै है [स्टेटफुल कौम्पोनॅन्ट](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) जिसे बोलते हैं `LoginControl`। जो करंट स्टेट के हिसाब से `` या `` को रेंडर करेगा। वो `` को भी रेंडर करेगा जैसे पिछले उदहारण में बताया था: @@ -119,11 +119,11 @@ ReactDOM.render( [**Try it on CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) -वेरिएबल डिक्लेअर करते वक्त, `if` स्टेटमेंट से कौम्पोनॅन्ट को कण्डीशनली रेंडर करना सही तरीका है, कभी आपको छोटा शार्ट सिंटेक्स उसे करना पड़ सकता हे। यहाँ नीचे, JSX में इन लाइन कंडीशंस के कुछ पर्याय दिए गए हैं। +वेरिएबल डिक्लेअर करते वक्त, `if` स्टेटमेंट से कौम्पोनॅन्ट को कण्डीशनली रेंडर करना सही तरीका है, कभी आपको छोटा शार्ट सिंटेक्स उसे करना पड़ सकता है। यहाँ नीचे, JSX में इन लाइन कंडीशंस के कुछ पर्याय दिए गए हैं। ### लॉजिकल && ऑपरेटर के साथ इन लाइन `if` का इस्तेमाल {#inline-if-with-logical--operator} -आप [किसी भी एक्सप्रेशन को `jsx`](/docs/introducing-jsx.html#embedding-expressions-in-jsx) में कर्ली ब्रेसेस इस्तेमाल करके ड़ाल सकते हैं। इसमें जावास्क्रिप्ट का लॉजिकल `&&` ऑपरेटर भी शामिल हे। इसकी मदद से हम किसी भी एलिमेंट को कंडीशंस से इन्क्लूड कर सकते हे: +आप [किसी भी एक्सप्रेशन को `jsx`](/docs/introducing-jsx.html#embedding-expressions-in-jsx) में कर्ली ब्रेसेस इस्तेमाल करके ड़ाल सकते हैं। इसमें जावास्क्रिप्ट का लॉजिकल `&&` ऑपरेटर भी शामिल है। इसकी मदद से हम किसी भी एलिमेंट को कंडीशंस से इन्क्लूड कर सकते है: ```js{6-10} function Mailbox(props) { @@ -151,7 +151,7 @@ ReactDOM.render( जैवसक्रिप्ट मे यह काम करता है क्यूंकि, `true && expression` हमेशा `expression` बन जाता है, और `false && expression` हमेशा `false` बन जाता है। -इसीलिए, अगर कोई कंडीशन `true` है, तोह `&&` के आगे का एलिमेंट आउटपुट में आ जाता हे। अगर यह `false` है, फिर React इसको रेंडर नहीं करता है। +इसीलिए, अगर कोई कंडीशन `true` है, तोह `&&` के आगे का एलिमेंट आउटपुट में आ जाता है। अगर यह `false` है, फिर React इसको रेंडर नहीं करता है। ### कंडीशनल ऑपरेटर्स के साथ इन लाइन If-Else {#inline-if-else-with-conditional-operator} @@ -187,11 +187,11 @@ render() { } ``` -जैसे की जावास्क्रिप्ट में होता हे, यह हम पे निर्भर करता हे की कोनसा स्टाइल इस्तेमाल करें जिससे आप और आपकी टीम को समझना आसान हो. यह भी याद रहना की जैसे कंडीशंस बड़ी और पेचीदा हो, तब कौम्पोनॅन्ट को एक्सट्रेक्ट करना अच्छा रहता है [कौम्पोनॅन्ट एक्सट्रेक्ट करना](/docs/components-and-props.html#extracting-components)। +जैसे की जावास्क्रिप्ट में होता है, यह हम पे निर्भर करता है की कोनसा स्टाइल इस्तेमाल करें जिससे आप और आपकी टीम को समझना आसान हो। यह भी याद रहना की जैसे कंडीशंस बड़ी और पेचीदा हो, तब कौम्पोनॅन्ट को एक्सट्रेक्ट करना अच्छा रहता है [कौम्पोनॅन्ट एक्सट्रेक्ट करना](/docs/components-and-props.html#extracting-components)। ### कौम्पोनॅन्ट को रेंडर होने से रोकें {#preventing-component-from-rendering} -कुछ केसेस में कौम्पोनॅन्ट को छिपाना पड़ता हे जब की वह किसी दूसरे कौम्पोनॅन्ट में रेंडर हो रहे हो। तब हमको आउटपुट को रेंडर करने के बजाये `null` रीटर्न करना है। +कुछ केसेस में कौम्पोनॅन्ट को छिपाना पड़ता है जब की वह किसी दूसरे कौम्पोनॅन्ट में रेंडर हो रहै हो। तब हमको आउटपुट को रेंडर करने के बजाये `null` रीटर्न करना है। जैसे नीचे के उदहारण में, `` यह कौम्पोनॅन्ट `warn` प्रोप के वैल्यू के अनुसार रेंडर हुआ है। अगर इसकी वैल्यू `false` रहती तो कौम्पोनॅन्ट रेंडर नहीं होता: From 481497d3f29fdc1add585b2c4d0490e93645fa0f Mon Sep 17 00:00:00 2001 From: Ashish Kamble Date: Wed, 17 Jul 2019 11:02:38 +0530 Subject: [PATCH 11/19] fixed --- content/docs/conditional-rendering.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index eb6a0aa4f..7fd7d27c6 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -24,7 +24,7 @@ function GuestGreeting(props) { } ``` -हम `Greeting` कौम्पोनॅन्ट बना रहै है। अगर यूजर लॉगिन है तभी देखेगा: +हम `Greeting` कौम्पोनॅन्ट बना रहे हे। अगर यूजर लॉगिन है तभी देखेगा: ```javascript{3-7,11,12} function Greeting(props) { @@ -71,7 +71,7 @@ function LogoutButton(props) { ``` -इस उदहारण में हम बना रहै है [स्टेटफुल कौम्पोनॅन्ट](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) जिसे बोलते हैं `LoginControl`। +इस उदहारण में हम बना रहे हे [स्टेटफुल कौम्पोनॅन्ट](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) जिसे बोलते हैं `LoginControl`। जो करंट स्टेट के हिसाब से `` या `` को रेंडर करेगा। वो `` को भी रेंडर करेगा जैसे पिछले उदहारण में बताया था: From f314253530115e0a5cd3532b55af51dbce005093 Mon Sep 17 00:00:00 2001 From: Ashish Kamble Date: Wed, 17 Jul 2019 11:04:43 +0530 Subject: [PATCH 12/19] =?UTF-8?q?fixed=20`=E0=A4=B0=E0=A4=B9=E0=A5=88`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/conditional-rendering.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 7fd7d27c6..7b165fd81 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -191,7 +191,7 @@ render() { ### कौम्पोनॅन्ट को रेंडर होने से रोकें {#preventing-component-from-rendering} -कुछ केसेस में कौम्पोनॅन्ट को छिपाना पड़ता है जब की वह किसी दूसरे कौम्पोनॅन्ट में रेंडर हो रहै हो। तब हमको आउटपुट को रेंडर करने के बजाये `null` रीटर्न करना है। +कुछ केसेस में कौम्पोनॅन्ट को छिपाना पड़ता है जब की वह किसी दूसरे कौम्पोनॅन्ट में रेंडर हो रहे हो। तब हमको आउटपुट को रेंडर करने के बजाये `null` रीटर्न करना है। जैसे नीचे के उदहारण में, `` यह कौम्पोनॅन्ट `warn` प्रोप के वैल्यू के अनुसार रेंडर हुआ है। अगर इसकी वैल्यू `false` रहती तो कौम्पोनॅन्ट रेंडर नहीं होता: From 07be650b05f98afccd57bb7f19ab07e235e26368 Mon Sep 17 00:00:00 2001 From: Ashish Kamble Date: Thu, 18 Jul 2019 10:55:34 +0530 Subject: [PATCH 13/19] =?UTF-8?q?done=20=E0=A4=B9=E0=A5=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/conditional-rendering.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 7b165fd81..b197b5918 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -24,7 +24,7 @@ function GuestGreeting(props) { } ``` -हम `Greeting` कौम्पोनॅन्ट बना रहे हे। अगर यूजर लॉगिन है तभी देखेगा: +हम `Greeting` कौम्पोनॅन्ट बना रहे है। अगर यूजर लॉगिन है तभी देखेगा: ```javascript{3-7,11,12} function Greeting(props) { @@ -71,7 +71,7 @@ function LogoutButton(props) { ``` -इस उदहारण में हम बना रहे हे [स्टेटफुल कौम्पोनॅन्ट](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) जिसे बोलते हैं `LoginControl`। +इस उदहारण में हम बना रहे है [स्टेटफुल कौम्पोनॅन्ट](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) जिसे बोलते हैं `LoginControl`। जो करंट स्टेट के हिसाब से `` या `` को रेंडर करेगा। वो `` को भी रेंडर करेगा जैसे पिछले उदहारण में बताया था: From 01a245c08ab18fbcbf33377023ba88f16b5f5728 Mon Sep 17 00:00:00 2001 From: Ashish Kamble Date: Wed, 24 Jul 2019 16:05:14 +0530 Subject: [PATCH 14/19] Update conditional-rendering.md --- content/docs/conditional-rendering.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index b197b5918..9667e98d9 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -8,11 +8,11 @@ redirect_from: - "tips/false-in-jsx.html" --- -React में, आप अलग-अलग कौम्पोनॅन्ट बना सकते हैं जो आपके लिए आवश्यक व्यवहार को संक्षिप्त करते हैं। फिर, आप अपने ऍप की स्टेट के आधार पर उनमें से कुछ को ही रिप्रेजेंट कर सकते हैं। +React में, आप अलग-अलग कौम्पोनॅन्ट बना सकते हैं जो आपके लिए आवश्यक व्यवहार को encapsulate करते हैं। फिर, आप अपने ऍप की स्टेट के आधार पर उनमें से कुछ को ही रिप्रेजेंट कर सकते हैं। कंडीशनल रेंडरिंग React में वैसे ही काम करता है जैसे कंडीशंस जावास्क्रिप्ट में करते है। जावास्क्रिप्ट ऑपरेटर्स जैसे [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) और [`कंडीशनल ऑपरेटर्स `](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) जो एलिमेंट्स बनके करंट स्टेट को रिप्रेजेंट करते है। फिर React UI को अपडेट करके मैच कर देगा। -उदाहरण के तौर पे यह दो कौम्पोनॅन्ट देखो: +उदाहरण के तौर पे यह दो कौम्पोनॅन्ट को देखे: ```js function UserGreeting(props) { @@ -24,7 +24,7 @@ function GuestGreeting(props) { } ``` -हम `Greeting` कौम्पोनॅन्ट बना रहे है। अगर यूजर लॉगिन है तभी देखेगा: +हम एक `Greeting` कौम्पोनॅन्ट बनाएंगे जो तभी दिखेगा जब यूजर लॉगिन हे: ```javascript{3-7,11,12} function Greeting(props) { @@ -46,7 +46,7 @@ ReactDOM.render( यह उदहारण `isLoggedIn` प्रोप के वैल्यू के अनुसार अलग अलग ग्रीटिंग्स रेंडर करता है। -### एलिमेंट वेरिएबल {#element-variables} +### एलिमेंट variables {#element-variables} आप एलिमेंट्स को स्टोर करने के लिए वेरिएबल्स का उसे कर सकते हो। जिससे आपको कंडीशनल रेंडरिंग में मदद होगी और बाकि का आउटपुट चेंज नहीं होगा। From 4775ef390e5f79236f3f93d6eff12f59ebb47219 Mon Sep 17 00:00:00 2001 From: Ashish Kamble Date: Wed, 24 Jul 2019 16:20:51 +0530 Subject: [PATCH 15/19] Update conditional-rendering.md --- content/docs/conditional-rendering.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 9667e98d9..7589a84cc 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -10,8 +10,7 @@ redirect_from: React में, आप अलग-अलग कौम्पोनॅन्ट बना सकते हैं जो आपके लिए आवश्यक व्यवहार को encapsulate करते हैं। फिर, आप अपने ऍप की स्टेट के आधार पर उनमें से कुछ को ही रिप्रेजेंट कर सकते हैं। -कंडीशनल रेंडरिंग React में वैसे ही काम करता है जैसे कंडीशंस जावास्क्रिप्ट में करते है। जावास्क्रिप्ट ऑपरेटर्स जैसे [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) और [`कंडीशनल ऑपरेटर्स `](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) जो एलिमेंट्स बनके करंट स्टेट को रिप्रेजेंट करते है। फिर React UI को अपडेट करके मैच कर देगा। - +जावास्क्रिप्ट के ऑपरेटर्स [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) और [`कंडीशनल ऑपरेटर्स `](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) जैसे काम करते हे वैसे ही React में कंडीशनल रेंडरिंग काम करता हे। जिससे चालू स्टेट के एलिमेंट्स बना कर React को UI बदलने दो। उदाहरण के तौर पे यह दो कौम्पोनॅन्ट को देखे: ```js From 69c5b6685cc0d875ec9be650020ad0b8f44ddee4 Mon Sep 17 00:00:00 2001 From: Ashish Kamble Date: Thu, 25 Jul 2019 17:26:07 +0530 Subject: [PATCH 16/19] Update conditional-rendering.md --- content/docs/conditional-rendering.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 7589a84cc..bd583e17f 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -8,9 +8,9 @@ redirect_from: - "tips/false-in-jsx.html" --- -React में, आप अलग-अलग कौम्पोनॅन्ट बना सकते हैं जो आपके लिए आवश्यक व्यवहार को encapsulate करते हैं। फिर, आप अपने ऍप की स्टेट के आधार पर उनमें से कुछ को ही रिप्रेजेंट कर सकते हैं। +React में, आप अलग-अलग कौम्पोनॅन्ट बना सकते हैं जो आपके लिए आवश्यक व्यवहार को एनकैप्सुलेट करते हैं। फिर, आप अपने ऍप की स्टेट के आधार पर उनमें से कुछ को ही रिप्रेजेंट कर सकते हैं। -जावास्क्रिप्ट के ऑपरेटर्स [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) और [`कंडीशनल ऑपरेटर्स `](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) जैसे काम करते हे वैसे ही React में कंडीशनल रेंडरिंग काम करता हे। जिससे चालू स्टेट के एलिमेंट्स बना कर React को UI बदलने दो। +जावास्क्रिप्ट के ऑपरेटर्स [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) और [`कंडीशनल ऑपरेटर्स `](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) जैसे काम करते हे वैसे ही React में कंडीशनल रेंडरिंग काम करता हे। करंट स्टेट के एलिमेंट्स बना कर उस हिसाब से React UI को अपडेट कर देता हे। उदाहरण के तौर पे यह दो कौम्पोनॅन्ट को देखे: ```js @@ -23,7 +23,7 @@ function GuestGreeting(props) { } ``` -हम एक `Greeting` कौम्पोनॅन्ट बनाएंगे जो तभी दिखेगा जब यूजर लॉगिन हे: +हम एक `Greeting` कौम्पोनॅन्ट बनाएंगे जो तभी दिखेगा जब यूजर लॉग्डइन हे: ```javascript{3-7,11,12} function Greeting(props) { @@ -45,7 +45,7 @@ ReactDOM.render( यह उदहारण `isLoggedIn` प्रोप के वैल्यू के अनुसार अलग अलग ग्रीटिंग्स रेंडर करता है। -### एलिमेंट variables {#element-variables} +### एलिमेंट वेरिएबल्स {#element-variables} आप एलिमेंट्स को स्टोर करने के लिए वेरिएबल्स का उसे कर सकते हो। जिससे आपको कंडीशनल रेंडरिंग में मदद होगी और बाकि का आउटपुट चेंज नहीं होगा। From 04af0590f35d5e7fe9200c7e79a3b4662b2fbccc Mon Sep 17 00:00:00 2001 From: Ashish Kamble Date: Thu, 1 Aug 2019 11:34:01 +0530 Subject: [PATCH 17/19] Update conditional-rendering.md --- content/docs/conditional-rendering.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index bd583e17f..2479bd596 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -10,7 +10,7 @@ redirect_from: React में, आप अलग-अलग कौम्पोनॅन्ट बना सकते हैं जो आपके लिए आवश्यक व्यवहार को एनकैप्सुलेट करते हैं। फिर, आप अपने ऍप की स्टेट के आधार पर उनमें से कुछ को ही रिप्रेजेंट कर सकते हैं। -जावास्क्रिप्ट के ऑपरेटर्स [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) और [`कंडीशनल ऑपरेटर्स `](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) जैसे काम करते हे वैसे ही React में कंडीशनल रेंडरिंग काम करता हे। करंट स्टेट के एलिमेंट्स बना कर उस हिसाब से React UI को अपडेट कर देता हे। +कंडीशनल रेंडरिंग React में वैसे ही काम करता है जैसे कंडीशंस जावास्क्रिप्ट में करते है। जावास्क्रिप्ट के ऑपरेटर्स [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) और [`कंडीशनल ऑपरेटर्स `](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) का इस्तेमाल ऐसे एलिमेंट्स बनाने के लिए किया जा सकता हे जो करंट स्टेट को रिप्रेजेंट करे, और React उस हिसाब UI को अपडेट करेगा ताकि वेह UI से मैच करे। उदाहरण के तौर पे यह दो कौम्पोनॅन्ट को देखे: ```js @@ -23,7 +23,7 @@ function GuestGreeting(props) { } ``` -हम एक `Greeting` कौम्पोनॅन्ट बनाएंगे जो तभी दिखेगा जब यूजर लॉग्डइन हे: +हम एक Greeting कौम्पोनॅन्ट बनाएंगे जो यूजर की लॉग्डइन स्थिति के अनुसार इन दोनों में से एक कॉम्पोनेन्ट दिखायेगा: ```javascript{3-7,11,12} function Greeting(props) { From 3a129019074b6f2fdf3c4df30c96c6cc33d8105d Mon Sep 17 00:00:00 2001 From: Ashish Kamble Date: Thu, 24 Oct 2019 11:59:35 +0530 Subject: [PATCH 18/19] Done with the New changes Reviewed done --- content/docs/conditional-rendering.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 2479bd596..80ea196a2 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -10,7 +10,8 @@ redirect_from: React में, आप अलग-अलग कौम्पोनॅन्ट बना सकते हैं जो आपके लिए आवश्यक व्यवहार को एनकैप्सुलेट करते हैं। फिर, आप अपने ऍप की स्टेट के आधार पर उनमें से कुछ को ही रिप्रेजेंट कर सकते हैं। -कंडीशनल रेंडरिंग React में वैसे ही काम करता है जैसे कंडीशंस जावास्क्रिप्ट में करते है। जावास्क्रिप्ट के ऑपरेटर्स [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) और [`कंडीशनल ऑपरेटर्स `](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) का इस्तेमाल ऐसे एलिमेंट्स बनाने के लिए किया जा सकता हे जो करंट स्टेट को रिप्रेजेंट करे, और React उस हिसाब UI को अपडेट करेगा ताकि वेह UI से मैच करे। +कंडीशनल रेंडरिंग React में वैसे ही काम करता है जैसे कंडीशंस जावास्क्रिप्ट में करते है। जावास्क्रिप्ट के ऑपरेटर्स [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) और [`कंडीशनल ऑपरेटर्स `](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) का इस्तेमाल ऐसे एलिमेंट्स बनाने के लिए किया जा सकता हे जो करंट स्टेट को रिप्रेजेंट करे, और React उस हिसाब से UI को अपडेट करेगा ताकि वेह UI से मैच करे। + उदाहरण के तौर पे यह दो कौम्पोनॅन्ट को देखे: ```js @@ -41,15 +42,15 @@ ReactDOM.render( ); ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) +[**CodePen में कोशिश करो**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) यह उदहारण `isLoggedIn` प्रोप के वैल्यू के अनुसार अलग अलग ग्रीटिंग्स रेंडर करता है। ### एलिमेंट वेरिएबल्स {#element-variables} -आप एलिमेंट्स को स्टोर करने के लिए वेरिएबल्स का उसे कर सकते हो। जिससे आपको कंडीशनल रेंडरिंग में मदद होगी और बाकि का आउटपुट चेंज नहीं होगा। +आप एलिमेंट्स को स्टोर करने के लिए वेरिएबल्स का उसे उपयोग कर सकते हैं। यह आपको कंडीशनल रेंडरिंग में मदद करेगा जबकि बाकि का आउटपुट नहीं बदलेगा। -अब लॉगिन और लॉगआउट बटन्स नए कौम्पोनॅन्टस को देखो : +लॉगिन और लॉगआउट बटन्स के नए कौम्पोनॅन्टस पर विचार करें : ```js function LoginButton(props) { From 0e37f8194b419ace189879efb3fa7a0440bc6e6b Mon Sep 17 00:00:00 2001 From: Ashish Kamble Date: Wed, 6 Nov 2019 18:15:25 +0530 Subject: [PATCH 19/19] Done with Hindi Changes for

tag --- content/docs/conditional-rendering.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 80ea196a2..70e31788f 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -16,11 +16,11 @@ React में, आप अलग-अलग कौम्पोनॅन्ट ```js function UserGreeting(props) { - return

Welcome back!

; + return

वापसी पर स्वागत है!

; } function GuestGreeting(props) { - return

Please sign up.

; + return

कृपया साइन अप करो।

; } ```