From b97bb836d886da69c5fb6f6f25b0904a88f802ff Mon Sep 17 00:00:00 2001 From: Sambhav Sacheti Date: Tue, 26 Mar 2019 18:12:31 +0000 Subject: [PATCH 01/14] done until line 172 --- content/docs/lifting-state-up.md | 44 +++++++++++++++++--------------- 1 file changed, 23 insertions(+), 21 deletions(-) diff --git a/content/docs/lifting-state-up.md b/content/docs/lifting-state-up.md index 449330cfd..2b9ce1040 100644 --- a/content/docs/lifting-state-up.md +++ b/content/docs/lifting-state-up.md @@ -1,6 +1,6 @@ --- id: lifting-state-up -title: Lifting State Up +title: स्टेट को ऊपर लेजाना permalink: docs/lifting-state-up.html prev: forms.html next: composition-vs-inheritance.html @@ -9,11 +9,11 @@ redirect_from: - "docs/flux-todo-list.html" --- -Often, several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common ancestor. Let's see how this works in action. +अक्सर, कई कौम्पोनॅन्टस को एक ही बदलते डेटा को प्रतिबिंबित करने की आवश्यकता होती है। हम उनके निकटतम सामान्य पूर्वज तक स्टेट को उठाने की सलाह देते हैं| आइए देखें कि यह कैसे कार्य करता है। -In this section, we will create a temperature calculator that calculates whether the water would boil at a given temperature. +इस खंड में, हम एक तापमान कैलकुलेटर बनाएंगे जो गणना करता है कि पानी किसी दिए गए तापमान पर उबलता है या नहीं। -We will start with a component called `BoilingVerdict`. It accepts the `celsius` temperature as a prop, and prints whether it is enough to boil the water: +हम `BoilingVerdict` नामक एक कौम्पोनॅन्ट के साथ शुरू करेंगे। यह `celsius` तापमान को prop के रूप में स्वीकार करता है, और प्रिंट करता है यदि पानी उबालने वाला है: ```js{3,5} function BoilingVerdict(props) { @@ -24,9 +24,9 @@ function BoilingVerdict(props) { } ``` -Next, we will create a component called `Calculator`. It renders an `` that lets you enter the temperature, and keeps its value in `this.state.temperature`. +इसके बाद, हम 'Calculator' नामक एक घटक बनाएंगे। यह एक `` बनाएगा, जिसमे आप तापमान दर्ज कर सकते हैं, जिसकी value `this.state.temperature` में रहेगी. -Additionally, it renders the `BoilingVerdict` for the current input value. +इसके अतिरिक्त, यह वर्तमान इनपुट मूल्य के लिए `BoilingVerdict` बना देता है। ```js{5,9,13,17-21} class Calculator extends React.Component { @@ -58,11 +58,11 @@ class Calculator extends React.Component { [**Try it on CodePen**](https://codepen.io/gaearon/pen/ZXeOBm?editors=0010) -## Adding a Second Input {#adding-a-second-input} +## एक दूसरा इनपुट जोड़ना {#adding-a-second-input} -Our new requirement is that, in addition to a Celsius input, we provide a Fahrenheit input, and they are kept in sync. +हमारी नई आवश्यकता यह है कि, एक Celsius इनपुट के अलावा, हम एक Fahrenheit इनपुट प्रदान करें, और वे sync में रहें| -We can start by extracting a `TemperatureInput` component from `Calculator`. We will add a new `scale` prop to it that can either be `"c"` or `"f"`: +हम `Calculator` से एक `TemperatureInput` कौम्पोनॅन्ट निकालने से शुरुआत कर सकते. हम इसमें एक नया `scale` prop जोड़ेंगे, जो या तो `"c"` या `"f"` हो सकता है: ```js{1-4,19,22} const scaleNames = { @@ -95,7 +95,7 @@ class TemperatureInput extends React.Component { } ``` -We can now change the `Calculator` to render two separate temperature inputs: +अब हम `Calculator` को दो अलग-अलग तापमान इनपुट दिखाने के लिए बदल सकते हैं: ```js{5,6} class Calculator extends React.Component { @@ -110,15 +110,16 @@ class Calculator extends React.Component { } ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/jGBryx?editors=0010) +[**इसे CodePen पर आज़माएँ**](https://codepen.io/gaearon/pen/jGBryx?editors=0010) -We have two inputs now, but when you enter the temperature in one of them, the other doesn't update. This contradicts our requirement: we want to keep them in sync. +अभ हमारे पास दो इनपुट हैं, लेकिन जब आप उनमें से एक में तापमान दर्ज करते हैं, तो दूसरा अपडेट नहीं होता| यह हमारी आवश्यकता के विपरीत है: हम उन्हें sync में रखना चाहते हैं। -We also can't display the `BoilingVerdict` from `Calculator`. The `Calculator` doesn't know the current temperature because it is hidden inside the `TemperatureInput`. +हम `Calculator` से `BoilingVerdict` भी प्रदर्शित नहीं कर सकते| `Calculator` वर्तमान तापमान को नहीं जानता है क्योंकि यह `TemperatureInput` के अंदर छिपा हुआ है। -## Writing Conversion Functions {#writing-conversion-functions} +## कन्वर्शन फंक्शन्स लिखना {#writing-conversion-functions} First, we will write two functions to convert from Celsius to Fahrenheit and back: +सबसे पहले, हम दो फंक्शन्स लिखेंगे| Celsius से Fahrenheit और वापस Fahrenheit से Celsius में बदलने के लिए: ```js function toCelsius(fahrenheit) { @@ -130,9 +131,9 @@ function toFahrenheit(celsius) { } ``` -These two functions convert numbers. We will write another function that takes a string `temperature` and a converter function as arguments and returns a string. We will use it to calculate the value of one input based on the other input. +ये दो फंक्शन्स संख्याओं को परिवर्तित करते हैं|हम एक और फ़ंक्शन लिखेंगे जो एक स्ट्रिंग `temperature` और एक कनवर्टर फ़ंक्शन को आर्गुमेंट के रूप में लेता है और एक स्ट्रिंग देता है। हम इसका उपयोग एक इनपुट के आधार पर दूसरे इनपुट की गणना करने के लिए करेंगे। -It returns an empty string on an invalid `temperature`, and it keeps the output rounded to the third decimal place: +यह अमान्य `temperature` पर एक खाली स्ट्रिंग देता है, और यह आउटपुट को तीसरे दशमलव स्थान पर रखता है: ```js function tryConvert(temperature, convert) { @@ -146,11 +147,12 @@ function tryConvert(temperature, convert) { } ``` -For example, `tryConvert('abc', toCelsius)` returns an empty string, and `tryConvert('10.22', toFahrenheit)` returns `'50.396'`. +For example, `tryConvert('abc', toCelsius)` returns an empty string, and `tryConvert('10.22', toFahrenheit)` returns `'50.396'`| +उदाहरण के लिए, `tryConvert ('abc', toCelsius)` एक खाली स्ट्रिंग लौटाता है, और `tryConvert ('10 .22 ', toFahrenheit)` लौटाता है ` '50 .396'`| -## Lifting State Up {#lifting-state-up} +## स्टेट को ऊपर लेजाना {#lifting-state-up} -Currently, both `TemperatureInput` components independently keep their values in the local state: +वर्तमान में, दोनों `TemperatureInput` कौम्पोनॅन्टस अपनी स्थानीय स्टेट को स्वतंत्र रूप में बनाये रखते हैं: ```js{5,9,13} class TemperatureInput extends React.Component { @@ -169,9 +171,9 @@ class TemperatureInput extends React.Component { // ... ``` -However, we want these two inputs to be in sync with each other. When we update the Celsius input, the Fahrenheit input should reflect the converted temperature, and vice versa. +हालाँकि, हम चाहते हैं कि ये दोनों इनपुट एक दूसरे के sync में रहें। जब हम Celsius इनपुट को अपडेट करें, तो Fahrenheit इनपुट अपडेट हो और इसके विपरीत को प्रतिबिंबित करना चाहिए। -In React, sharing state is accomplished by moving it up to the closest common ancestor of the components that need it. This is called "lifting state up". We will remove the local state from the `TemperatureInput` and move it into the `Calculator` instead. +React में , sharing state is accomplished by moving it up to the closest common ancestor of the components that need it. This is called "lifting state up". We will remove the local state from the `TemperatureInput` and move it into the `Calculator` instead. If the `Calculator` owns the shared state, it becomes the "source of truth" for the current temperature in both inputs. It can instruct them both to have values that are consistent with each other. Since the props of both `TemperatureInput` components are coming from the same parent `Calculator` component, the two inputs will always be in sync. From f1ef7b9bff7a36997aa9b16e605ea414ff7a0775 Mon Sep 17 00:00:00 2001 From: sambhav Date: Sun, 7 Apr 2019 23:09:20 +0100 Subject: [PATCH 02/14] Line 176 --- content/docs/lifting-state-up.md | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/content/docs/lifting-state-up.md b/content/docs/lifting-state-up.md index 2b9ce1040..91aa10d85 100644 --- a/content/docs/lifting-state-up.md +++ b/content/docs/lifting-state-up.md @@ -13,7 +13,7 @@ redirect_from: इस खंड में, हम एक तापमान कैलकुलेटर बनाएंगे जो गणना करता है कि पानी किसी दिए गए तापमान पर उबलता है या नहीं। -हम `BoilingVerdict` नामक एक कौम्पोनॅन्ट के साथ शुरू करेंगे। यह `celsius` तापमान को prop के रूप में स्वीकार करता है, और प्रिंट करता है यदि पानी उबालने वाला है: +हम `BoilingVerdict` नामक एक कौम्पोनॅन्ट के साथ शुरुआत करेंगे। यह `celsius` तापमान को prop के रूप में स्वीकार करता है, और प्रिंट करता है यदि पानी उबलने वाला है: ```js{3,5} function BoilingVerdict(props) { @@ -24,7 +24,7 @@ function BoilingVerdict(props) { } ``` -इसके बाद, हम 'Calculator' नामक एक घटक बनाएंगे। यह एक `` बनाएगा, जिसमे आप तापमान दर्ज कर सकते हैं, जिसकी value `this.state.temperature` में रहेगी. +इसके बाद, हम 'Calculator' नामक एक कौम्पोनॅन्ट बनाएंगे। यह एक `` बनाएगा, जिसमे आप तापमान दर्ज कर सकते हैं, जिसकी value `this.state.temperature` में रहेगी. इसके अतिरिक्त, यह वर्तमान इनपुट मूल्य के लिए `BoilingVerdict` बना देता है। @@ -62,7 +62,7 @@ class Calculator extends React.Component { हमारी नई आवश्यकता यह है कि, एक Celsius इनपुट के अलावा, हम एक Fahrenheit इनपुट प्रदान करें, और वे sync में रहें| -हम `Calculator` से एक `TemperatureInput` कौम्पोनॅन्ट निकालने से शुरुआत कर सकते. हम इसमें एक नया `scale` prop जोड़ेंगे, जो या तो `"c"` या `"f"` हो सकता है: +हम `Calculator` से एक `TemperatureInput` कौम्पोनॅन्ट निकालने से शुरुआत कर सकते हैं| हम इसमें एक नया `scale` prop जोड़ेंगे, जो या तो `"c"` या `"f"` हो सकता है: ```js{1-4,19,22} const scaleNames = { @@ -118,7 +118,6 @@ class Calculator extends React.Component { ## कन्वर्शन फंक्शन्स लिखना {#writing-conversion-functions} -First, we will write two functions to convert from Celsius to Fahrenheit and back: सबसे पहले, हम दो फंक्शन्स लिखेंगे| Celsius से Fahrenheit और वापस Fahrenheit से Celsius में बदलने के लिए: ```js @@ -131,7 +130,7 @@ function toFahrenheit(celsius) { } ``` -ये दो फंक्शन्स संख्याओं को परिवर्तित करते हैं|हम एक और फ़ंक्शन लिखेंगे जो एक स्ट्रिंग `temperature` और एक कनवर्टर फ़ंक्शन को आर्गुमेंट के रूप में लेता है और एक स्ट्रिंग देता है। हम इसका उपयोग एक इनपुट के आधार पर दूसरे इनपुट की गणना करने के लिए करेंगे। +यह दो फंक्शन्स संख्याओं को परिवर्तित करते हैं|हम एक और फ़ंक्शन लिखेंगे जो एक स्ट्रिंग `temperature` और एक कनवर्टर फ़ंक्शन को आर्गुमेंट के रूप में लेता है और एक स्ट्रिंग देता है। हम इसका उपयोग एक इनपुट के आधार पर दूसरे इनपुट की गणना करने के लिए करेंगे। यह अमान्य `temperature` पर एक खाली स्ट्रिंग देता है, और यह आउटपुट को तीसरे दशमलव स्थान पर रखता है: @@ -147,7 +146,6 @@ function tryConvert(temperature, convert) { } ``` -For example, `tryConvert('abc', toCelsius)` returns an empty string, and `tryConvert('10.22', toFahrenheit)` returns `'50.396'`| उदाहरण के लिए, `tryConvert ('abc', toCelsius)` एक खाली स्ट्रिंग लौटाता है, और `tryConvert ('10 .22 ', toFahrenheit)` लौटाता है ` '50 .396'`| ## स्टेट को ऊपर लेजाना {#lifting-state-up} @@ -173,9 +171,9 @@ class TemperatureInput extends React.Component { हालाँकि, हम चाहते हैं कि ये दोनों इनपुट एक दूसरे के sync में रहें। जब हम Celsius इनपुट को अपडेट करें, तो Fahrenheit इनपुट अपडेट हो और इसके विपरीत को प्रतिबिंबित करना चाहिए। -React में , sharing state is accomplished by moving it up to the closest common ancestor of the components that need it. This is called "lifting state up". We will remove the local state from the `TemperatureInput` and move it into the `Calculator` instead. +React में , state साझाकरण का कार्य उसे कौम्पोनॅन्टस के निकटतम सामान्य पूर्वज तक ले जाकर पूरा किया जाता है|यह "स्टेट को ऊपर लेजाना" कहलाता है| हम लोकल स्टेट को `TemperatureInput` से हटा देंगे एवं `Calculator` में ले जायेंगे| -If the `Calculator` owns the shared state, it becomes the "source of truth" for the current temperature in both inputs. It can instruct them both to have values that are consistent with each other. Since the props of both `TemperatureInput` components are coming from the same parent `Calculator` component, the two inputs will always be in sync. +यदि साझा स्टेट का मालिक `Calculator` हे, तो वह दोनों इन्पुट्स में वर्तमान तापमान के लिए "सत्य का स्रोत" बन जाता है| यह उन दोनों को एक दूसरे के अनुरूप वैल्यूज रखने का निर्देश दे सकता है| चूंकि दोनों `TemperatureInput` कौम्पोनॅन्टस के props एक ही मूल `Calculator` कौम्पोनॅन्ट से हैं, यह दोनों हमेशा सिंक में रहेंगे| Let's see how this works step by step. From 851ae7f8037ca519396d9853f39bc79b8ecc39db Mon Sep 17 00:00:00 2001 From: Sambhav Sacheti Date: Mon, 8 Apr 2019 11:03:18 +0100 Subject: [PATCH 03/14] Line 204 --- content/docs/lifting-state-up.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/content/docs/lifting-state-up.md b/content/docs/lifting-state-up.md index 91aa10d85..77011a496 100644 --- a/content/docs/lifting-state-up.md +++ b/content/docs/lifting-state-up.md @@ -175,9 +175,9 @@ React में , state साझाकरण का कार्य उसे यदि साझा स्टेट का मालिक `Calculator` हे, तो वह दोनों इन्पुट्स में वर्तमान तापमान के लिए "सत्य का स्रोत" बन जाता है| यह उन दोनों को एक दूसरे के अनुरूप वैल्यूज रखने का निर्देश दे सकता है| चूंकि दोनों `TemperatureInput` कौम्पोनॅन्टस के props एक ही मूल `Calculator` कौम्पोनॅन्ट से हैं, यह दोनों हमेशा सिंक में रहेंगे| -Let's see how this works step by step. +आइए देखें कि यह चरण दर चरण कैसे काम करता है। -First, we will replace `this.state.temperature` with `this.props.temperature` in the `TemperatureInput` component. For now, let's pretend `this.props.temperature` already exists, although we will need to pass it from the `Calculator` in the future: +सबसे पहले, हम `TemperatureInput` कौम्पोनॅन्ट में `this.state.temperature` को `this.props.temperature` से बदल देंगे| अभी के लिए, मान लीजिये कि `this.props.temperature` पहले से ही मौजूद है, हालाँकि हमें भविष्य में इसे `Calculator` से पास करना होगा: ```js{3} render() { @@ -186,11 +186,11 @@ First, we will replace `this.state.temperature` with `this.props.temperature` in // ... ``` -We know that [props are read-only](/docs/components-and-props.html#props-are-read-only). When the `temperature` was in the local state, the `TemperatureInput` could just call `this.setState()` to change it. However, now that the `temperature` is coming from the parent as a prop, the `TemperatureInput` has no control over it. +हम जानते हैं कि [Props केवल-पढ़ने के लिए हैं](/docs/components-and-props.html#props-are-read-only). जब `temperature` local state में था, तो `TemperatureInput` इसे बदलने के लिए `this.setState ()` को कॉल कर सकता है| हालाँकि, अब `temperature` अपने मूल से prop बनकर आ रहा है, `TemperatureInput' का इस पर कोई नियंत्रण नहीं है। -In React, this is usually solved by making a component "controlled". Just like the DOM `` accepts both a `value` and an `onChange` prop, so can the custom `TemperatureInput` accept both `temperature` and `onTemperatureChange` props from its parent `Calculator`. +React में, यह मसला आमतौर पर कौम्पोनॅन्ट को "नियंत्रित" बनाकर हल किया जाता है| जैसे DOM ``, `value` एवं `onChange` prop दोनों को स्वीकार करता है, ठीक वैसे ही, `TemperatureInput` दोनों `temperature` एवं `onTemperatureChange` props को उसके मूल `Calculator` से स्वीकार करता है| -Now, when the `TemperatureInput` wants to update its temperature, it calls `this.props.onTemperatureChange`: +अब, जब `TemperatureInput` अपने तापमान को अपडेट करना चाहेगा, तो वह `this.props.onTemperChange` को कॉल करेगा: ```js{3} handleChange(e) { @@ -199,9 +199,9 @@ Now, when the `TemperatureInput` wants to update its temperature, it calls `this // ... ``` ->Note: +>ध्यान दें: > ->There is no special meaning to either `temperature` or `onTemperatureChange` prop names in custom components. We could have called them anything else, like name them `value` and `onChange` which is a common convention. +>कस्टम कौम्पोनॅन्टस में `temperature` या `onTemperatureChange` prop नामों का कोई विशेष अर्थ नहीं है। We could have called them anything else, like name them `value` and `onChange` which is a common convention. The `onTemperatureChange` prop will be provided together with the `temperature` prop by the parent `Calculator` component. It will handle the change by modifying its own local state, thus re-rendering both inputs with the new values. We will look at the new `Calculator` implementation very soon. From 6906131bebe72bbf610c7b74bcff26ff264d1869 Mon Sep 17 00:00:00 2001 From: sambhav Date: Mon, 8 Apr 2019 22:39:46 +0100 Subject: [PATCH 04/14] line 304 --- content/docs/lifting-state-up.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/content/docs/lifting-state-up.md b/content/docs/lifting-state-up.md index 77011a496..9e66e0310 100644 --- a/content/docs/lifting-state-up.md +++ b/content/docs/lifting-state-up.md @@ -173,7 +173,7 @@ class TemperatureInput extends React.Component { React में , state साझाकरण का कार्य उसे कौम्पोनॅन्टस के निकटतम सामान्य पूर्वज तक ले जाकर पूरा किया जाता है|यह "स्टेट को ऊपर लेजाना" कहलाता है| हम लोकल स्टेट को `TemperatureInput` से हटा देंगे एवं `Calculator` में ले जायेंगे| -यदि साझा स्टेट का मालिक `Calculator` हे, तो वह दोनों इन्पुट्स में वर्तमान तापमान के लिए "सत्य का स्रोत" बन जाता है| यह उन दोनों को एक दूसरे के अनुरूप वैल्यूज रखने का निर्देश दे सकता है| चूंकि दोनों `TemperatureInput` कौम्पोनॅन्टस के props एक ही मूल `Calculator` कौम्पोनॅन्ट से हैं, यह दोनों हमेशा सिंक में रहेंगे| +यदि साझा स्टेट का मालिक `Calculator` हे, तो वह दोनों इन्पुट्स में वर्तमान तापमान के लिए "सत्य का स्रोत" बन जाता है| यह उन दोनों को एक दूसरे के अनुरूप वैल्यूज रखने का निर्देश दे सकता है| चूंकि दोनों `TemperatureInput` कौम्पोनॅन्टस के props एक ही मूल `Calculator` कौम्पोनॅन्ट से हैं, यह दोनों हमेशा sync में रहेंगे| आइए देखें कि यह चरण दर चरण कैसे काम करता है। @@ -201,11 +201,11 @@ React में, यह मसला आमतौर पर कौम्पो >ध्यान दें: > ->कस्टम कौम्पोनॅन्टस में `temperature` या `onTemperatureChange` prop नामों का कोई विशेष अर्थ नहीं है। We could have called them anything else, like name them `value` and `onChange` which is a common convention. +>कस्टम कौम्पोनॅन्टस में `temperature` या `onTemperatureChange` prop नामों का कोई विशेष अर्थ नहीं है। हम उन्हें और कुछ भी कह सकते थे, जैसे कि `value` और `onChange` जो एक आम परंपरा है। -The `onTemperatureChange` prop will be provided together with the `temperature` prop by the parent `Calculator` component. It will handle the change by modifying its own local state, thus re-rendering both inputs with the new values. We will look at the new `Calculator` implementation very soon. +`Calculator` कौम्पोनॅन्ट के द्वारा `onTemperatureChange` prop को `temperature` prop के साथ प्रदान किया जाएगा| यह स्वयं के local state को संशोधित करके परिवर्तन को नियंत्रित करेगा, और इस प्रकार दोनों इनपुट्स को नए मूल्यों के साथ फिर से प्रस्तुत करेगा| हम बहुत जल्द नए `Calculator` के परिपालन को देखेंगे। -Before diving into the changes in the `Calculator`, let's recap our changes to the `TemperatureInput` component. We have removed the local state from it, and instead of reading `this.state.temperature`, we now read `this.props.temperature`. Instead of calling `this.setState()` when we want to make a change, we now call `this.props.onTemperatureChange()`, which will be provided by the `Calculator`: +आईये `Calculator` में परिवर्तन करने से पहले, `TemperatureInput` कौम्पोनॅन्ट में किये गए परिवर्तनों को याद कर लेते हैं| हमने इसमें से local state को हटा दिया है, और `this.state.temperature` रीड करने के बजाय, हम अब `this.props.temperature` रीड करते हैं| जब हम कोई बदलाव करना चाहते हैं तो `this.setState()` को कॉल करने के बजाय हम अब `this.props.onTemperatureChange()` को कॉल करते हैं, जो `Calculator` प्रदान करता है| ```js{8,12} class TemperatureInput extends React.Component { @@ -232,11 +232,11 @@ class TemperatureInput extends React.Component { } ``` -Now let's turn to the `Calculator` component. +अब `Calculator` कौम्पोनॅन्ट की ओर मुड़ते हैं। -We will store the current input's `temperature` and `scale` in its local state. This is the state we "lifted up" from the inputs, and it will serve as the "source of truth" for both of them. It is the minimal representation of all the data we need to know in order to render both inputs. +हम वर्तमान इनपुट के `temperature` और `scale` को उसके local state में जमा करेंगे. यह वही स्टेट जिसे हमने इनपुट्स से "lifted up" किया, और यह उन दोनों के लिए "source of truth" के रूप में काम करेगी| यह दोनों इनपुट्स को रेंडर करने के लिए हमारे द्वारा आवश्यक सभी डेटा का न्यूनतम प्रतिनिधित्व है। -For example, if we enter 37 into the Celsius input, the state of the `Calculator` component will be: +उदाहरण के लिए, यदि हम Celsius इनपुट में 37 दर्ज करते हैं, तो `Calculator` कौम्पोनॅन्ट की state होगी: ```js { @@ -245,7 +245,7 @@ For example, if we enter 37 into the Celsius input, the state of the `Calculator } ``` -If we later edit the Fahrenheit field to be 212, the state of the `Calculator` will be: +यदि हम बाद में Fahrenheit फ़ील्ड को 212 में संपादित करते हैं, तो `Calculator` की state होगी: ```js { @@ -254,9 +254,9 @@ If we later edit the Fahrenheit field to be 212, the state of the `Calculator` w } ``` -We could have stored the value of both inputs but it turns out to be unnecessary. It is enough to store the value of the most recently changed input, and the scale that it represents. We can then infer the value of the other input based on the current `temperature` and `scale` alone. +हम दोनों इनपुट्स की वैल्यू स्टोर कर सकते थे लेकिन यह अनावश्यक है। सबसे हाल ही में बदले गये इनपुट की वैल्यू एवं उसका प्रतिनिधित्व करने वाले scale को ही स्टोर करना पर्याप्त है| तब हम वर्तमान `temperature` और `scale` के आधार पर अन्य इनपुट के वैल्यू का अनुमान लगा सकते हैं| -The inputs stay in sync because their values are computed from the same state: +इनपुट्स sync में रहेंगे क्योंकि उनकी वैल्यूज की गणना एक ही state से होगी: ```js{6,10,14,18-21,27-28,31-32,34} class Calculator extends React.Component { @@ -301,7 +301,7 @@ class Calculator extends React.Component { [**Try it on CodePen**](https://codepen.io/gaearon/pen/WZpxpz?editors=0010) -Now, no matter which input you edit, `this.state.temperature` and `this.state.scale` in the `Calculator` get updated. One of the inputs gets the value as is, so any user input is preserved, and the other input value is always recalculated based on it. +अब, कोई फर्क नहीं पड़ता कि आप किस इनपुट को संपादित करते हैं, `Calculator` के `this.state.temperature` और `this.state.scale` अपडेट हो जायेंगे| One of the inputs gets the value as is, so any user input is preserved, and the other input value is always recalculated based on it. Let's recap what happens when you edit an input: From 39e4bc6a93609f82e005c4e62770761750ae534d Mon Sep 17 00:00:00 2001 From: Sambhav Sacheti Date: Thu, 11 Apr 2019 17:56:09 +0100 Subject: [PATCH 05/14] 316 --- content/docs/lifting-state-up.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/lifting-state-up.md b/content/docs/lifting-state-up.md index 9e66e0310..5c85ca944 100644 --- a/content/docs/lifting-state-up.md +++ b/content/docs/lifting-state-up.md @@ -303,11 +303,11 @@ class Calculator extends React.Component { अब, कोई फर्क नहीं पड़ता कि आप किस इनपुट को संपादित करते हैं, `Calculator` के `this.state.temperature` और `this.state.scale` अपडेट हो जायेंगे| One of the inputs gets the value as is, so any user input is preserved, and the other input value is always recalculated based on it. -Let's recap what happens when you edit an input: +आइये संक्षेप में देखते हैं की एक इनपुट को संपादित करते पर क्या होता है : -* React calls the function specified as `onChange` on the DOM ``. In our case, this is the `handleChange` method in the `TemperatureInput` component. -* The `handleChange` method in the `TemperatureInput` component calls `this.props.onTemperatureChange()` with the new desired value. Its props, including `onTemperatureChange`, were provided by its parent component, the `Calculator`. -* When it previously rendered, the `Calculator` has specified that `onTemperatureChange` of the Celsius `TemperatureInput` is the `Calculator`'s `handleCelsiusChange` method, and `onTemperatureChange` of the Fahrenheit `TemperatureInput` is the `Calculator`'s `handleFahrenheitChange` method. So either of these two `Calculator` methods gets called depending on which input we edited. +* React `onChange` के द्वारा निर्दिष्ट फंक्शन को DOM `` पर कॉल करता है| हमारे लिए, यह `TemperatureInput` कौम्पोनॅन्ट का `handleChange` method है। +* `TemperatureInput` कौम्पोनॅन्ट का `handleChange` method, नए वांछित वैल्यू के साथ `this.props.onTemperChange()` को कॉल करता है| इसके props, जिनमें `onTemperatureChange` शामिल हैं, को इसके मूल कौम्पोनॅन्ट, 'कैलकुलेटर' द्वारा प्रदान किया गया। +* जब यह पूर्व में render किया गया था, तो `Calculator` ने निर्दिष्ट किया है कि Celsius `TemperatureInput` का `onTemperatureChange` ही `Calculator` का `handleCelsiusChange` method है, इसी प्रकार Fahrenheit `TemperatureInput` का `onTemperatureChange` ही `कैलकुलेटर` का `handleFahrenheitChange` method है|So either of these two `Calculator` methods gets called depending on which input we edited. * Inside these methods, the `Calculator` component asks React to re-render itself by calling `this.setState()` with the new input value and the current scale of the input we just edited. * React calls the `Calculator` component's `render` method to learn what the UI should look like. The values of both inputs are recomputed based on the current temperature and the active scale. The temperature conversion is performed here. * React calls the `render` methods of the individual `TemperatureInput` components with their new props specified by the `Calculator`. It learns what their UI should look like. From 3c499f5495a2c72915dcb0ee653babeae3baf219 Mon Sep 17 00:00:00 2001 From: Sambhav Sacheti Date: Sat, 13 Apr 2019 11:52:15 +0100 Subject: [PATCH 06/14] 325 --- content/docs/lifting-state-up.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/content/docs/lifting-state-up.md b/content/docs/lifting-state-up.md index 5c85ca944..0012db62f 100644 --- a/content/docs/lifting-state-up.md +++ b/content/docs/lifting-state-up.md @@ -306,23 +306,23 @@ class Calculator extends React.Component { आइये संक्षेप में देखते हैं की एक इनपुट को संपादित करते पर क्या होता है : * React `onChange` के द्वारा निर्दिष्ट फंक्शन को DOM `` पर कॉल करता है| हमारे लिए, यह `TemperatureInput` कौम्पोनॅन्ट का `handleChange` method है। -* `TemperatureInput` कौम्पोनॅन्ट का `handleChange` method, नए वांछित वैल्यू के साथ `this.props.onTemperChange()` को कॉल करता है| इसके props, जिनमें `onTemperatureChange` शामिल हैं, को इसके मूल कौम्पोनॅन्ट, 'कैलकुलेटर' द्वारा प्रदान किया गया। -* जब यह पूर्व में render किया गया था, तो `Calculator` ने निर्दिष्ट किया है कि Celsius `TemperatureInput` का `onTemperatureChange` ही `Calculator` का `handleCelsiusChange` method है, इसी प्रकार Fahrenheit `TemperatureInput` का `onTemperatureChange` ही `कैलकुलेटर` का `handleFahrenheitChange` method है|So either of these two `Calculator` methods gets called depending on which input we edited. -* Inside these methods, the `Calculator` component asks React to re-render itself by calling `this.setState()` with the new input value and the current scale of the input we just edited. -* React calls the `Calculator` component's `render` method to learn what the UI should look like. The values of both inputs are recomputed based on the current temperature and the active scale. The temperature conversion is performed here. +* `TemperatureInput` कौम्पोनॅन्ट का `handleChange` method, नए वांछित वैल्यू के साथ `this.props.onTemperChange()` को कॉल करता है| इसके props, जिनमें `onTemperatureChange` शामिल हैं, को इसके मूल कौम्पोनॅन्ट, 'कैलकुलेटर' द्वारा प्रदान किया जाता है। +* जब यह पूर्व में render किया गया था, तो `Calculator` ने निर्दिष्ट किया है कि Celsius `TemperatureInput` का `onTemperatureChange` ही `Calculator` का `handleCelsiusChange` method है, इसी प्रकार Fahrenheit `TemperatureInput` का `onTemperatureChange` ही `कैलकुलेटर` का `handleFahrenheitChange` method है|इनपुट के सम्पादन के आधार इन दोनों `Calculator` methods में से किसी एक को कॉल किया जाता है| +* इन methods के अंदर, `Calculator` कौम्पोनॅन्ट React से `this.setState()` को कॉल करके, नयी इनपुट वैल्यू एवं वर्तमान scale जिसको हमने बस अभी सम्पादित किया, के साथ re-render होने को कहता है| +* `Calculator` कौम्पोनॅन्ट के `render`method को React कॉल करता है ताकि वह UI कैसा दिखता है यह जान सखे| दोनों इनपुट के वैल्यूज की वर्तमान तापमान और सक्रिय scale के आधार पर पुनर्गणना की जाती है। तापमान रूपांतरण यहां किया जाता है। * React calls the `render` methods of the individual `TemperatureInput` components with their new props specified by the `Calculator`. It learns what their UI should look like. -* React calls the `render` method of the `BoilingVerdict` component, passing the temperature in Celsius as its props. -* React DOM updates the DOM with the boiling verdict and to match the desired input values. The input we just edited receives its current value, and the other input is updated to the temperature after conversion. +* React `कैलकुलेटर` द्वारा निर्देशित नए props के साथ `TemperatureInput` कौम्पोनॅन्टस के `render` methods को कॉल करता है| +* React DOM, boiling verdict के साथ DOM को अपडेट करता है और वांछित इनपुट वैल्यूज से मेल कराता है। जिस इनपुट को हमने अभी संपादित किया है, वह अपनी वर्तमान वैल्यू प्राप्त करता है, और अन्य इनपुट को रूपांतरण के बाद तापमान में अपडेट किया जाता है। -Every update goes through the same steps so the inputs stay in sync. +हर अपडेट समान चरणों के माध्यम से जाता है ताकि इनपुट sync में रहें। -## Lessons Learned {#lessons-learned} +## सबक सीखा {#lessons-learned} -There should be a single "source of truth" for any data that changes in a React application. Usually, the state is first added to the component that needs it for rendering. Then, if other components also need it, you can lift it up to their closest common ancestor. Instead of trying to sync the state between different components, you should rely on the [top-down data flow](/docs/state-and-lifecycle.html#the-data-flows-down). +React एप्लीकेशन में परिवर्तन करने वाले किसी भी डेटा के लिए "सत्य का एक स्रोत" केवल एक होना चाहिए। आमतौर पर, state को पहले कौम्पोनॅन्ट में जोड़ा जाता है जो इसे render करने के लिए आवश्यक होता है. फिर, अगर अन्य कौम्पोनॅन्टस को भी इसकी आवश्यकता होती है, तो आप इसे अपने निकटतम सामान्य पूर्वज तक उठा सकते हैं।. अलग-अलग कौम्पोनॅन्टस के बीच state को sync करने की कोशिश करने के बजाय, आपको इस पर भरोसा करना चाहिए [top-down data flow](/docs/state-and-lifecycle.html#the-data-flows-down). -Lifting state involves writing more "boilerplate" code than two-way binding approaches, but as a benefit, it takes less work to find and isolate bugs. Since any state "lives" in some component and that component alone can change it, the surface area for bugs is greatly reduced. Additionally, you can implement any custom logic to reject or transform user input. +state को लिफ्ट करने में दो-तरफ़ा बंधन दृष्टिकोण की तुलना में अधिक "boilerplate" कोड लिखना शामिल है, लेकिन एक लाभ के रूप में, bug को खोजने और अलग करने में कम काम लगता है|चूंकि कोई भी state किसी कौम्पोनॅन्ट में "रहता है" और वह कौम्पोनॅन्ट अकेले इसे बदल सकता है, bug के लिए सतह क्षेत्र बहुत कम हो गया है। इसके अतिरिक्त, आप यूजर इनपुट को अस्वीकार या परिवर्तित करने के लिए कोई भी कस्टम लॉजिक लागू कर सकते हैं। -If something can be derived from either props or state, it probably shouldn't be in the state. For example, instead of storing both `celsiusValue` and `fahrenheitValue`, we store just the last edited `temperature` and its `scale`. The value of the other input can always be calculated from them in the `render()` method. This lets us clear or apply rounding to the other field without losing any precision in the user input. +यदि किसी चीज़ को किसी props या state से प्राप्त किया जा सकता है, तो यह संभवतः state में नहीं होना चाहिए। उदाहरण के लिए, दोनों `celsiusValue` और `fahrenheitValue` को स्टोर करने के बजाय, हम केवल अंतिम संपादित `temperature` और इसके `scale` को स्टोर करते हैं| 'render()' method में उनकी सहायता से अन्य इनपुट की वैल्यू की गणना हमेशा की जा सकती है| This lets us clear or apply rounding to the other field without losing any precision in the user input. When you see something wrong in the UI, you can use [React Developer Tools](https://github.com/facebook/react-devtools) to inspect the props and move up the tree until you find the component responsible for updating the state. This lets you trace the bugs to their source: From 501f76d3e0edbbc54002eabcf96d80fa3e6eb5a5 Mon Sep 17 00:00:00 2001 From: sambhav Date: Sat, 13 Apr 2019 17:55:05 +0100 Subject: [PATCH 07/14] all done --- content/docs/lifting-state-up.md | 43 ++++++++++++++++---------------- 1 file changed, 21 insertions(+), 22 deletions(-) diff --git a/content/docs/lifting-state-up.md b/content/docs/lifting-state-up.md index 0012db62f..9a20699c6 100644 --- a/content/docs/lifting-state-up.md +++ b/content/docs/lifting-state-up.md @@ -24,9 +24,9 @@ function BoilingVerdict(props) { } ``` -इसके बाद, हम 'Calculator' नामक एक कौम्पोनॅन्ट बनाएंगे। यह एक `` बनाएगा, जिसमे आप तापमान दर्ज कर सकते हैं, जिसकी value `this.state.temperature` में रहेगी. +इसके बाद, हम 'Calculator' नामक एक कौम्पोनॅन्ट बनाएंगे। यह एक `` रेंडर करेगा, जिसमे आप तापमान दर्ज कर सकते हैं, जिसकी value `this.state.temperature` में रहेगी. -इसके अतिरिक्त, यह वर्तमान इनपुट मूल्य के लिए `BoilingVerdict` बना देता है। +इसके अतिरिक्त, यह वर्तमान इनपुट मूल्य के लिए `BoilingVerdict` रेंडर कर देता है। ```js{5,9,13,17-21} class Calculator extends React.Component { @@ -56,13 +56,13 @@ class Calculator extends React.Component { } ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/ZXeOBm?editors=0010) +[**इसे CodePen पर आज़माएँ**](https://codepen.io/gaearon/pen/ZXeOBm?editors=0010) ## एक दूसरा इनपुट जोड़ना {#adding-a-second-input} हमारी नई आवश्यकता यह है कि, एक Celsius इनपुट के अलावा, हम एक Fahrenheit इनपुट प्रदान करें, और वे sync में रहें| -हम `Calculator` से एक `TemperatureInput` कौम्पोनॅन्ट निकालने से शुरुआत कर सकते हैं| हम इसमें एक नया `scale` prop जोड़ेंगे, जो या तो `"c"` या `"f"` हो सकता है: +हम `Calculator` से एक `TemperatureInput` कौम्पोनॅन्ट को निकालने से शुरुआत कर सकते हैं| हम इसमें एक नया `scale` prop जोड़ेंगे, जो या तो "c" या "f" हो सकता है: ```js{1-4,19,22} const scaleNames = { @@ -95,7 +95,7 @@ class TemperatureInput extends React.Component { } ``` -अब हम `Calculator` को दो अलग-अलग तापमान इनपुट दिखाने के लिए बदल सकते हैं: +अब हम `Calculator` को दो अलग-अलग तापमान इनपुट्स दिखाने के लिए बदल सकते हैं: ```js{5,6} class Calculator extends React.Component { @@ -130,9 +130,9 @@ function toFahrenheit(celsius) { } ``` -यह दो फंक्शन्स संख्याओं को परिवर्तित करते हैं|हम एक और फ़ंक्शन लिखेंगे जो एक स्ट्रिंग `temperature` और एक कनवर्टर फ़ंक्शन को आर्गुमेंट के रूप में लेता है और एक स्ट्रिंग देता है। हम इसका उपयोग एक इनपुट के आधार पर दूसरे इनपुट की गणना करने के लिए करेंगे। +यह दो फंक्शन्स संख्याओं को परिवर्तित करते हैं|हम एक और फ़ंक्शन लिखेंगे जो एक स्ट्रिंग `temperature` और एक कनवर्टर फ़ंक्शन को आर्गुमेंट के रूप में लेता है और एक स्ट्रिंग वापिस देता है। हम इसका उपयोग एक इनपुट के आधार पर दूसरे इनपुट की गणना करने के लिए करेंगे। -यह अमान्य `temperature` पर एक खाली स्ट्रिंग देता है, और यह आउटपुट को तीसरे दशमलव स्थान पर रखता है: +यह अमान्य `temperature` पर एक खाली स्ट्रिंग देता है, और यह आउटपुट को तीसरे दशमलव स्थान तक रखता है: ```js function tryConvert(temperature, convert) { @@ -146,11 +146,11 @@ function tryConvert(temperature, convert) { } ``` -उदाहरण के लिए, `tryConvert ('abc', toCelsius)` एक खाली स्ट्रिंग लौटाता है, और `tryConvert ('10 .22 ', toFahrenheit)` लौटाता है ` '50 .396'`| +उदाहरण के लिए, `tryConvert ('abc', toCelsius)` एक खाली स्ट्रिंग लौटाता है, और `tryConvert ('10 .22 ', toFahrenheit)` लौटाता है `'50 .396'`| ## स्टेट को ऊपर लेजाना {#lifting-state-up} -वर्तमान में, दोनों `TemperatureInput` कौम्पोनॅन्टस अपनी स्थानीय स्टेट को स्वतंत्र रूप में बनाये रखते हैं: +वर्तमान में, दोनों `TemperatureInput` कौम्पोनॅन्टस अपनी लोकल स्टेट को स्वतंत्र रूप में बनाये रखते हैं: ```js{5,9,13} class TemperatureInput extends React.Component { @@ -169,7 +169,7 @@ class TemperatureInput extends React.Component { // ... ``` -हालाँकि, हम चाहते हैं कि ये दोनों इनपुट एक दूसरे के sync में रहें। जब हम Celsius इनपुट को अपडेट करें, तो Fahrenheit इनपुट अपडेट हो और इसके विपरीत को प्रतिबिंबित करना चाहिए। +हालाँकि, हम चाहते हैं कि ये दोनों इनपुट एक दूसरे के sync में रहें। जब हम Celsius इनपुट को अपडेट करें, तो Fahrenheit इनपुट अपडेट हो और इसके विपरीत भी प्रतिबिंबित होना चाहिए। React में , state साझाकरण का कार्य उसे कौम्पोनॅन्टस के निकटतम सामान्य पूर्वज तक ले जाकर पूरा किया जाता है|यह "स्टेट को ऊपर लेजाना" कहलाता है| हम लोकल स्टेट को `TemperatureInput` से हटा देंगे एवं `Calculator` में ले जायेंगे| @@ -299,32 +299,31 @@ class Calculator extends React.Component { } ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/WZpxpz?editors=0010) +[**इसे CodePen पर आज़माएँ**](https://codepen.io/gaearon/pen/WZpxpz?editors=0010) -अब, कोई फर्क नहीं पड़ता कि आप किस इनपुट को संपादित करते हैं, `Calculator` के `this.state.temperature` और `this.state.scale` अपडेट हो जायेंगे| One of the inputs gets the value as is, so any user input is preserved, and the other input value is always recalculated based on it. +अब, कोई फर्क नहीं पड़ता कि आप किस इनपुट को संपादित करते हैं, `Calculator` के `this.state.temperature` और `this.state.scale` अपडेट हो जायेंगे| इनपुट्स में से एक को वैल्यू मिलती है, इसलिए कोई भी user input संरक्षित रहता है, और अन्य इनपुट वैल्यू ी हमेशा इसके आधार पर पुनर्गणना होता है। आइये संक्षेप में देखते हैं की एक इनपुट को संपादित करते पर क्या होता है : -* React `onChange` के द्वारा निर्दिष्ट फंक्शन को DOM `` पर कॉल करता है| हमारे लिए, यह `TemperatureInput` कौम्पोनॅन्ट का `handleChange` method है। -* `TemperatureInput` कौम्पोनॅन्ट का `handleChange` method, नए वांछित वैल्यू के साथ `this.props.onTemperChange()` को कॉल करता है| इसके props, जिनमें `onTemperatureChange` शामिल हैं, को इसके मूल कौम्पोनॅन्ट, 'कैलकुलेटर' द्वारा प्रदान किया जाता है। -* जब यह पूर्व में render किया गया था, तो `Calculator` ने निर्दिष्ट किया है कि Celsius `TemperatureInput` का `onTemperatureChange` ही `Calculator` का `handleCelsiusChange` method है, इसी प्रकार Fahrenheit `TemperatureInput` का `onTemperatureChange` ही `कैलकुलेटर` का `handleFahrenheitChange` method है|इनपुट के सम्पादन के आधार इन दोनों `Calculator` methods में से किसी एक को कॉल किया जाता है| -* इन methods के अंदर, `Calculator` कौम्पोनॅन्ट React से `this.setState()` को कॉल करके, नयी इनपुट वैल्यू एवं वर्तमान scale जिसको हमने बस अभी सम्पादित किया, के साथ re-render होने को कहता है| -* `Calculator` कौम्पोनॅन्ट के `render`method को React कॉल करता है ताकि वह UI कैसा दिखता है यह जान सखे| दोनों इनपुट के वैल्यूज की वर्तमान तापमान और सक्रिय scale के आधार पर पुनर्गणना की जाती है। तापमान रूपांतरण यहां किया जाता है। -* React calls the `render` methods of the individual `TemperatureInput` components with their new props specified by the `Calculator`. It learns what their UI should look like. -* React `कैलकुलेटर` द्वारा निर्देशित नए props के साथ `TemperatureInput` कौम्पोनॅन्टस के `render` methods को कॉल करता है| +* React `onChange` के द्वारा निर्दिष्ट फंक्शन को DOM `` पर कॉल करता है| हमारे लिए, यह `TemperatureInput` कौम्पोनॅन्ट का `handleChange` मेथड् है। +* `TemperatureInput` कौम्पोनॅन्ट का `handleChange` मेथड्, नए वांछित वैल्यू के साथ `this.props.onTemperChange()` को कॉल करता है| इसके props, जिनमें `onTemperatureChange` शामिल हैं, को इसके मूल कौम्पोनॅन्ट, 'कैलकुलेटर' द्वारा प्रदान किया जाता है। +* जब यह पूर्व में render किया गया था, तो `Calculator` ने निर्दिष्ट किया है कि Celsius `TemperatureInput` का `onTemperatureChange` ही `Calculator` का `handleCelsiusChange` मेथड् है, इसी प्रकार Fahrenheit `TemperatureInput` का `onTemperatureChange` ही `कैलकुलेटर` का `handleFahrenheitChange` मेथड् है|इनपुट के सम्पादन के आधार इन दोनों `Calculator` मेथड्स में से किसी एक को कॉल किया जाता है| +* इन मेथड्स के अंदर, `Calculator` कौम्पोनॅन्ट React से `this.setState()` को कॉल करके, नयी इनपुट वैल्यू एवं वर्तमान scale जिसको हमने बस अभी सम्पादित किया, के साथ re-render होने को कहता है| +* `Calculator` कौम्पोनॅन्ट के `render`मेथड् को React कॉल करता है ताकि वह UI कैसा दिखता है यह जान सखे| दोनों इनपुट के वैल्यूज की वर्तमान तापमान और सक्रिय scale के आधार पर पुनर्गणना की जाती है। तापमान रूपांतरण यहां किया जाता है। +* React `कैलकुलेटर` द्वारा निर्देशित नए props के साथ `TemperatureInput` कौम्पोनॅन्टस के `render` मेथड्स को कॉल करता है| * React DOM, boiling verdict के साथ DOM को अपडेट करता है और वांछित इनपुट वैल्यूज से मेल कराता है। जिस इनपुट को हमने अभी संपादित किया है, वह अपनी वर्तमान वैल्यू प्राप्त करता है, और अन्य इनपुट को रूपांतरण के बाद तापमान में अपडेट किया जाता है। हर अपडेट समान चरणों के माध्यम से जाता है ताकि इनपुट sync में रहें। ## सबक सीखा {#lessons-learned} -React एप्लीकेशन में परिवर्तन करने वाले किसी भी डेटा के लिए "सत्य का एक स्रोत" केवल एक होना चाहिए। आमतौर पर, state को पहले कौम्पोनॅन्ट में जोड़ा जाता है जो इसे render करने के लिए आवश्यक होता है. फिर, अगर अन्य कौम्पोनॅन्टस को भी इसकी आवश्यकता होती है, तो आप इसे अपने निकटतम सामान्य पूर्वज तक उठा सकते हैं।. अलग-अलग कौम्पोनॅन्टस के बीच state को sync करने की कोशिश करने के बजाय, आपको इस पर भरोसा करना चाहिए [top-down data flow](/docs/state-and-lifecycle.html#the-data-flows-down). +React एप्लीकेशन में परिवर्तन करने वाले किसी भी डेटा के लिए "सत्य का एक स्रोत" केवल एक होना चाहिए। आमतौर पर, state को पहले कौम्पोनॅन्ट में जोड़ा जाता है जो इसे render करने के लिए आवश्यक होता है. फिर, अगर अन्य कौम्पोनॅन्टस को भी इसकी आवश्यकता होती है, तो आप इसे अपने निकटतम सामान्य पूर्वज तक उठा सकते हैं।. अलग-अलग कौम्पोनॅन्टस के बीच state को sync करने की कोशिश करने के बजाय, आपको इस पर भरोसा करना चाहिए [ऊपर से नीचे डेटा प्रवाह](/docs/state-and-lifecycle.html#the-data-flows-down). state को लिफ्ट करने में दो-तरफ़ा बंधन दृष्टिकोण की तुलना में अधिक "boilerplate" कोड लिखना शामिल है, लेकिन एक लाभ के रूप में, bug को खोजने और अलग करने में कम काम लगता है|चूंकि कोई भी state किसी कौम्पोनॅन्ट में "रहता है" और वह कौम्पोनॅन्ट अकेले इसे बदल सकता है, bug के लिए सतह क्षेत्र बहुत कम हो गया है। इसके अतिरिक्त, आप यूजर इनपुट को अस्वीकार या परिवर्तित करने के लिए कोई भी कस्टम लॉजिक लागू कर सकते हैं। -यदि किसी चीज़ को किसी props या state से प्राप्त किया जा सकता है, तो यह संभवतः state में नहीं होना चाहिए। उदाहरण के लिए, दोनों `celsiusValue` और `fahrenheitValue` को स्टोर करने के बजाय, हम केवल अंतिम संपादित `temperature` और इसके `scale` को स्टोर करते हैं| 'render()' method में उनकी सहायता से अन्य इनपुट की वैल्यू की गणना हमेशा की जा सकती है| This lets us clear or apply rounding to the other field without losing any precision in the user input. +यदि किसी चीज़ को किसी props या state से प्राप्त किया जा सकता है, तो यह संभवतः state में नहीं होना चाहिए। उदाहरण के लिए, दोनों `celsiusValue` और `fahrenheitValue` को स्टोर करने के बजाय, हम केवल अंतिम संपादित `temperature` और इसके `scale` को स्टोर करते हैं| 'render()' मेथड् में उनकी सहायता से अन्य इनपुट की वैल्यू की गणना हमेशा की जा सकती है| यह हमें यूजर इनपुट में कोई भी सटीकता खोए बिना दूसरे फील्ड में राउंडिंग को हटाने या लागू करने देता है। -When you see something wrong in the UI, you can use [React Developer Tools](https://github.com/facebook/react-devtools) to inspect the props and move up the tree until you find the component responsible for updating the state. This lets you trace the bugs to their source: +जब आप UI में कुछ गलत देखते हैं, तो आप उपयोग कर सकते हैं [React Developer Tools](https://github.com/facebook/react-devtools) props का निरीक्षण करने और पेड़ के ऊपर चढ़ने के लिए जब तक कि आप कौम्पोनॅन्ट को state अपडेट करने के लिए जिम्मेदार नहीं पाते|यह आपको bugs के स्रोत का पता लगाने देता है: Monitoring State in React DevTools From d8114a3c52218b7526a6504ba09b549165fb07b5 Mon Sep 17 00:00:00 2001 From: sambhav Date: Sat, 13 Apr 2019 18:57:41 +0100 Subject: [PATCH 08/14] corrections --- content/docs/lifting-state-up.md | 36 ++++++++++++++++---------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/content/docs/lifting-state-up.md b/content/docs/lifting-state-up.md index 9a20699c6..a8c127eaa 100644 --- a/content/docs/lifting-state-up.md +++ b/content/docs/lifting-state-up.md @@ -9,7 +9,7 @@ redirect_from: - "docs/flux-todo-list.html" --- -अक्सर, कई कौम्पोनॅन्टस को एक ही बदलते डेटा को प्रतिबिंबित करने की आवश्यकता होती है। हम उनके निकटतम सामान्य पूर्वज तक स्टेट को उठाने की सलाह देते हैं| आइए देखें कि यह कैसे कार्य करता है। +अक्सर, कई कौम्पोनॅन्टस को एक ही बदलते डेटा को प्रतिबिंबित करने की आवश्यकता होती है। हम उनके निकटतम सामान्य पैरेंट तक स्टेट को उठाने की सलाह देते हैं| आइए देखें कि यह कैसे कार्य करता है। इस खंड में, हम एक तापमान कैलकुलेटर बनाएंगे जो गणना करता है कि पानी किसी दिए गए तापमान पर उबलता है या नहीं। @@ -173,9 +173,9 @@ class TemperatureInput extends React.Component { React में , state साझाकरण का कार्य उसे कौम्पोनॅन्टस के निकटतम सामान्य पूर्वज तक ले जाकर पूरा किया जाता है|यह "स्टेट को ऊपर लेजाना" कहलाता है| हम लोकल स्टेट को `TemperatureInput` से हटा देंगे एवं `Calculator` में ले जायेंगे| -यदि साझा स्टेट का मालिक `Calculator` हे, तो वह दोनों इन्पुट्स में वर्तमान तापमान के लिए "सत्य का स्रोत" बन जाता है| यह उन दोनों को एक दूसरे के अनुरूप वैल्यूज रखने का निर्देश दे सकता है| चूंकि दोनों `TemperatureInput` कौम्पोनॅन्टस के props एक ही मूल `Calculator` कौम्पोनॅन्ट से हैं, यह दोनों हमेशा sync में रहेंगे| +यदि साझा स्टेट का मालिक `Calculator` हे, तो वह दोनों इन्पुट्स में वर्तमान तापमान के लिए "सत्य का स्रोत" बन जाता है| यह उन दोनों को एक दूसरे के अनुरूप वैल्यूज रखने का निर्देश दे सकता है| चूंकि दोनों `TemperatureInput` कौम्पोनॅन्टस के props एक ही `Calculator` पैरेंट कौम्पोनॅन्ट से हैं, यह दोनों हमेशा sync में रहेंगे| -आइए देखें कि यह चरण दर चरण कैसे काम करता है। +आइए देखें कि यह स्टेप-बाय-स्टेप कैसे काम करता है। सबसे पहले, हम `TemperatureInput` कौम्पोनॅन्ट में `this.state.temperature` को `this.props.temperature` से बदल देंगे| अभी के लिए, मान लीजिये कि `this.props.temperature` पहले से ही मौजूद है, हालाँकि हमें भविष्य में इसे `Calculator` से पास करना होगा: @@ -186,9 +186,9 @@ React में , state साझाकरण का कार्य उसे // ... ``` -हम जानते हैं कि [Props केवल-पढ़ने के लिए हैं](/docs/components-and-props.html#props-are-read-only). जब `temperature` local state में था, तो `TemperatureInput` इसे बदलने के लिए `this.setState ()` को कॉल कर सकता है| हालाँकि, अब `temperature` अपने मूल से prop बनकर आ रहा है, `TemperatureInput' का इस पर कोई नियंत्रण नहीं है। +हम जानते हैं कि [Props केवल-पढ़ने के लिए हैं](/docs/components-and-props.html#props-are-read-only). जब `temperature` लोकल state में था, तो `TemperatureInput` इसे बदलने के लिए `this.setState ()` को कॉल कर सकता है| हालाँकि, अब `temperature` अपने पैरेंट से prop बनकर आ रहा है, `TemperatureInput' का इस पर कोई नियंत्रण नहीं है। -React में, यह मसला आमतौर पर कौम्पोनॅन्ट को "नियंत्रित" बनाकर हल किया जाता है| जैसे DOM ``, `value` एवं `onChange` prop दोनों को स्वीकार करता है, ठीक वैसे ही, `TemperatureInput` दोनों `temperature` एवं `onTemperatureChange` props को उसके मूल `Calculator` से स्वीकार करता है| +React में, यह मसला आमतौर पर कौम्पोनॅन्ट को "नियंत्रित" बनाकर हल किया जाता है| जैसे DOM ``, `value` एवं `onChange` prop दोनों को स्वीकार करता है, ठीक वैसे ही, `TemperatureInput` दोनों `temperature` एवं `onTemperatureChange` props को उसके पैरेंट `Calculator` से स्वीकार करता है| अब, जब `TemperatureInput` अपने तापमान को अपडेट करना चाहेगा, तो वह `this.props.onTemperChange` को कॉल करेगा: @@ -203,9 +203,9 @@ React में, यह मसला आमतौर पर कौम्पो > >कस्टम कौम्पोनॅन्टस में `temperature` या `onTemperatureChange` prop नामों का कोई विशेष अर्थ नहीं है। हम उन्हें और कुछ भी कह सकते थे, जैसे कि `value` और `onChange` जो एक आम परंपरा है। -`Calculator` कौम्पोनॅन्ट के द्वारा `onTemperatureChange` prop को `temperature` prop के साथ प्रदान किया जाएगा| यह स्वयं के local state को संशोधित करके परिवर्तन को नियंत्रित करेगा, और इस प्रकार दोनों इनपुट्स को नए मूल्यों के साथ फिर से प्रस्तुत करेगा| हम बहुत जल्द नए `Calculator` के परिपालन को देखेंगे। +पैरेंट `Calculator` कौम्पोनॅन्ट के द्वारा `onTemperatureChange` prop को `temperature` prop के साथ प्रदान किया जाएगा| यह स्वयं के लोकल state को संशोधित करके परिवर्तन को नियंत्रित करेगा, और इस प्रकार दोनों इनपुट्स को नए मूल्यों के साथ फिर से प्रस्तुत करेगा| हम बहुत जल्द नए `Calculator` के परिपालन को देखेंगे। -आईये `Calculator` में परिवर्तन करने से पहले, `TemperatureInput` कौम्पोनॅन्ट में किये गए परिवर्तनों को याद कर लेते हैं| हमने इसमें से local state को हटा दिया है, और `this.state.temperature` रीड करने के बजाय, हम अब `this.props.temperature` रीड करते हैं| जब हम कोई बदलाव करना चाहते हैं तो `this.setState()` को कॉल करने के बजाय हम अब `this.props.onTemperatureChange()` को कॉल करते हैं, जो `Calculator` प्रदान करता है| +आईये `Calculator` में परिवर्तन करने से पहले, `TemperatureInput` कौम्पोनॅन्ट में किये गए परिवर्तनों को याद कर लेते हैं| हमने इसमें से लोकल state को हटा दिया है, और `this.state.temperature` रीड करने के बजाय, हम अब `this.props.temperature` रीड करते हैं| जब हम कोई बदलाव करना चाहते हैं तो `this.setState()` को कॉल करने के बजाय हम अब `this.props.onTemperatureChange()` को कॉल करते हैं, जो `Calculator` प्रदान करता है| ```js{8,12} class TemperatureInput extends React.Component { @@ -234,7 +234,7 @@ class TemperatureInput extends React.Component { अब `Calculator` कौम्पोनॅन्ट की ओर मुड़ते हैं। -हम वर्तमान इनपुट के `temperature` और `scale` को उसके local state में जमा करेंगे. यह वही स्टेट जिसे हमने इनपुट्स से "lifted up" किया, और यह उन दोनों के लिए "source of truth" के रूप में काम करेगी| यह दोनों इनपुट्स को रेंडर करने के लिए हमारे द्वारा आवश्यक सभी डेटा का न्यूनतम प्रतिनिधित्व है। +हम वर्तमान इनपुट के `temperature` और `scale` को उसके लोकल state में जमा करेंगे. यह वही स्टेट जिसे हमने इनपुट्स से "lifted up" किया, और यह उन दोनों के लिए "source of truth" के रूप में काम करेगी| यह दोनों इनपुट्स को रेंडर करने के लिए हमारे द्वारा आवश्यक सभी डेटा का न्यूनतम प्रतिनिधित्व है। उदाहरण के लिए, यदि हम Celsius इनपुट में 37 दर्ज करते हैं, तो `Calculator` कौम्पोनॅन्ट की state होगी: @@ -301,23 +301,23 @@ class Calculator extends React.Component { [**इसे CodePen पर आज़माएँ**](https://codepen.io/gaearon/pen/WZpxpz?editors=0010) -अब, कोई फर्क नहीं पड़ता कि आप किस इनपुट को संपादित करते हैं, `Calculator` के `this.state.temperature` और `this.state.scale` अपडेट हो जायेंगे| इनपुट्स में से एक को वैल्यू मिलती है, इसलिए कोई भी user input संरक्षित रहता है, और अन्य इनपुट वैल्यू ी हमेशा इसके आधार पर पुनर्गणना होता है। +अब, कोई फर्क नहीं पड़ता कि आप किस इनपुट को संपादित करते हैं, `Calculator` के `this.state.temperature` और `this.state.scale` अपडेट हो जायेंगे| इनपुट्स में से एक को वैल्यू मिलती है, इसलिए कोई भी user input संरक्षित रहता है, और अन्य इनपुट वैल्यू हमेशा इसके आधार पर पुनर्गणना होता है। -आइये संक्षेप में देखते हैं की एक इनपुट को संपादित करते पर क्या होता है : +आइये संक्षेप में देखते हैं की एक इनपुट को संपादित करने पर क्या होता है : -* React `onChange` के द्वारा निर्दिष्ट फंक्शन को DOM `` पर कॉल करता है| हमारे लिए, यह `TemperatureInput` कौम्पोनॅन्ट का `handleChange` मेथड् है। -* `TemperatureInput` कौम्पोनॅन्ट का `handleChange` मेथड्, नए वांछित वैल्यू के साथ `this.props.onTemperChange()` को कॉल करता है| इसके props, जिनमें `onTemperatureChange` शामिल हैं, को इसके मूल कौम्पोनॅन्ट, 'कैलकुलेटर' द्वारा प्रदान किया जाता है। -* जब यह पूर्व में render किया गया था, तो `Calculator` ने निर्दिष्ट किया है कि Celsius `TemperatureInput` का `onTemperatureChange` ही `Calculator` का `handleCelsiusChange` मेथड् है, इसी प्रकार Fahrenheit `TemperatureInput` का `onTemperatureChange` ही `कैलकुलेटर` का `handleFahrenheitChange` मेथड् है|इनपुट के सम्पादन के आधार इन दोनों `Calculator` मेथड्स में से किसी एक को कॉल किया जाता है| -* इन मेथड्स के अंदर, `Calculator` कौम्पोनॅन्ट React से `this.setState()` को कॉल करके, नयी इनपुट वैल्यू एवं वर्तमान scale जिसको हमने बस अभी सम्पादित किया, के साथ re-render होने को कहता है| -* `Calculator` कौम्पोनॅन्ट के `render`मेथड् को React कॉल करता है ताकि वह UI कैसा दिखता है यह जान सखे| दोनों इनपुट के वैल्यूज की वर्तमान तापमान और सक्रिय scale के आधार पर पुनर्गणना की जाती है। तापमान रूपांतरण यहां किया जाता है। -* React `कैलकुलेटर` द्वारा निर्देशित नए props के साथ `TemperatureInput` कौम्पोनॅन्टस के `render` मेथड्स को कॉल करता है| +* React `onChange` के द्वारा निर्दिष्ट फंक्शन को DOM `` पर कॉल करता है| हमारे लिए, यह `TemperatureInput` कौम्पोनॅन्ट का `handleChange` मेथड है। +* `TemperatureInput` कौम्पोनॅन्ट का `handleChange` मेथड, नए वांछित वैल्यू के साथ `this.props.onTemperChange()` को कॉल करता है| इसके props, जिनमें `onTemperatureChange` शामिल हैं, को इसके पैरेंट कौम्पोनॅन्ट `Calculator` द्वारा प्रदान किया जाता है। +* जब यह पूर्व में रेंडर किया गया था, तो `Calculator` ने निर्दिष्ट किया है कि Celsius `TemperatureInput` का `onTemperatureChange` ही `Calculator` का `handleCelsiusChange` मेथड है, इसी प्रकार Fahrenheit `TemperatureInput` का `onTemperatureChange` ही `कैलकुलेटर` का `handleFahrenheitChange` मेथड है|इनपुट के सम्पादन के आधार इन दोनों `Calculator` मेथडस में से किसी एक को कॉल किया जाता है| +* इन मेथडस के अंदर, `Calculator` कौम्पोनॅन्ट React से `this.setState()` को कॉल करके, नयी इनपुट वैल्यू एवं वर्तमान scale जिसको हमने बस अभी सम्पादित किया, के साथ फिर से रेंडर होने को कहता है| +* `Calculator` कौम्पोनॅन्ट के `render` मेथड को React कॉल करता है ताकि वह UI कैसा दिखता है यह जान सखे| दोनों इनपुट के वैल्यूज की वर्तमान तापमान और सक्रिय scale के आधार पर पुनर्गणना की जाती है। तापमान रूपांतरण यहां किया जाता है। +* React `कैलकुलेटर` द्वारा निर्देशित नए props के साथ `TemperatureInput` कौम्पोनॅन्टस के `render` मेथडस को कॉल करता है| * React DOM, boiling verdict के साथ DOM को अपडेट करता है और वांछित इनपुट वैल्यूज से मेल कराता है। जिस इनपुट को हमने अभी संपादित किया है, वह अपनी वर्तमान वैल्यू प्राप्त करता है, और अन्य इनपुट को रूपांतरण के बाद तापमान में अपडेट किया जाता है। -हर अपडेट समान चरणों के माध्यम से जाता है ताकि इनपुट sync में रहें। +हर अपडेट समान स्टेप्स के माध्यम से जाता है ताकि इनपुट sync में रहें। ## सबक सीखा {#lessons-learned} -React एप्लीकेशन में परिवर्तन करने वाले किसी भी डेटा के लिए "सत्य का एक स्रोत" केवल एक होना चाहिए। आमतौर पर, state को पहले कौम्पोनॅन्ट में जोड़ा जाता है जो इसे render करने के लिए आवश्यक होता है. फिर, अगर अन्य कौम्पोनॅन्टस को भी इसकी आवश्यकता होती है, तो आप इसे अपने निकटतम सामान्य पूर्वज तक उठा सकते हैं।. अलग-अलग कौम्पोनॅन्टस के बीच state को sync करने की कोशिश करने के बजाय, आपको इस पर भरोसा करना चाहिए [ऊपर से नीचे डेटा प्रवाह](/docs/state-and-lifecycle.html#the-data-flows-down). +React एप्लीकेशन में परिवर्तन करने वाले किसी भी डेटा के लिए "सत्य का एक स्रोत" केवल एक होना चाहिए। आमतौर पर, state को पहले कौम्पोनॅन्ट में जोड़ा जाता है जो इसे रेंडर करने के लिए आवश्यक होता है| फिर, अगर अन्य कौम्पोनॅन्टस को भी इसकी आवश्यकता होती है, तो आप इसे अपने निकटतम सामान्य पूर्वज तक उठा सकते हैं।. अलग-अलग कौम्पोनॅन्टस के बीच state को sync करने की कोशिश करने के बजाय, आपको इस पर भरोसा करना चाहिए [ऊपर से नीचे डेटा प्रवाह](/docs/state-and-lifecycle.html#the-data-flows-down). state को लिफ्ट करने में दो-तरफ़ा बंधन दृष्टिकोण की तुलना में अधिक "boilerplate" कोड लिखना शामिल है, लेकिन एक लाभ के रूप में, bug को खोजने और अलग करने में कम काम लगता है|चूंकि कोई भी state किसी कौम्पोनॅन्ट में "रहता है" और वह कौम्पोनॅन्ट अकेले इसे बदल सकता है, bug के लिए सतह क्षेत्र बहुत कम हो गया है। इसके अतिरिक्त, आप यूजर इनपुट को अस्वीकार या परिवर्तित करने के लिए कोई भी कस्टम लॉजिक लागू कर सकते हैं। From 17467b06b756c8c61dfba04ae39dde7d5c7e5013 Mon Sep 17 00:00:00 2001 From: sambhav Date: Sat, 13 Apr 2019 19:07:30 +0100 Subject: [PATCH 09/14] more corrections --- content/docs/lifting-state-up.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/lifting-state-up.md b/content/docs/lifting-state-up.md index a8c127eaa..b04d077e5 100644 --- a/content/docs/lifting-state-up.md +++ b/content/docs/lifting-state-up.md @@ -234,7 +234,7 @@ class TemperatureInput extends React.Component { अब `Calculator` कौम्पोनॅन्ट की ओर मुड़ते हैं। -हम वर्तमान इनपुट के `temperature` और `scale` को उसके लोकल state में जमा करेंगे. यह वही स्टेट जिसे हमने इनपुट्स से "lifted up" किया, और यह उन दोनों के लिए "source of truth" के रूप में काम करेगी| यह दोनों इनपुट्स को रेंडर करने के लिए हमारे द्वारा आवश्यक सभी डेटा का न्यूनतम प्रतिनिधित्व है। +हम वर्तमान इनपुट के `temperature` और `scale` को उसके लोकल state में जमा करेंगे. यह वही state है जिसे हमने इनपुट्स से "ऊपर उठा लिया", और यह उन दोनों के लिए "सत्य का एक स्रोत" के रूप में काम करेगी| यह दोनों इनपुट्स को रेंडर करने के लिए हमारे द्वारा आवश्यक सभी डेटा का न्यूनतम प्रतिनिधित्व है। उदाहरण के लिए, यदि हम Celsius इनपुट में 37 दर्ज करते हैं, तो `Calculator` कौम्पोनॅन्ट की state होगी: @@ -310,7 +310,7 @@ class Calculator extends React.Component { * जब यह पूर्व में रेंडर किया गया था, तो `Calculator` ने निर्दिष्ट किया है कि Celsius `TemperatureInput` का `onTemperatureChange` ही `Calculator` का `handleCelsiusChange` मेथड है, इसी प्रकार Fahrenheit `TemperatureInput` का `onTemperatureChange` ही `कैलकुलेटर` का `handleFahrenheitChange` मेथड है|इनपुट के सम्पादन के आधार इन दोनों `Calculator` मेथडस में से किसी एक को कॉल किया जाता है| * इन मेथडस के अंदर, `Calculator` कौम्पोनॅन्ट React से `this.setState()` को कॉल करके, नयी इनपुट वैल्यू एवं वर्तमान scale जिसको हमने बस अभी सम्पादित किया, के साथ फिर से रेंडर होने को कहता है| * `Calculator` कौम्पोनॅन्ट के `render` मेथड को React कॉल करता है ताकि वह UI कैसा दिखता है यह जान सखे| दोनों इनपुट के वैल्यूज की वर्तमान तापमान और सक्रिय scale के आधार पर पुनर्गणना की जाती है। तापमान रूपांतरण यहां किया जाता है। -* React `कैलकुलेटर` द्वारा निर्देशित नए props के साथ `TemperatureInput` कौम्पोनॅन्टस के `render` मेथडस को कॉल करता है| +* React `Calculator` द्वारा निर्देशित नए props के साथ `TemperatureInput` कौम्पोनॅन्टस के `render` मेथडस को कॉल करता है| * React DOM, boiling verdict के साथ DOM को अपडेट करता है और वांछित इनपुट वैल्यूज से मेल कराता है। जिस इनपुट को हमने अभी संपादित किया है, वह अपनी वर्तमान वैल्यू प्राप्त करता है, और अन्य इनपुट को रूपांतरण के बाद तापमान में अपडेट किया जाता है। हर अपडेट समान स्टेप्स के माध्यम से जाता है ताकि इनपुट sync में रहें। From be8228d8dec4cf8ae41ab4cc5877ff3fc312a988 Mon Sep 17 00:00:00 2001 From: sambhav Date: Sat, 13 Apr 2019 19:11:43 +0100 Subject: [PATCH 10/14] more corrections --- content/docs/lifting-state-up.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/lifting-state-up.md b/content/docs/lifting-state-up.md index b04d077e5..0f113543e 100644 --- a/content/docs/lifting-state-up.md +++ b/content/docs/lifting-state-up.md @@ -186,7 +186,7 @@ React में , state साझाकरण का कार्य उसे // ... ``` -हम जानते हैं कि [Props केवल-पढ़ने के लिए हैं](/docs/components-and-props.html#props-are-read-only). जब `temperature` लोकल state में था, तो `TemperatureInput` इसे बदलने के लिए `this.setState ()` को कॉल कर सकता है| हालाँकि, अब `temperature` अपने पैरेंट से prop बनकर आ रहा है, `TemperatureInput' का इस पर कोई नियंत्रण नहीं है। +हम जानते हैं कि [Props केवल-पढ़ने के लिए हैं](/docs/components-and-props.html#props-are-read-only). जब `temperature` लोकल state में है, तो `TemperatureInput` इसे बदलने के लिए `this.setState ()` को कॉल कर सकता है| हालाँकि, अब `temperature` अपने पैरेंट से prop बनकर आ रहा है, `TemperatureInput' का इस पर कोई नियंत्रण नहीं है। React में, यह मसला आमतौर पर कौम्पोनॅन्ट को "नियंत्रित" बनाकर हल किया जाता है| जैसे DOM ``, `value` एवं `onChange` prop दोनों को स्वीकार करता है, ठीक वैसे ही, `TemperatureInput` दोनों `temperature` एवं `onTemperatureChange` props को उसके पैरेंट `Calculator` से स्वीकार करता है| @@ -307,7 +307,7 @@ class Calculator extends React.Component { * React `onChange` के द्वारा निर्दिष्ट फंक्शन को DOM `` पर कॉल करता है| हमारे लिए, यह `TemperatureInput` कौम्पोनॅन्ट का `handleChange` मेथड है। * `TemperatureInput` कौम्पोनॅन्ट का `handleChange` मेथड, नए वांछित वैल्यू के साथ `this.props.onTemperChange()` को कॉल करता है| इसके props, जिनमें `onTemperatureChange` शामिल हैं, को इसके पैरेंट कौम्पोनॅन्ट `Calculator` द्वारा प्रदान किया जाता है। -* जब यह पूर्व में रेंडर किया गया था, तो `Calculator` ने निर्दिष्ट किया है कि Celsius `TemperatureInput` का `onTemperatureChange` ही `Calculator` का `handleCelsiusChange` मेथड है, इसी प्रकार Fahrenheit `TemperatureInput` का `onTemperatureChange` ही `कैलकुलेटर` का `handleFahrenheitChange` मेथड है|इनपुट के सम्पादन के आधार इन दोनों `Calculator` मेथडस में से किसी एक को कॉल किया जाता है| +* जब यह पूर्व में रेंडर किया गया था, तो `Calculator` ने निर्दिष्ट किया है कि Celsius `TemperatureInput` का `onTemperatureChange` ही `Calculator` का `handleCelsiusChange` मेथड है, इसी प्रकार Fahrenheit `TemperatureInput` का `onTemperatureChange` ही `Calculator` का `handleFahrenheitChange` मेथड है|इनपुट के सम्पादन के आधार इन दोनों `Calculator` मेथडस में से किसी एक को कॉल किया जाता है| * इन मेथडस के अंदर, `Calculator` कौम्पोनॅन्ट React से `this.setState()` को कॉल करके, नयी इनपुट वैल्यू एवं वर्तमान scale जिसको हमने बस अभी सम्पादित किया, के साथ फिर से रेंडर होने को कहता है| * `Calculator` कौम्पोनॅन्ट के `render` मेथड को React कॉल करता है ताकि वह UI कैसा दिखता है यह जान सखे| दोनों इनपुट के वैल्यूज की वर्तमान तापमान और सक्रिय scale के आधार पर पुनर्गणना की जाती है। तापमान रूपांतरण यहां किया जाता है। * React `Calculator` द्वारा निर्देशित नए props के साथ `TemperatureInput` कौम्पोनॅन्टस के `render` मेथडस को कॉल करता है| @@ -319,11 +319,11 @@ class Calculator extends React.Component { React एप्लीकेशन में परिवर्तन करने वाले किसी भी डेटा के लिए "सत्य का एक स्रोत" केवल एक होना चाहिए। आमतौर पर, state को पहले कौम्पोनॅन्ट में जोड़ा जाता है जो इसे रेंडर करने के लिए आवश्यक होता है| फिर, अगर अन्य कौम्पोनॅन्टस को भी इसकी आवश्यकता होती है, तो आप इसे अपने निकटतम सामान्य पूर्वज तक उठा सकते हैं।. अलग-अलग कौम्पोनॅन्टस के बीच state को sync करने की कोशिश करने के बजाय, आपको इस पर भरोसा करना चाहिए [ऊपर से नीचे डेटा प्रवाह](/docs/state-and-lifecycle.html#the-data-flows-down). -state को लिफ्ट करने में दो-तरफ़ा बंधन दृष्टिकोण की तुलना में अधिक "boilerplate" कोड लिखना शामिल है, लेकिन एक लाभ के रूप में, bug को खोजने और अलग करने में कम काम लगता है|चूंकि कोई भी state किसी कौम्पोनॅन्ट में "रहता है" और वह कौम्पोनॅन्ट अकेले इसे बदल सकता है, bug के लिए सतह क्षेत्र बहुत कम हो गया है। इसके अतिरिक्त, आप यूजर इनपुट को अस्वीकार या परिवर्तित करने के लिए कोई भी कस्टम लॉजिक लागू कर सकते हैं। +state को लिफ्ट करने में दो-तरफ़ा बंधन दृष्टिकोण की तुलना में अधिक "boilerplate" कोड लिखना शामिल है, लेकिन एक लाभ के रूप में, bug को खोजने और अलग करने में कम काम लगता है| चूंकि कोई भी state किसी कौम्पोनॅन्ट में "रहता है" और वह कौम्पोनॅन्ट अकेले इसे बदल सकता है, bug के लिए सतह क्षेत्र बहुत कम हो गया है। इसके अतिरिक्त, आप यूजर इनपुट को अस्वीकार या परिवर्तित करने के लिए कोई भी कस्टम लॉजिक लागू कर सकते हैं। -यदि किसी चीज़ को किसी props या state से प्राप्त किया जा सकता है, तो यह संभवतः state में नहीं होना चाहिए। उदाहरण के लिए, दोनों `celsiusValue` और `fahrenheitValue` को स्टोर करने के बजाय, हम केवल अंतिम संपादित `temperature` और इसके `scale` को स्टोर करते हैं| 'render()' मेथड् में उनकी सहायता से अन्य इनपुट की वैल्यू की गणना हमेशा की जा सकती है| यह हमें यूजर इनपुट में कोई भी सटीकता खोए बिना दूसरे फील्ड में राउंडिंग को हटाने या लागू करने देता है। +यदि किसी चीज़ को किसी props या state से प्राप्त किया जा सकता है, तो यह संभवतः state में नहीं होना चाहिए। उदाहरण के लिए, दोनों `celsiusValue` और `fahrenheitValue` को स्टोर करने के बजाय, हम केवल अंतिम संपादित `temperature` और इसके `scale` को स्टोर करते हैं| 'render()' मेथड् में उनकी सहायता से अन्य इनपुट की वैल्यू की गणना हमेशा की जा सकती है| यह हमें यूजर इनपुट में कोई भी सटीकता खोए बिना दूसरे फील्ड में राउंडिंग को हटाने या लागू करने देता है। -जब आप UI में कुछ गलत देखते हैं, तो आप उपयोग कर सकते हैं [React Developer Tools](https://github.com/facebook/react-devtools) props का निरीक्षण करने और पेड़ के ऊपर चढ़ने के लिए जब तक कि आप कौम्पोनॅन्ट को state अपडेट करने के लिए जिम्मेदार नहीं पाते|यह आपको bugs के स्रोत का पता लगाने देता है: +जब आप UI में कुछ गलत देखते हैं, तो आप उपयोग कर सकते हैं [React Developer Tools](https://github.com/facebook/react-devtools) props का निरीक्षण करने और पेड़ के ऊपर चढ़ने के लिए जब तक कि आप कौम्पोनॅन्ट को state अपडेट करने के लिए जिम्मेदार नहीं पाते| यह आपको bugs के स्रोत का पता लगाने देता है: Monitoring State in React DevTools From 9d695499dbc66d634757b62ad14258986bc0bdd4 Mon Sep 17 00:00:00 2001 From: sambhav Date: Sun, 14 Apr 2019 10:11:31 +0100 Subject: [PATCH 11/14] review comments changes --- content/docs/lifting-state-up.md | 62 ++++++++++++++++---------------- 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/content/docs/lifting-state-up.md b/content/docs/lifting-state-up.md index 0f113543e..7e66223ee 100644 --- a/content/docs/lifting-state-up.md +++ b/content/docs/lifting-state-up.md @@ -1,6 +1,6 @@ --- id: lifting-state-up -title: स्टेट को ऊपर लेजाना +title: लिफ्टिंग स्टेट अप permalink: docs/lifting-state-up.html prev: forms.html next: composition-vs-inheritance.html @@ -9,7 +9,7 @@ redirect_from: - "docs/flux-todo-list.html" --- -अक्सर, कई कौम्पोनॅन्टस को एक ही बदलते डेटा को प्रतिबिंबित करने की आवश्यकता होती है। हम उनके निकटतम सामान्य पैरेंट तक स्टेट को उठाने की सलाह देते हैं| आइए देखें कि यह कैसे कार्य करता है। +अक्सर, कई कौम्पोनॅन्टस को एक ही बदलते डेटा को प्रतिबिंबित करने की आवश्यकता होती है। हम उनके निकटतम सामान्य पैरेंट तक स्टेट को उठाने की सलाह देते हैं। आइए देखें कि यह कैसे कार्य करता है। इस खंड में, हम एक तापमान कैलकुलेटर बनाएंगे जो गणना करता है कि पानी किसी दिए गए तापमान पर उबलता है या नहीं। @@ -24,7 +24,7 @@ function BoilingVerdict(props) { } ``` -इसके बाद, हम 'Calculator' नामक एक कौम्पोनॅन्ट बनाएंगे। यह एक `` रेंडर करेगा, जिसमे आप तापमान दर्ज कर सकते हैं, जिसकी value `this.state.temperature` में रहेगी. +इसके बाद, हम 'Calculator' नामक एक कौम्पोनॅन्ट बनाएंगे। यह एक `` रेंडर करेगा, जिसमे आप तापमान दर्ज कर सकते हैं, जिसकी value `this.state.temperature` में रहेगी। इसके अतिरिक्त, यह वर्तमान इनपुट मूल्य के लिए `BoilingVerdict` रेंडर कर देता है। @@ -60,9 +60,9 @@ class Calculator extends React.Component { ## एक दूसरा इनपुट जोड़ना {#adding-a-second-input} -हमारी नई आवश्यकता यह है कि, एक Celsius इनपुट के अलावा, हम एक Fahrenheit इनपुट प्रदान करें, और वे sync में रहें| +हमारी नई आवश्यकता यह है कि, एक Celsius इनपुट के अलावा, हम एक Fahrenheit इनपुट प्रदान करें, और वे sync में रहें। -हम `Calculator` से एक `TemperatureInput` कौम्पोनॅन्ट को निकालने से शुरुआत कर सकते हैं| हम इसमें एक नया `scale` prop जोड़ेंगे, जो या तो "c" या "f" हो सकता है: +हम `Calculator` से एक `TemperatureInput` कौम्पोनॅन्ट को निकालने से शुरुआत कर सकते हैं। हम इसमें एक नया `scale` prop जोड़ेंगे, जो या तो `"c"` या `"f"` हो सकता है: ```js{1-4,19,22} const scaleNames = { @@ -112,13 +112,13 @@ class Calculator extends React.Component { [**इसे CodePen पर आज़माएँ**](https://codepen.io/gaearon/pen/jGBryx?editors=0010) -अभ हमारे पास दो इनपुट हैं, लेकिन जब आप उनमें से एक में तापमान दर्ज करते हैं, तो दूसरा अपडेट नहीं होता| यह हमारी आवश्यकता के विपरीत है: हम उन्हें sync में रखना चाहते हैं। +अभ हमारे पास दो इनपुट हैं, लेकिन जब आप उनमें से एक में तापमान दर्ज करते हैं, तो दूसरा अपडेट नहीं होता। यह हमारी आवश्यकता के विपरीत है: हम उन्हें sync में रखना चाहते हैं। -हम `Calculator` से `BoilingVerdict` भी प्रदर्शित नहीं कर सकते| `Calculator` वर्तमान तापमान को नहीं जानता है क्योंकि यह `TemperatureInput` के अंदर छिपा हुआ है। +हम `Calculator` से `BoilingVerdict` भी प्रदर्शित नहीं कर सकते। `Calculator` वर्तमान तापमान को नहीं जानता है क्योंकि यह `TemperatureInput` के अंदर छिपा हुआ है। ## कन्वर्शन फंक्शन्स लिखना {#writing-conversion-functions} -सबसे पहले, हम दो फंक्शन्स लिखेंगे| Celsius से Fahrenheit और वापस Fahrenheit से Celsius में बदलने के लिए: +सबसे पहले, हम दो फंक्शन्स लिखेंगे। Celsius से Fahrenheit और वापस Fahrenheit से Celsius में बदलने के लिए: ```js function toCelsius(fahrenheit) { @@ -130,7 +130,7 @@ function toFahrenheit(celsius) { } ``` -यह दो फंक्शन्स संख्याओं को परिवर्तित करते हैं|हम एक और फ़ंक्शन लिखेंगे जो एक स्ट्रिंग `temperature` और एक कनवर्टर फ़ंक्शन को आर्गुमेंट के रूप में लेता है और एक स्ट्रिंग वापिस देता है। हम इसका उपयोग एक इनपुट के आधार पर दूसरे इनपुट की गणना करने के लिए करेंगे। +यह दो फंक्शन्स संख्याओं को परिवर्तित करते हैं।हम एक और फ़ंक्शन लिखेंगे जो एक स्ट्रिंग `temperature` और एक कनवर्टर फ़ंक्शन को आर्गुमेंट के रूप में लेता है और एक स्ट्रिंग वापिस देता है। हम इसका उपयोग एक इनपुट के आधार पर दूसरे इनपुट की गणना करने के लिए करेंगे। यह अमान्य `temperature` पर एक खाली स्ट्रिंग देता है, और यह आउटपुट को तीसरे दशमलव स्थान तक रखता है: @@ -146,7 +146,7 @@ function tryConvert(temperature, convert) { } ``` -उदाहरण के लिए, `tryConvert ('abc', toCelsius)` एक खाली स्ट्रिंग लौटाता है, और `tryConvert ('10 .22 ', toFahrenheit)` लौटाता है `'50 .396'`| +उदाहरण के लिए, `tryConvert('abc', toCelsius)` एक खाली स्ट्रिंग लौटाता है, और `tryConvert('10.22', toFahrenheit)` लौटाता है `'50.396'`। ## स्टेट को ऊपर लेजाना {#lifting-state-up} @@ -171,13 +171,13 @@ class TemperatureInput extends React.Component { हालाँकि, हम चाहते हैं कि ये दोनों इनपुट एक दूसरे के sync में रहें। जब हम Celsius इनपुट को अपडेट करें, तो Fahrenheit इनपुट अपडेट हो और इसके विपरीत भी प्रतिबिंबित होना चाहिए। -React में , state साझाकरण का कार्य उसे कौम्पोनॅन्टस के निकटतम सामान्य पूर्वज तक ले जाकर पूरा किया जाता है|यह "स्टेट को ऊपर लेजाना" कहलाता है| हम लोकल स्टेट को `TemperatureInput` से हटा देंगे एवं `Calculator` में ले जायेंगे| +React में, state साझाकरण का कार्य उसे कौम्पोनॅन्टस के निकटतम सामान्य पूर्वज तक ले जाकर पूरा किया जाता है। यह "लिफ्टिंग स्टेट अप" कहलाता है। हम लोकल स्टेट को `TemperatureInput` से हटा देंगे एवं `Calculator` में ले जायेंगे। -यदि साझा स्टेट का मालिक `Calculator` हे, तो वह दोनों इन्पुट्स में वर्तमान तापमान के लिए "सत्य का स्रोत" बन जाता है| यह उन दोनों को एक दूसरे के अनुरूप वैल्यूज रखने का निर्देश दे सकता है| चूंकि दोनों `TemperatureInput` कौम्पोनॅन्टस के props एक ही `Calculator` पैरेंट कौम्पोनॅन्ट से हैं, यह दोनों हमेशा sync में रहेंगे| +यदि साझा स्टेट का मालिक `Calculator` हे, तो वह दोनों इन्पुट्स में वर्तमान तापमान के लिए "सत्य का स्रोत" बन जाता है। यह उन दोनों को एक दूसरे के अनुरूप वैल्यूज रखने का निर्देश दे सकता है। चूंकि दोनों `TemperatureInput` कौम्पोनॅन्टस के props एक ही `Calculator` पैरेंट कौम्पोनॅन्ट से हैं, यह दोनों हमेशा sync में रहेंगे। आइए देखें कि यह स्टेप-बाय-स्टेप कैसे काम करता है। -सबसे पहले, हम `TemperatureInput` कौम्पोनॅन्ट में `this.state.temperature` को `this.props.temperature` से बदल देंगे| अभी के लिए, मान लीजिये कि `this.props.temperature` पहले से ही मौजूद है, हालाँकि हमें भविष्य में इसे `Calculator` से पास करना होगा: +सबसे पहले, हम `TemperatureInput` कौम्पोनॅन्ट में `this.state.temperature` को `this.props.temperature` से बदल देंगे। अभी के लिए, मान लीजिये कि `this.props.temperature` पहले से ही मौजूद है, हालाँकि हमें भविष्य में इसे `Calculator` से पास करना होगा: ```js{3} render() { @@ -186,11 +186,11 @@ React में , state साझाकरण का कार्य उसे // ... ``` -हम जानते हैं कि [Props केवल-पढ़ने के लिए हैं](/docs/components-and-props.html#props-are-read-only). जब `temperature` लोकल state में है, तो `TemperatureInput` इसे बदलने के लिए `this.setState ()` को कॉल कर सकता है| हालाँकि, अब `temperature` अपने पैरेंट से prop बनकर आ रहा है, `TemperatureInput' का इस पर कोई नियंत्रण नहीं है। +हम जानते हैं कि [props केवल-पढ़ने के लिए हैं](/docs/components-and-props.html#props-are-read-only). जब `temperature` लोकल state में है, तो `TemperatureInput` इसे बदलने के लिए `this.setState()` को कॉल कर सकता है। हालाँकि, अब `temperature` अपने पैरेंट से prop बनकर आ रहा है, `TemperatureInput' का इस पर कोई नियंत्रण नहीं है। -React में, यह मसला आमतौर पर कौम्पोनॅन्ट को "नियंत्रित" बनाकर हल किया जाता है| जैसे DOM ``, `value` एवं `onChange` prop दोनों को स्वीकार करता है, ठीक वैसे ही, `TemperatureInput` दोनों `temperature` एवं `onTemperatureChange` props को उसके पैरेंट `Calculator` से स्वीकार करता है| +React में, यह मसला आमतौर पर कौम्पोनॅन्ट को "नियंत्रित" बनाकर हल किया जाता है। जैसे DOM ``, `value` एवं `onChange` prop दोनों को स्वीकार करता है, ठीक वैसे ही, `TemperatureInput` दोनों `temperature` एवं `onTemperatureChange` props को उसके पैरेंट `Calculator` से स्वीकार करता है। -अब, जब `TemperatureInput` अपने तापमान को अपडेट करना चाहेगा, तो वह `this.props.onTemperChange` को कॉल करेगा: +अब, जब `TemperatureInput` अपने तापमान को अपडेट करना चाहेगा, तो वह `this.props.onTemperatureChange` को कॉल करेगा: ```js{3} handleChange(e) { @@ -203,9 +203,9 @@ React में, यह मसला आमतौर पर कौम्पो > >कस्टम कौम्पोनॅन्टस में `temperature` या `onTemperatureChange` prop नामों का कोई विशेष अर्थ नहीं है। हम उन्हें और कुछ भी कह सकते थे, जैसे कि `value` और `onChange` जो एक आम परंपरा है। -पैरेंट `Calculator` कौम्पोनॅन्ट के द्वारा `onTemperatureChange` prop को `temperature` prop के साथ प्रदान किया जाएगा| यह स्वयं के लोकल state को संशोधित करके परिवर्तन को नियंत्रित करेगा, और इस प्रकार दोनों इनपुट्स को नए मूल्यों के साथ फिर से प्रस्तुत करेगा| हम बहुत जल्द नए `Calculator` के परिपालन को देखेंगे। +पैरेंट `Calculator` कौम्पोनॅन्ट के द्वारा `onTemperatureChange` prop को `temperature` prop के साथ प्रदान किया जाएगा। यह स्वयं के लोकल state को संशोधित करके परिवर्तन को नियंत्रित करेगा, और इस प्रकार दोनों इनपुट्स को नए मूल्यों के साथ फिर से प्रस्तुत करेगा। हम बहुत जल्द नए `Calculator` के परिपालन को देखेंगे। -आईये `Calculator` में परिवर्तन करने से पहले, `TemperatureInput` कौम्पोनॅन्ट में किये गए परिवर्तनों को याद कर लेते हैं| हमने इसमें से लोकल state को हटा दिया है, और `this.state.temperature` रीड करने के बजाय, हम अब `this.props.temperature` रीड करते हैं| जब हम कोई बदलाव करना चाहते हैं तो `this.setState()` को कॉल करने के बजाय हम अब `this.props.onTemperatureChange()` को कॉल करते हैं, जो `Calculator` प्रदान करता है| +आईये `Calculator` में परिवर्तन करने से पहले, `TemperatureInput` कौम्पोनॅन्ट में किये गए परिवर्तनों को याद कर लेते हैं। हमने इसमें से लोकल state को हटा दिया है, और `this.state.temperature` रीड करने के बजाय, हम अब `this.props.temperature` रीड करते हैं। जब हम कोई बदलाव करना चाहते हैं तो `this.setState()` को कॉल करने के बजाय हम अब `this.props.onTemperatureChange()` को कॉल करते हैं, जो `Calculator` प्रदान करता है। ```js{8,12} class TemperatureInput extends React.Component { @@ -234,7 +234,7 @@ class TemperatureInput extends React.Component { अब `Calculator` कौम्पोनॅन्ट की ओर मुड़ते हैं। -हम वर्तमान इनपुट के `temperature` और `scale` को उसके लोकल state में जमा करेंगे. यह वही state है जिसे हमने इनपुट्स से "ऊपर उठा लिया", और यह उन दोनों के लिए "सत्य का एक स्रोत" के रूप में काम करेगी| यह दोनों इनपुट्स को रेंडर करने के लिए हमारे द्वारा आवश्यक सभी डेटा का न्यूनतम प्रतिनिधित्व है। +हम वर्तमान इनपुट के `temperature` और `scale` को उसके लोकल state में जमा करेंगे। यह वही state है जिसे हमने इनपुट्स से "ऊपर उठा लिया", और यह उन दोनों के लिए "सत्य का एक स्रोत" के रूप में काम करेगी। यह दोनों इनपुट्स को रेंडर करने के लिए हमारे द्वारा आवश्यक सभी डेटा का न्यूनतम प्रतिनिधित्व है। उदाहरण के लिए, यदि हम Celsius इनपुट में 37 दर्ज करते हैं, तो `Calculator` कौम्पोनॅन्ट की state होगी: @@ -254,7 +254,7 @@ class TemperatureInput extends React.Component { } ``` -हम दोनों इनपुट्स की वैल्यू स्टोर कर सकते थे लेकिन यह अनावश्यक है। सबसे हाल ही में बदले गये इनपुट की वैल्यू एवं उसका प्रतिनिधित्व करने वाले scale को ही स्टोर करना पर्याप्त है| तब हम वर्तमान `temperature` और `scale` के आधार पर अन्य इनपुट के वैल्यू का अनुमान लगा सकते हैं| +हम दोनों इनपुट्स की वैल्यू स्टोर कर सकते थे लेकिन यह अनावश्यक है। सबसे हाल ही में बदले गये इनपुट की वैल्यू एवं उसका प्रतिनिधित्व करने वाले scale को ही स्टोर करना पर्याप्त है। तब हम वर्तमान `temperature` और `scale` के आधार पर अन्य इनपुट के वैल्यू का अनुमान लगा सकते हैं। इनपुट्स sync में रहेंगे क्योंकि उनकी वैल्यूज की गणना एक ही state से होगी: @@ -301,29 +301,29 @@ class Calculator extends React.Component { [**इसे CodePen पर आज़माएँ**](https://codepen.io/gaearon/pen/WZpxpz?editors=0010) -अब, कोई फर्क नहीं पड़ता कि आप किस इनपुट को संपादित करते हैं, `Calculator` के `this.state.temperature` और `this.state.scale` अपडेट हो जायेंगे| इनपुट्स में से एक को वैल्यू मिलती है, इसलिए कोई भी user input संरक्षित रहता है, और अन्य इनपुट वैल्यू हमेशा इसके आधार पर पुनर्गणना होता है। +अब, कोई फर्क नहीं पड़ता कि आप किस इनपुट को संपादित करते हैं, `Calculator` के `this.state.temperature` और `this.state.scale` अपडेट हो जायेंगे। इनपुट्स में से एक को वैल्यू मिलती है, इसलिए कोई भी user input संरक्षित रहता है, और अन्य इनपुट वैल्यू हमेशा इसके आधार पर पुनर्गणना होता है। आइये संक्षेप में देखते हैं की एक इनपुट को संपादित करने पर क्या होता है : -* React `onChange` के द्वारा निर्दिष्ट फंक्शन को DOM `` पर कॉल करता है| हमारे लिए, यह `TemperatureInput` कौम्पोनॅन्ट का `handleChange` मेथड है। -* `TemperatureInput` कौम्पोनॅन्ट का `handleChange` मेथड, नए वांछित वैल्यू के साथ `this.props.onTemperChange()` को कॉल करता है| इसके props, जिनमें `onTemperatureChange` शामिल हैं, को इसके पैरेंट कौम्पोनॅन्ट `Calculator` द्वारा प्रदान किया जाता है। -* जब यह पूर्व में रेंडर किया गया था, तो `Calculator` ने निर्दिष्ट किया है कि Celsius `TemperatureInput` का `onTemperatureChange` ही `Calculator` का `handleCelsiusChange` मेथड है, इसी प्रकार Fahrenheit `TemperatureInput` का `onTemperatureChange` ही `Calculator` का `handleFahrenheitChange` मेथड है|इनपुट के सम्पादन के आधार इन दोनों `Calculator` मेथडस में से किसी एक को कॉल किया जाता है| -* इन मेथडस के अंदर, `Calculator` कौम्पोनॅन्ट React से `this.setState()` को कॉल करके, नयी इनपुट वैल्यू एवं वर्तमान scale जिसको हमने बस अभी सम्पादित किया, के साथ फिर से रेंडर होने को कहता है| -* `Calculator` कौम्पोनॅन्ट के `render` मेथड को React कॉल करता है ताकि वह UI कैसा दिखता है यह जान सखे| दोनों इनपुट के वैल्यूज की वर्तमान तापमान और सक्रिय scale के आधार पर पुनर्गणना की जाती है। तापमान रूपांतरण यहां किया जाता है। -* React `Calculator` द्वारा निर्देशित नए props के साथ `TemperatureInput` कौम्पोनॅन्टस के `render` मेथडस को कॉल करता है| +* React `onChange` के द्वारा निर्दिष्ट फंक्शन को DOM `` पर कॉल करता है। हमारे लिए, यह `TemperatureInput` कौम्पोनॅन्ट का `handleChange` मेथड है। +* `TemperatureInput` कौम्पोनॅन्ट का `handleChange` मेथड, नए वांछित वैल्यू के साथ `this.props.onTemperChange()` को कॉल करता है। इसके props, जिनमें `onTemperatureChange` शामिल हैं, को इसके पैरेंट कौम्पोनॅन्ट `Calculator` द्वारा प्रदान किया जाता है। +* जब यह पूर्व में रेंडर किया गया था, तो `Calculator` ने निर्दिष्ट किया है कि Celsius `TemperatureInput` का `onTemperatureChange` ही `Calculator` का `handleCelsiusChange` मेथड है, इसी प्रकार Fahrenheit `TemperatureInput` का `onTemperatureChange` ही `Calculator` का `handleFahrenheitChange` मेथड है। इनपुट के सम्पादन के आधार इन दोनों `Calculator` मेथडस में से किसी एक को कॉल किया जाता है। +* इन मेथडस के अंदर, `Calculator` कौम्पोनॅन्ट React से `this.setState()` को कॉल करके, नयी इनपुट वैल्यू एवं वर्तमान scale जिसको हमने बस अभी सम्पादित किया, के साथ फिर से रेंडर होने को कहता है। +* `Calculator` कौम्पोनॅन्ट के `render` मेथड को React कॉल करता है ताकि वह UI कैसा दिखता है यह जान सखे। दोनों इनपुट के वैल्यूज की वर्तमान तापमान और सक्रिय scale के आधार पर पुनर्गणना की जाती है। तापमान रूपांतरण यहां किया जाता है। +* React `Calculator` द्वारा निर्देशित नए props के साथ `TemperatureInput` कौम्पोनॅन्टस के `render` मेथडस को कॉल करता है। * React DOM, boiling verdict के साथ DOM को अपडेट करता है और वांछित इनपुट वैल्यूज से मेल कराता है। जिस इनपुट को हमने अभी संपादित किया है, वह अपनी वर्तमान वैल्यू प्राप्त करता है, और अन्य इनपुट को रूपांतरण के बाद तापमान में अपडेट किया जाता है। हर अपडेट समान स्टेप्स के माध्यम से जाता है ताकि इनपुट sync में रहें। ## सबक सीखा {#lessons-learned} -React एप्लीकेशन में परिवर्तन करने वाले किसी भी डेटा के लिए "सत्य का एक स्रोत" केवल एक होना चाहिए। आमतौर पर, state को पहले कौम्पोनॅन्ट में जोड़ा जाता है जो इसे रेंडर करने के लिए आवश्यक होता है| फिर, अगर अन्य कौम्पोनॅन्टस को भी इसकी आवश्यकता होती है, तो आप इसे अपने निकटतम सामान्य पूर्वज तक उठा सकते हैं।. अलग-अलग कौम्पोनॅन्टस के बीच state को sync करने की कोशिश करने के बजाय, आपको इस पर भरोसा करना चाहिए [ऊपर से नीचे डेटा प्रवाह](/docs/state-and-lifecycle.html#the-data-flows-down). +React एप्लीकेशन में परिवर्तन करने वाले किसी भी डेटा के लिए "सत्य का एक स्रोत" केवल एक होना चाहिए। आमतौर पर, state को पहले कौम्पोनॅन्ट में जोड़ा जाता है जो इसे रेंडर करने के लिए आवश्यक होता है। फिर, अगर अन्य कौम्पोनॅन्टस को भी इसकी आवश्यकता होती है, तो आप इसे अपने निकटतम सामान्य पूर्वज तक उठा सकते हैं।. अलग-अलग कौम्पोनॅन्टस के बीच state को sync करने की कोशिश करने के बजाय, आपको इस पर भरोसा करना चाहिए [ऊपर से नीचे डेटा प्रवाह](/docs/state-and-lifecycle.html#the-data-flows-down). -state को लिफ्ट करने में दो-तरफ़ा बंधन दृष्टिकोण की तुलना में अधिक "boilerplate" कोड लिखना शामिल है, लेकिन एक लाभ के रूप में, bug को खोजने और अलग करने में कम काम लगता है| चूंकि कोई भी state किसी कौम्पोनॅन्ट में "रहता है" और वह कौम्पोनॅन्ट अकेले इसे बदल सकता है, bug के लिए सतह क्षेत्र बहुत कम हो गया है। इसके अतिरिक्त, आप यूजर इनपुट को अस्वीकार या परिवर्तित करने के लिए कोई भी कस्टम लॉजिक लागू कर सकते हैं। +state को लिफ्ट करने में दो-तरफ़ा बंधन दृष्टिकोण की तुलना में अधिक "boilerplate" कोड लिखना शामिल है, लेकिन एक लाभ के रूप में, bug को खोजने और अलग करने में कम काम लगता है। चूंकि कोई भी state किसी कौम्पोनॅन्ट में "रहता है" और वह कौम्पोनॅन्ट अकेले इसे बदल सकता है, bug के लिए सतह क्षेत्र बहुत कम हो गया है। इसके अतिरिक्त, आप यूजर इनपुट को अस्वीकार या परिवर्तित करने के लिए कोई भी कस्टम लॉजिक लागू कर सकते हैं। -यदि किसी चीज़ को किसी props या state से प्राप्त किया जा सकता है, तो यह संभवतः state में नहीं होना चाहिए। उदाहरण के लिए, दोनों `celsiusValue` और `fahrenheitValue` को स्टोर करने के बजाय, हम केवल अंतिम संपादित `temperature` और इसके `scale` को स्टोर करते हैं| 'render()' मेथड् में उनकी सहायता से अन्य इनपुट की वैल्यू की गणना हमेशा की जा सकती है| यह हमें यूजर इनपुट में कोई भी सटीकता खोए बिना दूसरे फील्ड में राउंडिंग को हटाने या लागू करने देता है। +यदि किसी चीज़ को किसी props या state से प्राप्त किया जा सकता है, तो यह संभवतः state में नहीं होना चाहिए। उदाहरण के लिए, दोनों `celsiusValue` और `fahrenheitValue` को स्टोर करने के बजाय, हम केवल अंतिम संपादित `temperature` और इसके `scale` को स्टोर करते हैं। 'render()' मेथड् में उनकी सहायता से अन्य इनपुट की वैल्यू की गणना हमेशा की जा सकती है। यह हमें यूजर इनपुट में कोई भी सटीकता खोए बिना दूसरे फील्ड में राउंडिंग को हटाने या लागू करने देता है। -जब आप UI में कुछ गलत देखते हैं, तो आप उपयोग कर सकते हैं [React Developer Tools](https://github.com/facebook/react-devtools) props का निरीक्षण करने और पेड़ के ऊपर चढ़ने के लिए जब तक कि आप कौम्पोनॅन्ट को state अपडेट करने के लिए जिम्मेदार नहीं पाते| यह आपको bugs के स्रोत का पता लगाने देता है: +जब आप UI में कुछ गलत देखते हैं, तो आप उपयोग कर सकते हैं [React Developer Tools](https://github.com/facebook/react-devtools) props का निरीक्षण करने और पेड़ के ऊपर चढ़ने के लिए जब तक कि आप कौम्पोनॅन्ट को state अपडेट करने के लिए जिम्मेदार नहीं पाते। यह आपको bugs के स्रोत का पता लगाने देता है: Monitoring State in React DevTools From b306b981ea8bd05c2c0b4e50f06d175849ae7047 Mon Sep 17 00:00:00 2001 From: Sambhav Sacheti Date: Thu, 25 Apr 2019 10:25:24 +0100 Subject: [PATCH 12/14] changes as suggested by saransh till line 171 --- content/docs/lifting-state-up.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/docs/lifting-state-up.md b/content/docs/lifting-state-up.md index 7e66223ee..7ce3ab5b9 100644 --- a/content/docs/lifting-state-up.md +++ b/content/docs/lifting-state-up.md @@ -26,7 +26,7 @@ function BoilingVerdict(props) { इसके बाद, हम 'Calculator' नामक एक कौम्पोनॅन्ट बनाएंगे। यह एक `` रेंडर करेगा, जिसमे आप तापमान दर्ज कर सकते हैं, जिसकी value `this.state.temperature` में रहेगी। -इसके अतिरिक्त, यह वर्तमान इनपुट मूल्य के लिए `BoilingVerdict` रेंडर कर देता है। +इसके अतिरिक्त, यह वर्तमान इनपुट मूल्य के लिए `BoilingVerdict` को रेंडर करेगा। ```js{5,9,13,17-21} class Calculator extends React.Component { @@ -118,7 +118,7 @@ class Calculator extends React.Component { ## कन्वर्शन फंक्शन्स लिखना {#writing-conversion-functions} -सबसे पहले, हम दो फंक्शन्स लिखेंगे। Celsius से Fahrenheit और वापस Fahrenheit से Celsius में बदलने के लिए: +सबसे पहले, हम दो फंक्शन्स लिखेंगे, Celsius से Fahrenheit और वापस Fahrenheit से Celsius में बदलने के लिए: ```js function toCelsius(fahrenheit) { @@ -130,9 +130,9 @@ function toFahrenheit(celsius) { } ``` -यह दो फंक्शन्स संख्याओं को परिवर्तित करते हैं।हम एक और फ़ंक्शन लिखेंगे जो एक स्ट्रिंग `temperature` और एक कनवर्टर फ़ंक्शन को आर्गुमेंट के रूप में लेता है और एक स्ट्रिंग वापिस देता है। हम इसका उपयोग एक इनपुट के आधार पर दूसरे इनपुट की गणना करने के लिए करेंगे। +यह दो फंक्शन्स संख्याओं को परिवर्तित करते हैं। हम एक और फ़ंक्शन लिखेंगे जो एक स्ट्रिंग `temperature` और एक कनवर्टर फ़ंक्शन को आर्गुमेंट के रूप में लेता है और एक स्ट्रिंग वापिस देता है। हम इसका उपयोग एक इनपुट के आधार पर दूसरे इनपुट की गणना करने के लिए करेंगे। -यह अमान्य `temperature` पर एक खाली स्ट्रिंग देता है, और यह आउटपुट को तीसरे दशमलव स्थान तक रखता है: +यह अमान्य `temperature` पर एक खाली स्ट्रिंग देता है, और यह आउटपुट को तीसरे दशमलव स्थान तक सीमित रखता है: ```js function tryConvert(temperature, convert) { @@ -146,9 +146,9 @@ function tryConvert(temperature, convert) { } ``` -उदाहरण के लिए, `tryConvert('abc', toCelsius)` एक खाली स्ट्रिंग लौटाता है, और `tryConvert('10.22', toFahrenheit)` लौटाता है `'50.396'`। +उदाहरण के लिए, `tryConvert('abc', toCelsius)` एक खाली स्ट्रिंग लौटाता है, और `tryConvert('10.22', toFahrenheit)` `'50.396'` लौटाता है। -## स्टेट को ऊपर लेजाना {#lifting-state-up} +## लिफ्टिंग स्टेट अप {#lifting-state-up} वर्तमान में, दोनों `TemperatureInput` कौम्पोनॅन्टस अपनी लोकल स्टेट को स्वतंत्र रूप में बनाये रखते हैं: From ad2a3798c876264bf9a48e40e26a5808599cb26c Mon Sep 17 00:00:00 2001 From: Sambhav Sacheti Date: Tue, 2 Jul 2019 10:23:36 +0100 Subject: [PATCH 13/14] updated until 202 as per comment --- content/docs/lifting-state-up.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/lifting-state-up.md b/content/docs/lifting-state-up.md index 7ce3ab5b9..a9b8cf405 100644 --- a/content/docs/lifting-state-up.md +++ b/content/docs/lifting-state-up.md @@ -169,9 +169,9 @@ class TemperatureInput extends React.Component { // ... ``` -हालाँकि, हम चाहते हैं कि ये दोनों इनपुट एक दूसरे के sync में रहें। जब हम Celsius इनपुट को अपडेट करें, तो Fahrenheit इनपुट अपडेट हो और इसके विपरीत भी प्रतिबिंबित होना चाहिए। +हालाँकि, हम चाहते हैं कि ये दोनों इनपुट एक दूसरे के sync में रहें। जब हम Celsius इनपुट को अपडेट करें, तो Fahrenheit इनपुट अपडेट हो और इसके विपरीत भी रिफ्लेक्ट होना चाहिए। -React में, state साझाकरण का कार्य उसे कौम्पोनॅन्टस के निकटतम सामान्य पूर्वज तक ले जाकर पूरा किया जाता है। यह "लिफ्टिंग स्टेट अप" कहलाता है। हम लोकल स्टेट को `TemperatureInput` से हटा देंगे एवं `Calculator` में ले जायेंगे। +React में, state साझा करने का कार्य उसे कौम्पोनॅन्टस के निकटतम सामान्य पूर्वज तक ले जाकर पूरा किया जाता है। यह "लिफ्टिंग स्टेट अप" कहलाता है। हम लोकल स्टेट को `TemperatureInput` से हटा देंगे एवं `Calculator` में ले जायेंगे। यदि साझा स्टेट का मालिक `Calculator` हे, तो वह दोनों इन्पुट्स में वर्तमान तापमान के लिए "सत्य का स्रोत" बन जाता है। यह उन दोनों को एक दूसरे के अनुरूप वैल्यूज रखने का निर्देश दे सकता है। चूंकि दोनों `TemperatureInput` कौम्पोनॅन्टस के props एक ही `Calculator` पैरेंट कौम्पोनॅन्ट से हैं, यह दोनों हमेशा sync में रहेंगे। @@ -186,9 +186,9 @@ React में, state साझाकरण का कार्य उसे // ... ``` -हम जानते हैं कि [props केवल-पढ़ने के लिए हैं](/docs/components-and-props.html#props-are-read-only). जब `temperature` लोकल state में है, तो `TemperatureInput` इसे बदलने के लिए `this.setState()` को कॉल कर सकता है। हालाँकि, अब `temperature` अपने पैरेंट से prop बनकर आ रहा है, `TemperatureInput' का इस पर कोई नियंत्रण नहीं है। +हम जानते हैं कि [props read-only हैं](/docs/components-and-props.html#props-are-read-only). जब `temperature` लोकल state में था, तो `TemperatureInput` इसे बदलने के लिए `this.setState()` को कॉल कर सकता था। हालाँकि, अब `temperature` अपने पैरेंट से prop बनकर आ रहा है, `TemperatureInput' का इस पर कोई नियंत्रण नहीं होगा। -React में, यह मसला आमतौर पर कौम्पोनॅन्ट को "नियंत्रित" बनाकर हल किया जाता है। जैसे DOM ``, `value` एवं `onChange` prop दोनों को स्वीकार करता है, ठीक वैसे ही, `TemperatureInput` दोनों `temperature` एवं `onTemperatureChange` props को उसके पैरेंट `Calculator` से स्वीकार करता है। +React में, यह मसला आमतौर पर कौम्पोनॅन्ट को "controlled" बनाकर हल किया जाता है। जैसे DOM ``, `value` एवं `onChange` prop दोनों को स्वीकार करता है, ठीक वैसे ही, `TemperatureInput` दोनों `temperature` एवं `onTemperatureChange` props को उसके पैरेंट `Calculator` से स्वीकार करेगा। अब, जब `TemperatureInput` अपने तापमान को अपडेट करना चाहेगा, तो वह `this.props.onTemperatureChange` को कॉल करेगा: From 7372416fa5a73e588383a0c2c1ebb68cb94338ad Mon Sep 17 00:00:00 2001 From: sambhav Date: Mon, 21 Oct 2019 21:55:55 +0100 Subject: [PATCH 14/14] until 259 --- content/docs/lifting-state-up.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/content/docs/lifting-state-up.md b/content/docs/lifting-state-up.md index a9b8cf405..7c3386754 100644 --- a/content/docs/lifting-state-up.md +++ b/content/docs/lifting-state-up.md @@ -203,9 +203,9 @@ React में, यह मसला आमतौर पर कौम्पो > >कस्टम कौम्पोनॅन्टस में `temperature` या `onTemperatureChange` prop नामों का कोई विशेष अर्थ नहीं है। हम उन्हें और कुछ भी कह सकते थे, जैसे कि `value` और `onChange` जो एक आम परंपरा है। -पैरेंट `Calculator` कौम्पोनॅन्ट के द्वारा `onTemperatureChange` prop को `temperature` prop के साथ प्रदान किया जाएगा। यह स्वयं के लोकल state को संशोधित करके परिवर्तन को नियंत्रित करेगा, और इस प्रकार दोनों इनपुट्स को नए मूल्यों के साथ फिर से प्रस्तुत करेगा। हम बहुत जल्द नए `Calculator` के परिपालन को देखेंगे। +पैरेंट `Calculator` कौम्पोनॅन्ट के द्वारा `onTemperatureChange` prop को `temperature` prop के साथ प्रदान किया जाएगा। वह अपने लोकल state में बदलाव के द्वारा इस परिवर्तन को नियंत्रित करेगा, और इस प्रकार दोनों इनपुट्स को नए मूल्यों के साथ फिर से प्रस्तुत करेगा। हम बहुत जल्द नए `Calculator` के इम्प्लीमेंटेशन को देखेंगे। -आईये `Calculator` में परिवर्तन करने से पहले, `TemperatureInput` कौम्पोनॅन्ट में किये गए परिवर्तनों को याद कर लेते हैं। हमने इसमें से लोकल state को हटा दिया है, और `this.state.temperature` रीड करने के बजाय, हम अब `this.props.temperature` रीड करते हैं। जब हम कोई बदलाव करना चाहते हैं तो `this.setState()` को कॉल करने के बजाय हम अब `this.props.onTemperatureChange()` को कॉल करते हैं, जो `Calculator` प्रदान करता है। +आईये `Calculator` में परिवर्तन करने से पहले, `TemperatureInput` कौम्पोनॅन्ट में किये गए परिवर्तनों को संक्षेप में दोहरातें हैं। हमने इसमें से लोकल state को हटा दिया है, और `this.state.temperature` रीड करने के बजाय, हम अब `this.props.temperature` रीड करते हैं। जब हम कोई बदलाव करना चाहते हैं तो `this.setState()` को कॉल करने के बजाय हम अब `this.props.onTemperatureChange()` को कॉल करते हैं, जो `Calculator` उपलब्ध कराता है। ```js{8,12} class TemperatureInput extends React.Component { @@ -234,7 +234,7 @@ class TemperatureInput extends React.Component { अब `Calculator` कौम्पोनॅन्ट की ओर मुड़ते हैं। -हम वर्तमान इनपुट के `temperature` और `scale` को उसके लोकल state में जमा करेंगे। यह वही state है जिसे हमने इनपुट्स से "ऊपर उठा लिया", और यह उन दोनों के लिए "सत्य का एक स्रोत" के रूप में काम करेगी। यह दोनों इनपुट्स को रेंडर करने के लिए हमारे द्वारा आवश्यक सभी डेटा का न्यूनतम प्रतिनिधित्व है। +हम वर्तमान इनपुट के `temperature` और `scale` को उसके लोकल state में स्टोर करेंगे। यह वही state है जिसे हमने इनपुट्स से "ऊपर उठा लिया था", और यह उन दोनों के लिए "सत्य के स्रोत" के रूप में काम करेगी। यह उन सभी डेटा का न्यूनतम प्रतिनिधित्व है जिन्हें हमें जानना आवश्यक है, दोनों इनपुट को रेंडर करने के लिए| उदाहरण के लिए, यदि हम Celsius इनपुट में 37 दर्ज करते हैं, तो `Calculator` कौम्पोनॅन्ट की state होगी: @@ -254,9 +254,9 @@ class TemperatureInput extends React.Component { } ``` -हम दोनों इनपुट्स की वैल्यू स्टोर कर सकते थे लेकिन यह अनावश्यक है। सबसे हाल ही में बदले गये इनपुट की वैल्यू एवं उसका प्रतिनिधित्व करने वाले scale को ही स्टोर करना पर्याप्त है। तब हम वर्तमान `temperature` और `scale` के आधार पर अन्य इनपुट के वैल्यू का अनुमान लगा सकते हैं। +हम दोनों इनपुट्स की वैल्यू स्टोर कर सकते थे लेकिन यह अनावश्यक है। सबसे हाल ही में बदले गये इनपुट की वैल्यू एवं उसका प्रतिनिधित्व करने वाले scale को ही स्टोर करना पर्याप्त है। तब हम वर्तमान `temperature` और `scale` के आधार पर अन्य इनपुट की वैल्यू को निकाल सकते हैं। -इनपुट्स sync में रहेंगे क्योंकि उनकी वैल्यूज की गणना एक ही state से होगी: +इनपुट्स sync में रहेंगे क्योंकि उनकी वैल्यूज की गणना एक ही state से हो रही है: ```js{6,10,14,18-21,27-28,31-32,34} class Calculator extends React.Component { @@ -321,9 +321,9 @@ React एप्लीकेशन में परिवर्तन करन state को लिफ्ट करने में दो-तरफ़ा बंधन दृष्टिकोण की तुलना में अधिक "boilerplate" कोड लिखना शामिल है, लेकिन एक लाभ के रूप में, bug को खोजने और अलग करने में कम काम लगता है। चूंकि कोई भी state किसी कौम्पोनॅन्ट में "रहता है" और वह कौम्पोनॅन्ट अकेले इसे बदल सकता है, bug के लिए सतह क्षेत्र बहुत कम हो गया है। इसके अतिरिक्त, आप यूजर इनपुट को अस्वीकार या परिवर्तित करने के लिए कोई भी कस्टम लॉजिक लागू कर सकते हैं। -यदि किसी चीज़ को किसी props या state से प्राप्त किया जा सकता है, तो यह संभवतः state में नहीं होना चाहिए। उदाहरण के लिए, दोनों `celsiusValue` और `fahrenheitValue` को स्टोर करने के बजाय, हम केवल अंतिम संपादित `temperature` और इसके `scale` को स्टोर करते हैं। 'render()' मेथड् में उनकी सहायता से अन्य इनपुट की वैल्यू की गणना हमेशा की जा सकती है। यह हमें यूजर इनपुट में कोई भी सटीकता खोए बिना दूसरे फील्ड में राउंडिंग को हटाने या लागू करने देता है। +यदि किसी को props या state के द्वारा प्राप्त किया जा सकता है, तो यह संभवतः state में नहीं होना चाहिए। उदाहरण के लिए, दोनों `celsiusValue` और `fahrenheitValue` को स्टोर करने के बजाय, हम केवल अंतिम संपादित `temperature` और इसके `scale` को स्टोर करते हैं। 'render()' मेथड् में उनकी सहायता से अन्य इनपुट की वैल्यू की गणना हमेशा की जा सकती है। यह हमें यूजर इनपुट में कोई भी सटीकता खोए बिना दूसरे फील्ड में राउंडिंग को हटाने या लागू करने देता है। -जब आप UI में कुछ गलत देखते हैं, तो आप उपयोग कर सकते हैं [React Developer Tools](https://github.com/facebook/react-devtools) props का निरीक्षण करने और पेड़ के ऊपर चढ़ने के लिए जब तक कि आप कौम्पोनॅन्ट को state अपडेट करने के लिए जिम्मेदार नहीं पाते। यह आपको bugs के स्रोत का पता लगाने देता है: +जब आप UI में कुछ गलत देखते हैं, तब आप उपयोग कर सकते हैं [React Developer Tools](https://github.com/facebook/react-devtools) props का निरीक्षण करने और पेड़ के ऊपर चढ़ने के लिए जब तक कि आप कौम्पोनॅन्ट को state अपडेट करने के लिए जिम्मेदार नहीं पाते। यह आपको bugs के स्रोत का पता लगाने देता है: Monitoring State in React DevTools