From d94a1843468f644e65f4acee7fe1bb722bc98b82 Mon Sep 17 00:00:00 2001 From: saranshkataria Date: Sat, 6 Jul 2019 19:47:54 -0700 Subject: [PATCH 1/4] updating rendering elements from #21 --- content/docs/rendering-elements.md | 49 +++++++++++++++--------------- 1 file changed, 25 insertions(+), 24 deletions(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 34bb62b7c..5c3f45f75 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -8,68 +8,69 @@ prev: introducing-jsx.html next: components-and-props.html --- -Elements are the smallest building blocks of React apps. +एलिमेंट्स रिएक्ट ऐप्स के सबसे छोटे बिल्डिंग ब्लॉक हैं। -An element describes what you want to see on the screen: +एक एलिमेंट वर्णन करता है कि आप स्क्रीन पर क्या देखना चाहते हैं: ```js const element =

Hello, world

; ``` -Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements. +ब्राउज़र DOM एलेमेंट्स के विपरीत, React एलेमेंट्स प्लेन ऑब्जेक्ट है और इन्हें बनाना आसान है। React DOM React एलेमेंट्स के अनुसार DOM को अपडेट रखता है। ->**Note:** +>**ध्यान दें:** > ->One might confuse elements with a more widely known concept of "components". We will introduce components in the [next section](/docs/components-and-props.html). Elements are what components are "made of", and we encourage you to read this section before jumping ahead. +> आप एलेमेंट्स को बहुचर्चित "कौम्पोनॅन्टस" समझ कर भ्रमित हो सकते है, हम कौम्पोनॅन्टस के बारे में [अगले भाग](/docs/components-and-props.html) में बतायेंगे। एलेमेंट्स वो है जिनका उपयोग करके एक कौम्पोनॅन्ट को बनाया जाता। आगे बढ़ने से पहले इस भाग को पड़ने की सलाह देते हैं। -## Rendering an Element into the DOM {#rendering-an-element-into-the-dom} +## DOM में एक एलिमेंट रेंडर करना {#rendering-an-element-into-the-dom} -Let's say there is a `
` somewhere in your HTML file: +मान लीजिए की आपकी HTML फ़ाइल में कहीं एक `
` है: ```html
``` -We call this a "root" DOM node because everything inside it will be managed by React DOM. +हम इसे "रूट" DOM नोड कहते है क्यूँकि इसके अंदर की सारी चीज़ें React DOM के द्वारा संचालित होगी। -Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like. -To render a React element into a root DOM node, pass both to `ReactDOM.render()`: +React के उपयोग से बने ज़्यादातर ऐप्लिकेशन में एक ही रूट DOM नोड होता है। परंतु यदि आप React को किसी पहले से बने हुए app में उपयोग करना चाहते है तो आप कितने भी अलग अलग रूट DOM नोड बना सकते है। + +एक React एलेमेंट्स को DOM नोड में दर्शाने के लिए, आपको इन दोनो को `ReactDOM.render()` में भेजना पड़ेगा: `embed:rendering-elements/render-an-element.js` [](codepen://rendering-elements/render-an-element) -It displays "Hello, world" on the page. +ये "Hello world" को पेज पर दर्शाता है -## Updating the Rendered Element {#updating-the-rendered-element} +## पहले से बने एलेमेंट को अपडेट करना {#updating-the-rendered-element} -React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object). Once you create an element, you can't change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time. +React एलेमेंट्स [अचल](https://en.wikipedia.org/wiki/Immutable_object) होते है। एक बार एलेमेंट के बनने के बाद, आप उसके चिल्ड्रन या ऐट्रिब्यूट्स में परिवर्तन नहीं कर सकते। एक एलेमेंट एक चलचित्र के एक दृश्य के समान है, ये UI को एक निश्चित समय के लिए दर्शाता है। -With our knowledge so far, the only way to update the UI is to create a new element, and pass it to `ReactDOM.render()`. +हमारे अब तक के ज्ञान के अनुसार, UI में परिवर्तन करने का एक ही तरीक़ा है। इसके लिए हमें एक नया एलेमेंट बना कर उसे `ReactDOM.render()` को भेजना पड़ेगा। -Consider this ticking clock example: +इस टिकिंग घड़ी उदाहरण पर विचार करें: `embed:rendering-elements/update-rendered-element.js` [](codepen://rendering-elements/update-rendered-element) -It calls `ReactDOM.render()` every second from a [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback. +ये `ReactDOM.render()` को प्रत्येक सेकंड [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback से कॉल करता है। ->**Note:** +>**ध्यान दें:** > ->In practice, most React apps only call `ReactDOM.render()` once. In the next sections we will learn how such code gets encapsulated into [stateful components](/docs/state-and-lifecycle.html). +>व्यवहार में, ज़्यादातर React apps `ReactDOM.render()` को एक ही बार कॉल करते है। अगले भाग में हम ये सीखेंगे कि कैसे इस तरह के कोड को [stateful components](/docs/state-and-lifecycle.html) में एन्काप्सुलेट करते है। > ->We recommend that you don't skip topics because they build on each other. +>हम अनुशंसा करते हैं कि आप विषयों को छोड़ें नहीं क्योंकि वे एक-दूसरे पर निर्माण करते हैं। -## React Only Updates What's Necessary {#react-only-updates-whats-necessary} +## React वही अपडेट करता है जो आवश्यक है {#react-only-updates-whats-necessary} -React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state. +React, DOM एलेमेंट्स और उसके चिल्डरेंस की तुलना उसके पहले की अवस्था से करता है और केवल उन्ही चीज़ों में परिवर्तन करता जिससे की DOM अपने चाहे state में आ जाए। -You can verify by inspecting the [last example](codepen://rendering-elements/update-rendered-element) with the browser tools: +आप ब्राउज़र टूलस की सहायता से [अंतिम उदाहरण](codepen://rendering-elements/update-rendered-element) का निरीक्षण करके सत्यापित कर सकते हैं: ![DOM inspector showing granular updates](../images/docs/granular-dom-updates.gif) -Even though we create an element describing the whole UI tree on every tick, only the text node whose contents has changed gets updated by React DOM. +भले ही हम हर टिक पर पूरे UI ट्री का वर्णन करने वाला एक एलेमेंट बनाते हैं, लेकिन केवल Text नोड जिसकी सामग्री बदल गई है वह React DOM द्वारा अपडेट हो जाता है। -In our experience, thinking about how the UI should look at any given moment rather than how to change it over time eliminates a whole class of bugs. +हमारे अनुभव से, UI को कैसे अप्डेट करना है के बिपरीत यदि हम ये सोचे की UI को किसी समय कैसे दिखाना है तो हम बहुत सारी बग से बच सकते है। From c51699c9eb712030564aceb3e6626b4e59d1b476 Mon Sep 17 00:00:00 2001 From: saranshkataria Date: Sat, 6 Jul 2019 19:52:11 -0700 Subject: [PATCH 2/4] fixed changes --- content/docs/rendering-elements.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 5c3f45f75..6426dfca0 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -16,38 +16,38 @@ next: components-and-props.html const element =

Hello, world

; ``` -ब्राउज़र DOM एलेमेंट्स के विपरीत, React एलेमेंट्स प्लेन ऑब्जेक्ट है और इन्हें बनाना आसान है। React DOM React एलेमेंट्स के अनुसार DOM को अपडेट रखता है। +ब्राउज़र DOM एलेमेंट्स के विपरीत, React एलेमेंट्स प्लेन ऑब्जेक्ट है और इन्हें बनाना आसान है। React DOM React एलेमेंट्स के अनुसार DOM को अपडेट रखता है। >**ध्यान दें:** > -> आप एलेमेंट्स को बहुचर्चित "कौम्पोनॅन्टस" समझ कर भ्रमित हो सकते है, हम कौम्पोनॅन्टस के बारे में [अगले भाग](/docs/components-and-props.html) में बतायेंगे। एलेमेंट्स वो है जिनका उपयोग करके एक कौम्पोनॅन्ट को बनाया जाता। आगे बढ़ने से पहले इस भाग को पड़ने की सलाह देते हैं। +> आप एलेमेंट्स को बहुचर्चित "कौम्पोनॅन्टस" समझ कर भ्रमित हो सकते है, हम कौम्पोनॅन्टस के बारे में [अगले भाग](/docs/components-and-props.html) में बतायेंगे। एलेमेंट्स वो है जिनका उपयोग करके एक कौम्पोनॅन्ट को बनाया जाता है। आगे बढ़ने से पहले हम इस भाग को पड़ने की सलाह देते हैं। ## DOM में एक एलिमेंट रेंडर करना {#rendering-an-element-into-the-dom} -मान लीजिए की आपकी HTML फ़ाइल में कहीं एक `
` है: +मान लीजिए की आपकी HTML फ़ाइल में कहीं एक `
` है: ```html
``` -हम इसे "रूट" DOM नोड कहते है क्यूँकि इसके अंदर की सारी चीज़ें React DOM के द्वारा संचालित होगी। +हम इसे "रूट" DOM नोड कहते है क्यूँकि इसके अंदर की सारी चीज़ें React DOM के द्वारा संचालित होगी। -React के उपयोग से बने ज़्यादातर ऐप्लिकेशन में एक ही रूट DOM नोड होता है। परंतु यदि आप React को किसी पहले से बने हुए app में उपयोग करना चाहते है तो आप कितने भी अलग अलग रूट DOM नोड बना सकते है। +React के उपयोग से बने ज़्यादातर ऐप्लिकेशन में एक ही रूट DOM नोड होता है। परंतु यदि आप React को किसी पहले से बने हुए app में उपयोग करना चाहते है तो आप कितने भी अलग अलग रूट DOM नोड बना सकते है। -एक React एलेमेंट्स को DOM नोड में दर्शाने के लिए, आपको इन दोनो को `ReactDOM.render()` में भेजना पड़ेगा: +एक React एलेमेंट्स को DOM नोड में दर्शाने के लिए, आपको इन दोनो को `ReactDOM.render()` में भेजना पड़ेगा: `embed:rendering-elements/render-an-element.js` [](codepen://rendering-elements/render-an-element) -ये "Hello world" को पेज पर दर्शाता है +ये "Hello world" को पेज पर दर्शाता है। -## पहले से बने एलेमेंट को अपडेट करना {#updating-the-rendered-element} +## पहले से बने एलेमेंट को अपडेट करना {#updating-the-rendered-element} -React एलेमेंट्स [अचल](https://en.wikipedia.org/wiki/Immutable_object) होते है। एक बार एलेमेंट के बनने के बाद, आप उसके चिल्ड्रन या ऐट्रिब्यूट्स में परिवर्तन नहीं कर सकते। एक एलेमेंट एक चलचित्र के एक दृश्य के समान है, ये UI को एक निश्चित समय के लिए दर्शाता है। +React एलेमेंट्स [अचल](https://en.wikipedia.org/wiki/Immutable_object) होते है। एक बार एलेमेंट के बनने के बाद, आप उसके चिल्ड्रन या ऐट्रिब्यूट्स में परिवर्तन नहीं कर सकते। एक एलेमेंट एक चलचित्र के एक दृश्य के समान है, ये UI को एक निश्चित समय के लिए दर्शाता है। -हमारे अब तक के ज्ञान के अनुसार, UI में परिवर्तन करने का एक ही तरीक़ा है। इसके लिए हमें एक नया एलेमेंट बना कर उसे `ReactDOM.render()` को भेजना पड़ेगा। +हमारे अब तक के ज्ञान के अनुसार, UI में परिवर्तन करने का एक ही तरीक़ा है। इसके लिए हमें एक नया एलेमेंट बना कर उसे `ReactDOM.render()` को भेजना पड़ेगा। इस टिकिंग घड़ी उदाहरण पर विचार करें: @@ -55,7 +55,7 @@ React एलेमेंट्स [अचल](https://en.wikipedia.org/wiki/Immu [](codepen://rendering-elements/update-rendered-element) -ये `ReactDOM.render()` को प्रत्येक सेकंड [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback से कॉल करता है। +ये `ReactDOM.render()` को प्रत्येक सेकंड [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback से कॉल करता है। >**ध्यान दें:** > @@ -63,9 +63,9 @@ React एलेमेंट्स [अचल](https://en.wikipedia.org/wiki/Immu > >हम अनुशंसा करते हैं कि आप विषयों को छोड़ें नहीं क्योंकि वे एक-दूसरे पर निर्माण करते हैं। -## React वही अपडेट करता है जो आवश्यक है {#react-only-updates-whats-necessary} +## React वही अपडेट करता है जो आवश्यक है {#react-only-updates-whats-necessary} -React, DOM एलेमेंट्स और उसके चिल्डरेंस की तुलना उसके पहले की अवस्था से करता है और केवल उन्ही चीज़ों में परिवर्तन करता जिससे की DOM अपने चाहे state में आ जाए। +React, DOM एलेमेंट्स और उसके चिल्डरेंस की तुलना उसके पहले की अवस्था से करता है और केवल उन्ही चीज़ों में परिवर्तन करता जिससे की DOM अपने चाहे state में आ जाए। आप ब्राउज़र टूलस की सहायता से [अंतिम उदाहरण](codepen://rendering-elements/update-rendered-element) का निरीक्षण करके सत्यापित कर सकते हैं: From 350089a188aac9f4c11512b5a7eeb4def7a5ae92 Mon Sep 17 00:00:00 2001 From: Saransh Kataria Date: Sun, 7 Jul 2019 10:19:18 -0700 Subject: [PATCH 3/4] updated spelling mistake --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 6426dfca0..e71147306 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -16,7 +16,7 @@ next: components-and-props.html const element =

Hello, world

; ``` -ब्राउज़र DOM एलेमेंट्स के विपरीत, React एलेमेंट्स प्लेन ऑब्जेक्ट है और इन्हें बनाना आसान है। React DOM React एलेमेंट्स के अनुसार DOM को अपडेट रखता है। +ब्राउज़र DOM एलिमेंट्स के विपरीत, React एलेमेंट्स प्लेन ऑब्जेक्ट है और इन्हें बनाना आसान है। React DOM React एलेमेंट्स के अनुसार DOM को अपडेट रखता है। >**ध्यान दें:** > From 8f1bf9120e332e8d533f64bc9f2155994ed34956 Mon Sep 17 00:00:00 2001 From: saranshkataria Date: Sun, 7 Jul 2019 18:52:49 -0700 Subject: [PATCH 4/4] fixed typos --- content/docs/rendering-elements.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index e71147306..191c1ab7b 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -16,11 +16,11 @@ next: components-and-props.html const element =

