This repository has been archived by the owner on Apr 21, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 33
rendering-elements translations #5
Merged
3sanket3
merged 7 commits into
stale-reactjs-org-translations:master
from
sonipreshita:feature_lang
Mar 31, 2019
Merged
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit
Hold shift + click to select a range
e6d2e63
rendering-elements translations
sonipreshita 727531a
change word
sonipreshita 1808d87
change word
sonipreshita 5cdf450
change word
sonipreshita afa4964
change word
sonipreshita 30cf27e
change word
sonipreshita 11efbce
review and update necessary sentences & glossaries
3sanket3 File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,75 +1,75 @@ | ||
--- | ||
id: rendering-elements | ||
title: Rendering Elements | ||
title: રેન્ડરિંગ તત્વો | ||
permalink: docs/rendering-elements.html | ||
redirect_from: | ||
- "docs/displaying-data.html" | ||
prev: introducing-jsx.html | ||
next: components-and-props.html | ||
--- | ||
|
||
Elements are the smallest building blocks of React apps. | ||
તત્વો(Elements) એ React એપ્લિકેશન્સના નાના બિલ્ડિંગ બ્લોક્સ છે. | ||
|
||
An element describes what you want to see on the screen: | ||
તમે સ્ક્રીન પર શું જોવા માંગો છો તેનું એક તત્વ(Element) વર્ણન કરે છે: | ||
|
||
```js | ||
const element = <h1>Hello, world</h1>; | ||
``` | ||
|
||
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. | ||
React Elements સાદા ઑબ્જેક્ટ્સ છે અને તે બનાવવા માટે સસ્તા છે, જે બ્રાઉઝર DOM Elements થી વિપરીત છે. React DOM,React Elements સાથે મેચ કરવા માટે 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. | ||
>એક "components" ની વધુ જાણીતી ખ્યાલ સાથે elements ને ભ્રમિત કરી શકે છે. અમે [આગામી વિભાગ](/docs/components-and-props.html) માં components રજૂ કરીશું. Elements એ છે કે કયા components "બનેલા છે" અને આગળ વધતા પહેલાં અમે તમને આ વિભાગ વાંચવા માટે પ્રોત્સાહિત કરીએ છીએ. | ||
|
||
## 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 `<div>` somewhere in your HTML file: | ||
ચાલો કહીએ કે તમારી HTML ફાઇલમાં ક્યાંક `<div>` છે. | ||
|
||
```html | ||
<div id="root"></div> | ||
``` | ||
|
||
We call this a "root" DOM node because everything inside it will be managed by React DOM. | ||
અમે તેને "root" DOM node કહીએ છીએ કારણ કે તેની અંદરની દરેક વસ્તુ 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. | ||
React સાથે બનેલી એપ્લિકેશન્સમાં સામાન્ય રૂપે એક જ root DOM node હોય છે. જો તમે અસ્તિત્વમાં છે તે એપ્લિકેશનમાં React ને સંકલિત કરી રહ્યાં છો, તો તમને ગમે તેટલા અલગ root DOM nodes હોઈ શકે છે. | ||
|
||
To render a React element into a root DOM node, pass both to `ReactDOM.render()`: | ||
React Element ને root DOM node માં રેન્ડર કરવા માટે, બંનેને `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} | ||
## 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 elements [અવ્યવસ્થિત](https://en.wikipedia.org/wiki/Immutable_object) છે. એકવાર તમે element બનાવી લો, પછી તમે તેના children અથવા attributes ને બદલી શકતા નથી. એક element મૂવીમાં એક ફ્રેમ જેવું છે: તે ચોક્કસ સમયે 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 ને અપડેટ કરવાની એકમાત્ર રીત એ એક નવું element બનાવવું છે અને તેને `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. | ||
તે [SetInterval()](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) કૉલબૅકથી પ્રત્યેક સેકન્ડમાં `ReactDOM.render()` ને કૉલ કરે છે. | ||
|
||
>**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 એપ્લિકેશનો ફક્ત એક વાર `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 તત્વ અને તેના children ની તુલના પહેલાની સરખામણીમાં કરે છે, અને DOM ને ઇચ્છિત સ્થિતિમાં લાવવા માટે જરૂરી DOM અપડેટ્સને લાગુ કરે છે. | ||
|
||
You can verify by inspecting the [last example](codepen://rendering-elements/update-rendered-element) with the browser tools: | ||
તમે બ્રાઉઝર inspecting સાથે [છેલ્લું ઉદાહરણ](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 tree નું વર્ણન કરતી element બનાવીએ, ફક્ત text node જેનો સમાવિષ્ટો બદલાઈ ગયો છે તે 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 એ કોઈપણ ક્ષણને કેવી રીતે જોવું જોઈએ તે વિશે વિચારીને બગ્સ(bugs) ની સંપૂર્ણ શ્રેણીને દૂર કરે છે. |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
અવ્યવસ્થિત is not a correct word, it should be અપરિવર્તીત