Skip to content

Commit b1791cb

Browse files
Merge pull request #41 from saranshkataria/master
updating rendering elements from #21
2 parents 056c765 + 8f1bf91 commit b1791cb

File tree

1 file changed

+25
-24
lines changed

1 file changed

+25
-24
lines changed

content/docs/rendering-elements.md

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -8,68 +8,69 @@ prev: introducing-jsx.html
88
next: components-and-props.html
99
---
1010

11-
Elements are the smallest building blocks of React apps.
11+
एलिमेंट्स रिएक्ट ऐप्स के सबसे छोटे बिल्डिंग ब्लॉक हैं।
1212

13-
An element describes what you want to see on the screen:
13+
एक एलिमेंट वर्णन करता है कि आप स्क्रीन पर क्या देखना चाहते हैं:
1414

1515
```js
1616
const element = <h1>Hello, world</h1>;
1717
```
1818

19-
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.
19+
ब्राउज़र DOM एलिमेंट्स के विपरीत, React एलिमेंट्स प्लेन ऑब्जेक्ट है और इन्हें बनाना आसान है। React DOM React एलिमेंट्स के अनुसार DOM को अपडेट रखता है।
2020

21-
>**Note:**
21+
>**ध्यान दें:**
2222
>
23-
>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.
23+
> आप एलिमेंट्स को बहुचर्चित "कौम्पोनॅन्टस" समझ कर भ्रमित हो सकते है, हम कौम्पोनॅन्टस के बारे में [अगले भाग](/docs/components-and-props.html) में बतायेंगे। एलिमेंट्स वो है जिनका उपयोग करके एक कौम्पोनॅन्ट को बनाया जाता है। आगे बढ़ने से पहले हम इस भाग को पड़ने की सलाह देते हैं।
2424
25-
## Rendering an Element into the DOM {#rendering-an-element-into-the-dom}
25+
## DOM में एक एलिमेंट रेंडर करना {#rendering-an-element-into-the-dom}
2626

27-
Let's say there is a `<div>` somewhere in your HTML file:
27+
मान लीजिए की आपकी HTML फ़ाइल में कहीं एक `<div>` है:
2828

2929
```html
3030
<div id="root"></div>
3131
```
3232

33-
We call this a "root" DOM node because everything inside it will be managed by React DOM.
33+
हम इसे "रूट" DOM नोड कहते है क्यूँकि इसके अंदर की सारी चीज़ें React DOM के द्वारा संचालित होगी।
3434

35-
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.
3635

37-
To render a React element into a root DOM node, pass both to `ReactDOM.render()`:
36+
React के उपयोग से बने ज़्यादातर ऐप्लिकेशन में एक ही रूट DOM नोड होता है। परंतु यदि आप React को किसी पहले से बने हुए app में उपयोग करना चाहते है तो आप कितने भी अलग अलग रूट DOM नोड बना सकते है।
37+
38+
एक React एलिमेंट्स को DOM नोड में दर्शाने के लिए, आपको इन दोनो को `ReactDOM.render()` में भेजना पड़ेगा:
3839

3940
`embed:rendering-elements/render-an-element.js`
4041

4142
[](codepen://rendering-elements/render-an-element)
4243

43-
It displays "Hello, world" on the page.
44+
ये "Hello world" को पेज पर दर्शाता है।
4445

45-
## Updating the Rendered Element {#updating-the-rendered-element}
46+
## पहले से बने एलेमेंट को अपडेट करना {#updating-the-rendered-element}
4647

47-
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.
48+
React एलिमेंट्स [अचल](https://en.wikipedia.org/wiki/Immutable_object) होते है। एक बार एलेमेंट के बनने के बाद, आप उसके चिल्ड्रन या ऐट्रिब्यूट्स में परिवर्तन नहीं कर सकते। एक एलेमेंट एक चलचित्र के एक दृश्य के समान है, ये UI को एक निश्चित समय के लिए दर्शाता है।
4849

49-
With our knowledge so far, the only way to update the UI is to create a new element, and pass it to `ReactDOM.render()`.
50+
हमारे अब तक के ज्ञान के अनुसार, UI में परिवर्तन करने का एक ही तरीक़ा है। इसके लिए हमें एक नया एलेमेंट बना कर उसे `ReactDOM.render()` को भेजना पड़ेगा।
5051

51-
Consider this ticking clock example:
52+
इस टिकिंग घड़ी उदाहरण पर विचार करें:
5253

5354
`embed:rendering-elements/update-rendered-element.js`
5455

5556
[](codepen://rendering-elements/update-rendered-element)
5657

57-
It calls `ReactDOM.render()` every second from a [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback.
58+
ये `ReactDOM.render()` को प्रत्येक सेकंड [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback से कॉल करता है।
5859

59-
>**Note:**
60+
>**ध्यान दें:**
6061
>
61-
>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).
62+
>व्यवहार में, ज़्यादातर React apps `ReactDOM.render()` को एक ही बार कॉल करते है। अगले भाग में हम ये सीखेंगे कि कैसे इस तरह के कोड को [stateful components](/docs/state-and-lifecycle.html) में एन्काप्सुलेट करते है।
6263
>
63-
>We recommend that you don't skip topics because they build on each other.
64+
>हम अनुशंसा करते हैं कि आप विषयों को छोड़ें नहीं क्योंकि वे एक-दूसरे पर निर्माण करते हैं।
6465
65-
## React Only Updates What's Necessary {#react-only-updates-whats-necessary}
66+
## React वही अपडेट करता है जो आवश्यक है {#react-only-updates-whats-necessary}
6667

67-
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.
68+
React, DOM एलिमेंट्स और उसके चिल्डरेंस की तुलना उसके पहले की अवस्था से करता है और केवल उन्ही चीज़ों में परिवर्तन करता जिससे की DOM अपने चाहे state में आ जाए।
6869

69-
You can verify by inspecting the [last example](codepen://rendering-elements/update-rendered-element) with the browser tools:
70+
आप ब्राउज़र टूलस की सहायता से [अंतिम उदाहरण](codepen://rendering-elements/update-rendered-element) का निरीक्षण करके सत्यापित कर सकते हैं:
7071

7172
![DOM inspector showing granular updates](../images/docs/granular-dom-updates.gif)
7273

73-
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.
74+
भले ही हम हर टिक पर पूरे UI ट्री का वर्णन करने वाला एक एलेमेंट बनाते हैं, लेकिन केवल Text नोड जिसकी सामग्री बदल गई है वह React DOM द्वारा अपडेट हो जाता है।
7475

75-
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.
76+
हमारे अनुभव से, UI को कैसे अप्डेट करना है के बिपरीत यदि हम ये सोचे की UI को किसी समय कैसे दिखाना है तो हम बहुत सारी बग से बच सकते है।

0 commit comments

Comments
 (0)