Hello, world

; ``` -ब्राउज़र DOM एलिमेंट्स के विपरीत, React एलेमेंट्स प्लेन ऑब्जेक्ट है और इन्हें बनाना आसान है। React DOM React एलेमेंट्स के अनुसार DOM को अपडेट रखता है। +ब्राउज़र DOM एलिमेंट्स के विपरीत, React एलिमेंट्स प्लेन ऑब्जेक्ट है और इन्हें बनाना आसान है। React DOM React एलिमेंट्स के अनुसार DOM को अपडेट रखता है। >**ध्यान दें:** > -> आप एलेमेंट्स को बहुचर्चित "कौम्पोनॅन्टस" समझ कर भ्रमित हो सकते है, हम कौम्पोनॅन्टस के बारे में [अगले भाग](/docs/components-and-props.html) में बतायेंगे। एलेमेंट्स वो है जिनका उपयोग करके एक कौम्पोनॅन्ट को बनाया जाता है। आगे बढ़ने से पहले हम इस भाग को पड़ने की सलाह देते हैं। +> आप एलिमेंट्स को बहुचर्चित "कौम्पोनॅन्टस" समझ कर भ्रमित हो सकते है, हम कौम्पोनॅन्टस के बारे में [अगले भाग](/docs/components-and-props.html) में बतायेंगे। एलिमेंट्स वो है जिनका उपयोग करके एक कौम्पोनॅन्ट को बनाया जाता है। आगे बढ़ने से पहले हम इस भाग को पड़ने की सलाह देते हैं। ## DOM में एक एलिमेंट रेंडर करना {#rendering-an-element-into-the-dom} @@ -35,7 +35,7 @@ const element =

Hello, world

; React के उपयोग से बने ज़्यादातर ऐप्लिकेशन में एक ही रूट DOM नोड होता है। परंतु यदि आप React को किसी पहले से बने हुए app में उपयोग करना चाहते है तो आप कितने भी अलग अलग रूट DOM नोड बना सकते है। -एक React एलेमेंट्स को DOM नोड में दर्शाने के लिए, आपको इन दोनो को `ReactDOM.render()` में भेजना पड़ेगा: +एक React एलिमेंट्स को DOM नोड में दर्शाने के लिए, आपको इन दोनो को `ReactDOM.render()` में भेजना पड़ेगा: `embed:rendering-elements/render-an-element.js` @@ -45,7 +45,7 @@ React के उपयोग से बने ज़्यादातर ऐप ## पहले से बने एलेमेंट को अपडेट करना {#updating-the-rendered-element} -React एलेमेंट्स [अचल](https://en.wikipedia.org/wiki/Immutable_object) होते है। एक बार एलेमेंट के बनने के बाद, आप उसके चिल्ड्रन या ऐट्रिब्यूट्स में परिवर्तन नहीं कर सकते। एक एलेमेंट एक चलचित्र के एक दृश्य के समान है, ये UI को एक निश्चित समय के लिए दर्शाता है। +React एलिमेंट्स [अचल](https://en.wikipedia.org/wiki/Immutable_object) होते है। एक बार एलेमेंट के बनने के बाद, आप उसके चिल्ड्रन या ऐट्रिब्यूट्स में परिवर्तन नहीं कर सकते। एक एलेमेंट एक चलचित्र के एक दृश्य के समान है, ये UI को एक निश्चित समय के लिए दर्शाता है। हमारे अब तक के ज्ञान के अनुसार, UI में परिवर्तन करने का एक ही तरीक़ा है। इसके लिए हमें एक नया एलेमेंट बना कर उसे `ReactDOM.render()` को भेजना पड़ेगा। @@ -65,7 +65,7 @@ React एलेमेंट्स [अचल](https://en.wikipedia.org/wiki/Immu ## React वही अपडेट करता है जो आवश्यक है {#react-only-updates-whats-necessary} -React, DOM एलेमेंट्स और उसके चिल्डरेंस की तुलना उसके पहले की अवस्था से करता है और केवल उन्ही चीज़ों में परिवर्तन करता जिससे की DOM अपने चाहे state में आ जाए। +React, DOM एलिमेंट्स और उसके चिल्डरेंस की तुलना उसके पहले की अवस्था से करता है और केवल उन्ही चीज़ों में परिवर्तन करता जिससे की DOM अपने चाहे state में आ जाए। आप ब्राउज़र टूलस की सहायता से [अंतिम उदाहरण](codepen://rendering-elements/update-rendered-element) का निरीक्षण करके सत्यापित कर सकते हैं: