Skip to content
This repository has been archived by the owner on Apr 21, 2023. It is now read-only.

rendering-elements translations #5

Merged
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
50 changes: 25 additions & 25 deletions content/docs/rendering-elements.md
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 રજૂ કરે છે.

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 અપરિવર્તીત


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) ની સંપૂર્ણ શ્રેણીને દૂર કરે છે.